NiPlayer

планирование

Рефакторинг с использованием RSPACK + SOLID-JS + SOLID STORE + PNPM + MONOREPO;

Общая структура игрока разделена на слой игрока, слой магазина и слой плагина;

• Храните: хранит все штаты, связанные с игроком, предоставляя базовый API для внешнего использования (переключение разрешения, переключение громкости и т. Д.).
• Плагин: Напишите пользовательский интерфейс и функциональную логику игрока, подпишитесь на состояние в магазине, свяжите пользовательский интерфейс и состояние, используя решение JSX View, предоставленное Solid-JS, и реализовать постоянный пользовательский интерфейс.
• Игрок: образцевой объект игрока и сторонний портал использования в качестве моста для плагина для ссылки и хранения. Например: магазин может запустить и подписаться на события с помощью игрока, а плагин может подписаться на штаты в магазине с помощью игрока.

Связанная с конфигурацией

TS Decorator Configuration

• tsconfig.json настраивает экспериментальные предложения на True

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

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

Solid-JS TSX Конфигурация

По умолчанию TSX компилирует VDOM с использованием React React.createlement (включая React/JSX-runtime, который также обнаружен для подсказок типа JSX); Поэтому, если вы хотите использовать комбинацию Solid-JS + TSX, вам необходимо выполнить специальную конфигурацию в tsconfig.json и rspack.config.cjs соответственно:

• tsconfig.json

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

• rspack.config.cjs настраивает Babel-Loader следующим образом:

  • ПРЕДУПРЕТЫ: твердый @Babel/Preset-тип

Общий процесс компиляции:

1. @babel/preset-typescript + tsconfig.json будет tsx → jsx и сохранит в нем синтаксис JSX (потому что заповедник конфигурации JSX в TSConfig.json);
2. Solid Compiles JSX синтаксис в код JS

Связанные документы: https://niplayer.js.org/