NiPlayer

planificación

Refactorización usando RSPACK + SOLID-JS + SOLID-SHORE + PNPM + MONOREPO;

La estructura general del jugador se divide en la capa del jugador, la capa de almacenamiento y la capa de complemento;

• Almacena: almacena todos los estados relacionados con el jugador, proporcionando la API subyacente para uso externo (conmutación de resolución, conmutación de volumen, etc.).
• Plugin: escriba la UI y la lógica funcional del jugador, suscríbase al estado en la tienda, vincule la UI y el estado utilizando la solución de vista JSX proporcionada por SOLID-JS e implementen la UI impulsada por el estado.
• Jugador: el objeto de muestra del jugador y el portal de uso de terceros, como un puente para vincular el complemento y almacenar. Por ejemplo: la tienda puede activar y suscribirse a eventos con la ayuda del jugador, y el complemento puede suscribirse a los estados en la tienda con la ayuda del jugador.

Relacionado con la configuración

Configuración del decorador TS

• tsconfig.json configure los decoradores experimentales en verdad

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

• rspack.config.cjs Configuración de complementos 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 } ] ]
              } ,
            } ,
          ] ,
        }
      ]
    }
  } ) ;

Configuración TSX de Solid-JS

Por defecto, TSX compila VDOME usando React's React.CreatElement (incluido React/JSX-Runtime que también se encuentra para las indicaciones de tipo JSX); Por lo tanto, si desea utilizar la combinación Solid-JS + TSX, debe realizar una configuración especial en tsconfig.json y rspack.config.cjs respectivamente:

• tsconfig.json

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

• rspack.config.cjs configura Babel-Loader de la siguiente manera:

  • Presets: Solid @Babel/Preset-Typescript

Proceso general de compilación:

1. @babel/preset-typescript + tsconfig.json tsx → jsx, y conservar la sintaxis jsx en ella (porque la reserva de la configuración JSX de tsconfig.json);
2. Sólido compila la sintaxis JSX en el código JS

Documentos relacionados: https://niplayer.js.org/