NiPlayer

perencanaan

Refactoring menggunakan rspack + solid-js + solid-store + pnpm + monorepo;

Struktur keseluruhan pemain dibagi menjadi lapisan pemain, lapisan toko, dan lapisan plugin;

• Store: Menyimpan semua negara bagian yang terkait dengan pemain, menyediakan API yang mendasarinya untuk penggunaan eksternal (switching resolusi, switching volume, dll.).
• Plugin: Tulis UI pemain dan logika fungsional, berlangganan keadaan di toko, mengikat UI dan negara menggunakan solusi tampilan JSX yang disediakan oleh Solid-Js, dan mengimplementasikan UI yang digerakkan oleh negara.
• Pemain: Objek sampel pemain dan portal penggunaan pihak ketiga, sebagai jembatan untuk menghubungkan plugin dan toko. Misalnya: Toko dapat memicu dan berlangganan acara dengan bantuan pemain, dan plugin dapat berlangganan status di toko dengan bantuan pemain.

Terkait konfigurasi

Konfigurasi Dekorator TS

• tsconfig.json Mengkonfigurasi Eksperimental Dekorator ke True

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

• rspack.config.cjs konfigurasi plugin 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 } ] ]
              } ,
            } ,
          ] ,
        }
      ]
    }
  } ) ;

Konfigurasi Solid-JS TSX

Secara default, TSX mengkompilasi VDOM menggunakan React's React. Oleh karena itu, jika Anda ingin menggunakan kombinasi solid-js + tsx, Anda perlu melakukan konfigurasi khusus di tsconfig.json dan rspack.config.cjs masing-masing:

• tsconfig.json

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

• rspack.config.cjs Mengkonfigurasi Babel-Loader sebagai berikut:

  • Preset: Solid @Babel/Preset-Typescript

Proses kompilasi keseluruhan:

1. @babel/preset-typescript + tsconfig.json akan tsx → jsx, dan mempertahankan sintaks JSX di dalamnya (karena cagar alam konfigurasi JSX tsconfig.json);
2. Solid Compiles JSX Sintaks ke dalam Kode JS

Dokumen Terkait: https://niplayer.js.org/