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: [
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], ['@babel/preset-typescript']],
    [
      '@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',
+      file: 'dist/inulaRequest.js',
-    exports: 'named',
+      format: 'umd',
-    name: 'inulaRequest',
+      exports: 'named',
-    sourcemap: false,
+      name: 'inulaRequest',
-  }, {
+      sourcemap: false,
-    file: 'dist/inulaRequest.esm-browser.js',
+    },
-    format: 'esm',
+    {
-  }],
+      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.js'),
-    }, {
+        format: 'cjs',
-      file: outputResolve('jsx-runtime.esm-browser.js'),
+      },
-      format: 'esm',
+      {
-    }],
+        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
`@ -14,4 +14,3 @@`
	`*/`	`*/`

	`declare module 'crequire';`	`declare module 'crequire';`
		`@ -0,0 +1,2 @@`
							`# DLight Main Package`
							`See the website's documentations for usage.`