Merge pull request 'feat: add runtime and alter parser' (#7) from iandx/inula:API-2.0 into API-2.0

2024-10-16 09:46:23 +08:00 · 2024-10-16 09:46:23 +08:00 · cd9bddbe10
parent b15d746697 4657df9532
commit cd9bddbe10
243 changed files with 24017 additions and 12003 deletions
--- 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/package.json
+++ b/demos/benchmark/package.json
@ -12,14 +12,14 @@
    "@babel/standalone": "^7.22.4",
    "@openinula/next": "workspace:*",
    "@iandx/easy-css": "^0.10.14",
-    "babel-preset-inula-next": "workspace:*"
+    "@openinula/babel-preset-inula-next": "workspace:*"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
-    "vite-plugin-inula-next": "workspace:*"
+    "@openinula/vite-plugin-inula-next": "workspace:*"
  },
  "keywords": [
-    "dlight.js"
+    "inula-next"
  ]
 }
--- a/demos/benchmark/src/main.jsx
+++ b/demos/benchmark/src/main.jsx
@ -74,31 +74,39 @@ function Button({ id, text, fn }) {
 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;
  }
@ -124,19 +132,21 @@ function App() {
      </div>
      <table class="table table-hover table-striped test-data">
        <tbody>
-          <for array={data} item={{ id, label }} key={id}>
-            <tr class={selected === id ? 'danger' : ''}>
-              <td class="col-md-1" textContent={id} />
-              <td class="col-md-4">
+          <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 class="col-md-1">
+                <td className="col-md-1">
                  <a onClick={remove.bind(this, id)}>
-                  <span class="glyphicon glyphicon-remove" aria-hidden="true" />
+                    <span className="glyphicon glyphicon-remove" aria-hidden="true" />
                  </a>
                </td>
-              <td class="col-md-6" />
+                <td className="col-md-6" />
              </tr>
+            )}
          </for>
        </tbody>
      </table>
--- a/demos/benchmark/vite.config.js
+++ b/demos/benchmark/vite.config.js
@ -1,5 +1,5 @@
 import { defineConfig } from 'vite';
-import inula from 'vite-plugin-inula-next';
+import inula from '@openinula/vite-plugin-inula-next';

 export default defineConfig({
  server: {
--- 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/index.html
+++ b/demos/v2/index.html
@ -2,11 +2,11 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8"/>
-  <title>Dlight.JS</title>
+  <title>Inula-Next</title>
  <link rel="stylesheet" href="/src/App.css"/>
 </head>
 <body>
-<div id="main"></div>
+<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
@ -1,7 +1,7 @@
 {
  "name": "dev",
  "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
@ -10,16 +10,15 @@
  },
  "dependencies": {
    "@babel/standalone": "^7.22.4",
-    "@openinula/next": "workspace:*",
-    "@iandx/easy-css": "^0.10.14",
-    "babel-preset-inula-next": "workspace:*"
+    "@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",
-    "vite-plugin-inula-next": "workspace:*"
+    "vite": "^4.4.9"
  },
  "keywords": [
-    "dlight.js"
+    "inula-next"
  ]
 }
--- a/demos/v2/src/App.css
+++ b/demos/v2/src/App.css
@ -1,3 +1,81 @@
-.ok {
-  color: var(--color-ok);
+/* 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
@ -1,17 +1,95 @@
-import { View, render } from '@openinula/next';
+import { render } from '@openinula/next';

-function MyComp() {
-  let count = 0;
-  const db = count * 2;
+const TreeNode = ({ node, onToggle }) => {
+  let isExpanded = true;
+
+  const handleToggle = () => {
+    isExpanded = !isExpanded;
+    onToggle(node.id, !isExpanded);
+  };

  return (
-    <>
-      <h1 className="123">Hello dlight fn comp</h1>
-      <section>
-        count: {count}, double is: {db}
-        <button onClick={() => (count += 1)}>Add</button>
-      </section>
-    </>
+    <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(MyComp, 'main');
+
+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/packages/transpiler/babel-inula-next-core/test/presets.ts
+++ b/packages/transpiler/babel-inula-next-core/test/presets.ts
@ -13,12 +13,9 @@
 * See the Mulan PSL v2 for more details.
 */

-import plugin from '../dist';
-import { transform as transformWithBabel } from '@babel/core';
-
-export function transform(code: string) {
-  return transformWithBabel(code, {
-    presets: [plugin],
-    filename: 'test.tsx',
-  })?.code;
+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/vite.config.ts
+++ b/demos/v2/vite.config.ts
@ -1,7 +1,10 @@
 import { defineConfig } from 'vite';
-import inula from 'vite-plugin-inula-next';
+import inula from '@openinula/vite-plugin-inula-next';

 export default defineConfig({
+  build: {
+    minify: false, // 设置为 false 可以关闭代码压缩
+  },
  server: {
    port: 4320,
  },
--- 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
@ -1,13 +1,9 @@
 {
  "name": "@openinula/store",
-  "version": "0.0.0",
-  "description": "DLight shared store",
-  "author": {
-    "name": "IanDx",
-    "email": "iandxssxx@gmail.com"
-  },
+  "version": "0.0.1",
+  "description": "Inula shared store",
  "keywords": [
-    "dlight.js"
+    "Inula-Next"
  ],
  "license": "MIT",
  "files": [
--- a/packages/inula-next/README.md
+++ b/packages/inula-next/README.md
@ -1,2 +1,2 @@
-# DLight Main Package
+# Inula-Next Main Package
 See the website's documentations for usage.
--- a/packages/inula-next/package.json
+++ b/packages/inula-next/package.json
@ -1,10 +1,6 @@
 {
  "name": "@openinula/next",
-  "version": "0.0.1",
-  "author": {
-    "name": "IanDx",
-    "email": "iandxssxx@gmail.com"
-  },
+  "version": "0.0.2",
  "keywords": [
    "inula"
  ],
@ -18,27 +14,28 @@
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
  "scripts": {
-    "build": "tsup --sourcemap && cp src/index.d.ts dist/ && cp -r src/types dist/",
+    "build": "tsup --sourcemap",
    "test": "vitest --ui"
  },
  "dependencies": {
    "csstype": "^3.1.3",
-    "@openinula/store": "workspace:*"
+    "@openinula/next-shared": "workspace:*"
  },
  "devDependencies": {
    "tsup": "^6.5.0",
-    "vite-plugin-inula-next": "workspace:*",
-    "vitest": "^1.2.2"
+    "@openinula/vite-plugin-inula-next": "workspace:*",
+    "vitest": "2.0.5"
  },
  "tsup": {
    "entry": [
-      "src/index.js"
+      "src/index.ts"
    ],
    "format": [
      "cjs",
      "esm"
    ],
    "clean": true,
-    "minify": 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.js
+++ b/packages/inula-next/src/CompNode.js
@ -1,373 +0,0 @@
-import { DLNode, DLNodeType } from './DLNode';
-import { forwardHTMLProp } from './HTMLNode';
-import { DLStore, cached } from './store';
-import { schedule } from './scheduler';
-
-/**
- * @class
- * @extends import('./DLNode').DLNode
- */
-export class CompNode extends DLNode {
-  /**
-   * @brief Constructor, Comp type
-   * @internal
-   *  * key - private property key
-   *  * $$key - dependency number, e.g. 0b1, 0b10, 0b100
-   *  * $s$key - set of properties that depend on this property
-   *  * $p$key - exist if this property is a prop
-   *  * $e$key - exist if this property is an env
-   *  * $en$key - exist if this property is an env, and it's the innermost env that contains this env
-   *  * $w$key - exist if this property is a watcher
-   *  * $f$key - a function that returns the value of this property, called when the property's dependencies change
-   *  * _$children - children nodes of type PropView
-   *  * _$contentKey - the key key of the content prop
-   *  * _$forwardProps - exist if this node is forwarding props
-   *  * _$forwardPropsId - the keys of the props that this node is forwarding, collected in _$setForwardProp
-   *  * _$forwardPropsSet - contain all the nodes that are forwarding props to this node, collected with _$addForwardProps
-   */
-  constructor() {
-    super(DLNodeType.Comp);
-  }
-
-  /**
-   * @brief Init function, called explicitly in the subclass's constructor
-   * @param props - Object containing properties
-   * @param content - Content to be used
-   * @param children - Child nodes
-   * @param forwardPropsScope - Scope for forwarding properties
-   */
-  _$init(props, content, children, forwardPropsScope) {
-    this._$notInitd = true;
-
-    // ---- Forward props first to allow internal props to override forwarded props
-    if (forwardPropsScope) forwardPropsScope._$addForwardProps(this);
-    if (content) this._$setContent(() => content[0], content[1]);
-    if (props)
-      props.forEach(([key, value, deps]) => {
-        if (key === 'props') return this._$setProps(() => value, deps);
-        this._$setProp(key, () => value, deps);
-      });
-    if (children) this._$children = children;
-
-    // ---- Add envs
-    DLStore.global.DLEnvStore &&
-      Object.entries(DLStore.global.DLEnvStore.envs).forEach(([key, [value, envNode]]) => {
-        if (key === '_$catchable') {
-          this._$catchable = value;
-          return;
-        }
-        if (!(`$e$${key}` in this)) return;
-        envNode.addNode(this);
-        this._$initEnv(key, value, envNode);
-      });
-
-    const willCall = () => {
-      this._$callUpdatesBeforeInit();
-      this.didMount && DLNode.addDidMount(this, this.didMount.bind(this));
-      this.willUnmount && DLNode.addWillUnmount(this, this.willUnmount.bind(this));
-      DLNode.addDidUnmount(this, this._$setUnmounted.bind(this));
-      this.didUnmount && DLNode.addDidUnmount(this, this.didUnmount.bind(this));
-      this.willMount?.();
-      this._$nodes = this.Body?.() ?? [];
-    };
-
-    if (this._$catchable) {
-      this._$catchable(willCall)();
-      if (this._$update) this._$update = this._$catchable(this._$update.bind(this));
-      this._$updateDerived = this._$catchable(this._$updateDerived.bind(this));
-      delete this._$catchable;
-    } else {
-      willCall();
-    }
-  }
-
-  _$setUnmounted() {
-    this._$unmounted = true;
-  }
-
-  /**
-   * @brief Call updates manually before the node is mounted
-   */
-  _$callUpdatesBeforeInit() {
-    const protoProps = Object.getOwnPropertyNames(Object.getPrototypeOf(this));
-    const ownProps = Object.getOwnPropertyNames(this);
-    const allProps = [...protoProps, ...ownProps];
-    allProps.forEach(key => {
-      // ---- Run watcher
-      if (key.startsWith('$w$')) return this[key.slice(3)]();
-      // ---- Run model update
-      if (key.startsWith('$md$')) {
-        const realKey = key.slice(4);
-        this[realKey] = this[realKey]();
-        return;
-      }
-      // ---- Run derived value
-      if (key.startsWith('$f$')) {
-        const realKey = key.slice(3);
-        this[realKey] = this[key];
-        this._$updateDerived(realKey);
-      }
-    });
-    delete this._$notInitd;
-  }
-
-  /**
-   * @brief Set all the props to forward
-   * @param key
-   * @param value
-   * @param deps
-   */
-  _$setPropToForward(key, value, deps) {
-    this._$forwardPropsSet.forEach(node => {
-      const isContent = key === '_$content';
-      if (node._$dlNodeType === DLNodeType.Comp) {
-        if (isContent) node._$setContent(() => value, deps);
-        else node._$setProp(key, () => value, deps);
-        return;
-      }
-      if (node instanceof HTMLElement) {
-        if (isContent) key = 'textContent';
-        forwardHTMLProp(node, key, () => value, deps);
-      }
-    });
-  }
-
-  /**
-   * @brief Define forward props
-   * @param key
-   * @param value
-   */
-  _$setForwardProp(key, valueFunc, deps) {
-    const notInitd = '_$notInitd' in this;
-    if (!notInitd && this._$cache(key, deps)) return;
-    const value = valueFunc();
-    if (key === '_$content' && this._$contentKey) {
-      this[this._$contentKey] = value;
-      this._$updateDerived(this._$contentKey);
-    }
-    this[key] = value;
-    this._$updateDerived(key);
-    if (notInitd) this._$forwardPropsId.push(key);
-    else this._$setPropToForward(key, value, deps);
-  }
-
-  /**
-   * @brief Add a node to the set of nodes that are forwarding props to this node and init these props
-   * @param node
-   */
-  _$addForwardProps(node) {
-    this._$forwardPropsSet.add(node);
-    this._$forwardPropsId.forEach(key => {
-      this._$setPropToForward(key, this[key], []);
-    });
-    DLNode.addWillUnmount(node, this._$forwardPropsSet.delete.bind(this._$forwardPropsSet, node));
-  }
-
-  /**
-   * @brief Cache the deps and return true if the deps are the same as the previous deps
-   * @param key
-   * @param deps
-   * @returns
-   */
-  _$cache(key, deps) {
-    if (!deps || !deps.length) return false;
-    const cacheKey = `$cc$${key}`;
-    if (cached(deps, this[cacheKey])) return true;
-    this[cacheKey] = deps;
-    return false;
-  }
-
-  /**
-   * @brief Set the content prop, the key is stored in _$contentKey
-   * @param value
-   */
-  _$setContent(valueFunc, deps) {
-    if ('_$forwardProps' in this) return this._$setForwardProp('_$content', valueFunc, deps);
-    const contentKey = this._$contentKey;
-    if (!contentKey) return;
-    if (this._$cache(contentKey, deps)) return;
-    this[contentKey] = valueFunc();
-    this._$updateDerived(contentKey);
-  }
-
-  /**
-   * @brief Set a prop directly, if this is a forwarded prop, go and init forwarded props
-   * @param key
-   * @param value
-   * @param deps
-   */
-  _$setProp(key, valueFunc, deps) {
-    if ('_$forwardProps' in this) return this._$setForwardProp(key, valueFunc, deps);
-    if (!(`$p$${key}` in this)) {
-      console.warn(`[${key}] is not a prop in ${this.constructor.name}`);
-      return;
-    }
-    if (this._$cache(key, deps)) return;
-    this[key] = valueFunc();
-    this._$updateDerived(key);
-  }
-
-  _$setProps(valueFunc, deps) {
-    if (this._$cache('props', deps)) return;
-    const props = valueFunc();
-    if (!props) return;
-    Object.entries(props).forEach(([key, value]) => {
-      this._$setProp(key, () => value, []);
-    });
-  }
-
-  /**
-   * @brief Init an env, put the corresponding innermost envNode in $en$key
-   * @param key
-   * @param value
-   * @param envNode
-   */
-  _$initEnv(key, value, envNode) {
-    this[key] = value;
-    this[`$en$${key}`] = envNode;
-  }
-
-  // ---- Update functions
-  /**
-   * @brief Update an env, called in EnvNode._$update
-   * @param key
-   * @param value
-   * @param envNode
-   */
-  _$updateEnv(key, value, envNode) {
-    if (!(`$e$${key}` in this)) return;
-    if (envNode !== this[`$en$${key}`]) return;
-    this[key] = value;
-    this._$updateDerived(key);
-  }
-
-  /**
-   * @brief Update a prop
-   */
-  _$ud(exp, key) {
-    this._$updateDerived(key);
-    return exp;
-  }
-
-  /**
-   * @brief Update properties that depend on this property
-   * @param key
-   */
-  _$updateDerived(key) {
-    if ('_$notInitd' in this) return;
-
-    this[`$s$${key}`]?.forEach(k => {
-      if (`$w$${k}` in this) {
-        // ---- Watcher
-        this[k](key);
-      } else if (`$md$${k}` in this) {
-        this[k]._$update();
-      } else {
-        // ---- Regular derived value
-        this[k] = this[`$f$${k}`];
-      }
-    });
-
-    // ---- "trigger-view"
-    this._$updateView(key);
-  }
-
-  _$updateView(key) {
-    if (this._$modelCallee) return this._$updateModelCallee();
-    if (!('_$update' in this)) return;
-    const depNum = this[`$$${key}`];
-    if (!depNum) return;
-    // ---- Collect all depNums that need to be updated
-    if ('_$depNumsToUpdate' in this) {
-      this._$depNumsToUpdate.push(depNum);
-    } else {
-      this._$depNumsToUpdate = [depNum];
-      // ---- Update in the next microtask
-      schedule(() => {
-        // ---- Abort if unmounted
-        if (this._$unmounted) return;
-        const depNums = this._$depNumsToUpdate;
-        if (depNums.length > 0) {
-          const depNum = depNums.reduce((acc, cur) => acc | cur, 0);
-          this._$update(depNum);
-        }
-        delete this._$depNumsToUpdate;
-      });
-    }
-  }
-
-  _$updateModelCallee() {
-    if ('_$depNumsToUpdate' in this) return;
-    this._$depNumsToUpdate = true;
-    // ---- Update in the next microtask
-    Promise.resolve().then(() => {
-      // ---- Abort if unmounted
-      if (this._$unmounted) return;
-      this._$modelCallee._$updateDerived(this._$modelKey);
-      delete this._$depNumsToUpdate;
-    });
-  }
-
-  /**
-   * @brief Update all props and content of the model
-   */
-  static _$updateModel(model, propsFunc, contentFunc) {
-    // ---- Suppress update because top level update will be performed
-    //      directly by the state variable in the model callee, which will
-    //      trigger the update of the model
-    const props = propsFunc() ?? {};
-    const collectedProps = props.s ?? [];
-    props.m?.forEach(([props, deps]) => {
-      Object.entries(props).forEach(([key, value]) => {
-        collectedProps.push([key, value, deps]);
-      });
-    });
-    collectedProps.forEach(([key, value, deps]) => {
-      model._$setProp(key, () => value, deps);
-    });
-    const content = contentFunc();
-    if (content) model._$setContent(() => content[0], content[1]);
-  }
-
-  static _$releaseModel() {
-    delete this._$modelCallee;
-  }
-
-  /**
-   * @brief Inject Dlight model in to a property
-   * @param ModelCls
-   * @param props { m: [props, deps], s: [key, value, deps] }
-   * @param content
-   * @param key
-   * @returns
-   */
-  _$injectModel(ModelCls, propsFunc, contentFunc, key) {
-    const props = propsFunc() ?? {};
-    const collectedProps = props.s ?? [];
-    props.m?.forEach(([props, deps]) => {
-      Object.entries(props).forEach(([key, value]) => {
-        collectedProps.push([key, value, deps]);
-      });
-    });
-    const model = new ModelCls();
-    model._$init(collectedProps, contentFunc(), null, null);
-    model._$modelCallee = this;
-    model._$modelKey = key;
-    model._$update = CompNode._$updateModel.bind(null, model, propsFunc, contentFunc);
-
-    return model;
-  }
-}
-
-// ---- @View -> class Comp extends View
-export const View = CompNode;
-export const Model = CompNode;
-
-/**
- * @brief Run all update functions given the key
- * @param dlNode
- * @param key
- */
-export function update(dlNode, key) {
-  dlNode._$updateDerived(key);
-}
--- a/packages/inula-next/src/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/DLNode.js
+++ b/packages/inula-next/src/DLNode.js
@ -1,210 +0,0 @@
-import { DLStore } from './store';
-
-export const DLNodeType = {
-  Comp: 0,
-  For: 1,
-  Cond: 2,
-  Env: 3,
-  Exp: 4,
-  Snippet: 5,
-  Try: 6,
-};
-
-export class DLNode {
-  /**
-   * @brief Node type: HTML, Text, Custom, For, If, Env, Expression
-   */
-  _$dlNodeType;
-
-  /**
-   * @brief Constructor
-   * @param nodeType
-   * @return {void}
-   */
-  constructor(nodeType) {
-    this._$dlNodeType = nodeType;
-  }
-
-  /**
-   * @brief Node element
-   *  Either one real element for HTMLNode and TextNode
-   *  Or an array of DLNode for CustomNode, ForNode, IfNode, EnvNode, ExpNode
-   */
-  get _$el() {
-    return DLNode.toEls(this._$nodes);
-  }
-
-  /**
-   * @brief Loop all child DLNodes to get all the child elements
-   * @param nodes
-   * @returns HTMLElement[]
-   */
-  static toEls(nodes) {
-    const els = [];
-    this.loopShallowEls(nodes, el => {
-      els.push(el);
-    });
-    return els;
-  }
-
-  // ---- Loop nodes ----
-  /**
-   * @brief Loop all elements shallowly,
-   *  i.e., don't loop the child nodes of dom elements and only call runFunc on dom elements
-   * @param nodes
-   * @param runFunc
-   */
-  static loopShallowEls(nodes, runFunc) {
-    const stack = [...nodes].reverse();
-    while (stack.length > 0) {
-      const node = stack.pop();
-      if (!('_$dlNodeType' in node)) runFunc(node);
-      else node._$nodes && stack.push(...[...node._$nodes].reverse());
-    }
-  }
-
-  /**
-   * @brief Add parentEl to all nodes until the first element
-   * @param nodes
-   * @param parentEl
-   */
-  static addParentEl(nodes, parentEl) {
-    nodes.forEach(node => {
-      if ('_$dlNodeType' in node) {
-        node._$parentEl = parentEl;
-        node._$nodes && DLNode.addParentEl(node._$nodes, parentEl);
-      }
-    });
-  }
-
-  // ---- Flow index and add child elements ----
-  /**
-   * @brief Get the total count of dom elements before the stop node
-   * @param nodes
-   * @param stopNode
-   * @returns total count of dom elements
-   */
-  static getFlowIndexFromNodes(nodes, stopNode) {
-    let index = 0;
-    const stack = [...nodes].reverse();
-    while (stack.length > 0) {
-      const node = stack.pop();
-      if (node === stopNode) break;
-      if ('_$dlNodeType' in node) {
-        node._$nodes && stack.push(...[...node._$nodes].reverse());
-      } else {
-        index++;
-      }
-    }
-    return index;
-  }
-
-  /**
-   * @brief Given an array of nodes, append them to the parentEl
-   *  1. If nextSibling is provided, insert the nodes before the nextSibling
-   *  2. If nextSibling is not provided, append the nodes to the parentEl
-   * @param nodes
-   * @param parentEl
-   * @param nextSibling
-   * @returns Added element count
-   */
-  static appendNodesWithSibling(nodes, parentEl, nextSibling) {
-    if (nextSibling) return this.insertNodesBefore(nodes, parentEl, nextSibling);
-    return this.appendNodes(nodes, parentEl);
-  }
-
-  /**
-   * @brief Given an array of nodes, append them to the parentEl using the index
-   *  1. If the index is the same as the length of the parentEl.childNodes, append the nodes to the parentEl
-   *  2. If the index is not the same as the length of the parentEl.childNodes, insert the nodes before the node at the index
-   * @param nodes
-   * @param parentEl
-   * @param index
-   * @param length
-   * @returns Added element count
-   */
-  static appendNodesWithIndex(nodes, parentEl, index, length) {
-    length = length ?? parentEl.childNodes.length;
-    if (length !== index) return this.insertNodesBefore(nodes, parentEl, parentEl.childNodes[index]);
-    return this.appendNodes(nodes, parentEl);
-  }
-
-  /**
-   * @brief Insert nodes before the nextSibling
-   * @param nodes
-   * @param parentEl
-   * @param nextSibling
-   * @returns Added element count
-   */
-  static insertNodesBefore(nodes, parentEl, nextSibling) {
-    let count = 0;
-    this.loopShallowEls(nodes, el => {
-      parentEl.insertBefore(el, nextSibling);
-      count++;
-    });
-    return count;
-  }
-
-  /**
-   * @brief Append nodes to the parentEl
-   * @param nodes
-   * @param parentEl
-   * @returns Added element count
-   */
-  static appendNodes(nodes, parentEl) {
-    let count = 0;
-    this.loopShallowEls(nodes, el => {
-      parentEl.appendChild(el);
-      count++;
-    });
-    return count;
-  }
-
-  // ---- Lifecycle ----
-  /**
-   * @brief Add willUnmount function to node
-   * @param node
-   * @param func
-   */
-  static addWillUnmount(node, func) {
-    const willUnmountStore = DLStore.global.WillUnmountStore;
-    const currentStore = willUnmountStore[willUnmountStore.length - 1];
-    // ---- If the current store is empty, it means this node is not mutable
-    if (!currentStore) return;
-    currentStore.push(func.bind(null, node));
-  }
-
-  /**
-   * @brief Add didUnmount function to node
-   * @param node
-   * @param func
-   */
-  static addDidUnmount(node, func) {
-    const didUnmountStore = DLStore.global.DidUnmountStore;
-    const currentStore = didUnmountStore[didUnmountStore.length - 1];
-    // ---- If the current store is empty, it means this node is not mutable
-    if (!currentStore) return;
-    currentStore.push(func.bind(null, node));
-  }
-
-  /**
-   * @brief Add didUnmount function to global store
-   * @param func
-   */
-  static addDidMount(node, func) {
-    if (!DLStore.global.DidMountStore) DLStore.global.DidMountStore = [];
-    DLStore.global.DidMountStore.push(func.bind(null, node));
-  }
-
-  /**
-   * @brief Run all didMount functions and reset the global store
-   */
-  static runDidMount() {
-    const didMountStore = DLStore.global.DidMountStore;
-    if (!didMountStore || didMountStore.length === 0) return;
-    for (let i = didMountStore.length - 1; i >= 0; i--) {
-      didMountStore[i]();
-    }
-    DLStore.global.DidMountStore = [];
-  }
-}
--- a/packages/inula-next/src/EnvNode.js
+++ b/packages/inula-next/src/EnvNode.js
@ -1,103 +0,0 @@
-import { DLNode, DLNodeType } from './DLNode';
-import { DLStore, cached } from './store';
-
-export class EnvStoreClass {
-  constructor() {
-    this.envs = {};
-    this.currentEnvNodes = [];
-  }
-
-  /**
-   * @brief Add a node to the current env and merge envs
-   * @param node - The node to add
-   */
-  addEnvNode(node) {
-    this.currentEnvNodes.push(node);
-    this.mergeEnvs();
-  }
-
-  /**
-   * @brief Replace the current env with the given nodes and merge envs
-   * @param nodes - The nodes to replace the current environment with
-   */
-  replaceEnvNodes(nodes) {
-    this.currentEnvNodes = nodes;
-    this.mergeEnvs();
-  }
-
-  /**
-   * @brief Remove the last node from the current env and merge envs
-   */
-  removeEnvNode() {
-    this.currentEnvNodes.pop();
-    this.mergeEnvs();
-  }
-
-  /**
-   * @brief Merge all the envs in currentEnvNodes, inner envs override outer envs
-   */
-  mergeEnvs() {
-    this.envs = {};
-    this.currentEnvNodes.forEach(envNode => {
-      Object.entries(envNode.envs).forEach(([key, value]) => {
-        this.envs[key] = [value, envNode];
-      });
-    });
-  }
-}
-
-export class EnvNode extends DLNode {
-  constructor(envs, depsArr) {
-    super(DLNodeType.Env);
-    // Declare a global variable to store the environment variables
-    if (!('DLEnvStore' in DLStore.global)) DLStore.global.DLEnvStore = new EnvStoreClass();
-
-    this.envs = envs;
-    this.depsArr = depsArr;
-    this.updateNodes = new Set();
-
-    DLStore.global.DLEnvStore.addEnvNode(this);
-  }
-
-  cached(deps, name) {
-    if (!deps || !deps.length) return false;
-    if (cached(deps, this.depsArr[name])) return true;
-    this.depsArr[name] = deps;
-    return false;
-  }
-
-  /**
-   * @brief Update a specific env, and update all the comp nodes that depend on this env
-   * @param name - The name of the environment variable to update
-   * @param value - The new value of the environment variable
-   */
-  updateEnv(name, valueFunc, deps) {
-    if (this.cached(deps, name)) return;
-    const value = valueFunc();
-    this.envs[name] = value;
-    if (DLStore.global.DLEnvStore.currentEnvNodes.includes(this)) {
-      DLStore.global.DLEnvStore.mergeEnvs();
-    }
-    this.updateNodes.forEach(node => {
-      node._$updateEnv(name, value, this);
-    });
-  }
-
-  /**
-   * @brief Add a node to this.updateNodes, delete the node from this.updateNodes when it unmounts
-   * @param node - The node to add
-   */
-  addNode(node) {
-    this.updateNodes.add(node);
-    DLNode.addWillUnmount(node, this.updateNodes.delete.bind(this.updateNodes, node));
-  }
-
-  /**
-   * @brief Set this._$nodes, and exit the current env
-   * @param nodes - The nodes to set
-   */
-  initNodes(nodes) {
-    this._$nodes = nodes;
-    DLStore.global.DLEnvStore.removeEnvNode();
-  }
-}
--- a/packages/inula-next/src/HTMLNode.js
+++ b/packages/inula-next/src/HTMLNode.js
@ -1,163 +0,0 @@
-import { DLNode } from './DLNode';
-import { DLStore, cached } from './store';
-
-function cache(el, key, deps) {
-  if (deps.length === 0) return false;
-  const cacheKey = `$${key}`;
-  if (cached(deps, el[cacheKey])) return true;
-  el[cacheKey] = deps;
-  return false;
-}
-
-/**
- * @brief Plainly set style
- * @param el
- * @param value
- */
-export function setStyle(el, value) {
-  Object.entries(value).forEach(([key, value]) => {
-    if (key.startsWith('--')) {
-      el.style.setProperty(key, value);
-    } else {
-      el.style[key] = value;
-    }
-  });
-}
-
-/**
- * @brief Plainly set dataset
- * @param el
- * @param value
- */
-export function setDataset(el, value) {
-  Object.assign(el.dataset, value);
-}
-
-/**
- * @brief Set HTML property with checking value equality first
- * @param el
- * @param key
- * @param value
- */
-export function setHTMLProp(el, key, valueFunc, deps) {
-  // ---- Comparing deps, same value won't trigger
-  //      will lead to a bug if the value is set outside of the DLNode
-  //      e.g. setHTMLProp(el, "textContent", "value", [])
-  //       =>  el.textContent = "other"
-  //       =>  setHTMLProp(el, "textContent", "value", [])
-  //       The value will be set to "other" instead of "value"
-  if (cache(el, key, deps)) return;
-  el[key] = valueFunc();
-}
-
-/**
- * @brief Plainly set HTML properties
- * @param el
- * @param value
- */
-export function setHTMLProps(el, value) {
-  Object.entries(value).forEach(([key, v]) => {
-    if (key === 'style') return setStyle(el, v);
-    if (key === 'dataset') return setDataset(el, v);
-    setHTMLProp(el, key, () => v, []);
-  });
-}
-
-/**
- * @brief Set HTML attribute with checking value equality first
- * @param el
- * @param key
- * @param value
- */
-export function setHTMLAttr(el, key, valueFunc, deps) {
-  if (cache(el, key, deps)) return;
-  el.setAttribute(key, valueFunc());
-}
-
-/**
- * @brief Plainly set HTML attributes
- * @param el
- * @param value
- */
-export function setHTMLAttrs(el, value) {
-  Object.entries(value).forEach(([key, v]) => {
-    setHTMLAttr(el, key, () => v, []);
-  });
-}
-
-/**
- * @brief Set memorized event, store the previous event in el[`$on${key}`], if it exists, remove it first
- * @param el
- * @param key
- * @param value
- */
-export function setEvent(el, key, value) {
-  const prevEvent = el[`$on${key}`];
-  if (prevEvent) el.removeEventListener(key, prevEvent);
-  el.addEventListener(key, value);
-  el[`$on${key}`] = value;
-}
-
-function eventHandler(e) {
-  const key = `$$${e.type}`;
-  for (const node of e.composedPath()) {
-    if (node[key]) node[key](e);
-    if (e.cancelBubble) return;
-  }
-}
-
-export function delegateEvent(el, key, value) {
-  if (el[`$$${key}`] === value) return;
-  el[`$$${key}`] = value;
-  if (!DLStore.delegatedEvents.has(key)) {
-    DLStore.delegatedEvents.add(key);
-    DLStore.document.addEventListener(key, eventHandler);
-  }
-}
-/**
- * @brief Shortcut for document.createElement
- * @param tag
- * @returns HTMLElement
- */
-export function createElement(tag) {
-  return DLStore.document.createElement(tag);
-}
-
-/**
- * @brief Insert any DLNode into an element, set the _$nodes and append the element to the element's children
- * @param el
- * @param node
- * @param position
- */
-export function insertNode(el, node, position) {
-  // ---- Set _$nodes
-  if (!el._$nodes) el._$nodes = Array.from(el.childNodes);
-  el._$nodes.splice(position, 0, node);
-
-  // ---- Insert nodes' elements
-  const flowIdx = DLNode.getFlowIndexFromNodes(el._$nodes, node);
-  DLNode.appendNodesWithIndex([node], el, flowIdx);
-  // ---- Set parentEl
-  DLNode.addParentEl([node], el);
-}
-
-/**
- * @brief An inclusive assign prop function that accepts any type of prop
- * @param el
- * @param key
- * @param value
- */
-export function forwardHTMLProp(el, key, valueFunc, deps) {
-  if (key === 'style') return setStyle(el, valueFunc());
-  if (key === 'dataset') return setDataset(el, valueFunc());
-  if (key === 'element') return;
-  if (key === 'prop') return setHTMLProps(el, valueFunc());
-  if (key === 'attr') return setHTMLAttrs(el, valueFunc());
-  if (key === 'innerHTML') return setHTMLProp(el, 'innerHTML', valueFunc, deps);
-  if (key === 'textContent') return setHTMLProp(el, 'textContent', valueFunc, deps);
-  if (key === 'forwardProp') return;
-  if (key.startsWith('on')) {
-    return setEvent(el, key.slice(2).toLowerCase(), valueFunc());
-  }
-  setHTMLAttr(el, key, valueFunc, deps);
-}
--- a/packages/inula-next/src/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.js
+++ b/packages/inula-next/src/MutableNode/CondNode.js
@ -1,69 +0,0 @@
-import { DLNodeType } from '../DLNode';
-import { FlatNode } from './FlatNode';
-
-export class CondNode extends FlatNode {
-  /**
-   * @brief Constructor, If type, accept a function that returns a list of nodes
-   * @param caseFunc
-   */
-  constructor(depNum, condFunc) {
-    super(DLNodeType.Cond);
-    this.depNum = depNum;
-    this.cond = -1;
-    this.condFunc = condFunc;
-    this.initUnmountStore();
-    this._$nodes = this.condFunc(this);
-    this.setUnmountFuncs();
-
-    // ---- Add to the global UnmountStore
-    CondNode.addWillUnmount(this, this.runWillUnmount.bind(this));
-    CondNode.addDidUnmount(this, this.runDidUnmount.bind(this));
-  }
-
-  /**
-   * @brief Update the nodes in the environment
-   */
-  updateCond(key) {
-    // ---- Need to save prev unmount funcs because we can't put removeNodes before geneNewNodesInEnv
-    //      The reason is that if it didn't change, we don't need to unmount or remove the nodes
-    const prevFuncs = [this.willUnmountFuncs, this.didUnmountFuncs];
-    const newNodes = this.geneNewNodesInEnv(() => this.condFunc(this));
-
-    // ---- If the new nodes are the same as the old nodes, we only need to update  children
-    if (this.didntChange) {
-      [this.willUnmountFuncs, this.didUnmountFuncs] = prevFuncs;
-      this.didntChange = false;
-      this.updateFunc?.(this.depNum, key);
-      return;
-    }
-    // ---- Remove old nodes
-    const newFuncs = [this.willUnmountFuncs, this.didUnmountFuncs];
-    [this.willUnmountFuncs, this.didUnmountFuncs] = prevFuncs;
-    this._$nodes && this._$nodes.length > 0 && this.removeNodes(this._$nodes);
-    [this.willUnmountFuncs, this.didUnmountFuncs] = newFuncs;
-
-    if (newNodes.length === 0) {
-      // ---- No branch has been taken
-      this._$nodes = [];
-      return;
-    }
-    // ---- Add new nodes
-    const parentEl = this._$parentEl;
-    // ---- Faster append with nextSibling rather than flowIndex
-    const flowIndex = CondNode.getFlowIndexFromNodes(parentEl._$nodes, this);
-
-    const nextSibling = parentEl.childNodes[flowIndex];
-    CondNode.appendNodesWithSibling(newNodes, parentEl, nextSibling);
-    CondNode.runDidMount();
-    this._$nodes = newNodes;
-  }
-
-  /**
-   * @brief The update function of IfNode's childNodes is stored in the first child node
-   * @param changed
-   */
-  update(changed) {
-    if (!(~this.depNum & changed)) return;
-    this.updateFunc?.(changed);
-  }
-}
--- a/packages/inula-next/src/MutableNode/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.js
+++ b/packages/inula-next/src/MutableNode/ExpNode.js
@ -1,86 +0,0 @@
-import { DLNodeType } from '../DLNode';
-import { FlatNode } from './FlatNode';
-import { DLStore, cached } from '../store';
-
-export class ExpNode extends FlatNode {
-  /**
-   * @brief Constructor, Exp type, accept a function that returns a list of nodes
-   * @param nodesFunc
-   */
-  constructor(value, deps) {
-    super(DLNodeType.Exp);
-    this.initUnmountStore();
-    this._$nodes = ExpNode.formatNodes(value);
-    this.setUnmountFuncs();
-    this.deps = this.parseDeps(deps);
-    // ---- Add to the global UnmountStore
-    ExpNode.addWillUnmount(this, this.runWillUnmount.bind(this));
-    ExpNode.addDidUnmount(this, this.runDidUnmount.bind(this));
-  }
-
-  parseDeps(deps) {
-    return deps.map(dep => {
-      // ---- CompNode
-      if (dep?.prototype?._$init) return dep.toString();
-      // ---- SnippetNode
-      if (dep?.propViewFunc) return dep.propViewFunc.toString();
-      return dep;
-    });
-  }
-
-  cache(deps) {
-    if (!deps || !deps.length) return false;
-    deps = this.parseDeps(deps);
-    if (cached(deps, this.deps)) return true;
-    this.deps = deps;
-    return false;
-  }
-  /**
-   * @brief Generate new nodes and replace the old nodes
-   */
-  update(valueFunc, deps) {
-    if (this.cache(deps)) return;
-    this.removeNodes(this._$nodes);
-    const newNodes = this.geneNewNodesInEnv(() => ExpNode.formatNodes(valueFunc()));
-    if (newNodes.length === 0) {
-      this._$nodes = [];
-      return;
-    }
-
-    // ---- Add new nodes
-    const parentEl = this._$parentEl;
-    const flowIndex = ExpNode.getFlowIndexFromNodes(parentEl._$nodes, this);
-    const nextSibling = parentEl.childNodes[flowIndex];
-    ExpNode.appendNodesWithSibling(newNodes, parentEl, nextSibling);
-    ExpNode.runDidMount();
-
-    this._$nodes = newNodes;
-  }
-
-  /**
-   * @brief Format the nodes
-   * @param nodes
-   * @returns New nodes
-   */
-  static formatNodes(nodes) {
-    if (!Array.isArray(nodes)) nodes = [nodes];
-    return (
-      nodes
-        // ---- Flatten the nodes
-        .flat(1)
-        // ---- Filter out empty nodes
-        .filter(node => node !== undefined && node !== null && typeof node !== 'boolean')
-        .map(node => {
-          // ---- If the node is a string, number or bigint, convert it to a text node
-          if (typeof node === 'string' || typeof node === 'number' || typeof node === 'bigint') {
-            return DLStore.document.createTextNode(`${node}`);
-          }
-          // ---- If the node has PropView, call it to get the view
-          if ('propViewFunc' in node) return node.build();
-          return node;
-        })
-        // ---- Flatten the nodes again
-        .flat(1)
-    );
-  }
-}
--- a/packages/inula-next/src/MutableNode/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/FlatNode.js
+++ b/packages/inula-next/src/MutableNode/FlatNode.js
@ -1,33 +0,0 @@
-import { DLStore } from '../store';
-import { MutableNode } from './MutableNode';
-
-export class FlatNode extends MutableNode {
-  willUnmountFuncs = [];
-  didUnmountFuncs = [];
-
-  setUnmountFuncs() {
-    this.willUnmountFuncs = DLStore.global.WillUnmountStore.pop();
-    this.didUnmountFuncs = DLStore.global.DidUnmountStore.pop();
-  }
-
-  runWillUnmount() {
-    for (let i = 0; i < this.willUnmountFuncs.length; i++) this.willUnmountFuncs[i]();
-  }
-
-  runDidUnmount() {
-    for (let i = this.didUnmountFuncs.length - 1; i >= 0; i--) this.didUnmountFuncs[i]();
-  }
-
-  removeNodes(nodes) {
-    this.runWillUnmount();
-    super.removeNodes(nodes);
-    this.runDidUnmount();
-  }
-
-  geneNewNodesInEnv(newNodesFunc) {
-    this.initUnmountStore();
-    const nodes = super.geneNewNodesInEnv(newNodesFunc);
-    this.setUnmountFuncs();
-    return nodes;
-  }
-}
--- a/packages/inula-next/src/MutableNode/ForNode.js
+++ b/packages/inula-next/src/MutableNode/ForNode.js
@ -1,406 +0,0 @@
-import { DLNodeType } from '../DLNode';
-import { DLStore } from '../store';
-import { MutableNode } from './MutableNode';
-
-export class ForNode extends MutableNode {
-  array;
-  nodeFunc;
-  depNum;
-
-  nodesMap = new Map();
-  updateArr = [];
-
-  /**
-   * @brief Getter for nodes
-   */
-  get _$nodes() {
-    const nodes = [];
-    for (let idx = 0; idx < this.array.length; idx++) {
-      nodes.push(...this.nodesMap.get(this.keys?.[idx] ?? idx));
-    }
-    return nodes;
-  }
-
-  /**
-   * @brief Constructor, For type
-   * @param array
-   * @param nodeFunc
-   * @param keys
-   */
-  constructor(array, depNum, keys, nodeFunc) {
-    super(DLNodeType.For);
-    this.array = [...array];
-    this.keys = keys;
-    this.depNum = depNum;
-    this.addNodeFunc(nodeFunc);
-  }
-
-  /**
-   * @brief To be called immediately after the constructor
-   * @param nodeFunc
-   */
-  addNodeFunc(nodeFunc) {
-    this.nodeFunc = nodeFunc;
-    this.array.forEach((item, idx) => {
-      this.initUnmountStore();
-      const key = this.keys?.[idx] ?? idx;
-      const nodes = nodeFunc(item, this.updateArr, idx);
-      this.nodesMap.set(key, nodes);
-      this.setUnmountMap(key);
-    });
-    // ---- For nested ForNode, the whole strategy is just like EnvStore
-    //      we use array of function array to create "environment", popping and pushing
-    ForNode.addWillUnmount(this, this.runAllWillUnmount.bind(this));
-    ForNode.addDidUnmount(this, this.runAllDidUnmount.bind(this));
-  }
-
-  /**
-   * @brief Update the view related to one item in the array
-   * @param nodes
-   * @param item
-   */
-  updateItem(idx, array, changed) {
-    // ---- The update function of ForNode's childNodes is stored in the first child node
-    this.updateArr[idx]?.(changed ?? this.depNum, array[idx]);
-  }
-
-  updateItems(changed) {
-    for (let idx = 0; idx < this.array.length; idx++) {
-      this.updateItem(idx, this.array, changed);
-    }
-  }
-
-  /**
-   * @brief Non-array update function
-   * @param changed
-   */
-  update(changed) {
-    // ---- e.g. this.depNum -> 1110 changed-> 1010
-    //      ~this.depNum & changed -> ~1110 & 1010 -> 0000
-    //      no update because depNum contains all the changed
-    // ---- e.g. this.depNum -> 1110 changed-> 1101
-    //      ~this.depNum & changed -> ~1110 & 1101 -> 0001
-    //      update because depNum doesn't contain all the changed
-    if (!(~this.depNum & changed)) return;
-    this.updateItems(changed);
-  }
-
-  /**
-   * @brief Array-related update function
-   * @param newArray
-   * @param newKeys
-   */
-  updateArray(newArray, newKeys) {
-    if (newKeys) {
-      this.updateWithKey(newArray, newKeys);
-      return;
-    }
-    this.updateWithOutKey(newArray);
-  }
-
-  /**
-   * @brief Shortcut to generate new nodes with idx and key
-   */
-  getNewNodes(idx, key, array, updateArr) {
-    this.initUnmountStore();
-    const nodes = this.geneNewNodesInEnv(() => this.nodeFunc(array[idx], updateArr ?? this.updateArr, idx));
-    this.setUnmountMap(key);
-    this.nodesMap.set(key, nodes);
-    return nodes;
-  }
-
-  /**
-   * @brief Set the unmount map by getting the last unmount map from the global store
-   * @param key
-   */
-  setUnmountMap(key) {
-    const willUnmountMap = DLStore.global.WillUnmountStore.pop();
-    if (willUnmountMap && willUnmountMap.length > 0) {
-      if (!this.willUnmountMap) this.willUnmountMap = new Map();
-      this.willUnmountMap.set(key, willUnmountMap);
-    }
-    const didUnmountMap = DLStore.global.DidUnmountStore.pop();
-    if (didUnmountMap && didUnmountMap.length > 0) {
-      if (!this.didUnmountMap) this.didUnmountMap = new Map();
-      this.didUnmountMap.set(key, didUnmountMap);
-    }
-  }
-
-  /**
-   * @brief Run all the unmount functions and clear the unmount map
-   */
-  runAllWillUnmount() {
-    if (!this.willUnmountMap || this.willUnmountMap.size === 0) return;
-    this.willUnmountMap.forEach(funcs => {
-      for (let i = 0; i < funcs.length; i++) funcs[i]?.();
-    });
-    this.willUnmountMap.clear();
-  }
-
-  /**
-   * @brief Run all the unmount functions and clear the unmount map
-   */
-  runAllDidUnmount() {
-    if (!this.didUnmountMap || this.didUnmountMap.size === 0) return;
-    this.didUnmountMap.forEach(funcs => {
-      for (let i = funcs.length - 1; i >= 0; i--) funcs[i]?.();
-    });
-    this.didUnmountMap.clear();
-  }
-
-  /**
-   * @brief Run the unmount functions of the given key
-   * @param key
-   */
-  runWillUnmount(key) {
-    if (!this.willUnmountMap || this.willUnmountMap.size === 0) return;
-    const funcs = this.willUnmountMap.get(key);
-    if (!funcs) return;
-    for (let i = 0; i < funcs.length; i++) funcs[i]?.();
-    this.willUnmountMap.delete(key);
-  }
-
-  /**
-   * @brief Run the unmount functions of the given key
-   */
-  runDidUnmount(key) {
-    if (!this.didUnmountMap || this.didUnmountMap.size === 0) return;
-    const funcs = this.didUnmountMap.get(key);
-    if (!funcs) return;
-    for (let i = funcs.length - 1; i >= 0; i--) funcs[i]?.();
-    this.didUnmountMap.delete(key);
-  }
-
-  /**
-   * @brief Remove nodes from parentEl and run willUnmount and didUnmount
-   * @param nodes
-   * @param key
-   */
-  removeNodes(nodes, key) {
-    this.runWillUnmount(key);
-    super.removeNodes(nodes);
-    this.runDidUnmount(key);
-    this.nodesMap.delete(key);
-  }
-
-  /**
-   * @brief Update the nodes without keys
-   * @param newArray
-   */
-  updateWithOutKey(newArray) {
-    const preLength = this.array.length;
-    const currLength = newArray.length;
-
-    if (preLength === currLength) {
-      // ---- If the length is the same, we only need to update the nodes
-      for (let idx = 0; idx < this.array.length; idx++) {
-        this.updateItem(idx, newArray);
-      }
-      this.array = [...newArray];
-      return;
-    }
-    const parentEl = this._$parentEl;
-    // ---- If the new array is longer, add new nodes directly
-    if (preLength < currLength) {
-      let flowIndex = ForNode.getFlowIndexFromNodes(parentEl._$nodes, this);
-      // ---- Calling parentEl.childNodes.length is time-consuming,
-      //      so we use a length variable to store the length
-      const length = parentEl.childNodes.length;
-      for (let idx = 0; idx < currLength; idx++) {
-        if (idx < preLength) {
-          flowIndex += ForNode.getFlowIndexFromNodes(this.nodesMap.get(idx));
-          this.updateItem(idx, newArray);
-          continue;
-        }
-        const newNodes = this.getNewNodes(idx, idx, newArray);
-        ForNode.appendNodesWithIndex(newNodes, parentEl, flowIndex, length);
-      }
-      ForNode.runDidMount();
-      this.array = [...newArray];
-      return;
-    }
-
-    // ---- Update the nodes first
-    for (let idx = 0; idx < currLength; idx++) {
-      this.updateItem(idx, newArray);
-    }
-    // ---- If the new array is shorter, remove the extra nodes
-    for (let idx = currLength; idx < preLength; idx++) {
-      const nodes = this.nodesMap.get(idx);
-      this.removeNodes(nodes, idx);
-    }
-    this.updateArr.splice(currLength, preLength - currLength);
-    this.array = [...newArray];
-  }
-
-  /**
-   * @brief Update the nodes with keys
-   * @param newArray
-   * @param newKeys
-   */
-  updateWithKey(newArray, newKeys) {
-    if (newKeys.length !== new Set(newKeys).size) {
-      throw new Error('DLight: Duplicate keys in for loop are not allowed');
-    }
-    const prevKeys = this.keys;
-    this.keys = newKeys;
-
-    if (ForNode.arrayEqual(prevKeys, this.keys)) {
-      // ---- If the keys are the same, we only need to update the nodes
-      for (let idx = 0; idx < newArray.length; idx++) {
-        this.updateItem(idx, newArray);
-      }
-      this.array = [...newArray];
-      return;
-    }
-
-    const parentEl = this._$parentEl;
-
-    // ---- No nodes after, delete all nodes
-    if (this.keys.length === 0) {
-      const parentNodes = parentEl._$nodes ?? [];
-      if (parentNodes.length === 1 && parentNodes[0] === this) {
-        // ---- ForNode is the only node in the parent node
-        //      Frequently used in real life scenarios because we tend to always wrap for with a div element,
-        //      so we optimize it here
-        this.runAllWillUnmount();
-        parentEl.innerHTML = '';
-        this.runAllDidUnmount();
-      } else {
-        for (let prevIdx = 0; prevIdx < prevKeys.length; prevIdx++) {
-          const prevKey = prevKeys[prevIdx];
-          this.removeNodes(this.nodesMap.get(prevKey), prevKey);
-        }
-      }
-      this.nodesMap.clear();
-      this.updateArr = [];
-      this.array = [];
-      return;
-    }
-
-    // ---- Record how many nodes are before this ForNode with the same parentNode
-    const flowIndex = ForNode.getFlowIndexFromNodes(parentEl._$nodes, this);
-
-    // ---- No nodes before, append all nodes
-    if (prevKeys.length === 0) {
-      const nextSibling = parentEl.childNodes[flowIndex];
-      for (let idx = 0; idx < this.keys.length; idx++) {
-        const newNodes = this.getNewNodes(idx, this.keys[idx], newArray);
-        ForNode.appendNodesWithSibling(newNodes, parentEl, nextSibling);
-      }
-      ForNode.runDidMount();
-      this.array = [...newArray];
-      return;
-    }
-
-    const shuffleKeys = [];
-    const newUpdateArr = [];
-
-    // ---- 1. Delete the nodes that are no longer in the array
-    for (let prevIdx = 0; prevIdx < prevKeys.length; prevIdx++) {
-      const prevKey = prevKeys[prevIdx];
-      if (this.keys.includes(prevKey)) {
-        shuffleKeys.push(prevKey);
-        newUpdateArr.push(this.updateArr[prevIdx]);
-        continue;
-      }
-      this.removeNodes(this.nodesMap.get(prevKey), prevKey);
-    }
-
-    // ---- 2. Add the nodes that are not in the array but in the new array
-    // ---- Calling parentEl.childNodes.length is time-consuming,
-    //      so we use a length variable to store the length
-    let length = parentEl.childNodes.length;
-    let newFlowIndex = flowIndex;
-    for (let idx = 0; idx < this.keys.length; idx++) {
-      const key = this.keys[idx];
-      const prevIdx = shuffleKeys.indexOf(key);
-      if (prevIdx !== -1) {
-        // ---- These nodes are already in the parentEl,
-        //      and we need to keep track of their flowIndex
-        newFlowIndex += ForNode.getFlowIndexFromNodes(this.nodesMap.get(key));
-        newUpdateArr[prevIdx]?.(this.depNum, newArray[idx]);
-        continue;
-      }
-      // ---- Insert updateArr first because in getNewNode the updateFunc will replace this null
-      newUpdateArr.splice(idx, 0, null);
-      const newNodes = this.getNewNodes(idx, key, newArray, newUpdateArr);
-      // ---- Add the new nodes
-      shuffleKeys.splice(idx, 0, key);
-
-      const count = ForNode.appendNodesWithIndex(newNodes, parentEl, newFlowIndex, length);
-      newFlowIndex += count;
-      length += count;
-    }
-    ForNode.runDidMount();
-
-    // ---- After adding and deleting, the only thing left is to reorder the nodes,
-    //      but if the keys are the same, we don't need to reorder
-    if (ForNode.arrayEqual(this.keys, shuffleKeys)) {
-      this.array = [...newArray];
-      this.updateArr = newUpdateArr;
-      return;
-    }
-
-    newFlowIndex = flowIndex;
-    const bufferNodes = new Map();
-    // ---- 3. Replace the nodes in the same position using Fisher-Yates shuffle algorithm
-    for (let idx = 0; idx < this.keys.length; idx++) {
-      const key = this.keys[idx];
-      const prevIdx = shuffleKeys.indexOf(key);
-
-      const bufferedNode = bufferNodes.get(key);
-      if (bufferedNode) {
-        // ---- We need to add the flowIndex of the bufferedNode,
-        //      because the bufferedNode is in the parentEl and the new position is ahead of the previous position
-        const bufferedFlowIndex = ForNode.getFlowIndexFromNodes(bufferedNode);
-        const lastEl = ForNode.toEls(bufferedNode).pop();
-        const nextSibling = parentEl.childNodes[newFlowIndex + bufferedFlowIndex];
-        if (lastEl !== nextSibling && lastEl.nextSibling !== nextSibling) {
-          // ---- If the node is buffered, we need to add it to the parentEl
-          ForNode.insertNodesBefore(bufferedNode, parentEl, nextSibling);
-        }
-        // ---- So the added length is the length of the bufferedNode
-        newFlowIndex += bufferedFlowIndex;
-        delete bufferNodes[idx];
-      } else if (prevIdx === idx) {
-        // ---- If the node is in the same position, we don't need to do anything
-        newFlowIndex += ForNode.getFlowIndexFromNodes(this.nodesMap.get(key));
-        continue;
-      } else {
-        // ---- If the node is not in the same position, we need to buffer it
-        //      We buffer the node of the previous position, and then replace it with the node of the current position
-        const prevKey = shuffleKeys[idx];
-        bufferNodes.set(prevKey, this.nodesMap.get(prevKey));
-        // ---- Length would never change, and the last will always be in the same position,
-        //      so it'll always be insertBefore instead of appendChild
-        const childNodes = this.nodesMap.get(key);
-        const lastEl = ForNode.toEls(childNodes).pop();
-        const nextSibling = parentEl.childNodes[newFlowIndex];
-        if (lastEl !== nextSibling && lastEl.nextSibling !== nextSibling) {
-          newFlowIndex += ForNode.insertNodesBefore(childNodes, parentEl, nextSibling);
-        }
-      }
-      // ---- Swap the keys
-      const tempKey = shuffleKeys[idx];
-      shuffleKeys[idx] = shuffleKeys[prevIdx];
-      shuffleKeys[prevIdx] = tempKey;
-      const tempUpdateFunc = newUpdateArr[idx];
-      newUpdateArr[idx] = newUpdateArr[prevIdx];
-      newUpdateArr[prevIdx] = tempUpdateFunc;
-    }
-    this.array = [...newArray];
-    this.updateArr = newUpdateArr;
-  }
-
-  /**
-   * @brief Compare two arrays
-   * @param arr1
-   * @param arr2
-   * @returns
-   */
-  static arrayEqual(arr1, arr2) {
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((item, idx) => item === arr2[idx]);
-  }
-}
--- a/packages/inula-next/src/MutableNode/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/MutableNode.js
+++ b/packages/inula-next/src/MutableNode/MutableNode.js
@ -1,71 +0,0 @@
-import { DLNode } from '../DLNode';
-import { DLStore } from '../store';
-
-export class MutableNode extends DLNode {
-  /**
-   * @brief Mutable node is a node that this._$nodes can be changed, things need to pay attention:
-   *  1. The environment of the new nodes should be the same as the old nodes
-   *  2. The new nodes should be added to the parentEl
-   *  3. The old nodes should be removed from the parentEl
-   * @param type
-   */
-  constructor(type) {
-    super(type);
-    // ---- Save the current environment nodes, must be a new reference
-    if (DLStore.global.DLEnvStore && DLStore.global.DLEnvStore.currentEnvNodes.length > 0) {
-      this.savedEnvNodes = [...DLStore.global.DLEnvStore.currentEnvNodes];
-    }
-  }
-
-  /**
-   * @brief Initialize the new nodes, add parentEl to all nodes
-   * @param nodes
-   */
-  initNewNodes(nodes) {
-    // ---- Add parentEl to all nodes
-    DLNode.addParentEl(nodes, this._$parentEl);
-  }
-
-  /**
-   * @brief Generate new nodes in the saved environment
-   * @param newNodesFunc
-   * @returns
-   */
-  geneNewNodesInEnv(newNodesFunc) {
-    if (!this.savedEnvNodes) {
-      // ---- No saved environment, just generate new nodes
-      const newNodes = newNodesFunc();
-      // ---- Only for IfNode's same condition return
-      // ---- Initialize the new nodes
-      this.initNewNodes(newNodes);
-      return newNodes;
-    }
-    // ---- Save the current environment nodes
-    const currentEnvNodes = DLStore.global.DLEnvStore.currentEnvNodes;
-    // ---- Replace the saved environment nodes
-    DLStore.global.DLEnvStore.replaceEnvNodes(this.savedEnvNodes);
-    const newNodes = newNodesFunc();
-    // ---- Retrieve the current environment nodes
-    DLStore.global.DLEnvStore.replaceEnvNodes(currentEnvNodes);
-    // ---- Only for IfNode's same condition return
-    // ---- Initialize the new nodes
-    this.initNewNodes(newNodes);
-    return newNodes;
-  }
-
-  initUnmountStore() {
-    DLStore.global.WillUnmountStore.push([]);
-    DLStore.global.DidUnmountStore.push([]);
-  }
-
-  /**
-   * @brief Remove nodes from parentEl and run willUnmount and didUnmount
-   * @param nodes
-   * @param removeEl Only remove outermost element
-   */
-  removeNodes(nodes) {
-    DLNode.loopShallowEls(nodes, node => {
-      this._$parentEl.removeChild(node);
-    });
-  }
-}
--- a/packages/inula-next/src/MutableNode/TryNode.js
+++ b/packages/inula-next/src/MutableNode/TryNode.js
@ -1,45 +0,0 @@
-import { DLNodeType } from '../DLNode';
-import { FlatNode } from './FlatNode';
-import { EnvNode } from '../EnvNode';
-
-export class TryNode extends FlatNode {
-  constructor(tryFunc, catchFunc) {
-    super(DLNodeType.Try);
-    this.tryFunc = tryFunc;
-    const catchable = this.getCatchable(catchFunc);
-    this.envNode = new EnvNode({ _$catchable: catchable });
-    const nodes = tryFunc(this.setUpdateFunc.bind(this), catchable) ?? [];
-    this.envNode.initNodes(nodes);
-    this._$nodes = nodes;
-  }
-
-  update(changed) {
-    this.updateFunc?.(changed);
-  }
-
-  setUpdateFunc(updateFunc) {
-    this.updateFunc = updateFunc;
-  }
-
-  getCatchable(catchFunc) {
-    return callback =>
-      (...args) => {
-        try {
-          return callback(...args);
-        } catch (e) {
-          // ---- Run it in next tick to make sure when error occurs before
-          //      didMount, this._$parentEl is not null
-          Promise.resolve().then(() => {
-            const nodes = this.geneNewNodesInEnv(() => catchFunc(this.setUpdateFunc.bind(this), e));
-            this._$nodes && this.removeNodes(this._$nodes);
-            const parentEl = this._$parentEl;
-            const flowIndex = FlatNode.getFlowIndexFromNodes(parentEl._$nodes, this);
-            const nextSibling = parentEl.childNodes[flowIndex];
-            FlatNode.appendNodesWithSibling(nodes, parentEl, nextSibling);
-            FlatNode.runDidMount();
-            this._$nodes = nodes;
-          });
-        }
-      };
-  }
-}
--- a/packages/inula-next/src/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/PropView.js
+++ b/packages/inula-next/src/PropView.js
@ -1,48 +0,0 @@
-import { DLNode } from './DLNode';
-import { insertNode } from './HTMLNode';
-export class PropView {
-  propViewFunc;
-  dlUpdateFunc = new Set();
-
-  /**
-   * @brief PropView constructor, accept a function that returns a list of DLNode
-   * @param propViewFunc - A function that when called, collects and returns an array of DLNode instances
-   */
-  constructor(propViewFunc) {
-    this.propViewFunc = propViewFunc;
-  }
-
-  /**
-   * @brief Build the prop view by calling the propViewFunc and add every single instance of the returned DLNode to dlUpdateNodes
-   * @returns An array of DLNode instances returned by propViewFunc
-   */
-  build() {
-    let update;
-    const addUpdate = updateFunc => {
-      update = updateFunc;
-      this.dlUpdateFunc.add(updateFunc);
-    };
-    const newNodes = this.propViewFunc(addUpdate);
-    if (newNodes.length === 0) return [];
-    if (update) {
-      // Remove the updateNode from dlUpdateNodes when it unmounts
-      DLNode.addWillUnmount(newNodes[0], this.dlUpdateFunc.delete.bind(this.dlUpdateFunc, update));
-    }
-
-    return newNodes;
-  }
-
-  /**
-   * @brief Update every node in dlUpdateNodes
-   * @param changed - A parameter indicating what changed to trigger the update
-   */
-  update(...args) {
-    this.dlUpdateFunc.forEach(update => {
-      update(...args);
-    });
-  }
-}
-
-export function insertChildren(el, propView) {
-  insertNode(el, { _$nodes: propView.build(), _$dlNodeType: 7 }, 0);
-}
--- a/packages/inula-next/src/SnippetNode.js
+++ b/packages/inula-next/src/SnippetNode.js
@ -1,18 +0,0 @@
-import { DLNode, DLNodeType } from './DLNode';
-import { cached } from './store';
-
-export class SnippetNode extends DLNode {
-  constructor(depsArr) {
-    super(DLNodeType.Snippet);
-    this.depsArr = depsArr;
-  }
-
-  cached(deps, changed) {
-    if (!deps || !deps.length) return false;
-    const idx = Math.log2(changed);
-    const prevDeps = this.depsArr[idx];
-    if (cached(deps, prevDeps)) return true;
-    this.depsArr[idx] = deps;
-    return false;
-  }
-}
--- a/packages/inula-next/src/TextNode.js
+++ b/packages/inula-next/src/TextNode.js
@ -1,24 +0,0 @@
-import { DLStore, cached } from './store';
-
-/**
- * @brief Shorten document.createTextNode
- * @param value
- * @returns Text
- */
-export function createTextNode(value, deps) {
-  const node = DLStore.document.createTextNode(value);
-  node.$$deps = deps;
-  return node;
-}
-
-/**
- * @brief Update text node and check if the value is changed
- * @param node
- * @param value
- */
-export function updateText(node, valueFunc, deps) {
-  if (cached(deps, node.$$deps)) return;
-  const value = valueFunc();
-  node.textContent = value;
-  node.$$deps = deps;
-}
--- a/packages/inula-next/src/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.d.ts
+++ b/packages/inula-next/src/index.d.ts
@ -1 +0,0 @@
-export * from './types/index';
--- a/packages/inula-next/src/index.js
+++ b/packages/inula-next/src/index.js
@ -1,62 +0,0 @@
-import { DLNode } from './DLNode';
-import { insertNode } from './HTMLNode';
-
-export * from './HTMLNode';
-export * from './CompNode';
-export * from './EnvNode';
-export * from './TextNode';
-export * from './PropView';
-export * from './SnippetNode';
-export * from './MutableNode/ForNode';
-export * from './MutableNode/ExpNode';
-export * from './MutableNode/CondNode';
-export * from './MutableNode/TryNode';
-
-import { DLStore } from './store';
-
-export { setGlobal, setDocument } from './store';
-
-function initStore() {
-  // Declare a global variable to store willUnmount functions
-  DLStore.global.WillUnmountStore = [];
-  // Declare a global variable to store didUnmount functions
-  DLStore.global.DidUnmountStore = [];
-}
-
-/**
- * @brief Render the DL class to the element
- * @param {typeof import('./CompNode').CompNode} Comp
- * @param {HTMLElement | string} idOrEl
- */
-export function render(Comp, idOrEl) {
-  let el = idOrEl;
-  if (typeof idOrEl === 'string') {
-    const elFound = DLStore.document.getElementById(idOrEl);
-    if (elFound) el = elFound;
-    else {
-      throw new Error(`DLight: Element with id ${idOrEl} not found`);
-    }
-  }
-  initStore();
-  el.innerHTML = '';
-  const dlNode = new Comp();
-  dlNode._$init();
-  insertNode(el, dlNode, 0);
-  DLNode.runDidMount();
-}
-
-export function manual(callback, _deps) {
-  return callback();
-}
-export function escape(arg) {
-  return arg;
-}
-
-export const $ = escape;
-export const required = null;
-
-export function use() {
-  console.error(
-    'DLight: use() is not supported be called directly. You can only assign `use(model)` to a dlight class property. Any other expressions are not allowed.'
-  );
-}
--- a/packages/inula-next/src/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
@ -17,9 +17,7 @@ const p = Promise.resolve();

 /**
 * Schedule a task to run in the next microtask.
- *
- * @param {() => void} task
 */
-export function schedule(task) {
+export function schedule(task: () => void) {
  p.then(task);
 }
--- a/packages/inula-next/src/store.js
+++ b/packages/inula-next/src/store.js
@ -1,42 +0,0 @@
-import { Store } from '@openinula/store';
-
-// ---- Using external Store to store global and document
-//      Because Store is a singleton, it is safe to use it as a global variable
-//      If created in DLight package, different package versions will introduce
-//      multiple Store instances.
-
-if (!('global' in Store)) {
-  if (typeof window !== 'undefined') {
-    Store.global = window;
-  } else if (typeof global !== 'undefined') {
-    Store.global = global;
-  } else {
-    Store.global = {};
-  }
-}
-if (!('document' in Store)) {
-  if (typeof document !== 'undefined') {
-    Store.document = document;
-  }
-}
-
-export const DLStore = { ...Store, delegatedEvents: new Set() };
-
-export function setGlobal(globalObj) {
-  DLStore.global = globalObj;
-}
-
-export function setDocument(customDocument) {
-  DLStore.document = customDocument;
-}
-
-/**
- * @brief Compare the deps with the previous deps
- * @param deps
- * @param prevDeps
- * @returns
- */
-export function cached(deps, prevDeps) {
-  if (!prevDeps || deps.length !== prevDeps.length) return false;
-  return deps.every((dep, i) => !(dep instanceof Object) && prevDeps[i] === dep);
-}
--- a/packages/inula-next/src/types.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/src/types/compTag.d.ts
+++ b/packages/inula-next/src/types/compTag.d.ts
@ -1,74 +0,0 @@
-import { type DLightHTMLAttributes } from './htmlTag';
-
-// a very magical solution
-// when vscode parse ts, if it is type A<T> = B<xxx<T>>, it will show the detailed type,
-// but if type A<T> = B<xxx<T>> & xxx, it will only show alias (here is A)
-// because I don't want to expose the detailed type, so type A<T> = B<xxx<T>> & Useless
-// but if type Useless = { useless: never } will cause this type to have an additional property userless
-// so just don't add key!
-type Useless = { [key in '']: never };
-
-export type DLightObject<T> = {
-  [K in keyof T]-?: undefined extends T[K]
-    ? (value?: T[K]) => DLightObject<Omit<T, K>>
-    : (value: T[K]) => DLightObject<Omit<T, K>>;
-};
-interface CustomNodeProps {
-  willMount: (node: any) => void;
-  didMount: (node: any) => void;
-  willUnmount: (node: any) => void;
-  didUnmount: (node: any) => void;
-  didUpdate: (node: any, key: string, prevValue: any, currValue: any) => void;
-  ref: (node: any) => void;
-  elements: HTMLElement[] | ((holder: HTMLElement[]) => void) | undefined;
-  forwardProps: true | undefined;
-}
-
-export type ContentProp<T = object> = T & { _$idContent: true };
-
-export type RemoveOptional<T> = {
-  [K in keyof T]-?: T[K];
-};
-
-type IsAny<T> = { _$isAny: true } extends T ? true : false;
-
-export type ContentKeyName<T> = {
-  [K in keyof T]: IsAny<T[K]> extends true
-    ? never
-    : // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      T[K] extends ContentProp<infer _>
-      ? K
-      : never;
-}[keyof T];
-
-export type CheckContent<T> = RemoveOptional<T>[ContentKeyName<RemoveOptional<T>>];
-
-type CustomClassTag<T, O> =
-  ContentKeyName<RemoveOptional<O>> extends undefined
-    ? () => DLightObject<T>
-    : undefined extends O[ContentKeyName<RemoveOptional<O>>]
-      ? CheckContent<O> extends ContentProp<infer U>
-        ? (content?: U extends unknown ? any : unknown) => DLightObject<Omit<T, ContentKeyName<RemoveOptional<O>>>>
-        : never
-      : CheckContent<O> extends ContentProp<infer U>
-        ? (content: U extends unknown ? any : unknown) => DLightObject<Omit<T, ContentKeyName<RemoveOptional<O>>>>
-        : never;
-
-type CustomSnippetTag<T> = T extends { content: infer U }
-  ? (content: U) => DLightObject<Omit<T, 'content'>>
-  : T extends { content?: infer U }
-    ? (content?: U) => DLightObject<Omit<T, 'content'>>
-    : () => DLightObject<T>;
-
-type CustomTagType<T, G> = CustomClassTag<
-  T & CustomNodeProps & (keyof G extends never ? object : DLightHTMLAttributes<G, object, HTMLElement>),
-  T
-> &
-  Useless;
-export type Typed<T = object, G = object> = CustomTagType<T, G> & Useless;
-export type SnippetTyped<T = object> = CustomSnippetTag<T> & Useless;
-
-export type Pretty = any;
-
-// ---- reverse
-export type UnTyped<T> = T extends Typed<infer U> ? U : never;
--- a/packages/inula-next/src/types/envTag.d.ts
+++ b/packages/inula-next/src/types/envTag.d.ts
@ -1,6 +0,0 @@
-// ---- env
-import { DLightObject } from './compTag';
-
-type AnyEnv = { _$anyEnv: true };
-
-export const env: <T = AnyEnv>() => T extends AnyEnv ? any : DLightObject<T>;
--- a/packages/inula-next/src/types/expressionTag.d.ts
+++ b/packages/inula-next/src/types/expressionTag.d.ts
@ -1,13 +0,0 @@
-interface ExpressionTag {
-  willMount: (node: any) => void;
-  didMount: (node: any) => void;
-  willUnmount: (node: any) => void;
-  didUnmount: (node: any) => void;
-  didUpdate: <T>(node: any, key: string, prevValue: T, currValue: T) => void;
-  elements: HTMLElement[] | ((holder: HTMLElement[]) => void) | undefined;
-  ref: (node: any) => void;
-}
-
-type ExpressionTagFunc = (nodes: any) => ExpressionTag;
-
-export const _: ExpressionTagFunc;
--- a/packages/inula-next/src/types/htmlTag/event.d.ts
+++ b/packages/inula-next/src/types/htmlTag/event.d.ts
@ -1,516 +0,0 @@
-export interface DLightGlobalEventHandlers {
-  /**
-   * Fires when the user aborts the download.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/abort_event)
-   */
-  onAbort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationcancel_event) */
-  onAnimationCancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event) */
-  onAnimationEnd: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event) */
-  onAnimationIteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event) */
-  onAnimationStart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/auxclick_event) */
-  onAuxClick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/beforeinput_event) */
-  onBeforeInput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-
-  /**
-   * Fires when the object loses the input focus.
-   * @param ev The focus event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/blur_event)
-   */
-  onBlur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/cancel_event) */
-  onCancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when playback is possible, but would require further buffering.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplay_event)
-   */
-  onCanPlay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/canplaythrough_event) */
-  onCanPlayThrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when the contents of the object or selection have changed.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event)
-   */
-  onChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when the user clicks the left mouse button on the object
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/click_event)
-   */
-  onClick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDialogElement/close_event) */
-  onClose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when the user clicks the right mouse button in the client area, opening the context menu.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event)
-   */
-  onContextMenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/copy_event) */
-  onCopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTrackElement/cuechange_event) */
-  onCueChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/cut_event) */
-  onCut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
-
-  /**
-   * Fires when the user double-clicks the object.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/dblclick_event)
-   */
-  onDblClick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /**
-   * Fires on the source object continuously during a drag operation.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drag_event)
-   */
-  onDrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /**
-   * Fires on the source object when the user releases the mouse at the close of a drag operation.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragend_event)
-   */
-  onDragEnd: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /**
-   * Fires on the target element when the user drags the object to a valid drop target.
-   * @param ev The drag event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragenter_event)
-   */
-  onDragEnter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /**
-   * Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
-   * @param ev The drag event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragleave_event)
-   */
-  onDragLeave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /**
-   * Fires on the target element continuously while the user drags the object over a valid drop target.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragover_event)
-   */
-  onDragOver: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /**
-   * Fires on the source object when the user starts to drag a text selection or selected object.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dragstart_event)
-   */
-  onDragStart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/drop_event) */
-  onDrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-
-  /**
-   * Occurs when the duration attribute is updated.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/durationchange_event)
-   */
-  onDurationChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the media element is reset to its initial state.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/emptied_event)
-   */
-  onEmptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the end of playback is reached.
-   * @param ev The event
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ended_event)
-   */
-  onEnded: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when an error occurs during object loading.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/error_event)
-   */
-  onError: OnErrorEventHandler;
-
-  /**
-   * Fires when the object receives focus.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/focus_event)
-   */
-  onFocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/formdata_event) */
-  onFormData: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/gotpointercapture_event) */
-  onGotPointerCapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event) */
-  onInput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/invalid_event) */
-  onInvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when the user presses a key.
-   * @param ev The keyboard event
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keydown_event)
-   */
-  onKeyDown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-
-  /**
-   * Fires when the user presses an alphanumeric key.
-   * @param ev The event.
-   * @deprecated
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keypress_event)
-   */
-  onKeyPress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-
-  /**
-   * Fires when the user releases a key.
-   * @param ev The keyboard event
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/keyup_event)
-   */
-  onKeyUp: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-
-  /**
-   * Fires immediately after the browser loads the object.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/SVGElement/load_event)
-   */
-  onLoad: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when media data is loaded at the current playback position.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadeddata_event)
-   */
-  onLoadedData: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the duration and dimensions of the media have been determined.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadedmetadata_event)
-   */
-  onLoadedMetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when Internet Explorer begins looking for media data.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/loadstart_event)
-   */
-  onLoadStart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/lostpointercapture_event) */
-  onLostPointerCapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /**
-   * Fires when the user clicks the object with either mouse button.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mousedown_event)
-   */
-  onMouseDown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseenter_event) */
-  onMouseEnter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseleave_event) */
-  onMouseLeave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /**
-   * Fires when the user moves the mouse over the object.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mousemove_event)
-   */
-  onMouseMove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /**
-   * Fires when the user moves the mouse pointer outside the boundaries of the object.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseout_event)
-   */
-  onMouseOut: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /**
-   * Fires when the user moves the mouse pointer into the object.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseover_event)
-   */
-  onMouseOver: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /**
-   * Fires when the user releases a mouse button while the mouse is over the object.
-   * @param ev The mouse event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/mouseup_event)
-   */
-  onMouseUp: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/paste_event) */
-  onPaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
-
-  /**
-   * Occurs when playback is paused.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/pause_event)
-   */
-  onPause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the play method is requested.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/play_event)
-   */
-  onPlay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the audio or video has started playing.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/playing_event)
-   */
-  onPlaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointercancel_event) */
-  onPointerCancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerdown_event) */
-  onPointerDown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerenter_event) */
-  onPointerEnter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerleave_event) */
-  onPointerLeave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointermove_event) */
-  onPointerMove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerout_event) */
-  onPointerOut: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerover_event) */
-  onPointerOver: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/pointerup_event) */
-  onPointerUp: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-
-  /**
-   * Occurs to indicate progress while downloading media data.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/progress_event)
-   */
-  onProgress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
-
-  /**
-   * Occurs when the playback rate is increased or decreased.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/ratechange_event)
-   */
-  onRateChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when the user resets a form.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/reset_event)
-   */
-  onReset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement/resize_event) */
-  onResize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-
-  /**
-   * Fires when the user repositions the scroll box in the scroll bar on the object.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scroll_event)
-   */
-  onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/scrollend_event) */
-  onScrollEnd: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/securitypolicyviolation_event) */
-  onSecurityPolicyViolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
-
-  /**
-   * Occurs when the seek operation ends.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/seeked_event)
-   */
-  onSeeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the current playback position is moved.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/seeking_event)
-   */
-  onSeeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Fires when the current selection changes.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/select_event)
-   */
-  onSelect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/selectionchange_event) */
-  onSelectionChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/selectstart_event) */
-  onSelectStart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLSlotElement/slotchange_event) */
-  onSlotChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when the download has stopped.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/stalled_event)
-   */
-  onStalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLFormElement/submit_event) */
-  onSubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
-
-  /**
-   * Occurs if the load operation has been intentionally halted.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/suspend_event)
-   */
-  onSuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs to indicate the current playback position.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/timeupdate_event)
-   */
-  onTimeUpdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLDetailsElement/toggle_event) */
-  onToggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitioncancel_event) */
-  onTransitionCancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event) */
-  onTransitionEnd: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionrun_event) */
-  onTransitionRun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionstart_event) */
-  onTransitionStart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-
-  /**
-   * Occurs when the volume is changed, or playback is muted or unmuted.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/volumechange_event)
-   */
-  onVolumeChange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * Occurs when playback stops because the next frame of a video resource is not available.
-   * @param ev The event.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement/waiting_event)
-   */
-  onWaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * @deprecated This is a legacy alias of `onAnimationEnd`.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationend_event)
-   */
-  onWebkitAnimationEnd: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * @deprecated This is a legacy alias of `onAnimationIteration`.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationiteration_event)
-   */
-  onWebkitAnimationIteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * @deprecated This is a legacy alias of `onAnimationStart`.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/animationstart_event)
-   */
-  onWebkitAnimationStart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /**
-   * @deprecated This is a legacy alias of `onTransitionEnd`.
-   *
-   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/transitionend_event)
-   */
-  onWebkitTransitionEnd: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-
-  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/wheel_event) */
-  onWheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
-}
--- a/packages/inula-next/src/types/htmlTag/htmlElement.d.ts
+++ b/packages/inula-next/src/types/htmlTag/htmlElement.d.ts
@ -1,33 +0,0 @@
-import { type Properties } from 'csstype';
-
-// ---- Used to determine whether X and Y are equal, return A if equal, otherwise B
-type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
-
-export type OmitIndexSignature<ObjectType> = {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  [KeyType in keyof ObjectType as {} extends Record<KeyType, unknown> ? never : KeyType]: ObjectType[KeyType];
-};
-
-// ---- For each key, check whether there is readonly, if there is, return never, and then Pick out is not never
-type WritableKeysOf<T> = {
-  [P in keyof T]: IfEquals<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, P, never>;
-}[keyof T];
-type RemoveReadOnly<T> = Pick<T, WritableKeysOf<T>>;
-
-// ---- Delete all functions
-type OmitFunction<T> = Omit<T, { [K in keyof T]: T[K] extends (...args: any) => any ? K : never }[keyof T]>;
-
-type OmitFuncAndReadOnly<T> = RemoveReadOnly<OmitFunction<OmitIndexSignature<T>>>;
-
-// ---- properties
-type OmitFuncAndReadOnlyProperty<G> = Omit<OmitFuncAndReadOnly<G>, 'className' | 'htmlFor' | 'style' | 'innerText'>;
-
-type CustomCSSProperties = {
-  [Key in `--${string}`]: string | number;
-};
-
-export type HTMLAttributes<T> = OmitFuncAndReadOnlyProperty<T> & {
-  style: Properties & CustomCSSProperties;
-  class: string;
-  for: string;
-};
--- a/packages/inula-next/src/types/htmlTag/index.d.ts
+++ b/packages/inula-next/src/types/htmlTag/index.d.ts
@ -1,236 +0,0 @@
-import type { DLightGlobalEventHandlers } from './event';
-import type { OmitIndexSignature, HTMLAttributes } from './htmlElement';
-
-// ---- If there is an event(start with on), remove it
-export type PropertyWithEvent<G> = Omit<
-  G,
-  {
-    [K in keyof G]: K extends `on${string}` ? K : never;
-  }[keyof G]
-> &
-  DLightGlobalEventHandlers;
-
-interface DLightHtmlProps<El> {
-  ref: El | ((holder: El) => void) | undefined;
-  prop: Record<string, string | number | boolean>;
-  attr: Record<string, string>;
-  dataset: Record<string, string>;
-  forwardProps: true | undefined;
-  willMount: (el: El) => void;
-  didMount: (el: El) => void;
-  willUnmount: (el: El) => void;
-  didUnmount: (el: El) => void;
-  didUpdate: <T>(el: El, key: string, prevValue: T, currValue: T) => void;
-}
-
-export type DLightHTMLAttributes<T, G, El> = DLightHtmlProps<El> & HTMLAttributes<T> & G;
-
-export type DLightHTMLAttributesFunc<T, G, El> = {
-  [K in keyof DLightHTMLAttributes<T, G, El>]: (
-    value?: DLightHTMLAttributes<T, G, El>[K]
-  ) => Omit<DLightHTMLAttributesFunc<T, G, El>, K>;
-};
-
-export type DLightHtmlTagFunc<T = HTMLElement, G = object> = (
-  innerText?: string | number | ((View: never) => void)
-) => DLightHTMLAttributesFunc<PropertyWithEvent<OmitIndexSignature<T>>, G, T>;
-
-export const a: DLightHtmlTagFunc<HTMLAnchorElement>;
-export const abbr: DLightHtmlTagFunc;
-export const address: DLightHtmlTagFunc;
-export const area: DLightHtmlTagFunc<HTMLAreaElement>;
-export const article: DLightHtmlTagFunc;
-export const aside: DLightHtmlTagFunc;
-export const audio: DLightHtmlTagFunc<HTMLAudioElement>;
-export const b: DLightHtmlTagFunc;
-export const base: DLightHtmlTagFunc<HTMLBaseElement>;
-export const bdi: DLightHtmlTagFunc;
-export const bdo: DLightHtmlTagFunc;
-export const blockquote: DLightHtmlTagFunc<HTMLQuoteElement>;
-export const body: DLightHtmlTagFunc<HTMLBodyElement>;
-export const br: DLightHtmlTagFunc<HTMLBRElement>;
-export const button: DLightHtmlTagFunc<HTMLButtonElement>;
-export const canvas: DLightHtmlTagFunc<HTMLCanvasElement>;
-export const caption: DLightHtmlTagFunc<HTMLTableCaptionElement>;
-export const cite: DLightHtmlTagFunc;
-export const code: DLightHtmlTagFunc;
-export const col: DLightHtmlTagFunc<HTMLTableColElement>;
-export const colgroup: DLightHtmlTagFunc<HTMLTableColElement>;
-export const data: DLightHtmlTagFunc<HTMLDataElement>;
-export const datalist: DLightHtmlTagFunc<HTMLDataListElement>;
-export const dd: DLightHtmlTagFunc;
-export const del: DLightHtmlTagFunc<HTMLModElement>;
-export const details: DLightHtmlTagFunc<HTMLDetailsElement>;
-export const dfn: DLightHtmlTagFunc;
-export const dialog: DLightHtmlTagFunc<HTMLDialogElement>;
-export const div: DLightHtmlTagFunc<HTMLDivElement>;
-export const dl: DLightHtmlTagFunc<HTMLDListElement>;
-export const dt: DLightHtmlTagFunc;
-export const em: DLightHtmlTagFunc;
-export const embed: DLightHtmlTagFunc<HTMLEmbedElement>;
-export const fieldset: DLightHtmlTagFunc<HTMLFieldSetElement>;
-export const figcaption: DLightHtmlTagFunc;
-export const figure: DLightHtmlTagFunc;
-export const footer: DLightHtmlTagFunc;
-export const form: DLightHtmlTagFunc<HTMLFormElement>;
-export const h1: DLightHtmlTagFunc<HTMLHeadingElement>;
-export const h2: DLightHtmlTagFunc<HTMLHeadingElement>;
-export const h3: DLightHtmlTagFunc<HTMLHeadingElement>;
-export const h4: DLightHtmlTagFunc<HTMLHeadingElement>;
-export const h5: DLightHtmlTagFunc<HTMLHeadingElement>;
-export const h6: DLightHtmlTagFunc<HTMLHeadingElement>;
-export const head: DLightHtmlTagFunc<HTMLHeadElement>;
-export const header: DLightHtmlTagFunc;
-export const hgroup: DLightHtmlTagFunc;
-export const hr: DLightHtmlTagFunc<HTMLHRElement>;
-export const html: DLightHtmlTagFunc<HTMLHtmlElement>;
-export const i: DLightHtmlTagFunc;
-export const iframe: DLightHtmlTagFunc<HTMLIFrameElement>;
-export const img: DLightHtmlTagFunc<HTMLImageElement>;
-export const input: DLightHtmlTagFunc<HTMLInputElement>;
-export const ins: DLightHtmlTagFunc<HTMLModElement>;
-export const kbd: DLightHtmlTagFunc;
-export const label: DLightHtmlTagFunc<HTMLLabelElement>;
-export const legend: DLightHtmlTagFunc<HTMLLegendElement>;
-export const li: DLightHtmlTagFunc<HTMLLIElement>;
-export const link: DLightHtmlTagFunc<HTMLLinkElement>;
-export const main: DLightHtmlTagFunc;
-export const map: DLightHtmlTagFunc<HTMLMapElement>;
-export const mark: DLightHtmlTagFunc;
-export const menu: DLightHtmlTagFunc<HTMLMenuElement>;
-export const meta: DLightHtmlTagFunc<HTMLMetaElement>;
-export const meter: DLightHtmlTagFunc<HTMLMeterElement>;
-export const nav: DLightHtmlTagFunc;
-export const noscript: DLightHtmlTagFunc;
-export const object: DLightHtmlTagFunc<HTMLObjectElement>;
-export const ol: DLightHtmlTagFunc<HTMLOListElement>;
-export const optgroup: DLightHtmlTagFunc<HTMLOptGroupElement>;
-export const option: DLightHtmlTagFunc<HTMLOptionElement>;
-export const output: DLightHtmlTagFunc<HTMLOutputElement>;
-export const p: DLightHtmlTagFunc<HTMLParagraphElement>;
-export const picture: DLightHtmlTagFunc<HTMLPictureElement>;
-export const pre: DLightHtmlTagFunc<HTMLPreElement>;
-export const progress: DLightHtmlTagFunc<HTMLProgressElement>;
-export const q: DLightHtmlTagFunc<HTMLQuoteElement>;
-export const rp: DLightHtmlTagFunc;
-export const rt: DLightHtmlTagFunc;
-export const ruby: DLightHtmlTagFunc;
-export const s: DLightHtmlTagFunc;
-export const samp: DLightHtmlTagFunc;
-export const script: DLightHtmlTagFunc<HTMLScriptElement>;
-export const section: DLightHtmlTagFunc;
-export const select: DLightHtmlTagFunc<HTMLSelectElement>;
-export const slot: DLightHtmlTagFunc<HTMLSlotElement>;
-export const small: DLightHtmlTagFunc;
-export const source: DLightHtmlTagFunc<HTMLSourceElement>;
-export const span: DLightHtmlTagFunc<HTMLSpanElement>;
-export const strong: DLightHtmlTagFunc;
-export const style: DLightHtmlTagFunc<HTMLStyleElement>;
-export const sub: DLightHtmlTagFunc;
-export const summary: DLightHtmlTagFunc;
-export const sup: DLightHtmlTagFunc;
-export const table: DLightHtmlTagFunc<HTMLTableElement>;
-export const tbody: DLightHtmlTagFunc<HTMLTableSectionElement>;
-export const td: DLightHtmlTagFunc<HTMLTableCellElement>;
-export const template: DLightHtmlTagFunc<HTMLTemplateElement>;
-export const textarea: DLightHtmlTagFunc<HTMLTextAreaElement>;
-export const tfoot: DLightHtmlTagFunc<HTMLTableSectionElement>;
-export const th: DLightHtmlTagFunc<HTMLTableCellElement>;
-export const thead: DLightHtmlTagFunc<HTMLTableSectionElement>;
-export const time: DLightHtmlTagFunc<HTMLTimeElement>;
-export const title: DLightHtmlTagFunc<HTMLTitleElement>;
-export const tr: DLightHtmlTagFunc<HTMLTableRowElement>;
-export const track: DLightHtmlTagFunc<HTMLTrackElement>;
-export const u: DLightHtmlTagFunc;
-export const ul: DLightHtmlTagFunc<HTMLUListElement>;
-export const var_: DLightHtmlTagFunc;
-export const video: DLightHtmlTagFunc<HTMLVideoElement>;
-export const wbr: DLightHtmlTagFunc;
-export const acronym: DLightHtmlTagFunc;
-export const applet: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const basefont: DLightHtmlTagFunc;
-export const bgsound: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const big: DLightHtmlTagFunc;
-export const blink: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const center: DLightHtmlTagFunc;
-export const dir: DLightHtmlTagFunc<HTMLDirectoryElement>;
-export const font: DLightHtmlTagFunc<HTMLFontElement>;
-export const frame: DLightHtmlTagFunc<HTMLFrameElement>;
-export const frameset: DLightHtmlTagFunc<HTMLFrameSetElement>;
-export const isindex: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const keygen: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const listing: DLightHtmlTagFunc<HTMLPreElement>;
-export const marquee: DLightHtmlTagFunc<HTMLMarqueeElement>;
-export const menuitem: DLightHtmlTagFunc;
-export const multicol: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const nextid: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const nobr: DLightHtmlTagFunc;
-export const noembed: DLightHtmlTagFunc;
-export const noframes: DLightHtmlTagFunc;
-export const param: DLightHtmlTagFunc<HTMLParamElement>;
-export const plaintext: DLightHtmlTagFunc;
-export const rb: DLightHtmlTagFunc;
-export const rtc: DLightHtmlTagFunc;
-export const spacer: DLightHtmlTagFunc<HTMLUnknownElement>;
-export const strike: DLightHtmlTagFunc;
-export const tt: DLightHtmlTagFunc;
-export const xmp: DLightHtmlTagFunc<HTMLPreElement>;
-export const animate: DLightHtmlTagFunc<SVGAnimateElement>;
-export const animateMotion: DLightHtmlTagFunc<SVGAnimateMotionElement>;
-export const animateTransform: DLightHtmlTagFunc<SVGAnimateTransformElement>;
-export const circle: DLightHtmlTagFunc<SVGCircleElement>;
-export const clipPath: DLightHtmlTagFunc<SVGClipPathElement>;
-export const defs: DLightHtmlTagFunc<SVGDefsElement>;
-export const desc: DLightHtmlTagFunc<SVGDescElement>;
-export const ellipse: DLightHtmlTagFunc<SVGEllipseElement>;
-export const feBlend: DLightHtmlTagFunc<SVGFEBlendElement>;
-export const feColorMatrix: DLightHtmlTagFunc<SVGFEColorMatrixElement>;
-export const feComponentTransfer: DLightHtmlTagFunc<SVGFEComponentTransferElement>;
-export const feComposite: DLightHtmlTagFunc<SVGFECompositeElement>;
-export const feConvolveMatrix: DLightHtmlTagFunc<SVGFEConvolveMatrixElement>;
-export const feDiffuseLighting: DLightHtmlTagFunc<SVGFEDiffuseLightingElement>;
-export const feDisplacementMap: DLightHtmlTagFunc<SVGFEDisplacementMapElement>;
-export const feDistantLight: DLightHtmlTagFunc<SVGFEDistantLightElement>;
-export const feDropShadow: DLightHtmlTagFunc<SVGFEDropShadowElement>;
-export const feFlood: DLightHtmlTagFunc<SVGFEFloodElement>;
-export const feFuncA: DLightHtmlTagFunc<SVGFEFuncAElement>;
-export const feFuncB: DLightHtmlTagFunc<SVGFEFuncBElement>;
-export const feFuncG: DLightHtmlTagFunc<SVGFEFuncGElement>;
-export const feFuncR: DLightHtmlTagFunc<SVGFEFuncRElement>;
-export const feGaussianBlur: DLightHtmlTagFunc<SVGFEGaussianBlurElement>;
-export const feImage: DLightHtmlTagFunc<SVGFEImageElement>;
-export const feMerge: DLightHtmlTagFunc<SVGFEMergeElement>;
-export const feMergeNode: DLightHtmlTagFunc<SVGFEMergeNodeElement>;
-export const feMorphology: DLightHtmlTagFunc<SVGFEMorphologyElement>;
-export const feOffset: DLightHtmlTagFunc<SVGFEOffsetElement>;
-export const fePointLight: DLightHtmlTagFunc<SVGFEPointLightElement>;
-export const feSpecularLighting: DLightHtmlTagFunc<SVGFESpecularLightingElement>;
-export const feSpotLight: DLightHtmlTagFunc<SVGFESpotLightElement>;
-export const feTile: DLightHtmlTagFunc<SVGFETileElement>;
-export const feTurbulence: DLightHtmlTagFunc<SVGFETurbulenceElement>;
-export const filter: DLightHtmlTagFunc<SVGFilterElement>;
-export const foreignObject: DLightHtmlTagFunc<SVGForeignObjectElement>;
-export const g: DLightHtmlTagFunc<SVGGElement>;
-export const image: DLightHtmlTagFunc<SVGImageElement>;
-export const line: DLightHtmlTagFunc<SVGLineElement>;
-export const linearGradient: DLightHtmlTagFunc<SVGLinearGradientElement>;
-export const marker: DLightHtmlTagFunc<SVGMarkerElement>;
-export const mask: DLightHtmlTagFunc<SVGMaskElement>;
-export const metadata: DLightHtmlTagFunc<SVGMetadataElement>;
-export const mpath: DLightHtmlTagFunc<SVGMPathElement>;
-export const path: DLightHtmlTagFunc<SVGPathElement>;
-export const pattern: DLightHtmlTagFunc<SVGPatternElement>;
-export const polygon: DLightHtmlTagFunc<SVGPolygonElement>;
-export const polyline: DLightHtmlTagFunc<SVGPolylineElement>;
-export const radialGradient: DLightHtmlTagFunc<SVGRadialGradientElement>;
-export const rect: DLightHtmlTagFunc<SVGRectElement>;
-export const set: DLightHtmlTagFunc<SVGSetElement>;
-export const stop: DLightHtmlTagFunc<SVGStopElement>;
-export const svg: DLightHtmlTagFunc<SVGSVGElement>;
-export const switch_: DLightHtmlTagFunc<SVGSwitchElement>;
-export const symbol: DLightHtmlTagFunc<SVGSymbolElement>;
-export const text: DLightHtmlTagFunc<SVGTextElement>;
-export const textPath: DLightHtmlTagFunc<SVGTextPathElement>;
-export const tspan: DLightHtmlTagFunc<SVGTSpanElement>;
-// export const use: DLightHtmlTagFunc<SVGUseElement>
-export const view: DLightHtmlTagFunc<SVGViewElement>;
--- a/packages/inula-next/src/types/index.d.ts
+++ b/packages/inula-next/src/types/index.d.ts
@ -1,41 +0,0 @@
-import { type Typed } from './compTag';
-import { type DLightHtmlTagFunc } from './htmlTag';
-export { type Properties as CSSProperties } from 'csstype';
-
-export const comp: <T>(tag: T) => object extends T ? any : Typed<T>;
-export const tag: (tag: any) => DLightHtmlTagFunc;
-
-export { _ } from './expressionTag';
-export * from './htmlTag';
-export * from './compTag';
-export * from './envTag';
-export * from './model';
-export const Static: any;
-export const Children: any;
-export const Content: any;
-export const Prop: any;
-export const Env: any;
-export const Watch: any;
-export const ForwardProps: any;
-export const Main: any;
-export const App: any;
-export const Mount: (idOrEl: string | HTMLElement) => any;
-
-// ---- With actual value
-export function render(DL: any, idOrEl: string | HTMLElement): void;
-export function manual<T>(callback: () => T, _deps?: any[]): T;
-export function escape<T>(arg: T): T;
-export function setGlobal(globalObj: any): void;
-export function setDocument(customDocument: any): void;
-export const $: typeof escape;
-export const View: any;
-export const Snippet: any;
-export const Model: any;
-export const update: any;
-export const required: any;
-export function insertChildren<T>(parent: T, children: DLightViewProp): void;
-
-// ---- View types
-export type DLightViewComp<T = any> = Typed<T>;
-export type DLightViewProp = (View: any) => void;
-export type DLightViewLazy<T = any> = () => Promise<{ default: T }>;
--- a/packages/inula-next/src/types/model.d.ts
+++ b/packages/inula-next/src/types/model.d.ts
@ -1,22 +0,0 @@
-import { ContentKeyName, ContentProp } from './compTag';
-
-type RemoveDLightInternal<T, Props> = Omit<T, 'willMount' | 'didMount' | 'didUpdate' | 'willUnmount' | keyof Props>;
-
-export type Modeling<Model, Props = object> = (props: Props) => Model;
-
-type GetProps<T> = keyof T extends never ? never : ContentKeyName<T> extends undefined ? T : Omit<T, ContentKeyName<T>>;
-
-type GetContent<T> =
-  ContentKeyName<T> extends undefined ? never : T[ContentKeyName<T>] extends ContentProp<infer U> ? U : never;
-
-export const use: <M>(
-  model: M,
-  // @ts-expect-error Model should be a function
-  props?: GetProps<Parameters<M>[0]>,
-  // @ts-expect-error Model should be a function
-  content?: GetContent<Parameters<M>[0]>
-  // @ts-expect-error Model should be a function
-) => RemoveDLightInternal<ReturnType<M>, Parameters<M>[0]>;
-
-// @ts-expect-error Model should be a function
-export type ModelType<T> = RemoveDLightInternal<ReturnType<T>, Parameters<T>[0]>;
--- a/packages/inula-next/test/components.test.tsx
+++ b/packages/inula-next/test/components.test.tsx
@ -15,7 +15,15 @@

 import { describe, expect, vi } from 'vitest';
 import { domTest as it } from './utils';
-import { render, View } from '../src';
+import { render } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});

 describe('components', () => {
  describe('ref', () => {
@ -26,9 +34,9 @@ describe('components', () => {
        let count = 0;
        let _ref: HTMLElement;

-        didMount: {
+        didMount(() => {
          ref = _ref;
-        }
+        });

        return <div ref={_ref}>test</div>;
      }
@ -38,6 +46,28 @@ describe('components', () => {
      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();

@ -51,30 +81,167 @@ describe('components', () => {
      }

      render(App, container);
-      expect(fn).toHaveBeenCalled();
+      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('env', () => {
-    it('should support env', ({ container }) => {
+  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 (
-          <env theme="dark">
-            <Child name="child" />
-          </env>
+            <div className="parent">
+              <h2>Parent</h2>
+              {children}
+            </div>
          );
        }

-      function Child({ name }, { theme }) {
+        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>
-            name is {name}, theme is {theme}
+              Counter {name}: {value}
+            </div>
+          );
+        }
+
+        return (
+          <div>
+            <Counter name="A" />
+            <Counter name="B" />
          </div>
        );
      }

      render(App, container);
-      expect(container.innerHTML).toBe('<div>name is child, theme is dark</div>');
+      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
@ -15,7 +15,7 @@

 import { describe, expect, vi } from 'vitest';
 import { domTest as it } from './utils';
-import { render, View } from '../src';
+import { render } from '../src';

 vi.mock('../src/scheduler', async () => {
  return {
@ -31,11 +31,9 @@ describe('conditional rendering', () => {

    function App() {
      let count = 2;
-      willMount: {
      set = (val: number) => {
        count = val;
      };
-      }
      return (
        <>
          <if cond={count > 1}>{count} is bigger than is 1</if>
@ -58,11 +56,9 @@ describe('conditional rendering', () => {

    function App() {
      let count = 0;
-      willMount: {
      set = (val: number) => {
        count = val;
      };
-      }
      return (
        <if cond={count > 1}>
          {count} is bigger than is 1
@ -77,18 +73,193 @@ describe('conditional rendering', () => {
    expect(container.innerHTML).toMatchInlineSnapshot(`""`);
    set(2);
    expect(container.innerHTML).toMatchInlineSnapshot(`
-      "2 is bigger than is 1
-                "
+      "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>"
+      "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
-                "
+      "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
@ -13,19 +13,26 @@
 * See the Mulan PSL v2 for more details.
 */

-import { describe, expect, vi } from 'vitest';
+import { describe, expect, vi, beforeEach } from 'vitest';
 import { domTest as it } from './utils';
-import { render, View } from '../src';
+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: {
+      willMount(() => {
        expect(container.innerHTML).toBe('');
        fn();
-      }
+      });

      return <div>test</div>;
    }
@ -38,10 +45,10 @@ describe('lifecycle', () => {
    const fn = vi.fn();

    function App() {
-      didMount: {
+      didMount(() => {
        expect(container.innerHTML).toBe('<div>test</div>');
        fn();
-      }
+      });

      return <div>test</div>;
    }
@ -50,15 +57,59 @@ describe('lifecycle', () => {
    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.skip('should call willUnmount', ({ container }) => {
+    it.fails('should call willUnmount', ({ container }) => {
      const fn = vi.fn();

      function App() {
-      willUnmount: {
+        didUnmount(() => {
          expect(container.innerHTML).toBe('<div>test</div>');
          fn();
-      }
+        });

        return <div>test</div>;
      }
@ -66,4 +117,68 @@ describe('lifecycle', () => {
      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
@ -116,8 +116,7 @@ describe('props', () => {
    `);
    });

-    // TODO: should support children default
-    it.fails('should support children alias with default value', ({ container }) => {
+    it('should support children alias with default value', ({ container }) => {
      function Child({ children: alias = 'default child' }) {
        return <h1>{alias}</h1>;
      }
@ -137,3 +136,193 @@ describe('props', () => {
    });
  });
 });
+
+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
@ -17,6 +17,14 @@ 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 }) => {
@ -41,28 +49,19 @@ describe('rendering', () => {
      }

      render(App, container);
-      expect(container).toMatchInlineSnapshot(`
-        <div>
-          <h1>
-            hello
-            world
-            !!!
-          </h1>
-        </div>
-      `);
+      expect(container.innerHTML).toBe('<h1>hello world!!!</h1>');
    });

    // TODO: SHOULD FIX
-    it.fails('should support dom has multiple layers ', ({ container }) => {
+    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>
+              <button>Add, Now is{count}</button>
            </section>
            Footer
          </div>
@ -73,6 +72,7 @@ describe('rendering', () => {
      expect(container).toMatchInlineSnapshot(`
        <div>
          <div>
+            Header
            <h1>
              hello world!!!
            </h1>
@ -82,26 +82,38 @@ describe('rendering', () => {
                0
              </button>
            </section>
+            Footer
          </div>
        </div>
      `);
    });

    // TODO: SHOULD FIX
-    it.fails('should support tag, text and variable mixing', ({ container }) => {
+    it('should support tag, text and variable mixing', ({ container }) => {
      function App() {
        let count = 'world';

        return (
          <section>
-            count: {count}
-            <button>Add, count is {count}</button>
+            count:{count}
+            <button>Add, count is{count}</button>
          </section>
        );
      }

      render(App, container);
-      expect(container).toMatchInlineSnapshot();
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section>
+            count:
+            world
+            <button>
+              Add, count is
+              world
+            </button>
+          </section>
+        </div>
+      `);
    });
  });

@ -116,6 +128,26 @@ describe('rendering', () => {
      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>;
@ -152,6 +184,62 @@ describe('rendering', () => {
      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', () => {
@ -168,6 +256,37 @@ describe('rendering', () => {

      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', () => {
--- 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/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/vitest.config.ts
+++ b/packages/inula-next/vitest.config.ts
@ -15,7 +15,7 @@

 // vitest.config.ts
 import { defineConfig } from 'vitest/config';
-import inula from 'vite-plugin-inula-next';
+import inula from '@openinula/vite-plugin-inula-next';
 import * as path from 'node:path';

 export default defineConfig({
@ -29,8 +29,9 @@ export default defineConfig({
    conditions: ['dev'],
  },
  plugins: [
-    // @ts-expect-error TODO: fix vite plugin interface is not compatible
-    inula(),
+    inula({
+      excludeFiles: '**/src/**/*{js,jsx,ts,tsx}',
+    }),
  ],
  test: {
    environment: 'jsdom', // or 'jsdom', 'node'
--- a/packages/inula-router/src/configs/package.json
+++ b/packages/inula-router/src/configs/package.json
@ -1,10 +0,0 @@
-{
-  "name": "inula-router-config",
-  "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/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/transpiler/babel-api/src/index.d.ts
+++ b/packages/transpiler/babel-api/src/index.d.ts
@ -4,4 +4,7 @@ import type babel from '@babel/core';
 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
@ -21,6 +21,10 @@ export const getBabelApi = () => {
  return babelApi;
 };

+export function traverse(node, visitor) {
+  getBabelApi().traverse(node, visitor);
+}
+
 export const types = new Proxy(
  {},
  {
--- a/packages/transpiler/babel-inula-next-core/CHANGELOG.md
+++ b/packages/transpiler/babel-inula-next-core/CHANGELOG.md
@ -1,5 +1,16 @@
 # 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
--- a/packages/transpiler/babel-inula-next-core/package.json
+++ b/packages/transpiler/babel-inula-next-core/package.json
@ -1,12 +1,8 @@
 {
-  "name": "babel-preset-inula-next",
-  "version": "0.0.3",
-  "author": {
-    "name": "IanDx",
-    "email": "iandxssxx@gmail.com"
-  },
+  "name": "@openinula/babel-preset-inula-next",
+  "version": "0.0.0-SNAPSHOT",
  "keywords": [
-    "dlight.js",
+    "Inula-Next",
    "babel-preset"
  ],
  "license": "MIT",
@ -14,17 +10,19 @@
    "dist"
  ],
  "type": "module",
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
  "scripts": {
    "build": "tsup --sourcemap",
    "type-check": "tsc --noEmit",
-    "test": "vitest"
+    "test": "vitest run"
  },
  "devDependencies": {
    "@types/babel__core": "^7.20.5",
    "@types/node": "^20.10.5",
+    "@vitest/coverage-v8": "^1.6.0",
+    "sinon": "^18.0.0",
    "tsup": "^6.7.0",
    "typescript": "^5.3.2"
  },
@ -37,14 +35,14 @@
    "@babel/plugin-syntax-typescript": "^7.23.3",
    "@babel/traverse": "^7.24.1",
    "@babel/types": "^7.24.0",
+    "@openinula/babel-api": "workspace:*",
+    "@openinula/jsx-view-parser": "workspace:*",
    "@openinula/reactivity-parser": "workspace:*",
-    "@openinula/view-parser": "workspace:*",
+    "@openinula/view-generator": "workspace:*",
    "@types/babel-types": "^7.0.15",
    "@types/babel__generator": "^7.6.8",
    "@types/babel__parser": "^7.1.1",
    "@types/babel__traverse": "^7.6.8",
-    "@openinula/jsx-view-parser": "workspace:*",
-    "@openinula/babel-api": "workspace:*",
    "minimatch": "^9.0.3",
    "vitest": "^1.4.0"
  },
--- a/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/functionalMacroAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/functionalMacroAnalyze.ts
@ -15,29 +15,27 @@

 import { NodePath } from '@babel/core';
 import { LifeCycle, Visitor } from '../types';
-import { addLifecycle, addWatch } from '../nodeFactory';
 import { types as t } from '@openinula/babel-api';
-import { ON_MOUNT, ON_UNMOUNT, WATCH, WILL_MOUNT, WILL_UNMOUNT } from '../../constants';
+import { DID_MOUNT, DID_UNMOUNT, WATCH, WILL_MOUNT, WILL_UNMOUNT } from '../../constants';
 import { extractFnFromMacro, getFnBodyPath } from '../../utils';
-import { getDependenciesFromNode } from '@openinula/reactivity-parser';
-import { reactivityFuncNames } from '../../const';
+import { extractFnBody } from '../utils';

 function isLifeCycleName(name: string): name is LifeCycle {
-  return [WILL_MOUNT, ON_MOUNT, WILL_UNMOUNT, ON_UNMOUNT].includes(name);
+  return [WILL_MOUNT, DID_MOUNT, WILL_UNMOUNT, DID_UNMOUNT].includes(name);
 }

 /**
 * Analyze the functional macro in the function component
 * 1. lifecycle
 *   1. willMount
- *   2. onMount
+ *   2. didMount
 *   3. willUnMount
- *   4. onUnmount
+ *   4. didUnmount
 * 2. watch
 */
 export function functionalMacroAnalyze(): Visitor {
  return {
-    ExpressionStatement(path: NodePath<t.ExpressionStatement>, ctx) {
+    ExpressionStatement(path: NodePath<t.ExpressionStatement>, { builder }) {
      const expression = path.get('expression');
      if (expression.isCallExpression()) {
        const callee = expression.get('callee');
@ -45,8 +43,8 @@ export function functionalMacroAnalyze(): Visitor {
          const calleeName = callee.node.name;
          // lifecycle
          if (isLifeCycleName(calleeName)) {
-            const fnNode = extractFnFromMacro(expression, calleeName);
-            addLifecycle(ctx.current, calleeName, getFnBodyPath(fnNode).node);
+            const fnPath = extractFnFromMacro(expression, calleeName);
+            builder.addLifecycle(calleeName, extractFnBody(fnPath.node));
            return;
          }

@ -55,19 +53,18 @@ export function functionalMacroAnalyze(): Visitor {
            const fnPath = extractFnFromMacro(expression, WATCH);
            const depsPath = getWatchDeps(expression);

-            const dependency = getDependenciesFromNode(
-              (depsPath ?? fnPath).node,
-              ctx.current._reactiveBitMap,
-              reactivityFuncNames
-            );
-
-            addWatch(ctx.current, fnPath, dependency);
+            const dependency = builder.getDependency((depsPath ?? fnPath).node);
+            if (dependency.allDepBits.length) {
+              builder.addWatch(fnPath, dependency);
+            } else {
+              builder.addLifecycle(WILL_MOUNT, extractFnBody(fnPath.node));
+            }
            return;
          }
        }
      }

-      ctx.unhandledNode.push(path.node);
+      builder.addWillMount(path.node);
    },
  };
 }
--- a/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/hookAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/hookAnalyze.ts
@ -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 { Visitor } from '../types';
+import { type NodePath } from '@babel/core';
+import { types as t } from '@openinula/babel-api';
+
+/**
+ * Analyze the return in the hook
+ */
+export function hookReturnAnalyze(): Visitor {
+  return {
+    ReturnStatement(path: NodePath<t.ReturnStatement>, { builder }) {
+      const returnedNode = path.node.argument;
+      if (returnedNode) {
+        builder.setReturnValue(returnedNode);
+      }
+    },
+  };
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/variablesAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/variablesAnalyze.ts
@ -13,15 +13,14 @@
 * See the Mulan PSL v2 for more details.
 */

-import { Visitor } from '../types';
-import { addMethod, addProperty, addSubComponent, createComponentNode } from '../nodeFactory';
-import { isValidPath } from '../utils';
+import { AnalyzeContext, Visitor } from '../types';
+import { isStaticValue, isValidPath } from '../utils';
 import { type NodePath } from '@babel/core';
-import { COMPONENT } from '../../constants';
-import { analyzeFnComp } from '../index';
-import { getDependenciesFromNode } from '@openinula/reactivity-parser';
+import { importMap } from '../../constants';
+import { analyzeUnitOfWork } from '../index';
 import { types as t } from '@openinula/babel-api';
-import { reactivityFuncNames } from '../../const';
+import { isCompPath } from '../../utils';
+import { IRBuilder } from '../IRBuilder';

 /**
 * collect all properties and methods from the node
@ -31,64 +30,100 @@ import { reactivityFuncNames } from '../../const';
 export function variablesAnalyze(): Visitor {
  return {
    VariableDeclaration(path: NodePath<t.VariableDeclaration>, ctx) {
+      const { builder } = ctx;
      const declarations = path.get('declarations');
      // iterate the declarations
      declarations.forEach(declaration => {
        const id = declaration.get('id');
-        // handle destructuring
-        if (id.isObjectPattern()) {
-          throw new Error('Object destructuring is not supported yet');
-        } else if (id.isArrayPattern()) {
-          // TODO: handle array destructuring
-          throw new Error('Array destructuring is not supported yet');
-        } else if (id.isIdentifier()) {
+        assertIdentifier(id);
        // --- properties: the state / computed / plain properties / methods ---
        const init = declaration.get('init');
-          let dependency;
-          if (isValidPath(init)) {
-            // handle the method
-            if (init.isArrowFunctionExpression() || init.isFunctionExpression()) {
-              addMethod(ctx.current, id.node.name, init.node);
-              return;
-            }
-            // handle the subcomponent
-            // Should like Component(() => {})
-            if (
-              init.isCallExpression() &&
-              init.get('callee').isIdentifier() &&
-              (init.get('callee').node as t.Identifier).name === COMPONENT &&
-              (init.get('arguments')[0].isFunctionExpression() || init.get('arguments')[0].isArrowFunctionExpression())
-            ) {
-              const fnNode = init.get('arguments')[0] as
-                | NodePath<t.ArrowFunctionExpression>
-                | NodePath<t.FunctionExpression>;
-              const subComponent = createComponentNode(id.node.name, fnNode, ctx.current);
+        const kind = path.node.kind;

-              analyzeFnComp(fnNode, subComponent, ctx);
-              addSubComponent(ctx.current, subComponent);
+        // Check if the variable can't be modified
+        if (kind === 'const' && isStaticValue(init.node)) {
+          builder.addPlainVariable(t.variableDeclaration('const', [declaration.node]));
          return;
        }

-            dependency = getDependenciesFromNode(init.node, ctx.current._reactiveBitMap, reactivityFuncNames);
+        if (!isValidPath(init)) {
+          resolveUninitializedVariable(kind, builder, id, declaration.node);
+          return;
        }
-          addProperty(ctx.current, id.node.name, init.node || null, dependency || null);
+
+        // Handle the subcomponent, should like Component(() => {})
+        if (init.isCallExpression() && isCompPath(init)) {
+          resolveSubComponent(init, builder, id, ctx);
+          return;
        }
+
+        // ensure evert jsx slice call expression can found responding sub-component
+        assertJSXSliceIsValid(path, builder.checkSubComponent.bind(builder));
+
+        builder.addVariable({
+          name: id.node.name,
+          value: init.node,
+          kind: path.node.kind,
+        });
      });
    },
-    FunctionDeclaration(path: NodePath<t.FunctionDeclaration>, { current }) {
-      const fnId = path.node.id;
-      if (!fnId) {
-        throw new Error('Function declaration must have an id');
-      }
-
-      const functionExpression = t.functionExpression(
-        path.node.id,
-        path.node.params,
-        path.node.body,
-        path.node.generator,
-        path.node.async
-      );
-      addMethod(current, fnId.name, functionExpression);
+    FunctionDeclaration(path: NodePath<t.FunctionDeclaration>, { builder }) {
+      builder.addPlainVariable(path.node);
    },
  };
 }
+
+function assertIdentifier(id: NodePath<t.LVal>): asserts id is NodePath<t.Identifier> {
+  if (!id.isIdentifier()) {
+    throw new Error(`${id.node.type} is not valid initial value type for state`);
+  }
+}
+
+function assertJSXSliceIsValid(path: NodePath<t.VariableDeclaration>, checker: (name: string) => boolean) {
+  path.traverse({
+    CallExpression(callPath) {
+      const callee = callPath.node.callee;
+      if (t.isIdentifier(callee) && callee.name === importMap.Comp) {
+        const subCompIdPath = callPath.get('arguments')[0];
+        if (!subCompIdPath.isIdentifier()) {
+          throw Error('invalid jsx slice');
+        }
+        const subCompName = subCompIdPath.node.name;
+        if (!checker(subCompName)) {
+          throw Error(`Sub component not found: ${subCompName}`);
+        }
+      }
+    },
+  });
+}
+
+function resolveUninitializedVariable(
+  kind: 'var' | 'let' | 'const' | 'using' | 'await using',
+  builder: IRBuilder,
+  id: NodePath<t.Identifier>,
+  node: Array<t.VariableDeclarator>[number]
+) {
+  if (kind === 'const') {
+    builder.addPlainVariable(t.variableDeclaration('const', [node]));
+  }
+  builder.addVariable({
+    name: id.node.name,
+    value: null,
+    kind,
+  });
+}
+
+function resolveSubComponent(
+  init: NodePath<t.CallExpression>,
+  builder: IRBuilder,
+  id: NodePath<t.Identifier>,
+  ctx: AnalyzeContext
+) {
+  const fnNode = init.get('arguments')[0] as NodePath<t.ArrowFunctionExpression> | NodePath<t.FunctionExpression>;
+
+  builder.startSubComponent(id.node.name, fnNode);
+
+  analyzeUnitOfWork(id.node.name, fnNode, ctx);
+
+  builder.endSubComponent();
+}
--- a/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/viewAnalyze.ts
+++ b/packages/transpiler/babel-inula-next-core/src/analyze/Analyzers/viewAnalyze.ts
@ -15,33 +15,17 @@

 import { Visitor } from '../types';
 import { type NodePath } from '@babel/core';
-import { parseView as parseJSX } from '@openinula/jsx-view-parser';
-import { types as t, getBabelApi } from '@openinula/babel-api';
-import { parseReactivity } from '@openinula/reactivity-parser';
-import { reactivityFuncNames } from '../../const';
-import { setViewChild } from '../nodeFactory';
+import { types as t } from '@openinula/babel-api';

 /**
 * Analyze the watch in the function component
 */
 export function viewAnalyze(): Visitor {
  return {
-    ReturnStatement(path: NodePath<t.ReturnStatement>, { htmlTags, current }) {
-      const returnNode = path.get('argument');
-      if (returnNode.isJSXElement() || returnNode.isJSXFragment()) {
-        const viewUnits = parseJSX(returnNode.node, {
-          babelApi: getBabelApi(),
-          htmlTags,
-          parseTemplate: false,
-        });
-
-        const [viewParticles, usedBit] = parseReactivity(viewUnits, {
-          babelApi: getBabelApi(),
-          depMaskMap: current._reactiveBitMap,
-          reactivityFuncNames,
-        });
-
-        setViewChild(current, viewParticles, usedBit);
+    ReturnStatement(path: NodePath<t.ReturnStatement>, { builder }) {
+      const returnedPath = path.get('argument');
+      if (returnedPath.isJSXElement() || returnedPath.isJSXFragment()) {
+        builder.setViewChild(returnedPath.node);
      }
    },
  };
--- a/Show More
+++ b/Show More