NiPlayer

Planung

Refactoring mit RSPACK + Solid-JS + Solid-Store + PNPM + Monorepo;

Die Gesamtstruktur des Players ist in Spielerschicht, Speichern und Pluginschicht unterteilt.

• Speicher: Speichert alle Staaten, die sich auf den Spieler beziehen und die zugrunde liegende API für den externen Gebrauch (Auflösungsumschaltung, Lautstärkerwechsel usw.) bereitstellen.
• Plugin: Schreiben Sie die Benutzeroberfläche und die funktionale Logik des Spielers, abonnieren Sie den Status im Geschäft, binden Sie die Benutzeroberfläche und den Status mit der von Solid-JS bereitgestellten JSX-View-Lösung und implementieren Sie die staatlich gesteuerte Benutzeroberfläche.
• Spieler: Das Beispielobjekt des Spielers und das Drittanbieter verwenden Portal als Brücke zum Verknüpfen von Plugin und Speichern. Zum Beispiel: Der Laden kann Ereignisse mit Hilfe des Spielers auslösen und abonnieren, und das Plugin kann mit Hilfe des Spielers Staaten im Geschäft abonnieren.

Konfigurationsbezogen

TS Decorator Configuration

• tsconfig.json konfigurieren experimentalDecoratoren auf true

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

• rspack.config.cjs babel-loader-Plugins-Konfiguration **["@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-Konfiguration

Standardmäßig kompiliert TSX VDOM mit Reacts React.createlement (einschließlich React/JSX-Runtime, die auch für JSX-Typ-Eingabeaufforderungen gefunden wird). Wenn Sie also eine solide-js + TSX-Kombination verwenden möchten, müssen Sie eine spezielle Konfiguration in tsconfig.json und rspack.config.cJs durchführen:

• tsconfig.json

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

• rspack.config.cjs konfiguriert Babel-Loader wie folgt:

  • Voreinstellungen: Solid @Babel/Preset-TypePescript

Gesamtkompilierungsprozess:

1. @babel/Preset-Typescript + tsconfig.json wird TSX → JSX und die JSX-Syntax darin behalten (weil das Erhaltung der JSX-Konfiguration von Tsconfig.json);
2. Solid kompiliert die JSX -Syntax in JS -Code

Verwandte Dokumente: https://niplayer.js.org/