NiPlayer

planification

Refactorisation en utilisant RSPACK + Solid-Js + Solid-Store + PNPM + MonorePO;

La structure globale du joueur est divisée en couche de lecteur, couche de stockage et couche de plugin;

• Store: stocke tous les états liés au joueur, fournissant l'API sous-jacent pour une utilisation externe (commutation de résolution, commutation de volume, etc.).
• Plugin: Écrivez l'interface utilisateur et la logique fonctionnelle du joueur, abonnez-vous à l'état dans le magasin, liez l'interface utilisateur et l'état à l'aide de la solution de vue JSX fournie par Solid-js et implémentez l'interface utilisateur basée sur l'État.
• Joueur: L'objet d'échantillonnage du joueur et le portail d'utilisation tiers, comme pont pour lier le plugin et le stockage. Par exemple: le magasin peut déclencher et s'abonner aux événements à l'aide de Player, et le plugin peut s'abonner aux États du magasin à l'aide de Player.

Lié à la configuration

Configuration du décorateur TS

• tsconfig.json Configurez des decorateurs expérimentaux à true

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

• RSPACK.Config.cjs Babel-Wadader Plugins Configuration **["@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 } ] ]
              } ,
            } ,
          ] ,
        }
      ]
    }
  } ) ;

Configuration Solid-JS TSX

Par défaut, TSX compile VDom en utilisant React React.CreateElement (y compris React / JSX-Runtime que l'on trouve également pour les invites de type JSX); Par conséquent, si vous souhaitez utiliser la combinaison Solid-JS + TSX, vous devez effectuer une configuration spéciale dans tsconfig.json et rspack.config.cjs respectivement:

• tsconfig.json

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

• Rspack.config.cjs configure Babel-chargedeur comme suit:

  • Presets: solide @ babel / prédéfini

Processus global de compilation:

1. @ babel / préset-typescript + tsconfig.json will tsx → jsx et conserver la syntaxe jsx dedans (parce que la préserve de la configuration JSX de Tsconfig.json);
2. Solid compile la syntaxe JSX dans le code JS

Documents connexes: https://niplayer.js.org/