Skip to content

Latest commit

 

History

History
82 lines (62 loc) · 2.55 KB

readme.md

File metadata and controls

82 lines (62 loc) · 2.55 KB


规划

使用 rspack + solid-js + solid-store + pnpm + monorepo 进行重构;

播放器整体结构划分为 player层,store层,plugin层;

  • store: 存储播放器相关的所有state,提供底层api供外部使用(清晰度切换,音量切换等)。
  • plugin: 编写播放器的UI和功能逻辑,通过订阅store中的state,使用 solid-js 提供的jsx视图解决方案将 UI 和 state 进行绑定,实现state驱动ui。
  • player: 播放器的示例对象和第三方使用入口,作为链接plugin和store的桥梁例如:store借助player可以触发和订阅事件,plugin借助player可以订阅store内的状态。

配置相关

TS装饰器配置

  • tsconfig.json 配置 experimentalDecorators 为 true

    {
        "compilerOptions": {
            "target": "ESNext",
            "module": "ES6",
            "experimentalDecorators": true
        }
    }
  • rspack.config.cjs babel-loader 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}] ]
                },
              },
            ],
          }
        ]
      }
    });

solid-js tsx配置

tsx默认其编译是使用react的React.creatElement创建Vdom(包括jsx类型提示也是找的react/jsx-runtime); 因此若想使用 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 如下:

    • presets: solid @babel/preset-typescript

整体编译流程:

  1. @babel/preset-typescript + tsconfig.json 将 tsx → jsx, 并且保留其中的jsx语法(因为 tsconfig.json 的 jsx 配置的 preserve);
  2. solid 将 jsx 语法编译为 js 代码

相关文档: https://niplayer.js.org/