NiPlayerのダウンロードNiPlayerソースコードのダウンロード

NiPlayer

ウェブサイトデータ

V1.4.3

ダウンロード

計画

RSPACK + SOLID-JS + SOLID-STORE + PNPM + MONOREPOを使用したリファクタリング。

プレーヤーの全体的な構造は、プレーヤーレイヤー、ストアレイヤー、プラグインレイヤーに分割されます。

ストア：プレーヤーに関連するすべての州を保存し、外部使用のための基礎となるAPI（解像度スイッチング、ボリュームスイッチングなど）を提供します。
プラグイン：プレーヤーのUIと機能ロジックを記述し、ストア内の状態を購読し、SOLID-JSが提供するJSXビューソリューションを使用してUIと状態を結合し、状態主導のUIを実装します。
プレーヤー：プレーヤーのサンプルオブジェクトとサードパーティは、プラグインとストアをリンクするブリッジとしてポータルを使用します。たとえば、ストアはプレーヤーの助けを借りてイベントをトリガーして購読でき、プラグインはプレーヤーの助けを借りて店内の州を購読できます。

構成関連

TSデコレータ構成

tsconfig.json experiment experimentAldeCoratorsをtrueに構成します

 {
    "compilerOptions" : {
        "target" : "ESNext" ,
        "module" : "ES6" ,
        "experimentalDecorators" : true
    }
}

rspack.config.cjs babel-loaderプラグイン構成**["@babel/plugin-proposal-decorators", { "legacy": true}] ]**

 // @ts-check
const { defineConfig } = require ( '@rspack/cli' ) ;
const path = require ( 'path' ) ;

const config = defineConfig ( {
  module : {
    rules : [
      {
        test : / .(j|t)sx?$ / ,
        use : [
          {
            loader : 'babel-loader' ,
            options : {
              presets : [ 'solid' , '@babel/preset-typescript' ] ,
              plugins : [ 'solid-styled-jsx/babel' , [ "@babel/plugin-proposal-decorators" , { "legacy" : true } ] ]
            } ,
          } ,
        ] ,
      }
    ]
  }
} ) ;

SOLID-JS TSX構成

デフォルトでは、TSXはReactのReact.Createlement（JSXタイプのプロンプトにも見られるReact/JSX-Runtimeを含む）を使用してVDOMをコンパイルします。したがって、Solid-JS + TSXの組み合わせを使用する場合は、それぞれtsconfig.jsonとrspack.config.cjsで特別な構成を実行する必要があります。

tsconfig.json

 {
    "compilerOptions" : {
        "jsx" : "preserve" ,
        "jsxImportSource" : "solid-js" ,
        "module" : "ESNext" ,
        "moduleResolution" : "Bundler"
    } 
}