NiPlayer

planejamento

Refatoração usando rspack + sólido-js + armazém sólido + pnpm + monorepo;

A estrutura geral do jogador é dividida na camada de jogador, camada de armazenamento e camada de plug -in;

• Armazenamento: armazena todos os estados relacionados ao jogador, fornecendo a API subjacente para uso externo (comutação de resolução, comutação de volume etc.).
• Plug-in: escreva a interface do usuário e a lógica funcional do jogador, assine o estado na loja, vincule a interface do usuário e o estado usando a solução JSX View fornecida pelo Solid-Js e implemente a interface do usuário acionada pelo estado.
• Jogador: o objeto de amostra do jogador e o portal de uso de terceiros, como uma ponte para vincular o plug-in e a loja. Por exemplo: a loja pode acionar e assinar eventos com a ajuda do jogador, e o plug -in pode se inscrever nos estados da loja com a ajuda do jogador.

Configuração relacionada

Configuração do decorador TS

• tsconfig.json Configure o ExperimentalDecorators para True

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

• rspack.config.cjs Babel-carregador Configuração de plugins **["@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 } ] ]
              } ,
            } ,
          ] ,
        }
      ]
    }
  } ) ;

Configuração do Solid-JS TSX

Por padrão, o TSX compila VDOM usando o React.creatElement do React (incluindo react/jsx-runtime que também é encontrado para os prompts do tipo JSX); Portanto, se você deseja usar a combinação Solid-JS + TSX, precisará executar uma configuração especial em tsconfig.json e rspack.config.cjs, respectivamente:

• tsconfig.json

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

• rspack.config.cjs configura o carregador Babel como segue:

  • Predefinições: Solid @Babel/Tipo predefinido

Processo geral de compilação:

1. @Babel/TypeScript + TSconfig.json Will TSX → JSX e retém a sintaxe JSX nele (porque a reserva da configuração JSX do tsconfig.json);
2. sólido compila a sintaxe JSX no código JS

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