fix(reactivity): fix for dependency

refactor(parse): use bitmap instead of dependency map
2024-05-10 16:54:38 +08:00 · 2024-05-08 15:56:42 +08:00 · 2024-04-29 17:58:19 +08:00 · 2024-04-28 21:02:37 +08:00 · 2024-04-25 15:58:26 +08:00 · 2024-04-25 11:46:11 +08:00
223 changed files with 19575 additions and 49 deletions
--- a/.changeset/README.md
+++ b/.changeset/README.md
@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
--- a/.changeset/config.json
+++ b/.changeset/config.json
@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": ["create-inula", "openinula", "inula-cli", "inula-dev-tools", "inula-intl", "inula-request", "inula-router", "inula-vite-app", "inula-webpack-app"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -1,10 +1,11 @@
-/node_modules
+node_modules
 .idea
 .vscode
 package-lock.json
 pnpm-lock.yaml
-/packages/**/node_modules
 /packages/inula-cli/lib
 build
 /packages/inula-router/connectRouter
 /packages/inula-router/router
+dist
+.history
--- a/demos/benchmark/index.html
+++ b/demos/benchmark/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <title>Inula-next</title>
+</head>
+<body>
+<div id="main"></div>
+<script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
--- a/demos/benchmark/package.json
+++ b/demos/benchmark/package.json
@ -0,0 +1,25 @@
+{
+  "name": "dev",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/standalone": "^7.22.4",
+    "@openinula/next": "workspace:*",
+    "@iandx/easy-css": "^0.10.14",
+    "babel-preset-inula-next": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-inula-next": "workspace:*"
+  },
+  "keywords": [
+    "dlight.js"
+  ]
+}
--- a/demos/benchmark/src/main.jsx
+++ b/demos/benchmark/src/main.jsx
@ -0,0 +1,148 @@
+import { render, View } from '@openinula/next';
+
+let idCounter = 1;
+
+const adjectives = [
+  'pretty',
+  'large',
+  'big',
+  'small',
+  'tall',
+  'short',
+  'long',
+  'handsome',
+  'plain',
+  'quaint',
+  'clean',
+  'elegant',
+  'easy',
+  'angry',
+  'crazy',
+  'helpful',
+  'mushy',
+  'odd',
+  'unsightly',
+  'adorable',
+  'important',
+  'inexpensive',
+  'cheap',
+  'expensive',
+  'fancy',
+];
+const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
+const nouns = [
+  'table',
+  'chair',
+  'house',
+  'bbq',
+  'desk',
+  'car',
+  'pony',
+  'cookie',
+  'sandwich',
+  'burger',
+  'pizza',
+  'mouse',
+  'keyboard',
+];
+
+function _random(max) {
+  return Math.round(Math.random() * 1000) % max;
+}
+
+function buildData(count) {
+  const data = new Array(count);
+  for (let i = 0; i < count; i++) {
+    data[i] = {
+      id: idCounter++,
+      label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
+    };
+  }
+  return data;
+}
+
+function Button({ id, text, fn }) {
+  return (
+    <div class="col-sm-6 smallpad">
+      <button id={id} class="btn btn-primary btn-block" type="button" onClick={fn}>
+        {text}
+      </button>
+    </div>
+  );
+}
+
+function App() {
+  let data = [];
+  let selected = null;
+  function run() {
+    data = buildData(1000);
+  }
+  function runLots() {
+    data = buildData(10000);
+  }
+  function add() {
+    data.push(...buildData(1000));
+  }
+  function update() {
+    for (let i = 0; i < data.length; i += 10) {
+      data[i].label += ' !!!';
+    }
+  }
+  function swapRows() {
+    if (data.length > 998) {
+      [data[1], data[998]] = [data[998], data[1]];
+    }
+  }
+  function clear() {
+    data = [];
+  }
+  function remove(id) {
+    data = data.filter(d => d.id !== id);
+  }
+  function select(id) {
+    selected = id;
+  }
+
+  return (
+    <div class="container">
+      <div class="jumbotron">
+        <div class="row">
+          <div class="col-md-6">
+            <h1>Inula-next Keyed</h1>
+          </div>
+          <div class="col-md-6">
+            <div class="row">
+              <Button id="run" text="Create 1,000 rows" fn={run} />
+              <Button id="runlots" text="Create 10,000 rows" fn={runLots} />
+              <Button id="add" text="Append 1,000 rows" fn={add} />
+              <Button id="update" text="Update every 10th row" fn={update} />
+              <Button id="clear" text="Clear" fn={clear} />
+              <Button id="swaprows" text="Swap Rows" fn={swapRows} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <table class="table table-hover table-striped test-data">
+        <tbody>
+          <for array={data} item={{ id, label }} key={id}>
+            <tr class={selected === id ? 'danger' : ''}>
+              <td class="col-md-1" textContent={id} />
+              <td class="col-md-4">
+                <a onClick={select.bind(this, id)} textContent={label} />
+              </td>
+              <td class="col-md-1">
+                <a onClick={remove.bind(this, id)}>
+                  <span class="glyphicon glyphicon-remove" aria-hidden="true" />
+                </a>
+              </td>
+              <td class="col-md-6" />
+            </tr>
+          </for>
+        </tbody>
+      </table>
+      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
+    </div>
+  );
+}
+
+render(App, 'main');
--- a/demos/benchmark/vite.config.js
+++ b/demos/benchmark/vite.config.js
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import inula from 'vite-plugin-inula-next';
+
+export default defineConfig({
+  server: {
+    port: 4320,
+  },
+  base: '',
+  optimizeDeps: {
+    disabled: true,
+  },
+  plugins: [inula({ files: '**/*.{tsx,jsx}' })],
+});
--- a/demos/v2/CHANGELOG.md
+++ b/demos/v2/CHANGELOG.md
@ -0,0 +1,8 @@
+# dev
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [2f9d373]
+  - babel-preset-inula-next@0.0.2
--- a/demos/v2/index.html
+++ b/demos/v2/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <title>Dlight.JS</title>
+  <link rel="stylesheet" href="/src/App.css"/>
+</head>
+<body>
+<div id="main"></div>
+<script type="module" src="/src/App.tsx"></script>
+</body>
+</html>
--- a/demos/v2/package.json
+++ b/demos/v2/package.json
@ -0,0 +1,25 @@
+{
+  "name": "dev",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/standalone": "^7.22.4",
+    "@openinula/next": "workspace:*",
+    "@iandx/easy-css": "^0.10.14",
+    "babel-preset-inula-next": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-inula-next": "workspace:*"
+  },
+  "keywords": [
+    "dlight.js"
+  ]
+}
--- a/demos/v2/src/App.css
+++ b/demos/v2/src/App.css
@ -0,0 +1,3 @@
+.ok {
+  color: var(--color-ok);
+}
--- a/demos/v2/src/App.tsx
+++ b/demos/v2/src/App.tsx
@ -0,0 +1,17 @@
+import { View, render } from '@openinula/next';
+
+function MyComp() {
+  let count = 0;
+  const db = count * 2;
+
+  return (
+    <>
+      <h1 className="123">Hello dlight fn comp</h1>
+      <section>
+        count: {count}, double is: {db}
+        <button onClick={() => (count += 1)}>Add</button>
+      </section>
+    </>
+  );
+}
+render(MyComp, 'main');
--- a/demos/v2/tsconfig.json
+++ b/demos/v2/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true
+  },
+  "ts-node": {
+    "esm": true
+  }
+}
--- a/demos/v2/vite.config.ts
+++ b/demos/v2/vite.config.ts
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import inula from 'vite-plugin-inula-next';
+
+export default defineConfig({
+  server: {
+    port: 4320,
+  },
+  base: '',
+  optimizeDeps: {
+    disabled: true,
+  },
+  plugins: [inula({ files: '**/*.{ts,js,tsx,jsx}' })],
+});
--- a/docs/inula-next/README.md
+++ b/docs/inula-next/README.md
@ -0,0 +1,117 @@
+# Todo-list
+
+- [ ] function 2 class.
+  - [x] assignment 2 property
+  - [x] statement 2 watch func
+  - [ ] handle `props` @HQ
+    - [x] object destructuring
+    - [x] default value
+    - [ ] partial object destructuring
+    - [ ] nested object destructuring
+    - [ ] nested array destructuring
+    - [x] alias
+  - [x] add `this` @HQ
+  - [x] for (jsx-parser) -> playground + benchmark @YH
+  - [x] lifecycle @HQ
+  - [x] ref @HQ (to validate)
+  - [x] env @HQ (to validate)
+  - [ ] Sub component
+  - [ ] Early Return
+  - [ ] custom hook -> Model @YH
+- [ ] JSX
+  - [x] style
+  - [x] fragment
+  - [x] ref (to validate)
+  - [ ] snippet
+  - [x] for
+
+
+# function component syntax
+
+- [ ] props (destructuring | partial destructuring | default value | alias)
+- [ ] variable declaration -> class component property
+- [ ] function declaration ( arrow function | async function )-> class method
+- [ ] Statement -> watch function
+  - [ ] assignment
+  - [ ] function call
+  - [ ] class method call
+  - [ ] for loop
+  - [ ] while loop (do while, while, for, for in, for of)
+  - [ ] if statement
+  - [ ] switch statement
+  - [ ] try catch statement
+  - [ ] throw statement ? not support
+  - [ ] delete expression
+- [ ] lifecycle -> LabeledStatement
+- [ ] return statement -> render method(Body)
+- [ ] iife
+- [ ] early return
+
+
+# Issues
+- [ ] partial props destructuring -> support this.$props @YH
+```jsx
+function Input({onClick, xxx, ...props}) {
+  function handleClick() {
+    onClick()
+  }
+  return <input onClick={handleClick} {...props} />
+}
+```
+- [ ] model class declaration should before class component declaration -> use Class polyfill
+```jsx
+// Code like this will cause error: `FetchModel` is not defined
+@Main
+@View
+class MyComp {
+  fetchModel = use(FetchModel, { url: "https://api.example.com/data" })
+
+  Body() {}
+}
+
+@Model
+class FetchModel {}
+```
+- [ ] custom hook early return @YH
+- [ ] snippet
+```jsx
+  const H1 = <h1></h1>;
+  // {H1}
+  const H1 = (name) => <h1 className={name}></h1>;
+  // {H1()} <H1/>
+  function H1() {
+    return <h1></h1>;
+  }
+  // <H1/>
+```
+- [ ] Render text and variable, Got Error
+```jsx
+  // Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
+<button>Add, Now is {count}</button>
+```
+
+# Proposal
+## Watch
+
+自动将Statement包裹Watch的反例：
+```jsx
+  // 前置操作: 场景为Table组件，需要响应column变化，先置空column，再计算新的columnByKey
+  let columnByKey;
+  watch: {
+    columnByKey = {};
+    columns.forEach(col => {
+      columnByKey[col.key] = col;
+    });
+  }
+  // 临时变量: 场景为操作前的计算部分临时变量
+  watch: {
+    let col = columnByKey[sortBy];
+    if (
+      col !== undefined &&
+      col.sortable === true &&
+      typeof col.value === "function"
+    ) {
+      sortFunction = r => col.value(r);
+    }
+  }
+```
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
    "build:inula-intl": "pnpm -F inula-intl build",
    "build:inula-request": "pnpm -F inula-request build",
    "build:inula-router": "pnpm -F inula-router build",
+    "build:transpiler": "pnpm --filter './packages/transpiler/*' run build",
    "commitlint": "commitlint --config commitlint.config.js -e",
    "postinstall": "husky install"
  },
@ -80,5 +81,9 @@
  "engines": {
    "node": ">=10.x",
    "npm": ">=7.x"
+  },
+  "dependencies": {
+    "@changesets/cli": "^2.27.1",
+    "changeset": "^0.2.6"
  }
 }
--- a/packages/inula-cli/README.md
+++ b/packages/inula-cli/README.md
@ -54,7 +54,7 @@ inula-cli的推荐目录结构如下：
 │       └── inula-cli
 │           ├── lib
 ├── mock // mock目录
-│   └── mock.ts
+│   └── transform.ts
 ├── src // 项目源码目录
 │   ├── pages
 │   │   ├── index.less
@ -178,10 +178,10 @@ inula-cli的所有功能都围绕插件展开，插件可以很方便地让用

 inula-cli支持用户集成已发布在npm仓库的插件，用户可以按需安装并运行这些插件。

-安装可以通过npm安装，这里以插件@inula/add为例：
+安装可以通过npm安装，这里以插件@openinula/add为例：

 ```shell
-npm i --save-dev @inula/add
+npm i --save-dev @openinula/add
 ```

 如果需要运行插件，需要在配置文件中配置对应的插件路径
@ -191,7 +191,7 @@ npm i --save-dev @inula/add

 export default {
    ...
-    plugins:["@inula/add"]
+    plugins:["@openinula/add"]
 }
 ```

--- a/packages/inula-cli/externals.d.ts
+++ b/packages/inula-cli/externals.d.ts
@ -14,4 +14,3 @@
 */

 declare module 'crequire';
-
--- a/packages/inula-cli/src/builtInPlugins/command/dev/buildDev.ts
+++ b/packages/inula-cli/src/builtInPlugins/command/dev/buildDev.ts
@ -57,7 +57,7 @@ export default (api: API) => {
              api.applyHook({ name: 'afterStartDevServer' });
            });
          } else {
-            api.logger.error('Can\'t find config');
+            api.logger.error("Can't find config");
          }
          break;
        case 'vite':
@ -70,7 +70,7 @@ export default (api: API) => {
                server.printUrls();
              });
          } else {
-            api.logger.error('Can\'t find config');
+            api.logger.error("Can't find config");
          }
          break;
        default:
--- a/packages/inula-cli/src/builtInPlugins/command/generate/generate.ts
+++ b/packages/inula-cli/src/builtInPlugins/command/generate/generate.ts
@ -33,7 +33,7 @@ export default (api: API) => {
        args._.shift();
      }
      if (args._.length === 0) {
-        api.logger.warn('Can\'t find any generate options.');
+        api.logger.warn("Can't find any generate options.");
        return;
      }

--- a/packages/inula-intl/babel.config.js
+++ b/packages/inula-intl/babel.config.js
@ -16,10 +16,7 @@
 const { preset } = require('./jest.config');
 module.exports = {
  presets: [
-    [
-      '@babel/preset-env',
-      { targets: { node: 'current' } },
-    ],
+    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-typescript'],
    [
      '@babel/preset-react',
--- a/packages/inula-intl/rollup.config.js
+++ b/packages/inula-intl/rollup.config.js
@ -40,7 +40,7 @@ export default {
    {
      file: path.resolve(output, 'intl.esm-browser.js'),
      format: 'esm',
-    }
+    },
  ],
  plugins: [
    nodeResolve({
--- a/packages/inula-intl/src/parser/mappingRule.ts
+++ b/packages/inula-intl/src/parser/mappingRule.ts
@ -14,11 +14,11 @@
 */

 const body: Record<string, any> = {
-  doubleapos: { match: '\'\'', value: () => '\'' },
+  doubleapos: { match: "''", value: () => "'" },
  quoted: {
    lineBreaks: true,
    match: /'[{}#](?:[^]*?[^'])?'(?!')/u,
-    value: src => src.slice(1, -1).replace(/''/g, '\''),
+    value: src => src.slice(1, -1).replace(/''/g, "'"),
  },
  argument: {
    lineBreaks: true,
--- a/packages/inula-intl/tests/core/I18n.test.ts
+++ b/packages/inula-intl/tests/core/I18n.test.ts
@ -90,19 +90,19 @@ describe('I18n', () => {
  });
  it('._ allow escaping syntax characters', () => {
    const messages = {
-      'My \'\'name\'\' is \'{name}\'': 'Mi \'\'nombre\'\' es \'{name}\'',
+      "My ''name'' is '{name}'": "Mi ''nombre'' es '{name}'",
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
-    expect(i18n.formatMessage('My \'\'name\'\' is \'{name}\'')).toEqual('Mi \'nombre\' es {name}');
+    expect(i18n.formatMessage("My ''name'' is '{name}'")).toEqual("Mi 'nombre' es {name}");
  });

  it('._ should format message from catalog', function () {
    const messages = {
      Hello: 'Salut',
-      id: 'Je m\'appelle {name}',
+      id: "Je m'appelle {name}",
    };
    const i18n = new I18n({
      locale: 'fr',
@ -110,7 +110,7 @@ describe('I18n', () => {
    });
    expect(i18n.locale).toEqual('fr');
    expect(i18n.formatMessage('Hello')).toEqual('Salut');
-    expect(i18n.formatMessage('id', { name: 'Fred' })).toEqual('Je m\'appelle Fred');
+    expect(i18n.formatMessage('id', { name: 'Fred' })).toEqual("Je m'appelle Fred");
  });

  it('should return the formatted date and time', () => {
--- a/packages/inula-intl/tests/utils/eventListener.test.ts
+++ b/packages/inula-intl/tests/utils/eventListener.test.ts
@ -43,7 +43,7 @@ describe('eventEmitter', () => {
    expect(listener).not.toBeCalled();
  });

-  it('should do nothing when even doesn\'t exist', () => {
+  it("should do nothing when even doesn't exist", () => {
    const unknown = jest.fn();

    const emitter = new EventEmitter();
--- a/packages/inula-next-store/package.json
+++ b/packages/inula-next-store/package.json
@ -0,0 +1,38 @@
+{
+  "name": "@openinula/store",
+  "version": "0.0.0",
+  "description": "DLight shared store",
+  "author": {
+    "name": "IanDx",
+    "email": "iandxssxx@gmail.com"
+  },
+  "keywords": [
+    "dlight.js"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --sourcemap"
+  },
+  "devDependencies": {
+    "tsup": "^6.5.0",
+    "typescript": "^5.3.2"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "esm"
+    ],
+    "clean": true,
+    "dts": true,
+    "minify": true
+  }
+}
--- a/packages/inula-next-store/src/index.ts
+++ b/packages/inula-next-store/src/index.ts
@ -0,0 +1 @@
+export const Store = {};
--- a/packages/inula-next-store/tsconfig.json
+++ b/packages/inula-next-store/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "ts-node": {
+    "esm": true
+  }
+}
+
--- a/packages/inula-next/README.md
+++ b/packages/inula-next/README.md
@ -0,0 +1,2 @@
+# DLight Main Package
+See the website's documentations for usage.
--- a/packages/inula-next/package.json
+++ b/packages/inula-next/package.json
@ -0,0 +1,44 @@
+{
+  "name": "@openinula/next",
+  "version": "0.0.1",
+  "author": {
+    "name": "IanDx",
+    "email": "iandxssxx@gmail.com"
+  },
+  "keywords": [
+    "inula"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --sourcemap && cp src/index.d.ts dist/ && cp -r src/types dist/",
+    "test": "vitest --ui"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3",
+    "@openinula/store": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup": "^6.5.0",
+    "vite-plugin-inula-next": "workspace:*",
+    "vitest": "^1.2.2"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.js"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "clean": true,
+    "minify": true
+  }
+}
--- a/packages/inula-next/src/CompNode.js
+++ b/packages/inula-next/src/CompNode.js
@ -0,0 +1,373 @@
+import { DLNode, DLNodeType } from './DLNode';
+import { forwardHTMLProp } from './HTMLNode';
+import { DLStore, cached } from './store';
+import { schedule } from './scheduler';
+
+/**
+ * @class
+ * @extends import('./DLNode').DLNode
+ */
+export class CompNode extends DLNode {
+  /**
+   * @brief Constructor, Comp type
+   * @internal
+   *  * key - private property key
+   *  * $$key - dependency number, e.g. 0b1, 0b10, 0b100
+   *  * $s$key - set of properties that depend on this property
+   *  * $p$key - exist if this property is a prop
+   *  * $e$key - exist if this property is an env
+   *  * $en$key - exist if this property is an env, and it's the innermost env that contains this env
+   *  * $w$key - exist if this property is a watcher
+   *  * $f$key - a function that returns the value of this property, called when the property's dependencies change
+   *  * _$children - children nodes of type PropView
+   *  * _$contentKey - the key key of the content prop
+   *  * _$forwardProps - exist if this node is forwarding props
+   *  * _$forwardPropsId - the keys of the props that this node is forwarding, collected in _$setForwardProp
+   *  * _$forwardPropsSet - contain all the nodes that are forwarding props to this node, collected with _$addForwardProps
+   */
+  constructor() {
+    super(DLNodeType.Comp);
+  }
+
+  /**
+   * @brief Init function, called explicitly in the subclass's constructor
+   * @param props - Object containing properties
+   * @param content - Content to be used
+   * @param children - Child nodes
+   * @param forwardPropsScope - Scope for forwarding properties
+   */
+  _$init(props, content, children, forwardPropsScope) {
+    this._$notInitd = true;
+
+    // ---- Forward props first to allow internal props to override forwarded props
+    if (forwardPropsScope) forwardPropsScope._$addForwardProps(this);
+    if (content) this._$setContent(() => content[0], content[1]);
+    if (props)
+      props.forEach(([key, value, deps]) => {
+        if (key === 'props') return this._$setProps(() => value, deps);
+        this._$setProp(key, () => value, deps);
+      });
+    if (children) this._$children = children;
+
+    // ---- Add envs
+    DLStore.global.DLEnvStore &&
+      Object.entries(DLStore.global.DLEnvStore.envs).forEach(([key, [value, envNode]]) => {
+        if (key === '_$catchable') {
+          this._$catchable = value;
+          return;
+        }
+        if (!(`$e$${key}` in this)) return;
+        envNode.addNode(this);
+        this._$initEnv(key, value, envNode);
+      });
+
+    const willCall = () => {
+      this._$callUpdatesBeforeInit();
+      this.didMount && DLNode.addDidMount(this, this.didMount.bind(this));
+      this.willUnmount && DLNode.addWillUnmount(this, this.willUnmount.bind(this));
+      DLNode.addDidUnmount(this, this._$setUnmounted.bind(this));
+      this.didUnmount && DLNode.addDidUnmount(this, this.didUnmount.bind(this));
+      this.willMount?.();
+      this._$nodes = this.Body?.() ?? [];
+    };
+
+    if (this._$catchable) {
+      this._$catchable(willCall)();
+      if (this._$update) this._$update = this._$catchable(this._$update.bind(this));
+      this._$updateDerived = this._$catchable(this._$updateDerived.bind(this));
+      delete this._$catchable;
+    } else {
+      willCall();
+    }
+  }
+
+  _$setUnmounted() {
+    this._$unmounted = true;
+  }
+
+  /**
+   * @brief Call updates manually before the node is mounted
+   */
+  _$callUpdatesBeforeInit() {
+    const protoProps = Object.getOwnPropertyNames(Object.getPrototypeOf(this));
+    const ownProps = Object.getOwnPropertyNames(this);
+    const allProps = [...protoProps, ...ownProps];
+    allProps.forEach(key => {
+      // ---- Run watcher
+      if (key.startsWith('$w$')) return this[key.slice(3)]();
+      // ---- Run model update
+      if (key.startsWith('$md$')) {
+        const realKey = key.slice(4);
+        this[realKey] = this[realKey]();
+        return;
+      }
+      // ---- Run derived value
+      if (key.startsWith('$f$')) {
+        const realKey = key.slice(3);
+        this[realKey] = this[key];
+        this._$updateDerived(realKey);
+      }
+    });
+    delete this._$notInitd;
+  }
+
+  /**
+   * @brief Set all the props to forward
+   * @param key
+   * @param value
+   * @param deps
+   */
+  _$setPropToForward(key, value, deps) {
+    this._$forwardPropsSet.forEach(node => {
+      const isContent = key === '_$content';
+      if (node._$dlNodeType === DLNodeType.Comp) {
+        if (isContent) node._$setContent(() => value, deps);
+        else node._$setProp(key, () => value, deps);
+        return;
+      }
+      if (node instanceof HTMLElement) {
+        if (isContent) key = 'textContent';
+        forwardHTMLProp(node, key, () => value, deps);
+      }
+    });
+  }
+
+  /**
+   * @brief Define forward props
+   * @param key
+   * @param value
+   */
+  _$setForwardProp(key, valueFunc, deps) {
+    const notInitd = '_$notInitd' in this;
+    if (!notInitd && this._$cache(key, deps)) return;
+    const value = valueFunc();
+    if (key === '_$content' && this._$contentKey) {
+      this[this._$contentKey] = value;
+      this._$updateDerived(this._$contentKey);
+    }
+    this[key] = value;
+    this._$updateDerived(key);
+    if (notInitd) this._$forwardPropsId.push(key);
+    else this._$setPropToForward(key, value, deps);
+  }
+
+  /**
+   * @brief Add a node to the set of nodes that are forwarding props to this node and init these props
+   * @param node
+   */
+  _$addForwardProps(node) {
+    this._$forwardPropsSet.add(node);
+    this._$forwardPropsId.forEach(key => {
+      this._$setPropToForward(key, this[key], []);
+    });
+    DLNode.addWillUnmount(node, this._$forwardPropsSet.delete.bind(this._$forwardPropsSet, node));
+  }
+
+  /**
+   * @brief Cache the deps and return true if the deps are the same as the previous deps
+   * @param key
+   * @param deps
+   * @returns
+   */
+  _$cache(key, deps) {
+    if (!deps || !deps.length) return false;
+    const cacheKey = `$cc$${key}`;
+    if (cached(deps, this[cacheKey])) return true;
+    this[cacheKey] = deps;
+    return false;
+  }
+
+  /**
+   * @brief Set the content prop, the key is stored in _$contentKey
+   * @param value
+   */
+  _$setContent(valueFunc, deps) {
+    if ('_$forwardProps' in this) return this._$setForwardProp('_$content', valueFunc, deps);
+    const contentKey = this._$contentKey;
+    if (!contentKey) return;
+    if (this._$cache(contentKey, deps)) return;
+    this[contentKey] = valueFunc();
+    this._$updateDerived(contentKey);
+  }
+
+  /**
+   * @brief Set a prop directly, if this is a forwarded prop, go and init forwarded props
+   * @param key
+   * @param value
+   * @param deps
+   */
+  _$setProp(key, valueFunc, deps) {
+    if ('_$forwardProps' in this) return this._$setForwardProp(key, valueFunc, deps);
+    if (!(`$p$${key}` in this)) {
+      console.warn(`[${key}] is not a prop in ${this.constructor.name}`);
+      return;
+    }
+    if (this._$cache(key, deps)) return;
+    this[key] = valueFunc();
+    this._$updateDerived(key);
+  }
+
+  _$setProps(valueFunc, deps) {
+    if (this._$cache('props', deps)) return;
+    const props = valueFunc();
+    if (!props) return;
+    Object.entries(props).forEach(([key, value]) => {
+      this._$setProp(key, () => value, []);
+    });
+  }
+
+  /**
+   * @brief Init an env, put the corresponding innermost envNode in $en$key
+   * @param key
+   * @param value
+   * @param envNode
+   */
+  _$initEnv(key, value, envNode) {
+    this[key] = value;
+    this[`$en$${key}`] = envNode;
+  }
+
+  // ---- Update functions
+  /**
+   * @brief Update an env, called in EnvNode._$update
+   * @param key
+   * @param value
+   * @param envNode
+   */
+  _$updateEnv(key, value, envNode) {
+    if (!(`$e$${key}` in this)) return;
+    if (envNode !== this[`$en$${key}`]) return;
+    this[key] = value;
+    this._$updateDerived(key);
+  }
+
+  /**
+   * @brief Update a prop
+   */
+  _$ud(exp, key) {
+    this._$updateDerived(key);
+    return exp;
+  }
+
+  /**
+   * @brief Update properties that depend on this property
+   * @param key
+   */
+  _$updateDerived(key) {
+    if ('_$notInitd' in this) return;
+
+    this[`$s$${key}`]?.forEach(k => {
+      if (`$w$${k}` in this) {
+        // ---- Watcher
+        this[k](key);
+      } else if (`$md$${k}` in this) {
+        this[k]._$update();
+      } else {
+        // ---- Regular derived value
+        this[k] = this[`$f$${k}`];
+      }
+    });
+
+    // ---- "trigger-view"
+    this._$updateView(key);
+  }
+
+  _$updateView(key) {
+    if (this._$modelCallee) return this._$updateModelCallee();
+    if (!('_$update' in this)) return;
+    const depNum = this[`$$${key}`];
+    if (!depNum) return;
+    // ---- Collect all depNums that need to be updated
+    if ('_$depNumsToUpdate' in this) {
+      this._$depNumsToUpdate.push(depNum);
+    } else {
+      this._$depNumsToUpdate = [depNum];
+      // ---- Update in the next microtask
+      schedule(() => {
+        // ---- Abort if unmounted
+        if (this._$unmounted) return;
+        const depNums = this._$depNumsToUpdate;
+        if (depNums.length > 0) {
+          const depNum = depNums.reduce((acc, cur) => acc | cur, 0);
+          this._$update(depNum);
+        }
+        delete this._$depNumsToUpdate;
+      });
+    }
+  }
+
+  _$updateModelCallee() {
+    if ('_$depNumsToUpdate' in this) return;
+    this._$depNumsToUpdate = true;
+    // ---- Update in the next microtask
+    Promise.resolve().then(() => {
+      // ---- Abort if unmounted
+      if (this._$unmounted) return;
+      this._$modelCallee._$updateDerived(this._$modelKey);
+      delete this._$depNumsToUpdate;
+    });
+  }
+
+  /**
+   * @brief Update all props and content of the model
+   */
+  static _$updateModel(model, propsFunc, contentFunc) {
+    // ---- Suppress update because top level update will be performed
+    //      directly by the state variable in the model callee, which will
+    //      trigger the update of the model
+    const props = propsFunc() ?? {};
+    const collectedProps = props.s ?? [];
+    props.m?.forEach(([props, deps]) => {
+      Object.entries(props).forEach(([key, value]) => {
+        collectedProps.push([key, value, deps]);
+      });
+    });
+    collectedProps.forEach(([key, value, deps]) => {
+      model._$setProp(key, () => value, deps);
+    });
+    const content = contentFunc();
+    if (content) model._$setContent(() => content[0], content[1]);
+  }
+
+  static _$releaseModel() {
+    delete this._$modelCallee;
+  }
+
+  /**
+   * @brief Inject Dlight model in to a property
+   * @param ModelCls
+   * @param props { m: [props, deps], s: [key, value, deps] }
+   * @param content
+   * @param key
+   * @returns
+   */
+  _$injectModel(ModelCls, propsFunc, contentFunc, key) {
+    const props = propsFunc() ?? {};
+    const collectedProps = props.s ?? [];
+    props.m?.forEach(([props, deps]) => {
+      Object.entries(props).forEach(([key, value]) => {
+        collectedProps.push([key, value, deps]);
+      });
+    });
+    const model = new ModelCls();
+    model._$init(collectedProps, contentFunc(), null, null);
+    model._$modelCallee = this;
+    model._$modelKey = key;
+    model._$update = CompNode._$updateModel.bind(null, model, propsFunc, contentFunc);
+
+    return model;
+  }
+}
+
+// ---- @View -> class Comp extends View
+export const View = CompNode;
+export const Model = CompNode;
+
+/**
+ * @brief Run all update functions given the key
+ * @param dlNode
+ * @param key
+ */
+export function update(dlNode, key) {
+  dlNode._$updateDerived(key);
+}
--- a/packages/inula-next/src/DLNode.js
+++ b/packages/inula-next/src/DLNode.js
@ -0,0 +1,210 @@
+import { DLStore } from './store';
+
+export const DLNodeType = {
+  Comp: 0,
+  For: 1,
+  Cond: 2,
+  Env: 3,
+  Exp: 4,
+  Snippet: 5,
+  Try: 6,
+};
+
+export class DLNode {
+  /**
+   * @brief Node type: HTML, Text, Custom, For, If, Env, Expression
+   */
+  _$dlNodeType;
+
+  /**
+   * @brief Constructor
+   * @param nodeType
+   * @return {void}
+   */
+  constructor(nodeType) {
+    this._$dlNodeType = nodeType;
+  }
+
+  /**
+   * @brief Node element
+   *  Either one real element for HTMLNode and TextNode
+   *  Or an array of DLNode for CustomNode, ForNode, IfNode, EnvNode, ExpNode
+   */
+  get _$el() {
+    return DLNode.toEls(this._$nodes);
+  }
+
+  /**
+   * @brief Loop all child DLNodes to get all the child elements
+   * @param nodes
+   * @returns HTMLElement[]
+   */
+  static toEls(nodes) {
+    const els = [];
+    this.loopShallowEls(nodes, el => {
+      els.push(el);
+    });
+    return els;
+  }
+
+  // ---- Loop nodes ----
+  /**
+   * @brief Loop all elements shallowly,
+   *  i.e., don't loop the child nodes of dom elements and only call runFunc on dom elements
+   * @param nodes
+   * @param runFunc
+   */
+  static loopShallowEls(nodes, runFunc) {
+    const stack = [...nodes].reverse();
+    while (stack.length > 0) {
+      const node = stack.pop();
+      if (!('_$dlNodeType' in node)) runFunc(node);
+      else node._$nodes && stack.push(...[...node._$nodes].reverse());
+    }
+  }
+
+  /**
+   * @brief Add parentEl to all nodes until the first element
+   * @param nodes
+   * @param parentEl
+   */
+  static addParentEl(nodes, parentEl) {
+    nodes.forEach(node => {
+      if ('_$dlNodeType' in node) {
+        node._$parentEl = parentEl;
+        node._$nodes && DLNode.addParentEl(node._$nodes, parentEl);
+      }
+    });
+  }
+
+  // ---- Flow index and add child elements ----
+  /**
+   * @brief Get the total count of dom elements before the stop node
+   * @param nodes
+   * @param stopNode
+   * @returns total count of dom elements
+   */
+  static getFlowIndexFromNodes(nodes, stopNode) {
+    let index = 0;
+    const stack = [...nodes].reverse();
+    while (stack.length > 0) {
+      const node = stack.pop();
+      if (node === stopNode) break;
+      if ('_$dlNodeType' in node) {
+        node._$nodes && stack.push(...[...node._$nodes].reverse());
+      } else {
+        index++;
+      }
+    }
+    return index;
+  }
+
+  /**
+   * @brief Given an array of nodes, append them to the parentEl
+   *  1. If nextSibling is provided, insert the nodes before the nextSibling
+   *  2. If nextSibling is not provided, append the nodes to the parentEl
+   * @param nodes
+   * @param parentEl
+   * @param nextSibling
+   * @returns Added element count
+   */
+  static appendNodesWithSibling(nodes, parentEl, nextSibling) {
+    if (nextSibling) return this.insertNodesBefore(nodes, parentEl, nextSibling);
+    return this.appendNodes(nodes, parentEl);
+  }
+
+  /**
+   * @brief Given an array of nodes, append them to the parentEl using the index
+   *  1. If the index is the same as the length of the parentEl.childNodes, append the nodes to the parentEl
+   *  2. If the index is not the same as the length of the parentEl.childNodes, insert the nodes before the node at the index
+   * @param nodes
+   * @param parentEl
+   * @param index
+   * @param length
+   * @returns Added element count
+   */
+  static appendNodesWithIndex(nodes, parentEl, index, length) {
+    length = length ?? parentEl.childNodes.length;
+    if (length !== index) return this.insertNodesBefore(nodes, parentEl, parentEl.childNodes[index]);
+    return this.appendNodes(nodes, parentEl);
+  }
+
+  /**
+   * @brief Insert nodes before the nextSibling
+   * @param nodes
+   * @param parentEl
+   * @param nextSibling
+   * @returns Added element count
+   */
+  static insertNodesBefore(nodes, parentEl, nextSibling) {
+    let count = 0;
+    this.loopShallowEls(nodes, el => {
+      parentEl.insertBefore(el, nextSibling);
+      count++;
+    });
+    return count;
+  }
+
+  /**
+   * @brief Append nodes to the parentEl
+   * @param nodes
+   * @param parentEl
+   * @returns Added element count
+   */
+  static appendNodes(nodes, parentEl) {
+    let count = 0;
+    this.loopShallowEls(nodes, el => {
+      parentEl.appendChild(el);
+      count++;
+    });
+    return count;
+  }
+
+  // ---- Lifecycle ----
+  /**
+   * @brief Add willUnmount function to node
+   * @param node
+   * @param func
+   */
+  static addWillUnmount(node, func) {
+    const willUnmountStore = DLStore.global.WillUnmountStore;
+    const currentStore = willUnmountStore[willUnmountStore.length - 1];
+    // ---- If the current store is empty, it means this node is not mutable
+    if (!currentStore) return;
+    currentStore.push(func.bind(null, node));
+  }
+
+  /**
+   * @brief Add didUnmount function to node
+   * @param node
+   * @param func
+   */
+  static addDidUnmount(node, func) {
+    const didUnmountStore = DLStore.global.DidUnmountStore;
+    const currentStore = didUnmountStore[didUnmountStore.length - 1];
+    // ---- If the current store is empty, it means this node is not mutable
+    if (!currentStore) return;
+    currentStore.push(func.bind(null, node));
+  }
+
+  /**
+   * @brief Add didUnmount function to global store
+   * @param func
+   */
+  static addDidMount(node, func) {
+    if (!DLStore.global.DidMountStore) DLStore.global.DidMountStore = [];
+    DLStore.global.DidMountStore.push(func.bind(null, node));
+  }
+
+  /**
+   * @brief Run all didMount functions and reset the global store
+   */
+  static runDidMount() {
+    const didMountStore = DLStore.global.DidMountStore;
+    if (!didMountStore || didMountStore.length === 0) return;
+    for (let i = didMountStore.length - 1; i >= 0; i--) {
+      didMountStore[i]();
+    }
+    DLStore.global.DidMountStore = [];
+  }
+}
--- a/packages/inula-next/src/EnvNode.js
+++ b/packages/inula-next/src/EnvNode.js
@ -0,0 +1,103 @@
+import { DLNode, DLNodeType } from './DLNode';
+import { DLStore, cached } from './store';
+
+export class EnvStoreClass {
+  constructor() {
+    this.envs = {};
+    this.currentEnvNodes = [];
+  }
+
+  /**
+   * @brief Add a node to the current env and merge envs
+   * @param node - The node to add
+   */
+  addEnvNode(node) {
+    this.currentEnvNodes.push(node);
+    this.mergeEnvs();
+  }
+
+  /**
+   * @brief Replace the current env with the given nodes and merge envs
+   * @param nodes - The nodes to replace the current environment with
+   */
+  replaceEnvNodes(nodes) {
+    this.currentEnvNodes = nodes;
+    this.mergeEnvs();
+  }
+
+  /**
+   * @brief Remove the last node from the current env and merge envs
+   */
+  removeEnvNode() {
+    this.currentEnvNodes.pop();
+    this.mergeEnvs();
+  }
+
+  /**
+   * @brief Merge all the envs in currentEnvNodes, inner envs override outer envs
+   */
+  mergeEnvs() {
+    this.envs = {};
+    this.currentEnvNodes.forEach(envNode => {
+      Object.entries(envNode.envs).forEach(([key, value]) => {
+        this.envs[key] = [value, envNode];
+      });
+    });
+  }
+}
+
+export class EnvNode extends DLNode {
+  constructor(envs, depsArr) {
+    super(DLNodeType.Env);
+    // Declare a global variable to store the environment variables
+    if (!('DLEnvStore' in DLStore.global)) DLStore.global.DLEnvStore = new EnvStoreClass();
+
+    this.envs = envs;
+    this.depsArr = depsArr;
+    this.updateNodes = new Set();
+
+    DLStore.global.DLEnvStore.addEnvNode(this);
+  }
+
+  cached(deps, name) {
+    if (!deps || !deps.length) return false;
+    if (cached(deps, this.depsArr[name])) return true;
+    this.depsArr[name] = deps;
+    return false;
+  }
+
+  /**
+   * @brief Update a specific env, and update all the comp nodes that depend on this env
+   * @param name - The name of the environment variable to update
+   * @param value - The new value of the environment variable
+   */
+  updateEnv(name, valueFunc, deps) {
+    if (this.cached(deps, name)) return;
+    const value = valueFunc();
+    this.envs[name] = value;
+    if (DLStore.global.DLEnvStore.currentEnvNodes.includes(this)) {
+      DLStore.global.DLEnvStore.mergeEnvs();
+    }
+    this.updateNodes.forEach(node => {
+      node._$updateEnv(name, value, this);
+    });
+  }
+
+  /**
+   * @brief Add a node to this.updateNodes, delete the node from this.updateNodes when it unmounts
+   * @param node - The node to add
+   */
+  addNode(node) {
+    this.updateNodes.add(node);
+    DLNode.addWillUnmount(node, this.updateNodes.delete.bind(this.updateNodes, node));
+  }
+
+  /**
+   * @brief Set this._$nodes, and exit the current env
+   * @param nodes - The nodes to set
+   */
+  initNodes(nodes) {
+    this._$nodes = nodes;
+    DLStore.global.DLEnvStore.removeEnvNode();
+  }
+}
--- a/packages/inula-next/src/HTMLNode.js
+++ b/packages/inula-next/src/HTMLNode.js
@ -0,0 +1,163 @@
+import { DLNode } from './DLNode';
+import { DLStore, cached } from './store';
+
+function cache(el, key, deps) {
+  if (deps.length === 0) return false;
+  const cacheKey = `$${key}`;
+  if (cached(deps, el[cacheKey])) return true;
+  el[cacheKey] = deps;
+  return false;
+}
+
+/**
+ * @brief Plainly set style
+ * @param el
+ * @param value
+ */
+export function setStyle(el, value) {
+  Object.entries(value).forEach(([key, value]) => {
+    if (key.startsWith('--')) {
+      el.style.setProperty(key, value);
+    } else {
+      el.style[key] = value;
+    }
+  });
+}
+
+/**
+ * @brief Plainly set dataset
+ * @param el
+ * @param value
+ */
+export function setDataset(el, value) {
+  Object.assign(el.dataset, value);
+}
+
+/**
+ * @brief Set HTML property with checking value equality first
+ * @param el
+ * @param key
+ * @param value
+ */
+export function setHTMLProp(el, key, valueFunc, deps) {
+  // ---- Comparing deps, same value won't trigger
+  //      will lead to a bug if the value is set outside of the DLNode
+  //      e.g. setHTMLProp(el, "textContent", "value", [])
+  //       =>  el.textContent = "other"
+  //       =>  setHTMLProp(el, "textContent", "value", [])
+  //       The value will be set to "other" instead of "value"
+  if (cache(el, key, deps)) return;
+  el[key] = valueFunc();
+}
+
+/**
+ * @brief Plainly set HTML properties
+ * @param el
+ * @param value
+ */
+export function setHTMLProps(el, value) {
+  Object.entries(value).forEach(([key, v]) => {
+    if (key === 'style') return setStyle(el, v);
+    if (key === 'dataset') return setDataset(el, v);
+    setHTMLProp(el, key, () => v, []);
+  });
+}
+
+/**
+ * @brief Set HTML attribute with checking value equality first
+ * @param el
+ * @param key
+ * @param value
+ */
+export function setHTMLAttr(el, key, valueFunc, deps) {
+  if (cache(el, key, deps)) return;
+  el.setAttribute(key, valueFunc());
+}
+
+/**
+ * @brief Plainly set HTML attributes
+ * @param el
+ * @param value
+ */
+export function setHTMLAttrs(el, value) {
+  Object.entries(value).forEach(([key, v]) => {
+    setHTMLAttr(el, key, () => v, []);
+  });
+}
+
+/**
+ * @brief Set memorized event, store the previous event in el[`$on${key}`], if it exists, remove it first
+ * @param el
+ * @param key
+ * @param value
+ */
+export function setEvent(el, key, value) {
+  const prevEvent = el[`$on${key}`];
+  if (prevEvent) el.removeEventListener(key, prevEvent);
+  el.addEventListener(key, value);
+  el[`$on${key}`] = value;
+}
+
+function eventHandler(e) {
+  const key = `$$${e.type}`;
+  for (const node of e.composedPath()) {
+    if (node[key]) node[key](e);
+    if (e.cancelBubble) return;
+  }
+}
+
+export function delegateEvent(el, key, value) {
+  if (el[`$$${key}`] === value) return;
+  el[`$$${key}`] = value;
+  if (!DLStore.delegatedEvents.has(key)) {
+    DLStore.delegatedEvents.add(key);
+    DLStore.document.addEventListener(key, eventHandler);
+  }
+}
+/**
+ * @brief Shortcut for document.createElement
+ * @param tag
+ * @returns HTMLElement
+ */
+export function createElement(tag) {
+  return DLStore.document.createElement(tag);
+}
+
+/**
+ * @brief Insert any DLNode into an element, set the _$nodes and append the element to the element's children
+ * @param el
+ * @param node
+ * @param position
+ */
+export function insertNode(el, node, position) {
+  // ---- Set _$nodes
+  if (!el._$nodes) el._$nodes = Array.from(el.childNodes);
+  el._$nodes.splice(position, 0, node);
+
+  // ---- Insert nodes' elements
+  const flowIdx = DLNode.getFlowIndexFromNodes(el._$nodes, node);
+  DLNode.appendNodesWithIndex([node], el, flowIdx);
+  // ---- Set parentEl
+  DLNode.addParentEl([node], el);
+}
+
+/**
+ * @brief An inclusive assign prop function that accepts any type of prop
+ * @param el
+ * @param key
+ * @param value
+ */
+export function forwardHTMLProp(el, key, valueFunc, deps) {
+  if (key === 'style') return setStyle(el, valueFunc());
+  if (key === 'dataset') return setDataset(el, valueFunc());
+  if (key === 'element') return;
+  if (key === 'prop') return setHTMLProps(el, valueFunc());
+  if (key === 'attr') return setHTMLAttrs(el, valueFunc());
+  if (key === 'innerHTML') return setHTMLProp(el, 'innerHTML', valueFunc, deps);
+  if (key === 'textContent') return setHTMLProp(el, 'textContent', valueFunc, deps);
+  if (key === 'forwardProp') return;
+  if (key.startsWith('on')) {
+    return setEvent(el, key.slice(2).toLowerCase(), valueFunc());
+  }
+  setHTMLAttr(el, key, valueFunc, deps);
+}
--- a/packages/inula-next/src/MutableNode/CondNode.js
+++ b/packages/inula-next/src/MutableNode/CondNode.js
@ -0,0 +1,69 @@
+import { DLNodeType } from '../DLNode';
+import { FlatNode } from './FlatNode';
+
+export class CondNode extends FlatNode {
+  /**
+   * @brief Constructor, If type, accept a function that returns a list of nodes
+   * @param caseFunc
+   */
+  constructor(depNum, condFunc) {
+    super(DLNodeType.Cond);
+    this.depNum = depNum;
+    this.cond = -1;
+    this.condFunc = condFunc;
+    this.initUnmountStore();
+    this._$nodes = this.condFunc(this);
+    this.setUnmountFuncs();
+
+    // ---- Add to the global UnmountStore
+    CondNode.addWillUnmount(this, this.runWillUnmount.bind(this));
+    CondNode.addDidUnmount(this, this.runDidUnmount.bind(this));
+  }
+
+  /**
+   * @brief Update the nodes in the environment
+   */
+  updateCond(key) {
+    // ---- Need to save prev unmount funcs because we can't put removeNodes before geneNewNodesInEnv
+    //      The reason is that if it didn't change, we don't need to unmount or remove the nodes
+    const prevFuncs = [this.willUnmountFuncs, this.didUnmountFuncs];
+    const newNodes = this.geneNewNodesInEnv(() => this.condFunc(this));
+
+    // ---- If the new nodes are the same as the old nodes, we only need to update  children
+    if (this.didntChange) {
+      [this.willUnmountFuncs, this.didUnmountFuncs] = prevFuncs;
+      this.didntChange = false;
+      this.updateFunc?.(this.depNum, key);
+      return;
+    }
+    // ---- Remove old nodes
+    const newFuncs = [this.willUnmountFuncs, this.didUnmountFuncs];
+    [this.willUnmountFuncs, this.didUnmountFuncs] = prevFuncs;
+    this._$nodes && this._$nodes.length > 0 && this.removeNodes(this._$nodes);
+    [this.willUnmountFuncs, this.didUnmountFuncs] = newFuncs;
+
+    if (newNodes.length === 0) {
+      // ---- No branch has been taken
+      this._$nodes = [];
+      return;
+    }
+    // ---- Add new nodes
+    const parentEl = this._$parentEl;
+    // ---- Faster append with nextSibling rather than flowIndex
+    const flowIndex = CondNode.getFlowIndexFromNodes(parentEl._$nodes, this);
+
+    const nextSibling = parentEl.childNodes[flowIndex];
+    CondNode.appendNodesWithSibling(newNodes, parentEl, nextSibling);
+    CondNode.runDidMount();
+    this._$nodes = newNodes;
+  }
+
+  /**
+   * @brief The update function of IfNode's childNodes is stored in the first child node
+   * @param changed
+   */
+  update(changed) {
+    if (!(~this.depNum & changed)) return;
+    this.updateFunc?.(changed);
+  }
+}
--- a/packages/inula-next/src/MutableNode/ExpNode.js
+++ b/packages/inula-next/src/MutableNode/ExpNode.js
@ -0,0 +1,86 @@
+import { DLNodeType } from '../DLNode';
+import { FlatNode } from './FlatNode';
+import { DLStore, cached } from '../store';
+
+export class ExpNode extends FlatNode {
+  /**
+   * @brief Constructor, Exp type, accept a function that returns a list of nodes
+   * @param nodesFunc
+   */
+  constructor(value, deps) {
+    super(DLNodeType.Exp);
+    this.initUnmountStore();
+    this._$nodes = ExpNode.formatNodes(value);
+    this.setUnmountFuncs();
+    this.deps = this.parseDeps(deps);
+    // ---- Add to the global UnmountStore
+    ExpNode.addWillUnmount(this, this.runWillUnmount.bind(this));
+    ExpNode.addDidUnmount(this, this.runDidUnmount.bind(this));
+  }
+
+  parseDeps(deps) {
+    return deps.map(dep => {
+      // ---- CompNode
+      if (dep?.prototype?._$init) return dep.toString();
+      // ---- SnippetNode
+      if (dep?.propViewFunc) return dep.propViewFunc.toString();
+      return dep;
+    });
+  }
+
+  cache(deps) {
+    if (!deps || !deps.length) return false;
+    deps = this.parseDeps(deps);
+    if (cached(deps, this.deps)) return true;
+    this.deps = deps;
+    return false;
+  }
+  /**
+   * @brief Generate new nodes and replace the old nodes
+   */
+  update(valueFunc, deps) {
+    if (this.cache(deps)) return;
+    this.removeNodes(this._$nodes);
+    const newNodes = this.geneNewNodesInEnv(() => ExpNode.formatNodes(valueFunc()));
+    if (newNodes.length === 0) {
+      this._$nodes = [];
+      return;
+    }
+
+    // ---- Add new nodes
+    const parentEl = this._$parentEl;
+    const flowIndex = ExpNode.getFlowIndexFromNodes(parentEl._$nodes, this);
+    const nextSibling = parentEl.childNodes[flowIndex];
+    ExpNode.appendNodesWithSibling(newNodes, parentEl, nextSibling);
+    ExpNode.runDidMount();
+
+    this._$nodes = newNodes;
+  }
+
+  /**
+   * @brief Format the nodes
+   * @param nodes
+   * @returns New nodes
+   */
+  static formatNodes(nodes) {
+    if (!Array.isArray(nodes)) nodes = [nodes];
+    return (
+      nodes
+        // ---- Flatten the nodes
+        .flat(1)
+        // ---- Filter out empty nodes
+        .filter(node => node !== undefined && node !== null && typeof node !== 'boolean')
+        .map(node => {
+          // ---- If the node is a string, number or bigint, convert it to a text node
+          if (typeof node === 'string' || typeof node === 'number' || typeof node === 'bigint') {
+            return DLStore.document.createTextNode(`${node}`);
+          }
+          // ---- If the node has PropView, call it to get the view
+          if ('propViewFunc' in node) return node.build();
+          return node;
+        })
+        // ---- Flatten the nodes again
+        .flat(1)
+    );
+  }
+}
--- a/packages/inula-next/src/MutableNode/FlatNode.js
+++ b/packages/inula-next/src/MutableNode/FlatNode.js
@ -0,0 +1,33 @@
+import { DLStore } from '../store';
+import { MutableNode } from './MutableNode';
+
+export class FlatNode extends MutableNode {
+  willUnmountFuncs = [];
+  didUnmountFuncs = [];
+
+  setUnmountFuncs() {
+    this.willUnmountFuncs = DLStore.global.WillUnmountStore.pop();
+    this.didUnmountFuncs = DLStore.global.DidUnmountStore.pop();
+  }
+
+  runWillUnmount() {
+    for (let i = 0; i < this.willUnmountFuncs.length; i++) this.willUnmountFuncs[i]();
+  }
+
+  runDidUnmount() {
+    for (let i = this.didUnmountFuncs.length - 1; i >= 0; i--) this.didUnmountFuncs[i]();
+  }
+
+  removeNodes(nodes) {
+    this.runWillUnmount();
+    super.removeNodes(nodes);
+    this.runDidUnmount();
+  }
+
+  geneNewNodesInEnv(newNodesFunc) {
+    this.initUnmountStore();
+    const nodes = super.geneNewNodesInEnv(newNodesFunc);
+    this.setUnmountFuncs();
+    return nodes;
+  }
+}
--- a/packages/inula-next/src/MutableNode/ForNode.js
+++ b/packages/inula-next/src/MutableNode/ForNode.js
@ -0,0 +1,406 @@
+import { DLNodeType } from '../DLNode';
+import { DLStore } from '../store';
+import { MutableNode } from './MutableNode';
+
+export class ForNode extends MutableNode {
+  array;
+  nodeFunc;
+  depNum;
+
+  nodesMap = new Map();
+  updateArr = [];
+
+  /**
+   * @brief Getter for nodes
+   */
+  get _$nodes() {
+    const nodes = [];
+    for (let idx = 0; idx < this.array.length; idx++) {
+      nodes.push(...this.nodesMap.get(this.keys?.[idx] ?? idx));
+    }
+    return nodes;
+  }
+
+  /**
+   * @brief Constructor, For type
+   * @param array
+   * @param nodeFunc
+   * @param keys
+   */
+  constructor(array, depNum, keys, nodeFunc) {
+    super(DLNodeType.For);
+    this.array = [...array];
+    this.keys = keys;
+    this.depNum = depNum;
+    this.addNodeFunc(nodeFunc);
+  }
+
+  /**
+   * @brief To be called immediately after the constructor
+   * @param nodeFunc
+   */
+  addNodeFunc(nodeFunc) {
+    this.nodeFunc = nodeFunc;
+    this.array.forEach((item, idx) => {
+      this.initUnmountStore();
+      const key = this.keys?.[idx] ?? idx;
+      const nodes = nodeFunc(item, this.updateArr, idx);
+      this.nodesMap.set(key, nodes);
+      this.setUnmountMap(key);
+    });
+    // ---- For nested ForNode, the whole strategy is just like EnvStore
+    //      we use array of function array to create "environment", popping and pushing
+    ForNode.addWillUnmount(this, this.runAllWillUnmount.bind(this));
+    ForNode.addDidUnmount(this, this.runAllDidUnmount.bind(this));
+  }
+
+  /**
+   * @brief Update the view related to one item in the array
+   * @param nodes
+   * @param item
+   */
+  updateItem(idx, array, changed) {
+    // ---- The update function of ForNode's childNodes is stored in the first child node
+    this.updateArr[idx]?.(changed ?? this.depNum, array[idx]);
+  }
+
+  updateItems(changed) {
+    for (let idx = 0; idx < this.array.length; idx++) {
+      this.updateItem(idx, this.array, changed);
+    }
+  }
+
+  /**
+   * @brief Non-array update function
+   * @param changed
+   */
+  update(changed) {
+    // ---- e.g. this.depNum -> 1110 changed-> 1010
+    //      ~this.depNum & changed -> ~1110 & 1010 -> 0000
+    //      no update because depNum contains all the changed
+    // ---- e.g. this.depNum -> 1110 changed-> 1101
+    //      ~this.depNum & changed -> ~1110 & 1101 -> 0001
+    //      update because depNum doesn't contain all the changed
+    if (!(~this.depNum & changed)) return;
+    this.updateItems(changed);
+  }
+
+  /**
+   * @brief Array-related update function
+   * @param newArray
+   * @param newKeys
+   */
+  updateArray(newArray, newKeys) {
+    if (newKeys) {
+      this.updateWithKey(newArray, newKeys);
+      return;
+    }
+    this.updateWithOutKey(newArray);
+  }
+
+  /**
+   * @brief Shortcut to generate new nodes with idx and key
+   */
+  getNewNodes(idx, key, array, updateArr) {
+    this.initUnmountStore();
+    const nodes = this.geneNewNodesInEnv(() => this.nodeFunc(array[idx], updateArr ?? this.updateArr, idx));
+    this.setUnmountMap(key);
+    this.nodesMap.set(key, nodes);
+    return nodes;
+  }
+
+  /**
+   * @brief Set the unmount map by getting the last unmount map from the global store
+   * @param key
+   */
+  setUnmountMap(key) {
+    const willUnmountMap = DLStore.global.WillUnmountStore.pop();
+    if (willUnmountMap && willUnmountMap.length > 0) {
+      if (!this.willUnmountMap) this.willUnmountMap = new Map();
+      this.willUnmountMap.set(key, willUnmountMap);
+    }
+    const didUnmountMap = DLStore.global.DidUnmountStore.pop();
+    if (didUnmountMap && didUnmountMap.length > 0) {
+      if (!this.didUnmountMap) this.didUnmountMap = new Map();
+      this.didUnmountMap.set(key, didUnmountMap);
+    }
+  }
+
+  /**
+   * @brief Run all the unmount functions and clear the unmount map
+   */
+  runAllWillUnmount() {
+    if (!this.willUnmountMap || this.willUnmountMap.size === 0) return;
+    this.willUnmountMap.forEach(funcs => {
+      for (let i = 0; i < funcs.length; i++) funcs[i]?.();
+    });
+    this.willUnmountMap.clear();
+  }
+
+  /**
+   * @brief Run all the unmount functions and clear the unmount map
+   */
+  runAllDidUnmount() {
+    if (!this.didUnmountMap || this.didUnmountMap.size === 0) return;
+    this.didUnmountMap.forEach(funcs => {
+      for (let i = funcs.length - 1; i >= 0; i--) funcs[i]?.();
+    });
+    this.didUnmountMap.clear();
+  }
+
+  /**
+   * @brief Run the unmount functions of the given key
+   * @param key
+   */
+  runWillUnmount(key) {
+    if (!this.willUnmountMap || this.willUnmountMap.size === 0) return;
+    const funcs = this.willUnmountMap.get(key);
+    if (!funcs) return;
+    for (let i = 0; i < funcs.length; i++) funcs[i]?.();
+    this.willUnmountMap.delete(key);
+  }
+
+  /**
+   * @brief Run the unmount functions of the given key
+   */
+  runDidUnmount(key) {
+    if (!this.didUnmountMap || this.didUnmountMap.size === 0) return;
+    const funcs = this.didUnmountMap.get(key);
+    if (!funcs) return;
+    for (let i = funcs.length - 1; i >= 0; i--) funcs[i]?.();
+    this.didUnmountMap.delete(key);
+  }
+
+  /**
+   * @brief Remove nodes from parentEl and run willUnmount and didUnmount
+   * @param nodes
+   * @param key
+   */
+  removeNodes(nodes, key) {
+    this.runWillUnmount(key);
+    super.removeNodes(nodes);
+    this.runDidUnmount(key);
+    this.nodesMap.delete(key);
+  }
+
+  /**
+   * @brief Update the nodes without keys
+   * @param newArray
+   */
+  updateWithOutKey(newArray) {
+    const preLength = this.array.length;
+    const currLength = newArray.length;
+
+    if (preLength === currLength) {
+      // ---- If the length is the same, we only need to update the nodes
+      for (let idx = 0; idx < this.array.length; idx++) {
+        this.updateItem(idx, newArray);
+      }
+      this.array = [...newArray];
+      return;
+    }
+    const parentEl = this._$parentEl;
+    // ---- If the new array is longer, add new nodes directly
+    if (preLength < currLength) {
+      let flowIndex = ForNode.getFlowIndexFromNodes(parentEl._$nodes, this);
+      // ---- Calling parentEl.childNodes.length is time-consuming,
+      //      so we use a length variable to store the length
+      const length = parentEl.childNodes.length;
+      for (let idx = 0; idx < currLength; idx++) {
+        if (idx < preLength) {
+          flowIndex += ForNode.getFlowIndexFromNodes(this.nodesMap.get(idx));
+          this.updateItem(idx, newArray);
+          continue;
+        }
+        const newNodes = this.getNewNodes(idx, idx, newArray);
+        ForNode.appendNodesWithIndex(newNodes, parentEl, flowIndex, length);
+      }
+      ForNode.runDidMount();
+      this.array = [...newArray];
+      return;
+    }
+
+    // ---- Update the nodes first
+    for (let idx = 0; idx < currLength; idx++) {
+      this.updateItem(idx, newArray);
+    }
+    // ---- If the new array is shorter, remove the extra nodes
+    for (let idx = currLength; idx < preLength; idx++) {
+      const nodes = this.nodesMap.get(idx);
+      this.removeNodes(nodes, idx);
+    }
+    this.updateArr.splice(currLength, preLength - currLength);
+    this.array = [...newArray];
+  }
+
+  /**
+   * @brief Update the nodes with keys
+   * @param newArray
+   * @param newKeys
+   */
+  updateWithKey(newArray, newKeys) {
+    if (newKeys.length !== new Set(newKeys).size) {
+      throw new Error('DLight: Duplicate keys in for loop are not allowed');
+    }
+    const prevKeys = this.keys;
+    this.keys = newKeys;
+
+    if (ForNode.arrayEqual(prevKeys, this.keys)) {
+      // ---- If the keys are the same, we only need to update the nodes
+      for (let idx = 0; idx < newArray.length; idx++) {
+        this.updateItem(idx, newArray);
+      }
+      this.array = [...newArray];
+      return;
+    }
+
+    const parentEl = this._$parentEl;
+
+    // ---- No nodes after, delete all nodes
+    if (this.keys.length === 0) {
+      const parentNodes = parentEl._$nodes ?? [];
+      if (parentNodes.length === 1 && parentNodes[0] === this) {
+        // ---- ForNode is the only node in the parent node
+        //      Frequently used in real life scenarios because we tend to always wrap for with a div element,
+        //      so we optimize it here
+        this.runAllWillUnmount();
+        parentEl.innerHTML = '';
+        this.runAllDidUnmount();
+      } else {
+        for (let prevIdx = 0; prevIdx < prevKeys.length; prevIdx++) {
+          const prevKey = prevKeys[prevIdx];
+          this.removeNodes(this.nodesMap.get(prevKey), prevKey);
+        }
+      }
+      this.nodesMap.clear();
+      this.updateArr = [];
+      this.array = [];
+      return;
+    }
+
+    // ---- Record how many nodes are before this ForNode with the same parentNode
+    const flowIndex = ForNode.getFlowIndexFromNodes(parentEl._$nodes, this);
+
+    // ---- No nodes before, append all nodes
+    if (prevKeys.length === 0) {
+      const nextSibling = parentEl.childNodes[flowIndex];
+      for (let idx = 0; idx < this.keys.length; idx++) {
+        const newNodes = this.getNewNodes(idx, this.keys[idx], newArray);
+        ForNode.appendNodesWithSibling(newNodes, parentEl, nextSibling);
+      }
+      ForNode.runDidMount();
+      this.array = [...newArray];
+      return;
+    }
+
+    const shuffleKeys = [];
+    const newUpdateArr = [];
+
+    // ---- 1. Delete the nodes that are no longer in the array
+    for (let prevIdx = 0; prevIdx < prevKeys.length; prevIdx++) {
+      const prevKey = prevKeys[prevIdx];
+      if (this.keys.includes(prevKey)) {
+        shuffleKeys.push(prevKey);
+        newUpdateArr.push(this.updateArr[prevIdx]);
+        continue;
+      }
+      this.removeNodes(this.nodesMap.get(prevKey), prevKey);
+    }
+
+    // ---- 2. Add the nodes that are not in the array but in the new array
+    // ---- Calling parentEl.childNodes.length is time-consuming,
+    //      so we use a length variable to store the length
+    let length = parentEl.childNodes.length;
+    let newFlowIndex = flowIndex;
+    for (let idx = 0; idx < this.keys.length; idx++) {
+      const key = this.keys[idx];
+      const prevIdx = shuffleKeys.indexOf(key);
+      if (prevIdx !== -1) {
+        // ---- These nodes are already in the parentEl,
+        //      and we need to keep track of their flowIndex
+        newFlowIndex += ForNode.getFlowIndexFromNodes(this.nodesMap.get(key));
+        newUpdateArr[prevIdx]?.(this.depNum, newArray[idx]);
+        continue;
+      }
+      // ---- Insert updateArr first because in getNewNode the updateFunc will replace this null
+      newUpdateArr.splice(idx, 0, null);
+      const newNodes = this.getNewNodes(idx, key, newArray, newUpdateArr);
+      // ---- Add the new nodes
+      shuffleKeys.splice(idx, 0, key);
+
+      const count = ForNode.appendNodesWithIndex(newNodes, parentEl, newFlowIndex, length);
+      newFlowIndex += count;
+      length += count;
+    }
+    ForNode.runDidMount();
+
+    // ---- After adding and deleting, the only thing left is to reorder the nodes,
+    //      but if the keys are the same, we don't need to reorder
+    if (ForNode.arrayEqual(this.keys, shuffleKeys)) {
+      this.array = [...newArray];
+      this.updateArr = newUpdateArr;
+      return;
+    }
+
+    newFlowIndex = flowIndex;
+    const bufferNodes = new Map();
+    // ---- 3. Replace the nodes in the same position using Fisher-Yates shuffle algorithm
+    for (let idx = 0; idx < this.keys.length; idx++) {
+      const key = this.keys[idx];
+      const prevIdx = shuffleKeys.indexOf(key);
+
+      const bufferedNode = bufferNodes.get(key);
+      if (bufferedNode) {
+        // ---- We need to add the flowIndex of the bufferedNode,
+        //      because the bufferedNode is in the parentEl and the new position is ahead of the previous position
+        const bufferedFlowIndex = ForNode.getFlowIndexFromNodes(bufferedNode);
+        const lastEl = ForNode.toEls(bufferedNode).pop();
+        const nextSibling = parentEl.childNodes[newFlowIndex + bufferedFlowIndex];
+        if (lastEl !== nextSibling && lastEl.nextSibling !== nextSibling) {
+          // ---- If the node is buffered, we need to add it to the parentEl
+          ForNode.insertNodesBefore(bufferedNode, parentEl, nextSibling);
+        }
+        // ---- So the added length is the length of the bufferedNode
+        newFlowIndex += bufferedFlowIndex;
+        delete bufferNodes[idx];
+      } else if (prevIdx === idx) {
+        // ---- If the node is in the same position, we don't need to do anything
+        newFlowIndex += ForNode.getFlowIndexFromNodes(this.nodesMap.get(key));
+        continue;
+      } else {
+        // ---- If the node is not in the same position, we need to buffer it
+        //      We buffer the node of the previous position, and then replace it with the node of the current position
+        const prevKey = shuffleKeys[idx];
+        bufferNodes.set(prevKey, this.nodesMap.get(prevKey));
+        // ---- Length would never change, and the last will always be in the same position,
+        //      so it'll always be insertBefore instead of appendChild
+        const childNodes = this.nodesMap.get(key);
+        const lastEl = ForNode.toEls(childNodes).pop();
+        const nextSibling = parentEl.childNodes[newFlowIndex];
+        if (lastEl !== nextSibling && lastEl.nextSibling !== nextSibling) {
+          newFlowIndex += ForNode.insertNodesBefore(childNodes, parentEl, nextSibling);
+        }
+      }
+      // ---- Swap the keys
+      const tempKey = shuffleKeys[idx];
+      shuffleKeys[idx] = shuffleKeys[prevIdx];
+      shuffleKeys[prevIdx] = tempKey;
+      const tempUpdateFunc = newUpdateArr[idx];
+      newUpdateArr[idx] = newUpdateArr[prevIdx];
+      newUpdateArr[prevIdx] = tempUpdateFunc;
+    }
+    this.array = [...newArray];
+    this.updateArr = newUpdateArr;
+  }
+
+  /**
+   * @brief Compare two arrays
+   * @param arr1
+   * @param arr2
+   * @returns
+   */
+  static arrayEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((item, idx) => item === arr2[idx]);
+  }
+}
--- a/packages/inula-next/src/MutableNode/MutableNode.js
+++ b/packages/inula-next/src/MutableNode/MutableNode.js
@ -0,0 +1,71 @@
+import { DLNode } from '../DLNode';
+import { DLStore } from '../store';
+
+export class MutableNode extends DLNode {
+  /**
+   * @brief Mutable node is a node that this._$nodes can be changed, things need to pay attention:
+   *  1. The environment of the new nodes should be the same as the old nodes
+   *  2. The new nodes should be added to the parentEl
+   *  3. The old nodes should be removed from the parentEl
+   * @param type
+   */
+  constructor(type) {
+    super(type);
+    // ---- Save the current environment nodes, must be a new reference
+    if (DLStore.global.DLEnvStore && DLStore.global.DLEnvStore.currentEnvNodes.length > 0) {
+      this.savedEnvNodes = [...DLStore.global.DLEnvStore.currentEnvNodes];
+    }
+  }
+
+  /**
+   * @brief Initialize the new nodes, add parentEl to all nodes
+   * @param nodes
+   */
+  initNewNodes(nodes) {
+    // ---- Add parentEl to all nodes
+    DLNode.addParentEl(nodes, this._$parentEl);
+  }
+
+  /**
+   * @brief Generate new nodes in the saved environment
+   * @param newNodesFunc
+   * @returns
+   */
+  geneNewNodesInEnv(newNodesFunc) {
+    if (!this.savedEnvNodes) {
+      // ---- No saved environment, just generate new nodes
+      const newNodes = newNodesFunc();
+      // ---- Only for IfNode's same condition return
+      // ---- Initialize the new nodes
+      this.initNewNodes(newNodes);
+      return newNodes;
+    }
+    // ---- Save the current environment nodes
+    const currentEnvNodes = DLStore.global.DLEnvStore.currentEnvNodes;
+    // ---- Replace the saved environment nodes
+    DLStore.global.DLEnvStore.replaceEnvNodes(this.savedEnvNodes);
+    const newNodes = newNodesFunc();
+    // ---- Retrieve the current environment nodes
+    DLStore.global.DLEnvStore.replaceEnvNodes(currentEnvNodes);
+    // ---- Only for IfNode's same condition return
+    // ---- Initialize the new nodes
+    this.initNewNodes(newNodes);
+    return newNodes;
+  }
+
+  initUnmountStore() {
+    DLStore.global.WillUnmountStore.push([]);
+    DLStore.global.DidUnmountStore.push([]);
+  }
+
+  /**
+   * @brief Remove nodes from parentEl and run willUnmount and didUnmount
+   * @param nodes
+   * @param removeEl Only remove outermost element
+   */
+  removeNodes(nodes) {
+    DLNode.loopShallowEls(nodes, node => {
+      this._$parentEl.removeChild(node);
+    });
+  }
+}
--- a/packages/inula-next/src/MutableNode/TryNode.js
+++ b/packages/inula-next/src/MutableNode/TryNode.js
@ -0,0 +1,45 @@
+import { DLNodeType } from '../DLNode';
+import { FlatNode } from './FlatNode';
+import { EnvNode } from '../EnvNode';
+
+export class TryNode extends FlatNode {
+  constructor(tryFunc, catchFunc) {
+    super(DLNodeType.Try);
+    this.tryFunc = tryFunc;
+    const catchable = this.getCatchable(catchFunc);
+    this.envNode = new EnvNode({ _$catchable: catchable });
+    const nodes = tryFunc(this.setUpdateFunc.bind(this), catchable) ?? [];
+    this.envNode.initNodes(nodes);
+    this._$nodes = nodes;
+  }
+
+  update(changed) {
+    this.updateFunc?.(changed);
+  }
+
+  setUpdateFunc(updateFunc) {
+    this.updateFunc = updateFunc;
+  }
+
+  getCatchable(catchFunc) {
+    return callback =>
+      (...args) => {
+        try {
+          return callback(...args);
+        } catch (e) {
+          // ---- Run it in next tick to make sure when error occurs before
+          //      didMount, this._$parentEl is not null
+          Promise.resolve().then(() => {
+            const nodes = this.geneNewNodesInEnv(() => catchFunc(this.setUpdateFunc.bind(this), e));
+            this._$nodes && this.removeNodes(this._$nodes);
+            const parentEl = this._$parentEl;
+            const flowIndex = FlatNode.getFlowIndexFromNodes(parentEl._$nodes, this);
+            const nextSibling = parentEl.childNodes[flowIndex];
+            FlatNode.appendNodesWithSibling(nodes, parentEl, nextSibling);
+            FlatNode.runDidMount();
+            this._$nodes = nodes;
+          });
+        }
+      };
+  }
+}
--- a/packages/inula-next/src/PropView.js
+++ b/packages/inula-next/src/PropView.js
@ -0,0 +1,48 @@
+import { DLNode } from './DLNode';
+import { insertNode } from './HTMLNode';
+export class PropView {
+  propViewFunc;
+  dlUpdateFunc = new Set();
+
+  /**
+   * @brief PropView constructor, accept a function that returns a list of DLNode
+   * @param propViewFunc - A function that when called, collects and returns an array of DLNode instances
+   */
+  constructor(propViewFunc) {
+    this.propViewFunc = propViewFunc;
+  }
+
+  /**
+   * @brief Build the prop view by calling the propViewFunc and add every single instance of the returned DLNode to dlUpdateNodes
+   * @returns An array of DLNode instances returned by propViewFunc
+   */
+  build() {
+    let update;
+    const addUpdate = updateFunc => {
+      update = updateFunc;
+      this.dlUpdateFunc.add(updateFunc);
+    };
+    const newNodes = this.propViewFunc(addUpdate);
+    if (newNodes.length === 0) return [];
+    if (update) {
+      // Remove the updateNode from dlUpdateNodes when it unmounts
+      DLNode.addWillUnmount(newNodes[0], this.dlUpdateFunc.delete.bind(this.dlUpdateFunc, update));
+    }
+
+    return newNodes;
+  }
+
+  /**
+   * @brief Update every node in dlUpdateNodes
+   * @param changed - A parameter indicating what changed to trigger the update
+   */
+  update(...args) {
+    this.dlUpdateFunc.forEach(update => {
+      update(...args);
+    });
+  }
+}
+
+export function insertChildren(el, propView) {
+  insertNode(el, { _$nodes: propView.build(), _$dlNodeType: 7 }, 0);
+}
--- a/packages/inula-next/src/SnippetNode.js
+++ b/packages/inula-next/src/SnippetNode.js
@ -0,0 +1,18 @@
+import { DLNode, DLNodeType } from './DLNode';
+import { cached } from './store';
+
+export class SnippetNode extends DLNode {
+  constructor(depsArr) {
+    super(DLNodeType.Snippet);
+    this.depsArr = depsArr;
+  }
+
+  cached(deps, changed) {
+    if (!deps || !deps.length) return false;
+    const idx = Math.log2(changed);
+    const prevDeps = this.depsArr[idx];
+    if (cached(deps, prevDeps)) return true;
+    this.depsArr[idx] = deps;
+    return false;
+  }
+}
--- a/packages/inula-next/src/TextNode.js
+++ b/packages/inula-next/src/TextNode.js
@ -0,0 +1,24 @@
+import { DLStore, cached } from './store';
+
+/**
+ * @brief Shorten document.createTextNode
+ * @param value
+ * @returns Text
+ */
+export function createTextNode(value, deps) {
+  const node = DLStore.document.createTextNode(value);
+  node.$$deps = deps;
+  return node;
+}
+
+/**
+ * @brief Update text node and check if the value is changed
+ * @param node
+ * @param value
+ */
+export function updateText(node, valueFunc, deps) {
+  if (cached(deps, node.$$deps)) return;
+  const value = valueFunc();
+  node.textContent = value;
+  node.$$deps = deps;
+}
--- a/packages/inula-next/src/index.d.ts
+++ b/packages/inula-next/src/index.d.ts
@ -0,0 +1 @@
+export * from './types/index';
--- a/packages/inula-next/src/index.js
+++ b/packages/inula-next/src/index.js
@ -0,0 +1,62 @@
+import { DLNode } from './DLNode';
+import { insertNode } from './HTMLNode';
+
+export * from './HTMLNode';
+export * from './CompNode';
+export * from './EnvNode';
+export * from './TextNode';
+export * from './PropView';
+export * from './SnippetNode';
+export * from './MutableNode/ForNode';
+export * from './MutableNode/ExpNode';
+export * from './MutableNode/CondNode';
+export * from './MutableNode/TryNode';
+
+import { DLStore } from './store';
+
+export { setGlobal, setDocument } from './store';
+
+function initStore() {
+  // Declare a global variable to store willUnmount functions
+  DLStore.global.WillUnmountStore = [];
+  // Declare a global variable to store didUnmount functions
+  DLStore.global.DidUnmountStore = [];
+}
+
+/**
+ * @brief Render the DL class to the element
+ * @param {typeof import('./CompNode').CompNode} Comp
+ * @param {HTMLElement | string} idOrEl
+ */
+export function render(Comp, idOrEl) {
+  let el = idOrEl;
+  if (typeof idOrEl === 'string') {
+    const elFound = DLStore.document.getElementById(idOrEl);
+    if (elFound) el = elFound;
+    else {
+      throw new Error(`DLight: Element with id ${idOrEl} not found`);
+    }
+  }
+  initStore();
+  el.innerHTML = '';
+  const dlNode = new Comp();
+  dlNode._$init();
+  insertNode(el, dlNode, 0);
+  DLNode.runDidMount();
+}
+
+export function manual(callback, _deps) {
+  return callback();
+}
+export function escape(arg) {
+  return arg;
+}
+
+export const $ = escape;
+export const required = null;
+
+export function use() {
+  console.error(
+    'DLight: use() is not supported be called directly. You can only assign `use(model)` to a dlight class property. Any other expressions are not allowed.'
+  );
+}
--- a/packages/inula-next/src/scheduler.js
+++ b/packages/inula-next/src/scheduler.js
@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+const p = Promise.resolve();
+
+/**
+ * Schedule a task to run in the next microtask.
+ *
+ * @param {() => void} task
+ */
+export function schedule(task) {
+  p.then(task);
+}
--- a/packages/inula-next/src/store.js
+++ b/packages/inula-next/src/store.js
@ -0,0 +1,42 @@
+import { Store } from '@openinula/store';
+
+// ---- Using external Store to store global and document
+//      Because Store is a singleton, it is safe to use it as a global variable
+//      If created in DLight package, different package versions will introduce
+//      multiple Store instances.
+
+if (!('global' in Store)) {
+  if (typeof window !== 'undefined') {
+    Store.global = window;
+  } else if (typeof global !== 'undefined') {
+    Store.global = global;
+  } else {
+    Store.global = {};
+  }
+}
+if (!('document' in Store)) {
+  if (typeof document !== 'undefined') {
+    Store.document = document;
+  }
+}
+
+export const DLStore = { ...Store, delegatedEvents: new Set() };
+
+export function setGlobal(globalObj) {
+  DLStore.global = globalObj;
+}
+
+export function setDocument(customDocument) {
+  DLStore.document = customDocument;
+}
+
+/**
+ * @brief Compare the deps with the previous deps
+ * @param deps
+ * @param prevDeps
+ * @returns
+ */
+export function cached(deps, prevDeps) {
+  if (!prevDeps || deps.length !== prevDeps.length) return false;
+  return deps.every((dep, i) => !(dep instanceof Object) && prevDeps[i] === dep);
+}
--- a/packages/inula-next/src/types/compTag.d.ts
+++ b/packages/inula-next/src/types/compTag.d.ts
@ -0,0 +1,74 @@
+import { type DLightHTMLAttributes } from './htmlTag';
+
+// a very magical solution
+// when vscode parse ts, if it is type A<T> = B<xxx<T>>, it will show the detailed type,
+// but if type A<T> = B<xxx<T>> & xxx, it will only show alias (here is A)
+// because I don't want to expose the detailed type, so type A<T> = B<xxx<T>> & Useless
+// but if type Useless = { useless: never } will cause this type to have an additional property userless
+// so just don't add key!
+type Useless = { [key in '']: never };
+
+export type DLightObject<T> = {
+  [K in keyof T]-?: undefined extends T[K]
+    ? (value?: T[K]) => DLightObject<Omit<T, K>>
+    : (value: T[K]) => DLightObject<Omit<T, K>>;
+};
+interface CustomNodeProps {
+  willMount: (node: any) => void;
+  didMount: (node: any) => void;
+  willUnmount: (node: any) => void;
+  didUnmount: (node: any) => void;
+  didUpdate: (node: any, key: string, prevValue: any, currValue: any) => void;
+  ref: (node: any) => void;
+  elements: HTMLElement[] | ((holder: HTMLElement[]) => void) | undefined;
+  forwardProps: true | undefined;
+}
+
+export type ContentProp<T = object> = T & { _$idContent: true };
+
+export type RemoveOptional<T> = {
+  [K in keyof T]-?: T[K];
+};
+
+type IsAny<T> = { _$isAny: true } extends T ? true : false;
+
+export type ContentKeyName<T> = {
+  [K in keyof T]: IsAny<T[K]> extends true
+    ? never
+    : // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      T[K] extends ContentProp<infer _>
+      ? K
+      : never;
+}[keyof T];
+
+export type CheckContent<T> = RemoveOptional<T>[ContentKeyName<RemoveOptional<T>>];
+
+type CustomClassTag<T, O> =
+  ContentKeyName<RemoveOptional<O>> extends undefined
+    ? () => DLightObject<T>
+    : undefined extends O[ContentKeyName<RemoveOptional<O>>]
+      ? CheckContent<O> extends ContentProp<infer U>
+        ? (content?: U extends unknown ? any : unknown) => DLightObject<Omit<T, ContentKeyName<RemoveOptional<O>>>>
+        : never
+      : CheckContent<O> extends ContentProp<infer U>
+        ? (content: U extends unknown ? any : unknown) => DLightObject<Omit<T, ContentKeyName<RemoveOptional<O>>>>
+        : never;
+
+type CustomSnippetTag<T> = T extends { content: infer U }
+  ? (content: U) => DLightObject<Omit<T, 'content'>>
+  : T extends { content?: infer U }
+    ? (content?: U) => DLightObject<Omit<T, 'content'>>
+    : () => DLightObject<T>;
+
+type CustomTagType<T, G> = CustomClassTag<
+  T & CustomNodeProps & (keyof G extends never ? object : DLightHTMLAttributes<G, object, HTMLElement>),
+  T
+> &
+  Useless;
+export type Typed<T = object, G = object> = CustomTagType<T, G> & Useless;
+export type SnippetTyped<T = object> = CustomSnippetTag<T> & Useless;
+
+export type Pretty = any;
+
+// ---- reverse
+export type UnTyped<T> = T extends Typed<infer U> ? U : never;
--- a/packages/inula-next/src/types/envTag.d.ts
+++ b/packages/inula-next/src/types/envTag.d.ts
@ -0,0 +1,6 @@
+// ---- env
+import { DLightObject } from './compTag';
+
+type AnyEnv = { _$anyEnv: true };
+
+export const env: <T = AnyEnv>() => T extends AnyEnv ? any : DLightObject<T>;
--- a/packages/inula-next/src/types/expressionTag.d.ts
+++ b/packages/inula-next/src/types/expressionTag.d.ts
@ -0,0 +1,13 @@
+interface ExpressionTag {
+  willMount: (node: any) => void;
+  didMount: (node: any) => void;
+  willUnmount: (node: any) => void;
+  didUnmount: (node: any) => void;
+  didUpdate: <T>(node: any, key: string, prevValue: T, currValue: T) => void;
+  elements: HTMLElement[] | ((holder: HTMLElement[]) => void) | undefined;
+  ref: (node: any) => void;
+}
+
+type ExpressionTagFunc = (nodes: any) => ExpressionTag;
+
+export const _: ExpressionTagFunc;
--- a/packages/inula-next/src/types/htmlTag/event.d.ts
+++ b/packages/inula-next/src/types/htmlTag/event.d.ts
@ -0,0 +1,516 @@
+export interface DLightGlobalEventHandlers {
+  /**
+   * Fires when the user aborts the download.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/abort_event)
+   */
+  onAbort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationcancel_event) */
+  onAnimationCancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event) */
+  onAnimationEnd: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event) */
+  onAnimationIteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event) */
+  onAnimationStart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/auxclick_event) */
+  onAuxClick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/beforeinput_event) */
+  onBeforeInput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+
+  /**
+   * Fires when the object loses the input focus.
+   * @param ev The focus event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/blur_event)
+   */
+  onBlur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/cancel_event) */
+  onCancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when playback is possible, but would require further buffering.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplay_event)
+   */
+  onCanPlay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplaythrough_event) */
+  onCanPlayThrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when the contents of the object or selection have changed.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event)
+   */
+  onChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when the user clicks the left mouse button on the object
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/click_event)
+   */
+  onClick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close_event) */
+  onClose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when the user clicks the right mouse button in the client area, opening the context menu.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event)
+   */
+  onContextMenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/copy_event) */
+  onCopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTrackElement/cuechange_event) */
+  onCueChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/cut_event) */
+  onCut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+
+  /**
+   * Fires when the user double-clicks the object.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/dblclick_event)
+   */
+  onDblClick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /**
+   * Fires on the source object continuously during a drag operation.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drag_event)
+   */
+  onDrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /**
+   * Fires on the source object when the user releases the mouse at the close of a drag operation.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragend_event)
+   */
+  onDragEnd: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /**
+   * Fires on the target element when the user drags the object to a valid drop target.
+   * @param ev The drag event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragenter_event)
+   */
+  onDragEnter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /**
+   * Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
+   * @param ev The drag event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragleave_event)
+   */
+  onDragLeave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /**
+   * Fires on the target element continuously while the user drags the object over a valid drop target.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragover_event)
+   */
+  onDragOver: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /**
+   * Fires on the source object when the user starts to drag a text selection or selected object.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragstart_event)
+   */
+  onDragStart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drop_event) */
+  onDrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+
+  /**
+   * Occurs when the duration attribute is updated.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/durationchange_event)
+   */
+  onDurationChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the media element is reset to its initial state.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/emptied_event)
+   */
+  onEmptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the end of playback is reached.
+   * @param ev The event
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ended_event)
+   */
+  onEnded: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when an error occurs during object loading.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/error_event)
+   */
+  onError: OnErrorEventHandler;
+
+  /**
+   * Fires when the object receives focus.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/focus_event)
+   */
+  onFocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/formdata_event) */
+  onFormData: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/gotpointercapture_event) */
+  onGotPointerCapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event) */
+  onInput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/invalid_event) */
+  onInvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when the user presses a key.
+   * @param ev The keyboard event
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keydown_event)
+   */
+  onKeyDown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+
+  /**
+   * Fires when the user presses an alphanumeric key.
+   * @param ev The event.
+   * @deprecated
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keypress_event)
+   */
+  onKeyPress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+
+  /**
+   * Fires when the user releases a key.
+   * @param ev The keyboard event
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keyup_event)
+   */
+  onKeyUp: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+
+  /**
+   * Fires immediately after the browser loads the object.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGElement/load_event)
+   */
+  onLoad: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when media data is loaded at the current playback position.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadeddata_event)
+   */
+  onLoadedData: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the duration and dimensions of the media have been determined.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadedmetadata_event)
+   */
+  onLoadedMetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when Internet Explorer begins looking for media data.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadstart_event)
+   */
+  onLoadStart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/lostpointercapture_event) */
+  onLostPointerCapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /**
+   * Fires when the user clicks the object with either mouse button.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mousedown_event)
+   */
+  onMouseDown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseenter_event) */
+  onMouseEnter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseleave_event) */
+  onMouseLeave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /**
+   * Fires when the user moves the mouse over the object.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mousemove_event)
+   */
+  onMouseMove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /**
+   * Fires when the user moves the mouse pointer outside the boundaries of the object.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseout_event)
+   */
+  onMouseOut: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /**
+   * Fires when the user moves the mouse pointer into the object.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseover_event)
+   */
+  onMouseOver: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /**
+   * Fires when the user releases a mouse button while the mouse is over the object.
+   * @param ev The mouse event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseup_event)
+   */
+  onMouseUp: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/paste_event) */
+  onPaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+
+  /**
+   * Occurs when playback is paused.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/pause_event)
+   */
+  onPause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the play method is requested.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/play_event)
+   */
+  onPlay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the audio or video has started playing.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/playing_event)
+   */
+  onPlaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointercancel_event) */
+  onPointerCancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerdown_event) */
+  onPointerDown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerenter_event) */
+  onPointerEnter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerleave_event) */
+  onPointerLeave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointermove_event) */
+  onPointerMove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerout_event) */
+  onPointerOut: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerover_event) */
+  onPointerOver: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerup_event) */
+  onPointerUp: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+
+  /**
+   * Occurs to indicate progress while downloading media data.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/progress_event)
+   */
+  onProgress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
+
+  /**
+   * Occurs when the playback rate is increased or decreased.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ratechange_event)
+   */
+  onRateChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when the user resets a form.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/reset_event)
+   */
+  onReset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement/resize_event) */
+  onResize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+
+  /**
+   * Fires when the user repositions the scroll box in the scroll bar on the object.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scroll_event)
+   */
+  onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scrollend_event) */
+  onScrollEnd: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/securitypolicyviolation_event) */
+  onSecurityPolicyViolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+
+  /**
+   * Occurs when the seek operation ends.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/seeked_event)
+   */
+  onSeeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the current playback position is moved.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/seeking_event)
+   */
+  onSeeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Fires when the current selection changes.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/select_event)
+   */
+  onSelect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/selectionchange_event) */
+  onSelectionChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/selectstart_event) */
+  onSelectStart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement/slotchange_event) */
+  onSlotChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when the download has stopped.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/stalled_event)
+   */
+  onStalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/submit_event) */
+  onSubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+
+  /**
+   * Occurs if the load operation has been intentionally halted.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/suspend_event)
+   */
+  onSuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs to indicate the current playback position.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/timeupdate_event)
+   */
+  onTimeUpdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/toggle_event) */
+  onToggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitioncancel_event) */
+  onTransitionCancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event) */
+  onTransitionEnd: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionrun_event) */
+  onTransitionRun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionstart_event) */
+  onTransitionStart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+
+  /**
+   * Occurs when the volume is changed, or playback is muted or unmuted.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/volumechange_event)
+   */
+  onVolumeChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * Occurs when playback stops because the next frame of a video resource is not available.
+   * @param ev The event.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/waiting_event)
+   */
+  onWaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * @deprecated This is a legacy alias of `onAnimationEnd`.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event)
+   */
+  onWebkitAnimationEnd: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * @deprecated This is a legacy alias of `onAnimationIteration`.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event)
+   */
+  onWebkitAnimationIteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * @deprecated This is a legacy alias of `onAnimationStart`.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event)
+   */
+  onWebkitAnimationStart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /**
+   * @deprecated This is a legacy alias of `onTransitionEnd`.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event)
+   */
+  onWebkitTransitionEnd: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/wheel_event) */
+  onWheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+}
--- a/packages/inula-next/src/types/htmlTag/htmlElement.d.ts
+++ b/packages/inula-next/src/types/htmlTag/htmlElement.d.ts
@ -0,0 +1,33 @@
+import { type Properties } from 'csstype';
+
+// ---- Used to determine whether X and Y are equal, return A if equal, otherwise B
+type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
+
+export type OmitIndexSignature<ObjectType> = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? never : KeyType]: ObjectType[KeyType];
+};
+
+// ---- For each key, check whether there is readonly, if there is, return never, and then Pick out is not never
+type WritableKeysOf<T> = {
+  [P in keyof T]: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P, never>;
+}[keyof T];
+type RemoveReadOnly<T> = Pick<T, WritableKeysOf<T>>;
+
+// ---- Delete all functions
+type OmitFunction<T> = Omit<T, { [K in keyof T]: T[K] extends (...args: any) => any ? K : never }[keyof T]>;
+
+type OmitFuncAndReadOnly<T> = RemoveReadOnly<OmitFunction<OmitIndexSignature<T>>>;
+
+// ---- properties
+type OmitFuncAndReadOnlyProperty<G> = Omit<OmitFuncAndReadOnly<G>, 'className' | 'htmlFor' | 'style' | 'innerText'>;
+
+type CustomCSSProperties = {
+  [Key in `--${string}`]: string | number;
+};
+
+export type HTMLAttributes<T> = OmitFuncAndReadOnlyProperty<T> & {
+  style: Properties & CustomCSSProperties;
+  class: string;
+  for: string;
+};
--- a/packages/inula-next/src/types/htmlTag/index.d.ts
+++ b/packages/inula-next/src/types/htmlTag/index.d.ts
@ -0,0 +1,236 @@
+import type { DLightGlobalEventHandlers } from './event';
+import type { OmitIndexSignature, HTMLAttributes } from './htmlElement';
+
+// ---- If there is an event(start with on), remove it
+export type PropertyWithEvent<G> = Omit<
+  G,
+  {
+    [K in keyof G]: K extends `on${string}` ? K : never;
+  }[keyof G]
+> &
+  DLightGlobalEventHandlers;
+
+interface DLightHtmlProps<El> {
+  ref: El | ((holder: El) => void) | undefined;
+  prop: Record<string, string | number | boolean>;
+  attr: Record<string, string>;
+  dataset: Record<string, string>;
+  forwardProps: true | undefined;
+  willMount: (el: El) => void;
+  didMount: (el: El) => void;
+  willUnmount: (el: El) => void;
+  didUnmount: (el: El) => void;
+  didUpdate: <T>(el: El, key: string, prevValue: T, currValue: T) => void;
+}
+
+export type DLightHTMLAttributes<T, G, El> = DLightHtmlProps<El> & HTMLAttributes<T> & G;
+
+export type DLightHTMLAttributesFunc<T, G, El> = {
+  [K in keyof DLightHTMLAttributes<T, G, El>]: (
+    value?: DLightHTMLAttributes<T, G, El>[K]
+  ) => Omit<DLightHTMLAttributesFunc<T, G, El>, K>;
+};
+
+export type DLightHtmlTagFunc<T = HTMLElement, G = object> = (
+  innerText?: string | number | ((View: never) => void)
+) => DLightHTMLAttributesFunc<PropertyWithEvent<OmitIndexSignature<T>>, G, T>;
+
+export const a: DLightHtmlTagFunc<HTMLAnchorElement>;
+export const abbr: DLightHtmlTagFunc;
+export const address: DLightHtmlTagFunc;
+export const area: DLightHtmlTagFunc<HTMLAreaElement>;
+export const article: DLightHtmlTagFunc;
+export const aside: DLightHtmlTagFunc;
+export const audio: DLightHtmlTagFunc<HTMLAudioElement>;
+export const b: DLightHtmlTagFunc;
+export const base: DLightHtmlTagFunc<HTMLBaseElement>;
+export const bdi: DLightHtmlTagFunc;
+export const bdo: DLightHtmlTagFunc;
+export const blockquote: DLightHtmlTagFunc<HTMLQuoteElement>;
+export const body: DLightHtmlTagFunc<HTMLBodyElement>;
+export const br: DLightHtmlTagFunc<HTMLBRElement>;
+export const button: DLightHtmlTagFunc<HTMLButtonElement>;
+export const canvas: DLightHtmlTagFunc<HTMLCanvasElement>;
+export const caption: DLightHtmlTagFunc<HTMLTableCaptionElement>;
+export const cite: DLightHtmlTagFunc;
+export const code: DLightHtmlTagFunc;
+export const col: DLightHtmlTagFunc<HTMLTableColElement>;
+export const colgroup: DLightHtmlTagFunc<HTMLTableColElement>;
+export const data: DLightHtmlTagFunc<HTMLDataElement>;
+export const datalist: DLightHtmlTagFunc<HTMLDataListElement>;
+export const dd: DLightHtmlTagFunc;
+export const del: DLightHtmlTagFunc<HTMLModElement>;
+export const details: DLightHtmlTagFunc<HTMLDetailsElement>;
+export const dfn: DLightHtmlTagFunc;
+export const dialog: DLightHtmlTagFunc<HTMLDialogElement>;
+export const div: DLightHtmlTagFunc<HTMLDivElement>;
+export const dl: DLightHtmlTagFunc<HTMLDListElement>;
+export const dt: DLightHtmlTagFunc;
+export const em: DLightHtmlTagFunc;
+export const embed: DLightHtmlTagFunc<HTMLEmbedElement>;
+export const fieldset: DLightHtmlTagFunc<HTMLFieldSetElement>;
+export const figcaption: DLightHtmlTagFunc;
+export const figure: DLightHtmlTagFunc;
+export const footer: DLightHtmlTagFunc;
+export const form: DLightHtmlTagFunc<HTMLFormElement>;
+export const h1: DLightHtmlTagFunc<HTMLHeadingElement>;
+export const h2: DLightHtmlTagFunc<HTMLHeadingElement>;
+export const h3: DLightHtmlTagFunc<HTMLHeadingElement>;
+export const h4: DLightHtmlTagFunc<HTMLHeadingElement>;
+export const h5: DLightHtmlTagFunc<HTMLHeadingElement>;
+export const h6: DLightHtmlTagFunc<HTMLHeadingElement>;
+export const head: DLightHtmlTagFunc<HTMLHeadElement>;
+export const header: DLightHtmlTagFunc;
+export const hgroup: DLightHtmlTagFunc;
+export const hr: DLightHtmlTagFunc<HTMLHRElement>;
+export const html: DLightHtmlTagFunc<HTMLHtmlElement>;
+export const i: DLightHtmlTagFunc;
+export const iframe: DLightHtmlTagFunc<HTMLIFrameElement>;
+export const img: DLightHtmlTagFunc<HTMLImageElement>;
+export const input: DLightHtmlTagFunc<HTMLInputElement>;
+export const ins: DLightHtmlTagFunc<HTMLModElement>;
+export const kbd: DLightHtmlTagFunc;
+export const label: DLightHtmlTagFunc<HTMLLabelElement>;
+export const legend: DLightHtmlTagFunc<HTMLLegendElement>;
+export const li: DLightHtmlTagFunc<HTMLLIElement>;
+export const link: DLightHtmlTagFunc<HTMLLinkElement>;
+export const main: DLightHtmlTagFunc;
+export const map: DLightHtmlTagFunc<HTMLMapElement>;
+export const mark: DLightHtmlTagFunc;
+export const menu: DLightHtmlTagFunc<HTMLMenuElement>;
+export const meta: DLightHtmlTagFunc<HTMLMetaElement>;
+export const meter: DLightHtmlTagFunc<HTMLMeterElement>;
+export const nav: DLightHtmlTagFunc;
+export const noscript: DLightHtmlTagFunc;
+export const object: DLightHtmlTagFunc<HTMLObjectElement>;
+export const ol: DLightHtmlTagFunc<HTMLOListElement>;
+export const optgroup: DLightHtmlTagFunc<HTMLOptGroupElement>;
+export const option: DLightHtmlTagFunc<HTMLOptionElement>;
+export const output: DLightHtmlTagFunc<HTMLOutputElement>;
+export const p: DLightHtmlTagFunc<HTMLParagraphElement>;
+export const picture: DLightHtmlTagFunc<HTMLPictureElement>;
+export const pre: DLightHtmlTagFunc<HTMLPreElement>;
+export const progress: DLightHtmlTagFunc<HTMLProgressElement>;
+export const q: DLightHtmlTagFunc<HTMLQuoteElement>;
+export const rp: DLightHtmlTagFunc;
+export const rt: DLightHtmlTagFunc;
+export const ruby: DLightHtmlTagFunc;
+export const s: DLightHtmlTagFunc;
+export const samp: DLightHtmlTagFunc;
+export const script: DLightHtmlTagFunc<HTMLScriptElement>;
+export const section: DLightHtmlTagFunc;
+export const select: DLightHtmlTagFunc<HTMLSelectElement>;
+export const slot: DLightHtmlTagFunc<HTMLSlotElement>;
+export const small: DLightHtmlTagFunc;
+export const source: DLightHtmlTagFunc<HTMLSourceElement>;
+export const span: DLightHtmlTagFunc<HTMLSpanElement>;
+export const strong: DLightHtmlTagFunc;
+export const style: DLightHtmlTagFunc<HTMLStyleElement>;
+export const sub: DLightHtmlTagFunc;
+export const summary: DLightHtmlTagFunc;
+export const sup: DLightHtmlTagFunc;
+export const table: DLightHtmlTagFunc<HTMLTableElement>;
+export const tbody: DLightHtmlTagFunc<HTMLTableSectionElement>;
+export const td: DLightHtmlTagFunc<HTMLTableCellElement>;
+export const template: DLightHtmlTagFunc<HTMLTemplateElement>;
+export const textarea: DLightHtmlTagFunc<HTMLTextAreaElement>;
+export const tfoot: DLightHtmlTagFunc<HTMLTableSectionElement>;
+export const th: DLightHtmlTagFunc<HTMLTableCellElement>;
+export const thead: DLightHtmlTagFunc<HTMLTableSectionElement>;
+export const time: DLightHtmlTagFunc<HTMLTimeElement>;
+export const title: DLightHtmlTagFunc<HTMLTitleElement>;
+export const tr: DLightHtmlTagFunc<HTMLTableRowElement>;
+export const track: DLightHtmlTagFunc<HTMLTrackElement>;
+export const u: DLightHtmlTagFunc;
+export const ul: DLightHtmlTagFunc<HTMLUListElement>;
+export const var_: DLightHtmlTagFunc;
+export const video: DLightHtmlTagFunc<HTMLVideoElement>;
+export const wbr: DLightHtmlTagFunc;
+export const acronym: DLightHtmlTagFunc;
+export const applet: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const basefont: DLightHtmlTagFunc;
+export const bgsound: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const big: DLightHtmlTagFunc;
+export const blink: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const center: DLightHtmlTagFunc;
+export const dir: DLightHtmlTagFunc<HTMLDirectoryElement>;
+export const font: DLightHtmlTagFunc<HTMLFontElement>;
+export const frame: DLightHtmlTagFunc<HTMLFrameElement>;
+export const frameset: DLightHtmlTagFunc<HTMLFrameSetElement>;
+export const isindex: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const keygen: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const listing: DLightHtmlTagFunc<HTMLPreElement>;
+export const marquee: DLightHtmlTagFunc<HTMLMarqueeElement>;
+export const menuitem: DLightHtmlTagFunc;
+export const multicol: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const nextid: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const nobr: DLightHtmlTagFunc;
+export const noembed: DLightHtmlTagFunc;
+export const noframes: DLightHtmlTagFunc;
+export const param: DLightHtmlTagFunc<HTMLParamElement>;
+export const plaintext: DLightHtmlTagFunc;
+export const rb: DLightHtmlTagFunc;
+export const rtc: DLightHtmlTagFunc;
+export const spacer: DLightHtmlTagFunc<HTMLUnknownElement>;
+export const strike: DLightHtmlTagFunc;
+export const tt: DLightHtmlTagFunc;
+export const xmp: DLightHtmlTagFunc<HTMLPreElement>;
+export const animate: DLightHtmlTagFunc<SVGAnimateElement>;
+export const animateMotion: DLightHtmlTagFunc<SVGAnimateMotionElement>;
+export const animateTransform: DLightHtmlTagFunc<SVGAnimateTransformElement>;
+export const circle: DLightHtmlTagFunc<SVGCircleElement>;
+export const clipPath: DLightHtmlTagFunc<SVGClipPathElement>;
+export const defs: DLightHtmlTagFunc<SVGDefsElement>;
+export const desc: DLightHtmlTagFunc<SVGDescElement>;
+export const ellipse: DLightHtmlTagFunc<SVGEllipseElement>;
+export const feBlend: DLightHtmlTagFunc<SVGFEBlendElement>;
+export const feColorMatrix: DLightHtmlTagFunc<SVGFEColorMatrixElement>;
+export const feComponentTransfer: DLightHtmlTagFunc<SVGFEComponentTransferElement>;
+export const feComposite: DLightHtmlTagFunc<SVGFECompositeElement>;
+export const feConvolveMatrix: DLightHtmlTagFunc<SVGFEConvolveMatrixElement>;
+export const feDiffuseLighting: DLightHtmlTagFunc<SVGFEDiffuseLightingElement>;
+export const feDisplacementMap: DLightHtmlTagFunc<SVGFEDisplacementMapElement>;
+export const feDistantLight: DLightHtmlTagFunc<SVGFEDistantLightElement>;
+export const feDropShadow: DLightHtmlTagFunc<SVGFEDropShadowElement>;
+export const feFlood: DLightHtmlTagFunc<SVGFEFloodElement>;
+export const feFuncA: DLightHtmlTagFunc<SVGFEFuncAElement>;
+export const feFuncB: DLightHtmlTagFunc<SVGFEFuncBElement>;
+export const feFuncG: DLightHtmlTagFunc<SVGFEFuncGElement>;
+export const feFuncR: DLightHtmlTagFunc<SVGFEFuncRElement>;
+export const feGaussianBlur: DLightHtmlTagFunc<SVGFEGaussianBlurElement>;
+export const feImage: DLightHtmlTagFunc<SVGFEImageElement>;
+export const feMerge: DLightHtmlTagFunc<SVGFEMergeElement>;
+export const feMergeNode: DLightHtmlTagFunc<SVGFEMergeNodeElement>;
+export const feMorphology: DLightHtmlTagFunc<SVGFEMorphologyElement>;
+export const feOffset: DLightHtmlTagFunc<SVGFEOffsetElement>;
+export const fePointLight: DLightHtmlTagFunc<SVGFEPointLightElement>;
+export const feSpecularLighting: DLightHtmlTagFunc<SVGFESpecularLightingElement>;
+export const feSpotLight: DLightHtmlTagFunc<SVGFESpotLightElement>;
+export const feTile: DLightHtmlTagFunc<SVGFETileElement>;
+export const feTurbulence: DLightHtmlTagFunc<SVGFETurbulenceElement>;
+export const filter: DLightHtmlTagFunc<SVGFilterElement>;
+export const foreignObject: DLightHtmlTagFunc<SVGForeignObjectElement>;
+export const g: DLightHtmlTagFunc<SVGGElement>;
+export const image: DLightHtmlTagFunc<SVGImageElement>;
+export const line: DLightHtmlTagFunc<SVGLineElement>;
+export const linearGradient: DLightHtmlTagFunc<SVGLinearGradientElement>;
+export const marker: DLightHtmlTagFunc<SVGMarkerElement>;
+export const mask: DLightHtmlTagFunc<SVGMaskElement>;
+export const metadata: DLightHtmlTagFunc<SVGMetadataElement>;
+export const mpath: DLightHtmlTagFunc<SVGMPathElement>;
+export const path: DLightHtmlTagFunc<SVGPathElement>;
+export const pattern: DLightHtmlTagFunc<SVGPatternElement>;
+export const polygon: DLightHtmlTagFunc<SVGPolygonElement>;
+export const polyline: DLightHtmlTagFunc<SVGPolylineElement>;
+export const radialGradient: DLightHtmlTagFunc<SVGRadialGradientElement>;
+export const rect: DLightHtmlTagFunc<SVGRectElement>;
+export const set: DLightHtmlTagFunc<SVGSetElement>;
+export const stop: DLightHtmlTagFunc<SVGStopElement>;
+export const svg: DLightHtmlTagFunc<SVGSVGElement>;
+export const switch_: DLightHtmlTagFunc<SVGSwitchElement>;
+export const symbol: DLightHtmlTagFunc<SVGSymbolElement>;
+export const text: DLightHtmlTagFunc<SVGTextElement>;
+export const textPath: DLightHtmlTagFunc<SVGTextPathElement>;
+export const tspan: DLightHtmlTagFunc<SVGTSpanElement>;
+// export const use: DLightHtmlTagFunc<SVGUseElement>
+export const view: DLightHtmlTagFunc<SVGViewElement>;
--- a/packages/inula-next/src/types/index.d.ts
+++ b/packages/inula-next/src/types/index.d.ts
@ -0,0 +1,41 @@
+import { type Typed } from './compTag';
+import { type DLightHtmlTagFunc } from './htmlTag';
+export { type Properties as CSSProperties } from 'csstype';
+
+export const comp: <T>(tag: T) => object extends T ? any : Typed<T>;
+export const tag: (tag: any) => DLightHtmlTagFunc;
+
+export { _ } from './expressionTag';
+export * from './htmlTag';
+export * from './compTag';
+export * from './envTag';
+export * from './model';
+export const Static: any;
+export const Children: any;
+export const Content: any;
+export const Prop: any;
+export const Env: any;
+export const Watch: any;
+export const ForwardProps: any;
+export const Main: any;
+export const App: any;
+export const Mount: (idOrEl: string | HTMLElement) => any;
+
+// ---- With actual value
+export function render(DL: any, idOrEl: string | HTMLElement): void;
+export function manual<T>(callback: () => T, _deps?: any[]): T;
+export function escape<T>(arg: T): T;
+export function setGlobal(globalObj: any): void;
+export function setDocument(customDocument: any): void;
+export const $: typeof escape;
+export const View: any;
+export const Snippet: any;
+export const Model: any;
+export const update: any;
+export const required: any;
+export function insertChildren<T>(parent: T, children: DLightViewProp): void;
+
+// ---- View types
+export type DLightViewComp<T = any> = Typed<T>;
+export type DLightViewProp = (View: any) => void;
+export type DLightViewLazy<T = any> = () => Promise<{ default: T }>;
--- a/packages/inula-next/src/types/model.d.ts
+++ b/packages/inula-next/src/types/model.d.ts
@ -0,0 +1,22 @@
+import { ContentKeyName, ContentProp } from './compTag';
+
+type RemoveDLightInternal<T, Props> = Omit<T, 'willMount' | 'didMount' | 'didUpdate' | 'willUnmount' | keyof Props>;
+
+export type Modeling<Model, Props = object> = (props: Props) => Model;
+
+type GetProps<T> = keyof T extends never ? never : ContentKeyName<T> extends undefined ? T : Omit<T, ContentKeyName<T>>;
+
+type GetContent<T> =
+  ContentKeyName<T> extends undefined ? never : T[ContentKeyName<T>] extends ContentProp<infer U> ? U : never;
+
+export const use: <M>(
+  model: M,
+  // @ts-expect-error Model should be a function
+  props?: GetProps<Parameters<M>[0]>,
+  // @ts-expect-error Model should be a function
+  content?: GetContent<Parameters<M>[0]>
+  // @ts-expect-error Model should be a function
+) => RemoveDLightInternal<ReturnType<M>, Parameters<M>[0]>;
+
+// @ts-expect-error Model should be a function
+export type ModelType<T> = RemoveDLightInternal<ReturnType<T>, Parameters<T>[0]>;
--- a/packages/inula-next/test/components.test.tsx
+++ b/packages/inula-next/test/components.test.tsx
@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render, View } from '../src';
+
+describe('components', () => {
+  describe('ref', () => {
+    it('should support ref', ({ container }) => {
+      let ref: HTMLElement;
+
+      function App() {
+        let count = 0;
+        let _ref: HTMLElement;
+
+        didMount: {
+          ref = _ref;
+        }
+
+        return <div ref={_ref}>test</div>;
+      }
+
+      render(App, container);
+
+      expect(ref).toBeInstanceOf(HTMLElement);
+    });
+
+    it('should support ref with function', ({ container }) => {
+      const fn = vi.fn();
+
+      function App() {
+        const ref = (el: HTMLElement) => {
+          fn();
+          expect(el).toBeInstanceOf(HTMLElement);
+        };
+
+        return <div ref={ref}>test</div>;
+      }
+
+      render(App, container);
+      expect(fn).toHaveBeenCalled();
+    });
+  });
+
+  describe('env', () => {
+    it('should support env', ({ container }) => {
+      function App() {
+        return (
+          <env theme="dark">
+            <Child name="child" />
+          </env>
+        );
+      }
+
+      function Child({ name }, { theme }) {
+        return (
+          <div>
+            name is {name}, theme is {theme}
+          </div>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>name is child, theme is dark</div>');
+    });
+  });
+});
--- a/packages/inula-next/test/conditional.test.tsx
+++ b/packages/inula-next/test/conditional.test.tsx
@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render, View } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('conditional rendering', () => {
+  it('should if, else, else if', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 2;
+      willMount: {
+        set = (val: number) => {
+          count = val;
+        };
+      }
+      return (
+        <>
+          <if cond={count > 1}>{count} is bigger than is 1</if>
+          <else-if cond={count === 1}>{count} is equal to 1</else-if>
+          <else>{count} is smaller than 1</else>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('2 is bigger than is 1');
+    set(1);
+    expect(container.innerHTML).toBe('1 is equal to 1');
+    set(0);
+    expect(container.innerHTML).toBe('0 is smaller than 1');
+  });
+
+  it('should support nested if', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      willMount: {
+        set = (val: number) => {
+          count = val;
+        };
+      }
+      return (
+        <if cond={count > 1}>
+          {count} is bigger than is 1
+          <if cond={count > 2}>
+            <div>{count} is bigger than is 2</div>
+          </if>
+        </if>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(`""`);
+    set(2);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+      "2 is bigger than is 1
+                "
+    `);
+    set(3);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+      "3 is bigger than is 1
+                <div>3 is bigger than is 2</div>"
+    `);
+    set(2);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+      "2 is bigger than is 1
+                "
+    `);
+  });
+});
--- a/packages/inula-next/test/lifecycle.test.tsx
+++ b/packages/inula-next/test/lifecycle.test.tsx
@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render, View } from '../src';
+
+describe('lifecycle', () => {
+  it('should call willMount', ({ container }) => {
+    const fn = vi.fn();
+
+    function App() {
+      willMount: {
+        expect(container.innerHTML).toBe('');
+        fn();
+      }
+
+      return <div>test</div>;
+    }
+
+    render(App, container);
+    expect(fn).toHaveBeenCalled();
+  });
+
+  it('should call didMount', ({ container }) => {
+    const fn = vi.fn();
+
+    function App() {
+      didMount: {
+        expect(container.innerHTML).toBe('<div>test</div>');
+        fn();
+      }
+
+      return <div>test</div>;
+    }
+
+    render(App, container);
+    expect(fn).toHaveBeenCalled();
+  });
+
+  // TODO: implement unmount
+  it.skip('should call willUnmount', ({ container }) => {
+    const fn = vi.fn();
+
+    function App() {
+      willUnmount: {
+        expect(container.innerHTML).toBe('<div>test</div>');
+        fn();
+      }
+
+      return <div>test</div>;
+    }
+
+    render(App, container);
+    expect(fn).toHaveBeenCalled();
+  });
+});
--- a/packages/inula-next/test/props.test.tsx
+++ b/packages/inula-next/test/props.test.tsx
@ -0,0 +1,139 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render, View } from '../src';
+
+describe('props', () => {
+  describe('normal props', () => {
+    it('should support prop', ({ container }) => {
+      function Child({ name }) {
+        return <h1>{name}</h1>;
+      }
+
+      function App() {
+        return <Child name={'hello world!!!'} />;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          hello world!!!
+        </h1>
+      </div>
+    `);
+    });
+
+    it('should support prop alias', ({ container }) => {
+      function Child({ name: alias }) {
+        return <h1>{alias}</h1>;
+      }
+
+      function App() {
+        return <Child name={'prop alias'} />;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          prop alias
+        </h1>
+      </div>
+    `);
+    });
+
+    it('should support prop alias with default value', ({ container }) => {
+      function Child({ name: alias = 'default' }) {
+        return <h1>{alias}</h1>;
+      }
+
+      function App() {
+        return <Child />;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          default
+        </h1>
+      </div>
+    `);
+    });
+  });
+
+  describe('children', () => {
+    it('should support children', ({ container }) => {
+      function Child({ children }) {
+        return <h1>{children}</h1>;
+      }
+
+      function App() {
+        return <Child>child content</Child>;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          child content
+        </h1>
+      </div>
+    `);
+    });
+
+    it('should support children alias', ({ container }) => {
+      function Child({ children: alias }) {
+        return <h1>{alias}</h1>;
+      }
+
+      function App() {
+        return <Child>children alias</Child>;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          children alias
+        </h1>
+      </div>
+    `);
+    });
+
+    // TODO: should support children default
+    it.fails('should support children alias with default value', ({ container }) => {
+      function Child({ children: alias = 'default child' }) {
+        return <h1>{alias}</h1>;
+      }
+
+      function App() {
+        return <Child />;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          default child
+        </h1>
+      </div>
+    `);
+    });
+  });
+});
--- a/packages/inula-next/test/rendering.test.tsx
+++ b/packages/inula-next/test/rendering.test.tsx
@ -0,0 +1,203 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render, View } from '../src';
+
+describe('rendering', () => {
+  describe('basic', () => {
+    it('should support basic dom', ({ container }) => {
+      function App() {
+        return <h1>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <h1>
+          hello world!!!
+        </h1>
+      </div>
+    `);
+    });
+
+    it('should support text and variable mixing', ({ container }) => {
+      function App() {
+        const name = 'world';
+        return <h1>hello {name}!!!</h1>;
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <h1>
+            hello
+            world
+            !!!
+          </h1>
+        </div>
+      `);
+    });
+
+    // TODO: SHOULD FIX
+    it.fails('should support dom has multiple layers ', ({ container }) => {
+      function App() {
+        let count = 0;
+
+        return (
+          <div>
+            Header
+            <h1>hello world!!!</h1>
+            <section>
+              <button>Add, Now is {count}</button>
+            </section>
+            Footer
+          </div>
+        );
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <h1>
+            hello world!!!
+          </h1>
+          <section>
+            <button>
+              Add, Now is
+              0
+            </button>
+          </section>
+        </div>
+      </div>
+    `);
+    });
+
+    // TODO: SHOULD FIX
+    it.fails('should support tag, text and variable mixing', ({ container }) => {
+      function App() {
+        let count = 'world';
+
+        return (
+          <section>
+            count: {count}
+            <button>Add, count is {count}</button>
+          </section>
+        );
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot();
+    });
+  });
+
+  describe('style', () => {
+    it('should apply styles correctly', ({ container }) => {
+      function App() {
+        return <h1 style={{ color: 'red' }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.color).toBe('red');
+    });
+
+    it('should apply multiple styles correctly', ({ container }) => {
+      function App() {
+        return <h1 style={{ color: 'red', fontSize: '20px' }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.color).toBe('red');
+      expect(h1.style.fontSize).toBe('20px');
+    });
+
+    it('should override styles correctly', ({ container }) => {
+      function App() {
+        return (
+          <h1 style={{ color: 'red' }}>
+            <span style={{ color: 'blue' }}>hello world!!!</span>
+          </h1>
+        );
+      }
+
+      render(App, container);
+      const span = container.querySelector('span');
+      expect(span.style.color).toBe('blue');
+    });
+
+    it('should handle dynamic styles', ({ container }) => {
+      const color = 'red';
+
+      function App() {
+        return <h1 style={{ color }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.color).toBe('red');
+    });
+  });
+
+  describe('event', () => {
+    it('should handle click events', ({ container }) => {
+      const handleClick = vi.fn();
+
+      function App() {
+        return <button onClick={handleClick}>Click me</button>;
+      }
+
+      render(App, container);
+      const button = container.querySelector('button');
+      button.click();
+
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('components', () => {
+    it('should render components', ({ container }) => {
+      function Button({ children }) {
+        return <button>{children}</button>;
+      }
+
+      function App() {
+        return (
+          <div>
+            <h1>hello world!!!</h1>
+            <Button>Click me</Button>
+          </div>
+        );
+      }
+
+      render(App, container);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            <h1>
+              hello world!!!
+            </h1>
+            <button>
+              Click me
+            </button>
+          </div>
+        </div>
+      `);
+    });
+  });
+});
--- a/packages/inula-next/test/utils.ts
+++ b/packages/inula-next/test/utils.ts
@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { test } from 'vitest';
+
+interface DomTestContext {
+  container: HTMLDivElement;
+}
+
+// Define a new test type that extends the default test type and adds the container fixture.
+export const domTest = test.extend<DomTestContext>({
+  container: async ({ task }, use) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    await use(container);
+    container.remove();
+  },
+});
--- a/packages/inula-next/tsconfig.json
+++ b/packages/inula-next/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "ts-node": {
+    "esm": true
+  }
+}
--- a/packages/inula-next/vitest.config.ts
+++ b/packages/inula-next/vitest.config.ts
@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+// vitest.config.ts
+import { defineConfig } from 'vitest/config';
+import inula from 'vite-plugin-inula-next';
+import * as path from 'node:path';
+
+export default defineConfig({
+  esbuild: {
+    jsx: 'preserve',
+  },
+  resolve: {
+    alias: {
+      '@openinula/next': path.resolve(__dirname, 'src'),
+    },
+    conditions: ['dev'],
+  },
+  plugins: [
+    // @ts-expect-error TODO: fix vite plugin interface is not compatible
+    inula(),
+  ],
+  test: {
+    environment: 'jsdom', // or 'jsdom', 'node'
+  },
+});
--- a/packages/inula-request/babel.config.js
+++ b/packages/inula-request/babel.config.js
@ -14,11 +14,5 @@
 */

 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      { targets: { node: 'current' }},
-    ],
-    ['@babel/preset-typescript'],
-  ],
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], ['@babel/preset-typescript']],
 };
--- a/packages/inula-request/rollup.config.js
+++ b/packages/inula-request/rollup.config.js
@ -21,16 +21,19 @@ import { babel } from '@rollup/plugin-babel';

 export default {
  input: './index.ts',
-  output: [{
+  output: [
+    {
      file: 'dist/inulaRequest.js',
      format: 'umd',
      exports: 'named',
      name: 'inulaRequest',
      sourcemap: false,
-  }, {
+    },
+    {
      file: 'dist/inulaRequest.esm-browser.js',
      format: 'esm',
-  }],
+    },
+  ],
  plugins: [
    resolve(),
    commonjs(),
--- a/packages/inula-router/src/configs/package.json
+++ b/packages/inula-router/src/configs/package.json
@ -1,4 +1,5 @@
 {
+  "name": "inula-router-config",
  "module": "./esm/connectRouter.js",
  "main": "./cjs/connectRouter.js",
  "types": "./@types/index.d.ts",
--- a/packages/inula-router/src/router/matcher/tests/lexer.test.ts
+++ b/packages/inula-router/src/router/matcher/tests/lexer.test.ts
@ -38,7 +38,7 @@ describe('path lexer Test', () => {
    expect(tokens).toStrictEqual([{ type: 'delimiter', value: '/' }]);
  });

-  it('don\'t start with a slash', () => {
+  it("don't start with a slash", () => {
    const func = () => lexer('abc.com');
    expect(func).toThrow(Error('Url must start with "/".'));
  });
--- a/packages/inula/scripts/rollup/rollup.config.js
+++ b/packages/inula/scripts/rollup/rollup.config.js
@ -109,13 +109,16 @@ function genConfig(mode) {
 function genJSXRuntimeConfig(mode) {
  return {
    input: path.resolve(libDir, 'src', 'jsx-runtime.ts'),
-    output: [{
+    output: [
+      {
        file: outputResolve('jsx-runtime.js'),
        format: 'cjs',
-    }, {
+      },
+      {
        file: outputResolve('jsx-runtime.esm-browser.js'),
        format: 'esm',
-    }],
+      },
+    ],
    plugins: [...getBasicPlugins(mode)],
  };
 }
--- a/packages/inula/src/inulax/types.ts
+++ b/packages/inula/src/inulax/types.ts
@ -31,7 +31,11 @@ export interface IObserver {
  clearByVNode: (vNode: any) => void;
 }

-export type StoreConfig<S extends Record<string, unknown>, A extends UserActions<S>, C extends UserComputedValues<S>> = {
+export type StoreConfig<
+  S extends Record<string, unknown>,
+  A extends UserActions<S>,
+  C extends UserComputedValues<S>,
+> = {
  id?: string;
  state?: S;
  actions?: A;
@ -45,7 +49,11 @@ export type UserActions<S extends Record<string, unknown>> = {
  [K: string]: ActionFunction<S>;
 };

-export type ActionFunction<S extends Record<string, unknown>> = (this: StoreObj<S, any, any>, state: S, ...args: any[]) => any;
+export type ActionFunction<S extends Record<string, unknown>> = (
+  this: StoreObj<S, any, any>,
+  state: S,
+  ...args: any[]
+) => any;

 export type StoreActions<S extends Record<string, unknown>, A extends UserActions<S>> = {
  [K in keyof A]: Action<A[K], S>;
--- a/packages/transpiler/babel-api/README.md
+++ b/packages/transpiler/babel-api/README.md
@ -0,0 +1,24 @@
+# @openinlua/babel-api
+A package that encapsulates the babel API for use in the transpiler.
+
+To implement the dependency injection pattern, the package exports a function that registers the babel API in the
+transpiler.
+
+```ts
+import { registerBabelAPI } from '@openinlua/babel-api';
+
+function plugin(api: typeof babel) {
+  registerBabelAPI(api);
+
+  // Your babel plugin code here.
+}
+```
+
+And then you can import to use it.
+> types can use as a `type` or as a `namespace` for the babel API.
+
+```ts
+import { types as t } from '@openinlua/babel-api';
+
+t.isIdentifier(node as t.Node);
+```
--- a/packages/transpiler/babel-api/package.json
+++ b/packages/transpiler/babel-api/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@openinula/babel-api",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "src/index.mjs",
+  "typings": "src/index.d.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/types": "^7.24.0",
+    "@types/babel__core": "^7.20.5"
+  }
+}
--- a/packages/transpiler/babel-api/src/index.d.ts
+++ b/packages/transpiler/babel-api/src/index.d.ts
@ -0,0 +1,7 @@
+import type babel from '@babel/core';
+
+// use .d.ts to satisfy the type check
+export * as types from '@babel/types';
+
+export declare function register(api: typeof babel): void;
+export declare function getBabelApi(): typeof babel;
--- a/packages/transpiler/babel-api/src/index.mjs
+++ b/packages/transpiler/babel-api/src/index.mjs
@ -0,0 +1,38 @@
+/** @type {null | typeof import('@babel/core').types} */
+let _t = null;
+/** @type {null | typeof import('@babel/core')} */
+let babelApi = null;
+
+/**
+ * @param {import('@babel/core')} api
+ */
+export const register = api => {
+  babelApi = api;
+  _t = api.types;
+};
+
+/**
+ * @returns {typeof import('@babel/core')}
+ */
+export const getBabelApi = () => {
+  if (!babelApi) {
+    throw new Error('Please call register() before using the babel api');
+  }
+  return babelApi;
+};
+
+export const types = new Proxy(
+  {},
+  {
+    get: (_, p, receiver) => {
+      if (!_t) {
+        throw new Error('Please call register() before using the babel types');
+      }
+
+      if (p in _t) {
+        return Reflect.get(_t, p, receiver);
+      }
+      return undefined;
+    },
+  }
+);
--- a/packages/transpiler/babel-inula-next-core/CHANGELOG.md
+++ b/packages/transpiler/babel-inula-next-core/CHANGELOG.md
@ -0,0 +1,14 @@
+# babel-preset-inula-next
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @openinula/class-transformer@0.0.2
+
+## 0.0.2
+
+### Patch Changes
+
+- 2f9d373: feat: change babel import
--- a/packages/transpiler/babel-inula-next-core/package.json
+++ b/packages/transpiler/babel-inula-next-core/package.json
@ -0,0 +1,63 @@
+{
+  "name": "babel-preset-inula-next",
+  "version": "0.0.3",
+  "author": {
+    "name": "IanDx",
+    "email": "iandxssxx@gmail.com"
+  },
+  "keywords": [
+    "dlight.js",
+    "babel-preset"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --sourcemap",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^20.10.5",
+    "tsup": "^6.7.0",
+    "typescript": "^5.3.2"
+  },
+  "dependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/generator": "^7.23.6",
+    "@babel/parser": "^7.24.4",
+    "@babel/plugin-syntax-decorators": "^7.23.3",
+    "@babel/plugin-syntax-jsx": "7.16.7",
+    "@babel/plugin-syntax-typescript": "^7.23.3",
+    "@babel/traverse": "^7.24.1",
+    "@babel/types": "^7.24.0",
+    "@openinula/class-transformer": "workspace:*",
+    "@openinula/reactivity-parser": "workspace:*",
+    "@openinula/view-generator": "workspace:*",
+    "@openinula/view-parser": "workspace:*",
+    "@types/babel-types": "^7.0.15",
+    "@types/babel__generator": "^7.6.8",
+    "@types/babel__parser": "^7.1.1",
+    "@types/babel__traverse": "^7.6.8",
+    "@openinula/jsx-view-parser": "workspace:*",
+    "@openinula/babel-api": "workspace:*",
+    "minimatch": "^9.0.3",
+    "vitest": "^1.4.0"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "clean": true,
+    "dts": true
+  }
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/functionalMacroAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/functionalMacroAnalyze.ts
@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { NodePath } from '@babel/core';
+import { LifeCycle, Visitor } from './types';
+import { addLifecycle, addWatch } from './nodeFactory';
+import { types as t } from '@openinula/babel-api';
+import { ON_MOUNT, ON_UNMOUNT, WATCH, WILL_MOUNT, WILL_UNMOUNT } from '../constants';
+import { extractFnFromMacro, getFnBody } from '../utils';
+import { getDependenciesFromNode } from './reactive/getDependencies';
+
+function isLifeCycleName(name: string): name is LifeCycle {
+  return [WILL_MOUNT, ON_MOUNT, WILL_UNMOUNT, ON_UNMOUNT].includes(name);
+}
+/**
+ * Analyze the functional macro in the function component
+ * 1. lifecycle
+ *   1. willMount
+ *   2. onMount
+ *   3. willUnMount
+ *   4. onUnmount
+ * 2. watch
+ */
+export function functionalMacroAnalyze(): Visitor {
+  return {
+    ExpressionStatement(path: NodePath<t.ExpressionStatement>, ctx) {
+      const expression = path.get('expression');
+      if (expression.isCallExpression()) {
+        const callee = expression.get('callee');
+        if (callee.isIdentifier()) {
+          const calleeName = callee.node.name;
+          // lifecycle
+          if (isLifeCycleName(calleeName)) {
+            const fnNode = extractFnFromMacro(expression, calleeName);
+            addLifecycle(ctx.current, calleeName, getFnBody(fnNode).node);
+            return;
+          }
+
+          // watch
+          if (calleeName === WATCH) {
+            const fnNode = extractFnFromMacro(expression, WATCH);
+            const deps = getWatchDeps(expression);
+
+            const depMask = getDependenciesFromNode(deps ?? fnNode, ctx);
+
+            addWatch(ctx.current, fnNode, depMask);
+            return;
+          }
+        }
+      }
+
+      ctx.unhandledNode.push(path.node);
+    },
+  };
+}
+
+function getWatchDeps(callExpression: NodePath<t.CallExpression>) {
+  const args = callExpression.get('arguments');
+  if (!args[1]) {
+    return null;
+  }
+
+  let deps: null | NodePath<t.ArrayExpression> = null;
+  if (args[1].isArrayExpression()) {
+    deps = args[1];
+  } else {
+    console.error('watch deps should be an array expression');
+  }
+  return deps;
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/hookAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/hookAnalyze.ts
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/index.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/index.ts
@ -0,0 +1,99 @@
+import { type NodePath } from '@babel/core';
+import { propsAnalyze } from './propsAnalyze';
+import { AnalyzeContext, Analyzer, ComponentNode, Visitor } from './types';
+import { addLifecycle, createComponentNode } from './nodeFactory';
+import { variablesAnalyze } from './variablesAnalyze';
+import { functionalMacroAnalyze } from './functionalMacroAnalyze';
+import { getFnBody } from '../utils';
+import { viewAnalyze } from './viewAnalyze';
+import { WILL_MOUNT } from '../constants';
+import { types as t } from '@openinula/babel-api';
+const builtinAnalyzers = [propsAnalyze, variablesAnalyze, functionalMacroAnalyze, viewAnalyze];
+
+function mergeVisitor(...visitors: Analyzer[]): Visitor {
+  return visitors.reduce<Visitor<AnalyzeContext>>((acc, cur) => {
+    return { ...acc, ...cur() };
+  }, {});
+}
+
+// walk through the function component body
+export function analyzeFnComp(
+  fnNode: NodePath<t.FunctionExpression | t.ArrowFunctionExpression>,
+  componentNode: ComponentNode,
+  { htmlTags, analyzers }: { analyzers: Analyzer[]; htmlTags: string[] },
+  level = 0
+) {
+  const visitor = mergeVisitor(...analyzers);
+  const context: AnalyzeContext = {
+    level,
+    current: componentNode,
+    htmlTags,
+    analyzers,
+    unhandledNode: [],
+    traverse: (path: NodePath<t.Statement>, ctx: AnalyzeContext) => {
+      path.traverse(visitor, ctx);
+    },
+  };
+  // --- analyze the function props ---
+  const params = fnNode.get('params');
+  const props = params[0];
+  if (props) {
+    if (props.isObjectPattern()) {
+      props.get('properties').forEach(prop => {
+        visitor.Prop?.(prop, context);
+      });
+    } else {
+      throw new Error(
+        `Component ${componentNode.name}: The first parameter of the function component must be an object pattern`
+      );
+    }
+  }
+
+  // --- analyze the function body ---
+  const bodyStatements = getFnBody(fnNode).get('body');
+  for (let i = 0; i < bodyStatements.length; i++) {
+    const p = bodyStatements[i];
+
+    const type = p.node.type;
+
+    const visit = visitor[type];
+    if (visit) {
+      // TODO: More type safe way to handle this
+      visit(p as unknown as any, context);
+    } else {
+      context.unhandledNode.push(p.node);
+    }
+
+    if (p.isReturnStatement()) {
+      visitor.ReturnStatement?.(p, context);
+      break;
+    }
+  }
+
+  if (context.unhandledNode.length) {
+    addLifecycle(componentNode, WILL_MOUNT, t.blockStatement(context.unhandledNode));
+  }
+}
+/**
+ * The process of analyzing the component
+ * 1. identify the component
+ * 2. identify the jsx slice in the component
+ * 2. identify the component's props, including children, alias, and default value
+ * 3. analyze the early return of the component, build into the branch
+ *
+ * @param fnName
+ * @param path
+ * @param options
+ */
+export function analyze(
+  fnName: string,
+  path: NodePath<t.FunctionExpression | t.ArrowFunctionExpression>,
+  options: { customAnalyzers?: Analyzer[]; htmlTags: string[] }
+) {
+  const analyzers = options?.customAnalyzers ? options.customAnalyzers : builtinAnalyzers;
+
+  const root = createComponentNode(fnName, path);
+  analyzeFnComp(path, root, { analyzers, htmlTags: options.htmlTags });
+
+  return root;
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/nodeFactory.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/nodeFactory.ts
@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { NodePath, type types as t } from '@babel/core';
+import type { ComponentNode, FunctionalExpression, LifeCycle, ReactiveVariable, Bitmap } from './types';
+import { PropType } from '../constants';
+import { ViewParticle } from '@openinula/reactivity-parser';
+
+export function createComponentNode(
+  name: string,
+  fnNode: NodePath<FunctionalExpression>,
+  parent?: ComponentNode
+): ComponentNode {
+  const comp: ComponentNode = {
+    type: 'comp',
+    level: parent ? parent.level + 1 : 0,
+    name,
+    children: undefined,
+    variables: [],
+    _reactiveBitMap: parent ? new Map<string, number>(parent._reactiveBitMap) : new Map<string, number>(),
+    lifecycle: {},
+    parent,
+    fnNode,
+    get ownAvailableVariables() {
+      return [...comp.variables.filter((p): p is ReactiveVariable => p.type === 'reactive')];
+    },
+    get availableVariables() {
+      // Here is critical for the dependency analysis, must put parent's availableVariables first
+      // so the subcomponent can react to the parent's variables change
+      return [...(comp.parent ? comp.parent.availableVariables : []), ...comp.ownAvailableVariables];
+    },
+  };
+
+  return comp;
+}
+
+export function addProperty(comp: ComponentNode, name: string, value: t.Expression | null, depBits: number) {
+  // The index of the variable in the availableVariables
+  const idx = comp.availableVariables.length;
+  const bit = 1 << idx;
+  const bitmap = depBits ? depBits | bit : bit;
+
+  comp._reactiveBitMap.set(name, bitmap);
+  comp.variables.push({ name, value, isComputed: !!depBits, type: 'reactive', depMask: bitmap, level: comp.level });
+}
+
+export function addMethod(comp: ComponentNode, name: string, value: FunctionalExpression) {
+  comp.variables.push({ name, value, type: 'method' });
+}
+
+export function addSubComponent(comp: ComponentNode, subComp: ComponentNode) {
+  comp.variables.push({ ...subComp, type: 'subComp' });
+}
+
+export function addLifecycle(comp: ComponentNode, lifeCycle: LifeCycle, block: t.BlockStatement) {
+  const compLifecycle = comp.lifecycle;
+  if (!compLifecycle[lifeCycle]) {
+    compLifecycle[lifeCycle] = [];
+  }
+  compLifecycle[lifeCycle]!.push(block);
+}
+
+export function addWatch(
+  comp: ComponentNode,
+  callback: NodePath<t.ArrowFunctionExpression> | NodePath<t.FunctionExpression>,
+  depMask: Bitmap
+) {
+  // if watch not exist, create a new one
+  if (!comp.watch) {
+    comp.watch = [];
+  }
+  comp.watch.push({ callback, depMask });
+}
+
+export function setViewChild(comp: ComponentNode, view: ViewParticle[], usedPropertySet: Set<string>) {
+  // TODO: Maybe we should merge
+  comp.usedPropertySet = usedPropertySet;
+  comp.children = view;
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/propsAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/propsAnalyze.ts
@ -0,0 +1,115 @@
+import { type NodePath } from '@babel/core';
+import { AnalyzeContext, Visitor } from './types';
+import { PropType } from '../constants';
+import { types as t } from '@openinula/babel-api';
+
+export interface Prop {
+  name: string;
+  type: PropType;
+  alias: string | null;
+  default: t.Expression | null;
+  nestedProps: string[] | null;
+  nestedRelationship: t.ObjectPattern | t.ArrayPattern | null;
+}
+
+/**
+ * Analyze the props deconstructing in the function component
+ * 1. meet identifier, just collect the name
+ * 2. has alias, collect the alias name
+ * 3. has default value, collect the default value
+ * 4. has rest element, collect the rest element
+ * 5. nested destructuring, the e2e goal:
+ * ```js
+ *  function(prop1, prop2: [p20, p21]) {}
+ *  // transform into
+ *  function({ prop1, prop2: [p20, p21] }) {
+ *    let p20, p21
+ *    watch(() => {
+ *      [p20, p21] = prop2
+ *    })
+ *  }
+ * ```
+ */
+export function propsAnalyze(): Visitor {
+  return {
+    Prop(path: NodePath<t.ObjectProperty | t.RestElement>, ctx) {
+      if (path.isObjectProperty()) {
+        // --- normal property ---
+        const key = path.node.key;
+        const value = path.node.value;
+        if (t.isIdentifier(key) || t.isStringLiteral(key)) {
+          const name = t.isIdentifier(key) ? key.name : key.value;
+          analyzeSingleProp(value, name, path, ctx);
+          return;
+        }
+
+        throw Error(`Unsupported key type in object destructuring: ${key.type}`);
+      } else {
+        // --- rest element ---
+        const arg = path.get('argument');
+        if (!Array.isArray(arg) && arg.isIdentifier()) {
+          addProp(ctx.current, PropType.REST, arg.node.name);
+        }
+      }
+    },
+  };
+}
+
+function analyzeSingleProp(
+  value: t.ObjectProperty['value'],
+  key: string,
+  path: NodePath<t.ObjectProperty>,
+  { current }: AnalyzeContext
+) {
+  let defaultVal: t.Expression | null = null;
+  let alias: string | null = null;
+  const nestedProps: string[] | null = [];
+  let nestedRelationship: t.ObjectPattern | t.ArrayPattern | null = null;
+  if (t.isIdentifier(value)) {
+    // 1. handle alias without default value
+    // handle alias without default value
+    if (key !== value.name) {
+      alias = value.name;
+    }
+  } else if (t.isAssignmentPattern(value)) {
+    // 2. handle default value case
+    const assignedName = value.left;
+    defaultVal = value.right;
+    if (t.isIdentifier(assignedName)) {
+      if (assignedName.name !== key) {
+        // handle alias in default value case
+        alias = assignedName.name;
+      }
+    } else {
+      throw Error(`Unsupported assignment type in object destructuring: ${assignedName.type}`);
+    }
+  } else if (t.isObjectPattern(value) || t.isArrayPattern(value)) {
+    // 3. nested destructuring
+    // we should collect the identifier that can be used in the function body as the prop
+    // e.g. function ({prop1, prop2: [p20X, {p211, p212: p212X}]}
+    // we should collect prop1, p20X, p211, p212X
+    path.get('value').traverse({
+      Identifier(path) {
+        // judge if the identifier is a prop
+        // 1. is the key of the object property and doesn't have alias
+        // 2. is the item of the array pattern and doesn't have alias
+        // 3. is alias of the object property
+        const parentPath = path.parentPath;
+        if (parentPath.isObjectProperty() && path.parentKey === 'value') {
+          // collect alias of the object property
+          nestedProps.push(path.node.name);
+        } else if (
+          parentPath.isArrayPattern() ||
+          parentPath.isObjectPattern() ||
+          parentPath.isRestElement() ||
+          (parentPath.isAssignmentPattern() && path.key === 'left')
+        ) {
+          // collect the key of the object property or the item of the array pattern
+          nestedProps.push(path.node.name);
+        }
+      },
+    });
+    nestedRelationship = value;
+  }
+  addProp(current, PropType.SINGLE, key, defaultVal, alias, nestedProps, nestedRelationship);
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/reactive/getDependencies.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/reactive/getDependencies.ts
@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import type { NodePath } from '@babel/core';
+import { AnalyzeContext } from '../types';
+import { types as t } from '@openinula/babel-api';
+import { reactivityFuncNames } from '../../const';
+
+/**
+ * @brief Get all valid dependencies of a babel path
+ * @param propertyKey
+ * @param path
+ * @param ctx
+ * @returns
+ */
+export function getDependenciesFromNode(
+  path: NodePath<t.Expression | t.ClassDeclaration>,
+  { current }: AnalyzeContext
+) {
+  // ---- Deps: console.log(count)
+  let depMask = 0;
+  // ---- Assign deps: count = 1 or count++
+  let assignDepMask = 0;
+  const depNodes: Record<string, t.Expression[]> = {};
+
+  const visitor = (innerPath: NodePath<t.Identifier>) => {
+    const propertyKey = innerPath.node.name;
+    const reactiveBitmap = current._reactiveBitMap.get(propertyKey);
+
+    if (reactiveBitmap !== undefined) {
+      if (isAssignmentExpressionLeft(innerPath) || isAssignmentFunction(innerPath)) {
+        assignDepMask |= reactiveBitmap;
+      } else {
+        depMask |= reactiveBitmap;
+        if (!depNodes[propertyKey]) depNodes[propertyKey] = [];
+        depNodes[propertyKey].push(t.cloneNode(innerPath.node));
+      }
+    }
+  };
+  if (path.isIdentifier()) {
+    visitor(path);
+  }
+  path.traverse({
+    Identifier: visitor,
+  });
+
+  // ---- Eliminate deps that are assigned in the same method
+  //      e.g. { console.log(count); count = 1 }
+  //      this will cause infinite loop
+  //      so we eliminate "count" from deps
+  if (assignDepMask & depMask) {
+    // TODO: I think we should throw an error here to indicate the user that there is a loop
+  }
+
+  return depMask;
+}
+
+/**
+ * @brief Check if it's the left side of an assignment expression, e.g. count = 1
+ * @param innerPath
+ * @returns assignment expression
+ */
+function isAssignmentExpressionLeft(innerPath: NodePath): NodePath | null {
+  let parentPath = innerPath.parentPath;
+  while (parentPath && !parentPath.isStatement()) {
+    if (parentPath.isAssignmentExpression()) {
+      if (parentPath.node.left === innerPath.node) return parentPath;
+      const leftPath = parentPath.get('left') as NodePath;
+      if (innerPath.isDescendant(leftPath)) return parentPath;
+    } else if (parentPath.isUpdateExpression()) {
+      return parentPath;
+    }
+    parentPath = parentPath.parentPath;
+  }
+
+  return null;
+}
+
+/**
+ * @brief Check if it's a reactivity function, e.g. arr.push
+ * @param innerPath
+ * @returns
+ */
+function isAssignmentFunction(innerPath: NodePath): boolean {
+  let parentPath = innerPath.parentPath;
+
+  while (parentPath && parentPath.isMemberExpression()) {
+    parentPath = parentPath.parentPath;
+  }
+  if (!parentPath) return false;
+  return (
+    parentPath.isCallExpression() &&
+    parentPath.get('callee').isIdentifier() &&
+    reactivityFuncNames.includes((parentPath.get('callee').node as t.Identifier).name)
+  );
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/types.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/types.ts
@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { type NodePath, types as t } from '@babel/core';
+import { ON_MOUNT, ON_UNMOUNT, PropType, WILL_MOUNT, WILL_UNMOUNT } from '../constants';
+import { ViewParticle } from '@openinula/reactivity-parser';
+
+export type LifeCycle = typeof WILL_MOUNT | typeof ON_MOUNT | typeof WILL_UNMOUNT | typeof ON_UNMOUNT;
+export type Bitmap = number;
+
+export type FunctionalExpression = t.FunctionExpression | t.ArrowFunctionExpression;
+
+interface BaseVariable<V> {
+  name: string;
+  value: V;
+}
+
+export interface ReactiveVariable extends BaseVariable<t.Expression | null> {
+  type: 'reactive';
+  level: number;
+  /**
+   * indicate the dependency of the variable | the index of the reactive variable
+   * i.e.
+   * let name = 'John';  // name's bitmap is 0x0001
+   * let age = 18;       // age's bitmap is 0x0010
+   * let greeting = `Hello, ${name}`; // greeting's bitmap is 0x0101
+   */
+  depMask: Bitmap;
+  // need a flag for computed to gen a getter
+  // watch is a static computed
+  isComputed: boolean;
+}
+
+export interface MethodVariable extends BaseVariable<FunctionalExpression> {
+  type: 'method';
+}
+
+export type SubCompVariable = ComponentNode<'subComp'>;
+
+export type Variable = ReactiveVariable | MethodVariable | SubCompVariable;
+
+export interface Prop {
+  name: string;
+  type: PropType;
+  alias: string | null;
+  default: t.Expression | null;
+  nestedProps: string[] | null;
+  nestedRelationship: t.ObjectPattern | t.ArrayPattern | null;
+}
+
+export interface ComponentNode<Type = 'comp'> {
+  type: Type;
+  name: string;
+  level: number;
+  // The variables defined in the component
+  variables: Variable[];
+  /**
+   * The used properties in the component
+   */
+  usedPropertySet?: Set<string>;
+  /**
+   * The map to find the reactive bitmap by name
+   */
+  _reactiveBitMap: Map<string, Bitmap>;
+  /**
+   * The available variables and props owned by the component
+   */
+  ownAvailableVariables: ReactiveVariable[];
+  /**
+   * The available variables and props for the component and its parent
+   */
+  availableVariables: ReactiveVariable[];
+  children?: (ComponentNode | ViewParticle)[];
+  parent?: ComponentNode;
+  /**
+   * The function body of the fn component code
+   */
+  fnNode: NodePath<FunctionalExpression>;
+  lifecycle: Partial<Record<LifeCycle, t.Statement[]>>;
+  /**
+   * The watch fn in the component
+   */
+  watch?: {
+    depMask: Bitmap;
+    callback: NodePath<t.ArrowFunctionExpression> | NodePath<t.FunctionExpression>;
+  }[];
+}
+
+export interface AnalyzeContext {
+  level: number;
+  current: ComponentNode;
+  analyzers: Analyzer[];
+  htmlTags: string[];
+  traverse: (p: NodePath<t.Statement>, ctx: AnalyzeContext) => void;
+  unhandledNode: t.Statement[];
+}
+
+export type Visitor<S = AnalyzeContext> = {
+  [Type in t.Statement['type']]?: (path: NodePath<Extract<t.Statement, { type: Type }>>, state: S) => void;
+} & {
+  Prop?: (path: NodePath<t.ObjectProperty | t.RestElement>, state: S) => void;
+};
+export type Analyzer = () => Visitor;
+
+export interface FnComponentDeclaration extends t.FunctionDeclaration {
+  id: t.Identifier;
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/utils.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/utils.ts
@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { NodePath, type types as t } from '@babel/core';
+import { FnComponentDeclaration } from './types';
+
+export function isValidPath<T>(path: NodePath<T>): path is NodePath<Exclude<T, undefined | null>> {
+  return !!path.node;
+}
+
+// The component name must be UpperCamelCase
+export function isValidComponent(node: t.FunctionDeclaration): node is FnComponentDeclaration {
+  // the first letter of the component name must be uppercase
+  return node.id ? isValidComponentName(node.id.name) : false;
+}
+
+export function isValidComponentName(name: string) {
+  // the first letter of the component name must be uppercase
+  return /^[A-Z]/.test(name);
+}
+
+export function hasJSX(path: NodePath<t.Node>) {
+  if (path.isJSXElement()) {
+    return true;
+  }
+
+  // check if there is JSXElement in the children
+  let seen = false;
+  path.traverse({
+    JSXElement() {
+      seen = true;
+    },
+  });
+  return seen;
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/variablesAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/variablesAnalyze.ts
@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { Visitor } from './types';
+import { addMethod, addProperty, addSubComponent, createComponentNode } from './nodeFactory';
+import { isValidPath } from './utils';
+import { type NodePath } from '@babel/core';
+import { COMPONENT } from '../constants';
+import { analyzeFnComp } from '.';
+import { getDependenciesFromNode } from './reactive/getDependencies';
+import { types as t } from '@openinula/babel-api';
+
+/**
+ * collect all properties and methods from the node
+ * and analyze the dependencies of the properties
+ * @returns
+ */
+export function variablesAnalyze(): Visitor {
+  return {
+    VariableDeclaration(path: NodePath<t.VariableDeclaration>, ctx) {
+      const declarations = path.get('declarations');
+      // iterate the declarations
+      declarations.forEach(declaration => {
+        const id = declaration.get('id');
+        // handle destructuring
+        if (id.isObjectPattern()) {
+          throw new Error('Object destructuring is not supported yet');
+        } else if (id.isArrayPattern()) {
+          // TODO: handle array destructuring
+          throw new Error('Array destructuring is not supported yet');
+        } else if (id.isIdentifier()) {
+          // --- properties: the state / computed / plain properties / methods ---
+          const init = declaration.get('init');
+          let depBits = 0;
+          if (isValidPath(init)) {
+            // handle the method
+            if (init.isArrowFunctionExpression() || init.isFunctionExpression()) {
+              addMethod(ctx.current, id.node.name, init.node);
+              return;
+            }
+            // handle the subcomponent
+            // Should like Component(() => {})
+            if (
+              init.isCallExpression() &&
+              init.get('callee').isIdentifier() &&
+              (init.get('callee').node as t.Identifier).name === COMPONENT &&
+              (init.get('arguments')[0].isFunctionExpression() || init.get('arguments')[0].isArrowFunctionExpression())
+            ) {
+              const fnNode = init.get('arguments')[0] as
+                | NodePath<t.ArrowFunctionExpression>
+                | NodePath<t.FunctionExpression>;
+              const subComponent = createComponentNode(id.node.name, fnNode, ctx.current);
+
+              analyzeFnComp(fnNode, subComponent, ctx);
+              addSubComponent(ctx.current, subComponent);
+              return;
+            }
+
+            depBits = getDependenciesFromNode(init, ctx);
+          }
+          addProperty(ctx.current, id.node.name, init.node || null, depBits);
+        }
+      });
+    },
+    FunctionDeclaration(path: NodePath<t.FunctionDeclaration>, { current }) {
+      const fnId = path.node.id;
+      if (!fnId) {
+        throw new Error('Function declaration must have an id');
+      }
+
+      const functionExpression = t.functionExpression(
+        path.node.id,
+        path.node.params,
+        path.node.body,
+        path.node.generator,
+        path.node.async
+      );
+      addMethod(current, fnId.name, functionExpression);
+    },
+  };
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyzer/viewAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyzer/viewAnalyze.ts
@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { Visitor } from './types';
+import { type NodePath } from '@babel/core';
+import { parseView as parseJSX } from '@openinula/jsx-view-parser';
+import { types as t, getBabelApi } from '@openinula/babel-api';
+import { parseReactivity } from '@openinula/reactivity-parser';
+import { reactivityFuncNames } from '../const';
+import { setViewChild } from './nodeFactory';
+
+/**
+ * Analyze the watch in the function component
+ */
+export function viewAnalyze(): Visitor {
+  return {
+    ReturnStatement(path: NodePath<t.ReturnStatement>, { htmlTags, current }) {
+      const returnNode = path.get('argument');
+      if (returnNode.isJSXElement() || returnNode.isJSXFragment()) {
+        const viewUnits = parseJSX(returnNode.node, {
+          babelApi: getBabelApi(),
+          htmlTags,
+          parseTemplate: false,
+        });
+        // @ts-expect-error TODO: FIX TYPE
+        const [viewParticles, usedPropertySet] = parseReactivity(viewUnits, {
+          babelApi: getBabelApi(),
+          availableProperties: current.availableVariables,
+          reactiveBitMap: current._reactiveBitMap,
+          reactivityFuncNames,
+        });
+
+        setViewChild(current, viewParticles, usedPropertySet);
+      }
+    },
+  };
+}
--- a/packages/transpiler/babel-inula-next-core/src/const.ts
+++ b/packages/transpiler/babel-inula-next-core/src/const.ts
@ -0,0 +1,490 @@
+export const devMode = process.env.NODE_ENV === 'development';
+
+export const alterAttributeMap = {
+  class: 'className',
+  for: 'htmlFor',
+};
+
+export const reactivityFuncNames = [
+  // ---- Array
+  'push',
+  'pop',
+  'shift',
+  'unshift',
+  'splice',
+  'sort',
+  'reverse',
+  // ---- Set
+  'add',
+  'delete',
+  'clear',
+  // ---- Map
+  'set',
+  'delete',
+  'clear',
+];
+
+export const defaultHTMLTags = [
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'head',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meta',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'slot',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
+  'acronym',
+  'applet',
+  'basefont',
+  'bgsound',
+  'big',
+  'blink',
+  'center',
+  'dir',
+  'font',
+  'frame',
+  'frameset',
+  'isindex',
+  'keygen',
+  'listing',
+  'marquee',
+  'menuitem',
+  'multicol',
+  'nextid',
+  'nobr',
+  'noembed',
+  'noframes',
+  'param',
+  'plaintext',
+  'rb',
+  'rtc',
+  'spacer',
+  'strike',
+  'tt',
+  'xmp',
+  'animate',
+  'animateMotion',
+  'animateTransform',
+  'circle',
+  'clipPath',
+  'defs',
+  'desc',
+  'ellipse',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence',
+  'filter',
+  'foreignObject',
+  'g',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'metadata',
+  'mpath',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  'set',
+  'stop',
+  'svg',
+  'switch',
+  'symbol',
+  'text',
+  'textPath',
+  'tspan',
+  'use',
+  'view',
+];
+
+export const availableDecoNames = ['Static', 'Prop', 'Env', 'Content', 'Children'];
+export const dlightDefaultPackageName = '@openinula/next';
+
+export const importMap = Object.fromEntries(
+  [
+    'createElement',
+    'setStyle',
+    'setDataset',
+    'setEvent',
+    'delegateEvent',
+    'setHTMLProp',
+    'setHTMLAttr',
+    'setHTMLProps',
+    'setHTMLAttrs',
+    'createTextNode',
+    'updateText',
+    'insertNode',
+    'ForNode',
+    'CondNode',
+    'ExpNode',
+    'EnvNode',
+    'TryNode',
+    'SnippetNode',
+    'PropView',
+    'render',
+  ].map(name => [name, `$$${name}`])
+);
+
+export const importsToDelete = [
+  'Static',
+  'Children',
+  'Content',
+  'Prop',
+  'Env',
+  'Watch',
+  'ForwardProps',
+  'Main',
+  'App',
+  'Mount',
+  '_',
+  'env',
+  'Snippet',
+  ...defaultHTMLTags.filter(tag => tag !== 'use'),
+];
+
+/**
+ * @brief HTML internal attribute map, can be accessed as js property
+ */
+export const defaultAttributeMap = {
+  // ---- Other property as attribute
+  textContent: ['*'],
+  innerHTML: ['*'],
+  // ---- Source: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes
+  accept: ['form', 'input'],
+  // ---- Original: accept-charset
+  acceptCharset: ['form'],
+  accesskey: ['*'],
+  action: ['form'],
+  align: ['caption', 'col', 'colgroup', 'hr', 'iframe', 'img', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr'],
+  allow: ['iframe'],
+  alt: ['area', 'img', 'input'],
+  async: ['script'],
+  autocapitalize: ['*'],
+  autocomplete: ['form', 'input', 'select', 'textarea'],
+  autofocus: ['button', 'input', 'select', 'textarea'],
+  autoplay: ['audio', 'video'],
+  background: ['body', 'table', 'td', 'th'],
+  // ---- Original: base
+  bgColor: ['body', 'col', 'colgroup', 'marquee', 'table', 'tbody', 'tfoot', 'td', 'th', 'tr'],
+  border: ['img', 'object', 'table'],
+  buffered: ['audio', 'video'],
+  capture: ['input'],
+  charset: ['meta'],
+  checked: ['input'],
+  cite: ['blockquote', 'del', 'ins', 'q'],
+  className: ['*'],
+  color: ['font', 'hr'],
+  cols: ['textarea'],
+  // ---- Original: colspan
+  colSpan: ['td', 'th'],
+  content: ['meta'],
+  // ---- Original: contenteditable
+  contentEditable: ['*'],
+  contextmenu: ['*'],
+  controls: ['audio', 'video'],
+  coords: ['area'],
+  crossOrigin: ['audio', 'img', 'link', 'script', 'video'],
+  csp: ['iframe'],
+  data: ['object'],
+  // ---- Original: datetime
+  dateTime: ['del', 'ins', 'time'],
+  decoding: ['img'],
+  default: ['track'],
+  defer: ['script'],
+  dir: ['*'],
+  dirname: ['input', 'textarea'],
+  disabled: ['button', 'fieldset', 'input', 'optgroup', 'option', 'select', 'textarea'],
+  download: ['a', 'area'],
+  draggable: ['*'],
+  enctype: ['form'],
+  // ---- Original: enterkeyhint
+  enterKeyHint: ['textarea', 'contenteditable'],
+  htmlFor: ['label', 'output'],
+  form: ['button', 'fieldset', 'input', 'label', 'meter', 'object', 'output', 'progress', 'select', 'textarea'],
+  // ---- Original: formaction
+  formAction: ['input', 'button'],
+  // ---- Original: formenctype
+  formEnctype: ['button', 'input'],
+  // ---- Original: formmethod
+  formMethod: ['button', 'input'],
+  // ---- Original: formnovalidate
+  formNoValidate: ['button', 'input'],
+  // ---- Original: formtarget
+  formTarget: ['button', 'input'],
+  headers: ['td', 'th'],
+  height: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+  hidden: ['*'],
+  high: ['meter'],
+  href: ['a', 'area', 'base', 'link'],
+  hreflang: ['a', 'link'],
+  // ---- Original: http-equiv
+  httpEquiv: ['meta'],
+  id: ['*'],
+  integrity: ['link', 'script'],
+  // ---- Original: intrinsicsize
+  intrinsicSize: ['img'],
+  // ---- Original: inputmode
+  inputMode: ['textarea', 'contenteditable'],
+  ismap: ['img'],
+  // ---- Original: itemprop
+  itemProp: ['*'],
+  kind: ['track'],
+  label: ['optgroup', 'option', 'track'],
+  lang: ['*'],
+  language: ['script'],
+  loading: ['img', 'iframe'],
+  list: ['input'],
+  loop: ['audio', 'marquee', 'video'],
+  low: ['meter'],
+  manifest: ['html'],
+  max: ['input', 'meter', 'progress'],
+  // ---- Original: maxlength
+  maxLength: ['input', 'textarea'],
+  // ---- Original: minlength
+  minLength: ['input', 'textarea'],
+  media: ['a', 'area', 'link', 'source', 'style'],
+  method: ['form'],
+  min: ['input', 'meter'],
+  multiple: ['input', 'select'],
+  muted: ['audio', 'video'],
+  name: [
+    'button',
+    'form',
+    'fieldset',
+    'iframe',
+    'input',
+    'object',
+    'output',
+    'select',
+    'textarea',
+    'map',
+    'meta',
+    'param',
+  ],
+  // ---- Original: novalidate
+  noValidate: ['form'],
+  open: ['details', 'dialog'],
+  optimum: ['meter'],
+  pattern: ['input'],
+  ping: ['a', 'area'],
+  placeholder: ['input', 'textarea'],
+  // ---- Original: playsinline
+  playsInline: ['video'],
+  poster: ['video'],
+  preload: ['audio', 'video'],
+  readonly: ['input', 'textarea'],
+  // ---- Original: referrerpolicy
+  referrerPolicy: ['a', 'area', 'iframe', 'img', 'link', 'script'],
+  rel: ['a', 'area', 'link'],
+  required: ['input', 'select', 'textarea'],
+  reversed: ['ol'],
+  role: ['*'],
+  rows: ['textarea'],
+  // ---- Original: rowspan
+  rowSpan: ['td', 'th'],
+  sandbox: ['iframe'],
+  scope: ['th'],
+  scoped: ['style'],
+  selected: ['option'],
+  shape: ['a', 'area'],
+  size: ['input', 'select'],
+  sizes: ['link', 'img', 'source'],
+  slot: ['*'],
+  span: ['col', 'colgroup'],
+  spellcheck: ['*'],
+  src: ['audio', 'embed', 'iframe', 'img', 'input', 'script', 'source', 'track', 'video'],
+  srcdoc: ['iframe'],
+  srclang: ['track'],
+  srcset: ['img', 'source'],
+  start: ['ol'],
+  step: ['input'],
+  style: ['*'],
+  summary: ['table'],
+  // ---- Original: tabindex
+  tabIndex: ['*'],
+  target: ['a', 'area', 'base', 'form'],
+  title: ['*'],
+  translate: ['*'],
+  type: ['button', 'input', 'embed', 'object', 'ol', 'script', 'source', 'style', 'menu', 'link'],
+  usemap: ['img', 'input', 'object'],
+  value: ['button', 'data', 'input', 'li', 'meter', 'option', 'progress', 'param', 'text' /** extra for TextNode */],
+  width: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+  wrap: ['textarea'],
+  // --- ARIA attributes
+  //     Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+  ariaAutocomplete: ['*'],
+  ariaChecked: ['*'],
+  ariaDisabled: ['*'],
+  ariaErrorMessage: ['*'],
+  ariaExpanded: ['*'],
+  ariaHasPopup: ['*'],
+  ariaHidden: ['*'],
+  ariaInvalid: ['*'],
+  ariaLabel: ['*'],
+  ariaLevel: ['*'],
+  ariaModal: ['*'],
+  ariaMultiline: ['*'],
+  ariaMultiSelectable: ['*'],
+  ariaOrientation: ['*'],
+  ariaPlaceholder: ['*'],
+  ariaPressed: ['*'],
+  ariaReadonly: ['*'],
+  ariaRequired: ['*'],
+  ariaSelected: ['*'],
+  ariaSort: ['*'],
+  ariaValuemax: ['*'],
+  ariaValuemin: ['*'],
+  ariaValueNow: ['*'],
+  ariaValueText: ['*'],
+  ariaBusy: ['*'],
+  ariaLive: ['*'],
+  ariaRelevant: ['*'],
+  ariaAtomic: ['*'],
+  ariaDropEffect: ['*'],
+  ariaGrabbed: ['*'],
+  ariaActiveDescendant: ['*'],
+  ariaColCount: ['*'],
+  ariaColIndex: ['*'],
+  ariaColSpan: ['*'],
+  ariaControls: ['*'],
+  ariaDescribedBy: ['*'],
+  ariaDescription: ['*'],
+  ariaDetails: ['*'],
+  ariaFlowTo: ['*'],
+  ariaLabelledBy: ['*'],
+  ariaOwns: ['*'],
+  ariaPosInset: ['*'],
+  ariaRowCount: ['*'],
+  ariaRowIndex: ['*'],
+  ariaRowSpan: ['*'],
+  ariaSetSize: ['*'],
+};
--- a/packages/transpiler/babel-inula-next-core/src/constants.ts
+++ b/packages/transpiler/babel-inula-next-core/src/constants.ts
@ -0,0 +1,28 @@
+export const COMPONENT = 'Component';
+export const WILL_MOUNT = 'willMount';
+export const ON_MOUNT = 'onMount';
+export const WILL_UNMOUNT = 'willUnmount';
+export const ON_UNMOUNT = 'onUnmount';
+export const WATCH = 'watch';
+export enum PropType {
+  REST = 'rest',
+  SINGLE = 'single',
+}
+export const reactivityFuncNames = [
+  // ---- Array
+  'push',
+  'pop',
+  'shift',
+  'unshift',
+  'splice',
+  'sort',
+  'reverse',
+  // ---- Set
+  'add',
+  'delete',
+  'clear',
+  // ---- Map
+  'set',
+  'delete',
+  'clear',
+];
--- a/packages/transpiler/babel-inula-next-core/src/generator/index.ts
+++ b/packages/transpiler/babel-inula-next-core/src/generator/index.ts
@ -0,0 +1,94 @@
+import { ViewParticle } from '@openinula/reactivity-parser';
+import { ComponentNode, Prop, Variable } from '../analyzer/types';
+import { type types as t, type NodePath } from '@babel/core';
+import { types } from '../babelTypes';
+
+type Visitor = {
+  [Type in (ViewParticle | ComponentNode)['type']]: (
+    node: Extract<ViewParticle | ComponentNode, { type: Type }>,
+    ctx: any
+  ) => void;
+};
+
+interface GeneratorContext {
+  classBodyNode: t.ClassBody;
+  currentComp: ComponentNode;
+}
+
+export function generateFnComp(compNode: ComponentNode) {
+  const context = {
+    classBodyNode: types.classBody([]),
+    currentComp: compNode,
+  };
+  compNode.props.forEach(prop => {
+    resolvePropDecorator(context, prop, 'Prop');
+  });
+}
+
+function reverseDependencyMap(dependencyMap: Record<string, Set<string>>) {
+  const reversedMap: Record<string, Set<string>> = {};
+  Object.entries(dependencyMap).forEach(([key, deps]) => {
+    deps.forEach(dep => {
+      if (!reversedMap[dep]) reversedMap[dep] = new Set();
+      reversedMap[dep].add(key);
+    });
+  });
+
+  return reversedMap;
+}
+
+/**
+ * @brief Decorator resolver: Prop/Env
+ * Add:
+ * $p/e$${key}
+ * @param ctx
+ * @param prop
+ * @param decoratorName
+ */
+function resolvePropDecorator(ctx: GeneratorContext, prop: Prop, decoratorName: 'Prop' | 'Env' = 'Prop') {
+  if (!ctx.classBodyNode) return;
+  const key = prop.name;
+  ctx.classBodyNode.body.push(types.classProperty(types.identifier(key), prop.default));
+
+  // Add tag to let the runtime know this property is a prop or env
+  const tag = decoratorName.toLowerCase() === 'prop' ? 'p' : 'e';
+  const derivedStatusKey = types.classProperty(types.identifier(`$${tag}$${key}`));
+  ctx.classBodyNode.body.push(derivedStatusKey);
+}
+
+/**
+ * @brief Decorator resolver: State
+ * Add:
+ *  $$${key} = ${depIdx}
+ *  $sub$${key} = [${reversedDeps}]
+ * @param ctx
+ * @param varable
+ * @param idx
+ * @param reverseDeps
+ */
+function resolveStateDecorator(
+  ctx: GeneratorContext,
+  varable: Variable,
+  idx: number,
+  reverseDeps: Set<string> | undefined
+) {
+  if (!ctx.classBodyNode) return;
+  if (!types.isIdentifier(node.key)) return;
+  const key = node.key.name;
+  const idx = ctx.currentComp.variables.indexOf(node);
+
+  const idxNode = !ctx.dLightModel
+    ? [types.classProperty(types.identifier(`$$${key}`), types.numericLiteral(1 << idx))]
+    : [];
+
+  const depsNode = reverseDeps
+    ? [
+        types.classProperty(
+          types.identifier(`$s$${key}`),
+          types.arrayExpression([...reverseDeps].map(d => types.stringLiteral(d)))
+        ),
+      ]
+    : [];
+
+  ctx.classBodyNode.body.splice(propertyIdx + 1, 0, ...idxNode, ...depsNode);
+}
--- a/packages/transpiler/babel-inula-next-core/src/global.d.ts
+++ b/packages/transpiler/babel-inula-next-core/src/global.d.ts
@ -0,0 +1,4 @@
+declare module '@babel/plugin-syntax-do-expressions';
+declare module '@babel/plugin-syntax-decorators';
+declare module '@babel/plugin-syntax-jsx';
+declare module '@babel/plugin-syntax-typescript';
--- a/packages/transpiler/babel-inula-next-core/src/index.ts
+++ b/packages/transpiler/babel-inula-next-core/src/index.ts
@ -0,0 +1,37 @@
+import syntaxDecorators from '@babel/plugin-syntax-decorators';
+import syntaxJSX from '@babel/plugin-syntax-jsx';
+import syntaxTypescript from '@babel/plugin-syntax-typescript';
+import inulaNext from './plugin';
+import { type DLightOption } from './types';
+import { type ConfigAPI, type TransformOptions } from '@babel/core';
+import { plugin as fn2Class } from '@openinula/class-transformer';
+import { parse as babelParse } from '@babel/parser';
+
+export default function (_: ConfigAPI, options: DLightOption): TransformOptions {
+  return {
+    plugins: [
+      syntaxJSX.default ?? syntaxJSX,
+      [syntaxTypescript.default ?? syntaxTypescript, { isTSX: true }],
+      [syntaxDecorators.default ?? syntaxDecorators, { legacy: true }],
+      fn2Class,
+      [inulaNext, options],
+    ],
+  };
+}
+
+export { type DLightOption };
+
+export function parse(code: string) {
+  const result = babelParse(code, {
+    // parse in strict mode and allow module declarations
+    sourceType: 'module',
+
+    plugins: ['jsx'],
+  });
+
+  if (result.errors.length) {
+    throw new Error(result.errors[0].message);
+  }
+
+  const program = result.program;
+}
--- a/packages/transpiler/babel-inula-next-core/src/plugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/plugin.ts
@ -0,0 +1,64 @@
+import type babel from '@babel/core';
+import { type PluginObj } from '@babel/core';
+import { type DLightOption } from './types';
+import { defaultAttributeMap, defaultHTMLTags } from './const';
+import { analyze } from './analyzer';
+import { NodePath, type types as t } from '@babel/core';
+import { COMPONENT } from './constants';
+import { extractFnFromMacro } from './utils';
+import { register } from '@openinula/babel-api';
+
+export default function (api: typeof babel, options: DLightOption): PluginObj {
+  const { types } = api;
+  const {
+    files = '**/*.{js,ts,jsx,tsx}',
+    excludeFiles = '**/{dist,node_modules,lib}/*',
+    enableDevTools = false,
+    htmlTags: customHtmlTags = defaultHtmlTags => defaultHtmlTags,
+    attributeMap = defaultAttributeMap,
+  } = options;
+
+  const htmlTags =
+    typeof customHtmlTags === 'function'
+      ? customHtmlTags(defaultHTMLTags)
+      : customHtmlTags.includes('*')
+        ? [...new Set([...defaultHTMLTags, ...customHtmlTags])].filter(tag => tag !== '*')
+        : customHtmlTags;
+
+  register(api);
+  return {
+    visitor: {
+      Program: {
+        enter(path, { filename }) {
+          // return pluginProvider.programEnterVisitor(path, filename);
+        },
+        exit(path, { filename }) {
+          // pluginProvider.programExitVisitor.bind(pluginProvider);
+        },
+      },
+      CallExpression(path: NodePath<t.CallExpression>) {
+        // find the component, like: Component(() => {})
+        const callee = path.get('callee');
+
+        if (callee.isIdentifier() && callee.node.name === COMPONENT) {
+          const componentNode = extractFnFromMacro(path, COMPONENT);
+          let name = '';
+          // try to get the component name, when parent is a variable declarator
+          if (path.parentPath.isVariableDeclarator()) {
+            const lVal = path.parentPath.get('id');
+            if (lVal.isIdentifier()) {
+              name = lVal.node.name;
+            } else {
+              console.error('Component macro must be assigned to a variable');
+            }
+          }
+          const root = analyze(name, componentNode, {
+            htmlTags,
+          });
+          // The sub path has been visited, so we just skip
+          path.skip();
+        }
+      },
+    },
+  };
+}
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/PropsFormatPlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/PropsFormatPlugin.ts
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/autoNamingPlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/autoNamingPlugin.ts
@ -0,0 +1 @@
+// Auto Naming for Component and Hook
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/earlyReturnPlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/earlyReturnPlugin.ts
@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { NodePath, type types as t } from '@babel/core';
+import { createComponentNode, createCondNode, createJSXNode } from '../analyze/nodeFactory';
+import { AnalyzeContext, Branch, Visitor } from '../analyze/types';
+import { isValidPath } from '../analyze/utils';
+
+export function earlyReturnPlugin(): Visitor {
+  return {
+    ReturnStatement(path: NodePath<t.ReturnStatement>, context: AnalyzeContext) {
+      const currentComp = context.current;
+
+      const argument = path.get('argument');
+      if (argument.isJSXElement()) {
+        currentComp.children = createJSXNode(currentComp, argument);
+      }
+    },
+    IfStatement(ifStmt: NodePath<t.IfStatement>, context: AnalyzeContext) {
+      if (!hasEarlyReturn(ifStmt)) {
+        return;
+      }
+      const currentComp = context.current;
+
+      const branches: Branch[] = [];
+      let next: NodePath<t.Statement> | null = ifStmt;
+      let branchIdx = 0;
+
+      // Walk through the if-else chain to create branches
+      while (next && next.isIfStatement()) {
+        const nextConditions = [next.get('test')];
+        // gen id for branch with babel
+        const name = `$$branch-${branchIdx}`;
+        branches.push({
+          conditions: nextConditions,
+          content: createComponentNode(name, getStatements(ifStmt.get('consequent')), currentComp),
+        });
+
+        const elseBranch: NodePath<t.Statement | null | undefined> = next.get('alternate');
+        next = isValidPath(elseBranch) ? elseBranch : null;
+        branchIdx++;
+      }
+
+      // Time for the else branch
+      // We merge the else branch with the rest statements in fc body to form the children
+      const elseBranch = next ? getStatements(next) : [];
+      const defaultComponent = createComponentNode(
+        '$$branch-default',
+        elseBranch.concat(context.restStmt),
+        currentComp
+      );
+      context.skipRest();
+
+      currentComp.children = createCondNode(currentComp, defaultComponent, branches);
+    },
+  };
+}
+
+function getStatements(next: NodePath<t.Statement>) {
+  return next.isBlockStatement() ? next.get('body') : [next];
+}
+
+function hasEarlyReturn(path: NodePath<t.Node>) {
+  let hasReturn = false;
+  path.traverse({
+    ReturnStatement(path: NodePath<t.ReturnStatement>) {
+      if (
+        path.parentPath.isFunctionDeclaration() ||
+        path.parentPath.isFunctionExpression() ||
+        path.parentPath.isArrowFunctionExpression()
+      ) {
+        return;
+      }
+      hasReturn = true;
+    },
+  });
+  return hasReturn;
+}
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/forSubComponentPlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/forSubComponentPlugin.ts
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/jsxSlicePlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/jsxSlicePlugin.ts
@ -0,0 +1,100 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { NodePath } from '@babel/core';
+import { AnalyzeContext, Visitor } from '../analyze/types';
+import { createSubCompNode } from '../analyze/nodeFactory';
+import * as t from '@babel/types';
+
+function genName(tagName: string, ctx: AnalyzeContext) {
+  return `$$${tagName}-Sub${ctx.current.subComponents.length}`;
+}
+
+function genNameFromJSX(path: NodePath<t.JSXElement>, ctx: AnalyzeContext) {
+  const tagId = path.get('openingElement').get('name');
+  if (tagId.isJSXIdentifier()) {
+    const jsxName = tagId.node.name;
+    return genName(jsxName, ctx);
+  }
+  throw new Error('JSXMemberExpression is not supported yet');
+}
+
+function replaceJSXSliceWithSubComp(name: string, ctx: AnalyzeContext, path: NodePath<t.JSXElement | t.JSXFragment>) {
+  // create a subComponent node and add it to the current component
+  const subComp = createSubCompNode(name, ctx.current, path.node);
+  ctx.current.subComponents.push(subComp);
+
+  // replace with the subComp jsxElement
+  const subCompJSX = t.jsxElement(
+    t.jsxOpeningElement(t.jsxIdentifier(name), [], true),
+    t.jsxClosingElement(t.jsxIdentifier(name)),
+    [],
+    true
+  );
+  path.replaceWith(subCompJSX);
+}
+
+/**
+ * Analyze the JSX slice in the function component
+ * 1. VariableDeclaration, like `const a = <div />`
+ * 2. SubComponent, like `function Sub() { return <div /> }`
+ *
+ * i.e.
+ * ```jsx
+ *   let jsxSlice = <div>{count}</div>
+ *   // =>
+ *   function Comp_$id$() {
+ *     return <div>{count}</div>
+ *   }
+ *   let jsxSlice = <Comp_$id$/>
+ * ```
+ */
+export function jsxSlicesAnalyze(): Visitor {
+  return {
+    JSXElement(path: NodePath<t.JSXElement>, ctx) {
+      const name = genNameFromJSX(path, ctx);
+      replaceJSXSliceWithSubComp(name, ctx, path);
+      path.skip();
+    },
+    JSXFragment(path: NodePath<t.JSXFragment>, ctx) {
+      replaceJSXSliceWithSubComp('frag', ctx, path);
+    },
+  };
+}
+
+// Analyze the JSX slice in the function component, including:
+// 1. VariableDeclaration, like `const a = <div />`
+// 2. SubComponent, like `function Sub() { return <div /> }`
+function handleFn(fnName: string, fnBody: NodePath<types.BlockStatement>) {
+  if (isValidComponentName(fnName)) {
+    // This is a subcomponent, treat it as a normal component
+  } else {
+    //   This is jsx creation function
+    //   function jsxFunc() {
+    //     // This is a function that returns JSX
+    //     // because the function name is smallCamelCased
+    //     return <div>{count}</div>
+    //   }
+    //   =>
+    //   function jsxFunc() {
+    //     function Comp_$id4$() {
+    //       return <div>{count}</div>
+    //     }
+    //     // This is a function that returns JSX
+    //     // because the function name is smallCamelCased
+    //     return <Comp_$id4$/>
+    //   }
+  }
+}
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/mapping2ForPlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/mapping2ForPlugin.ts
--- a/packages/transpiler/babel-inula-next-core/src/types.ts
+++ b/packages/transpiler/babel-inula-next-core/src/types.ts
@ -0,0 +1,53 @@
+import { type types as t } from '@babel/core';
+
+export type HTMLTags = string[] | ((defaultHtmlTags: string[]) => string[]);
+export interface DLightOption {
+  /**
+   * Files that will be included
+   * @default ** /*.{js,jsx,ts,tsx}
+   */
+  files?: string | string[];
+  /**
+   * Files that will be excludes
+   * @default ** /{dist,node_modules,lib}/*.{js,ts}
+   */
+  excludeFiles?: string | string[];
+  /**
+   * Enable devtools
+   * @default false
+   */
+  enableDevTools?: boolean;
+  /**
+   * Custom HTML tags.
+   * Accepts 2 types:
+   *  1. string[], e.g. ["div", "span"]
+   *     if contains "*", then all default tags will be included
+   *  2. (defaultHtmlTags: string[]) => string[]
+   * @default defaultHtmlTags => defaultHtmlTags
+   */
+  htmlTags?: HTMLTags;
+  /**
+   * Allowed HTML tags from attributes
+   * e.g. { alt: ["area", "img", "input"] }
+   */
+  attributeMap?: Record<string, string[]>;
+}
+
+export type PropertyContainer = Record<
+  string,
+  {
+    node: t.ClassProperty | t.ClassMethod;
+    deps: string[];
+    isStatic?: boolean;
+    isContent?: boolean;
+    isChildren?: boolean | number;
+    isModel?: boolean;
+    isWatcher?: boolean;
+    isPropOrEnv?: 'Prop' | 'Env';
+    depsNode?: t.ArrayExpression;
+  }
+>;
+
+export type IdentifierToDepNode = t.SpreadElement | t.Expression;
+
+export type SnippetPropSubDepMap = Record<string, Record<string, string[]>>;
--- a/packages/transpiler/babel-inula-next-core/src/utils.ts
+++ b/packages/transpiler/babel-inula-next-core/src/utils.ts
@ -0,0 +1,23 @@
+import { NodePath } from '@babel/core';
+import * as t from '@babel/types';
+
+export function extractFnFromMacro(path: NodePath<t.CallExpression>, macroName: string) {
+  const args = path.get('arguments');
+
+  const fnNode = args[0];
+  if (fnNode.isFunctionExpression() || fnNode.isArrowFunctionExpression()) {
+    return fnNode;
+  }
+
+  throw new Error(`${macroName} macro must have a function argument`);
+}
+
+export function getFnBody(path: NodePath<t.FunctionExpression | t.ArrowFunctionExpression>) {
+  const fnBody = path.get('body');
+  if (fnBody.isExpression()) {
+    // turn expression into block statement for consistency
+    fnBody.replaceWith(t.blockStatement([t.returnStatement(fnBody.node)]));
+  }
+
+  return fnBody as unknown as NodePath<t.BlockStatement>;
+}
--- a/packages/transpiler/babel-inula-next-core/test/analyze/lifeCycle.test.ts
+++ b/packages/transpiler/babel-inula-next-core/test/analyze/lifeCycle.test.ts
@ -0,0 +1,128 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { genCode, mockAnalyze } from '../mock';
+import { functionalMacroAnalyze } from '../../src/analyzer/functionalMacroAnalyze';
+import { types as t } from '@openinula/babel-api';
+
+const analyze = (code: string) => mockAnalyze(code, [functionalMacroAnalyze]);
+const combine = (body: t.Statement[]) => t.program(body);
+
+describe('analyze lifeCycle', () => {
+  it('should collect will mount', () => {
+    const root = analyze(/*js*/ `
+      Component(() => {
+        willMount(() => {
+          console.log('test');
+        })
+      })
+    `);
+
+    expect(genCode(combine(root.lifecycle.willMount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('test');
+      }"
+    `);
+  });
+
+  it('should collect on mount', () => {
+    const root = analyze(/*js*/ `
+      Component(() => {
+        onMount(() => {
+          console.log('test');
+        })
+      })
+    `);
+
+    expect(genCode(combine(root.lifecycle.onMount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('test');
+      }"
+    `);
+  });
+
+  it('should collect willUnmount', () => {
+    const root = analyze(/*js*/ `
+      Component(() => {
+        willUnmount(() => {
+          console.log('test');
+        })
+      })
+    `);
+
+    expect(genCode(combine(root.lifecycle.willUnmount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('test');
+      }"
+    `);
+  });
+
+  it('should collect onUnmount', () => {
+    const root = analyze(/*js*/ `
+      Component(() => {
+        onUnmount(() => {
+          console.log('test');
+        })
+      })
+    `);
+
+    expect(genCode(combine(root.lifecycle.onUnmount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('test');
+      }"
+    `);
+  });
+
+  it('should handle multiple lifecycle methods', () => {
+    const root = analyze(/*js*/ `
+      Component(() => {
+        willMount(() => {
+          console.log('willMount');
+        })
+        onMount(() => {
+          console.log('onMount');
+        })
+        willUnmount(() => {
+          console.log('willUnmount');
+        })
+        onUnmount(() => {
+          console.log('onUnmount');
+        })
+      })
+    `);
+
+    expect(genCode(combine(root.lifecycle.willMount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('willMount');
+      }"
+    `);
+    expect(genCode(combine(root.lifecycle.onMount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('onMount');
+      }"
+    `);
+    expect(genCode(combine(root.lifecycle.willUnmount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('willUnmount');
+      }"
+    `);
+    expect(genCode(combine(root.lifecycle.onUnmount!))).toMatchInlineSnapshot(`
+      "{
+        console.log('onUnmount');
+      }"
+    `);
+  });
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hoikan	4ca2d66fac	fix(reactivity): fix for dependency	2024-05-10 16:54:38 +08:00
Hoikan	601381032d	refactor(parse): use bitmap instead of dependency map	2024-05-08 15:56:42 +08:00
Hoikan	0dcad572f3	refactor(parse): use bitmap instead of dependency map	2024-04-29 17:58:19 +08:00
Hoikan	f32da0e9c7	refactor(proposal): use bitmap instead of dependency map	2024-04-28 21:02:37 +08:00
Hoikan	be4456f225	feat: viewNode as child	2024-04-25 15:58:26 +08:00
Hoikan	f15b7d1a14	feat: sub component	2024-04-25 11:46:11 +08:00
Hoikan	5427f13880	feat: analyze watch lifeCycle properties	2024-04-24 16:21:40 +08:00
Hoikan	fcc734e05f	feat: init	2024-04-19 17:58:52 +08:00
Hoikan	a536958ad4	feat(fn2cls): env	2024-04-15 20:59:31 +08:00
Hoikan	2d5d3c29e4	test(inula-next): add test	2024-04-15 20:57:16 +08:00
Hoikan	37d6ba1033	Merge remote-tracking branch 'gitee/api2/for' into dev-04-15 # Conflicts: # demos/benchmark/src/main.jsx # demos/v2/src/App.view.tsx # packages/transpiler/babel-preset-inula-next/CHANGELOG.md # packages/transpiler/babel-preset-inula-next/package.json # packages/transpiler/class-transformer/package.json # packages/transpiler/class-transformer/src/pluginProvider.ts # packages/transpiler/vite-plugin-inula-next/CHANGELOG.md # packages/transpiler/vite-plugin-inula-next/package.json	2024-04-15 11:51:44 +08:00
HoikanChan	f447bb8989	feat(watch): switch to label watch	2024-04-15 11:46:05 +08:00
Hoikan	7b4c3a35d0	feat: cls2fn	2024-04-15 11:44:13 +08:00
iandxssxx	4608422c0a	feat: publish (feat: add lifecycles and watch)	2024-04-10 23:00:49 -04:00
iandxssxx	325f4c406a	feat: add lifecycles and watch	2024-04-10 22:59:55 -04:00
HoikanChan	bf90ea1b7f	feat(watch): switch to label watch	2024-04-11 10:38:03 +08:00
Hoikan	8f60ec6b26	feat: test	2024-04-10 17:58:16 +08:00
IanDxSSXX	be4b0cb024	!172 Add for support and benchmark * refactor: publish new version * feat: add changeset and changed package name * Merge branch 'API-2.0' into api2/for * fix: import package from workspace * feat: add for unit parsing * feat: init benchmark demo * refactor: gitignore add history	2024-04-10 02:06:11 +00:00
iandxssxx	1f4b164952	refactor: publish new version	2024-04-09 21:58:08 -04:00
iandxssxx	2f9d3737db	feat: add changeset and changed package name	2024-04-09 03:28:10 -04:00
iandxssxx	ef4126b767	Merge branch 'API-2.0' into api2/for	2024-04-07 23:17:00 -04:00
陈超涛	b7756e9732	!171 fix: this patcher Merge pull request !171 from Hoikan/API-2.0-4-8	2024-04-08 03:16:05 +00:00
Hoikan	bf1bd09721	refactor: add this with thisPatcher.ts	2024-04-08 11:11:46 +08:00
iandxssxx	d6ba039445	fix: import package from workspace	2024-04-07 23:09:39 -04:00
iandxssxx	4467bdae73	feat: add for unit parsing	2024-04-07 23:09:21 -04:00
iandxssxx	627a8b7785	feat: init benchmark demo	2024-04-07 23:08:50 -04:00
iandxssxx	109746acef	refactor: gitignore add history	2024-04-07 23:08:39 -04:00
Hoikan	d599b36eaa	!169 feat: inula 2.0 init * feat: update doc * feat: inula next	2024-04-03 08:55:27 +00:00
Hoikan	83c80341dc	!168 inula api2.0 * feat: inula-next init * feat: v2 init * feat(class-transform): add watch decorator * feat(class-transform): update docs * feat(class-transform): init	2024-04-03 08:41:11 +00:00