224 changed files with 24948 additions and 59 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/api-2.1-fn.md
+++ b/api-2.1-fn.md
@ -0,0 +1,55 @@
+```js
+function MyComp({prop1}) {
+  let count = 1
+  let doubleCount = count * 2
+
+  const updateCount = () => {
+    count++
+  }
+
+  return <div>{prop1}</div>;
+}
+```
+
+```js
+function MyComp() {
+  let prop1$$prop
+
+  let count = 1
+  let doubleCount = count * 2
+  let update$$doubleCount = () => {
+    if (cached()) return
+    doubleCount = count * 2
+  }
+
+  const updateCount = () => {
+    viewModel.update(count++)
+  }
+
+  // ----
+  const node = createElement('div')
+  setProps(node, "textContent", [prop1])
+
+  const viewModel = Inula.createElement({
+    node,
+    updateProp: (propName, value) => {
+      if (propName === 'prop1') {
+        prop1$$prop = value
+      }
+    },
+    updateState: (changed) => {
+      if (changed & 0x1) {
+        update$$doubleCount()
+      }
+    },
+    updateView: (changed) => {
+      if (changed & 0x1) {
+        setProps(node, "textContent", [prop1$$prop])
+      }
+    }
+  })
+
+  return viewModel
+}
+```
+
--- a/api-2.1.md
+++ b/api-2.1.md
--- 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",
+    "@openinula/babel-preset-inula-next": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "@openinula/vite-plugin-inula-next": "workspace:*"
+  },
+  "keywords": [
+    "inula-next"
+  ]
+}
--- a/demos/benchmark/src/main.jsx
+++ b/demos/benchmark/src/main.jsx
@ -0,0 +1,158 @@
+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 each={data}>
+            {({ id, label }) => (
+              <tr className={selected === id ? 'danger' : ''}>
+                <td className="col-md-1" textContent={id} />
+                <td className="col-md-4">
+                  <a onClick={select.bind(this, id)} textContent={label} />
+                </td>
+                <td className="col-md-1">
+                  <a onClick={remove.bind(this, id)}>
+                    <span className="glyphicon glyphicon-remove" aria-hidden="true" />
+                  </a>
+                </td>
+                <td className="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 '@openinula/vite-plugin-inula-next';
+
+export default defineConfig({
+  server: {
+    port: 4320,
+  },
+  base: '',
+  optimizeDeps: {
+    disabled: true,
+  },
+  plugins: [inula({ files: '**/*.{tsx,jsx}' })],
+});
--- a/demos/todo-mvc/app.css
+++ b/demos/todo-mvc/app.css
@ -0,0 +1,417 @@
+@charset "utf-8";
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  font-family: inherit;
+  font-weight: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4em;
+  background: #f5f5f5;
+  color: #111111;
+  min-width: 230px;
+  max-width: 550px;
+  margin: 0 auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+}
+
+.hidden {
+  display: none;
+}
+
+.todoapp {
+  background: #fff;
+  margin: 130px 0 40px 0;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+  0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+  font-style: italic;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+  font-style: italic;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+  font-style: italic;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+  position: absolute;
+  top: -140px;
+  width: 100%;
+  font-size: 80px;
+  font-weight: 200;
+  text-align: center;
+  color: #b83f45;
+  -webkit-text-rendering: optimizeLegibility;
+  -moz-text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+  position: relative;
+  margin: 0;
+  width: 100%;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: 1.4em;
+  color: inherit;
+  padding: 6px;
+  border: 1px solid #999;
+  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+  padding: 16px 16px 16px 60px;
+  height: 65px;
+  border: none;
+  background: rgba(0, 0, 0, 0.003);
+  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+  position: relative;
+  z-index: 2;
+  border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+  width: 1px;
+  height: 1px;
+  border: none; /* Mobile Safari */
+  opacity: 0;
+  position: absolute;
+  right: 100%;
+  bottom: 100%;
+}
+
+.toggle-all + label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 45px;
+  height: 65px;
+  font-size: 0;
+  position: absolute;
+  top: -65px;
+  left: -0;
+}
+
+.toggle-all + label:before {
+  content: '❯';
+  display: inline-block;
+  font-size: 22px;
+  color: #949494;
+  padding: 10px 27px 10px 27px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.toggle-all:checked + label:before {
+  color: #484848;
+}
+
+.todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.todo-list li {
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+  border-bottom: none;
+}
+
+.todo-list li.editing {
+  border-bottom: none;
+  padding: 0;
+}
+
+.todo-list li.editing .edit {
+  display: block;
+  width: calc(100% - 43px);
+  padding: 12px 16px;
+  margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+  display: none;
+}
+
+.todo-list li .toggle {
+  text-align: center;
+  width: 40px;
+  /* auto, since non-WebKit browsers doesn't support input styling */
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  border: none; /* Mobile Safari */
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.todo-list li .toggle {
+  opacity: 0;
+}
+
+.todo-list li .toggle + label {
+  /*
+    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+  */
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
+}
+
+.todo-list li label {
+  word-break: break-all;
+  padding: 15px 15px 15px 60px;
+  display: block;
+  line-height: 1.2;
+  transition: color 0.4s;
+  font-weight: 400;
+  color: #484848;
+}
+
+.todo-list li.completed label {
+  color: #949494;
+  text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+  margin: auto 0;
+  font-size: 30px;
+  color: #949494;
+  transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover,
+.todo-list li .destroy:focus {
+  color: #C18585;
+}
+
+.todo-list li .destroy:after {
+  content: '×';
+  display: block;
+  height: 100%;
+  line-height: 1.1;
+}
+
+.todo-list li:hover .destroy {
+  display: block;
+}
+
+.todo-list li .edit {
+  display: none;
+}
+
+.todo-list li.editing:last-child {
+  margin-bottom: -1px;
+}
+
+.footer {
+  padding: 10px 15px;
+  height: 20px;
+  text-align: center;
+  font-size: 15px;
+  border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+  0 8px 0 -3px #f6f6f6,
+  0 9px 1px -3px rgba(0, 0, 0, 0.2),
+  0 16px 0 -6px #f6f6f6,
+  0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+  float: left;
+  text-align: left;
+}
+
+.todo-count strong {
+  font-weight: 300;
+}
+
+.filters {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.filters li {
+  display: inline;
+}
+
+.filters li a {
+  color: inherit;
+  margin: 3px;
+  padding: 3px 7px;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.filters li a:hover {
+  border-color: #DB7676;
+}
+
+.filters li a.selected {
+  border-color: #CE4646;
+}
+
+.clear-completed,
+html .clear-completed:active {
+  float: right;
+  position: relative;
+  line-height: 19px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.clear-completed:hover {
+  text-decoration: underline;
+}
+
+.info {
+  margin: 65px auto 0;
+  color: #4d4d4d;
+  font-size: 11px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+.info p {
+  line-height: 1;
+}
+
+.info a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+.info a:hover {
+  text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .toggle-all,
+  .todo-list li .toggle {
+    background: none;
+  }
+
+  .todo-list li .toggle {
+    height: 40px;
+  }
+}
+
+@media (max-width: 430px) {
+  .footer {
+    height: 50px;
+  }
+
+  .filters {
+    bottom: 10px;
+  }
+}
+
+:focus,
+.toggle:focus + label,
+.toggle-all:focus + label {
+  box-shadow: 0 0 2px 2px #CF7D7D;
+  outline: 0;
+}
+
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.toggle-all {
+  width: 40px !important;
+  height: 60px !important;
+  right: auto !important;
+}
+
+.toggle-all-label {
+  pointer-events: none;
+}
--- a/demos/todo-mvc/app.jsx
+++ b/demos/todo-mvc/app.jsx
@ -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 { render } from '@openinula/next';
+import { Header } from './components/header';
+import { Main } from './components/main';
+import {
+  ADD_ITEM,
+  UPDATE_ITEM,
+  REMOVE_ITEM,
+  TOGGLE_ITEM,
+  REMOVE_ALL_ITEMS,
+  TOGGLE_ALL,
+  REMOVE_COMPLETED_ITEMS,
+} from './constants';
+import './app.css';
+import { Footer } from './components/footer.jsx';
+// This alphabet uses `A-Za-z0-9_-` symbols.
+// The order of characters is optimized for better gzip and brotli compression.
+// References to the same file (works both for gzip and brotli):
+// `'use`, `andom`, and `rict'`
+// References to the brotli default dictionary:
+// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
+let urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+function nanoid(size = 21) {
+  let id = '';
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  let i = size;
+  while (i--) {
+    // `| 0` is more compact and faster than `Math.floor()`.
+    id += urlAlphabet[(Math.random() * 64) | 0];
+  }
+  return id;
+}
+
+export function App() {
+  let todos = [];
+  const todoReducer = (state, action) => {
+    switch (action.type) {
+      case ADD_ITEM:
+        return state.concat({ id: nanoid(), title: action.payload.title, completed: false });
+      case UPDATE_ITEM:
+        return state.map(todo => (todo.id === action.payload.id ? { ...todo, title: action.payload.title } : todo));
+      case REMOVE_ITEM:
+        return state.filter(todo => todo.id !== action.payload.id);
+      case TOGGLE_ITEM:
+        return state.map(todo => (todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo));
+      case REMOVE_ALL_ITEMS:
+        return [];
+      case TOGGLE_ALL:
+        return state.map(todo =>
+          todo.completed !== action.payload.completed
+            ? {
+                ...todo,
+                completed: action.payload.completed,
+              }
+            : todo
+        );
+      case REMOVE_COMPLETED_ITEMS:
+        return state.filter(todo => !todo.completed);
+    }
+
+    throw Error(`Unknown action: ${action.type}`);
+  };
+  const dispatch = action => {
+    todos = todoReducer(todos, action);
+  };
+
+  return (
+    <>
+      <Header dispatch={dispatch} />
+      <Main todos={todos} dispatch={dispatch} />
+      <Footer todos={todos} dispatch={dispatch} />
+    </>
+  );
+}
+
+render(App, 'main');
--- a/demos/todo-mvc/components/footer.jsx
+++ b/demos/todo-mvc/components/footer.jsx
@ -0,0 +1,38 @@
+import { REMOVE_COMPLETED_ITEMS } from '../constants';
+
+export function Footer({ todos, dispatch }) {
+  let route = window.location.hash;
+  window.addEventListener('hashchange', () => {
+    console.log('hashchange', window.location.hash);
+    route = window.location.hash.slice(1);
+  });
+  const activeTodos = todos.filter(todo => !todo.completed);
+
+  const removeCompleted = () => dispatch({ type: REMOVE_COMPLETED_ITEMS });
+
+  return (
+    <footer className="footer" data-testid="footer">
+      <span className="todo-count">{`${activeTodos.length} ${activeTodos.length === 1 ? 'item' : 'items'} left!`}</span>
+      <ul className="filters" data-testid="footer-navigation">
+        <li>
+          <a className={route === '/' ? 'selected' : ''} href="#/">
+            All
+          </a>
+        </li>
+        <li>
+          <a className={route === '/active' ? 'selected' : ''} href="#/active">
+            Active
+          </a>
+        </li>
+        <li>
+          <a className={route === '/completed' ? 'selected' : ''} href="#/completed">
+            Completed
+          </a>
+        </li>
+      </ul>
+      <button className="clear-completed" disabled={activeTodos.length === todos.length} onClick={removeCompleted}>
+        Clear completed
+      </button>
+    </footer>
+  );
+}
--- a/demos/todo-mvc/components/header.jsx
+++ b/demos/todo-mvc/components/header.jsx
@ -0,0 +1,13 @@
+import { Input } from './input';
+import { ADD_ITEM } from '../constants';
+
+export function Header({ dispatch }) {
+  const addItem = title => dispatch({ type: ADD_ITEM, payload: { title } });
+
+  return (
+    <header className="header" data-testid="header">
+      <h1>todos</h1>
+      <Input onSubmit={addItem} label="New Todo Input" placeholder="What needs to be done?" />
+    </header>
+  );
+}
--- a/demos/todo-mvc/components/input.jsx
+++ b/demos/todo-mvc/components/input.jsx
@ -0,0 +1,52 @@
+const sanitize = string => {
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    '/': '&#x2F;',
+  };
+  const reg = /[&<>"'/]/gi;
+  return string.replace(reg, match => map[match]);
+};
+
+const hasValidMin = (value, min) => {
+  return value.length >= min;
+};
+
+export function Input({ onSubmit, placeholder, label, defaultValue, onBlur }) {
+  const handleBlur = () => {
+    if (onBlur) onBlur();
+  };
+
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      const value = e.target.value.trim();
+
+      if (!hasValidMin(value, 2)) return;
+
+      onSubmit(sanitize(value));
+      e.target.value = '';
+    }
+  };
+
+  return (
+    <div className="input-container">
+      <input
+        className="new-todo"
+        id="todo-input"
+        type="text"
+        data-testid="text-input"
+        autoFocus
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+      />
+      <label className="visually-hidden" htmlFor="todo-input">
+        {label}
+      </label>
+    </div>
+  );
+}
--- a/demos/todo-mvc/components/item.jsx
+++ b/demos/todo-mvc/components/item.jsx
@ -0,0 +1,50 @@
+import { Input } from './input';
+
+import { TOGGLE_ITEM, REMOVE_ITEM, UPDATE_ITEM } from '../constants';
+
+export const Item = function Item({ todo, dispatch }) {
+  let isWritable = false;
+  const { title, completed, id } = todo;
+
+  const toggleItem = () => dispatch({ type: TOGGLE_ITEM, payload: { id } });
+  const removeItem = () => dispatch({ type: REMOVE_ITEM, payload: { id } });
+  const updateItem = (id, title) => dispatch({ type: UPDATE_ITEM, payload: { id, title } });
+
+  const handleDoubleClick = () => {
+    isWritable = true;
+  };
+
+  const handleBlur = () => {
+    isWritable = false;
+  };
+
+  const handleUpdate = title => {
+    if (title.length === 0) removeItem(id);
+    else updateItem(id, title);
+
+    isWritable = false;
+  };
+
+  return (
+    <li className={todo.completed ? 'completed' : ''} data-testid="todo-item">
+      <div className="view">
+        <if cond={isWritable}>
+          <Input onSubmit={handleUpdate} label="Edit Todo Input" defaultValue={title} onBlur={handleBlur} />
+        </if>
+        <else>
+          <input
+            className="toggle"
+            type="checkbox"
+            data-testid="todo-item-toggle"
+            checked={completed}
+            onChange={toggleItem}
+          />
+          <label data-testid="todo-item-label" onDoubleClick={handleDoubleClick}>
+            {title}
+          </label>
+          <button className="destroy" data-testid="todo-item-button" onClick={removeItem} />
+        </else>
+      </div>
+    </li>
+  );
+};
--- a/demos/todo-mvc/components/main.jsx
+++ b/demos/todo-mvc/components/main.jsx
@ -0,0 +1,43 @@
+import { TOGGLE_ALL } from '../constants';
+import { Item } from './item.jsx';
+
+export function Main({ todos, dispatch }) {
+  // listen for route changes
+  let route = window.location.hash;
+  window.addEventListener('hashchange', () => {
+    console.log('hashchange', window.location.hash);
+    route = window.location.hash.slice(1);
+  });
+
+  const visibleTodos = todos.filter(todo => {
+    if (route === '/active') return !todo.completed;
+
+    if (route === '/completed') return todo.completed;
+
+    return todo;
+  });
+
+  const toggleAll = e => dispatch({ type: TOGGLE_ALL, payload: { completed: e.target.checked } });
+
+  return (
+    <main className="main" data-testid="main">
+      <if cond={visibleTodos.length > 0}>
+        <div className="toggle-all-container">
+          <input
+            className="toggle-all"
+            type="checkbox"
+            data-testid="toggle-all"
+            checked={visibleTodos.every(todo => todo.completed)}
+            onChange={toggleAll}
+          />
+          <label className="toggle-all-label" htmlFor="toggle-all">
+            Toggle All Input
+          </label>
+        </div>
+      </if>
+      <ul className="todo-list" data-testid="todo-list">
+        <for each={visibleTodos}>{todo => <Item todo={todo} key={todo.id} dispatch={dispatch} />}</for>
+      </ul>
+    </main>
+  );
+}
--- a/demos/todo-mvc/constants.js
+++ b/demos/todo-mvc/constants.js
@ -0,0 +1,7 @@
+export const ADD_ITEM = 'ADD_ITEM';
+export const UPDATE_ITEM = 'UPDATE_ITEM';
+export const REMOVE_ITEM = 'REMOVE_ITEM';
+export const TOGGLE_ITEM = 'TOGGLE_ITEM';
+export const REMOVE_ALL_ITEMS = 'REMOVE_ALL_ITEMS';
+export const TOGGLE_ALL = 'TOGGLE_ALL';
+export const REMOVE_COMPLETED_ITEMS = 'REMOVE_COMPLETED_ITEMS';
--- a/demos/todo-mvc/index.html
+++ b/demos/todo-mvc/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <title>Inula-Next</title>
+  <link rel="stylesheet" href="./app.css"/>
+</head>
+<body>
+<div id="main" class="todoapp"></div>
+<script type="module" src="./app.jsx"></script>
+</body>
+</html>
--- a/demos/todo-mvc/package.json
+++ b/demos/todo-mvc/package.json
@ -0,0 +1,25 @@
+{
+  "name": "inula-next-todo-mvc",
+  "private": true,
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/standalone": "^7.22.4",
+    "@iandx/easy-css": "^0.10.14",
+    "@openinula/next": "workspace:*",
+    "@openinula/babel-preset-inula-next": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "@openinula/vite-plugin-inula-next": "workspace:*"
+  },
+  "keywords": [
+    "inula-next"
+  ]
+}
--- a/demos/todo-mvc/tsconfig.json
+++ b/demos/todo-mvc/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/todo-mvc/vite.config.ts
+++ b/demos/todo-mvc/vite.config.ts
@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import inula from '@openinula/vite-plugin-inula-next';
+
+export default defineConfig({
+  build: {
+    minify: false, // 设置为 false 可以关闭代码压缩
+  },
+  server: {
+    port: 4320,
+  },
+  base: '',
+  optimizeDeps: {
+    disabled: true,
+  },
+  plugins: [inula({ files: '**/*.{ts,js,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>Inula-Next</title>
+  <link rel="stylesheet" href="/src/App.css"/>
+</head>
+<body>
+<div id="main" class="todoapp"></div>
+<script type="module" src="/src/App.tsx"></script>
+</body>
+</html>
--- a/demos/v2/package.json
+++ b/demos/v2/package.json
@ -0,0 +1,24 @@
+{
+  "name": "dev",
+  "private": true,
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/standalone": "^7.22.4",
+    "@openinula/next": "0.0.2",
+    "@openinula/vite-plugin-inula-next": "0.0.4",
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  },
+  "keywords": [
+    "inula-next"
+  ]
+}
--- a/demos/v2/src/App.css
+++ b/demos/v2/src/App.css
@ -0,0 +1,81 @@
+/* tree-view.css */
+
+.app {
+  font-family: Arial, sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.app-title {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.tree-view {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.tree-view > .tree-node:first-child {
+  margin-top: 5px;  /* Add margin to the first top-level tree-node */
+}
+
+.tree-node {
+  margin-bottom: 5px;
+}
+
+.tree-node-children > .tree-node:first-child {
+  margin-top: 5px;  /* Add margin to the first top-level tree-node */
+}
+
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.tree-node-content:hover {
+  background-color: #e0e0e0;
+}
+
+.tree-node-toggle {
+  min-width: 24px;
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+  transition: transform 0.2s;
+}
+
+.tree-node-toggle.expanded {
+  transform: rotate(0deg);
+}
+
+.tree-node-toggle.collapsed {
+  transform: rotate(-90deg);
+}
+
+.tree-node-name {
+  margin-left: 5px;
+}
+
+.tree-node-children {
+  margin-left: 16px;
+  padding-left: 16px;
+  border-left: 1px solid #ccc;
+}
+
+/* Add some color to differentiate levels */
+.tree-node .tree-node .tree-node-content {
+  background-color: #f0f0f0;
+}
+
+.tree-node .tree-node .tree-node .tree-node-content {
+  background-color: #e8e8e8;
+}
--- a/demos/v2/src/App.tsx
+++ b/demos/v2/src/App.tsx
@ -0,0 +1,95 @@
+import { render } from '@openinula/next';
+
+const TreeNode = ({ node, onToggle }) => {
+  let isExpanded = true;
+
+  const handleToggle = () => {
+    isExpanded = !isExpanded;
+    onToggle(node.id, !isExpanded);
+  };
+
+  return (
+    <div className="tree-node">
+      <div onClick={handleToggle} className="tree-node-content">
+        <if cond={node.children}>
+          <span className={`tree-node-toggle ${isExpanded ? 'expanded' : 'collapsed'}`}>▼</span>
+        </if>
+        <else>
+          <span className="tree-node-toggle"></span>
+        </else>
+        <span className="tree-node-name">{node.name}</span>
+      </div>
+      <if cond={isExpanded}>
+        <div className="tree-node-children">
+          <if cond={node.children}>
+            <for each={node.children}>
+              {child => {
+                return <TreeNode key={child.id} node={child} onToggle={onToggle} />;
+              }}
+            </for>
+          </if>
+        </div>
+      </if>
+    </div>
+  );
+};
+
+const TreeView = ({ data }) => {
+  let expandedNodes = [];
+
+  const handleToggle = (nodeId, isExpanded) => {
+    if (isExpanded) {
+      expandedNodes = [...expandedNodes, nodeId];
+    } else {
+      expandedNodes = expandedNodes.filter(id => id !== nodeId);
+    }
+  };
+
+  return (
+    <div className="tree-view">
+      <for each={data}>{node => <TreeNode key={node.id} node={node} onToggle={handleToggle} />}</for>
+    </div>
+  );
+};
+
+function App() {
+  const arr = [
+    {
+      name: '我的文档',
+      children: [
+        {
+          name: '工作',
+          children: [
+            { name: '项目方案.docx' },
+            { name: '会议记录.txt' },
+            {
+              name: '财务报表',
+              children: [{ name: '2023年第一季度.xlsx' }, { name: '2023年第二季度.xlsx' }, { name: '年度总结.pptx' }],
+            },
+          ],
+        },
+        {
+          name: '个人',
+          children: [
+            { name: '简历.pdf' },
+            { name: '家庭照片.jpg' },
+            {
+              name: '旅行计划',
+              children: [{ name: '暑假海岛游.md' }, { name: '冬季滑雪之旅.md' }],
+            },
+          ],
+        },
+        { name: '待办事项清单.txt' },
+      ],
+    },
+  ];
+
+  return (
+    <div className="app">
+      <h1 className="app-title">Tree View</h1>
+      <TreeView data={arr} />
+    </div>
+  );
+}
+
+render(App, document.getElementById('main'));
--- a/demos/v2/src/example/attributeBinding.jsx
+++ b/demos/v2/src/example/attributeBinding.jsx
@ -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 { render } from '@openinula/next';
+function AttributeBinding() {
+  let color = 'green';
+  function changeColor() {
+    color = color === 'red' ? 'green' : 'red';
+  }
+
+  return (
+    <h1 style={{ color }} onClick={changeColor}>
+      Click me to change color.
+    </h1>
+  );
+}
+
+render(AttributeBinding, document.getElementById('app'));
--- a/demos/v2/src/example/condition.jsx
+++ b/demos/v2/src/example/condition.jsx
@ -0,0 +1,44 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+function TrafficLight() {
+  let lightIndex = 0;
+  const TRAFFIC_LIGHTS = ['red', 'green'];
+  let light = TRAFFIC_LIGHTS[lightIndex];
+
+  function nextLight() {
+    lightIndex = (lightIndex + 1) % 2;
+  }
+
+  return (
+    <>
+      <button onClick={nextLight}>Next light</button>
+      <p>Light is: {light}</p>
+      <p>
+        You must
+        <if cond={light === 'red'}>
+          <span>STOP</span>
+        </if>
+        <else-if cond={light === 'green'}>
+          <span>GO</span>
+        </else-if>
+      </p>
+    </>
+  );
+}
+
+render(TrafficLight, document.getElementById('app'));
--- a/demos/v2/src/example/formBinding.jsx
+++ b/demos/v2/src/example/formBinding.jsx
@ -0,0 +1,75 @@
+/*
+ * 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 { render } from '@openinula/next';
+function Form() {
+  let text = 'a';
+  let checked = true;
+  let picked = 'One';
+  let selected = 'A';
+  let multiSelected = [];
+  function updateValue(e) {
+    text = e.target.value;
+  }
+  function handleCheckboxChange(e) {
+    checked = e.target.checked;
+  }
+  function handleRadioChange(e) {
+    picked = e.target.value;
+  }
+  function handleSelectChange(e) {
+    selected = e.target.value;
+  }
+  function handleMultiSelectChange(e) {
+    multiSelected = Array.from(e.target.selectedOptions).map(option => option.value);
+  }
+  return (
+    <>
+      <h2>Text Input</h2>
+      <input value={text} onInput={updateValue} />
+      <p>{text}</p>
+
+      <h2>Checkbox</h2>
+      <input id="checkbox" type="checkbox" checked={checked} onChange={handleCheckboxChange} />
+      <label for="checkbox"> Checked: {checked + ''}</label>
+
+      <h2>Radio</h2>
+      <input type="radio" id="one" value="One" name="num" checked={picked === 'One'} onChange={handleRadioChange} />
+      <label for="one">One</label>
+      <br />
+      <input type="radio" id="two" value="Two" name="num" checked={picked === 'Two'} onChange={handleRadioChange} />
+      <label for="two">Two</label>
+      <p>Picked: {picked}</p>
+
+      <h2>Select</h2>
+      <select id="select" value={selected} onChange={handleSelectChange} style={{ width: '100px' }}>
+        <option value="A">A</option>
+        <option value="B">B</option>
+        <option value="C">C</option>
+      </select>
+      <p>Selected: {selected}</p>
+
+      <h2>Multi Select</h2>
+      <select multiple style={{ width: '100px' }} value={multiSelected} onChange={handleMultiSelectChange}>
+        <option value="A">A</option>
+        <option value="B">B</option>
+        <option value="C">C</option>
+      </select>
+      <p>Selected: {multiSelected}</p>
+    </>
+  );
+}
+
+render(Form, document.getElementById('app'));
--- a/demos/v2/src/example/getData.jsx
+++ b/demos/v2/src/example/getData.jsx
@ -0,0 +1,32 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+const API_URL = 'https://jsonplaceholder.typicode.com/users';
+const users = await (await fetch(API_URL)).json();
+function List({ arr }) {
+  return (
+    <ul>
+      <for each={arr}>{item => <li>{item.name}</li>}</for>
+    </ul>
+  );
+}
+
+function App() {
+  return <List arr={users} />;
+}
+
+render(App, document.getElementById('app'));
--- a/demos/v2/src/example/helloWorld.jsx
+++ b/demos/v2/src/example/helloWorld.jsx
@ -0,0 +1,21 @@
+/*
+ * 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 { render } from '@openinula/next';
+function HelloWorld() {
+  return <h1>Hello World!</h1>;
+}
+
+render(HelloWorld, document.getElementById('app'));
--- a/demos/v2/src/example/loop.jsx
+++ b/demos/v2/src/example/loop.jsx
@ -0,0 +1,26 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+function Colors() {
+  const colors = ['red', 'green', 'blue'];
+  return (
+    <ul>
+      <for each={colors}>{color => <li>{color}</li>}</for>
+    </ul>
+  );
+}
+render(Colors, document.getElementById('app'));
--- a/demos/v2/src/example/simpleComponent.jsx
+++ b/demos/v2/src/example/simpleComponent.jsx
@ -0,0 +1,31 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+let fruits = ['apple', 'banana', 'pear'];
+function List({ arr }) {
+  return (
+    <ul>
+      <for each={arr}>{item => <li>{item}</li>}</for>
+    </ul>
+  );
+}
+
+function App() {
+  return <List arr={fruits} />;
+}
+
+render(App, document.getElementById('app'));
--- a/demos/v2/src/example/userInput.jsx
+++ b/demos/v2/src/example/userInput.jsx
@ -0,0 +1,31 @@
+/*
+ * 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 { render } from '@openinula/next';
+function UserInput() {
+  let count = 0;
+  function incrementCount() {
+    count++;
+  }
+
+  return (
+    <>
+      <h1>{count}</h1>
+      <button onClick={incrementCount}>Add 1</button>
+    </>
+  );
+}
+
+render(UserInput, document.getElementById('app'));
--- 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,16 @@
+import { defineConfig } from 'vite';
+import inula from '@openinula/vite-plugin-inula-next';
+
+export default defineConfig({
+  build: {
+    minify: false, // 设置为 false 可以关闭代码压缩
+  },
+  server: {
+    port: 4320,
+  },
+  base: '',
+  optimizeDeps: {
+    disabled: true,
+  },
+  plugins: [inula({ files: '**/*.{ts,js,tsx,jsx}' })],
+});
--- a/docs/inula-next/OpenInula
+++ b/docs/inula-next/OpenInula
@ -0,0 +1,27 @@
+# OpenInula 2.0 Parser
+
+This document describes the OpenInula 2.0 parser, which is used to parse the 2.0 API into a HIR (High-level Intermediate
+Representation) that can be used by the OpenInula 2.0 compiler.
+
+## Workflow
+```mermaid
+graph TD
+    A[OpenInula 2.0 Code] --> B[Visitor]
+    B --> C[VariableAnalyze]
+    B --> D[ViewAnalyze]
+    B --> E[fnMacroAnalyze]
+    B --> F[HookAnalyze-TODO]
+    C --> R[ReactivityParser]
+    D --> G[JSXParser]
+    G --> R
+    E --> R
+    F --> R
+    R --> |unused bit pruning|HIR
+```
+
+## Data Structure
+see `types.ts` in `packages/transpiler/babel-inula-next-core/src/analyze/types.ts`
+
+## TODO LIST
+- [x] for analyze the local variable, we need to consider the scope of the variable
+- [ ] hook analyze
--- 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-shared/package.json
+++ b/packages/inula-next-shared/package.json
@ -0,0 +1,33 @@
+{
+  "name": "@openinula/next-shared",
+  "version": "0.0.1",
+  "description": "Inula Next Shared",
+  "keywords": [
+    "Inula-Next"
+  ],
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsup --sourcemap"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.2",
+    "tsup": "^8.2.4"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "clean": true,
+    "dts": true,
+    "sourceMap": true
+  }
+}
--- a/packages/inula-next-shared/src/index.ts
+++ b/packages/inula-next-shared/src/index.ts
@ -0,0 +1,13 @@
+export enum InulaNodeType {
+  Comp = 0,
+  For = 1,
+  Cond = 2,
+  Exp = 3,
+  Hook = 4,
+  Context = 5,
+  Children = 6,
+}
+
+export function getTypeName(type: InulaNodeType): string {
+  return InulaNodeType[type];
+}
--- a/packages/inula-next-shared/tsconfig.json
+++ b/packages/inula-next-shared/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-store/package.json
+++ b/packages/inula-next-store/package.json
@ -0,0 +1,34 @@
+{
+  "name": "@openinula/store",
+  "version": "0.0.1",
+  "description": "Inula shared store",
+  "keywords": [
+    "Inula-Next"
+  ],
+  "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 @@
+# Inula-Next Main Package
+See the website's documentations for usage.
--- a/packages/inula-next/package.json
+++ b/packages/inula-next/package.json
@ -0,0 +1,41 @@
+{
+  "name": "@openinula/next",
+  "version": "0.0.2",
+  "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",
+    "test": "vitest --ui"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3",
+    "@openinula/next-shared": "workspace:*"
+  },
+  "devDependencies": {
+    "tsup": "^6.5.0",
+    "@openinula/vite-plugin-inula-next": "workspace:*",
+    "vitest": "2.0.5"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "clean": true,
+    "minify": false,
+    "noExternal": ["@openinula/next-shared"]
+  }
+}
--- a/packages/inula-next/src/ChildrenNode.ts
+++ b/packages/inula-next/src/ChildrenNode.ts
@ -0,0 +1,41 @@
+import { addWillUnmount } from './lifecycle';
+import { ChildrenNode, VNode, Updater } from './types';
+import { InulaNodeType } from '@openinula/next-shared';
+
+export function createChildrenNode(childrenFunc: (addUpdate: (updater: Updater) => void) => VNode[]): ChildrenNode {
+  return {
+    __type: InulaNodeType.Children,
+    childrenFunc,
+    updaters: new Set(),
+  };
+}
+
+/**
+ * @brief Build the prop view by calling the childrenFunc and add every single instance of the returned InulaNode to updaters
+ * @returns An array of InulaNode instances returned by childrenFunc
+ */
+export function buildChildren(childrenNode: ChildrenNode) {
+  let update;
+  const addUpdate = (updateFunc: Updater) => {
+    update = updateFunc;
+    childrenNode.updaters.add(updateFunc);
+  };
+  const newNodes = childrenNode.childrenFunc(addUpdate);
+  if (newNodes.length === 0) return [];
+  if (update) {
+    // Remove the updateNode from dlUpdateNodes when it unmounts
+    addWillUnmount(newNodes[0], childrenNode.updaters.delete.bind(childrenNode.updaters, update));
+  }
+
+  return newNodes;
+}
+
+/**
+ * @brief Update every node in dlUpdateNodes
+ * @param changed - A parameter indicating what changed to trigger the update
+ */
+export function updateChildrenNode(childrenNode: ChildrenNode, changed: number) {
+  childrenNode.updaters.forEach(update => {
+    update(changed);
+  });
+}
--- a/packages/inula-next/src/CompNode.ts
+++ b/packages/inula-next/src/CompNode.ts
@ -0,0 +1,138 @@
+import { addDidMount, addDidUnmount, addWillUnmount } from './lifecycle';
+import { equal } from './equal';
+import { schedule } from './scheduler';
+import { inMount } from './index';
+import { CompNode, ComposableNode } from './types';
+import { InulaNodeType } from '@openinula/next-shared';
+
+export function createCompNode(): CompNode {
+  return {
+    updateProp: builtinUpdateFunc,
+    updateState: builtinUpdateFunc,
+    __type: InulaNodeType.Comp,
+    props: {},
+    _$nodes: [],
+  };
+}
+
+export function builtinUpdateFunc() {
+  throw new Error('Component node not initiated.');
+}
+
+export function constructComp(
+  comp: CompNode,
+  {
+    updateState,
+    updateProp,
+    updateContext,
+    getUpdateViews,
+    didUnmount,
+    willUnmount,
+    didMount,
+  }: Pick<
+    CompNode,
+    'updateState' | 'updateProp' | 'updateContext' | 'getUpdateViews' | 'didUnmount' | 'willUnmount' | 'didMount'
+  >
+): CompNode {
+  comp.updateState = updateState;
+  comp.updateProp = updateProp;
+  comp.updateContext = updateContext;
+  comp.getUpdateViews = getUpdateViews;
+  comp.didUnmount = didUnmount;
+  comp.willUnmount = willUnmount;
+  comp.didMount = didMount;
+
+  return comp;
+}
+
+export function initCompNode(node: CompNode): CompNode {
+  node.mounting = true;
+  const willCall = () => {
+    callUpdatesBeforeInit(node);
+    if (node.didMount) addDidMount(node, node.didMount);
+    if (node.willUnmount) addWillUnmount(node, node.willUnmount);
+    addDidUnmount(node, setUnmounted.bind(null, node));
+    if (node.didUnmount) addDidUnmount(node, node.didUnmount);
+    if (node.getUpdateViews) {
+      const result = node.getUpdateViews();
+      if (Array.isArray(result)) {
+        const [baseNode, updateView] = result;
+        node.updateView = updateView;
+        node._$nodes = baseNode;
+      } else {
+        node.updateView = result;
+      }
+    }
+  };
+
+  willCall();
+
+  return node;
+}
+
+function setUnmounted(node: CompNode) {
+  node._$unmounted = true;
+}
+
+function callUpdatesBeforeInit(node: CompNode) {
+  node.updateState(-1);
+  delete node.mounting;
+}
+
+function cacheCheck(node: CompNode, key: string, deps: any[]): boolean {
+  if (!deps || !deps.length) return false;
+  if (!node.cache) {
+    node.cache = {};
+  }
+  if (equal(deps, node.cache[key])) return true;
+  node.props[key] = deps;
+  return false;
+}
+
+export function setProp(node: CompNode, key: string, valueFunc: () => any, deps: any[]) {
+  if (cacheCheck(node, key, deps)) return;
+  node.props[key] = valueFunc();
+  node.updateProp(key, node.props[key]);
+}
+
+export function setProps(node: CompNode, valueFunc: () => Record<string, any>, deps: any[]) {
+  if (cacheCheck(node, 'props', deps)) return;
+  const props = valueFunc();
+  if (!props) return;
+  Object.entries(props).forEach(([key, value]) => {
+    setProp(node, key, () => value, []);
+  });
+}
+
+export function updateContext(node: CompNode, key: string, value: any, context: any) {
+  if (!node.updateContext) return;
+  node.updateContext(context, key, value);
+}
+
+export function updateCompNode(node: ComposableNode, newValue: any, bit?: number) {
+  if ('mounting' in node) return;
+
+  node.updateState(bit || 0);
+
+  if (!inMount()) {
+    updateView(node, bit || 0);
+  }
+}
+
+function updateView(node: ComposableNode, bit: number) {
+  if (!bit) return;
+  if ('_$depNumsToUpdate' in node) {
+    node._$depNumsToUpdate?.push(bit);
+  } else {
+    node._$depNumsToUpdate = [bit];
+    schedule(() => {
+      if (node._$unmounted) return;
+      const depNums = node._$depNumsToUpdate || [];
+      if (depNums.length > 0) {
+        const depNum = depNums.reduce((acc, cur) => acc | cur, 0);
+        node.updateView?.(depNum);
+      }
+      delete node._$depNumsToUpdate;
+    });
+  }
+}
--- a/packages/inula-next/src/ContextNode.ts
+++ b/packages/inula-next/src/ContextNode.ts
@ -0,0 +1,122 @@
+import { InulaNodeType } from '@openinula/next-shared';
+import { addWillUnmount } from './lifecycle';
+import { equal } from './equal';
+import { VNode, ContextNode, Context, CompNode, HookNode } from './types';
+import { currentComp } from '.';
+
+let contextNodeMap: Map<symbol, ContextNode<any>>;
+
+export function getContextNodeMap() {
+  return contextNodeMap;
+}
+
+export function createContextNode<V extends Record<PropertyKey, any>>(
+  ctx: Context<V>,
+  value: V,
+  depMap: Record<keyof V, Array<unknown>>
+) {
+  if (!contextNodeMap) contextNodeMap = new Map();
+
+  const ContextNode: ContextNode<V> = {
+    value: value,
+    depMap: depMap,
+    context: ctx,
+    __type: InulaNodeType.Context,
+    consumers: new Set(),
+    _$nodes: [],
+  };
+
+  replaceContextValue(ContextNode);
+
+  return ContextNode;
+}
+
+/**
+ * @brief Update a specific key of context, and update all the comp nodes that depend on this context
+ * @param contextNode
+ * @param name - The name of the environment variable to update
+ * @param valueFunc
+ * @param deps
+ */
+export function updateContextNode<V extends Record<string, any>>(
+  contextNode: ContextNode<V>,
+  name: keyof V,
+  valueFunc: () => V[keyof V],
+  deps: Array<V[keyof V]>
+) {
+  if (cached(contextNode, deps, name)) return;
+  const value = valueFunc();
+  contextNode.value[name] = value;
+  contextNode.consumers.forEach(node => {
+    // should have updateContext, otherwise the bug of compiler
+    node.updateContext!(contextNode.context, name as string, value);
+  });
+}
+
+function cached<V extends Record<PropertyKey, any>>(contextNode: ContextNode<V>, deps: Array<unknown>, name: keyof V) {
+  if (!deps || !deps.length) return false;
+  if (equal(deps, contextNode.depMap[name])) return true;
+  contextNode.depMap[name] = deps;
+  return false;
+}
+
+function replaceContextValue<V extends Record<PropertyKey, any>>(contextNode: ContextNode<V>) {
+  contextNode.prevValue = contextNode.context.value;
+  contextNode.prevContextNode = contextNodeMap!.get(contextNode.context.id);
+  contextNode.context.value = contextNode.value;
+
+  contextNodeMap!.set(contextNode.context.id, contextNode);
+}
+
+/**
+ * @brief Set this._$nodes, and exit the current context
+ * @param contextNode
+ * @param nodes - The nodes to set
+ */
+export function initContextChildren<V extends Record<PropertyKey, any>>(contextNode: ContextNode<V>, nodes: VNode[]) {
+  contextNode._$nodes = nodes;
+  contextNode.context.value = contextNode.prevValue || null;
+  if (contextNode.prevContextNode) {
+    contextNodeMap!.set(contextNode.context.id, contextNode.prevContextNode);
+  } else {
+    contextNodeMap!.delete(contextNode.context.id);
+  }
+  contextNode.prevValue = null;
+  contextNode.prevContextNode = null;
+}
+
+export function replaceContext(contextNodeMap: Map<symbol, ContextNode<any>>) {
+  for (const [ctxId, contextNode] of contextNodeMap.entries()) {
+    replaceContextValue(contextNode);
+  }
+}
+
+/**
+ * @brief Add a node to this.updateNodes, delete the node from this.updateNodes when it unmounts
+ */
+export function addConsumer(contextNode: ContextNode<any>, node: CompNode | HookNode) {
+  contextNode.consumers.add(node);
+  addWillUnmount(node, contextNode.consumers.delete.bind(contextNode.consumers, node));
+}
+
+export function createContext<T extends Record<PropertyKey, any> | null>(defaultVal: T): Context<T> {
+  return {
+    id: Symbol('inula-ctx'),
+    value: defaultVal,
+  };
+}
+
+export function useContext<T extends Record<PropertyKey, any> | null>(ctx: Context<T>, key?: keyof T): T | T[keyof T] {
+  if (contextNodeMap) {
+    const contextNode = contextNodeMap.get(ctx.id);
+    if (contextNode) {
+      addConsumer(contextNode, currentComp!);
+    }
+  }
+
+  if (key && ctx.value) {
+    return ctx.value[key];
+  }
+
+  return ctx.value as T;
+}
--- a/packages/inula-next/src/HookNode.ts
+++ b/packages/inula-next/src/HookNode.ts
@ -0,0 +1,70 @@
+/*
+ * 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 { builtinUpdateFunc, inMount, updateCompNode } from './index.js';
+import { CompNode, HookNode } from './types';
+import { InulaNodeType } from '@openinula/next-shared';
+
+export function createHookNode(parent: HookNode | CompNode, bitmap: number): HookNode {
+  return {
+    updateProp: builtinUpdateFunc,
+    updateState: builtinUpdateFunc,
+    __type: InulaNodeType.Hook,
+    props: {},
+    _$nodes: [],
+    bitmap,
+    parent,
+  };
+}
+
+export function emitUpdate(node: HookNode) {
+  // the new value is not used in the `updateCompNode`, just pass a null
+  updateCompNode(node.parent, null, node.bitmap);
+}
+
+export function constructHook(
+  node: HookNode,
+  {
+    value,
+    updateState,
+    updateProp,
+    updateContext,
+    getUpdateViews,
+    didUnmount,
+    willUnmount,
+    didMount,
+  }: Pick<
+    HookNode,
+    | 'value'
+    | 'updateState'
+    | 'updateProp'
+    | 'updateContext'
+    | 'getUpdateViews'
+    | 'didUnmount'
+    | 'willUnmount'
+    | 'didMount'
+  >
+): HookNode {
+  node.value = value;
+  node.updateState = updateState;
+  node.updateProp = updateProp;
+  node.updateContext = updateContext;
+  node.getUpdateViews = getUpdateViews;
+  node.didUnmount = didUnmount;
+  node.willUnmount = willUnmount;
+  node.didMount = didMount;
+
+  return node;
+}
--- a/packages/inula-next/src/InulaNode.ts
+++ b/packages/inula-next/src/InulaNode.ts
@ -0,0 +1,83 @@
+import { InulaHTMLNode, VNode, TextNode, InulaNode } from './types';
+
+export const getEl = (node: VNode): Array<InulaHTMLNode | TextNode> => {
+  return toEls(node._$nodes || []);
+};
+
+export const toEls = (nodes: InulaNode[]): Array<InulaHTMLNode | TextNode> => {
+  const els: Array<InulaHTMLNode | TextNode> = [];
+  loopShallowEls(nodes, el => {
+    els.push(el);
+  });
+  return els;
+};
+
+export const loopShallowEls = (nodes: InulaNode[], runFunc: (el: InulaHTMLNode | TextNode) => void): void => {
+  const stack: Array<InulaNode> = [...nodes].reverse();
+  while (stack.length > 0) {
+    const node = stack.pop()!;
+    if (node instanceof HTMLElement || node instanceof Text) {
+      runFunc(node);
+    } else if (node._$nodes) {
+      stack.push(...[...node._$nodes].reverse());
+    }
+  }
+};
+
+export const addParentEl = (nodes: Array<InulaNode>, parentEl: HTMLElement): void => {
+  nodes.forEach(node => {
+    if ('__type' in node) {
+      node._$parentEl = parentEl as InulaHTMLNode;
+      node._$nodes && addParentEl(node._$nodes, parentEl);
+    }
+  });
+};
+
+export const getFlowIndexFromNodes = (nodes: InulaNode[], stopNode?: InulaNode): number => {
+  let index = 0;
+  const stack: InulaNode[] = [...nodes].reverse();
+  while (stack.length > 0) {
+    const node = stack.pop()!;
+    if (node === stopNode) break;
+    if ('__type' in node) {
+      node._$nodes && stack.push(...[...node._$nodes].reverse());
+    } else {
+      index++;
+    }
+  }
+  return index;
+};
+
+export const appendNodesWithSibling = (nodes: Array<InulaNode>, parentEl: HTMLElement, nextSibling?: Node): number => {
+  if (nextSibling) return insertNodesBefore(nodes, parentEl, nextSibling);
+  return appendNodes(nodes, parentEl);
+};
+
+export const appendNodesWithIndex = (
+  nodes: InulaNode[],
+  parentEl: HTMLElement,
+  index: number,
+  length?: number
+): number => {
+  length = length ?? parentEl.childNodes.length;
+  if (length !== index) return insertNodesBefore(nodes, parentEl, parentEl.childNodes[index]);
+  return appendNodes(nodes, parentEl);
+};
+
+export const insertNodesBefore = (nodes: InulaNode[], parentEl: HTMLElement, nextSibling: Node): number => {
+  let count = 0;
+  loopShallowEls(nodes, el => {
+    parentEl.insertBefore(el, nextSibling);
+    count++;
+  });
+  return count;
+};
+
+const appendNodes = (nodes: InulaNode[], parentEl: HTMLElement): number => {
+  let count = 0;
+  loopShallowEls(nodes, el => {
+    parentEl.appendChild(el);
+    count++;
+  });
+  return count;
+};
--- a/packages/inula-next/src/MutableNode/CondNode.ts
+++ b/packages/inula-next/src/MutableNode/CondNode.ts
@ -0,0 +1,91 @@
+import { appendNodesWithSibling, getFlowIndexFromNodes } from '../InulaNode.js';
+import { addDidUnmount, addWillUnmount, runDidMount } from '../lifecycle.js';
+import {
+  geneNewNodesInEnvWithUnmount,
+  removeNodesWithUnmount,
+  runLifeCycle,
+  setUnmountFuncs,
+} from './mutableHandler.js';
+import { CondNode, VNode } from '../types';
+import { geneNewNodesInCtx, getSavedCtxNodes, removeNodes } from './mutableHandler.js';
+import { startUnmountScope } from '../lifecycle.js';
+import { InulaNodeType } from '@openinula/next-shared';
+
+export function createCondNode(depNum: number, condFunc: (condNode: CondNode) => VNode[]) {
+  startUnmountScope();
+
+  const condNode: CondNode = {
+    __type: InulaNodeType.Cond,
+    cond: -1,
+    didntChange: false,
+    depNum,
+    condFunc,
+    savedContextNodes: getSavedCtxNodes(),
+    _$nodes: [],
+    willUnmountFuncs: [],
+    didUnmountFuncs: [],
+  };
+
+  condNode._$nodes = condFunc(condNode);
+  setUnmountFuncs(condNode);
+
+  if (condNode.willUnmountFuncs) {
+    // ---- Add condNode willUnmount func to the global UnmountStore
+    addWillUnmount(condNode, runLifeCycle.bind(condNode, condNode.willUnmountFuncs));
+  }
+  if (condNode.didUnmountFuncs) {
+    // ---- Add condNode didUnmount func to the global UnmountStore
+    addDidUnmount(condNode, runLifeCycle.bind(condNode, condNode.didUnmountFuncs));
+  }
+
+  return condNode;
+}
+
+/**
+ * @brief the condition changed, update children of current branch
+ */
+export function updateCondChildren(condNode: CondNode, changed: number) {
+  if (condNode.depNum & changed) {
+    //  If the depNum of the condition has changed, directly return because node already updated in the `updateBranch`
+    return;
+  }
+  condNode.updateFunc?.(changed);
+}
+
+/**
+ * @brief The update function of CondNode's childNodes when the condition changed
+ */
+export function updateCondNode(condNode: CondNode) {
+  //  ---- 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 = [condNode.willUnmountFuncs, condNode.didUnmountFuncs];
+  const newNodes = geneNewNodesInEnvWithUnmount(condNode, () => condNode.condFunc(condNode));
+
+  // ---- If the new nodes are the same as the old nodes, we only need to update  children
+  if (condNode.didntChange) {
+    [condNode.willUnmountFuncs, condNode.didUnmountFuncs] = prevFuncs;
+    condNode.didntChange = false;
+    condNode.updateFunc?.(condNode.depNum);
+    return;
+  }
+  // ---- Remove old nodes
+  const newFuncs = [condNode.willUnmountFuncs, condNode.didUnmountFuncs];
+  [condNode.willUnmountFuncs, condNode.didUnmountFuncs] = prevFuncs;
+  condNode._$nodes && condNode._$nodes.length > 0 && removeNodesWithUnmount(condNode, condNode._$nodes);
+  [condNode.willUnmountFuncs, condNode.didUnmountFuncs] = newFuncs;
+
+  if (newNodes.length === 0) {
+    // ---- No branch has been taken
+    condNode._$nodes = [];
+    return;
+  }
+  // ---- Add new nodes
+  const parentEl = condNode._$parentEl!;
+  // ---- Faster append with nextSibling rather than flowIndex
+  const flowIndex = getFlowIndexFromNodes(parentEl._$nodes, condNode);
+
+  const nextSibling = parentEl.childNodes[flowIndex];
+  appendNodesWithSibling(newNodes, parentEl, nextSibling);
+  runDidMount();
+  condNode._$nodes = newNodes;
+}
--- a/packages/inula-next/src/MutableNode/ExpNode.ts
+++ b/packages/inula-next/src/MutableNode/ExpNode.ts
@ -0,0 +1,84 @@
+import { InulaNodeType } from '@openinula/next-shared';
+import { appendNodesWithSibling, getFlowIndexFromNodes } from '../InulaNode';
+import { addDidUnmount, addWillUnmount, runDidMount } from '../lifecycle';
+import { equal } from '../equal';
+import { ChildrenNode, ExpNode, VNode, TextNode, InulaNode } from '../types';
+import { removeNodesWithUnmount, runLifeCycle, setUnmountFuncs } from './mutableHandler';
+import { geneNewNodesInCtx, getSavedCtxNodes, removeNodes } from './mutableHandler';
+import { startUnmountScope } from '../lifecycle';
+import { buildChildren } from '../ChildrenNode';
+import { createTextNode } from '../renderer/dom';
+
+function isChildrenNode(node: any): node is ChildrenNode {
+  return node.__type === InulaNodeType.Children;
+}
+function getExpressionResult(fn: () => Array<InulaNode>) {
+  let nodes = fn();
+  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 createTextNode(`${node}`);
+        }
+        // TODO ---- If the node has PropView, call it to get the view,
+        if (isChildrenNode(node)) return buildChildren(node);
+        return node;
+      })
+      // ---- Flatten the nodes again
+      .flat(1)
+  );
+}
+export function createExpNode(value: () => VNode[], deps: unknown[]) {
+  startUnmountScope();
+
+  const expNode: ExpNode = {
+    __type: InulaNodeType.Exp,
+    _$nodes: getExpressionResult(value),
+    deps,
+    savedContextNodes: getSavedCtxNodes(),
+    willUnmountFuncs: [],
+    didUnmountFuncs: [],
+  };
+
+  setUnmountFuncs(expNode);
+
+  if (expNode.willUnmountFuncs) {
+    // ---- Add expNode willUnmount func to the global UnmountStore
+    addWillUnmount(expNode, runLifeCycle.bind(expNode, expNode.willUnmountFuncs));
+  }
+  if (expNode.didUnmountFuncs) {
+    // ---- Add expNode didUnmount func to the global UnmountStore
+    addDidUnmount(expNode, runLifeCycle.bind(expNode, expNode.didUnmountFuncs));
+  }
+  return expNode;
+}
+
+export function updateExpNode(expNode: ExpNode, valueFunc: () => VNode[], deps: unknown[]) {
+  if (cache(expNode, deps)) return;
+  removeNodesWithUnmount(expNode, expNode._$nodes);
+  const newNodes = geneNewNodesInCtx(expNode, () => getExpressionResult(valueFunc));
+  if (newNodes.length === 0) {
+    expNode._$nodes = [];
+    return;
+  }
+  const parentEl = expNode._$parentEl!;
+  const flowIndex = getFlowIndexFromNodes(parentEl._$nodes, expNode);
+  const nextSibling = parentEl.childNodes[flowIndex];
+  appendNodesWithSibling(newNodes, parentEl, nextSibling);
+  runDidMount();
+
+  expNode._$nodes = newNodes;
+}
+
+function cache(expNode: ExpNode, deps: unknown[]) {
+  if (!deps || !deps.length) return false;
+  if (equal(deps, expNode.deps)) return true;
+  expNode.deps = deps;
+  return false;
+}
--- a/packages/inula-next/src/MutableNode/ForNode.ts
+++ b/packages/inula-next/src/MutableNode/ForNode.ts
@ -0,0 +1,373 @@
+import { InulaNodeType } from '@openinula/next-shared';
+import {
+  appendNodesWithIndex,
+  appendNodesWithSibling,
+  getFlowIndexFromNodes,
+  insertNodesBefore,
+  toEls,
+} from '../InulaNode';
+import { addDidUnmount, addWillUnmount, endUnmountScope, runDidMount } from '../lifecycle';
+import { ForNode, InulaNode, VNode } from '../types';
+import { geneNewNodesInCtx, getSavedCtxNodes } from './mutableHandler';
+import { startUnmountScope } from '../lifecycle';
+import { removeNodes as removeMutableNodes } from './mutableHandler';
+
+export function createForNode<T>(
+  array: T[],
+  depNum: number,
+  keys: number[],
+  nodeFunc: (item: T, idx: number, updateArr: any[]) => VNode[]
+) {
+  const forNode: ForNode<T> = {
+    __type: InulaNodeType.For,
+    array: [...array],
+    depNum,
+    keys,
+    nodeFunc,
+    nodesMap: new Map(),
+    updateArr: [],
+    didUnmountFuncs: new Map(),
+    willUnmountFuncs: new Map(),
+    savedContextNodes: getSavedCtxNodes(),
+    get _$nodes() {
+      const nodes = [];
+      for (let idx = 0; idx < forNode.array.length; idx++) {
+        nodes.push(...forNode.nodesMap.get(forNode.keys?.[idx] ?? idx)!);
+      }
+      return nodes;
+    },
+  };
+  addNodeFunc(forNode, nodeFunc);
+  return forNode;
+}
+
+/**
+ * @brief To be called immediately after the constructor
+ * @param forNode
+ * @param nodeFunc
+ */
+function addNodeFunc<T>(forNode: ForNode<T>, nodeFunc: (item: T, idx: number, updateArr: any[]) => VNode[]) {
+  forNode.array.forEach((item, idx) => {
+    startUnmountScope();
+    const key = forNode.keys?.[idx] ?? idx;
+    const nodes = nodeFunc(item, idx, forNode.updateArr);
+    forNode.nodesMap.set(key, nodes);
+    setUnmountMap(forNode, key);
+  });
+
+  // ---- For nested ForNode, the whole strategy is just like EnvStore
+  //      we use array of function array to create "environment", popping and pushing
+  addWillUnmount(forNode, () => runLifecycleMap(forNode.willUnmountFuncs));
+  addDidUnmount(forNode, () => runLifecycleMap(forNode.didUnmountFuncs));
+}
+
+function runLifecycleMap<T>(map: Map<number, any[]>, key?: number) {
+  if (!map || map.size === 0) {
+    return;
+  }
+  if (typeof key === 'number') {
+    const funcs = map.get(key);
+    if (!funcs) return;
+    for (let i = 0; i < funcs.length; i++) funcs[i]?.();
+    map.delete(key);
+  } else {
+    map.forEach(funcs => {
+      for (let i = funcs.length - 1; i >= 0; i--) funcs[i]?.();
+    });
+    map.clear();
+  }
+}
+
+/**
+ * @brief Set the unmount map by getting the last unmount map from the global store
+ * @param key
+ */
+function setUnmountMap<T>(forNode: ForNode<T>, key: number) {
+  const [willUnmountMap, didUnmountMap] = endUnmountScope();
+  if (willUnmountMap && willUnmountMap.length > 0) {
+    if (!forNode.willUnmountFuncs) forNode.willUnmountFuncs = new Map();
+    forNode.willUnmountFuncs.set(key, willUnmountMap);
+  }
+  if (didUnmountMap && didUnmountMap.length > 0) {
+    if (!forNode.didUnmountFuncs) forNode.didUnmountFuncs = new Map();
+    forNode.didUnmountFuncs.set(key, didUnmountMap);
+  }
+}
+
+/**
+ * @brief Non-array update function, invoke children's update function
+ * @param changed
+ */
+export function updateForChildren<T>(forNode: ForNode<T>, changed: number) {
+  // ---- 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 -> 000f1
+  //      update because depNum doesn't contain all the changed
+  if (!(~forNode.depNum & changed)) return;
+  for (let idx = 0; idx < forNode.array.length; idx++) {
+    updateItem(forNode, idx, forNode.array, changed);
+  }
+}
+
+/**
+ * @brief Update the view related to one item in the array
+ * @param forNode - The ForNode
+ * @param idx - The index of the item in the array
+ * @param array - The array of items
+ * @param changed - The changed bit
+ */
+function updateItem<T>(forNode: ForNode<T>, idx: number, array: T[], changed?: number) {
+  // ---- The update function of ForNode's childNodes is stored in the first child node
+  forNode.updateArr[idx]?.(changed ?? forNode.depNum, array[idx]);
+}
+
+/**
+ * @brief Array-related update function
+ */
+export function updateForNode<T>(forNode: ForNode<T>, newArray: T[], newKeys: number[]) {
+  if (newKeys) {
+    updateWithKey(forNode, newArray, newKeys);
+    return;
+  }
+  updateWithOutKey(forNode, newArray);
+}
+
+/**
+ * @brief Shortcut to generate new nodes with idx and key
+ */
+function getNewNodes<T>(forNode: ForNode<T>, idx: number, key: number, array: T[], updateArr?: any[]) {
+  startUnmountScope();
+  const nodes = geneNewNodesInCtx(forNode, () => forNode.nodeFunc(array[idx], idx, updateArr ?? forNode.updateArr));
+  setUnmountMap(forNode, key);
+  forNode.nodesMap.set(key, nodes);
+  return nodes;
+}
+
+/**
+ * @brief Remove nodes from parentEl and run willUnmount and didUnmount
+ * @param nodes
+ * @param key
+ */
+function removeNodes<T>(forNode: ForNode<T>, nodes: InulaNode[], key: number) {
+  runLifecycleMap(forNode.willUnmountFuncs, key);
+  removeMutableNodes(forNode, nodes);
+  runLifecycleMap(forNode.didUnmountFuncs, key);
+  forNode.nodesMap.delete(key);
+}
+
+/**
+ * @brief Update the nodes without keys
+ * @param newArray
+ */
+function updateWithOutKey<T>(forNode: ForNode<T>, newArray: T[]) {
+  const preLength = forNode.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 < forNode.array.length; idx++) {
+      updateItem(forNode, idx, newArray);
+    }
+    forNode.array = [...newArray];
+    return;
+  }
+  const parentEl = forNode._$parentEl!;
+  // ---- If the new array is longer, add new nodes directly
+  if (preLength < currLength) {
+    let flowIndex = getFlowIndexFromNodes(parentEl._$nodes, forNode);
+    // ---- 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 += getFlowIndexFromNodes(forNode.nodesMap.get(idx)!);
+        updateItem(forNode, idx, newArray);
+        continue;
+      }
+      const newNodes = getNewNodes(forNode, idx, idx, newArray);
+      appendNodesWithIndex(newNodes, parentEl, flowIndex, length);
+    }
+    runDidMount();
+    forNode.array = [...newArray];
+    return;
+  }
+
+  // ---- Update the nodes first
+  for (let idx = 0; idx < currLength; idx++) {
+    updateItem(forNode, idx, newArray);
+  }
+  // ---- If the new array is shorter, remove the extra nodes
+  for (let idx = currLength; idx < preLength; idx++) {
+    const nodes = forNode.nodesMap.get(idx);
+    removeNodes(forNode, nodes!, idx);
+  }
+  forNode.updateArr.splice(currLength, preLength - currLength);
+  forNode.array = [...newArray];
+}
+
+function arrayEqual<T>(arr1: T[], arr2: T[]) {
+  if (arr1.length !== arr2.length) return false;
+  return arr1.every((item, idx) => item === arr2[idx]);
+}
+
+/**
+ * @brief Update the nodes with keys
+ * @param newArray
+ * @param newKeys
+ */
+function updateWithKey<T>(forNode: ForNode<T>, newArray: T[], newKeys: number[]) {
+  if (newKeys.length !== new Set(newKeys).size) {
+    throw new Error('Inula-Next: Duplicate keys in for loop are not allowed');
+  }
+  const prevKeys = forNode.keys;
+  forNode.keys = newKeys;
+
+  if (arrayEqual(prevKeys, newKeys)) {
+    // ---- If the keys are the same, we only need to update the nodes
+    for (let idx = 0; idx < newArray.length; idx++) {
+      updateItem(forNode, idx, newArray);
+    }
+    forNode.array = [...newArray];
+    return;
+  }
+
+  const parentEl = forNode._$parentEl!;
+
+  // ---- No nodes after, delete all nodes
+  if (newKeys.length === 0) {
+    const parentNodes = parentEl._$nodes ?? [];
+    if (parentNodes.length === 1 && parentNodes[0] === forNode) {
+      // ---- 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
+      runLifecycleMap(forNode.willUnmountFuncs);
+      parentEl.innerHTML = '';
+      runLifecycleMap(forNode.didUnmountFuncs);
+    } else {
+      for (let prevIdx = 0; prevIdx < prevKeys.length; prevIdx++) {
+        const prevKey = prevKeys[prevIdx];
+        removeNodes(forNode, forNode.nodesMap.get(prevKey)!, prevKey);
+      }
+    }
+    forNode.nodesMap.clear();
+    forNode.updateArr = [];
+    forNode.array = [];
+    return;
+  }
+
+  // ---- Record how many nodes are before this ForNode with the same parentNode
+  const flowIndex = getFlowIndexFromNodes(parentEl._$nodes, forNode);
+
+  // ---- No nodes before, append all nodes
+  if (prevKeys.length === 0) {
+    const nextSibling = parentEl.childNodes[flowIndex];
+    for (let idx = 0; idx < newKeys.length; idx++) {
+      const newNodes = getNewNodes(forNode, idx, newKeys[idx], newArray);
+      appendNodesWithSibling(newNodes, parentEl, nextSibling);
+    }
+    runDidMount();
+    forNode.array = [...newArray];
+    return;
+  }
+
+  const shuffleKeys: number[] = [];
+  const newUpdateArr: any[] = [];
+
+  // ---- 1. Delete the nodes that are no longer in the array
+  for (let prevIdx = 0; prevIdx < prevKeys.length; prevIdx++) {
+    const prevKey = prevKeys[prevIdx];
+    if (forNode.keys.includes(prevKey)) {
+      shuffleKeys.push(prevKey);
+      newUpdateArr.push(forNode.updateArr[prevIdx]);
+      continue;
+    }
+    removeNodes(forNode, forNode.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 < forNode.keys.length; idx++) {
+    const key = forNode.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 += getFlowIndexFromNodes(forNode.nodesMap.get(key)!);
+      newUpdateArr[prevIdx]?.(forNode.depNum, newArray[idx]);
+      continue;
+    }
+    // ---- Insert updateArr first because in getNewNode the updateFunc will replace this null
+    newUpdateArr.splice(idx, 0, null);
+    const newNodes = getNewNodes(forNode, idx, key, newArray);
+    // ---- Add the new nodes
+    shuffleKeys.splice(idx, 0, key);
+
+    const count = appendNodesWithIndex(newNodes, parentEl, newFlowIndex, length);
+    newFlowIndex += count;
+    length += count;
+  }
+  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 (arrayEqual(forNode.keys, shuffleKeys)) {
+    forNode.array = [...newArray];
+    forNode.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 < forNode.keys.length; idx++) {
+    const key = forNode.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 = getFlowIndexFromNodes(bufferedNode);
+      const lastEl = 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
+        insertNodesBefore(bufferedNode, parentEl, nextSibling);
+      }
+      // ---- So the added length is the length of the bufferedNode
+      newFlowIndex += bufferedFlowIndex;
+      // TODO: ?? delete bufferNodes[idx];
+    } else if (prevIdx === idx) {
+      // ---- If the node is in the same position, we don't need to do anything
+      newFlowIndex += getFlowIndexFromNodes(forNode.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, forNode.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 = forNode.nodesMap.get(key)!;
+      const lastEl = toEls(childNodes).pop()!;
+      const nextSibling = parentEl.childNodes[newFlowIndex];
+      if (lastEl !== nextSibling && lastEl.nextSibling !== nextSibling) {
+        newFlowIndex += 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;
+  }
+  forNode.array = [...newArray];
+  forNode.updateArr = newUpdateArr;
+}
--- a/packages/inula-next/src/MutableNode/mutableHandler.ts
+++ b/packages/inula-next/src/MutableNode/mutableHandler.ts
@ -0,0 +1,81 @@
+import { MutableNode, VNode, ScopedLifecycle, InulaNode, ContextNode } from '../types';
+import { endUnmountScope, startUnmountScope } from '../lifecycle';
+import { getContextNodeMap, replaceContext } from '../ContextNode';
+import { addParentEl, loopShallowEls } from '../InulaNode';
+
+export function setUnmountFuncs(node: MutableNode) {
+  // pop will not be undefined,cause we push empty array when create node
+  const [willUnmountFuncs, didUnmountFuncs] = endUnmountScope();
+  node.willUnmountFuncs = willUnmountFuncs!;
+  node.didUnmountFuncs = didUnmountFuncs!;
+}
+
+export function runLifeCycle(fn: ScopedLifecycle) {
+  for (let i = 0; i < fn.length; i++) {
+    fn[i]();
+  }
+}
+
+export function removeNodesWithUnmount(node: MutableNode, children: InulaNode[]) {
+  runLifeCycle(node.willUnmountFuncs);
+  removeNodes(node, children);
+  runLifeCycle(node.didUnmountFuncs);
+}
+
+export function geneNewNodesInEnvWithUnmount(node: MutableNode, newNodesFunc: () => VNode[]) {
+  startUnmountScope();
+  const nodes = geneNewNodesInCtx(node, newNodesFunc);
+  setUnmountFuncs(node);
+  return nodes;
+}
+export function getSavedCtxNodes(): Map<symbol, ContextNode<any>> | null {
+  const contextNodeMap = getContextNodeMap();
+  if (contextNodeMap) {
+    return new Map([...contextNodeMap]);
+  }
+  return null;
+}
+/**
+ * @brief Initialize the new nodes, add parentEl to all nodes
+ */
+function initNewNodes(node: VNode, children: Array<InulaNode>) {
+  // ---- Add parentEl to all children
+  addParentEl(children, node._$parentEl!);
+}
+/**
+ * @brief Generate new nodes in the saved context
+ * @param node
+ * @param newNodesFunc
+ * @returns
+ */
+
+export function geneNewNodesInCtx(node: MutableNode<any>, newNodesFunc: () => Array<InulaNode>) {
+  if (!node.savedContextNodes) {
+    // ---- No saved context, just generate new nodes
+    const newNodes = newNodesFunc();
+    // ---- Only for IfNode's same condition return
+    // ---- Initialize the new nodes
+    initNewNodes(node, newNodes);
+    return newNodes;
+  }
+  // ---- Save the current context nodes
+  const currentContextNodes = getContextNodeMap()!;
+  // ---- Replace the saved context nodes
+  replaceContext(node.savedContextNodes);
+  const newNodes = newNodesFunc();
+  // ---- Retrieve the current context nodes
+  replaceContext(currentContextNodes);
+  // ---- Only for IfNode's same condition return
+  // ---- Initialize the new nodes
+  initNewNodes(node, newNodes);
+  return newNodes;
+}
+
+/**
+ * @brief Remove nodes from parentEl and run willUnmount and didUnmount
+ */
+export function removeNodes(node: VNode, children: InulaNode[]) {
+  loopShallowEls(children, dom => {
+    node._$parentEl!.removeChild(dom);
+  });
+}
--- a/packages/inula-next/src/equal.ts
+++ b/packages/inula-next/src/equal.ts
@ -0,0 +1,10 @@
+/**
+ * @brief Shallowly compare the deps with the previous deps
+ * @param deps
+ * @param prevDeps
+ * @returns
+ */
+export function equal(deps: any[], prevDeps: any[]) {
+  if (!prevDeps || deps.length !== prevDeps.length) return false;
+  return deps.every((dep, i) => !(dep instanceof Object) && prevDeps[i] === dep);
+}
--- a/packages/inula-next/src/index.ts
+++ b/packages/inula-next/src/index.ts
@ -0,0 +1,199 @@
+import { runDidMount } from './lifecycle';
+import { insertNode } from './renderer/dom';
+import { equal } from './equal';
+import { constructComp, createCompNode, updateCompNode } from './CompNode';
+import { constructHook, createHookNode } from './HookNode';
+import { CompNode, VNode, InulaHTMLNode, HookNode, ChildrenNode } from './types';
+import { createContextNode, updateContextNode } from './ContextNode';
+import { InulaNodeType } from '@openinula/next-shared';
+import { createChildrenNode, updateChildrenNode } from './ChildrenNode';
+import { createForNode, updateForChildren, updateForNode } from './MutableNode/ForNode';
+import { createExpNode, updateExpNode } from './MutableNode/ExpNode';
+import { createCondNode, updateCondChildren, updateCondNode } from './MutableNode/CondNode';
+
+export * from './renderer/dom';
+export * from './CompNode';
+export * from './ContextNode';
+export * from './MutableNode/ForNode';
+export * from './MutableNode/ExpNode';
+export * from './MutableNode/CondNode';
+
+export type FunctionComponent = (props: Record<PropertyKey, unknown>) => CompNode | HookNode;
+
+export function render(compFn: FunctionComponent, container: HTMLElement): void {
+  if (container == null) {
+    throw new Error('Render target is empty. Please provide a valid DOM element.');
+  }
+  container.innerHTML = '';
+  const node = Comp(compFn);
+  insertNode(container as InulaHTMLNode, node, 0);
+  runDidMount();
+}
+
+// export function unmount(container: InulaHTMLNode): void {
+//   const node = container.firstChild;
+//   if (node) {
+//     removeNode(node);
+//   }
+// }
+
+export function untrack<V>(callback: () => V): V {
+  return callback();
+}
+
+export let currentComp: CompNode | HookNode | null = null;
+
+export function inMount(): boolean {
+  return !!currentComp;
+}
+
+interface CompUpdater {
+  updateState: (bit: number) => void;
+  updateProp: (propName: string, newValue: unknown) => void;
+  getUpdateViews: () => [HTMLElement[], (bit: number) => HTMLElement[]];
+  updateDerived: (newValue: unknown, bit: number) => void;
+}
+
+export function Comp(compFn: FunctionComponent, props: Record<string, unknown> = {}): CompNode {
+  return mountNode(() => createCompNode(), compFn, props);
+}
+
+function mountNode<T extends CompNode | HookNode>(
+  ctor: () => T,
+  compFn: FunctionComponent,
+  props: Record<string, unknown>
+): T {
+  const compNode = ctor();
+  const prevNode = currentComp;
+  try {
+    currentComp = compNode;
+    compFn(props);
+    // eslint-disable-next-line no-useless-catch
+  } catch (err) {
+    throw err;
+  } finally {
+    currentComp = prevNode;
+  }
+  return compNode;
+}
+
+export function createComponent(compUpdater: CompUpdater): CompNode {
+  if (!currentComp || currentComp.__type !== InulaNodeType.Comp) {
+    throw new Error('Should not call createComponent outside the component function');
+  }
+  constructComp(currentComp, compUpdater);
+  return currentComp;
+}
+
+export function notCached(node: VNode, cacheId: string, cacheValues: unknown[]): boolean {
+  if (!cacheValues || !cacheValues.length) return false;
+  if (!node.$nonkeyedCache) {
+    node.$nonkeyedCache = {};
+  }
+  if (!equal(cacheValues, node.$nonkeyedCache[cacheId])) {
+    node.$nonkeyedCache[cacheId] = cacheValues;
+    return true;
+  }
+  return false;
+}
+
+export function didMount(fn: () => void) {
+  throw new Error('lifecycle should be compiled, check the babel plugin');
+}
+
+export function willUnmount(fn: () => void) {
+  throw new Error('lifecycle should be compiled, check the babel plugin');
+}
+
+export function didUnMount(fn: () => void) {
+  throw new Error('lifecycle should be compiled, check the babel plugin');
+}
+
+export function useHook(hookFn: (props: Record<string, unknown>) => HookNode, params: unknown[], bitMap: number) {
+  if (currentComp) {
+    const props = params.reduce<Record<string, unknown>>((obj, val, idx) => ({ ...obj, [`p${idx}`]: val }), {});
+    // if there is the currentComp means we are mounting the component tree
+    return mountNode(() => createHookNode(currentComp!, bitMap), hookFn, props);
+  }
+  throw new Error('useHook must be called within a component');
+}
+
+export function createHook(compUpdater: CompUpdater): HookNode {
+  if (!currentComp || currentComp.__type !== InulaNodeType.Hook) {
+    throw new Error('Should not call createComponent outside the component function');
+  }
+  constructHook(currentComp, compUpdater);
+  return currentComp;
+}
+
+export function runOnce(fn: () => void): void {
+  if (currentComp) {
+    fn();
+  }
+}
+
+export function createNode(type: InulaNodeType, ...args: unknown[]): VNode | ChildrenNode {
+  switch (type) {
+    case InulaNodeType.Context:
+      return createContextNode(...(args as Parameters<typeof createContextNode>));
+    case InulaNodeType.Children:
+      return createChildrenNode(...(args as Parameters<typeof createChildrenNode>));
+    case InulaNodeType.Comp:
+      return createCompNode(...(args as Parameters<typeof createCompNode>));
+    case InulaNodeType.Hook:
+      return createHookNode(...(args as Parameters<typeof createHookNode>));
+    case InulaNodeType.For:
+      return createForNode(...(args as Parameters<typeof createForNode>));
+    case InulaNodeType.Cond:
+      return createCondNode(...(args as Parameters<typeof createCondNode>));
+    case InulaNodeType.Exp:
+      return createExpNode(...(args as Parameters<typeof createExpNode>));
+    default:
+      throw new Error(`Unsupported node type: ${type}`);
+  }
+}
+
+export function updateNode(...args: unknown[]) {
+  const node = args[0] as VNode;
+  switch (node.__type) {
+    case InulaNodeType.Context:
+      updateContextNode(...(args as Parameters<typeof updateContextNode>));
+      break;
+    case InulaNodeType.Children:
+      updateChildrenNode(...(args as Parameters<typeof updateChildrenNode>));
+      break;
+    case InulaNodeType.For:
+      updateForNode(...(args as Parameters<typeof updateForNode>));
+      break;
+    case InulaNodeType.Cond:
+      updateCondNode(...(args as Parameters<typeof updateCondNode>));
+      break;
+    case InulaNodeType.Exp:
+      updateExpNode(...(args as Parameters<typeof updateExpNode>));
+      break;
+    case InulaNodeType.Comp:
+    case InulaNodeType.Hook:
+      updateCompNode(...(args as Parameters<typeof updateCompNode>));
+      break;
+    default:
+      throw new Error(`Unsupported node type: ${node.__type}`);
+  }
+}
+
+export function updateChildren(...args: unknown[]) {
+  const node = args[0] as VNode;
+  switch (node.__type) {
+    case InulaNodeType.For:
+      updateForChildren(...(args as Parameters<typeof updateForChildren>));
+      break;
+    case InulaNodeType.Cond:
+      updateCondChildren(...(args as Parameters<typeof updateCondChildren>));
+      break;
+    default:
+      throw new Error(`Unsupported node type: ${node.__type}`);
+  }
+}
+
+export { initContextChildren, createContext, useContext } from './ContextNode';
+export { initCompNode } from './CompNode';
+export { emitUpdate } from './HookNode';
--- a/packages/inula-next/src/lifecycle.ts
+++ b/packages/inula-next/src/lifecycle.ts
@ -0,0 +1,41 @@
+import { VNode, ScopedLifecycle } from './types';
+
+let DidMountStore: ScopedLifecycle;
+const WillUnmountStore: ScopedLifecycle[] = [];
+const DidUnmountStore: ScopedLifecycle[] = [];
+
+export const addWillUnmount = (node: VNode, func: (node: VNode) => void): void => {
+  const willUnmountStore = WillUnmountStore;
+  const currentStore = willUnmountStore[willUnmountStore.length - 1];
+  if (!currentStore) return;
+  currentStore.push(() => func(node));
+};
+
+export const addDidUnmount = (node: VNode, func: (node: VNode) => void): void => {
+  const didUnmountStore = DidUnmountStore;
+  const currentStore = didUnmountStore[didUnmountStore.length - 1];
+  if (!currentStore) return;
+  currentStore.push(() => func(node));
+};
+export const addDidMount = (node: VNode, func: (node: VNode) => void): void => {
+  if (!DidMountStore) DidMountStore = [];
+  DidMountStore.push(() => func(node));
+};
+
+export const runDidMount = (): void => {
+  const didMountStore = DidMountStore;
+  if (!didMountStore || didMountStore.length === 0) return;
+  for (let i = didMountStore.length - 1; i >= 0; i--) {
+    didMountStore[i]();
+  }
+  DidMountStore = [];
+};
+
+export function startUnmountScope() {
+  WillUnmountStore.push([]);
+  DidUnmountStore.push([]);
+}
+
+export function endUnmountScope() {
+  return [WillUnmountStore.pop(), DidUnmountStore.pop()];
+}
--- a/packages/inula-next/src/renderer/dom.ts
+++ b/packages/inula-next/src/renderer/dom.ts
@ -0,0 +1,222 @@
+import { getFlowIndexFromNodes, appendNodesWithIndex, addParentEl } from '../InulaNode';
+import { equal } from '../equal';
+import { InulaHTMLNode, TextNode, InulaNode } from '../types';
+
+const delegatedEvents = new Set<string>();
+
+/**
+ * @brief Shortcut for document.createElement
+ * @param tag
+ * @returns HTMLElement
+ */
+export function createElement(tag: string): HTMLElement {
+  return document.createElement(tag);
+}
+
+/**
+ * @brief Shorten document.createTextNode
+ * @param value
+ * @returns Text
+ */
+export function createTextNode(value: string, deps?: unknown[]) {
+  const node = document.createTextNode(value) as unknown as TextNode;
+  if (deps) node.deps = deps;
+  return node;
+}
+
+/**
+ * @brief Update text node and check if the value is changed
+ * @param node
+ * @param value
+ */
+export function updateText(node: TextNode, valueFunc: () => string, deps: unknown[]) {
+  if (equal(deps, node.deps)) return;
+  const value = valueFunc();
+  node.textContent = value;
+  node.deps = deps;
+}
+
+function cache(el: HTMLElement, key: string, deps: any[]): boolean {
+  if (deps.length === 0) return false;
+  const cacheKey = `$${key}`;
+  if (equal(deps, (el as any)[cacheKey])) return true;
+  (el as any)[cacheKey] = deps;
+  return false;
+}
+
+const isCustomProperty = (name: string): boolean => name.startsWith('--');
+
+interface StyleObject {
+  [key: string]: string | number | null | undefined;
+}
+
+export function setStyle(el: InulaHTMLNode, newStyle: CSSStyleDeclaration): void {
+  const style = el.style;
+  const prevStyle = el._prevStyle || {};
+
+  // Remove styles that are no longer present
+  for (const key in prevStyle) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (prevStyle.hasOwnProperty(key) && (newStyle == null || !newStyle.hasOwnProperty(key))) {
+      if (isCustomProperty(key)) {
+        style.removeProperty(key);
+      } else if (key === 'float') {
+        style.cssFloat = '';
+      } else {
+        style[key] = '';
+      }
+    }
+  }
+
+  // Set new or changed styles
+  for (const key in newStyle) {
+    const prevValue = prevStyle[key];
+    const newValue = newStyle[key];
+    // eslint-disable-next-line no-prototype-builtins
+    if (newStyle.hasOwnProperty(key) && newValue !== prevValue) {
+      if (newValue == null || newValue === '' || typeof newValue === 'boolean') {
+        if (isCustomProperty(key)) {
+          style.removeProperty(key);
+        } else if (key === 'float') {
+          style.cssFloat = '';
+        } else {
+          style[key] = '';
+        }
+      } else if (isCustomProperty(key)) {
+        style.setProperty(key, newValue);
+      } else if (key === 'float') {
+        style.cssFloat = newValue;
+      } else {
+        el.style[key] = newValue;
+      }
+    }
+  }
+
+  // Store the new style for future comparisons
+  el._prevStyle = { ...newStyle };
+}
+
+/**
+ * @brief Plainly set dataset
+ * @param el
+ * @param value
+ */
+
+export function setDataset(el: HTMLElement, value: { [key: string]: string }): void {
+  Object.assign(el.dataset, value);
+}
+
+/**
+ * @brief Set HTML property with checking value equality first
+ */
+
+export function setHTMLProp(el: HTMLElement, key: string, valueFunc: () => any, deps: any[]): void {
+  // ---- 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 as any)[key] = valueFunc();
+}
+
+/**
+ * @brief Plainly set HTML properties
+ */
+
+export function setHTMLProps(el: InulaHTMLNode, value: HTMLAttrsObject): void {
+  Object.entries(value).forEach(([key, v]) => {
+    if (key === 'style') return setStyle(el, v as CSSStyleDeclaration);
+    if (key === 'dataset') return setDataset(el, v as { [key: string]: string });
+    setHTMLProp(el, key, () => v, []);
+  });
+}
+
+/**
+ * @brief Set HTML attribute with checking value equality first
+ * @param el
+ * @param key
+ * @param valueFunc
+ * @param deps
+ */
+
+export function setHTMLAttr(el: InulaHTMLNode, key: string, valueFunc: () => string, deps: any[]): void {
+  if (cache(el, key, deps)) return;
+  el.setAttribute(key, valueFunc());
+}
+
+interface HTMLAttrsObject {
+  [key: string]: string | number | boolean | object | undefined;
+  style?: CSSStyleDeclaration;
+  dataset?: { [key: string]: string };
+}
+
+/**
+ * @brief Plainly set HTML attributes
+ * @param el
+ * @param value
+ */
+
+export function setHTMLAttrs(el: InulaHTMLNode, value: HTMLAttrsObject): void {
+  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: InulaHTMLNode, key: string, value: EventListener): void {
+  const prevEvent = el[`$on${key}`];
+  if (prevEvent) el.removeEventListener(key, prevEvent);
+  el.addEventListener(key, value);
+  el[`$on${key}`] = value;
+}
+
+function eventHandler(e: Event): void {
+  const key = `$$${e.type}`;
+  for (const node of e.composedPath()) {
+    if (node[key]) node[key](e);
+    if (e.cancelBubble) return;
+  }
+}
+
+export function delegateEvent(el: InulaHTMLNode, key: string, value: EventListener): void {
+  if (el[`$$${key}`] === value) return;
+  el[`$$${key}`] = value;
+  if (!delegatedEvents.has(key)) {
+    delegatedEvents.add(key);
+    document.addEventListener(key, eventHandler);
+  }
+}
+
+export function appendNode(el: InulaHTMLNode, child: InulaHTMLNode) {
+  // ---- Set _$nodes
+  if (!el._$nodes) el._$nodes = Array.from(el.childNodes) as InulaHTMLNode[];
+  el._$nodes.push(child);
+
+  el.appendChild(child);
+}
+
+/**
+ * @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: InulaHTMLNode, node: InulaNode, position: number): void {
+  // ---- Set _$nodes
+  if (!el._$nodes) el._$nodes = Array.from(el.childNodes) as InulaHTMLNode[];
+  el._$nodes.splice(position, 0, node);
+
+  // ---- Insert nodes' elements
+  const flowIdx = getFlowIndexFromNodes(el._$nodes, node);
+  appendNodesWithIndex([node], el, flowIdx);
+  // ---- Set parentEl
+  addParentEl([node], el);
+}
--- a/packages/inula-next/src/scheduler.ts
+++ b/packages/inula-next/src/scheduler.ts
@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+export function schedule(task: () => void) {
+  p.then(task);
+}
--- a/packages/inula-next/src/types.ts
+++ b/packages/inula-next/src/types.ts
@ -0,0 +1,145 @@
+/*
+ * 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 { InulaNodeType } from '@openinula/next-shared';
+
+export type Lifecycle = () => void;
+export type ScopedLifecycle = Lifecycle[];
+
+export { type Properties as CSSProperties } from 'csstype';
+
+export type InulaNode = VNode | TextNode | InulaHTMLNode;
+
+export interface VNode {
+  __type: InulaNodeType;
+  _$nodes: InulaNode[];
+  _$parentEl?: InulaHTMLNode;
+  $nonkeyedCache?: Record<string, unknown[]>;
+}
+
+export interface TextNode extends Text {
+  deps: unknown[];
+}
+
+export interface InulaHTMLNode extends HTMLElement {
+  _$nodes: InulaNode[];
+  _prevStyle?: CSSStyleDeclaration;
+  [key: `$on${string}`]: EventListener
+  [key: `$$${string}`]: EventListener
+}
+
+export interface ComposableNode<Props extends Record<PropertyKey, any> = Record<PropertyKey, any>> extends VNode {
+  __type: InulaNodeType;
+  parent?: ComposableNode;
+  props: Props;
+  cache?: Record<string, any>;
+  _$nodes: InulaHTMLNode[];
+  mounting?: boolean;
+  _$unmounted?: boolean;
+  _$forwardPropsSet?: Set<HTMLElement | ComposableNode>;
+  _$forwardPropsId?: string[];
+  _$contentKey?: string;
+  _$depNumsToUpdate?: number[];
+  updateState: (bit: number) => void;
+  updateProp: (...args: any[]) => void;
+  updateContext?: (context: any, key: string, value: any) => void;
+  getUpdateViews?: () => any;
+  didUnmount?: () => void;
+  willUnmount?: () => void;
+  didMount?: () => void;
+  updateView?: (depNum: number) => void;
+}
+
+export interface CompNode extends ComposableNode {
+  __type: InulaNodeType.Comp;
+}
+
+export interface HookNode extends ComposableNode {
+  __type: InulaNodeType.Hook;
+  bitmap: number;
+  parent: HookNode | CompNode;
+  value?: () => unknown;
+}
+
+/**
+ * @brief Mutable node is a node that this._$nodes can be changed, things need to pay attention:
+ *  1. The context 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
+ */
+export interface MutableNode<UnmountShape = ScopedLifecycle> extends VNode {
+  willUnmountFuncs: UnmountShape;
+  didUnmountFuncs: UnmountShape;
+  savedContextNodes: Map<symbol, ContextNode<any>> | null;
+}
+
+export interface CondNode extends MutableNode {
+  cond: number;
+  didntChange: boolean;
+  __type: InulaNodeType.Cond;
+  depNum: number;
+  condFunc: (condNode: CondNode) => VNode[];
+  /**
+   * @brief assigned by condNode.condFunc in compile time
+   * @param changed
+   * @returns
+   */
+  updateFunc?: (changed: number) => void;
+  _$parentEl?: InulaHTMLNode;
+}
+
+export interface ExpNode extends MutableNode {
+  __type: InulaNodeType.Exp;
+  _$nodes: InulaNode[];
+  _$parentEl?: InulaHTMLNode;
+  deps: unknown[];
+}
+
+export interface ForNode<T> extends MutableNode<Map<number, ScopedLifecycle>>, VNode {
+  array: T[];
+  __type: InulaNodeType.For;
+  depNum: number;
+  keys: number[];
+  nodeFunc: (item: T, idx: number, updateArr: any[]) => VNode[];
+  _$nodes: InulaNode[];
+  _$parentEl?: InulaHTMLNode;
+  nodesMap: Map<number, InulaNode[]>;
+  updateArr: any[];
+}
+
+export interface Context<V extends Record<PropertyKey, any> | null> {
+  id: symbol;
+  value: V | null;
+}
+
+export interface ContextNode<V extends Record<PropertyKey, any>> {
+  value: V;
+  context: Context<V>;
+  __type: InulaNodeType.Context;
+  depMap: Record<keyof V, Array<unknown>>;
+  _$nodes: VNode[];
+  _$unmounted?: boolean;
+  consumers: Set<CompNode | HookNode>;
+  prevValue?: V | null;
+  prevContextNode?: ContextNode<V> | null;
+}
+
+export type Updater = (changed: number) => void;
+
+export interface ChildrenNode {
+  __type: InulaNodeType.Children;
+  childrenFunc: (addUpdate: (updater: Updater) => void) => VNode[];
+  updaters: Set<Updater>;
+}
--- a/packages/inula-next/test/components.test.tsx
+++ b/packages/inula-next/test/components.test.tsx
@ -0,0 +1,247 @@
+/*
+ * 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 } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+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 forwarding', ({ container }) => {
+      let ref: HTMLElement;
+
+      function App() {
+        let count = 0;
+        let _ref: HTMLElement;
+
+        didMount(() => {
+          ref = _ref;
+        });
+
+        return <Input ref={_ref}>test</Input>;
+      }
+
+      function Input({ ref }) {
+        return <input ref={ref} />;
+      }
+
+      render(App, container);
+      expect(ref).toBeInstanceOf(HTMLInputElement);
+    });
+
+    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).toHaveBeenCalledTimes(1);
+    });
+
+    it('should support comp ref exposing', ({ container }) => {
+      let ref: HTMLElement;
+      const fn = vi.fn();
+
+      function App() {
+        let count = 0;
+        let _ref;
+        didMount(() => {
+          ref = _ref;
+          _ref.fn();
+        });
+        return <Input ref={_ref}>test</Input>;
+      }
+
+      function Input({ ref }) {
+        let input;
+        didMount(() => {
+          ref({ fn, input });
+        });
+        return <input ref={input} />;
+      }
+
+      render(App, container);
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(ref.input).toBeInstanceOf(HTMLInputElement);
+    });
+  });
+
+  describe('composition', () => {
+    it('should update prop', ({ container }) => {
+      let update: (name: string) => void;
+
+      function App() {
+        let name = 'child';
+        update = (val: string) => {
+          name = val;
+        };
+        return <Child name={name} />;
+      }
+
+      function Child({ name }: { name: string }) {
+        return <div>name is {name}</div>;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>name is child</div>');
+      update('new');
+      expect(container.innerHTML).toBe('<div>name is new</div>');
+    });
+  });
+  describe('nested component', () => {
+    it('should render sub component using parent state', ({ container }) => {
+      function App() {
+        let count = 0;
+
+        function Heading() {
+          return <h1>{count}</h1>;
+        }
+
+        return <Heading />;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<h1>0</h1>');
+    });
+
+    it('should update nested component when parent state changes', ({ container }) => {
+      let setCount: (n: number) => void;
+
+      function App() {
+        let count = 0;
+        setCount = (n: number) => {
+          count = n;
+        };
+
+        function Counter() {
+          return <div>Count: {count}</div>;
+        }
+
+        return <Counter />;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Count: 0</div>');
+
+      setCount(5);
+      expect(container.innerHTML).toBe('<div>Count: 5</div>');
+    });
+
+    it('should pass props through multiple levels of nesting', ({ container }) => {
+      function App() {
+        let name = 'Alice';
+
+        function Parent({ children }) {
+          return (
+            <div className="parent">
+              <h2>Parent</h2>
+              {children}
+            </div>
+          );
+        }
+
+        function Child({ name }: { name: string }) {
+          return <div className="child">Hello, {name}!</div>;
+        }
+
+        return (
+          <Parent>
+            <Child name={name} />
+          </Parent>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe(
+        '<div class="parent"><h2>Parent</h2><div class="child">Hello, Alice!</div></div>'
+      );
+    });
+
+    it('should handle sibling nested components with independent state', ({ container }) => {
+      let incrementA: () => void;
+      let incrementB: () => void;
+
+      function App() {
+        let a = 0;
+        let b = 0;
+        incrementA = () => {
+          a += 1;
+        };
+        incrementB = () => {
+          b += 1;
+        };
+
+        function Counter({ name }: { name: string }) {
+          const value = name === 'A' ? a : b;
+          return (
+            <div>
+              Counter {name}: {value}
+            </div>
+          );
+        }
+
+        return (
+          <div>
+            <Counter name="A" />
+            <Counter name="B" />
+          </div>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div><div>Counter A: 0</div><div>Counter B: 0</div></div>');
+
+      incrementA();
+      expect(container.innerHTML).toBe('<div><div>Counter A: 1</div><div>Counter B: 0</div></div>');
+
+      incrementB();
+      expect(container.innerHTML).toBe('<div><div>Counter A: 1</div><div>Counter B: 1</div></div>');
+    });
+  });
+});
--- a/packages/inula-next/test/computed.test.tsx
+++ b/packages/inula-next/test/computed.test.tsx
@ -0,0 +1,820 @@
+/*
+ * 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, didMount } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('Computed Properties', () => {
+  describe('Basic Functionality', () => {
+    it('should correctly compute a value based on a single dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let count = 0;
+        const doubleCount = count * 2;
+
+        function onClick() {
+          count = count + 1;
+        }
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return (
+          <div>
+            <p data-testid="result">{doubleCount}</p>
+            <button onClick={onClick}>Increment</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('0');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('2');
+    });
+
+    it('should update computed value when dependency changes', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let width = 5;
+        let height = 10;
+        const area = width * height;
+
+        function onClick() {
+          width = width + 1;
+        }
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return (
+          <div>
+            <p data-testid="result">{area}</p>
+            <button onClick={onClick}>Increase Width</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('50');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('60');
+    });
+
+    it('Should correctly compute and render a derived string state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let firstName = 'John';
+        let lastName = 'Doe';
+        const fullName = `${firstName} ${lastName}`;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateName() {
+          firstName = 'Jane';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">{fullName}</p>
+            <button onClick={updateName}>Update Name</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('John Doe');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Jane Doe');
+    });
+
+    it('Should correctly compute and render a derived number state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let price = 10;
+        let quantity = 2;
+        const total = price * quantity;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function increaseQuantity() {
+          quantity += 1;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Total: ${total}</p>
+            <button onClick={increaseQuantity}>Add Item</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Total: $20');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Total: $30');
+    });
+
+    it('Should correctly compute and render a derived boolean state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let age = 17;
+        const isAdult = age >= 18;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function increaseAge() {
+          age += 1;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Is Adult: {isAdult ? 'Yes' : 'No'}</p>
+            <button onClick={increaseAge}>Have Birthday</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Is Adult: No');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Is Adult: Yes');
+    });
+
+    it('Should correctly compute and render a derived array state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers = [1, 2, 3, 4, 5];
+        const evenNumbers = numbers.filter(n => n % 2 === 0);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function addNumber() {
+          numbers.push(6);
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Even numbers: {evenNumbers.join(', ')}</p>
+            <button onClick={addNumber}>Add Number</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Even numbers: 2, 4');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Even numbers: 2, 4, 6');
+    });
+
+    it('Should correctly compute and render a derived object state', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let user = { name: 'John', age: 30 };
+        const userSummary = { ...user, isAdult: user.age >= 18 };
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateAge() {
+          user.age = 17;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">
+              {userSummary.name} is {userSummary.isAdult ? 'an adult' : 'not an adult'}
+            </p>
+            <button onClick={updateAge}>Update Age</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('John is an adult');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('John is not an adult');
+    });
+
+    it('Should correctly compute state based on array index', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let items = ['Apple', 'Banana', 'Cherry'];
+        let index = 0;
+        const currentItem = items[index];
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function nextItem() {
+          index = (index + 1) % items.length;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Current item: {currentItem}</p>
+            <button onClick={nextItem}>Next Item</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Current item: Apple');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Current item: Banana');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Current item: Cherry');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Current item: Apple');
+    });
+  });
+
+  describe('Multiple Dependencies', () => {
+    it('should compute correctly with multiple dependencies', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let x = 5;
+        let y = 10;
+        let z = 2;
+        const result = x * y + z;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return <p data-testid="result">{result}</p>;
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('52');
+    });
+
+    it.fails('should compute correctly with functional dependencies', ({ container }) => {
+      function App() {
+        let x = 1;
+        const double = x * 2;
+        const quadruple = double * 2;
+        const getQuadruple = () => quadruple;
+        const result = getQuadruple() + x;
+        return <div>{result}</div>;
+      }
+
+      render(App, container);
+
+      expect(container.innerHTML).toBe('<div>5</div>');
+    });
+
+    it('should update when any dependency changes', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let x = 5;
+        let y = 10;
+        const sum = x + y;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function onClickX() {
+          x = x + 1;
+        }
+
+        function onClickY() {
+          y = y + 1;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">{sum}</p>
+            <button onClick={onClickX}>Increase X</button>
+            <button onClick={onClickY}>Increase Y</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('15');
+      container.querySelectorAll('button')[0].click();
+      expect(resultElement.textContent).toBe('16');
+      container.querySelectorAll('button')[1].click();
+      expect(resultElement.textContent).toBe('17');
+    });
+    it('Should correctly compute and render a derived string state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let firstName = 'John';
+        let lastName = 'Doe';
+        let title = 'Mr.';
+        const fullName = `${title} ${firstName} ${lastName}`;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateName() {
+          firstName = 'Jane';
+          title = 'Ms.';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">{fullName}</p>
+            <button onClick={updateName}>Update Name</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Mr. John Doe');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Ms. Jane Doe');
+    });
+
+    it('Should correctly compute and render a derived number state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let length = 5;
+        let width = 3;
+        let height = 2;
+        const volume = length * width * height;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateDimensions() {
+          length += 1;
+          width += 2;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Volume: {volume}</p>
+            <button onClick={updateDimensions}>Update Dimensions</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Volume: 30');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Volume: 60');
+    });
+
+    it('Should correctly compute and render a derived boolean state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let age = 20;
+        let hasLicense = false;
+        let hasCar = true;
+        const canDrive = age >= 18 && hasLicense && hasCar;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateStatus() {
+          hasLicense = true;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Can Drive: {canDrive ? 'Yes' : 'No'}</p>
+            <button onClick={updateStatus}>Get License</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Can Drive: No');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Can Drive: Yes');
+    });
+
+    it('Should correctly compute and render a derived array state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers1 = [1, 2, 3];
+        let numbers2 = [4, 5, 6];
+        let filterEven = true;
+        const result = [...numbers1, ...numbers2].filter(n => (filterEven ? n % 2 === 0 : n % 2 !== 0));
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function toggleFilter() {
+          filterEven = !filterEven;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Filtered numbers: {result.join(', ')}</p>
+            <button onClick={toggleFilter}>Toggle Filter</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Filtered numbers: 2, 4, 6');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Filtered numbers: 1, 3, 5');
+    });
+
+    it('Should correctly compute and render a derived object state from multi dependency', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let user = { name: 'John', age: 30 };
+        let settings = { theme: 'dark', fontSize: 14 };
+        let isLoggedIn = true;
+        const userProfile = {
+          ...user,
+          ...settings,
+          status: isLoggedIn ? 'Online' : 'Offline',
+        };
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateStatus() {
+          isLoggedIn = false;
+          settings.theme = 'light';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">
+              {userProfile.name} ({userProfile.age}) - {userProfile.status} - Theme: {userProfile.theme}
+            </p>
+            <button onClick={updateStatus}>Logout</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('John (30) - Online - Theme: dark');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('John (30) - Offline - Theme: light');
+    });
+  });
+
+  describe('Advanced Computed States', () => {
+    it('Should support basic arithmetic operations', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let a = 10;
+        let b = 5;
+        const sum = a + b;
+        const difference = a - b;
+        const product = a * b;
+        const quotient = a / b;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return (
+          <div data-testid="result">
+            <p>Sum: {sum}</p>
+            <p>Difference: {difference}</p>
+            <p>Product: {product}</p>
+            <p>Quotient: {quotient}</p>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.innerHTML).toBe('<p>Sum: 15</p><p>Difference: 5</p><p>Product: 50</p><p>Quotient: 2</p>');
+    });
+
+    it('Should support array indexing', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let arr = [10, 20, 30, 40, 50];
+        let index = 2;
+        const value = arr[index];
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateIndex() {
+          index = 4;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Value: {value}</p>
+            <button onClick={updateIndex}>Update Index</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Value: 30');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Value: 50');
+    });
+
+    it('Should support property access', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let obj = { name: 'John', age: 30 };
+        const name = obj.name;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateName() {
+          obj.name = 'Jane';
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Name: {name}</p>
+            <button onClick={updateName}>Update Name</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Name: John');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Name: Jane');
+    });
+
+    it('Should support function calls', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers = [1, 2, 3, 4, 5];
+        const sum = numbers.reduce((a, b) => a + b, 0);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return <p data-testid="result">Sum: {sum}</p>;
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Sum: 15');
+    });
+
+    it('Should support various number operations', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let num = 3.14159;
+        const rounded = Math.round(num);
+        const floored = Math.floor(num);
+        const ceiled = Math.ceil(num);
+        const squared = Math.pow(num, 2);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return (
+          <div data-testid="result">
+            <p>Rounded: {rounded}</p>
+            <p>Floored: {floored}</p>
+            <p>Ceiled: {ceiled}</p>
+            <p>Squared: {squared.toFixed(2)}</p>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.innerHTML).toBe('<p>Rounded: 3</p><p>Floored: 3</p><p>Ceiled: 4</p><p>Squared: 9.87</p>');
+    });
+
+    it('Should support map operations', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let numbers = [1, 2, 3, 4, 5];
+        const squaredNumbers = numbers.map(n => n * n);
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        return <p data-testid="result">Squared: {squaredNumbers.join(', ')}</p>;
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Squared: 1, 4, 9, 16, 25');
+    });
+
+    it('Should support conditional expressions', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let age = 20;
+        let hasLicense = true;
+        const canDrive = age >= 18 ? (hasLicense ? 'Yes' : 'No, needs license') : 'No, too young';
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function updateAge() {
+          age = 16;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">Can Drive: {canDrive}</p>
+            <button onClick={updateAge}>Update Age</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('Can Drive: Yes');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('Can Drive: No, too young');
+    });
+  });
+
+  describe('Nested Computed Properties', () => {
+    it('should handle nested computed properties correctly', ({ container }) => {
+      let resultElement: HTMLElement;
+
+      function App() {
+        let base = 5;
+        const square = base * base;
+        const cube = square * base;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+        });
+
+        function onClick() {
+          base = base + 1;
+        }
+
+        return (
+          <div>
+            <p data-testid="result">{cube}</p>
+            <button onClick={onClick}>Increase Base</button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      expect(resultElement.textContent).toBe('125');
+      container.querySelector('button')!.click();
+      expect(resultElement.textContent).toBe('216');
+    });
+  });
+
+  describe('Conditional Dependence', () => {
+    it('should handle conditional dependencies correctly', ({ container }) => {
+      let resultElement: HTMLElement;
+      let toggleButton: HTMLElement;
+      let incrementValue1Button: HTMLElement;
+      let incrementValue2Button: HTMLElement;
+
+      function App() {
+        let useAlternative = false;
+        let value1 = 10;
+        let value2 = 20;
+
+        // This computed property has conditional dependencies
+        const result = useAlternative ? value2 * 2 : value1 * 2;
+
+        didMount(() => {
+          resultElement = container.querySelector('[data-testid="result"]')!;
+          toggleButton = container.querySelector('[data-testid="toggle"]')!;
+          incrementValue1Button = container.querySelector('[data-testid="increment-value1"]')!;
+          incrementValue2Button = container.querySelector('[data-testid="increment-value2"]')!;
+        });
+
+        function toggle() {
+          useAlternative = !useAlternative;
+        }
+
+        const onClick1 = () => {
+          value1 += 5;
+        };
+
+        const onClick2 = () => {
+          value2 += 5;
+        };
+        return (
+          <div>
+            <p data-testid="result">{result}</p>
+            <button data-testid="toggle" onClick={toggle}>
+              Toggle Alternative
+            </button>
+            <button data-testid="increment-value1" onClick={onClick1}>
+              Increment Value1
+            </button>
+            <button data-testid="increment-value2" onClick={onClick2}>
+              Increment Value2
+            </button>
+          </div>
+        );
+      }
+
+      render(App, container);
+
+      // Check initial state
+      expect(resultElement.textContent).toBe('20');
+
+      // Switch to alternative value
+      toggleButton.click();
+      expect(resultElement.textContent).toBe('40');
+
+      // Increment value1 (should not affect result as we're using value2)
+      incrementValue1Button.click();
+      expect(resultElement.textContent).toBe('40');
+
+      // Increment value2 (should affect result)
+      incrementValue2Button.click();
+      expect(resultElement.textContent).toBe('50');
+
+      // Switch back to original value
+      toggleButton.click();
+      expect(resultElement.textContent).toBe('30'); // value1 was incremented earlier
+    });
+  });
+});
--- a/packages/inula-next/test/conditional.test.tsx
+++ b/packages/inula-next/test/conditional.test.tsx
@ -0,0 +1,265 @@
+/*
+ * 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 } 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;
+      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;
+      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"
+    `);
+  });
+  it('should transform "and expression in and expression" to "if tag in if tag"', ({ container }) => {
+    let set: (num: number) => void;
+
+    function MyComp() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return <div>{count > 0 && count > 1 && <h1>hello world {count}</h1>}</div>;
+    }
+
+    render(MyComp, container);
+    set(0);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div></div>"`);
+    set(1);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div></div>"`);
+    set(2);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div><h1>hello world 2</h1></div>"`);
+  });
+
+  it('should not transform "and expression" whose right is identifier', ({ container }) => {
+    let set: (num: number) => void;
+
+    function MyComp() {
+      let count = 0;
+      set = val => {
+        count = val;
+      };
+      return <div>{count > 0 && count > 1 ? <h1>hello world {count}</h1> : `Empty`}</div>;
+    }
+
+    render(MyComp, container);
+    set(0);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>Empty</div>"`);
+    set(1);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>Empty</div>"`);
+    set(2);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div><h1>hello world 2</h1></div>"`);
+  });
+
+  it('should transform "condition expression in condition expression" to "if else tag in if else tag"', ({
+    container,
+  }) => {
+    let set: (num: number) => void;
+
+    function MyComp() {
+      let count = 0;
+      set = val => {
+        count = val;
+      };
+      return <div>{count > 0 ? count > 1 ? <h1>hello world {count}</h1> : 'Empty2' : 'Empty1'}</div>;
+    }
+
+    render(MyComp, container);
+    set(0);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>Empty1</div>"`);
+    set(1);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>Empty2</div>"`);
+    set(2);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div><h1>hello world 2</h1></div>"`);
+  });
+});
+
+describe('additional conditional rendering tests', () => {
+  it('Should correctly render content based on a single if condition', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return (
+        <div>
+          <if cond={count > 5}>Count is greater than 5</if>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div></div>');
+    set(6);
+    expect(container.innerHTML).toBe('<div>Count is greater than 5</div>');
+  });
+
+  it('Should correctly render content based on if-else conditions', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return (
+        <div>
+          <if cond={count % 2 === 0}>Count is even</if>
+          <else>Count is odd</else>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Count is even</div>');
+    set(1);
+    expect(container.innerHTML).toBe('<div>Count is odd</div>');
+    set(2);
+    expect(container.innerHTML).toBe('<div>Count is even</div>');
+  });
+
+  it('Should correctly render content based on if-else-if-else conditions', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return (
+        <div>
+          <if cond={count > 10}>Count is greater than 10</if>
+          <else-if cond={count > 5}>Count is greater than 5 but not greater than 10</else-if>
+          <else-if cond={count > 0}>Count is greater than 0 but not greater than 5</else-if>
+          <else>Count is 0 or negative</else>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Count is 0 or negative</div>');
+    set(3);
+    expect(container.innerHTML).toBe('<div>Count is greater than 0 but not greater than 5</div>');
+    set(7);
+    expect(container.innerHTML).toBe('<div>Count is greater than 5 but not greater than 10</div>');
+    set(11);
+    expect(container.innerHTML).toBe('<div>Count is greater than 10</div>');
+  });
+
+  it('Should correctly handle nested conditional rendering', ({ container }) => {
+    let set: (obj: { x: number; y: number }) => void;
+
+    function App() {
+      let state = { x: 0, y: 0 };
+      set = (val: { x: number; y: number }) => {
+        state = val;
+      };
+      return (
+        <div>
+          <if cond={state.x > 0}>
+            X is positive
+            <if cond={state.y > 0}>
+              <div>Both X and Y are positive</div>
+            </if>
+            <else>
+              <div>X is positive but Y is not</div>
+            </else>
+          </if>
+          <else>
+            X is not positive
+            <if cond={state.y > 0}>
+              <div>X is not positive but Y is</div>
+            </if>
+            <else>
+              <div>Neither X nor Y are positive</div>
+            </else>
+          </else>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>X is not positive<div>Neither X nor Y are positive</div></div>');
+    set({ x: 1, y: 0 });
+    expect(container.innerHTML).toBe('<div>X is positive<div>X is positive but Y is not</div></div>');
+    set({ x: 1, y: 1 });
+    expect(container.innerHTML).toBe('<div>X is positive<div>Both X and Y are positive</div></div>');
+    set({ x: 0, y: 1 });
+    expect(container.innerHTML).toBe('<div>X is not positive<div>X is not positive but Y is</div></div>');
+  });
+});
--- a/packages/inula-next/test/context.test.tsx
+++ b/packages/inula-next/test/context.test.tsx
@ -0,0 +1,349 @@
+/*
+ * 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 } from '../src';
+import { createContext, useContext } from '../src/ContextNode';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('context', () => {
+  it('should support context', ({ container }) => {
+    const TheContext = createContext({
+      theme: '',
+    });
+
+    function App() {
+      return (
+        <TheContext theme="dark">
+          <Child name="child" />
+        </TheContext>
+      );
+    }
+
+    function Child({ name }) {
+      const { theme } = useContext(TheContext);
+      return (
+        <>
+          name is {name}, theme is {theme}
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML.trim()).toBe('name is child, theme is dark');
+  });
+
+  it('should support recursive context', ({ container }) => {
+    const FileContext = createContext({
+      level: 0,
+    });
+    // Folder is the consumer and provider at same time
+    const Folder = ({ name, children }) => {
+      const { level } = useContext(FileContext);
+      return (
+        <FileContext level={level + 1}>
+          <div>
+            <h1>{`Folder: ${name}, level: ${level}`}</h1>
+            {children}
+          </div>
+        </FileContext>
+      );
+    };
+    const File = ({ name }) => {
+      const { level } = useContext(FileContext);
+
+      return <div>{`File: ${name}, level: ${level}`}</div>;
+    };
+
+    const App = () => {
+      return (
+        <Folder name="Root">
+          <File name="file1.txt" />
+          <Folder name="Subfolder 2">
+            <File name="file2.txt" />
+          </Folder>
+        </Folder>
+      );
+    };
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            <h1>
+              Folder: Root, level: 0
+            </h1>
+            <div>
+              File: file1.txt, level: 1
+            </div>
+            <div>
+              <h1>
+                Folder: Subfolder 2, level: 1
+              </h1>
+              <div>
+                File: file2.txt, level: 2
+              </div>
+            </div>
+          </div>
+        </div>
+      `);
+  });
+
+  it('should support use context in conditional node', ({ container }) => {
+    const ThemeContext = createContext('light');
+
+    function Child({ name }) {
+      const { theme } = useContext(ThemeContext);
+      return (
+        <>
+          <h1>{name}</h1>
+          <div>{theme}</div>
+        </>
+      );
+    }
+
+    let showChild;
+
+    function App() {
+      let show = false;
+      showChild = () => {
+        show = true;
+      };
+      return (
+        <>
+          <ThemeContext theme="dark">
+            <if cond={show}>
+              <Child name="True branch" />
+            </if>
+            <else>
+              <Child name="False branch" />
+            </else>
+          </ThemeContext>
+          <ThemeContext theme="light">
+            <Child name="Side branch" />
+          </ThemeContext>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<h1>False branch</h1><div>dark</div><h1>Side branch</h1><div>light</div>"`
+    );
+    showChild();
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<h1>True branch</h1><div>dark</div><h1>Side branch</h1><div>light</div>"`
+    );
+  });
+
+  it('should support use context in loop node', ({ container }) => {
+    const ItemContext = createContext(null);
+    const ThemeContext = createContext('light');
+    let addItem;
+
+    function ItemList() {
+      const items = ['Apple', 'Banana'];
+      addItem = item => {
+        items.push(item);
+      };
+      return (
+        <ThemeContext theme="dark">
+          <ul>
+            <for each={items}>
+              {item => (
+                <ItemContext item={item}>
+                  <ListItem />
+                </ItemContext>
+              )}
+            </for>
+          </ul>
+        </ThemeContext>
+      );
+    }
+
+    function ListItem() {
+      const { item } = useContext(ItemContext);
+      const { theme } = useContext(ThemeContext);
+      return <li>{`${theme} - ${item}`}</li>;
+    }
+
+    render(ItemList, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<ul><li>dark - Apple</li><li>dark - Banana</li></ul>"`);
+    addItem('grape');
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<ul><li>dark - Apple</li><li>dark - Banana</li><li>dark - grape</li></ul>"`
+    );
+  });
+
+  it('should update context value', ({ container }) => {
+    const CountContext = createContext(0);
+
+    function Counter() {
+      const { count } = useContext(CountContext);
+      return <div>Count: {count}</div>;
+    }
+
+    function App({ initialCount = 0 }) {
+      let count = initialCount;
+      const onClick = () => (count = count + 1);
+      return (
+        <CountContext count={count}>
+          <Counter />
+          <button onClick={onClick}>Increment</button>
+        </CountContext>
+      );
+    }
+
+    render(App, container);
+    expect(container.querySelector('div').textContent).toBe('Count: 0');
+
+    container.querySelector('button').click();
+    expect(container.querySelector('div').textContent).toBe('Count: 1');
+  });
+  it('Should correctly create and provide context', ({ container }) => {
+    const ThemeContext = createContext('light');
+
+    function App() {
+      return (
+        <ThemeContext theme="dark">
+          <Child />
+        </ThemeContext>
+      );
+    }
+
+    function Child() {
+      const { theme } = useContext(ThemeContext);
+      return <div>Current theme: {theme}</div>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Current theme: dark</div>');
+  });
+
+  it('Should correctly consume context in child components', ({ container }) => {
+    const UserContext = createContext({ name: '', age: 0 });
+
+    function App() {
+      return (
+        <UserContext name="Alice" age={30}>
+          <Parent />
+        </UserContext>
+      );
+    }
+
+    function Parent() {
+      return (
+        <div>
+          <Child1 />
+          <Child2 />
+        </div>
+      );
+    }
+
+    function Child1() {
+      const { name } = useContext(UserContext);
+      return <div>Name: {name}</div>;
+    }
+
+    function Child2() {
+      const { age } = useContext(UserContext);
+      return <div>Age: {age}</div>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div><div>Name: Alice</div><div>Age: 30</div></div>');
+  });
+
+  it('Should correctly update context and re-render consumers', ({ container }) => {
+    const CountContext = createContext(0);
+
+    function App() {
+      let count = 0;
+      const increment = () => {
+        count += 1;
+      };
+
+      return (
+        <CountContext count={count}>
+          <Counter />
+          <button onClick={increment}>Increment</button>
+        </CountContext>
+      );
+    }
+
+    function Counter() {
+      const { count } = useContext(CountContext);
+      return <div>Count: {count}</div>;
+    }
+
+    render(App, container);
+    expect(container.querySelector('div').textContent).toBe('Count: 0');
+
+    container.querySelector('button').click();
+    expect(container.querySelector('div').textContent).toBe('Count: 1');
+  });
+
+  it('Should handle nested contexts correctly', ({ container }) => {
+    const ThemeContext = createContext('light');
+    const LanguageContext = createContext('en');
+
+    function App() {
+      return (
+        <ThemeContext theme="dark">
+          <LanguageContext language="fr">
+            <Child />
+          </LanguageContext>
+        </ThemeContext>
+      );
+    }
+
+    function Child() {
+      const { theme } = useContext(ThemeContext);
+      const { language } = useContext(LanguageContext);
+      return (
+        <div>
+          Theme: {theme}, Language: {language}
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Theme: dark, Language: fr</div>');
+  });
+
+  it('Should use default value when no provider is present', ({ container }) => {
+    const DefaultContext = createContext({ message: 'Default message' });
+
+    function App() {
+      return <Child />;
+    }
+
+    function Child() {
+      const { message } = useContext(DefaultContext);
+      return <div>{message}</div>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Default message</div>');
+  });
+});
--- a/packages/inula-next/test/customHook.test.tsx
+++ b/packages/inula-next/test/customHook.test.tsx
@ -0,0 +1,738 @@
+/*
+ * 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 { didMount, didUnMount, render } from '../src';
+import { useContext, createContext } from '../src/ContextNode';
+
+// 模拟调度器
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+// 自定义 Hook
+function useCounter(initialValue = 0) {
+  let count = initialValue;
+  const setCount = () => {
+    count += 1;
+  };
+  return { count, setCount };
+}
+
+describe('Custom Hook Tests', () => {
+  // 1. Basic Functionality
+  describe('Basic Functionality', () => {
+    it('should initialize with the correct value', ({ container }) => {
+      function TestComponent() {
+        const { count } = useCounter(5);
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>5</div>');
+    });
+
+    it('should update state correctly', ({ container }) => {
+      let setCountFromHook: () => void;
+
+      function TestComponent() {
+        const { count, setCount } = useCounter();
+        setCountFromHook = setCount;
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>0</div>');
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>1</div>');
+    });
+
+    // Version accepting an object parameter
+    function useCounterWithObject({ initial = 0, step = 1 }) {
+      let count = initial;
+      const setCount = () => {
+        count += step;
+      };
+      return { count, setCount };
+    }
+
+    // Version accepting multiple parameters
+    function useCounterWithMultipleParams(initial = 0, step = 1, max = Infinity) {
+      let count = initial;
+      const setCount = () => {
+        count = Math.min(count + step, max);
+      };
+      return { count, setCount };
+    }
+
+    // Version returning an array
+    function useCounterReturningArray(initial = 0) {
+      let count = initial;
+      const setCount = () => {
+        count += 1;
+      };
+      return [count, setCount];
+    }
+
+    // Test object input
+    it('should initialize with an object input', ({ container }) => {
+      function TestComponent() {
+        const { count } = useCounterWithObject({ initial: 10, step: 2 });
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>10</div>');
+    });
+
+    // Test multiple variable inputs
+    it('should initialize with multiple variable inputs', ({ container }) => {
+      function TestComponent() {
+        const { count } = useCounterWithMultipleParams(15, 3, 20);
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>15</div>');
+    });
+
+    it('should support derived by state', ({ container }) => {
+      let updateCount: (max: number) => void;
+      function TestComponent() {
+        let init = 15;
+        updateCount = (value: number) => (init = value);
+        const { count } = useCounterWithMultipleParams(init, 3, 20);
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>15</div>');
+      updateCount(10);
+      expect(container.innerHTML).toBe('<div>10</div>');
+    });
+
+    // Test single variable output
+    it('should return a single variable output', ({ container }) => {
+      function TestComponent() {
+        const { count } = useCounter();
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>0</div>');
+    });
+
+    // Test object output
+    it('should return an object output', ({ container }) => {
+      let setCountFromHook: () => void;
+
+      function TestComponent() {
+        const { count, setCount } = useCounter();
+        setCountFromHook = setCount;
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>0</div>');
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>1</div>');
+    });
+
+    // Test object input and update
+    it('should initialize with an object input and update correctly', ({ container }) => {
+      let incrementFromHook;
+
+      function TestComponent() {
+        const { count, setCount } = useCounterWithObject({ initial: 10, step: 2 });
+        incrementFromHook = setCount;
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>10</div>');
+      incrementFromHook();
+      expect(container.innerHTML).toBe('<div>12</div>');
+    });
+
+    // Test array output
+    it('should return an array output', ({ container }) => {
+      let setCountFromHook: () => void;
+
+      function TestComponent() {
+        const [count, setCount] = useCounterReturningArray();
+        setCountFromHook = setCount;
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>0</div>');
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>1</div>');
+    });
+
+    // Test array output and update
+    it('should return an array output and update correctly', ({ container }) => {
+      let incrementFromHook;
+
+      function TestComponent() {
+        const [count, increment] = useCounterReturningArray(5);
+        incrementFromHook = increment;
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>5</div>');
+      incrementFromHook();
+      expect(container.innerHTML).toBe('<div>6</div>');
+    });
+
+    // Test complex variable updates
+    it('should update state correctly with complex inputs', ({ container }) => {
+      let setCountFromHook: () => void;
+
+      function TestComponent() {
+        const { count, setCount } = useCounterWithMultipleParams(5, 2, 10);
+        setCountFromHook = setCount;
+        return <div>{count}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>5</div>');
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>7</div>');
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>9</div>');
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>10</div>'); // Max value reached
+    });
+  });
+
+  // 2. Multiple Instances
+  describe('Multiple Instances', () => {
+    it('should maintain separate state for multiple instances', ({ container }) => {
+      let setCount1: () => void, setCount2: () => void;
+
+      function TestComponent() {
+        const { count: count1, setCount: setCount1Hook } = useCounter(0);
+        const { count: count2, setCount: setCount2Hook } = useCounter(10);
+        setCount1 = setCount1Hook;
+        setCount2 = setCount2Hook;
+        return (
+          <div>
+            {count1}-{count2}
+          </div>
+        );
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>0-10</div>');
+      setCount1();
+      setCount2();
+      expect(container.innerHTML).toBe('<div>1-11</div>');
+    });
+  });
+
+  // 3. Lifecycle and Effects
+  describe('Lifecycle and Effects', () => {
+    it.fails('should run effects on mount and cleanup on unmount', ({ container }) => {
+      const mockEffect = vi.fn();
+      const mockCleanup = vi.fn();
+
+      function useEffectTest() {
+        didMount(() => {
+          mockEffect();
+        });
+        didUnMount(() => {
+          mockCleanup();
+        });
+      }
+
+      function TestComponent() {
+        useEffectTest();
+        return null;
+      }
+
+      render(TestComponent, container);
+
+      expect(mockEffect).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // 4. Context Integration
+  describe('Context Integration', () => {
+    it('should consume context correctly', ({ container }) => {
+      const CountContext = createContext(0);
+
+      function useContextCounter() {
+        const count = useContext(CountContext);
+        return count;
+      }
+
+      function TestComponent() {
+        const { count } = useContextCounter();
+        return <div>{count}</div>;
+      }
+
+      function App() {
+        return (
+          <CountContext count={5}>
+            <TestComponent />
+          </CountContext>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>5</div>');
+    });
+  });
+
+  // 5. Props Handling
+  describe('Props Handling', () => {
+    it('should update when props change', ({ container }) => {
+      function usePropsTest({ initial }: { initial: number }) {
+        const value = initial;
+        return value * 2;
+      }
+
+      let update: (n: number) => void;
+
+      function TestComponent() {
+        let value = 5;
+        const hookValue = usePropsTest({ initial: value });
+        update = (n: number) => (value = n);
+        return <div>{hookValue}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>10</div>');
+      update(10);
+      expect(container.innerHTML).toBe('<div>20</div>');
+    });
+  });
+
+  // 6. Hook Nesting
+  describe('Hook Nesting', () => {
+    it('should handle nested hook calls correctly', ({ container }) => {
+      function useNestedCounter(initial: number) {
+        const { count, setCount } = useCounter(initial);
+        const doubleCount = count * 2;
+        return { count, doubleCount, setCount };
+      }
+
+      let setCountFromHook: () => void;
+
+      function TestComponent() {
+        const { count, doubleCount, setCount } = useNestedCounter(5);
+        setCountFromHook = setCount;
+        return (
+          <div>
+            {count}-{doubleCount}
+          </div>
+        );
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>5-10</div>');
+      // @ts-ignore
+      setCountFromHook();
+      expect(container.innerHTML).toBe('<div>6-12</div>');
+    });
+  });
+
+  // 7. Hook Computation
+  describe('hook return value computation', () => {
+    it('should receive props and output value', ({ container }) => {
+      let updateValue: (n: number) => void;
+
+      function usePropsTest({ initial }: { initial: number }) {
+        return initial * 2;
+      }
+
+      function TestComponent() {
+        let value = 1;
+        const hookValue = usePropsTest({ initial: value });
+        let computed = hookValue * 2;
+        updateValue = n => (value = n);
+        return <div>{computed}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>4</div>');
+      updateValue(2);
+      expect(container.innerHTML).toBe('<div>8</div>');
+    });
+  });
+});
+
+describe('Hook and Watch Combined Tests', () => {
+  it('should update watched value when hook state changes', ({ container }) => {
+    let setCount;
+    function useCounter(initial = 0) {
+      let count = initial;
+      setCount = n => {
+        count = n;
+      };
+      return { count };
+    }
+
+    function TestComponent() {
+      const { count } = useCounter(0);
+      let watchedCount = 0;
+
+      watch(() => {
+        watchedCount = count * 2;
+      });
+
+      return <div>{watchedCount}</div>;
+    }
+
+    render(TestComponent, container);
+    expect(container.innerHTML).toBe('<div>0</div>');
+    setCount(5);
+    expect(container.innerHTML).toBe('<div>10</div>');
+  });
+
+  it('should handle multiple watches in a custom hook', ({ container }) => {
+    let setX, setY;
+    function usePosition() {
+      let x = 0,
+        y = 0;
+      setX = newX => {
+        x = newX;
+      };
+      setY = newY => {
+        y = newY;
+      };
+
+      let position = '';
+      watch(() => {
+        position = `(${x},${y})`;
+      });
+
+      let quadrant = 0;
+      watch(() => {
+        quadrant = x >= 0 && y >= 0 ? 1 : x < 0 && y >= 0 ? 2 : x < 0 && y < 0 ? 3 : 4;
+      });
+
+      return { position, quadrant };
+    }
+
+    function TestComponent() {
+      const { position, quadrant } = usePosition();
+      return (
+        <div>
+          {position} Q{quadrant}
+        </div>
+      );
+    }
+
+    render(TestComponent, container);
+    expect(container.innerHTML).toBe('<div>(0,0) Q1</div>');
+    setX(-5);
+    setY(10);
+    expect(container.innerHTML).toBe('<div>(-5,10) Q2</div>');
+  });
+
+  it('should correctly handle watch dependencies in hooks', ({ container }) => {
+    let setItems;
+    function useFilteredList(initialItems = []) {
+      let items = initialItems;
+      setItems = newItems => {
+        items = newItems;
+      };
+
+      let evenItems = [];
+      let oddItems = [];
+
+      watch(() => {
+        evenItems = items.filter(item => item % 2 === 0);
+      });
+
+      watch(() => {
+        oddItems = items.filter(item => item % 2 !== 0);
+      });
+
+      return { evenItems, oddItems };
+    }
+
+    function TestComponent() {
+      const { evenItems, oddItems } = useFilteredList([1, 2, 3, 4, 5]);
+      return (
+        <div>
+          Even: {evenItems.join(',')} Odd: {oddItems.join(',')}
+        </div>
+      );
+    }
+
+    render(TestComponent, container);
+    expect(container.innerHTML).toBe('<div>Even: 2,4 Odd: 1,3,5</div>');
+    setItems([2, 4, 6, 8, 10]);
+    expect(container.innerHTML).toBe('<div>Even: 2,4,6,8,10 Odd: </div>');
+  });
+});
+
+describe('Advanced Hook Tests', () => {
+  // Hook return tests
+  describe('Hook Return Tests', () => {
+    it('should handle expression return', ({ container }) => {
+      function useExpression(a: number, b: number) {
+        return a + b * 2;
+      }
+
+      function TestComponent() {
+        const result = useExpression(3, 4);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>11</div>');
+    });
+
+    it('should handle object spread return', ({ container }) => {
+      function useObjectSpread(obj: object) {
+        return { ...obj, newProp: 'added' };
+      }
+
+      function TestComponent() {
+        const result = useObjectSpread({ existingProp: 'original' });
+        return <div>{JSON.stringify(result)}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>{"existingProp":"original","newProp":"added"}</div>');
+    });
+
+    it('should handle function call return', ({ container }) => {
+      function useFunction() {
+        const innerFunction = () => 42;
+        return innerFunction();
+      }
+
+      function TestComponent() {
+        const result = useFunction();
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>42</div>');
+    });
+
+    it('should handle conditional expression return', ({ container }) => {
+      function useConditional(condition: boolean) {
+        return condition ? 'True' : 'False';
+      }
+
+      function TestComponent() {
+        const result = useConditional(true);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>True</div>');
+    });
+
+    it('should handle array computation return', ({ container }) => {
+      function useArrayComputation(arr: number[]) {
+        return arr.reduce((sum, num) => sum + num, 0);
+      }
+
+      function TestComponent() {
+        const result = useArrayComputation([1, 2, 3, 4, 5]);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>15</div>');
+    });
+
+    it('should handle ternary expression return', ({ container }) => {
+      function useTernary(value: number) {
+        return value > 5 ? 'High' : value < 0 ? 'Low' : 'Medium';
+      }
+
+      function TestComponent() {
+        const result = useTernary(7);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>High</div>');
+    });
+
+    it('should handle member expression return', ({ container }) => {
+      function useMemberExpression(obj: { prop: string }) {
+        return obj.prop;
+      }
+
+      function TestComponent() {
+        const result = useMemberExpression({ prop: 'test' });
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>test</div>');
+    });
+  });
+
+  // Hook input tests
+  describe('Hook Input Tests', () => {
+    it('should handle expression input', ({ container }) => {
+      function useExpression(value: number) {
+        return value * 2;
+      }
+
+      function TestComponent() {
+        const result = useExpression(3 + 4);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>14</div>');
+    });
+
+    it('should handle object spread input', ({ container }) => {
+      function useObjectSpread(obj: { a: number; b: number }) {
+        return obj.a + obj.b;
+      }
+
+      function TestComponent() {
+        const baseObj = { a: 1, c: 3 };
+        const result = useObjectSpread({ ...baseObj, b: 2 });
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>3</div>');
+    });
+
+    it('should handle function call input', ({ container }) => {
+      function useFunction(value: number) {
+        return value * 2;
+      }
+
+      function getValue() {
+        return 21;
+      }
+
+      function TestComponent() {
+        const result = useFunction(getValue());
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>42</div>');
+    });
+
+    it('should handle conditional expression input', ({ container }) => {
+      function useConditional(value: string) {
+        return `Received: ${value}`;
+      }
+
+      function TestComponent() {
+        const condition = true;
+        const result = useConditional(condition ? 'Yes' : 'No');
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Received: Yes</div>');
+    });
+
+    it('should handle array computation input', ({ container }) => {
+      function useArraySum(sum: number) {
+        return `Sum: ${sum}`;
+      }
+
+      function TestComponent() {
+        const numbers = [1, 2, 3, 4, 5];
+        const result = useArraySum(numbers.reduce((sum, num) => sum + num, 0));
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Sum: 15</div>');
+    });
+
+    it('should handle ternary expression input', ({ container }) => {
+      function useStatus(status: string) {
+        return `Current status: ${status}`;
+      }
+
+      function TestComponent() {
+        const value = 7;
+        const result = useStatus(value > 5 ? 'High' : value < 0 ? 'Low' : 'Medium');
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Current status: High</div>');
+    });
+
+    it('should handle member expression input', ({ container }) => {
+      function useName(name: string) {
+        return `Hello, ${name}!`;
+      }
+
+      function TestComponent() {
+        const user = { name: 'Alice' };
+        const result = useName(user.name);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Hello, Alice!</div>');
+    });
+  });
+
+  // Additional tests
+  describe('Additional Hook Tests', () => {
+    it('should handle input based on other variables', ({ container }) => {
+      function useComputed(value: number) {
+        return value * 2;
+      }
+
+      function TestComponent() {
+        let baseValue = 5;
+        let multiplier = 3;
+        const result = useComputed(baseValue * multiplier);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>30</div>');
+    });
+
+    it('should handle function input and output', ({ container }) => {
+      function useFunction(fn: (x: number) => number) {
+        return (y: number) => fn(y) * 2;
+      }
+
+      function TestComponent() {
+        const inputFn = (x: number) => x + 1;
+        const resultFn = useFunction(inputFn);
+        const result = resultFn(5);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>12</div>');
+    });
+  });
+});
--- a/packages/inula-next/test/event.test.tsx
+++ b/packages/inula-next/test/event.test.tsx
@ -0,0 +1,543 @@
+/*
+ * 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 } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('Event Handling', () => {
+  it('Should correctly handle onClick events', ({ container }) => {
+    let clicked = false;
+    function App() {
+      const handleClick = () => {
+        clicked = true;
+      };
+      return <button onClick={handleClick}>Click me</button>;
+    }
+
+    render(App, container);
+    const button = container.querySelector('button');
+    button.click();
+    expect(clicked).toBe(true);
+  });
+
+  it.fails('Should correctly handle onMouseOver events', ({ container }) => {
+    let hovered = false;
+    function App() {
+      const handleMouseOver = () => {
+        hovered = true;
+      };
+      return <div onMouseOver={handleMouseOver}>Hover me</div>;
+    }
+
+    render(App, container);
+    const div = container.querySelector('div');
+    div.dispatchEvent(new MouseEvent('mouseover'));
+    expect(hovered).toBe(true);
+  });
+
+  it('Should correctly handle onKeyPress events', ({ container }) => {
+    let keypressed = '';
+    function App() {
+      const handleKeyPress = event => {
+        keypressed = event.key;
+      };
+      return <input onKeyPress={handleKeyPress} />;
+    }
+
+    render(App, container);
+    const input = container.querySelector('input');
+    const event = new KeyboardEvent('keypress', { key: 'A' });
+    input.dispatchEvent(event);
+    expect(keypressed).toBe('A');
+  });
+
+  it('Should correctly handle onSubmit events', ({ container }) => {
+    let submitted = false;
+    function App() {
+      const handleSubmit = event => {
+        event.preventDefault();
+        submitted = true;
+      };
+      return (
+        <form onSubmit={handleSubmit}>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    }
+
+    render(App, container);
+    const form = container.querySelector('form');
+    form.dispatchEvent(new Event('submit'));
+    expect(submitted).toBe(true);
+  });
+
+  it.fails('Should correctly handle custom events', ({ container }) => {
+    let customEventData = null;
+    function App() {
+      const handleCustomEvent = event => {
+        customEventData = event.detail;
+      };
+      return <div onCustomEvent={handleCustomEvent}>Custom event target</div>;
+    }
+
+    render(App, container);
+    const div = container.querySelector('div');
+    const customEvent = new CustomEvent('customEvent', { detail: { message: 'Hello, Custom Event!' } });
+    div.dispatchEvent(customEvent);
+    expect(customEventData).toEqual({ message: 'Hello, Custom Event!' });
+  });
+
+  it('Should correctly handle events when the handler is a variable', ({ container }) => {
+    let count = 0;
+    function App() {
+      const incrementCount = () => {
+        count++;
+      };
+      return <button onClick={incrementCount}>Increment</button>;
+    }
+
+    render(App, container);
+    const button = container.querySelector('button');
+    button.click();
+    expect(count).toBe(1);
+  });
+
+  it('Should correctly handle events when the handler is an expression returning a function', ({ container }) => {
+    let lastClicked = '';
+    function App() {
+      const createHandler = buttonName => () => {
+        lastClicked = buttonName;
+      };
+      return (
+        <div>
+          <button onClick={() => createHandler('Button A')()}>A</button>
+          <button onClick={() => createHandler('Button B')()}>B</button>
+        </div>
+      );
+    }
+
+    render(App, container);
+    const buttons = container.querySelectorAll('button');
+    buttons[0].click();
+    expect(lastClicked).toBe('Button A');
+    buttons[1].click();
+    expect(lastClicked).toBe('Button B');
+  });
+});
+
+describe('event emission', () => {
+  it('should handle emit to parent', ({ container }) => {
+    function AnswerButton({ onYes, onNo }) {
+      return (
+        <>
+          <button onClick={onYes}>YES</button>
+
+          {/*<button onClick={onNo}>NO</button>*/}
+        </>
+      );
+    }
+    function App() {
+      let isHappy = false;
+
+      function onAnswerNo() {
+        isHappy = false;
+      }
+
+      function onAnswerYes() {
+        isHappy = true;
+      }
+
+      return (
+        <>
+          <p>Are you happy?</p>
+          <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
+          <p style={{ fontSize: 50 }}>{isHappy ? 'yes' : 'no'}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <p>
+            Are you happy?
+          </p>
+          <button>
+            YES
+          </button>
+          <p>
+            no
+          </p>
+        </div>
+      `);
+    container.querySelector('button')?.click();
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <p>
+            Are you happy?
+          </p>
+          <button>
+            YES
+          </button>
+          <p>
+            yes
+          </p>
+        </div>
+      `);
+  });
+  it('should correctly emit events to parent component', ({ container }) => {
+    function Child({ onEvent }) {
+      return <button onClick={() => onEvent('clicked')}>Click me</button>;
+    }
+
+    function App() {
+      let eventReceived = '1';
+
+      function handleEvent(event) {
+        eventReceived = event;
+      }
+
+      return (
+        <>
+          <Child onEvent={handleEvent} />
+          <p>{eventReceived}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click me
+        </button>
+        <p>
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelector('button')?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click me
+        </button>
+        <p>
+          clicked
+        </p>
+      </div>
+    `);
+  });
+
+  it('should correctly update parent state based on emitted events', ({ container }) => {
+    function Counter({ onIncrement, onDecrement }) {
+      return (
+        <div>
+          <button onClick={onIncrement}>+</button>
+          <button onClick={onDecrement}>-</button>
+        </div>
+      );
+    }
+
+    function App() {
+      let count = 0;
+
+      function increment() {
+        count += 1;
+      }
+
+      function decrement() {
+        count -= 1;
+      }
+
+      return (
+        <>
+          <Counter onIncrement={increment} onDecrement={decrement} />
+          <p>Count:{count}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            +
+          </button>
+          <button>
+            -
+          </button>
+        </div>
+        <p>
+          Count:
+          0
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[0]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            +
+          </button>
+          <button>
+            -
+          </button>
+        </div>
+        <p>
+          Count:
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[1]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            +
+          </button>
+          <button>
+            -
+          </button>
+        </div>
+        <p>
+          Count:
+          0
+        </p>
+      </div>
+    `);
+  });
+
+  it('should correctly handle multiple event emissions', ({ container }) => {
+    function MultiButton({ onClickA, onClickB, onClickC }) {
+      return (
+        <div>
+          <button onClick={onClickA}>A</button>
+          <button onClick={onClickB}>B</button>
+          <button onClick={onClickC}>C</button>
+        </div>
+      );
+    }
+
+    function App() {
+      let lastClicked = 'A';
+
+      function handleClick(button) {
+        lastClicked = button;
+      }
+
+      return (
+        <>
+          <MultiButton
+            onClickA={() => handleClick('A')}
+            onClickB={() => handleClick('B')}
+            onClickC={() => handleClick('C')}
+          />
+          <p>Last clicked:{lastClicked}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            A
+          </button>
+          <button>
+            B
+          </button>
+          <button>
+            C
+          </button>
+        </div>
+        <p>
+          Last clicked:
+          A
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[1]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            A
+          </button>
+          <button>
+            B
+          </button>
+          <button>
+            C
+          </button>
+        </div>
+        <p>
+          Last clicked:
+          B
+        </p>
+      </div>
+    `);
+  });
+
+  it('should handle both arrow functions and function variables', ({ container }) => {
+    function Child({ onEventA, onEventB }) {
+      return (
+        <div>
+          <button onClick={onEventA}>Event A</button>
+          <button onClick={onEventB}>Event B</button>
+        </div>
+      );
+    }
+
+    function App() {
+      let eventResult = '1';
+
+      const handleEventA = () => {
+        eventResult = 'Arrow function called';
+      };
+
+      function handleEventB() {
+        eventResult = 'Function variable called';
+      }
+
+      return (
+        <>
+          <Child onEventA={handleEventA} onEventB={handleEventB} />
+          <p>{eventResult}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            Event A
+          </button>
+          <button>
+            Event B
+          </button>
+        </div>
+        <p>
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[0]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            Event A
+          </button>
+          <button>
+            Event B
+          </button>
+        </div>
+        <p>
+          Arrow function called
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[1]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            Event A
+          </button>
+          <button>
+            Event B
+          </button>
+        </div>
+        <p>
+          Function variable called
+        </p>
+      </div>
+    `);
+  });
+
+  it('should handle multi-layer event functions', ({ container }) => {
+    function GrandChild({ onEvent }) {
+      return <button onClick={() => onEvent('GrandChild clicked')}>Click GrandChild</button>;
+    }
+
+    function Child({ onParentEvent }) {
+      function handleChildEvent(message) {
+        onParentEvent(`Child received: ${message}`);
+      }
+
+      return <GrandChild onEvent={handleChildEvent} />;
+    }
+
+    function App() {
+      let message = '1';
+
+      function handleAppEvent(receivedMessage) {
+        message = `App received: ${receivedMessage}`;
+      }
+
+      return (
+        <>
+          <Child onParentEvent={handleAppEvent} />
+          <p>{message}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click GrandChild
+        </button>
+        <p>
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelector('button')?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click GrandChild
+        </button>
+        <p>
+          App received: Child received: GrandChild clicked
+        </p>
+      </div>
+    `);
+  });
+});
--- a/packages/inula-next/test/for.test.tsx
+++ b/packages/inula-next/test/for.test.tsx
@ -0,0 +1,225 @@
+/*
+ * 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 } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+describe('for', () => {
+  it('should work', ({ container }) => {
+    function App() {
+      const arr = [0, 1, 2];
+      return <for each={arr}>{item => <div>{item}</div>}</for>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>0</div><div>1</div><div>2</div>"`);
+  });
+
+  it('should update item when arr changed', ({ container }) => {
+    let updateArr: (num: number) => void;
+
+    function App() {
+      const arr = [0, 1, 2];
+      updateArr = (num: number) => {
+        arr.push(num);
+      };
+      return <for each={arr}>{item => <div>{item}</div>}</for>;
+    }
+
+    render(App, container);
+    expect(container.children.length).toEqual(3);
+    updateArr(3);
+    expect(container.children.length).toEqual(4);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>0</div><div>1</div><div>2</div><div>3</div>"`);
+  });
+
+  it('should get index', ({ container }) => {
+    let update: (num: number) => void;
+    function App() {
+      const arr = [0, 1, 2];
+      update = (num: number) => {
+        arr.push(num);
+      };
+      return <for each={arr}>{(item, index) => <div>{index}</div>}</for>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>0</div><div>1</div><div>2</div>"`);
+    update(3);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<div>0</div><div>1</div><div>2</div><div>3</div>"`);
+  });
+  it('should transform for loop', ({ container }) => {
+    function MyComp() {
+      let name = 'test';
+      let arr = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 3, y: 3 },
+      ];
+      return (
+        <for each={arr}>
+          {({ x, y }, index) => {
+            let name1 = 'test';
+            const onClick = () => {
+              name1 = 'changed';
+            };
+            return (
+              <div onClick={onClick} id={`item${index}`}>
+                {name1}
+                {index}
+              </div>
+            );
+          }}
+        </for>
+      );
+    }
+
+    render(MyComp, container);
+    expect(container.innerHTML).toBe(
+      '<div id="item0">test0</div><div id="item1">test1</div><div id="item2">test2</div>'
+    );
+    const item = container.querySelector('#item0') as HTMLDivElement;
+    item.click();
+    expect(container.innerHTML).toBe(
+      '<div id="item0">changed0</div><div id="item1">test1</div><div id="item2">test2</div>'
+    );
+  });
+
+  it('should transform map to for jsx element', ({ container }) => {
+    function MyComp() {
+      const arr = [1, 2, 3];
+      return (
+        <>
+          {arr.map(item => (
+            <div>{item}</div>
+          ))}
+        </>
+      );
+    }
+
+    render(MyComp, container);
+    expect(container.innerHTML).toBe('<div>1</div><div>2</div><div>3</div>');
+  });
+  it('should transform map in map to for', ({ container }) => {
+    function MyComp() {
+      const matrix = [
+        [1, 2],
+        [3, 4],
+      ];
+      return <div>{matrix.map(arr => arr.map(item => <div>{item}</div>))}</div>;
+    }
+
+    render(MyComp, container);
+    expect(container.innerHTML).toBe('<div><div>1</div><div>2</div><div>3</div><div>4</div></div>');
+  });
+
+  // Compile error
+  // it.fails('should transform last map to for" ', ({ container }) => {
+  //   function MyComp() {
+  //     let arr = [1, 2, 3];
+  //     return (
+  //       <div>
+  //         {arr
+  //           .map(item => <div>{item}</div>)
+  //           .map(item => (
+  //             <div>{item}</div>
+  //           ))}
+  //       </div>
+  //     );
+  //   }
+  //
+  //   render(MyComp, container);
+  //   expect(container.innerHTML).toBe('<div><div>1</div><div>2</div><div>3</div><div>4</div></div>');
+  // });
+  it('Should correctly render a single-level loop of elements', ({ container }) => {
+    function App() {
+      const fruits = ['Apple', 'Banana', 'Cherry'];
+      return <for each={fruits}>{fruit => <li>{fruit}</li>}</for>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<li>Apple</li><li>Banana</li><li>Cherry</li>"`);
+  });
+
+  it('Should correctly render nested loops of elements', ({ container }) => {
+    function App() {
+      const matrix = [
+        [1, 2],
+        [3, 4],
+        [5, 6],
+      ];
+      return (
+        <for each={matrix}>
+          {row => (
+            <div>
+              <for each={row}>{cell => <span>{cell}</span>}</for>
+            </div>
+          )}
+        </for>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div><span>1</span><span>2</span></div><div><span>3</span><span>4</span></div><div><span>5</span><span>6</span></div>"`
+    );
+  });
+
+  it('Should correctly render loops with complex data structures', ({ container }) => {
+    function App() {
+      const users = [
+        { id: 1, name: 'Alice', hobbies: ['reading', 'gaming'] },
+        { id: 2, name: 'Bob', hobbies: ['cycling', 'photography'] },
+      ];
+      return (
+        <for each={users}>
+          {user => (
+            <div>
+              <h2>{user.name}</h2>
+              <ul>
+                <for each={user.hobbies}>{hobby => <li>{hobby}</li>}</for>
+              </ul>
+            </div>
+          )}
+        </for>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div><h2>Alice</h2><ul><li>reading</li><li>gaming</li></ul></div><div><h2>Bob</h2><ul><li>cycling</li><li>photography</li></ul></div>"`
+    );
+  });
+
+  it('Should correctly render when for tag input is an array map', ({ container }) => {
+    function App() {
+      const numbers = [1, 2, 3, 4, 5];
+      return <for each={numbers.map(n => n * 2)}>{doubledNumber => <span>{doubledNumber}</span>}</for>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<span>2</span><span>4</span><span>6</span><span>8</span><span>10</span>"`
+    );
+  });
+});
--- a/packages/inula-next/test/fragment.test.tsx
+++ b/packages/inula-next/test/fragment.test.tsx
@ -0,0 +1,209 @@
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+describe('Fragment Tests', () => {
+  it('should render multiple elements using Fragment', ({ container }) => {
+    function App() {
+      return (
+        <>
+          <div>First</div>
+          <div>Second</div>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>First</div><div>Second</div>');
+  });
+
+  it('should render an empty Fragment', ({ container }) => {
+    function App() {
+      return <></>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('');
+  });
+  it('should support nested Fragments', ({ container }) => {
+    function ChildComponent() {
+      return (
+        <>
+          <span>Child</span>
+        </>
+      );
+    }
+
+    function App() {
+      return (
+        <>
+          <div>Start</div>
+          <>
+            <p>Nested</p>
+            <ChildComponent />
+          </>
+          <div>End</div>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Start</div><p>Nested</p><span>Child</span><div>End</div>');
+  });
+
+  it('should support conditional rendering with Fragments', ({ container }) => {
+    function App() {
+      let showExtra = false;
+
+      function toggleExtra() {
+        showExtra = !showExtra;
+      }
+
+      return (
+        <>
+          <div>Always</div>
+          {showExtra && (
+            <>
+              <div>Extra 1</div>
+              <div>Extra 2</div>
+            </>
+          )}
+          <button onClick={toggleExtra}>Toggle</button>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Always</div><button>Toggle</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div>Always</div><div>Extra 1</div><div>Extra 2</div><button>Toggle</button>');
+  });
+
+  it('should support ternary operators with Fragments', ({ container }) => {
+    function App() {
+      let condition = true;
+
+      function toggleCondition() {
+        condition = !condition;
+      }
+
+      return (
+        <>
+          {condition ? (
+            <>
+              <div>True 1</div>
+              <div>True 2</div>
+            </>
+          ) : (
+            <>
+              <div>False 1</div>
+              <div>False 2</div>
+            </>
+          )}
+          <button onClick={toggleCondition}>Toggle</button>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>True 1</div><div>True 2</div><button>Toggle</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div>False 1</div><div>False 2</div><button>Toggle</button>');
+  });
+
+  it('should support state updates within Fragments', ({ container }) => {
+    function App() {
+      let count = 0;
+
+      function increment() {
+        count += 1;
+      }
+
+      return (
+        <>
+          <div>Count: {count}</div>
+          <button onClick={increment}>Increment</button>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Count: 0</div><button>Increment</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div>Count: 1</div><button>Increment</button>');
+  });
+
+  it('should support event handling within Fragments', ({ container }) => {
+    function App() {
+      let clicked = false;
+
+      function handleClick() {
+        clicked = true;
+      }
+
+      return (
+        <>
+          <button onClick={handleClick}>Click me</button>
+          <div>{clicked ? 'Clicked' : 'Not clicked'}</div>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<button>Click me</button><div>Not clicked</div>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<button>Click me</button><div>Clicked</div>');
+  });
+
+  it('should not affect CSS styling', ({ container }) => {
+    function App() {
+      return (
+        <>
+          <div className="styled">Styled div</div>
+          <span style={{ color: 'red' }}>Red span</span>
+        </>
+      );
+    }
+
+    render(App, container);
+    const styledDiv = container.querySelector('.styled');
+    const redSpan = container.querySelector('span');
+
+    expect(styledDiv).not.toBeNull();
+    expect(redSpan).not.toBeNull();
+    expect(redSpan?.style.color).toBe('red');
+  });
+
+  it('should support mixing text and JSX expression containers within Fragments', ({ container }) => {
+    function App() {
+      const name = 'World';
+      const age = 42;
+      const hobbies = ['reading', 'coding', 'gaming'];
+
+      return (
+        <>
+          Hello, {name}! You are {age} years old.Your hobbies include:
+          {hobbies.map(h => (
+            <span>{h}</span>
+          ))}
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      'Hello, World! You are 42 years old.Your hobbies include:<span>reading</span><span>coding</span><span>gaming</span>'
+    );
+  });
+});
--- a/packages/inula-next/test/jsxSlice.test.tsx
+++ b/packages/inula-next/test/jsxSlice.test.tsx
@ -0,0 +1,680 @@
+/*
+ * 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 } from '../src';
+import { useContext, createContext } from '../src/ContextNode';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('JSX Element Usage in Various Contexts', () => {
+  describe('mount', () => {
+    it('should support variable assignment of JSX elements', ({ container }) => {
+      function App() {
+        const element = <div>Hello, World!</div>;
+        return <>{element}</>;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Hello, World!</div>');
+    });
+
+    it('should support JSX elements in arrays', ({ container }) => {
+      function App() {
+        const elements = [<div>First</div>, <div>Second</div>, <div>Third</div>];
+        return <>{elements}</>;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>First</div><div>Second</div><div>Third</div>');
+    });
+
+    it('should support JSX elements as object properties', ({ container }) => {
+      function App() {
+        const obj = {
+          header: <h1>Title</h1>,
+          content: <p>Content</p>,
+          footer: <footer>Footer</footer>,
+        };
+        return (
+          <>
+            {obj.header}
+            {obj.content}
+            {obj.footer}
+          </>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<h1>Title</h1><p>Content</p><footer>Footer</footer>');
+    });
+    //
+    // it('should support functions returning JSX elements', ({ container }) => {
+    //   function App() {
+    //     const getElement = (text: string) => <span>{text}</span>;
+    //     return <div>{getElement('Hello')}</div>;
+    //   }
+    //
+    //   render(App, container);
+    //   expect(container.innerHTML).toBe('<div><span>Hello</span></div>');
+    // });
+
+    it('should support JSX elements in conditional expressions', ({ container }) => {
+      function App({ condition = true }: { condition: boolean }) {
+        return (
+          <>
+            {condition ? <div>True</div> : <div>False</div>}
+            {condition && <div>Conditional</div>}
+          </>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>True</div><div>Conditional</div>');
+    });
+
+    it('should support JSX elements as Context Provider values', ({ container }) => {
+      const ThemeContext = createContext(null);
+
+      function App() {
+        const theme = <div>Dark Theme</div>;
+        return (
+          <ThemeContext value={theme}>
+            <ThemeConsumer />
+          </ThemeContext>
+        );
+      }
+
+      function ThemeConsumer() {
+        let { value } = useContext(ThemeContext);
+        return <>{value}</>;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Dark Theme</div>');
+    });
+    it('should render string literals', ({ container }) => {
+      function App() {
+        return <div>{'Hello, World!'}</div>;
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Hello, World!</div>');
+    });
+
+    it('should render numbers', ({ container }) => {
+      function App() {
+        return <div>{42}</div>;
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>42</div>');
+    });
+
+    it.fails('should render booleans (as empty string)', ({ container }) => {
+      function App() {
+        return <div>{true}</div>;
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div></div>');
+    });
+
+    it.fails('should render null and undefined (as empty string)', ({ container }) => {
+      function App() {
+        return (
+          <div>
+            {null}
+            {undefined}
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div></div>');
+    });
+
+    it.fails('should render arrays of elements', ({ container }) => {
+      function App() {
+        return <div>{[<span key="1">One</span>, <span key="2">Two</span>]}</div>;
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div><span>One</span><span>Two</span></div>');
+    });
+
+    it('should render function components', ({ container }) => {
+      function Child() {
+        return <span>Child Component</span>;
+      }
+      function App() {
+        return (
+          <div>
+            <Child />
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div><span>Child Component</span></div>');
+    });
+
+    it('should render fragments', ({ container }) => {
+      function App() {
+        return (
+          <>
+            <span>First</span>
+            <span>Second</span>
+          </>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<span>First</span><span>Second</span>');
+    });
+
+    it('should render elements with props', ({ container }) => {
+      function App() {
+        return (
+          <div className="test" id="myDiv">
+            Content
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div class="test" id="myDiv">Content</div>');
+    });
+
+    it('should render elements with children prop', ({ container }) => {
+      function Wrapper({ children }: { children: React.ReactNode }) {
+        return <div className="wrapper">{children}</div>;
+      }
+      function App() {
+        return (
+          <Wrapper>
+            <span>Child Content</span>
+          </Wrapper>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div class="wrapper"><span>Child Content</span></div>');
+    });
+
+    it('should correctly render nested HTML elements', ({ container }) => {
+      function App() {
+        return (
+          <div className="outer">
+            <p className="inner">
+              <span>Nested content</span>
+            </p>
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div class="outer"><p class="inner"><span>Nested content</span></p></div>');
+    });
+
+    it('should correctly render a mix of HTML elements and text', ({ container }) => {
+      function App() {
+        return (
+          <div>
+            Text before <span>Element</span> Text after
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Text before <span>Element</span> Text after</div>');
+    });
+
+    it('should correctly render text on both sides of an element', ({ container }) => {
+      function App() {
+        return (
+          <div>
+            Left side text <strong>Bold text</strong> Right side text
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Left side text <strong>Bold text</strong> Right side text</div>');
+    });
+
+    it('should correctly render a mix of curly braces, text, and elements in different orders', ({ container }) => {
+      function App() {
+        const name = 'World';
+        return (
+          <div>
+            {/* Curly braces, then text, then element */}
+            {name}, Hello <strong>!</strong>
+            {/* Element, then curly braces, then text */}
+            <em>Greetings</em> {name} to you
+            {/* Text, then element, then curly braces */}
+            Welcome <span>dear</span> {name}
+          </div>
+        );
+      }
+      render(App, container);
+      expect(container.innerHTML).toBe(
+        '<div>World, Hello <strong>!</strong><em>Greetings</em> World to you' + 'Welcome <span>dear</span> World</div>'
+      );
+    });
+  });
+  describe('update', () => {
+    it('should support variable assignment of JSX elements and updates', ({ container }) => {
+      function App() {
+        let element = <div>Hello, World!</div>;
+
+        function updateElement() {
+          element = <div>Updated World!</div>;
+        }
+
+        return (
+          <>
+            {element}
+            <button onClick={updateElement}>Update</button>
+          </>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>Hello, World!</div><button>Update</button>');
+
+      container.querySelector('button')?.click();
+      expect(container.innerHTML).toBe('<div>Updated World!</div><button>Update</button>');
+    });
+
+    it('should support JSX elements in arrays with updates', ({ container }) => {
+      function App() {
+        let elements = [<div>First</div>, <div>Second</div>, <div>Third</div>];
+
+        function updateElements() {
+          elements = [<div>Updated First</div>, <div>Updated Second</div>, <div>Updated Third</div>];
+        }
+
+        return (
+          <>
+            {elements}
+            <button onClick={updateElements}>Update</button>
+          </>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>First</div><div>Second</div><div>Third</div><button>Update</button>');
+
+      container.querySelector('button')?.click();
+      expect(container.innerHTML).toBe(
+        '<div>Updated First</div><div>Updated Second</div><div>Updated Third</div><button>Update</button>'
+      );
+    });
+
+    it('should support JSX elements as object properties with updates', ({ container }) => {
+      function App() {
+        let obj = {
+          header: <h1>Title</h1>,
+          content: <p>Content</p>,
+          footer: <footer>Footer</footer>,
+        };
+
+        function updateObj() {
+          obj = {
+            header: <h1>Updated Title</h1>,
+            content: <p>Updated Content</p>,
+            footer: <footer>Updated Footer</footer>,
+          };
+        }
+
+        return (
+          <>
+            {obj.header}
+            {obj.content}
+            {obj.footer}
+            <button onClick={updateObj}>Update</button>
+          </>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<h1>Title</h1><p>Content</p><footer>Footer</footer><button>Update</button>');
+
+      container.querySelector('button')?.click();
+      expect(container.innerHTML).toBe(
+        '<h1>Updated Title</h1><p>Updated Content</p><footer>Updated Footer</footer><button>Update</button>'
+      );
+    });
+
+    // it('should support functions returning JSX elements with updates', ({ container }) => {
+    //   function App() {
+    //     let text = 'Hello';
+    //
+    //     const getElement = (t: string) => <span>{t}</span>;
+    //
+    //     function updateText() {
+    //       text = 'Updated Hello';
+    //     }
+    //
+    //     return (
+    //       <div>
+    //         {getElement(text)}
+    //         <button onClick={updateText}>Update</button>
+    //       </div>
+    //     );
+    //   }
+    //
+    //   render(App, container);
+    //   expect(container.innerHTML).toBe('<div><span>Hello</span><button>Update</button></div>');
+    //
+    //   container.querySelector('button')?.click();
+    //   expect(container.innerHTML).toBe('<div><span>Updated Hello</span><button>Update</button></div>');
+    // });
+
+    it('should support JSX elements in conditional expressions with updates', ({ container }) => {
+      function App() {
+        let condition = true;
+
+        function toggleCondition() {
+          condition = !condition;
+        }
+
+        return (
+          <>
+            {condition ? <div>True</div> : <div>False</div>}
+            {condition && <div>Conditional</div>}
+            <button onClick={toggleCondition}>Toggle</button>
+          </>
+        );
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toBe('<div>True</div><div>Conditional</div><button>Toggle</button>');
+
+      container.querySelector('button')?.click();
+      expect(container.innerHTML).toBe('<div>False</div><button>Toggle</button>');
+    });
+  });
+});
+
+describe('JSX Element Attributes', () => {
+  it('should correctly initialize attributes', ({ container }) => {
+    function App() {
+      return (
+        <div id="test" className="example">
+          Content
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div id="test" class="example">Content</div>');
+  });
+
+  it('should correctly update attributes', ({ container }) => {
+    function App() {
+      let className = 'initial';
+
+      function updateClass() {
+        className = 'updated';
+      }
+
+      return (
+        <>
+          <div className={className}>Content</div>
+          <button onClick={updateClass}>Update</button>
+        </>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div class="initial">Content</div><button>Update</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div class="updated">Content</div><button>Update</button>');
+  });
+
+  it('should correctly render attributes dependent on variables', ({ container }) => {
+    function App() {
+      let className = 'initial';
+      let b = className;
+      function updateClass() {
+        className = 'updated';
+      }
+
+      return (
+        <>
+          <div className={b}>Content</div>
+          <button onClick={updateClass}>Update</button>
+        </>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div class="initial">Content</div><button>Update</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div class="updated">Content</div><button>Update</button>');
+  });
+
+  it('should correctly render attributes with expressions', ({ container }) => {
+    function App() {
+      const count = 5;
+      return <div data-count={`Count is ${count}`}>Content</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div data-count="Count is 5">Content</div>');
+  });
+
+  it('should correctly render boolean attributes', ({ container }) => {
+    function App() {
+      const disabled = true;
+      return <button disabled={disabled}>Click me</button>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<button disabled="">Click me</button>');
+  });
+
+  it.fails('should correctly render attributes without values', ({ container }) => {
+    function App() {
+      const checked = true;
+      return <input type="checkbox" checked />;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<input type="checkbox" checked="">');
+  });
+
+  it.fails('should correctly spread multiple attributes', ({ container }) => {
+    function App() {
+      const props = {
+        id: 'test-id',
+        className: 'test-class',
+        'data-test': 'test-data',
+      };
+      return <div {...props}>Content</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div id="test-id" class="test-class" data-test="test-data">Content</div>');
+  });
+
+  it.fails('should correctly handle attribute spreading and individual props', ({ container }) => {
+    function App() {
+      const props = {
+        id: 'base-id',
+        className: 'base-class',
+      };
+      return (
+        <div {...props} id="override-id" data-extra="extra">
+          Content
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div id="override-id" class="base-class" data-extra="extra">Content</div>');
+  });
+});
+
+describe('JSX Element Inline Styles', () => {
+  it('should correctly apply inline styles to an element', ({ container }) => {
+    function App() {
+      return <div style={{ color: 'red', fontSize: '16px' }}>Styled content</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: red; font-size: 16px;">Styled content</div>');
+  });
+
+  it('should correctly apply multiple inline styles to an element', ({ container }) => {
+    function App() {
+      return <div style={{ color: 'blue', fontSize: '20px', fontWeight: 'bold', margin: '10px' }}>Multiple styles</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      '<div style="color: blue; font-size: 20px; font-weight: bold; margin: 10px;">Multiple styles</div>'
+    );
+  });
+
+  it('should correctly apply styles from a variable', ({ container }) => {
+    function App() {
+      const styleObj = { color: 'green', padding: '5px' };
+      return <div style={styleObj}>Variable style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: green; padding: 5px;">Variable style</div>');
+  });
+
+  it('should correctly update styles', ({ container }) => {
+    function App() {
+      let style = { color: 'purple' };
+
+      function updateStyle() {
+        style = { color: 'orange', fontSize: '24px' };
+      }
+
+      return (
+        <>
+          <div style={style}>Updatable style</div>
+          <button onClick={updateStyle}>Update</button>
+        </>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: purple;">Updatable style</div><button>Update</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe(
+      '<div style="color: orange; font-size: 24px;">Updatable style</div><button>Update</button>'
+    );
+  });
+
+  it('should correctly apply styles from an expression', ({ container }) => {
+    function App() {
+      const size = 18;
+      return <div style={{ fontSize: `${size}px`, lineHeight: `${size * 1.5}px` }}>Expression style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="font-size: 18px; line-height: 27px;">Expression style</div>');
+  });
+
+  it('should correctly merge style objects', ({ container }) => {
+    function App() {
+      const baseStyle = { color: 'red', fontSize: '16px' };
+      const additionalStyle = { fontSize: '20px', fontWeight: 'bold' };
+      return <div style={{ ...baseStyle, ...additionalStyle }}>Merged styles</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      '<div style="color: red; font-size: 20px; font-weight: bold;">Merged styles</div>'
+    );
+  });
+
+  it('should correctly apply styles from a function call', ({ container }) => {
+    function getStyles(color: string) {
+      return { color, border: `1px solid ${color}` };
+    }
+    function App() {
+      return <div style={getStyles('blue')}>Function style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: blue; border: 1px solid blue;">Function style</div>');
+  });
+
+  it('should correctly apply styles based on a condition', ({ container }) => {
+    function App() {
+      const isActive = true;
+      const style = isActive
+        ? { backgroundColor: 'green', color: 'white' }
+        : { backgroundColor: 'gray', color: 'black' };
+      return <div style={style}>Conditional style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="background-color: green; color: white;">Conditional style</div>');
+  });
+
+  it('should correctly apply styles based on an array of conditions', ({ container }) => {
+    function App() {
+      const conditions = [true, false, true];
+      const style = {
+        color: conditions[0] ? 'red' : 'blue',
+        fontWeight: conditions[1] ? 'bold' : 'normal',
+        fontSize: conditions[2] ? '20px' : '16px',
+      };
+      return <div style={style}>Array condition style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      '<div style="color: red; font-weight: normal; font-size: 20px;">Array condition style</div>'
+    );
+  });
+
+  it('should correctly apply styles using ternary and binary expressions', ({ container }) => {
+    function App() {
+      const isPrimary = true;
+      const isLarge = true;
+      return (
+        <div
+          style={{
+            color: isPrimary ? 'blue' : 'gray',
+            fontSize: isLarge && '24px',
+          }}
+        >
+          Ternary and binary style
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: blue; font-size: 24px;">Ternary and binary style</div>');
+  });
+
+  it('should correctly apply styles using member expressions', ({ container }) => {
+    const theme = {
+      colors: {
+        primary: 'blue',
+        secondary: 'green',
+      },
+      sizes: {
+        small: '12px',
+        medium: '16px',
+        large: '20px',
+      },
+    };
+    function App() {
+      return (
+        <div
+          style={{
+            color: theme.colors.primary,
+            fontSize: theme.sizes.medium,
+          }}
+        >
+          Member expression style
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: blue; font-size: 16px;">Member expression style</div>');
+  });
+});
--- a/packages/inula-next/test/lifecycle.test.tsx
+++ b/packages/inula-next/test/lifecycle.test.tsx
@ -0,0 +1,184 @@
+/*
+ * 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, beforeEach } from 'vitest';
+import { domTest as it } from './utils';
+import { render, didMount, willMount, didUnmount, willUnmount } from '../src';
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+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();
+  });
+
+  it('should handle async operations in didMount', async ({ container }) => {
+    function App() {
+      let users: string[] = [];
+
+      didMount(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0));
+        users = ['Alice', 'Bob'];
+      });
+
+      return <div>{users.join(', ')}</div>;
+    }
+
+    vi.useFakeTimers();
+    render(App, container);
+    expect(container.innerHTML).toBe('<div></div>');
+
+    await vi.runAllTimersAsync();
+    expect(container.innerHTML).toBe('<div>Alice, Bob</div>');
+  });
+
+  it('should handle async errors in didMount with try-catch', async ({ container }) => {
+    function App() {
+      let text = 'initial';
+
+      didMount(async () => {
+        try {
+          await new Promise((_, reject) => setTimeout(() => reject(new Error('Async error')), 0));
+        } catch (error) {
+          text = 'Error caught';
+        }
+      });
+
+      return <div>{text}</div>;
+    }
+
+    vi.useFakeTimers();
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>initial</div>');
+
+    await vi.runAllTimersAsync();
+    expect(container.innerHTML).toBe('<div>Error caught</div>');
+  });
+
+  describe('willUnmount', () => {
+    // TODO: implement unmount
+    it.fails('should call willUnmount', ({ container }) => {
+      const fn = vi.fn();
+
+      function App() {
+        didUnmount(() => {
+          expect(container.innerHTML).toBe('<div>test</div>');
+          fn();
+        });
+
+        return <div>test</div>;
+      }
+
+      render(App, container);
+      expect(fn).toHaveBeenCalled();
+    });
+
+    const fn = vi.fn();
+
+    function Child() {
+      willUnmount(() => {
+        fn();
+      });
+
+      return <div>test</div>;
+    }
+
+    beforeEach(() => {
+      fn.mockClear();
+    });
+
+    it('should call willUnmount in if condition changed', ({ container }) => {
+      let setCond: (cond: boolean) => void;
+      function App() {
+        let cond = true;
+        setCond = (value: boolean) => {
+          cond = value;
+        };
+        return (
+          <if cond={cond}>
+            <Child />
+          </if>
+        );
+      }
+
+      render(App, container);
+      setCond!(false);
+      expect(fn).toHaveBeenCalled();
+    });
+
+    it('should call willUnmount in expression updated', ({ container }) => {
+      let setCond: (cond: boolean) => void;
+      function App() {
+        let cond = true;
+        setCond = (value: boolean) => {
+          cond = value;
+        };
+        return <div>{cond ? <Child /> : null}</div>;
+      }
+
+      render(App, container);
+      setCond!(false);
+      expect(fn).toHaveBeenCalled();
+    });
+
+    it('should call willUnmount in for', ({ container }) => {
+      let setArr: (arr: string[]) => void;
+      function App() {
+        let arr = ['a', 'b', 'c'];
+        setArr = (value: string[]) => {
+          arr = value;
+        };
+        return <for each={arr}>{item => <Child />}</for>;
+      }
+
+      render(App, container);
+      setArr!([]);
+      expect(fn).toHaveBeenCalledTimes(3);
+    });
+  });
+});
--- a/packages/inula-next/test/props.test.tsx
+++ b/packages/inula-next/test/props.test.tsx
@ -0,0 +1,328 @@
+/*
+ * 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>
+    `);
+    });
+
+    it('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>
+    `);
+    });
+  });
+});
+
+describe('extended prop tests', () => {
+  it('should correctly pass and render string props', ({ container }) => {
+    function Child({ text }) {
+      return <p>{text}</p>;
+    }
+
+    function App() {
+      return <Child text="Hello, world!" />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <p>
+            Hello, world!
+          </p>
+        </div>
+      `);
+  });
+
+  it('should correctly pass and render number props', ({ container }) => {
+    function Child({ number }) {
+      return <span>{number}</span>;
+    }
+
+    function App() {
+      return <Child number={42} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <span>
+            42
+          </span>
+        </div>
+      `);
+  });
+
+  it('should correctly pass and render boolean props', ({ container }) => {
+    function Child({ isActive }) {
+      return <div>{isActive ? 'Active' : 'Inactive'}</div>;
+    }
+
+    function App() {
+      return <Child isActive={true} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Active
+          </div>
+        </div>
+      `);
+  });
+
+  it.fails('should correctly pass and render array props', ({ container }) => {
+    function Child({ items }) {
+      return (
+        <ul>
+          {items.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      );
+    }
+
+    function App() {
+      return <Child items={['Apple', 'Banana', 'Cherry']} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <ul>
+            <li>Apple</li>
+            <li>Banana</li>
+            <li>Cherry</li>
+          </ul>
+        </div>
+      `);
+  });
+
+  it.fails('should correctly pass and render object props', ({ container }) => {
+    function Child({ person }) {
+      return (
+        <div>
+          {person.name}, {person.age}
+        </div>
+      );
+    }
+
+    function App() {
+      return <Child person={{ name: 'Alice', age: 30 }} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Alice, 30
+          </div>
+        </div>
+      `);
+  });
+
+  it('should correctly handle default prop values', ({ container }) => {
+    function Child({ message = 'Default message' }) {
+      return <h2>{message}</h2>;
+    }
+
+    function App() {
+      return <Child />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <h2>
+            Default message
+          </h2>
+        </div>
+      `);
+  });
+
+  it.fails('should correctly spread props', ({ container }) => {
+    function Child(props) {
+      return (
+        <div>
+          {props.a} {props.b} {props.c}
+        </div>
+      );
+    }
+
+    function App() {
+      const extraProps = { b: 'World', c: '!' };
+      return <Child a="Hello" {...extraProps} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Hello World !
+          </div>
+        </div>
+      `);
+  });
+
+  it.fails('should handle props without values', ({ container }) => {
+    function Child({ isDisabled }) {
+      return <button disabled={isDisabled}>Click me</button>;
+    }
+
+    function App() {
+      return <Child isDisabled />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <button disabled>
+            Click me
+          </button>
+        </div>
+      `);
+  });
+
+  it('should handle props with expressions', ({ container }) => {
+    function Child({ result }) {
+      return <div>{result}</div>;
+    }
+
+    function App() {
+      return <Child result={1 + 2 * 3} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            7
+          </div>
+        </div>
+      `);
+  });
+});
--- a/packages/inula-next/test/rendering.test.tsx
+++ b/packages/inula-next/test/rendering.test.tsx
@ -0,0 +1,322 @@
+/*
+ * 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('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.innerHTML).toBe('<h1>hello world!!!</h1>');
+    });
+
+    // TODO: SHOULD FIX
+    it('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>
+            Header
+            <h1>
+              hello world!!!
+            </h1>
+            <section>
+              <button>
+                Add, Now is
+                0
+              </button>
+            </section>
+            Footer
+          </div>
+        </div>
+      `);
+    });
+
+    // TODO: SHOULD FIX
+    it('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(`
+        <div>
+          <section>
+            count:
+            world
+            <button>
+              Add, count is
+              world
+            </button>
+          </section>
+        </div>
+      `);
+    });
+  });
+
+  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.fails('should apply styles number correctly', ({ container }) => {
+      function App() {
+        return <h1 style={{ fontSize: 12 }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.fontSize).toBe('12px');
+    });
+
+    it('should apply styles empty correctly', ({ container }) => {
+      function App() {
+        return <h1 style={{ fontSize: '' }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.fontSize).toBe('');
+    });
+
+    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');
+    });
+
+    it('should handle style object', ({ container }) => {
+      const color = 'red';
+
+      function App() {
+        const style = { color };
+        return <h1 style={style}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.color).toBe('red');
+    });
+
+    it('should update style', ({ container }) => {
+      function App() {
+        let color = 'red';
+        return (
+          <h1 style={{ color }} onClick={() => (color = 'blue')}>
+            hello world!!!
+          </h1>
+        );
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.color).toBe('red');
+      h1.click();
+      expect(h1.style.color).toBe('blue');
+    });
+
+    it('should update when object style changed', ({ container }) => {
+      function App() {
+        let style = { color: 'red', fontSize: '20px' };
+        return (
+          <div
+            style={style}
+            onClick={() => {
+              style = { color: 'blue', height: '20px' };
+            }}
+          >
+            hello world!!!
+          </div>
+        );
+      }
+
+      render(App, container);
+      const div = container.querySelector('div');
+      expect(div.style.color).toBe('red');
+      expect(div.style.fontSize).toBe('20px');
+      expect(div.style.height).toBe('');
+      div.click();
+      expect(div.style.color).toBe('blue');
+      expect(div.style.height).toBe('20px');
+      expect(div.style.fontSize).toBe('');
+    });
+  });
+
+  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();
+    });
+
+    it('should support inline event update', ({ container }) => {
+      function App() {
+        let count = 0;
+        return <button onClick={() => (count += 1)}>add:{count}</button>;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toEqual('<button>add:0</button>');
+      const button = container.querySelector('button');
+      button.click();
+      expect(container.innerHTML).toEqual('<button>add:1</button>');
+    });
+
+    it('should support inline event for component props', ({ container }) => {
+      function Button({ onClick, children }) {
+        return <button onClick={onClick}>{children}</button>;
+      }
+
+      function App() {
+        let value = '';
+
+        return <Button onClick={() => (value = 'World')}>Hello {value}!</Button>;
+      }
+
+      render(App, container);
+      expect(container.innerHTML).toEqual('<button>Hello !</button>');
+      const button = container.querySelector('button')!;
+      button.click();
+      expect(container.innerHTML).toEqual('<button>Hello World!</button>');
+    });
+  });
+
+  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/state.test.tsx
+++ b/packages/inula-next/test/state.test.tsx
@ -0,0 +1,375 @@
+/*
+ * 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('Declare state', () => {
+  it('Should correctly declare and render a string state variable', ({ container }) => {
+    function StringState() {
+      let str = 'Hello, World!';
+      return <p>{str}</p>;
+    }
+    render(StringState, container);
+    expect(container.innerHTML).toBe('<p>Hello, World!</p>');
+  });
+
+  it('Should correctly declare and render a number state variable', ({ container }) => {
+    function NumberState() {
+      let num = 42;
+      return <p>{num}</p>;
+    }
+    render(NumberState, container);
+    expect(container.innerHTML).toBe('<p>42</p>');
+  });
+
+  it('Should correctly declare and render a boolean state variable', ({ container }) => {
+    function BooleanState() {
+      let bool = true;
+      return <p>{bool.toString()}</p>;
+    }
+    render(BooleanState, container);
+    expect(container.innerHTML).toBe('<p>true</p>');
+  });
+
+  it('Should correctly declare and render an array state variable', ({ container }) => {
+    function ArrayState() {
+      let arr = [1, 2, 3];
+      return <p>{arr.join(', ')}</p>;
+    }
+    render(ArrayState, container);
+    expect(container.innerHTML).toBe('<p>1, 2, 3</p>');
+  });
+
+  it('Should correctly declare and render an object state variable', ({ container }) => {
+    function ObjectState() {
+      let obj = { name: 'John', age: 30 };
+      return <p>{`${obj.name}, ${obj.age}`}</p>;
+    }
+    render(ObjectState, container);
+    expect(container.innerHTML).toBe('<p>John, 30</p>');
+  });
+
+  it('Should correctly declare and render a map state variable', ({ container }) => {
+    function MapState() {
+      let map = new Map([
+        ['key1', 'value1'],
+        ['key2', 'value2'],
+      ]);
+      return (
+        <p>
+          {Array.from(map)
+            .map(([k, v]) => `${k}:${v}`)
+            .join(', ')}
+        </p>
+      );
+    }
+    render(MapState, container);
+    expect(container.innerHTML).toBe('<p>key1:value1, key2:value2</p>');
+  });
+
+  it('Should correctly declare and render a set state variable', ({ container }) => {
+    function SetState() {
+      let set = new Set([1, 2, 3]);
+      return <p>{Array.from(set).join(', ')}</p>;
+    }
+    render(SetState, container);
+    expect(container.innerHTML).toBe('<p>1, 2, 3</p>');
+  });
+});
+
+describe('Update state', () => {
+  it('Should correctly update and render a string state variable', ({ container }) => {
+    let updateStr: () => void;
+    function StringState() {
+      let str = 'Hello';
+      updateStr = () => {
+        str = 'Hello, World!';
+      };
+      return <p>{str}</p>;
+    }
+    render(StringState, container);
+    expect(container.innerHTML).toBe('<p>Hello</p>');
+    updateStr();
+    expect(container.innerHTML).toBe('<p>Hello, World!</p>');
+  });
+
+  it('Should correctly update and render a number state variable', ({ container }) => {
+    let updateNum: () => void;
+    function NumberState() {
+      let num = 42;
+      updateNum = () => {
+        num = 84;
+      };
+      return <p>{num}</p>;
+    }
+    render(NumberState, container);
+    expect(container.innerHTML).toBe('<p>42</p>');
+    updateNum();
+    expect(container.innerHTML).toBe('<p>84</p>');
+  });
+
+  it('Should correctly update and render a boolean state variable', ({ container }) => {
+    let toggleBool: () => void;
+    function BooleanState() {
+      let bool = true;
+      toggleBool = () => {
+        bool = !bool;
+      };
+      return <p>{bool.toString()}</p>;
+    }
+    render(BooleanState, container);
+    expect(container.innerHTML).toBe('<p>true</p>');
+    toggleBool();
+    expect(container.innerHTML).toBe('<p>false</p>');
+  });
+
+  it('Should correctly update and render an object state variable', ({ container }) => {
+    let updateObj: () => void;
+    function ObjectState() {
+      let obj = { name: 'John', age: 30 };
+      updateObj = () => {
+        obj.age = 31;
+      };
+      return <p>{`${obj.name}, ${obj.age}`}</p>;
+    }
+    render(ObjectState, container);
+    expect(container.innerHTML).toBe('<p>John, 30</p>');
+    updateObj();
+    expect(container.innerHTML).toBe('<p>John, 31</p>');
+  });
+
+  it('Should correctly handle increment operations (n++)', ({ container }) => {
+    let increment: () => void;
+    function IncrementState() {
+      let count = 0;
+      increment = () => {
+        count++;
+      };
+      return <p>{count}</p>;
+    }
+    render(IncrementState, container);
+    expect(container.innerHTML).toBe('<p>0</p>');
+    increment();
+    expect(container.innerHTML).toBe('<p>1</p>');
+  });
+
+  it('Should correctly handle decrement operations (n--)', ({ container }) => {
+    let decrement: () => void;
+    function DecrementState() {
+      let count = 5;
+      decrement = () => {
+        count--;
+      };
+      return <p>{count}</p>;
+    }
+    render(DecrementState, container);
+    expect(container.innerHTML).toBe('<p>5</p>');
+    decrement();
+    expect(container.innerHTML).toBe('<p>4</p>');
+  });
+
+  it('Should correctly handle operations (+=)', ({ container }) => {
+    let addValue: (value: number) => void;
+    function AdditionAssignmentState() {
+      let count = 10;
+      addValue = (value: number) => {
+        count += value;
+      };
+      return <p>{count}</p>;
+    }
+    render(AdditionAssignmentState, container);
+    expect(container.innerHTML).toBe('<p>10</p>');
+    addValue(5);
+    expect(container.innerHTML).toBe('<p>15</p>');
+    addValue(-3);
+    expect(container.innerHTML).toBe('<p>12</p>');
+  });
+
+  it('Should correctly handle operations (-=)', ({ container }) => {
+    let subtractValue: (value: number) => void;
+    function SubtractionAssignmentState() {
+      let count = 20;
+      subtractValue = (value: number) => {
+        count -= value;
+      };
+      return <p>{count}</p>;
+    }
+    render(SubtractionAssignmentState, container);
+    expect(container.innerHTML).toBe('<p>20</p>');
+    subtractValue(7);
+    expect(container.innerHTML).toBe('<p>13</p>');
+    subtractValue(-4);
+    expect(container.innerHTML).toBe('<p>17</p>');
+  });
+
+  it('Should correctly update and render a state variable as an index of array', ({ container }) => {
+    let updateIndex: () => void;
+    function ArrayIndexState() {
+      const items = ['Apple', 'Banana', 'Cherry', 'Date'];
+      let index = 0;
+      updateIndex = () => {
+        index = (index + 1) % items.length;
+      };
+      return <p>{items[index]}</p>;
+    }
+    render(ArrayIndexState, container);
+    expect(container.innerHTML).toBe('<p>Apple</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Banana</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Cherry</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Date</p>');
+    updateIndex();
+    expect(container.innerHTML).toBe('<p>Apple</p>');
+  });
+
+  it('Should correctly update and render a state variable as a property of an object', ({ container }) => {
+    let updatePerson: () => void;
+    function ObjectPropertyState() {
+      let person = { name: 'Alice', age: 30, job: 'Engineer' };
+      updatePerson = () => {
+        person.age += 1;
+        person.job = 'Senior Engineer';
+      };
+      return (
+        <div>
+          <p>Name: {person.name}</p>
+          <p>Age: {person.age}</p>
+          <p>Job: {person.job}</p>
+        </div>
+      );
+    }
+    render(ObjectPropertyState, container);
+    expect(container.innerHTML).toBe('<div><p>Name: Alice</p><p>Age: 30</p><p>Job: Engineer</p></div>');
+    updatePerson();
+    expect(container.innerHTML).toBe('<div><p>Name: Alice</p><p>Age: 31</p><p>Job: Senior Engineer</p></div>');
+  });
+
+  it('Should correctly update and render an array state variable - push operation', ({ container }) => {
+    let pushItem: () => void;
+    function ArrayPushState() {
+      let items = ['Apple', 'Banana'];
+      pushItem = () => {
+        items.push('Cherry');
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayPushState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana</p>');
+    pushItem();
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - pop operation', ({ container }) => {
+    let popItem: () => void;
+    function ArrayPopState() {
+      let items = ['Apple', 'Banana', 'Cherry'];
+      popItem = () => {
+        items.pop();
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayPopState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+    popItem();
+    expect(container.innerHTML).toBe('<p>Apple, Banana</p>');
+  });
+
+  it('Should correctly update and render an array state variable - unshift operation', ({ container }) => {
+    let unshiftItem: () => void;
+    function ArrayUnshiftState() {
+      let items = ['Banana', 'Cherry'];
+      unshiftItem = () => {
+        items.unshift('Apple');
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayUnshiftState, container);
+    expect(container.innerHTML).toBe('<p>Banana, Cherry</p>');
+    unshiftItem();
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - shift operation', ({ container }) => {
+    let shiftItem: () => void;
+    function ArrayShiftState() {
+      let items = ['Apple', 'Banana', 'Cherry'];
+      shiftItem = () => {
+        items.shift();
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayShiftState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry</p>');
+    shiftItem();
+    expect(container.innerHTML).toBe('<p>Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - splice operation', ({ container }) => {
+    let spliceItems: () => void;
+    function ArraySpliceState() {
+      let items = ['Apple', 'Banana', 'Cherry', 'Date'];
+      spliceItems = () => {
+        items.splice(1, 2, 'Elderberry', 'Fig');
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArraySpliceState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry, Date</p>');
+    spliceItems();
+    expect(container.innerHTML).toBe('<p>Apple, Elderberry, Fig, Date</p>');
+  });
+
+  it('Should correctly update and render an array state variable - filter operation', ({ container }) => {
+    let filterItems: () => void;
+    function ArrayFilterState() {
+      let items = ['Apple', 'Banana', 'Cherry', 'Date'];
+      filterItems = () => {
+        items = items.filter(item => item.length > 5);
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayFilterState, container);
+    expect(container.innerHTML).toBe('<p>Apple, Banana, Cherry, Date</p>');
+    filterItems();
+    expect(container.innerHTML).toBe('<p>Banana, Cherry</p>');
+  });
+
+  it('Should correctly update and render an array state variable - map operation', ({ container }) => {
+    let mapItems: () => void;
+    function ArrayMapState() {
+      let items = ['apple', 'banana', 'cherry'];
+      mapItems = () => {
+        items = items.map(item => item.toUpperCase());
+      };
+      return <p>{items.join(', ')}</p>;
+    }
+    render(ArrayMapState, container);
+    expect(container.innerHTML).toBe('<p>apple, banana, cherry</p>');
+    mapItems();
+    expect(container.innerHTML).toBe('<p>APPLE, BANANA, CHERRY</p>');
+  });
+});
--- 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/test/watch.test.tsx
+++ b/packages/inula-next/test/watch.test.tsx
@ -0,0 +1,325 @@
+/*
+ * 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('Watch', () => {
+  it('Should correctly watch variable', ({ container }) => {
+    let increment: () => void;
+    function TrafficLight() {
+      let lightIndex = 0;
+      let index = 0;
+      increment = () => {
+        lightIndex = lightIndex + 1;
+      };
+
+      watch(() => {
+        index = lightIndex;
+      });
+      return <div>{index}</div>;
+    }
+    render(TrafficLight, container);
+    expect(container.innerHTML).toBe('<div>0</div>');
+    increment();
+    expect(container.innerHTML).toBe('<div>1</div>');
+  });
+  it('Should correctly watch and update based on string state changes', ({ container }) => {
+    let updateState: (newState: string) => void;
+    function StringComponent() {
+      let state = 'initial';
+      let watchedState = '';
+      updateState = (newState: string) => {
+        state = newState;
+      };
+      watch(() => {
+        watchedState = state;
+      });
+      return <div>{watchedState}</div>;
+    }
+    render(StringComponent, container);
+    expect(container.innerHTML).toBe('<div>initial</div>');
+    updateState('updated');
+    expect(container.innerHTML).toBe('<div>updated</div>');
+  });
+
+  it('Should correctly watch and update based on number state changes', ({ container }) => {
+    let updateState: (newState: number) => void;
+    function NumberComponent() {
+      let state = 0;
+      let watchedState = 0;
+      updateState = (newState: number) => {
+        state = newState;
+      };
+      watch(() => {
+        watchedState = state;
+      });
+      return <div>{watchedState}</div>;
+    }
+    render(NumberComponent, container);
+    expect(container.innerHTML).toBe('<div>0</div>');
+    updateState(42);
+    expect(container.innerHTML).toBe('<div>42</div>');
+  });
+
+  it('Should correctly watch and update based on boolean state changes', ({ container }) => {
+    let updateState: (newState: boolean) => void;
+    function BooleanComponent() {
+      let state = false;
+      let watchedState = false;
+      updateState = (newState: boolean) => {
+        state = newState;
+      };
+      watch(() => {
+        watchedState = state;
+      });
+      return <div>{watchedState.toString()}</div>;
+    }
+    render(BooleanComponent, container);
+    expect(container.innerHTML).toBe('<div>false</div>');
+    updateState(true);
+    expect(container.innerHTML).toBe('<div>true</div>');
+  });
+
+  it('Should correctly watch and update based on array state changes', ({ container }) => {
+    let updateState: (newState: number[]) => void;
+    function ArrayComponent() {
+      let state: number[] = [];
+      let watchedState: number[] = [];
+      updateState = (newState: number[]) => {
+        state = newState;
+      };
+      watch(() => {
+        watchedState = [...state];
+      });
+      return <div>{watchedState.join(',')}</div>;
+    }
+    render(ArrayComponent, container);
+    expect(container.innerHTML).toBe('<div></div>');
+    updateState([1, 2, 3]);
+    expect(container.innerHTML).toBe('<div>1,2,3</div>');
+  });
+
+  it('Should correctly watch and update based on object state changes', ({ container }) => {
+    let updateState: (newState: { [key: string]: any }) => void;
+    function ObjectComponent() {
+      let state = {};
+      let watchedState = {};
+      updateState = (newState: { [key: string]: any }) => {
+        state = newState;
+      };
+      watch(() => {
+        watchedState = { ...state };
+      });
+      return <div>{JSON.stringify(watchedState)}</div>;
+    }
+    render(ObjectComponent, container);
+    expect(container.innerHTML).toBe('<div>{}</div>');
+    updateState({ key: 'value' });
+    expect(container.innerHTML).toBe('<div>{"key":"value"}</div>');
+  });
+
+  it('Should correctly watch conditional expressions', ({ container }) => {
+    let updateX: (value: number) => void;
+    function ConditionalComponent() {
+      let x = 5;
+      let result = '';
+      updateX = (value: number) => {
+        x = value;
+      };
+      watch(() => {
+        result = x > 10 ? 'Greater than 10' : 'Less than or equal to 10';
+      });
+      return <div>{result}</div>;
+    }
+    render(ConditionalComponent, container);
+    expect(container.innerHTML).toBe('<div>Less than or equal to 10</div>');
+    updateX(15);
+    expect(container.innerHTML).toBe('<div>Greater than 10</div>');
+  });
+
+  it('Should correctly watch template strings', ({ container }) => {
+    let updateName: (value: string) => void;
+    let updateAge: (value: number) => void;
+    function TemplateStringComponent() {
+      let name = 'John';
+      let age = 30;
+      let message = '';
+      updateName = (value: string) => {
+        name = value;
+      };
+      updateAge = (value: number) => {
+        age = value;
+      };
+      watch(() => {
+        message = `${name} is ${age} years old`;
+      });
+      return <div>{message}</div>;
+    }
+    render(TemplateStringComponent, container);
+    expect(container.innerHTML).toBe('<div>John is 30 years old</div>');
+    updateName('Jane');
+    updateAge(25);
+    expect(container.innerHTML).toBe('<div>Jane is 25 years old</div>');
+  });
+
+  it('Should correctly watch arithmetic operations', ({ container }) => {
+    let updateX: (value: number) => void;
+    let updateY: (value: number) => void;
+    function ArithmeticComponent() {
+      let x = 5;
+      let y = 3;
+      let result = 0;
+      updateX = (value: number) => {
+        x = value;
+      };
+      updateY = (value: number) => {
+        y = value;
+      };
+      watch(() => {
+        result = x + y * 2 - x / y;
+      });
+      return <div>{result}</div>;
+    }
+    render(ArithmeticComponent, container);
+    expect(container.innerHTML).toBe('<div>9.333333333333334</div>');
+    updateX(10);
+    updateY(5);
+    expect(container.innerHTML).toBe('<div>18</div>');
+  });
+
+  it('Should correctly watch property access and indexing', ({ container }) => {
+    let updateObj: (value: { [key: string]: any }) => void;
+    let updateArr: (value: number[]) => void;
+    function AccessComponent() {
+      let obj = { a: 1, b: 2 };
+      let arr = [1, 2, 3];
+      let result = 0;
+      updateObj = (value: { [key: string]: any }) => {
+        obj = value;
+      };
+      updateArr = (value: number[]) => {
+        arr = value;
+      };
+      watch(() => {
+        result = obj.a + arr[1];
+      });
+      return <div>{result}</div>;
+    }
+    render(AccessComponent, container);
+    expect(container.innerHTML).toBe('<div>3</div>');
+    updateObj({ a: 5, b: 6 });
+    updateArr([0, 10, 20]);
+    expect(container.innerHTML).toBe('<div>15</div>');
+  });
+
+  it('Should correctly watch function calls', ({ container }) => {
+    let updateX: (value: number) => void;
+    function FunctionCallComponent() {
+      let x = 5;
+      let result = 0;
+      const square = (n: number) => n * n;
+      updateX = (value: number) => {
+        x = value;
+      };
+      watch(() => {
+        result = square(x);
+      });
+      return <div>{result}</div>;
+    }
+    render(FunctionCallComponent, container);
+    expect(container.innerHTML).toBe('<div>25</div>');
+    updateX(10);
+    expect(container.innerHTML).toBe('<div>100</div>');
+  });
+
+  it('Should correctly watch various number operations', ({ container }) => {
+    let updateX: (value: number) => void;
+    function NumberOpsComponent() {
+      let x = 16;
+      let result = '';
+      updateX = (value: number) => {
+        x = value;
+      };
+      watch(() => {
+        result = `sqrt: ${Math.sqrt(x)}, floor: ${Math.floor(x / 3)}, pow: ${Math.pow(x, 2)}`;
+      });
+      return <div>{result}</div>;
+    }
+    render(NumberOpsComponent, container);
+    expect(container.innerHTML).toBe('<div>sqrt: 4, floor: 5, pow: 256</div>');
+    updateX(25);
+    expect(container.innerHTML).toBe('<div>sqrt: 5, floor: 8, pow: 625</div>');
+  });
+
+  it('Should correctly watch map operations', ({ container }) => {
+    let updateArr: (value: number[]) => void;
+    function MapComponent() {
+      let arr = [1, 2, 3, 4, 5];
+      let result: number[] = [];
+      updateArr = (value: number[]) => {
+        arr = value;
+      };
+      watch(() => {
+        result = arr.map(x => x * 2);
+      });
+      return <div>{result.join(', ')}</div>;
+    }
+    render(MapComponent, container);
+    expect(container.innerHTML).toBe('<div>2, 4, 6, 8, 10</div>');
+    updateArr([10, 20, 30]);
+    expect(container.innerHTML).toBe('<div>20, 40, 60</div>');
+  });
+
+  it('Should correctly watch multiple variables', ({ container }) => {
+    let updateX: (value: number) => void;
+    let updateY: (value: string) => void;
+    let updateZ: (value: boolean) => void;
+    function MultiWatchComponent() {
+      let x = 5;
+      let y = 'hello';
+      let z = true;
+      let result = '';
+      updateX = (value: number) => {
+        x = value;
+      };
+      updateY = (value: string) => {
+        y = value;
+      };
+      updateZ = (value: boolean) => {
+        z = value;
+      };
+      watch(() => {
+        result = `x: ${x}, y: ${y}, z: ${z}`;
+      });
+      return <div>{result}</div>;
+    }
+    render(MultiWatchComponent, container);
+    expect(container.innerHTML).toBe('<div>x: 5, y: hello, z: true</div>');
+    updateX(10);
+    updateY('world');
+    updateZ(false);
+    expect(container.innerHTML).toBe('<div>x: 10, y: world, z: false</div>');
+  });
+});
--- 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,39 @@
+/*
+ * 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 '@openinula/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: [
+    inula({
+      excludeFiles: '**/src/**/*{js,jsx,ts,tsx}',
+    }),
+  ],
+  test: {
+    environment: 'jsdom', // or 'jsdom', 'node'
+  },
+});
--- a/packages/inula-request/babel.config.js
+++ b/packages/inula-request/babel.config.js
@ -14,11 +14,5 @@
 */

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

 export default {
  input: './index.ts',
-  output: [{
-    file: 'dist/inulaRequest.js',
-    format: 'umd',
-    exports: 'named',
-    name: 'inulaRequest',
-    sourcemap: false,
-  }, {
-    file: 'dist/inulaRequest.esm-browser.js',
-    format: 'esm',
-  }],
+  output: [
+    {
+      file: 'dist/inulaRequest.js',
+      format: 'umd',
+      exports: 'named',
+      name: 'inulaRequest',
+      sourcemap: false,
+    },
+    {
+      file: 'dist/inulaRequest.esm-browser.js',
+      format: 'esm',
+    },
+  ],
  plugins: [
    resolve(),
    commonjs(),
--- a/packages/inula-router/src/configs/package.json
+++ b/packages/inula-router/src/configs/package.json
@ -1,9 +0,0 @@
-{
-  "module": "./esm/connectRouter.js",
-  "main": "./cjs/connectRouter.js",
-  "types": "./@types/index.d.ts",
-  "peerDependencies": {
-    "react-redux": "^6.0.0 || ^7.1.0",
-    "redux": "^3.6.0 || ^4.0.0"
-  }
-}
--- 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/package.json
+++ b/packages/inula/package.json
@ -4,7 +4,7 @@
  "keywords": [
    "openinula"
  ],
-  "version": "0.0.4",
+  "version": "0.0.1",
  "homepage": "",
  "bugs": "",
  "license": "MulanPSL2",
--- 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: [{
-      file: outputResolve('jsx-runtime.js'),
-      format: 'cjs',
-    }, {
-      file: outputResolve('jsx-runtime.esm-browser.js'),
-      format: 'esm',
-    }],
+    output: [
+      {
+        file: outputResolve('jsx-runtime.js'),
+        format: 'cjs',
+      },
+      {
+        file: outputResolve('jsx-runtime.esm-browser.js'),
+        format: 'esm',
+      },
+    ],
    plugins: [...getBasicPlugins(mode)],
  };
 }
--- a/packages/inula/src/inulax/types.ts
+++ b/packages/inula/src/inulax/types.ts
@ -31,7 +31,11 @@ export interface IObserver {
  clearByVNode: (vNode: any) => void;
 }

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

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

 export type StoreActions<S extends Record<string, unknown>, A extends UserActions<S>> = {
  [K in keyof A]: Action<A[K], S>;
--- a/packages/transpiler/babel-api/README.md
+++ b/packages/transpiler/babel-api/README.md
@ -0,0 +1,24 @@
+# @openinlua/babel-api
+A package that encapsulates the babel API for use in the transpiler.
+
+To implement the dependency injection pattern, the package exports a function that registers the babel API in the
+transpiler.
+
+```ts
+import { registerBabelAPI } from '@openinlua/babel-api';
+
+function plugin(api: typeof babel) {
+  registerBabelAPI(api);
+
+  // Your babel plugin code here.
+}
+```
+
+And then you can import to use it.
+> types can use as a `type` or as a `namespace` for the babel API.
+
+```ts
+import { types as t } from '@openinlua/babel-api';
+
+t.isIdentifier(node as t.Node);
+```
--- a/packages/transpiler/babel-api/package.json
+++ b/packages/transpiler/babel-api/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@openinula/babel-api",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "src/index.mjs",
+  "typings": "src/index.d.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/types": "^7.24.0",
+    "@types/babel__core": "^7.20.5"
+  }
+}
--- a/packages/transpiler/babel-api/src/index.d.ts
+++ b/packages/transpiler/babel-api/src/index.d.ts
@ -0,0 +1,10 @@
+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;
+
+export { traverse } from '@babel/core';
--- a/packages/transpiler/babel-api/src/index.mjs
+++ b/packages/transpiler/babel-api/src/index.mjs
@ -0,0 +1,42 @@
+/** @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 function traverse(node, visitor) {
+  getBabelApi().traverse(node, visitor);
+}
+
+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,25 @@
+# babel-preset-inula-next
+
+## 0.0.4
+
+### Patch Changes
+
+- support hook
+- Updated dependencies
+  - @openinula/reactivity-parser@0.0.2
+  - @openinula/view-generator@1.0.0
+  - @openinula/jsx-view-parser@0.0.2
+  - @openinula/babel-api@1.0.1
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @openinula/class-transformer@0.0.2
+
+## 0.0.2
+
+### Patch Changes
+
+- 2f9d373: feat: change babel import
--- a/Show More
+++ b/Show More