solid.js source code analysis (1)

overview

solid.js is a simple, efficient, and high-performance JavaScript library for building user interfaces.

Simple and performant reactivity for building user interfaces.

characteristic:

• Fine-grained updates to the real DOM
• The component will only run once and will not re-execute the function body
  • React update will re-execute the function body every time
• Small in size and fast in operation
• Provides modern framework functionality
  • Such as JSX, code snippets, Suspense, error boundaries, concurrent rendering, etc.
• Web component is friendly and supports custom elements
• Support server-side rendering
• Support for custom renderers
  • By customizing the renderer, it can in principle run on any platform
• The community and ecology are gradually improving

Tool support:

• Read the source code: github.dev/solidjs/sol…
  • github.dev is a web editor that you can use to edit any warehouse, just press .the button .
• View compilation results: playground.solidjs.com

related articles:

• How to evaluate the front-end framework Solid?

• Intensive reading of "SolidJS"

• Introduction to Reactivity with SolidJS

• React vs SolidJS, Fight!

performance comparison

js-framework-benchmark

directory division

github.com/solidjs/sol…

packages

• solid: core module, including solid.js basic capability realization
• solid-element: related to WebComponents
• solid-ssr: related to ssr, providing auxiliary tools for ssr rendering
• babel-preset-solid: babel implementation, used to convert jsx related content
• test-integration: test related content

code debugging

packages/solid/package.json

• vscode debug code
• Turn on source code maps

{
-  "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",
    // ...
  },
}

packages/solid/rollup.config.js

• Configure whether to enable the test environment

• After configuring the package file to map, debugging other files is similar

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"
+        }
      }
    ],
   	// ...
  }
]

Next, you can run pnpm run buildthe command to package the code, then create a test case, and import the packaged code.

Configuration case