solid.js ソースコード分析 (1)

概要

solid.js は、ユーザーインターフェースを構築するためのシンプルで効率的かつ高性能な JavaScript ライブラリです。

ユーザーインターフェイスを構築するためのシンプルでパフォーマンスの高い反応性。

特性：

実際の DOM に対するきめの細かい更新
コンポーネントは一度だけ実行され、関数本体を再実行しません
- React update は毎回関数本体を再実行します
小型で動作が速い
最新のフレームワーク機能を提供
- JSX、コードスニペット、サスペンス、エラー境界、同時レンダリングなど。
Web コンポーネントは使いやすく、カスタム要素をサポートしています
サーバー側のレンダリングをサポート
カスタムレンダラーのサポート
- レンダラーをカスタマイズすることで、原則としてどのプラットフォームでも動作可能
コミュニティとエコロジーは徐々に改善されています

ツールのサポート:

ソースコードを読む: github.dev/solidjs/sol…
- github.dev は、任意のウェアハウスを編集するために使用できる Web エディターです。github ウェアハウスの.ボタンを。
コンパイル結果を表示する：playground.solidjs.com

性能比較

js-framework-ベンチマーク

パフォーマンス.png

ディレクトリ分割

github.com/solidjs/sol…

パッケージ

solid: solid.js の基本機能の実現を含むコアモジュール
solid-element: WebComponents 関連
solid-ssr: ssr に関連し、ssr レンダリング用の補助ツールを提供します
babel-preset-solid: jsx 関連コンテンツの変換に使用される babel 実装
test-integration: テスト関連のコンテンツ

コードのデバッグ

パッケージ/固体/package.json

vscode デバッグコード
ソースコードマップをオンにする

{
-  "type": "module",
+  "type": "commonjs"
  "scripts": {
    "build": "npm-run-all -nl build:*",
    "build:clean": "rimraf dist/ coverage/ store/dist/ web/dist/ h/dist/ h/jsx-runtime/dist html/dist/",
-    "build:js": "rollup -c",
+    "build:js": "rollup -c  --sourcemap",
    // ...
  },
}

パッケージ/ソリッド/ロールアップ.config.js

テスト環境を有効にするかどうかを構成する
マップするパッケージファイルを構成した後、他のファイルのデバッグは同様です

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: "dist/solid.cjs",
        format: "cjs"
      },
      {
        file: "dist/solid.js",
        format: "es"
      }
    ],
    plugins: [
      replace({
-       '"_SOLID_DEV_"': false,
        preventAssignment: true,
        delimiters: ["", ""]
      })
    ].concat(plugins)
  },
  {
    input: "web/src/index.ts",
    output: [
      {
        file: "web/dist/web.cjs",
        format: "cjs"
      },
      {
        file: "web/dist/web.js",
        format: "es",
+        paths: {
+          "solid-js": "../../dist/solid.js"
+        }
      }
    ],
   	// ...
  }
]

次に、pnpm run buildコマンドコードをパッケージ化し、テストケースを作成して、パッケージ化されたコードをインポートします。

構成ケース

solid.js ソースコード分析 (1)

概要

性能比較

ディレクトリ分割

コードのデバッグ

おすすめ