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

feat: add runtime and alter parser
fix(props): rename the prop without alias and deconstruction
2024-10-16 09:46:23 +08:00 · 2024-10-15 11:00:42 -04:00 · 2024-05-24 17:56:42 +08:00 · 2024-05-24 17:20:30 +08:00 · 2024-05-22 17:38:53 +08:00 · 2024-05-22 17:13:43 +08:00
501 changed files with 26456 additions and 14090 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.changeset/README.md
+++ b/.changeset/README.md
@ -0,0 +1,8 @@
 # Changesets
 Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
 with multi-package repos, or single-package repos to help you version and publish your code. You can
 find the full documentation for it [in our repository](https://github.com/changesets/changesets)
 We have a quick list of common questions to get you started engaging with this project in
 [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
--- a/.changeset/config.json
+++ b/.changeset/config.json
@ -0,0 +1,11 @@
 {
  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "restricted",
  "baseBranch": "master",
  "updateInternalDependencies": "patch",
  "ignore": ["create-inula", "openinula", "inula-cli", "inula-dev-tools", "inula-intl", "inula-request", "inula-router", "inula-vite-app", "inula-webpack-app"]
 }
--- a/.gitignore
+++ b/.gitignore
@ -1,11 +1,11 @@
-/node_modules
+node_modules
 .idea
 .vscode
 package-lock.json
 pnpm-lock.yaml
 /packages/**/node_modules
 /packages/inula-cli/lib
 build
 /packages/inula-router/connectRouter
 /packages/inula-router/router
-.inula-max
+dist
 .history
--- a/api-2.1-fn.md
+++ b/api-2.1-fn.md
@ -0,0 +1,55 @@
 ```js
 function MyComp({prop1}) {
  let count = 1
  let doubleCount = count * 2
  const updateCount = () => {
    count++
  }
  return <div>{prop1}</div>;
 }
 ```
 ```js
 function MyComp() {
  let prop1$$prop
  let count = 1
  let doubleCount = count * 2
  let update$$doubleCount = () => {
    if (cached()) return
    doubleCount = count * 2
  }
  const updateCount = () => {
    viewModel.update(count++)
  }
  // ----
  const node = createElement('div')
  setProps(node, "textContent", [prop1])
  const viewModel = Inula.createElement({
    node,
    updateProp: (propName, value) => {
      if (propName === 'prop1') {
        prop1$$prop = value
      }
    },
    updateState: (changed) => {
      if (changed & 0x1) {
        update$$doubleCount()
      }
    },
    updateView: (changed) => {
      if (changed & 0x1) {
        setProps(node, "textContent", [prop1$$prop])
      }
    }
  })
  return viewModel
 }
 ```
--- a/api-2.1.md
+++ b/api-2.1.md
--- a/demos/benchmark/index.html
+++ b/demos/benchmark/index.html
@ -0,0 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8"/>
  <title>Inula-next</title>
 </head>
 <body>
 <div id="main"></div>
 <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>
--- a/demos/benchmark/package.json
+++ b/demos/benchmark/package.json
@ -0,0 +1,25 @@
 {
  "name": "dev",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babel/standalone": "^7.22.4",
    "@openinula/next": "workspace:*",
    "@iandx/easy-css": "^0.10.14",
    "@openinula/babel-preset-inula-next": "workspace:*"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "@openinula/vite-plugin-inula-next": "workspace:*"
  },
  "keywords": [
    "inula-next"
  ]
 }
--- a/demos/benchmark/src/main.jsx
+++ b/demos/benchmark/src/main.jsx
@ -0,0 +1,158 @@
 import { render, View } from '@openinula/next';
 let idCounter = 1;
 const adjectives = [
  'pretty',
  'large',
  'big',
  'small',
  'tall',
  'short',
  'long',
  'handsome',
  'plain',
  'quaint',
  'clean',
  'elegant',
  'easy',
  'angry',
  'crazy',
  'helpful',
  'mushy',
  'odd',
  'unsightly',
  'adorable',
  'important',
  'inexpensive',
  'cheap',
  'expensive',
  'fancy',
 ];
 const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
 const nouns = [
  'table',
  'chair',
  'house',
  'bbq',
  'desk',
  'car',
  'pony',
  'cookie',
  'sandwich',
  'burger',
  'pizza',
  'mouse',
  'keyboard',
 ];
 function _random(max) {
  return Math.round(Math.random() * 1000) % max;
 }
 function buildData(count) {
  const data = new Array(count);
  for (let i = 0; i < count; i++) {
    data[i] = {
      id: idCounter++,
      label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
    };
  }
  return data;
 }
 function Button({ id, text, fn }) {
  return (
    <div class="col-sm-6 smallpad">
      <button id={id} class="btn btn-primary btn-block" type="button" onClick={fn}>
        {text}
      </button>
    </div>
  );
 }
 function App() {
  let data = [];
  let selected = null;
  function run() {
    data = buildData(1000);
  }
  function runLots() {
    data = buildData(10000);
  }
  function add() {
    data.push(...buildData(1000));
  }
  function update() {
    for (let i = 0; i < data.length; i += 10) {
      data[i].label += ' !!!';
    }
  }
  function swapRows() {
    if (data.length > 998) {
      [data[1], data[998]] = [data[998], data[1]];
    }
  }
  function clear() {
    data = [];
  }
  function remove(id) {
    data = data.filter(d => d.id !== id);
  }
  function select(id) {
    selected = id;
  }
  return (
    <div class="container">
      <div class="jumbotron">
        <div class="row">
          <div class="col-md-6">
            <h1>Inula-next Keyed</h1>
          </div>
          <div class="col-md-6">
            <div class="row">
              <Button id="run" text="Create 1,000 rows" fn={run} />
              <Button id="runlots" text="Create 10,000 rows" fn={runLots} />
              <Button id="add" text="Append 1,000 rows" fn={add} />
              <Button id="update" text="Update every 10th row" fn={update} />
              <Button id="clear" text="Clear" fn={clear} />
              <Button id="swaprows" text="Swap Rows" fn={swapRows} />
            </div>
          </div>
        </div>
      </div>
      <table class="table table-hover table-striped test-data">
        <tbody>
          <for each={data}>
            {({ id, label }) => (
              <tr className={selected === id ? 'danger' : ''}>
                <td className="col-md-1" textContent={id} />
                <td className="col-md-4">
                  <a onClick={select.bind(this, id)} textContent={label} />
                </td>
                <td className="col-md-1">
                  <a onClick={remove.bind(this, id)}>
                    <span className="glyphicon glyphicon-remove" aria-hidden="true" />
                  </a>
                </td>
                <td className="col-md-6" />
              </tr>
            )}
          </for>
        </tbody>
      </table>
      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
    </div>
  );
 }
 render(App, 'main');
--- a/demos/benchmark/vite.config.js
+++ b/demos/benchmark/vite.config.js
@ -0,0 +1,13 @@
 import { defineConfig } from 'vite';
 import inula from '@openinula/vite-plugin-inula-next';
 export default defineConfig({
  server: {
    port: 4320,
  },
  base: '',
  optimizeDeps: {
    disabled: true,
  },
  plugins: [inula({ files: '**/*.{tsx,jsx}' })],
 });
--- a/demos/todo-mvc/app.css
+++ b/demos/todo-mvc/app.css
@ -0,0 +1,417 @@
@charset "utf-8";
 html,
 body {
  margin: 0;
  padding: 0;
 }
 button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 body {
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #111111;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
 }
 .hidden {
  display: none;
 }
 .todoapp {
  background: #fff;
  margin: 130px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
  0 25px 50px 0 rgba(0, 0, 0, 0.1);
 }
 .todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
 }
 .todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
 }
 .todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
 }
 .todoapp h1 {
  position: absolute;
  top: -140px;
  width: 100%;
  font-size: 80px;
  font-weight: 200;
  text-align: center;
  color: #b83f45;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
 }
 .new-todo,
 .edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
 .new-todo {
  padding: 16px 16px 16px 60px;
  height: 65px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
 }
 .main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
 }
 .toggle-all {
  width: 1px;
  height: 1px;
  border: none; /* Mobile Safari */
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
 }
 .toggle-all + label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 65px;
  font-size: 0;
  position: absolute;
  top: -65px;
  left: -0;
 }
 .toggle-all + label:before {
  content: '❯';
  display: inline-block;
  font-size: 22px;
  color: #949494;
  padding: 10px 27px 10px 27px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
 }
 .toggle-all:checked + label:before {
  color: #484848;
 }
 .todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 .todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
 }
 .todo-list li:last-child {
  border-bottom: none;
 }
 .todo-list li.editing {
  border-bottom: none;
  padding: 0;
 }
 .todo-list li.editing .edit {
  display: block;
  width: calc(100% - 43px);
  padding: 12px 16px;
  margin: 0 0 0 43px;
 }
 .todo-list li.editing .view {
  display: none;
 }
 .todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
 }
 .todo-list li .toggle {
  opacity: 0;
 }
 .todo-list li .toggle + label {
  /*
    Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
    IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
  */
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center left;
 }
 .todo-list li .toggle:checked + label {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
 }
 .todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
  font-weight: 400;
  color: #484848;
 }
 .todo-list li.completed label {
  color: #949494;
  text-decoration: line-through;
 }
 .todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #949494;
  transition: color 0.2s ease-out;
 }
 .todo-list li .destroy:hover,
 .todo-list li .destroy:focus {
  color: #C18585;
 }
 .todo-list li .destroy:after {
  content: '×';
  display: block;
  height: 100%;
  line-height: 1.1;
 }
 .todo-list li:hover .destroy {
  display: block;
 }
 .todo-list li .edit {
  display: none;
 }
 .todo-list li.editing:last-child {
  margin-bottom: -1px;
 }
 .footer {
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  font-size: 15px;
  border-top: 1px solid #e6e6e6;
 }
 .footer:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
  0 8px 0 -3px #f6f6f6,
  0 9px 1px -3px rgba(0, 0, 0, 0.2),
  0 16px 0 -6px #f6f6f6,
  0 17px 2px -6px rgba(0, 0, 0, 0.2);
 }
 .todo-count {
  float: left;
  text-align: left;
 }
 .todo-count strong {
  font-weight: 300;
 }
 .filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
 }
 .filters li {
  display: inline;
 }
 .filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
 }
 .filters li a:hover {
  border-color: #DB7676;
 }
 .filters li a.selected {
  border-color: #CE4646;
 }
 .clear-completed,
 html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 19px;
  text-decoration: none;
  cursor: pointer;
 }
 .clear-completed:hover {
  text-decoration: underline;
 }
 .info {
  margin: 65px auto 0;
  color: #4d4d4d;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
 }
 .info p {
  line-height: 1;
 }
 .info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
 }
 .info a:hover {
  text-decoration: underline;
 }
 /*
 	Hack to remove background from Mobile Safari.
 	Can't use it globally since it destroys checkboxes in Firefox
 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }
  .todo-list li .toggle {
    height: 40px;
  }
 }
@media (max-width: 430px) {
  .footer {
    height: 50px;
  }
  .filters {
    bottom: 10px;
  }
 }
 :focus,
 .toggle:focus + label,
 .toggle-all:focus + label {
  box-shadow: 0 0 2px 2px #CF7D7D;
  outline: 0;
 }
 .visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
 }
 .toggle-all {
  width: 40px !important;
  height: 60px !important;
  right: auto !important;
 }
 .toggle-all-label {
  pointer-events: none;
 }
--- a/demos/todo-mvc/app.jsx
+++ b/demos/todo-mvc/app.jsx
@ -0,0 +1,90 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import {
  ADD_ITEM,
  UPDATE_ITEM,
  REMOVE_ITEM,
  TOGGLE_ITEM,
  REMOVE_ALL_ITEMS,
  TOGGLE_ALL,
  REMOVE_COMPLETED_ITEMS,
 } from './constants';
 import './app.css';
 import { Footer } from './components/footer.jsx';
 // This alphabet uses `A-Za-z0-9_-` symbols.
 // The order of characters is optimized for better gzip and brotli compression.
 // References to the same file (works both for gzip and brotli):
 // `'use`, `andom`, and `rict'`
 // References to the brotli default dictionary:
 // `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
 let urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
 function nanoid(size = 21) {
  let id = '';
  // A compact alternative for `for (var i = 0; i < step; i++)`.
  let i = size;
  while (i--) {
    // `| 0` is more compact and faster than `Math.floor()`.
    id += urlAlphabet[(Math.random() * 64) | 0];
  }
  return id;
 }
 export function App() {
  let todos = [];
  const todoReducer = (state, action) => {
    switch (action.type) {
      case ADD_ITEM:
        return state.concat({ id: nanoid(), title: action.payload.title, completed: false });
      case UPDATE_ITEM:
        return state.map(todo => (todo.id === action.payload.id ? { ...todo, title: action.payload.title } : todo));
      case REMOVE_ITEM:
        return state.filter(todo => todo.id !== action.payload.id);
      case TOGGLE_ITEM:
        return state.map(todo => (todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo));
      case REMOVE_ALL_ITEMS:
        return [];
      case TOGGLE_ALL:
        return state.map(todo =>
          todo.completed !== action.payload.completed
            ? {
                ...todo,
                completed: action.payload.completed,
              }
            : todo
        );
      case REMOVE_COMPLETED_ITEMS:
        return state.filter(todo => !todo.completed);
    }
    throw Error(`Unknown action: ${action.type}`);
  };
  const dispatch = action => {
    todos = todoReducer(todos, action);
  };
  return (
    <>
      <Header dispatch={dispatch} />
      <Main todos={todos} dispatch={dispatch} />
      <Footer todos={todos} dispatch={dispatch} />
    </>
  );
 }
 render(App, 'main');
--- a/demos/todo-mvc/components/footer.jsx
+++ b/demos/todo-mvc/components/footer.jsx
@ -0,0 +1,38 @@
 import { REMOVE_COMPLETED_ITEMS } from '../constants';
 export function Footer({ todos, dispatch }) {
  let route = window.location.hash;
  window.addEventListener('hashchange', () => {
    console.log('hashchange', window.location.hash);
    route = window.location.hash.slice(1);
  });
  const activeTodos = todos.filter(todo => !todo.completed);
  const removeCompleted = () => dispatch({ type: REMOVE_COMPLETED_ITEMS });
  return (
    <footer className="footer" data-testid="footer">
      <span className="todo-count">{`${activeTodos.length} ${activeTodos.length === 1 ? 'item' : 'items'} left!`}</span>
      <ul className="filters" data-testid="footer-navigation">
        <li>
          <a className={route === '/' ? 'selected' : ''} href="#/">
            All
          </a>
        </li>
        <li>
          <a className={route === '/active' ? 'selected' : ''} href="#/active">
            Active
          </a>
        </li>
        <li>
          <a className={route === '/completed' ? 'selected' : ''} href="#/completed">
            Completed
          </a>
        </li>
      </ul>
      <button className="clear-completed" disabled={activeTodos.length === todos.length} onClick={removeCompleted}>
        Clear completed
      </button>
    </footer>
  );
 }
--- a/demos/todo-mvc/components/header.jsx
+++ b/demos/todo-mvc/components/header.jsx
@ -0,0 +1,13 @@
 import { Input } from './input';
 import { ADD_ITEM } from '../constants';
 export function Header({ dispatch }) {
  const addItem = title => dispatch({ type: ADD_ITEM, payload: { title } });
  return (
    <header className="header" data-testid="header">
      <h1>todos</h1>
      <Input onSubmit={addItem} label="New Todo Input" placeholder="What needs to be done?" />
    </header>
  );
 }
--- a/demos/todo-mvc/components/input.jsx
+++ b/demos/todo-mvc/components/input.jsx
@ -0,0 +1,52 @@
 const sanitize = string => {
  const map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#x27;',
    '/': '&#x2F;',
  };
  const reg = /[&<>"'/]/gi;
  return string.replace(reg, match => map[match]);
 };
 const hasValidMin = (value, min) => {
  return value.length >= min;
 };
 export function Input({ onSubmit, placeholder, label, defaultValue, onBlur }) {
  const handleBlur = () => {
    if (onBlur) onBlur();
  };
  const handleKeyDown = e => {
    if (e.key === 'Enter') {
      const value = e.target.value.trim();
      if (!hasValidMin(value, 2)) return;
      onSubmit(sanitize(value));
      e.target.value = '';
    }
  };
  return (
    <div className="input-container">
      <input
        className="new-todo"
        id="todo-input"
        type="text"
        data-testid="text-input"
        autoFocus
        placeholder={placeholder}
        defaultValue={defaultValue}
        onBlur={handleBlur}
        onKeyDown={handleKeyDown}
      />
      <label className="visually-hidden" htmlFor="todo-input">
        {label}
      </label>
    </div>
  );
 }
--- a/demos/todo-mvc/components/item.jsx
+++ b/demos/todo-mvc/components/item.jsx
@ -0,0 +1,50 @@
 import { Input } from './input';
 import { TOGGLE_ITEM, REMOVE_ITEM, UPDATE_ITEM } from '../constants';
 export const Item = function Item({ todo, dispatch }) {
  let isWritable = false;
  const { title, completed, id } = todo;
  const toggleItem = () => dispatch({ type: TOGGLE_ITEM, payload: { id } });
  const removeItem = () => dispatch({ type: REMOVE_ITEM, payload: { id } });
  const updateItem = (id, title) => dispatch({ type: UPDATE_ITEM, payload: { id, title } });
  const handleDoubleClick = () => {
    isWritable = true;
  };
  const handleBlur = () => {
    isWritable = false;
  };
  const handleUpdate = title => {
    if (title.length === 0) removeItem(id);
    else updateItem(id, title);
    isWritable = false;
  };
  return (
    <li className={todo.completed ? 'completed' : ''} data-testid="todo-item">
      <div className="view">
        <if cond={isWritable}>
          <Input onSubmit={handleUpdate} label="Edit Todo Input" defaultValue={title} onBlur={handleBlur} />
        </if>
        <else>
          <input
            className="toggle"
            type="checkbox"
            data-testid="todo-item-toggle"
            checked={completed}
            onChange={toggleItem}
          />
          <label data-testid="todo-item-label" onDoubleClick={handleDoubleClick}>
            {title}
          </label>
          <button className="destroy" data-testid="todo-item-button" onClick={removeItem} />
        </else>
      </div>
    </li>
  );
 };
--- a/demos/todo-mvc/components/main.jsx
+++ b/demos/todo-mvc/components/main.jsx
@ -0,0 +1,43 @@
 import { TOGGLE_ALL } from '../constants';
 import { Item } from './item.jsx';
 export function Main({ todos, dispatch }) {
  // listen for route changes
  let route = window.location.hash;
  window.addEventListener('hashchange', () => {
    console.log('hashchange', window.location.hash);
    route = window.location.hash.slice(1);
  });
  const visibleTodos = todos.filter(todo => {
    if (route === '/active') return !todo.completed;
    if (route === '/completed') return todo.completed;
    return todo;
  });
  const toggleAll = e => dispatch({ type: TOGGLE_ALL, payload: { completed: e.target.checked } });
  return (
    <main className="main" data-testid="main">
      <if cond={visibleTodos.length > 0}>
        <div className="toggle-all-container">
          <input
            className="toggle-all"
            type="checkbox"
            data-testid="toggle-all"
            checked={visibleTodos.every(todo => todo.completed)}
            onChange={toggleAll}
          />
          <label className="toggle-all-label" htmlFor="toggle-all">
            Toggle All Input
          </label>
        </div>
      </if>
      <ul className="todo-list" data-testid="todo-list">
        <for each={visibleTodos}>{todo => <Item todo={todo} key={todo.id} dispatch={dispatch} />}</for>
      </ul>
    </main>
  );
 }
--- a/demos/todo-mvc/constants.js
+++ b/demos/todo-mvc/constants.js
@ -0,0 +1,7 @@
 export const ADD_ITEM = 'ADD_ITEM';
 export const UPDATE_ITEM = 'UPDATE_ITEM';
 export const REMOVE_ITEM = 'REMOVE_ITEM';
 export const TOGGLE_ITEM = 'TOGGLE_ITEM';
 export const REMOVE_ALL_ITEMS = 'REMOVE_ALL_ITEMS';
 export const TOGGLE_ALL = 'TOGGLE_ALL';
 export const REMOVE_COMPLETED_ITEMS = 'REMOVE_COMPLETED_ITEMS';
--- a/demos/todo-mvc/index.html
+++ b/demos/todo-mvc/index.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8"/>
  <title>Inula-Next</title>
  <link rel="stylesheet" href="./app.css"/>
 </head>
 <body>
 <div id="main" class="todoapp"></div>
 <script type="module" src="./app.jsx"></script>
 </body>
 </html>
--- a/demos/todo-mvc/package.json
+++ b/demos/todo-mvc/package.json
@ -0,0 +1,25 @@
 {
  "name": "inula-next-todo-mvc",
  "private": true,
  "version": "0.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babel/standalone": "^7.22.4",
    "@iandx/easy-css": "^0.10.14",
    "@openinula/next": "workspace:*",
    "@openinula/babel-preset-inula-next": "workspace:*"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "@openinula/vite-plugin-inula-next": "workspace:*"
  },
  "keywords": [
    "inula-next"
  ]
 }
--- a/demos/todo-mvc/tsconfig.json
+++ b/demos/todo-mvc/tsconfig.json
@ -0,0 +1,20 @@
 {
  "compilerOptions": {
    "jsx": "preserve",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "experimentalDecorators": true
  },
  "ts-node": {
    "esm": true
  }
 }
--- a/demos/todo-mvc/vite.config.ts
+++ b/demos/todo-mvc/vite.config.ts
@ -0,0 +1,16 @@
 import { defineConfig } from 'vite';
 import inula from '@openinula/vite-plugin-inula-next';
 export default defineConfig({
  build: {
    minify: false, // 设置为 false 可以关闭代码压缩
  },
  server: {
    port: 4320,
  },
  base: '',
  optimizeDeps: {
    disabled: true,
  },
  plugins: [inula({ files: '**/*.{ts,js,tsx,jsx}' })],
 });
--- a/demos/v2/CHANGELOG.md
+++ b/demos/v2/CHANGELOG.md
@ -0,0 +1,8 @@
 # dev
 ## 0.0.1
 ### Patch Changes
 - Updated dependencies [2f9d373]
  - babel-preset-inula-next@0.0.2
--- a/demos/v2/index.html
+++ b/demos/v2/index.html
@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8"/>
  <title>Inula-Next</title>
  <link rel="stylesheet" href="/src/App.css"/>
 </head>
 <body>
 <div id="main" class="todoapp"></div>
 <script type="module" src="/src/App.tsx"></script>
 </body>
 </html>
--- a/demos/v2/package.json
+++ b/demos/v2/package.json
@ -0,0 +1,24 @@
 {
  "name": "dev",
  "private": true,
  "version": "0.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babel/standalone": "^7.22.4",
    "@openinula/next": "0.0.2",
    "@openinula/vite-plugin-inula-next": "0.0.4",
    "classnames": "^2.5.1"
  },
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
  "keywords": [
    "inula-next"
  ]
 }
--- a/demos/v2/src/App.css
+++ b/demos/v2/src/App.css
@ -0,0 +1,81 @@
 /* tree-view.css */
 .app {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
 }
 .app-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
 }
 .tree-view {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
 }
 .tree-view > .tree-node:first-child {
  margin-top: 5px;  /* Add margin to the first top-level tree-node */
 }
 .tree-node {
  margin-bottom: 5px;
 }
 .tree-node-children > .tree-node:first-child {
  margin-top: 5px;  /* Add margin to the first top-level tree-node */
 }
 .tree-node-content {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
 }
 .tree-node-content:hover {
  background-color: #e0e0e0;
 }
 .tree-node-toggle {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  color: #666;
  transition: transform 0.2s;
 }
 .tree-node-toggle.expanded {
  transform: rotate(0deg);
 }
 .tree-node-toggle.collapsed {
  transform: rotate(-90deg);
 }
 .tree-node-name {
  margin-left: 5px;
 }
 .tree-node-children {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #ccc;
 }
 /* Add some color to differentiate levels */
 .tree-node .tree-node .tree-node-content {
  background-color: #f0f0f0;
 }
 .tree-node .tree-node .tree-node .tree-node-content {
  background-color: #e8e8e8;
 }
--- a/demos/v2/src/App.tsx
+++ b/demos/v2/src/App.tsx
@ -0,0 +1,95 @@
 import { render } from '@openinula/next';
 const TreeNode = ({ node, onToggle }) => {
  let isExpanded = true;
  const handleToggle = () => {
    isExpanded = !isExpanded;
    onToggle(node.id, !isExpanded);
  };
  return (
    <div className="tree-node">
      <div onClick={handleToggle} className="tree-node-content">
        <if cond={node.children}>
          <span className={`tree-node-toggle ${isExpanded ? 'expanded' : 'collapsed'}`}>▼</span>
        </if>
        <else>
          <span className="tree-node-toggle"></span>
        </else>
        <span className="tree-node-name">{node.name}</span>
      </div>
      <if cond={isExpanded}>
        <div className="tree-node-children">
          <if cond={node.children}>
            <for each={node.children}>
              {child => {
                return <TreeNode key={child.id} node={child} onToggle={onToggle} />;
              }}
            </for>
          </if>
        </div>
      </if>
    </div>
  );
 };
 const TreeView = ({ data }) => {
  let expandedNodes = [];
  const handleToggle = (nodeId, isExpanded) => {
    if (isExpanded) {
      expandedNodes = [...expandedNodes, nodeId];
    } else {
      expandedNodes = expandedNodes.filter(id => id !== nodeId);
    }
  };
  return (
    <div className="tree-view">
      <for each={data}>{node => <TreeNode key={node.id} node={node} onToggle={handleToggle} />}</for>
    </div>
  );
 };
 function App() {
  const arr = [
    {
      name: '我的文档',
      children: [
        {
          name: '工作',
          children: [
            { name: '项目方案.docx' },
            { name: '会议记录.txt' },
            {
              name: '财务报表',
              children: [{ name: '2023年第一季度.xlsx' }, { name: '2023年第二季度.xlsx' }, { name: '年度总结.pptx' }],
            },
          ],
        },
        {
          name: '个人',
          children: [
            { name: '简历.pdf' },
            { name: '家庭照片.jpg' },
            {
              name: '旅行计划',
              children: [{ name: '暑假海岛游.md' }, { name: '冬季滑雪之旅.md' }],
            },
          ],
        },
        { name: '待办事项清单.txt' },
      ],
    },
  ];
  return (
    <div className="app">
      <h1 className="app-title">Tree View</h1>
      <TreeView data={arr} />
    </div>
  );
 }
 render(App, document.getElementById('main'));
--- a/demos/v2/src/example/attributeBinding.jsx
+++ b/demos/v2/src/example/attributeBinding.jsx
@ -0,0 +1,30 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 function AttributeBinding() {
  let color = 'green';
  function changeColor() {
    color = color === 'red' ? 'green' : 'red';
  }
  return (
    <h1 style={{ color }} onClick={changeColor}>
      Click me to change color.
    </h1>
  );
 }
 render(AttributeBinding, document.getElementById('app'));
--- a/demos/v2/src/example/condition.jsx
+++ b/demos/v2/src/example/condition.jsx
@ -0,0 +1,44 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 function TrafficLight() {
  let lightIndex = 0;
  const TRAFFIC_LIGHTS = ['red', 'green'];
  let light = TRAFFIC_LIGHTS[lightIndex];
  function nextLight() {
    lightIndex = (lightIndex + 1) % 2;
  }
  return (
    <>
      <button onClick={nextLight}>Next light</button>
      <p>Light is: {light}</p>
      <p>
        You must
        <if cond={light === 'red'}>
          <span>STOP</span>
        </if>
        <else-if cond={light === 'green'}>
          <span>GO</span>
        </else-if>
      </p>
    </>
  );
 }
 render(TrafficLight, document.getElementById('app'));
--- a/demos/v2/src/example/formBinding.jsx
+++ b/demos/v2/src/example/formBinding.jsx
@ -0,0 +1,75 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 function Form() {
  let text = 'a';
  let checked = true;
  let picked = 'One';
  let selected = 'A';
  let multiSelected = [];
  function updateValue(e) {
    text = e.target.value;
  }
  function handleCheckboxChange(e) {
    checked = e.target.checked;
  }
  function handleRadioChange(e) {
    picked = e.target.value;
  }
  function handleSelectChange(e) {
    selected = e.target.value;
  }
  function handleMultiSelectChange(e) {
    multiSelected = Array.from(e.target.selectedOptions).map(option => option.value);
  }
  return (
    <>
      <h2>Text Input</h2>
      <input value={text} onInput={updateValue} />
      <p>{text}</p>
      <h2>Checkbox</h2>
      <input id="checkbox" type="checkbox" checked={checked} onChange={handleCheckboxChange} />
      <label for="checkbox"> Checked: {checked + ''}</label>
      <h2>Radio</h2>
      <input type="radio" id="one" value="One" name="num" checked={picked === 'One'} onChange={handleRadioChange} />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" name="num" checked={picked === 'Two'} onChange={handleRadioChange} />
      <label for="two">Two</label>
      <p>Picked: {picked}</p>
      <h2>Select</h2>
      <select id="select" value={selected} onChange={handleSelectChange} style={{ width: '100px' }}>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <p>Selected: {selected}</p>
      <h2>Multi Select</h2>
      <select multiple style={{ width: '100px' }} value={multiSelected} onChange={handleMultiSelectChange}>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <p>Selected: {multiSelected}</p>
    </>
  );
 }
 render(Form, document.getElementById('app'));
--- a/demos/v2/src/example/getData.jsx
+++ b/demos/v2/src/example/getData.jsx
@ -0,0 +1,32 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 const API_URL = 'https://jsonplaceholder.typicode.com/users';
 const users = await (await fetch(API_URL)).json();
 function List({ arr }) {
  return (
    <ul>
      <for each={arr}>{item => <li>{item.name}</li>}</for>
    </ul>
  );
 }
 function App() {
  return <List arr={users} />;
 }
 render(App, document.getElementById('app'));
--- a/demos/v2/src/example/helloWorld.jsx
+++ b/demos/v2/src/example/helloWorld.jsx
@ -0,0 +1,21 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 function HelloWorld() {
  return <h1>Hello World!</h1>;
 }
 render(HelloWorld, document.getElementById('app'));
--- a/demos/v2/src/example/loop.jsx
+++ b/demos/v2/src/example/loop.jsx
@ -0,0 +1,26 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 function Colors() {
  const colors = ['red', 'green', 'blue'];
  return (
    <ul>
      <for each={colors}>{color => <li>{color}</li>}</for>
    </ul>
  );
 }
 render(Colors, document.getElementById('app'));
--- a/demos/v2/src/example/simpleComponent.jsx
+++ b/demos/v2/src/example/simpleComponent.jsx
@ -0,0 +1,31 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 let fruits = ['apple', 'banana', 'pear'];
 function List({ arr }) {
  return (
    <ul>
      <for each={arr}>{item => <li>{item}</li>}</for>
    </ul>
  );
 }
 function App() {
  return <List arr={fruits} />;
 }
 render(App, document.getElementById('app'));
--- a/demos/v2/src/example/userInput.jsx
+++ b/demos/v2/src/example/userInput.jsx
@ -0,0 +1,31 @@
 /*
 * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import { render } from '@openinula/next';
 function UserInput() {
  let count = 0;
  function incrementCount() {
    count++;
  }
  return (
    <>
      <h1>{count}</h1>
      <button onClick={incrementCount}>Add 1</button>
    </>
  );
 }
 render(UserInput, document.getElementById('app'));
--- a/demos/v2/tsconfig.json
+++ b/demos/v2/tsconfig.json
@ -0,0 +1,20 @@
 {
  "compilerOptions": {
    "jsx": "preserve",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,
    "experimentalDecorators": true
  },
  "ts-node": {
    "esm": true
  }
 }
--- a/demos/v2/vite.config.ts
+++ b/demos/v2/vite.config.ts
@ -0,0 +1,16 @@
 import { defineConfig } from 'vite';
 import inula from '@openinula/vite-plugin-inula-next';
 export default defineConfig({
  build: {
    minify: false, // 设置为 false 可以关闭代码压缩
  },
  server: {
    port: 4320,
  },
  base: '',
  optimizeDeps: {
    disabled: true,
  },
  plugins: [inula({ files: '**/*.{ts,js,tsx,jsx}' })],
 });
--- a/docs/inula-next/OpenInula
+++ b/docs/inula-next/OpenInula
@ -0,0 +1,27 @@
 # OpenInula 2.0 Parser
 This document describes the OpenInula 2.0 parser, which is used to parse the 2.0 API into a HIR (High-level Intermediate
 Representation) that can be used by the OpenInula 2.0 compiler.
 ## Workflow
 ```mermaid
 graph TD
    A[OpenInula 2.0 Code] --> B[Visitor]
    B --> C[VariableAnalyze]
    B --> D[ViewAnalyze]
    B --> E[fnMacroAnalyze]
    B --> F[HookAnalyze-TODO]
    C --> R[ReactivityParser]
    D --> G[JSXParser]
    G --> R
    E --> R
    F --> R
    R --> |unused bit pruning|HIR
 ```
 ## Data Structure
 see `types.ts` in `packages/transpiler/babel-inula-next-core/src/analyze/types.ts`
 ## TODO LIST
 - [x] for analyze the local variable, we need to consider the scope of the variable
 - [ ] hook analyze
--- a/docs/inula-next/README.md
+++ b/docs/inula-next/README.md
@ -0,0 +1,117 @@
 # Todo-list
 - [ ] function 2 class.
  - [x] assignment 2 property
  - [x] statement 2 watch func
  - [ ] handle `props` @HQ
    - [x] object destructuring
    - [x] default value
    - [ ] partial object destructuring
    - [ ] nested object destructuring
    - [ ] nested array destructuring
    - [x] alias
  - [x] add `this` @HQ
  - [x] for (jsx-parser) -> playground + benchmark @YH
  - [x] lifecycle @HQ
  - [x] ref @HQ (to validate)
  - [x] env @HQ (to validate)
  - [ ] Sub component
  - [ ] Early Return
  - [ ] custom hook -> Model @YH
 - [ ] JSX
  - [x] style
  - [x] fragment
  - [x] ref (to validate)
  - [ ] snippet
  - [x] for
 # function component syntax
 - [ ] props (destructuring | partial destructuring | default value | alias)
 - [ ] variable declaration -> class component property
 - [ ] function declaration ( arrow function | async function )-> class method
 - [ ] Statement -> watch function
  - [ ] assignment
  - [ ] function call
  - [ ] class method call
  - [ ] for loop
  - [ ] while loop (do while, while, for, for in, for of)
  - [ ] if statement
  - [ ] switch statement
  - [ ] try catch statement
  - [ ] throw statement ? not support
  - [ ] delete expression
 - [ ] lifecycle -> LabeledStatement
 - [ ] return statement -> render method(Body)
 - [ ] iife
 - [ ] early return
 # Issues
 - [ ] partial props destructuring -> support this.$props @YH
 ```jsx
 function Input({onClick, xxx, ...props}) {
  function handleClick() {
    onClick()
  }
  return <input onClick={handleClick} {...props} />
 }
 ```
 - [ ] model class declaration should before class component declaration -> use Class polyfill
 ```jsx
 // Code like this will cause error: `FetchModel` is not defined
@Main
@View
 class MyComp {
  fetchModel = use(FetchModel, { url: "https://api.example.com/data" })
  Body() {}
 }
@Model
 class FetchModel {}
 ```
 - [ ] custom hook early return @YH
 - [ ] snippet
 ```jsx
  const H1 = <h1></h1>;
  // {H1}
  const H1 = (name) => <h1 className={name}></h1>;
  // {H1()} <H1/>
  function H1() {
    return <h1></h1>;
  }
  // <H1/>
 ```
 - [ ] Render text and variable, Got Error
 ```jsx
  // Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
 <button>Add, Now is {count}</button>
 ```
 # Proposal
 ## Watch
 自动将Statement包裹Watch的反例：
 ```jsx
  // 前置操作: 场景为Table组件，需要响应column变化，先置空column，再计算新的columnByKey
  let columnByKey;
  watch: {
    columnByKey = {};
    columns.forEach(col => {
      columnByKey[col.key] = col;
    });
  }
  // 临时变量: 场景为操作前的计算部分临时变量
  watch: {
    let col = columnByKey[sortBy];
    if (
      col !== undefined &&
      col.sortable === true &&
      typeof col.value === "function"
    ) {
      sortFunction = r => col.value(r);
    }
  }
 ```
--- a/package.json
+++ b/package.json
@ -9,13 +9,11 @@
    "prettier": "prettier .prettierrc.js -w packages/**/*.{ts,tsx,js,jsx}",
    "build:inula": "pnpm -F openinula build",
    "test:inula": "pnpm -F openinula test",
    "test:inula-intl": "pnpm -F inula-intl test",
    "test:inula-request": "pnpm -F inula-request test",
    "test:inula-router": "pnpm -F inula-router test",
    "build:inula-cli": "pnpm -F inula-cli build",
    "build:inula-intl": "pnpm -F inula-intl build",
    "build:inula-request": "pnpm -F inula-request build",
    "build:inula-router": "pnpm -F inula-router build",
    "build:transpiler": "pnpm --filter './packages/transpiler/*' run build",
    "commitlint": "commitlint --config commitlint.config.js -e",
    "postinstall": "husky install"
  },
@ -25,48 +23,46 @@
    ]
  },
  "devDependencies": {
-    "@babel/core": "7.23.7",
+    "@babel/core": "7.16.7",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+    "@babel/plugin-proposal-object-rest-spread": "7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/plugin-proposal-optional-chaining": "7.16.7",
-    "@babel/plugin-proposal-private-methods": "7.18.6",
+    "@babel/plugin-proposal-private-methods": "7.16.7",
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@babel/plugin-proposal-private-property-in-object": "7.16.7",
-    "@babel/plugin-syntax-jsx": "7.23.3",
+    "@babel/plugin-syntax-jsx": "7.16.7",
-    "@babel/plugin-transform-arrow-functions": "7.23.3",
+    "@babel/plugin-transform-arrow-functions": "7.16.7",
-    "@babel/plugin-transform-block-scoped-functions": "7.23.3",
+    "@babel/plugin-transform-block-scoped-functions": "7.16.7",
-    "@babel/plugin-transform-block-scoping": "7.23.4",
+    "@babel/plugin-transform-block-scoping": "7.16.7",
-    "@babel/plugin-transform-classes": "7.23.8",
+    "@babel/plugin-transform-classes": "7.16.7",
-    "@babel/plugin-transform-computed-properties": "7.23.3",
+    "@babel/plugin-transform-computed-properties": "7.16.7",
-    "@babel/plugin-transform-destructuring": "7.23.3",
+    "@babel/plugin-transform-destructuring": "7.16.7",
-    "@babel/plugin-transform-for-of": "7.23.6",
+    "@babel/plugin-transform-for-of": "7.16.7",
-    "@babel/plugin-transform-literals": "7.23.3",
+    "@babel/plugin-transform-literals": "7.16.7",
-    "@babel/plugin-transform-object-assign": "7.23.3",
+    "@babel/plugin-transform-object-assign": "7.16.7",
-    "@babel/plugin-transform-object-super": "7.23.3",
+    "@babel/plugin-transform-object-super": "7.16.7",
-    "@babel/plugin-transform-parameters": "7.23.3",
+    "@babel/plugin-transform-parameters": "7.16.7",
-    "@babel/plugin-transform-react-jsx": "7.23.4",
+    "@babel/plugin-transform-react-jsx": "7.16.7",
-    "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+    "@babel/plugin-transform-react-jsx-source": "^7.16.7",
-    "@babel/plugin-transform-runtime": "7.23.7",
+    "@babel/plugin-transform-runtime": "7.16.7",
-    "@babel/plugin-transform-shorthand-properties": "7.23.3",
+    "@babel/plugin-transform-shorthand-properties": "7.16.7",
-    "@babel/plugin-transform-spread": "7.23.3",
+    "@babel/plugin-transform-spread": "7.16.7",
-    "@babel/plugin-transform-template-literals": "7.23.3",
+    "@babel/plugin-transform-template-literals": "7.16.7",
-    "@babel/preset-env": "7.23.8",
+    "@babel/preset-env": "7.16.7",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/preset-typescript": "7.16.7",
-    "@babel/runtime": "7.23.8",
+    "@babel/runtime": "7.16.7",
-    "@commitlint/cli": "^17.8.1",
+    "@commitlint/cli": "^18.4.4",
-    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/config-conventional": "^18.4.4",
-    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-replace": "^4.0.0",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^26.0.24",
    "@types/node": "^17.0.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "4.8.0",
-    "@typescript-eslint/parser": "6.18.1",
+    "@typescript-eslint/parser": "4.8.0",
-    "@babel/parser": "^7.24.7",
+    "babel-jest": "^27.5.1",
    "magic-string": "^0.30.10",
    "babel-jest": "^29.7.0",
    "ejs": "^3.1.8",
-    "eslint": "^8.56.0",
+    "eslint": "7.13.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-jest": "^22.15.0",
    "eslint-plugin-no-function-declare-after-return": "^1.0.0",
@ -77,17 +73,17 @@
    "lint-staged": "^15.2.0",
    "openinula": "workspace:*",
    "prettier": "^3.1.1",
-    "rollup": "^2.79.1",
+    "rollup": "^2.75.5",
    "rollup-plugin-dts": "^6.1.0",
    "rollup-plugin-execute": "^1.1.1",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-esbuild": "^6.1.1",
    "rollup-plugin-polyfill-node": "^0.13.0",
    "ts-jest": "^29.1.1",
    "typescript": "^4.9.5"
  },
  "engines": {
    "node": ">=10.x",
    "npm": ">=7.x"
  },
  "dependencies": {
    "@changesets/cli": "^2.27.1",
    "changeset": "^0.2.6"
  }
 }
--- a/packages/create-inula/lib/run.js
+++ b/packages/create-inula/lib/run.js
@ -32,8 +32,8 @@ const generatorType = fs
  });
 const runGenerator = async (templatePath, { name = '', cwd = process.cwd(), args = {} }) => {
  let currentPath;
  return new Promise(resolve => {
    let currentPath;
    if (name) {
      mkdirp.sync(name);
      currentPath = path.join(cwd, name);
--- a/packages/inula-cli/README.md
+++ b/packages/inula-cli/README.md
@ -54,7 +54,7 @@ inula-cli的推荐目录结构如下：
 │       └── inula-cli
 │           ├── lib
 ├── mock // mock目录
-│   └── mock.ts
+│   └── transform.ts
 ├── src // 项目源码目录
 │   ├── pages
 │   │   ├── index.less
@ -178,10 +178,10 @@ inula-cli的所有功能都围绕插件展开，插件可以很方便地让用
 inula-cli支持用户集成已发布在npm仓库的插件，用户可以按需安装并运行这些插件。
-安装可以通过npm安装，这里以插件@inula/add为例：
+安装可以通过npm安装，这里以插件@openinula/add为例：
 ```shell
-npm i --save-dev @inula/add
+npm i --save-dev @openinula/add
 ```
 如果需要运行插件，需要在配置文件中配置对应的插件路径
@ -191,7 +191,7 @@ npm i --save-dev @inula/add
 export default {
    ...
-    plugins:["@inula/add"]
+    plugins:["@openinula/add"]
 }
 ```
--- a/packages/inula-cli/src/builtInPlugins/command/build/build.ts
+++ b/packages/inula-cli/src/builtInPlugins/command/build/build.ts
@ -0,0 +1,51 @@
 /*
 * Copyright (c) 2023 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 webpack from 'webpack';
 import { build } from 'vite';
 export default (api: any) => {
  api.registerCommand({
    name: 'build',
    description: 'build application for production',
    initialState: api.buildConfig,
    fn: async function (args: any, state: any) {
      switch (api.compileMode) {
        case 'webpack':
          if (state) {
            api.applyHook({ name: 'beforeCompile', args: state });
            state.forEach((s: any) => {
              webpack(s.config, (err: any, stats: any) => {
                if (err || stats.hasErrors()) {
                  api.logger.error(`Build failed.err: ${err}, stats:${stats}`);
                }
              });
            });
          } else {
            api.logger.error(`Build failed. Can't find build config.`);
          }
          break;
        case 'vite':
          if (state) {
            api.applyHook({ name: 'beforeCompile' });
            build(state);
          } else {
            api.logger.error(`Build failed. Can't find build config.`);
          }
          break;
      }
    },
  });
 };
--- a/packages/inula-cli/src/builtInPlugins/command/dev/buildDev.ts
+++ b/packages/inula-cli/src/builtInPlugins/command/dev/buildDev.ts
@ -57,7 +57,7 @@ export default (api: API) => {
              api.applyHook({ name: 'afterStartDevServer' });
            });
          } else {
-            api.logger.error('Can\'t find config');
+            api.logger.error("Can't find config");
          }
          break;
        case 'vite':
@ -70,7 +70,7 @@ export default (api: API) => {
                server.printUrls();
              });
          } else {
-            api.logger.error('Can\'t find config');
+            api.logger.error("Can't find config");
          }
          break;
        default:
--- a/packages/inula-cli/src/builtInPlugins/command/generate/generate.ts
+++ b/packages/inula-cli/src/builtInPlugins/command/generate/generate.ts
@ -33,7 +33,7 @@ export default (api: API) => {
        args._.shift();
      }
      if (args._.length === 0) {
-        api.logger.warn('Can\'t find any generate options.');
+        api.logger.warn("Can't find any generate options.");
        return;
      }
--- a/packages/inula-intl/.babelrc
+++ b/packages/inula-intl/.babelrc
@ -1,42 +0,0 @@
 {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-jsx",
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",
        "importSource": "openinula"
      }
    ],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-transform-object-super",
    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }],
    ["@babel/plugin-transform-template-literals", { "loose": true }],
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-literals",
    "@babel/plugin-transform-for-of",
    "@babel/plugin-transform-block-scoped-functions",
    "@babel/plugin-transform-classes",
    "@babel/plugin-transform-shorthand-properties",
    "@babel/plugin-transform-computed-properties",
    "@babel/plugin-transform-parameters",
    ["@babel/plugin-transform-spread", { "loose": true, "useBuiltIns": true }],
    ["@babel/plugin-transform-block-scoping", { "throwIfClosureRequired": false }],
    ["@babel/plugin-transform-destructuring", { "loose": true, "useBuiltIns": true }],
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
 }
--- a/packages/inula-intl/babel.config.js
+++ b/packages/inula-intl/babel.config.js
@ -0,0 +1,29 @@
 /*
 * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 const { preset } = require('./jest.config');
 module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-typescript'],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        importSource: 'openinula',
      },
    ],
  ],
 };
--- a/packages/inula-intl/build-type.js
+++ b/packages/inula-intl/build-type.js
@ -7,12 +7,12 @@ function deleteFolder(filePath) {
    if (fs.lstatSync(filePath).isDirectory()) {
      const files = fs.readdirSync(filePath);
      files.forEach(file => {
-        const nextFilePath = path.join(filePath, file);
+        const nectFilePath = path.join(filePath, file);
-        const states = fs.lstatSync(nextFilePath);
+        const states = fs.lstatSync(nectFilePath);
        if (states.isDirectory()) {
-          deleteFolder(nextFilePath);
+          deleteFolder(nectFilePath);
        } else {
-          fs.unlinkSync(nextFilePath);
+          fs.unlinkSync(nectFilePath);
        }
      });
      fs.rmdirSync(filePath);
@ -31,12 +31,12 @@ export function cleanUp(folders) {
  return {
    name: 'clean-up',
    buildEnd() {
-      folders.forEach(f => deleteFolder(f));
+      folders.forEach(folder => deleteFolder(folder));
    },
  };
 }
-function buildTypeConfig() {
+function builderTypeConfig() {
  return {
    input: './build/@types/index.d.ts',
    output: {
@ -47,4 +47,4 @@ function buildTypeConfig() {
  };
 }
-export default [buildTypeConfig()];
+export default [builderTypeConfig()];
--- a/packages/inula-intl/example/App.tsx
+++ b/packages/inula-intl/example/App.tsx
@ -13,7 +13,7 @@
 * See the Mulan PSL v2 for more details.
 */
-import { useState } from 'openinula';
+import Inula, { useState } from 'openinula';
 import { IntlProvider } from '../index';
 import zh from './locale/zh';
 import en from './locale/en';
@ -32,29 +32,23 @@ const App = () => {
  const message = locale === 'zh' ? zh : en;
  return (
-    <>
+    <IntlProvider locale={locale} messages={locale === 'zh' ? zh : en}>
-      <IntlProvider locale={locale} messages={locale === 'zh' ? zh : en}>
+      <header>Inula-Intl API Test Demo</header>
-        <header>Inula-Intl API Test Demo</header>
+
-        <div className="container">
+      <div className="container">
-          <Example1 />
+        <Example1 />
-          <Example2 />
+        <Example2 />
-          <Example3 locale={locale} setLocale={setLocale} />
+        <Example3 locale={locale} setLocale={setLocale} />
-        </div>
+      </div>
        <div className="container">
          {/*<Example4 locale={locale} messages={message} />*/}
          <Example5 />
        </div>
        <div className="button">
          <button onClick={handleChange}>切换语言</button>
        </div>
      </IntlProvider>
      <div className="container">
        <Example4 locale={locale} messages={message} />
-      </div>
+        <Example5 />
      <div className="container">
        <Example6 locale={{ locale }} messages={message} />
      </div>
-    </>
+      <div className="button">
        <button onClick={handleChange}>切换语言</button>
      </div>
    </IntlProvider>
  );
 };
--- a/packages/inula-intl/example/components/Example1.tsx
+++ b/packages/inula-intl/example/components/Example1.tsx
@ -13,16 +13,16 @@
 * See the Mulan PSL v2 for more details.
 */
 import Inula from 'openinula';
 import { useIntl } from '../../index';
 const Example1 = () => {
-  const i18n = useIntl();
+  const { i18n } = useIntl();
  return (
    <div className="card">
      <h2>useIntl方式测试Demo</h2>
      <pre>{i18n.formatMessage({ id: 'text1' })}</pre>
      <pre>{i18n.$t({ id: 'text1' })}</pre>
    </div>
  );
 };
--- a/packages/inula-intl/example/components/Example2.tsx
+++ b/packages/inula-intl/example/components/Example2.tsx
@ -12,6 +12,7 @@
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
 import Inula from 'openinula';
 import { FormattedMessage } from '../../index';
 const Example2 = () => {
@ -21,9 +22,6 @@ const Example2 = () => {
      <pre>
        <FormattedMessage id="text2" />
      </pre>
      <pre>
        <FormattedMessage id="text5" values={{ testComponent1: <b>123</b>, testComponent2: <b>456</b> }} />
      </pre>
    </div>
  );
 };
--- a/packages/inula-intl/example/components/Example3.tsx
+++ b/packages/inula-intl/example/components/Example3.tsx
@ -13,6 +13,7 @@
 * See the Mulan PSL v2 for more details.
 */
 import Inula from 'openinula';
 import { FormattedMessage } from '../../index';
 const Example3 = props => {
--- a/packages/inula-intl/example/components/Example4.tsx
+++ b/packages/inula-intl/example/components/Example4.tsx
@ -13,6 +13,7 @@
 * See the Mulan PSL v2 for more details.
 */
 import Inula from 'openinula';
 import { createIntl } from '../../index';
 const Example4 = props => {
--- a/packages/inula-intl/example/components/Example5.tsx
+++ b/packages/inula-intl/example/components/Example5.tsx
@ -13,16 +13,23 @@
 * See the Mulan PSL v2 for more details.
 */
 import Inula, { Component } from 'openinula';
 import { injectIntl } from '../../index';
-const Example5 = ({ intl }) => {
+class Example5 extends Component<any, any, any> {
-  // 使用intl.formatMessage来获取国际化消息
+  public constructor(props: any, context) {
-  console.log(intl + '------------intl-------------');
+    super(props, context);
-  return (
+  }
-    <div className="card">
+
-      <h2>injectIntl方式测试Demo</h2>
+  render() {
-      <pre>{intl.formatMessage({ id: 'text4' })}</pre>
+    const { intl } = this.props as any;
-    </div>
+    return (
-  );
+      <div className="card">
-};
+        <h2>injectIntl方式测试Demo</h2>
        <pre>{intl.formatMessage({ id: 'text4' })}</pre>
      </div>
    );
  }
 }
 export default injectIntl(Example5);
--- a/packages/inula-intl/example/components/Example6.tsx
+++ b/packages/inula-intl/example/components/Example6.tsx
@ -13,6 +13,7 @@
 * See the Mulan PSL v2 for more details.
 */
 import Inula from 'openinula';
 import { createIntl, createIntlCache, RawIntlProvider } from '../../index';
 import Example6Child from './Example6Child';
@ -20,7 +21,7 @@ const Example6 = (props: any) => {
  const { locale, messages } = props;
  const cache = createIntlCache();
-  const i18n = createIntl({ locale: locale, messages: messages }, cache);
+  let i18n = createIntl({ locale: locale, messages: messages }, cache);
  return (
    <RawIntlProvider value={i18n}>
--- a/packages/inula-intl/example/components/Example6Child.tsx
+++ b/packages/inula-intl/example/components/Example6Child.tsx
@ -15,7 +15,7 @@
 import { useIntl } from '../../index';
-const Example6Child = () => {
+const Example6Child = (props: any) => {
  const { formatMessage } = useIntl();
  return (
--- a/packages/inula-intl/example/index.tsx
+++ b/packages/inula-intl/example/index.tsx
@ -12,7 +12,7 @@
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
-import Inula from 'openinula';
+import * as Inula from 'openinula';
 import App from './App';
 function render() {
--- a/packages/inula-intl/example/locale/en.ts
+++ b/packages/inula-intl/example/locale/en.ts
@ -19,5 +19,4 @@ export default {
  text2: 'Welcome to the Inula-Intl component!',
  text3: 'Welcome to the Inula-Intl component!',
  text4: 'Welcome to the Inula-Intl component!',
  text5: 'Render a component {testComponent1} {testComponent2}!',
 };
--- a/packages/inula-intl/example/locale/zh.ts
+++ b/packages/inula-intl/example/locale/zh.ts
@ -18,5 +18,4 @@ export default {
  text2: '欢迎使用国际化组件！',
  text3: '欢迎使用国际化组件！',
  text4: '欢迎使用国际化组件！',
  text5: '渲染一个组件 {testComponent1} {testComponent2}!',
 };
--- a/packages/inula-intl/index.ts
+++ b/packages/inula-intl/index.ts
@ -22,7 +22,7 @@ import I18nProvider from './src/core/components/I18nProvider';
 import injectIntl, { I18nContext, InjectProvider } from './src/core/components/InjectI18n';
 import useI18n from './src/core/hook/useI18n';
 import createI18n from './src/core/createI18n';
-import { MessageDescriptor } from './src/types/interfaces';
+import { InjectedIntl, MessageDescriptor } from './src/types/interfaces';
 // 函数API
 export {
  I18n,
@ -36,7 +36,7 @@ export {
 // 组件
 export {
  FormattedMessage,
-  I18nContext as IntlContext,
+  I18nContext,
  I18nProvider as IntlProvider,
  injectIntl as injectIntl,
  InjectProvider as RawIntlProvider,
@ -64,3 +64,7 @@ export function defineMessages<K extends keyof any, T = MessageDescriptor, U = R
 export function defineMessage<T>(msg: T): T {
  return msg;
 }
 export interface InjectedIntlProps {
  intl: InjectedIntl;
 }
--- a/packages/inula-intl/jest.config.js
+++ b/packages/inula-intl/jest.config.js
@ -13,7 +13,7 @@
 * See the Mulan PSL v2 for more details.
 */
-export default {
+module.exports = {
  coverageDirectory: 'coverage',
  resetModules: true,
  preset: 'ts-jest/presets/js-with-ts',
@ -30,10 +30,8 @@ export default {
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
      diagnostics: false,
    },
  },
  testPathIgnorePatterns: ['\\\\node_modules\\\\'],
  testEnvironment: 'jsdom',
 };
--- a/packages/inula-intl/package.json
+++ b/packages/inula-intl/package.json
@ -3,13 +3,13 @@
  "version": "0.0.5",
  "description": "",
  "main": "build/intl.umd.js",
-  "type": "module",
+  "type": "commonjs",
  "types": "build/@types/index.d.ts",
  "scripts": {
    "demo-serve": "webpack serve --mode=development",
-    "build": "rollup --config rollup.config.js && npm run build-types ",
+    "build": "rollup --config rollup.config.js && npm run build-types",
    "build-types": "tsc -p tsconfig.json && rollup -c build-type.js",
-    "test": "jest --no-cache --config jest.config.js",
+    "test": "jest --config jest.config.js",
    "test-c": "jest --coverage"
  },
  "repository": {
@ -17,7 +17,8 @@
    "url": ""
  },
  "files": [
-    "/build"
+    "build",
    "README.md"
  ],
  "keywords": [],
  "author": "",
@ -26,23 +27,35 @@
    "openinula": ">=0.1.1"
  },
  "devDependencies": {
    "@babel/core": "7.21.3",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "7.16.7",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-node-resolve": "^7.1.3",
    "@rollup/plugin-typescript": "^11.0.0",
    "rollup-plugin-dts": "^6.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/node": "^16.18.27",
    "@types/react": "18.0.25",
    "babel": "^6.23.0",
    "babel-jest": "^29.5.0",
    "babel-loader": "^9.1.2",
    "html-webpack-plugin": "^5.5.1",
    "jest": "29.3.1",
    "jest-environment-jsdom": "^29.5.0",
    "jsdom": "^21.1.1",
-    "react": "18.2.0",
+    "prettier": "^2.8.7",
-    "react-dom": "18.2.0",
+    "rollup": "^2.0.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-visualizer": "^5.10.0",
+    "rollup-plugin-terser": "^5.3.0",
    "ts-node": "10.9.1",
    "tslib": "^2.6.1",
-    "webpack": "^5.72.1",
+    "ts-jest": "29.0.3",
    "ts-node": "10.9.1",
    "typescript": "4.9.3",
    "webpack": "^5.81.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.13.3"
  }
--- a/packages/inula-intl/report.html
+++ b/packages/inula-intl/report.html
--- a/packages/inula-intl/rollup.config.js
+++ b/packages/inula-intl/rollup.config.js
@ -19,7 +19,6 @@ import babel from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import { terser } from 'rollup-plugin-terser';
 import { visualizer } from 'rollup-plugin-visualizer';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@ -30,55 +29,34 @@ const output = path.join(__dirname, '/build');
 const extensions = ['.js', '.ts', '.tsx'];
-const BuildConfig = mode => {
+export default {
-  const prod = mode.startsWith('prod');
+  input: entry,
-  const outputList = [
+  output: [
    {
-      file: path.join(output, `cjs/intl.${prod ? 'min.' : ''}js`),
+      file: path.resolve(output, 'intl.umd.js'),
      sourcemap: 'true',
      format: 'cjs',
      globals: {
        openinula: 'Inula',
      },
    },
    {
      file: path.join(output, `umd/intl.${prod ? 'min.' : ''}js`),
      name: 'InulaI18n',
      sourcemap: 'true',
      format: 'umd',
      globals: {
        openinula: 'Inula',
      },
    },
-  ];
+    {
-  if (!prod) {
+      file: path.resolve(output, 'intl.esm-browser.js'),
    outputList.push({
      file: path.join(output, 'esm/intl.js'),
      sourcemap: 'true',
      format: 'esm',
-    });
+    },
-  }
+  ],
-  return {
+  plugins: [
-    input: entry,
+    nodeResolve({
-    output: outputList,
+      extensions,
-    plugins: [
+      modulesOnly: true,
-      nodeResolve({
+    }),
-        extensions,
+    babel({
-        modulesOnly: true,
+      exclude: 'node_modules/**',
-      }),
+      configFile: path.join(__dirname, '/babel.config.js'),
-      babel({
+      extensions,
-        exclude: 'node_modules/**',
+    }),
-        configFile: path.join(__dirname, '/.babelrc'),
+    typescript({
-        extensions,
+      tsconfig: 'tsconfig.json',
-        babelHelpers: 'runtime',
+      include: ['./**/*.ts', './**/*.tsx'],
-      }),
+    }),
-      typescript({
+    terser(),
-        tsconfig: 'tsconfig.json',
+  ],
-        include: ['./**/*.ts', './**/*.tsx'],
+  external: ['openinula', 'react', 'react-dom'],
      }),
      terser(),
    ],
    external: ['openinula', 'react', 'react-dom'],
  };
 };
 export default [BuildConfig('dev'), BuildConfig('prod')];
--- a/packages/inula-intl/src/constants/index.ts
+++ b/packages/inula-intl/src/constants/index.ts
@ -18,13 +18,8 @@
 * \\x[a-fA-F0-9]{2} 匹配形如 \x0A 的十六进制转义字符。
 * [nrtf'"] 匹配常见的转义字符：\n（换行符）、\r（回车符）、\t（制表符）、\f（换页符）、\'（单引号）和 \"（双引号）。
 */
-export const UNICODE_REG: RegExp = /\\(?:u\{[a-fA-F0-9]+}|x[a-fA-F0-9]{2}|[nrtf'"])/g;
+export const UNICODE_REG = /\\(?:u\{[a-fA-F0-9]+}|x[a-fA-F0-9]{2}|[nrtf'"])/g;
 export const STICKY_FLAG: string = 'ym';
 export const GLOBAL_FLAG: string = 'gm';
 export const VERTICAL_LINE: string = '|';
 export const UNICODE_FLAG: string = 'u';
 export const STATE_GROUP_START_INDEX: number = 1;
 // Inula 需要被保留静态常量
 export const INULA_STATICS = {
  childContextTypes: true,
@ -81,22 +76,3 @@ export const INULA_MEMO_STATICS = {
 // 默认复数规则
 export const DEFAULT_PLURAL_KEYS = ['zero', 'one', 'two', 'few', 'many', 'other'];
 export const voidElementTags = [
  'area',
  'base',
  'br',
  'col',
  'embed',
  'hr',
  'img',
  'input',
  'keygen',
  'link',
  'meta',
  'param',
  'source',
  'track',
  'wbr',
  'menuitem',
 ];
--- a/packages/inula-intl/src/core/I18n.ts
+++ b/packages/inula-intl/src/core/I18n.ts
@ -18,48 +18,30 @@ import DateTimeFormatter from '../format/fomatters/DateTimeFormatter';
 import NumberFormatter from '../format/fomatters/NumberFormatter';
 import { getFormatMessage } from '../format/getFormatMessage';
 import { I18nCache, I18nProps, MessageDescriptor, MessageOptions } from '../types/interfaces';
-import {
+import { Locale, Locales, Messages, AllLocaleConfig, AllMessages, LocaleConfig, Error, Events } from '../types/types';
  Locale,
  Locales,
  Messages,
  AllLocaleConfig,
  AllMessages,
  LocaleConfig,
  Error,
  Events,
  InulaNode,
 } from '../types/types';
 import creatI18nCache from '../format/cache/cache';
 import { isValidElement } from 'openinula';
 export class I18n extends EventDispatcher<Events> {
  public locale: Locale;
  public locales: Locales;
  public defaultLocale?: Locale;
  public timeZone?: string;
  private allMessages: AllMessages;
  private readonly _localeConfig: AllLocaleConfig;
-  public readonly onError?: Error;
+  private readonly allMessages: AllMessages;
  public readonly error?: Error;
  public readonly cache?: I18nCache;
  constructor(props: I18nProps) {
    super();
-    this.defaultLocale = 'en';
+    this.locale = 'en';
    this.locale = this.defaultLocale;
    this.locales = this.locale || '';
    this.allMessages = {};
    this._localeConfig = {};
-    this.onError = props.onError;
+    this.error = props.error;
    this.timeZone = '';
    this.loadMessage(props.messages);
    if (props.localeConfig) {
      this.loadLocaleConfig(props.localeConfig);
    }
    if (props.messages) {
      this.changeMessage(props.messages);
    }
    if (props.locale || props.locales) {
      this.changeLanguage(props.locale!, props.locales);
@ -111,11 +93,6 @@ export class I18n extends EventDispatcher<Events> {
    }
  }
  changeMessage(messages: AllMessages) {
    this.allMessages = messages;
    this.emit('change');
  }
  // 加载messages
  loadMessage(localeOrMessages: Locale | AllMessages | undefined, messages?: Messages) {
    if (messages) {
@ -141,21 +118,9 @@ export class I18n extends EventDispatcher<Events> {
  formatMessage(
    id: MessageDescriptor | string,
    values: Record<string, unknown> | undefined = {},
-    { messages, context, formatOptions }: MessageOptions = {}
+    { message, context, formatOptions }: MessageOptions = {}
  ) {
-    // 在多次渲染时，保证存储component不丢失
+    return getFormatMessage(this, id, values, { message, context, formatOptions });
    const components: { [key: string]: InulaNode } = {};
    const tempValues: Record<string, unknown> = { ...values };
    if (tempValues) {
      Object.keys(tempValues).forEach((key, index) => {
        const value = tempValues[key];
        if (!isValidElement(value)) return;
        // 将inula元素暂存
        components[index] = value;
        tempValues[key] = `<${index}/>`;
      });
    }
    return getFormatMessage(this, id, tempValues, { messages, context, formatOptions }, components!);
  }
  formatDate(value: string | Date, formatOptions?: Intl.DateTimeFormatOptions): string {
--- a/packages/inula-intl/src/core/components/FormattedMessage.tsx
+++ b/packages/inula-intl/src/core/components/FormattedMessage.tsx
@ -12,7 +12,7 @@
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
-import { Children, Fragment } from 'openinula';
+import Inula, { Children, Fragment } from 'openinula';
 import { FormattedMessageProps } from '../../types/interfaces';
 import useI18n from '../hook/useI18n';
@ -22,17 +22,28 @@ import useI18n from '../hook/useI18n';
 * @constructor
 */
 function FormattedMessage(props: FormattedMessageProps) {
-  const { formatMessage } = useI18n();
+  const { i18n } = useI18n();
-  const { id, values, messages, formatOptions, context, tagName: TagName = Fragment, children, comment }: any = props;
+  const {
    id,
    values,
    messages,
    formatOptions,
    context,
    tagName: TagName = Fragment,
    children,
    comment,
    useMemorize,
  }: any = props;
  const formatMessageOptions = {
    comment,
    messages,
    context,
    useMemorize,
    formatOptions,
  };
-  const formattedMessage = formatMessage(id, values, formatMessageOptions);
+  let formattedMessage = i18n.formatMessage(id, values, formatMessageOptions);
  if (typeof children === 'function') {
    const childNodes = Array.isArray(formattedMessage) ? formattedMessage : [formattedMessage];
--- a/packages/inula-intl/src/core/components/I18nProvider.tsx
+++ b/packages/inula-intl/src/core/components/I18nProvider.tsx
@ -12,10 +12,10 @@
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
-import { useRef, useState, useEffect, useMemo } from 'openinula';
+import Inula, { useRef, useState, useEffect, useMemo } from 'openinula';
 import { InjectProvider } from './InjectI18n';
 import I18n, { createI18nInstance } from '../I18n';
-import { AllMessages, I18nProviderProps, Messages } from '../../types/types';
+import { I18nProviderProps } from '../../types/types';
 /**
 * 用于为应用程序提供国际化的格式化功能，管理程序中的语言文本信息和本地化资源信息
@ -23,31 +23,28 @@ import { AllMessages, I18nProviderProps, Messages } from '../../types/types';
 * @constructor
 */
 const I18nProvider = (props: I18nProviderProps) => {
-  const { locale, messages, children, i18n } = props;
+  const { locale, messages, children } = props;
-  const i18nInstance =
+  const i18n = useMemo(() => {
-    i18n ||
+    return createI18nInstance({
-    useMemo(() => {
+      locale: locale,
-      return createI18nInstance({
+      messages: messages,
-        locale: locale,
+    });
-        messages: messages,
+  }, [locale, messages]);
      });
    }, [locale, messages]);
  // 使用useRef保存上次的locale值
-  const localeRef = useRef<string | undefined>(i18nInstance.locale);
+  const localeRef = useRef<string | undefined>(i18n.locale);
-  const localeMessage = useRef<string | Messages | AllMessages>(i18nInstance.messages);
+
-  const [context, setContext] = useState<I18n>(i18nInstance);
+  const [context, setContext] = useState<I18n>(i18n);
  useEffect(() => {
    const handleChange = () => {
-      if (localeRef.current !== i18nInstance.locale || localeMessage.current !== i18nInstance.messages) {
+      if (localeRef.current !== i18n.locale) {
-        localeRef.current = i18nInstance.locale;
+        localeRef.current = i18n.locale;
-        localeMessage.current = i18nInstance.messages;
+        setContext(i18n);
        setContext(i18nInstance);
      }
    };
-    const removeListener = i18nInstance.on('change', handleChange);
+    let removeListener = i18n.on('change', handleChange);
    // 手动触发一次 handleChange，以确保 context 的正确性
    handleChange();
@ -56,7 +53,7 @@ const I18nProvider = (props: I18nProviderProps) => {
    return () => {
      removeListener();
    };
-  }, [i18nInstance]);
+  }, [i18n]);
  // 提供一个Provider组件
  return <InjectProvider value={context}>{children}</InjectProvider>;
--- a/packages/inula-intl/src/core/components/InjectI18n.tsx
+++ b/packages/inula-intl/src/core/components/InjectI18n.tsx
@ -31,16 +31,13 @@ export const InjectProvider = Provider;
 function injectI18n(Component, options?: InjectOptions): any {
  const {
    isUsingForwardRef = false, // 默认不使用
    ensureContext = false,
  } = options || {};
  // 定义一个名为 WrappedI18n 的函数组件，接收传入组件的 props 和 forwardedRef，返回传入组件并注入 i18n
  const WrappedI18n = props => (
    <Consumer>
      {context => {
-        if (ensureContext) {
+        isVariantI18n(context);
          isVariantI18n(context);
        }
        const i18nProps = {
          intl: context,
--- a/packages/inula-intl/src/core/createI18n.ts
+++ b/packages/inula-intl/src/core/createI18n.ts
@ -13,29 +13,20 @@
 * See the Mulan PSL v2 for more details.
 */
 import { configProps, I18nCache } from '../types/interfaces';
-import { createI18nInstance } from './I18n';
+import I18n, { createI18nInstance } from './I18n';
 import creatI18nCache from '../format/cache/cache';
 import { IntlType } from '../types/types';
 /**
 * createI18n hook函数，用于创建国际化i8n实例，以进行相关的数据操作
 */
-export const createI18n = (config: configProps, cache?: I18nCache): IntlType => {
+export const createI18n = (config: configProps, cache?: I18nCache): I18n => {
  const { locale, defaultLocale, messages } = config;
-  const i18n = createI18nInstance({
+  return createI18nInstance({
-    locale: locale || defaultLocale || 'en',
+    locale: locale || defaultLocale || 'zh',
    messages: messages,
    cache: cache ?? creatI18nCache(),
  });
  return {
    i18n,
    ...config,
    formatMessage: i18n.formatMessage.bind(i18n),
    formatNumber: i18n.formatNumber.bind(i18n),
    formatDate: i18n.formatDate.bind(i18n),
    $t: i18n.formatMessage.bind(i18n),
  };
 };
 export default createI18n;
--- a/packages/inula-intl/src/core/hook/useI18n.ts
+++ b/packages/inula-intl/src/core/hook/useI18n.ts
@ -12,7 +12,7 @@
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
-import { useContext, useMemo } from 'openinula';
+import Inula, { useContext } from 'openinula';
 import utils from '../../utils/utils';
 import { I18nContext } from '../components/InjectI18n';
 import I18n from '../I18n';
@ -23,22 +23,15 @@ import { IntlType } from '../../types/types';
 *  使用 useI18n 钩子函数可以更方便地在函数组件中进行国际化操作
 */
 function useI18n(): IntlType {
-  const i18n = useContext<I18n>(I18nContext);
+  const i18nContext = useContext<I18n>(I18nContext);
-  utils.isVariantI18n(i18n);
+  utils.isVariantI18n(i18nContext);
-  return useMemo(() => {
+  const i18n = i18nContext;
-    return {
+  return {
-      i18n: i18n,
+    i18n: i18n,
-      locale: i18n.locale,
+    formatMessage: i18n.formatMessage.bind(i18n),
-      messages: i18n.messages,
+    formatNumber: i18n.formatNumber.bind(i18n),
-      defaultLocale: i18n.defaultLocale,
+    formatDate: i18n.formatDate.bind(i18n),
-      timeZone: i18n.timeZone,
+  };
      onError: i18n.onError,
      formatMessage: i18n.formatMessage.bind(i18n),
      formatNumber: i18n.formatNumber.bind(i18n),
      formatDate: i18n.formatDate.bind(i18n),
      $t: i18n.formatMessage.bind(i18n),
    };
  }, [i18n]);
 }
 export default useI18n;
--- a/packages/inula-intl/src/format/Translation.ts
+++ b/packages/inula-intl/src/format/Translation.ts
@ -16,7 +16,7 @@
 import { CompiledMessage, Locale, LocaleConfig, Locales } from '../types/types';
 import generateFormatters from './generateFormatters';
 import { FormatOptions, I18nCache } from '../types/interfaces';
-import creatI18nCache from './cache/cache';
+import { createIntlCache } from '../../index';
 /**
 * 获取翻译结果
@ -28,18 +28,12 @@ class Translation {
  private readonly localeConfig: Record<string, any>;
  private readonly cache: I18nCache;
-  constructor(
+  constructor(compiledMessage, locale, locales, localeConfig, cache?) {
    compiledMessage: CompiledMessage,
    locale: Locale,
    locales: Locales,
    localeConfig: LocaleConfig,
    cache?: I18nCache
  ) {
    this.compiledMessage = compiledMessage;
    this.locale = locale;
    this.locales = locales;
    this.localeConfig = localeConfig;
-    this.cache = cache ?? creatI18nCache();
+    this.cache = cache ?? createIntlCache;
  }
  /**
@ -59,7 +53,7 @@ class Translation {
        const value = values[name];
        const formatter = formatters[type](value, format);
-        let message: any;
+        let message;
        if (typeof formatter === 'function') {
          message = formatter(textFormatter); // 递归调用
        } else {
@ -74,7 +68,8 @@ class Translation {
    const textFormatter = createTextFormatter(this.locale, this.locales, values, formatOptions, this.localeConfig);
    // 通过递归方法formatCore进行格式化处理
-    return this.formatMessage(this.compiledMessage, textFormatter); // 返回要格式化的结果
+    const result = this.formatMessage(this.compiledMessage, textFormatter);
    return result; // 返回要格式化的结果
  }
  formatMessage(compiledMessage: CompiledMessage, textFormatter: (...args: any[]) => any) {
--- a/packages/inula-intl/src/format/fomatters/PluralFormatter.ts
+++ b/packages/inula-intl/src/format/fomatters/PluralFormatter.ts
@ -17,7 +17,7 @@ import utils from '../../utils/utils';
 import NumberFormatter from './NumberFormatter';
 import { Locale, Locales } from '../../types/types';
 import { I18nCache } from '../../types/interfaces';
-import creatI18nCache from '../cache/cache';
+import { createIntlCache } from '../../../index';
 /**
 * 复数格式化
@ -29,12 +29,12 @@ class PluralFormatter {
  private readonly message: any;
  private readonly cache: I18nCache;
-  constructor(locale: Locale, locales: Locales, value: any, message: any, cache?:I18nCache) {
+  constructor(locale, locales, value, message, cache?) {
    this.locale = locale;
    this.locales = locales;
    this.value = value;
    this.message = message;
-    this.cache = cache ?? creatI18nCache();
+    this.cache = cache ?? createIntlCache();
  }
  // 将 message中的“#”替换为指定数字value，并返回新的字符串或者字符串数组
--- a/packages/inula-intl/src/format/fomatters/SelectFormatter.ts
+++ b/packages/inula-intl/src/format/fomatters/SelectFormatter.ts
@ -14,7 +14,7 @@
 */
 import utils from '../../utils/utils';
-import {Locale, SelectPool} from '../../types/types';
+import { Locale } from '../../types/types';
 import { I18nCache } from '../../types/interfaces';
 /**
@ -26,12 +26,12 @@ class SelectFormatter {
  private readonly locale: Locale;
  private readonly cache: I18nCache;
-  constructor(locale: Locale, cache: I18nCache) {
+  constructor(locale, cache) {
    this.locale = locale;
    this.cache = cache;
  }
-  getRule(value: SelectPool, rules: any) {
+  getRule(value, rules) {
    if (this.cache.select) {
      // 创建key，用于唯一标识
      const cacheKey = utils.generateKey<Intl.NumberFormatOptions>(this.locale, rules);
--- a/packages/inula-intl/src/format/generateFormatters.ts
+++ b/packages/inula-intl/src/format/generateFormatters.ts
@ -19,23 +19,25 @@ import { DatePool, Locale, Locales, SelectPool } from '../types/types';
 import PluralFormatter from './fomatters/PluralFormatter';
 import SelectFormatter from './fomatters/SelectFormatter';
 import { FormatOptions, I18nCache, IntlMessageFormat } from '../types/interfaces';
 import cache from './cache/cache';
 /**
 * 默认格式化接口
 */
 const generateFormatters = (
-  locale: Locale,
+  locale: Locale | Locales,
  locales: Locales,
  localeConfig: Record<string, any> = { plurals: undefined },
  formatOptions: FormatOptions = {}, // 自定义格式对象
  cache: I18nCache
 ): IntlMessageFormat => {
  locale = locales || locale;
  const { plurals } = localeConfig;
  /**
   *  样式函数 ，根据格式获取格式样式， 如货币百分比， 返回相应的格式的对象，如果没有设定格式，则返回一个空对象
   * @param formatOption
   */
-  const getStyleOption = (formatOption: string | number) => {
+  const getStyleOption = formatOption => {
    if (typeof formatOption === 'string') {
      return formatOptions[formatOption] || { option: formatOption };
    } else {
@ -56,14 +58,14 @@ const generateFormatters = (
      return pluralFormatter.replaceSymbol.bind(pluralFormatter);
    },
-    selectordinal: (value: number, { offset = 0, ...rules }) => {
+    selectordinal: (value: number, { offset = 0, ...rules }, useMemorize?) => {
      const message = rules[value] || rules[(plurals as any)?.(value - offset, true)] || rules.other;
-      const pluralFormatter = new PluralFormatter(locale, locales, value - offset, message, cache);
+      const pluralFormatter = new PluralFormatter(locale, locales, value - offset, message, useMemorize);
      return pluralFormatter.replaceSymbol.bind(pluralFormatter);
    },
    // 选择规则，如果规则对象中包含与该值相对应的属性，则返回该属性的值；否则，返回 "other" 属性的值。
-    select: (value: SelectPool, formatRules: any) => {
+    select: (value: SelectPool, formatRules) => {
      const selectFormatter = new SelectFormatter(locale, cache);
      return selectFormatter.getRule(value, formatRules);
    },
@ -73,16 +75,17 @@ const generateFormatters = (
      return new NumberFormatter(locales, getStyleOption(formatOption), cache).numberFormat(value);
    },
    // 用于将日期格式化为字符串，接受一个日期对象和一个格式化规则。它会根据规则返回格式化后的字符串。
    /**
     * 用于将日期格式化为字符串，接受一个日期对象和一个格式化规则。它会根据规则返回格式化后的字符串。
     * eg: { year: 'numeric', month: 'long', day: 'numeric' } 是一个用于指定DateTimeFormatter如何将日期对象转换为字符串的参数。
     *      \year: 'numeric' 表示年份的表示方式是数字形式（比如2023）。
     *       month: 'long' 表示月份的表示方式是全名（比如January）。
     *       day: 'numeric' 表示日期的表示方式是数字形式（比如1号）。
     * @param value
     * @param formatOption { year: 'numeric', month: 'long', day: 'numeric' }
     * @param useMemorize
     */
-    dateTimeFormat: (value: DatePool, formatOption: any) => {
+    dateTimeFormat: (value: DatePool, formatOption) => {
      return new DateTimeFormatter(locales, getStyleOption(formatOption), cache).dateTimeFormat(value, formatOption);
    },
--- a/packages/inula-intl/src/format/getFormatMessage.ts
+++ b/packages/inula-intl/src/format/getFormatMessage.ts
@ -19,21 +19,19 @@ import I18n from '../core/I18n';
 import { MessageDescriptor, MessageOptions } from '../types/interfaces';
 import { CompiledMessage } from '../types/types';
 import creatI18nCache from './cache/cache';
 import { formatElements } from '../utils/formatElements';
 export function getFormatMessage(
  i18n: I18n,
  id: MessageDescriptor | string,
  values: Record<string, unknown> | undefined = {},
-  options: MessageOptions = {},
+  options: MessageOptions = {}
  components: any
 ) {
-  let { messages, context } = options;
+  let { message, context } = options;
  const { formatOptions } = options;
  const cache = i18n.cache ?? creatI18nCache();
  if (typeof id !== 'string') {
    values = values || id.defaultValues;
-    messages = id.messages || id.defaultMessage;
+    message = id.message || id.defaultMessage;
    context = id.context;
    id = id.id;
  }
@ -44,7 +42,7 @@ export function getFormatMessage(
  const messageUnavailable = isMissingContextMessage || isMissingMessage;
  // 对错误消息进行处理
-  const messageError = i18n.onError;
+  const messageError = i18n.error;
  if (messageError && messageUnavailable) {
    if (typeof messageError === 'function') {
      return messageError(i18n.locale, id, context);
@ -55,17 +53,14 @@ export function getFormatMessage(
  let compliedMessage: CompiledMessage;
  if (context) {
-    compliedMessage = i18n.messages[context][id] || messages || id;
+    compliedMessage = i18n.messages[context][id] || message || id;
  } else {
-    compliedMessage = i18n.messages[id] || messages || id;
+    compliedMessage = i18n.messages[id] || message || id;
  }
-  // 对解析的message进行parse解析，并输出解析后的Token
+  // 对解析的messages进行parse解析，并输出解析后的Token
  compliedMessage = typeof compliedMessage === 'string' ? utils.compile(compliedMessage) : compliedMessage;
  const translation = new Translation(compliedMessage, i18n.locale, i18n.locales, i18n.localeConfig, cache);
-  const formatResult = translation.translate(values, formatOptions);
+  return translation.translate(values, formatOptions);
  // 如果存在inula元素，则返回包含格式化的Inula元素的数组
  return formatElements(formatResult, components);
 }
--- a/packages/inula-intl/src/parser/Lexer.ts
+++ b/packages/inula-intl/src/parser/Lexer.ts
@ -16,12 +16,9 @@
 import ruleUtils from '../utils/parseRuleUtils';
 import { LexerInterface } from '../types/interfaces';
 /**
 * 词法解析器，主要根据设计的规则对message进行处理成Token
 */
 class Lexer<T> implements LexerInterface<T> {
  readonly startState: string;
-  readonly unionReg: Record<string, any>;
+  readonly states: Record<string, any>;
  private buffer = '';
  private stack: string[] = [];
  private index = 0;
@ -31,23 +28,19 @@ class Lexer<T> implements LexerInterface<T> {
  private state = '';
  private groups: string[] = [];
  private error: Record<string, any> | undefined;
-  private regexp: any;
+  private regexp;
  private fast: Record<string, unknown> = {};
  private queuedGroup: string | null = '';
  private value = '';
  constructor(unionReg: Record<string, any>, startState: string) {
    this.startState = startState;
-    this.unionReg = unionReg;
+    this.states = unionReg;
    this.buffer = '';
    this.stack = [];
    this.reset();
  }
  /**
   *  根据新的消息重置解析器
   * @param data 消息数据
   */
  public reset(data?: string) {
    this.buffer = data || '';
    this.index = 0;
@ -64,7 +57,7 @@ class Lexer<T> implements LexerInterface<T> {
      return;
    }
    this.state = state;
-    const info = this.unionReg[state];
+    const info = this.states[state];
    this.groups = info.groups;
    this.error = info.error;
    this.regexp = info.regexp;
@ -80,7 +73,7 @@ class Lexer<T> implements LexerInterface<T> {
    this.setState(state);
  }
-  private getGroup(match: Record<string, object>) {
+  private getGroup(match: Record<string, any>) {
    const groupCount = this.groups.length;
    for (let i = 0; i < groupCount; i++) {
      if (match[i + 1] !== undefined) {
@ -94,9 +87,7 @@ class Lexer<T> implements LexerInterface<T> {
    return this.value;
  }
-  /**
+  // 迭代获取下一个 token
   * 迭代获取下一个 token
   */
  public next() {
    const index = this.index;
@ -121,6 +112,7 @@ class Lexer<T> implements LexerInterface<T> {
    const regexp = this.regexp;
    regexp.lastIndex = index;
    const match = getMatch(regexp, buffer);
    const error = this.error;
    if (match == null) {
      return this.getToken(error, buffer.slice(index, buffer.length), index);
@ -139,9 +131,9 @@ class Lexer<T> implements LexerInterface<T> {
  }
  /**
-   * 获取Token
+   *  獲取Token
-   * @param group 解析模板后获得的属性值
+   * @param group 解析模板后獲得的屬性值
-   * @param text 文本属性的信息
+   * @param text 文本屬性的信息
   * @param offset 偏移量
   * @private
   */
@ -195,7 +187,7 @@ class Lexer<T> implements LexerInterface<T> {
    return token;
  }
-  // 增加迭代器，允许逐个访问集合中的元素方法
+  // 增加迭代器
  [Symbol.iterator]() {
    return {
      next: (): IteratorResult<T> => {
@ -206,15 +198,9 @@ class Lexer<T> implements LexerInterface<T> {
  }
 }
 /**
 * 根据正则表达式，获取匹配到message的值
 * 索引为 0 的元素是完整的匹配结果。
 * 索引为 1、2、3 等的元素是正则表达式中指定的捕获组的匹配结果。
 */
 const getMatch = ruleUtils.checkSticky()
  ? // 正则表达式具有 sticky 标志
-    (regexp: any, buffer: string) => regexp.exec(buffer)
+    (regexp, buffer) => regexp.exec(buffer)
  : // 正则表达式具有 global 标志,匹配的字符串长度为 0，则表示匹配失败
-    (regexp: any, buffer: string) => (regexp.exec(buffer)[0].length === 0 ? null : regexp.exec(buffer));
+    (regexp, buffer) => (regexp.exec(buffer)[0].length === 0 ? null : regexp.exec(buffer));
 export default Lexer;
--- a/packages/inula-intl/src/parser/mappingRule.ts
+++ b/packages/inula-intl/src/parser/mappingRule.ts
@ -17,44 +17,37 @@ const body: Record<string, any> = {
  doubleapos: { match: "''", value: () => "'" },
  quoted: {
    lineBreaks: true,
-    match: /'[{}#](?:[^]*?[^'])?'(?!')/u, // 用以匹配单引号、花括号{}以及井号# 如'Hello' 、{name}、{}#
+    match: /'[{}#](?:[^]*?[^'])?'(?!')/u,
-    value: (src: string) => src.slice(1, -1).replace(/''/g, "'"),
+    value: src => src.slice(1, -1).replace(/''/g, "'"),
  },
  argument: {
    lineBreaks: true,
    // 用于匹配{name、{Hello{World，匹配{ }花括号中有任何Unicode字符，如空格、制表符等
    match: /\{\s*[^\p{Pat_Syn}\p{Pat_WS}]+\s*/u,
    push: 'arg',
-    value: (src: string) => src.substring(1).trim(),
+    value: src => src.substring(1).trim(),
  },
  octothorpe: '#',
  end: { match: '}', pop: 1 },
-  content: {
+  content: { lineBreaks: true, match: /[^][^{}#']*/u },
    lineBreaks: true,
    match: /[^][^{}#]*/u, // 主要匹配不包含[]任何字符（除了换行符）、不包含{}、#的任何个字符
  },
 };
 const arg: Record<string, any> = {
  select: {
    lineBreaks: true,
-    match: /,\s*(?:plural|select|selectordinal)\s*,\s*/u, // 匹配内容包含 plural、select 或 selectordinal
+    match: /,\s*(?:plural|select|selectordinal)\s*,\s*/u,
-    next: 'select', // 继续解析下一个参数
+    next: 'select',
-    value: (src: string) => src.split(',')[1].trim(), // 提取第二个参数，并处理收尾空格
+    value: src => src.split(',')[1].trim(),
  },
  'func-args': {
    // 匹配是否包含其他非特殊字符的参数,匹配结果包含特殊字符，如param1, param2, param3
    lineBreaks: true,
    match: /,\s*[^\p{Pat_Syn}\p{Pat_WS}]+\s*,/u,
    next: 'body',
-    value: (src: string) => src.split(',')[1].trim(), // 参数字符串去除逗号并去除首尾空格
+    value: src => src.split(',')[1].trim(),
  },
  'func-simple': {
    // 匹配是否包含其他简单参数，匹配结果不包含标点符号：param1 param2 param3
    lineBreaks: true,
    match: /,\s*[^\p{Pat_Syn}\p{Pat_WS}]+\s*/u,
-    value: (src: string) => src.substring(1).trim(),
+    value: src => src.substring(1).trim(),
  },
  end: { match: '}', pop: 1 },
 };
@ -62,17 +55,14 @@ const arg: Record<string, any> = {
 const select: Record<string, any> = {
  offset: {
    lineBreaks: true,
-    match: /\s*offset\s*:\s*\d+\s*/u, // 匹配message中是否包含偏移量offest信息
+    match: /\s*offset\s*:\s*\d+\s*/u,
-    value: (src: string) => src.split(':')[1].trim(),
+    value: src => src.split(':')[1].trim(),
  },
  case: {
    // 检查匹配该行是否包含分支信息。
    lineBreaks: true,
    // 设置规则匹配以左大括号 { 结尾的字符串，以等号 = 后跟数字开头的字符串，或者以非特殊符号和非空白字符开头的字符串，如 '=1 {'
    match: /\s*(?:=\d+|[^\p{Pat_Syn}\p{Pat_WS}]+)\s*\{/u,
-    push: 'body', // 匹配成功，则会push到body栈中
+    push: 'body',
-    value: (src: string) => src.substring(0, src.indexOf('{')).trim(),
+    value: src => src.substring(0, src.indexOf('{')).trim(),
  },
  end: { match: /\s*\}/u, pop: 1 },
 };
--- a/packages/inula-intl/src/parser/parseMappingRule.ts
+++ b/packages/inula-intl/src/parser/parseMappingRule.ts
@ -17,13 +17,12 @@ import Lexer from './Lexer';
 import { mappingRule } from './mappingRule';
 import ruleUtils from '../utils/parseRuleUtils';
 import { RawToken } from '../types/types';
 import { STATE_GROUP_START_INDEX, GLOBAL_FLAG, STICKY_FLAG, UNICODE_FLAG, VERTICAL_LINE } from '../constants';
 const defaultErrorRule = ruleUtils.getRuleOptions('error', { lineBreaks: true, shouldThrow: true });
 // 解析规则并生成词法分析器所需的数据结构，以便进行词法分析操作
-function parseRules(rules: Record<string, any>, hasStates: boolean): Record<string, object> {
+function parseRules(rules: Record<string, any>, hasStates: boolean): Record<string, any> {
-  let errorRule: Record<string, object> | null = null;
+  let errorRule: Record<string, any> | null = null;
  const fast: Record<string, unknown> = {};
  let enableFast = true;
  let unicodeFlag: boolean | null = null;
@ -59,7 +58,7 @@ function parseRules(rules: Record<string, any>, hasStates: boolean): Record<stri
    groups.push(options);
-    // 检查是否所有规则都使用了unicode，或者都未使用
+    // 检查是否所有规则都使用了 unicode 标志，或者都未使用
    unicodeFlag = checkUnicode(match, unicodeFlag, options);
    const pat = ruleUtils.getRegUnion(match.map(ruleUtils.getReg));
@ -82,11 +81,11 @@ function parseRules(rules: Record<string, any>, hasStates: boolean): Record<stri
  // 如果没有 fallback 规则，则使用 sticky 标志，只在当前索引位置寻找匹配项，如果不支持 sticky 标志，则使用无法被否定的空模式来模拟
  const fallbackRule = errorRule && errorRule.fallback;
-  let flags = ruleUtils.checkSticky() && !fallbackRule ? STICKY_FLAG : GLOBAL_FLAG;
+  let flags = ruleUtils.checkSticky() && !fallbackRule ? 'ym' : 'gm';
-  const suffix = ruleUtils.checkSticky() || fallbackRule ? '' : VERTICAL_LINE;
+  const suffix = ruleUtils.checkSticky() || fallbackRule ? '' : '|';
  if (unicodeFlag === true) {
-    flags += UNICODE_FLAG;
+    flags += 'u';
  }
  const combined = new RegExp(ruleUtils.getRegUnion(parts) + suffix, flags);
@ -98,18 +97,18 @@ function parseRules(rules: Record<string, any>, hasStates: boolean): Record<stri
  };
 }
-export function checkStateGroup(group: Record<string, any>, name: string, mappingRules: Record<string, object>) {
+export function checkStateGroup(group: Record<string, any>, name: string, map: Record<string, any>) {
  const state = group && (group.push || group.next);
-  if (state && !mappingRules[state]) {
+  if (state && !map[state]) {
    throw new Error('The state is missing.');
  }
-  if (group && group.pop && +group.pop !== STATE_GROUP_START_INDEX) {
+  if (group && group.pop && +group.pop !== 1) {
    throw new Error('The value of pop must be 1.');
  }
 }
 // 将国际化解析规则注入分词器中
-function parseMappingRule(mappingRule: Record<string, object>, startState?: string): Lexer<RawToken> {
+function parseMappingRule(mappingRule: Record<string, any>, startState?: string): Lexer<RawToken> {
  const keys = Object.getOwnPropertyNames(mappingRule);
  if (!startState) {
@ -134,7 +133,7 @@ function parseMappingRule(mappingRule: Record<string, object>, startState?: stri
        continue;
      }
-      const splice = [j, STATE_GROUP_START_INDEX];
+      const splice = [j, 1];
      if (rule.include !== key && !included[rule.include]) {
        included[rule.include] = true;
        const newRules = ruleMap[rule.include];
@ -175,30 +174,17 @@ function parseMappingRule(mappingRule: Record<string, object>, startState?: stri
    });
  });
  // 将规则注入到词法解析器
  return new Lexer(mappingAllRules, startState);
 }
-/**
+function processFast(match, fast: Record<string, unknown>, options) {
 * 快速匹配模式
 * @param match
 * @param fast
 * @param options
 */
 function processFast(match: Record<string, any>, fast: Record<string, unknown> = {}, options: Record<string, object>) {
  while (match.length && typeof match[0] === 'string' && match[0].length === 1) {
    // 获取到数组的第一个元素
    const word = match.shift();
    fast[word.charCodeAt(0)] = options;
  }
 }
-/**
+function handleErrorRule(options, errorRule: Record<string, any>) {
 *  用以处理错误逻辑
 * @param options 操作属性
 * @param errorRule 错误规则
 */
 function handleErrorRule(options: Record<string, object>, errorRule: Record<string, object>) {
  if (!options.fallback === !errorRule.fallback) {
    throw new Error('errorRule can only set one!');
  } else {
@ -206,13 +192,7 @@ function handleErrorRule(options: Record<string, object>, errorRule: Record<stri
  }
 }
-/**
+function checkUnicode(match, unicodeFlag, options) {
 * 用以检查message中是否包含Unicode
 * @param match 匹配到的message
 * @param unicodeFlag Unicode标志
 * @param options 操作属性
 */
 function checkUnicode(match: Record<string, any>, unicodeFlag: boolean | null, options: Record<string, any>) {
  for (let j = 0; j < match.length; j++) {
    const obj = match[j];
    if (!ruleUtils.checkRegExp(obj)) {
@ -221,16 +201,14 @@ function checkUnicode(match: Record<string, any>, unicodeFlag: boolean | null, o
    if (unicodeFlag === null) {
      unicodeFlag = obj.unicode;
-    } else {
+    } else if (unicodeFlag !== obj.unicode && options.fallback === false) {
-      if (unicodeFlag !== obj.unicode && options.fallback === false) {
+      throw new Error('If the /u flag is used, all!');
        throw new Error('If the /u flag is used, all!');
      }
    }
  }
  return unicodeFlag;
 }
-function checkStateOptions(hasStates: boolean, options: Record<string, any>) {
+function checkStateOptions(hasStates: boolean, options) {
  if (!hasStates) {
    throw new Error('State toggle options are not allowed in stateless tokenizers!');
  }
@ -239,11 +217,6 @@ function checkStateOptions(hasStates: boolean, options: Record<string, any>) {
  }
 }
 /**
 * 检查是否存在fallback属性，用以来判断快速匹配规则
 * @param rules
 * @param enableFast
 */
 function isExistsFallback(rules: Record<string, any>, enableFast: boolean) {
  for (let i = 0; i < rules.length; i++) {
    if (rules[i].fallback) {
@ -253,7 +226,7 @@ function isExistsFallback(rules: Record<string, any>, enableFast: boolean) {
  return enableFast;
 }
-function isOptionsErrorOrFallback(options: Record<string, object>, errorRule: Record<string, object> | null) {
+function isOptionsErrorOrFallback(options, errorRule: Record<string, any> | null) {
  if (options.error || options.fallback) {
    // 只能设置一个 errorRule
    if (errorRule) {
--- a/packages/inula-intl/src/parser/parser.ts
+++ b/packages/inula-intl/src/parser/parser.ts
@ -14,13 +14,23 @@
 */
 import { lexer } from './parseMappingRule';
-import { RawToken } from '../types/types';
+import { RawToken, Token } from '../types/types';
 import { DEFAULT_PLURAL_KEYS } from '../constants';
 import { Content, FunctionArg, PlainArg, Select, TokenContext } from '../types/interfaces';
 import Lexer from './Lexer';
 const getContext = (lt: Record<string, any>): TokenContext => ({
  offset: lt.offset,
  line: lt.line,
  col: lt.col,
  text: lt.text,
  lineNum: lt.lineBreaks,
 });
 export const checkSelectType = (value: string): boolean => {
  return value === 'plural' || value === 'select' || value === 'selectordinal';
 };
 /**
 *  语法解析器，根据Token,获得具备上下文的AST
 */
 class Parser {
  cardinalKeys: string[] = DEFAULT_PLURAL_KEYS;
  ordinalKeys: string[] = DEFAULT_PLURAL_KEYS;
@ -29,7 +39,7 @@ class Parser {
    lexer.reset(message);
  }
-  isSelectKeyValid(type: Select['type'], value: string) {
+  isSelectKeyValid(token: RawToken, type: Select['type'], value: string) {
    if (value[0] === '=') {
      if (type === 'select') {
        throw new Error('The key value of the select type is invalid.');
@ -65,7 +75,7 @@ class Parser {
          break;
        }
        case 'case': {
-          this.isSelectKeyValid(type, token.value);
+          this.isSelectKeyValid(token, type, token.value);
          select.cases.push({
            key: token.value.replace(/=/g, ''),
            tokens: this.parse(isPlural),
@ -84,11 +94,6 @@ class Parser {
    throw new Error('The message end position is invalid.');
  }
  /**
   * 解析获得的Token
   * @param token
   * @param isPlural
   */
  parseToken(token: RawToken, isPlural: boolean): PlainArg | FunctionArg | Select {
    const context = getContext(token);
    const nextToken = lexer.next();
@ -148,12 +153,7 @@ class Parser {
    }
  }
-  /**
+  // 在根级别解析时，遇到结束符号即结束解析并返回结果；而在非根级别解析时，遇到结束符号会被视为不合法的结束位置，抛出错误
   * 解析方法入口
   * 在根级别解析时，遇到结束符号即结束解析并返回结果；而在非根级别解析时，遇到结束符号会被视为不合法的结束位置，抛出错误
   * @param isPlural  标记复数
   * @param isRoot  标记根节点
   */
  parse(isPlural: boolean, isRoot?: boolean): Array<Content | PlainArg | FunctionArg | Select> {
    const tokens: any[] = [];
    let content: string | Content | null = null;
@ -201,23 +201,6 @@ class Parser {
  }
 }
 /**
 * 获得 Token 的上下文
 * @param Token Token
 */
 const getContext = (Token: RawToken): TokenContext => ({
  offset: Token.offset,
  line: Token.line,
  col: Token.col,
  text: Token.text,
  lineNum: Token.lineBreaks,
 });
 // 用以检查select规则中的类型
 export const checkSelectType = (value: string): boolean => {
  return value === 'plural' || value === 'select' || value === 'selectordinal';
 };
 export default function parse(message: string): Array<Content | PlainArg | FunctionArg | Select> {
  const parser = new Parser(message);
  return parser.parse(false, true);
--- a/packages/inula-intl/src/types/interfaces.ts
+++ b/packages/inula-intl/src/types/interfaces.ts
@ -13,25 +13,15 @@
 * See the Mulan PSL v2 for more details.
 */
-import {
+import { AllLocaleConfig, AllMessages, Locale, Locales, Error, DatePool, SelectPool, RawToken } from './types';
  AllLocaleConfig,
  AllMessages,
  Locale,
  Locales,
  Error,
  DatePool,
  SelectPool,
  RawToken,
  InulaNode,
 } from './types';
 import I18n from '../core/I18n';
 import Lexer from '../parser/Lexer';
 import { InulaElement, Key } from 'openinula';
 // FormattedMessage的参数定义
 export interface FormattedMessageProps extends MessageDescriptor {
  values?: Record<string, unknown>;
  tagName?: string;
  children?(nodes: any[]): any;
 }
@ -44,7 +34,7 @@ export interface MessageDescriptor extends MessageOptions {
 export interface MessageOptions {
  comment?: string;
-  messages?: string;
+  message?: string;
  context?: string;
  formatOptions?: FormatOptions;
 }
@ -58,26 +48,15 @@ export interface I18nCache {
  octothorpe: Record<string, any>;
 }
 export interface RichText {
  components?: { [key: string]: InulaNode };
 }
 export interface InulaPortal extends InulaElement {
  key: Key | null;
  children: InulaNode;
 }
 // I18n类的传参
-export type I18nProps = RichText & {
+export interface I18nProps {
  locale?: Locale;
  locales?: Locales;
  messages?: AllMessages;
  defaultLocale?: string;
  timeZone?: string;
  localeConfig?: AllLocaleConfig;
  cache?: I18nCache;
-  onError?: Error;
+  error?: Error;
-};
+}
 // 消息格式化选项类型
 export interface FormatOptions {
@ -95,13 +74,16 @@ export interface I18nContextProps {
  i18n?: I18n;
 }
-export type configProps = I18nProps & {
+export interface configProps {
  locale?: Locale;
  messages?: AllMessages;
  defaultLocale?: string;
  RenderOnLocaleChange?: boolean;
  children?: any;
  onWarn?: Error;
-};
+}
-export interface IntlMessageFormat {
+export interface IntlMessageFormat extends configProps, MessageOptions {
  plural: (
    value: number,
    {
@ -222,6 +204,7 @@ export interface InjectedIntl {
  formatMessage(
    messageDescriptor: MessageDescriptor,
    values?: Record<string, unknown>,
-    options?: MessageOptions
+    options?: MessageOptions,
-  ): string | any[];
+    useMemorize?: boolean
  ): string;
 }
--- a/packages/inula-intl/src/types/types.ts
+++ b/packages/inula-intl/src/types/types.ts
@ -23,17 +23,16 @@ import {
  I18nContextProps,
  configProps,
  InjectedIntl,
  InulaPortal,
 } from './interfaces';
-import { InulaElement } from 'openinula';
+import I18n from '../core/I18n';
-export type Error = string | ((message: any, id: any, context: any) => string);
+export type Error = string | ((message, id, context) => string);
 export type Locale = string;
 export type Locales = Locale | Locale[];
-export type LocaleConfig = { plurals?: (...args: any[]) => any };
+export type LocaleConfig = { plurals?: (...arg: any) => any };
 export type AllLocaleConfig = Record<Locale, LocaleConfig>;
@ -60,7 +59,7 @@ export type Token = Content | PlainArg | FunctionArg | Select | Octothorpe;
 export type DatePool = Date | string;
-export type SelectPool = string | number;
+export type SelectPool = string | Record<string, unknown>;
 export type RawToken = {
  type: string;
@ -75,23 +74,13 @@ export type RawToken = {
 export type I18nProviderProps = I18nContextProps & configProps;
-export type IntlType = I18nContextProps & {
+export type IntlType = {
-  defaultLocale?: string | undefined;
+  i18n: I18n;
  onError?: Error | undefined;
  messages?:
    | string
    | Record<string, string>
    | Record<string, string | CompiledMessagePart[]>
    | Record<string, Record<string, string> | Record<string, string | CompiledMessagePart[]>>;
  locale?: string;
  formatMessage: (...args: any[]) => any;
  formatNumber: (...args: any[]) => any;
  formatDate: (...args: any[]) => any;
  $t?: (...args: any[]) => any;
 };
-export type InjectedIntlProps = {
+export interface InjectedIntlProps {
  intl: InjectedIntl;
-};
+}
 export type InulaNode = InulaElement | string | number | Iterable<InulaNode> | InulaPortal | boolean | null | undefined;
--- a/packages/inula-intl/src/utils/formatElements.ts
+++ b/packages/inula-intl/src/utils/formatElements.ts
@ -1,107 +0,0 @@
 /*
 * 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 { cloneElement, createElement, Fragment, InulaElement } from 'openinula';
 import { voidElementTags } from '../constants';
 // 用于匹配标签的正则表达式
 const tagReg = /<(\d+)>(.*?)<\/\1>|<(\d+)\/>/;
 // 用于匹配换行符的正则表达式
 const nlReg = /(?:\r\n|\r|\n)/g;
 export function formatElements(
  value: string,
  elements: { [key: string]: InulaElement<any> } = {}
 ): string | Array<any> {
  const elementKeyID = getElementIndex(0, '$Inula');
  //  value：This is a rich text with a custom component: <1/>
  const arrays = value.replace(nlReg, '').split(tagReg);
  // 若无InulaNode元素，则返回
  if (arrays.length === 1) return value;
  const result: any = [];
  const before = arrays.shift();
  if (before) {
    result.push(before);
  }
  for (const [index, children, after] of getElements(arrays)) {
    let element = elements[index];
    if (!element || (voidElementTags[element.type as string] && children)) {
      const errorMessage = !element
        ? `Index not declared as ${index} in original translation`
        : `${element.type} , No child element exists. Please check.`;
      console.error(errorMessage);
      // 对于异常元素，通过创建<></>来代替，并继续解析现有的子元素和之后的元素，并保证在构建数组时，不会因为缺少元素而导致索引错位。
      element = createElement(Fragment, {});
    }
    // 如果存在子元素，则进行递归处理
    const formattedChildren = children ? formatElements(children, elements) : element.props.children;
    // 更新element 的属性和子元素
    const clonedElement = cloneElement(element, { key: elementKeyID() }, formattedChildren);
    result.push(clonedElement);
    if (after) {
      result.push(after);
    }
  }
  return result;
 }
 /**
 *  从arrays数组中解析出标签元素和其子元素
 * @param arrays
 */
 function getElements(arrays: string[]) {
  // 如果 arrays 数组为空，则返回空数组
  if (!arrays.length) return [];
  /**
   * pairedIndex: 第一个元素表示配对标签的内容，即 <1>...</1> 形式的标签。
   * children: 第二个元素表示配对标签内的子元素内容。
   * unpairedIndex: 第三个元素表示自闭合标签的内容，即 <1/> 形式的标签。
   * textAfter: 第四个元素表示标签之后的文本内容，即标签后紧跟着的文本。
   * eg: [undefined,undefined,1,""]
   */
  const [pairedIndex, children, unpairedIndex, textAfter] = arrays.splice(0, 4);
  // 解析当前标签元素和它的子元素，返回一个包含标签索引、子元素和后续文本的数组
  const currentElement: [number, string, string] = [
    parseInt(pairedIndex || unpairedIndex), // 解析标签索引，如果是自闭合标签，则使用 unpaired
    children || '',
    textAfter || '',
  ];
  // 递归调用 getElements 函数，处理剩余的 arrays 数组
  const remainingElements = getElements(arrays);
  // 将当前元素和递归处理后的元素数组合并并返回
  return [currentElement, ...remainingElements];
 }
 // 对传入富文本元素的位置标志索引
 function getElementIndex(count = 0, prefix = '') {
  return function () {
    return `${prefix}_${count++}`;
  };
 }
--- a/packages/inula-intl/src/utils/parseRuleUtils.ts
+++ b/packages/inula-intl/src/utils/parseRuleUtils.ts
@ -18,7 +18,6 @@ function getType(input: any): string {
  return str.slice(8, -1).toLowerCase();
 }
 // 类型检查器
 const createTypeChecker = (type: string) => {
  return (input: any) => {
    return getType(input) === type.toLowerCase();
@ -29,25 +28,24 @@ const checkObject = (input: any) => input !== null && typeof input === 'object';
 const checkRegExp = createTypeChecker('RegExp');
 // 使用正则表达式，如果对象存在则访问该属性，用来判断当前环境是否支持正则表达式sticky属性。
 const checkSticky = () => typeof new RegExp('')?.sticky === 'boolean';
 // 转义正则表达式中的特殊字符
-function transferReg(str: string): string {
+function transferReg(s: string): string {
  // eslint-disable-next-line
-  return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
 }
-// 计算正则表达式中捕获组的数量，用以匹配（）
+// 计算正则表达式中捕获组的数量
-function getRegGroups(str: string): number {
+function getRegGroups(s: string): number {
-  const regExp = new RegExp('|' + str);
+  const re = new RegExp('|' + s);
  // eslint-disable-next-line
-  return regExp.exec('')?.length! - 1;
+  return re.exec('')?.length! - 1;
 }
 // 创建一个捕获组的正则表达式模式
-function getRegCapture(str: string): string {
+function getRegCapture(s: string): string {
-  return '(' + str + ')';
+  return '(' + s + ')';
 }
 // 将正则表达式合并为一个联合的正则表达式模式
@ -55,7 +53,7 @@ function getRegUnion(regexps: string[]): string {
  if (!regexps.length) {
    return '(?!)';
  }
-  const source = regexps.map(str => '(?:' + str + ')').join('|');
+  const source = regexps.map(s => '(?:' + s + ')').join('|');
  return '(?:' + source + ')';
 }
@ -145,7 +143,7 @@ function getRulesByArray(array: any[]) {
  return result;
 }
-function getRuleOptions(type: any, obj: any) {
+function getRuleOptions(type, obj) {
  // 如果 obj 不是一个对象，则将其转换为包含 'match' 属性的对象
  if (!checkObject(obj)) {
    obj = { match: obj };
@ -184,23 +182,23 @@ function getRuleOptions(type: any, obj: any) {
  } else {
    options.match = [];
  }
-  options.match.sort((str1: string, str2: string) => {
+  options.match.sort((a, b) => {
    // 根据规则的类型进行排序，确保正则表达式排在最前面，长度较长的规则排在前面
-    if (checkRegExp(str1) && checkRegExp(str2)) {
+    if (checkRegExp(a) && checkRegExp(b)) {
      return 0;
-    } else if (checkRegExp(str2)) {
+    } else if (checkRegExp(b)) {
      return -1;
-    } else if (checkRegExp(str1)) {
+    } else if (checkRegExp(a)) {
      return +1;
    } else {
-      return str2.length - str1.length;
+      return b.length - a.length;
    }
  });
  return options;
 }
-function getRules(spec: any) {
+function getRules(spec) {
  return Array.isArray(spec) ? getRulesByArray(spec) : getRulesByObject(spec);
 }
--- a/packages/inula-intl/src/utils/utils.ts
+++ b/packages/inula-intl/src/utils/utils.ts
@ -32,7 +32,7 @@ function compile(message: string): CompiledMessage {
  try {
    return getTokenAST(parse(message));
  } catch (e) {
-    console.error(`Message cannot be parse due to syntax errors: ${message},cause by ${e}`);
+    console.error(`Message cannot be parse due to syntax errors: ${message}`);
    return message;
  }
 }
--- a/packages/inula-intl/tests/core/I18n.test.ts
+++ b/packages/inula-intl/tests/core/I18n.test.ts
@ -0,0 +1,136 @@
 /*
 * Copyright (c) 2023 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 I18n from '../../src/core/I18n';
 describe('I18n', () => {
  it('load catalog and merge with existing', () => {
    const i18n = new I18n({});
    const messages = {
      Hello: 'Hello',
    };
    i18n.loadMessage('en', messages);
    i18n.changeLanguage('en');
    expect(i18n.messages).toEqual(messages);
    i18n.loadMessage('fr', { Hello: 'Salut' });
    expect(i18n.messages).toEqual(messages);
  });
  it('should load multiple language ', function () {
    const enMessages = {
      Hello: 'Hello',
    };
    const frMessage = {
      Hello: 'Salut',
    };
    const intl = new I18n({});
    intl.loadMessage({
      en: enMessages,
      fr: frMessage,
    });
    intl.changeLanguage('en');
    expect(intl.messages).toEqual(enMessages);
    intl.changeLanguage('fr');
    expect(intl.messages).toEqual(frMessage);
  });
  it('should switch active locale', () => {
    const messages = {
      Hello: 'Salut',
    };
    const i18n = new I18n({
      locale: 'en',
      messages: {
        fr: messages,
        en: {},
      },
    });
    expect(i18n.locale).toEqual('en');
    expect(i18n.messages).toEqual({});
    i18n.changeLanguage('fr');
    expect(i18n.locale).toEqual('fr');
    expect(i18n.messages).toEqual(messages);
  });
  it('should switch active locale', () => {
    const messages = {
      Hello: 'Salut',
    };
    const i18n = new I18n({
      locale: 'en',
      messages: {
        en: messages,
        fr: {},
      },
    });
    i18n.changeLanguage('en');
    expect(i18n.locale).toEqual('en');
    expect(i18n.messages).toEqual(messages);
    i18n.changeLanguage('fr');
    expect(i18n.locale).toEqual('fr');
    expect(i18n.messages).toEqual({});
  });
  it('._ allow escaping syntax characters', () => {
    const messages = {
      "My ''name'' is '{name}'": "Mi ''nombre'' es '{name}'",
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    expect(i18n.formatMessage("My ''name'' is '{name}'")).toEqual("Mi 'nombre' es {name}");
  });
  it('._ should format message from catalog', function () {
    const messages = {
      Hello: 'Salut',
      id: "Je m'appelle {name}",
    };
    const i18n = new I18n({
      locale: 'fr',
      messages: { fr: messages },
    });
    expect(i18n.locale).toEqual('fr');
    expect(i18n.formatMessage('Hello')).toEqual('Salut');
    expect(i18n.formatMessage('id', { name: 'Fred' })).toEqual("Je m'appelle Fred");
  });
  it('should return the formatted date and time', () => {
    const i18n = new I18n({
      locale: 'fr',
    });
    const formattedDateTime = i18n.formatDate('2023-06-06T07:53:54.465Z', {
      dateStyle: 'full',
      timeStyle: 'short',
    });
    expect(typeof formattedDateTime).toBe('string');
    expect(formattedDateTime).toEqual('mardi 6 juin 2023 à 15:53');
  });
  it('should return the formatted number', () => {
    const i18n = new I18n({
      locale: 'en',
    });
    const formattedNumber = i18n.formatNumber(123456.789, { style: 'currency', currency: 'USD' });
    expect(typeof formattedNumber).toBe('string');
    expect(formattedNumber).toEqual('$123,456.79');
  });
 });
--- a/packages/inula-intl/tests/core/I18n.test.tsx
+++ b/packages/inula-intl/tests/core/I18n.test.tsx
@ -1,270 +0,0 @@
 /*
 * Copyright (c) Huawei Technologies Co., Ltd. 2023-2023. All rights reserved.
 */
 import I18n from '../../src/core/I18n';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/';
 // 测试组件
 const IndividualCustomComponent = () => {
  return <span>Custom Component</span>;
 };
 const CustomComponent = (props: any) => {
  return <div>{props.children}</div>;
 };
 const CustomComponentChildren = (props: any) => {
  return <div>{props.children}</div>;
 };
 describe('I18n', () => {
  it('load catalog and merge with existing', () => {
    const i18n = new I18n({});
    const messages = {
      Hello: 'Hello',
    };
    i18n.loadMessage('en', messages);
    i18n.changeLanguage('en');
    expect(i18n.messages).toEqual(messages);
    i18n.loadMessage('fr', { Hello: 'Salut' });
    expect(i18n.messages).toEqual(messages);
    i18n.changeMessage({ Hello: 'Salut' });
    expect(i18n.messages).toEqual({ Hello: 'Salut' });
  });
  it('should load multiple language ', function () {
    const enMessages = {
      Hello: 'Hello',
    };
    const frMessage = {
      Hello: 'Salut',
    };
    const intl = new I18n({});
    intl.loadMessage({
      en: enMessages,
      fr: frMessage,
    });
    intl.changeLanguage('en');
    expect(intl.messages).toEqual(enMessages);
    intl.changeLanguage('fr');
    expect(intl.messages).toEqual(frMessage);
  });
  it('should switch active locale', () => {
    const messages = {
      Hello: 'Salut',
    };
    const i18n = new I18n({
      locale: 'en',
      messages: {
        fr: messages,
        en: {},
      },
    });
    expect(i18n.locale).toEqual('en');
    expect(i18n.messages).toEqual({});
    i18n.changeLanguage('fr');
    expect(i18n.locale).toEqual('fr');
    expect(i18n.messages).toEqual(messages);
  });
  it('should switch active locale', () => {
    const messages = {
      Hello: 'Salut',
    };
    const i18n = new I18n({
      locale: 'en',
      messages: {
        en: messages,
        fr: {},
      },
    });
    i18n.changeLanguage('en');
    expect(i18n.locale).toEqual('en');
    expect(i18n.messages).toEqual(messages);
    i18n.changeLanguage('fr');
    expect(i18n.locale).toEqual('fr');
    expect(i18n.messages).toEqual({});
  });
  it('._ allow escaping syntax characters', () => {
    const messages = {
      "My ''name'' is '{name}'": "Mi ''nombre'' es '{name}'",
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    expect(i18n.formatMessage("My ''name'' is '{name}'")).toEqual("Mi ''nombre'' es '{name}'");
  });
  it('._ should format message from catalog', function () {
    const messages = {
      Hello: 'Salut',
      id: "Je m'appelle {name}",
    };
    const i18n = new I18n({
      locale: 'fr',
      messages: { fr: messages },
    });
    expect(i18n.locale).toEqual('fr');
    expect(i18n.formatMessage('Hello')).toEqual('Salut');
    expect(i18n.formatMessage('id', { name: 'Fred' })).toEqual("Je m'appelle Fred");
  });
  it('should return information with html element', () => {
    const messages = {
      id: 'hello, {name}',
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    const value = '<strong>Jane</strong>';
    expect(i18n.formatMessage({ id: 'id' }, { name: value })).toEqual('hello, <strong>Jane</strong>');
  });
  it('test demo from product', () => {
    const messages = {
      id: "服务商名称长度不能超过64个字符，允许输入中文、字母、数字、字符_-!@#$^.+'}{'，且不能为关键字null(不区分大小写)。",
    };
    const i18n = new I18n({
      locale: 'zh',
      messages: { zh: messages },
    });
    expect(i18n.formatMessage('id')).toEqual(
      "服务商名称长度不能超过64个字符，允许输入中文、字母、数字、字符_-!@#$^.+'}{'，且不能为关键字null(不区分大小写)。"
    );
  });
  it('Should return information with dom element', () => {
    const messages = {
      richText: 'This is a rich text with a custom component: {customComponent}',
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    const values = {
      customComponent: <IndividualCustomComponent />,
    };
    const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
    // 渲染格式化后的文本内容
    const { getByText } = render(<div>{formattedMessage}</div>);
    // 检查文本内容中是否包含自定义组件的内容
    expect(getByText('This is a rich text with a custom component')).toContain(
      'This is a rich text with a custom component'
    );
  });
  it('Should return information for nested scenes with dom elements', () => {
    const messages = {
      richText: 'This is a rich text with a custom component: {customComponent}',
      msg: 'test',
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    const values = {
      customComponent: (
        <CustomComponent style={{ margin: '0 4px' }} text={'123'}>
          <CustomComponentChildren>{i18n.formatMessage({ id: 'msg' })}</CustomComponentChildren>
        </CustomComponent>
      ),
    };
    const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
    // 渲染格式化后的文本内容
    const { getByText } = render(<div>{formattedMessage}</div>);
    // 检查文本内容中是否包含自定义组件的内容
    expect(getByText('test')).toBeTruthy();
  });
  it('Should return information for nested scenes with dom elements', () => {
    const messages = {
      richText: 'This is a rich text with a custom component: {customComponent}',
      msg: 'test',
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    const values = {
      customComponent: (
        <CustomComponent style={{ margin: '0 4px' }} text={'123'}>
          {i18n.formatMessage({ id: 'msg' })}
        </CustomComponent>
      ),
    };
    const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
    // 渲染格式化后的文本内容
    const { getByText } = render(<div>{formattedMessage}</div>);
    // 检查文本内容中是否包含自定义组件的内容
    expect(getByText('test')).toBeTruthy();
  });
  it('should be returned as value when Multiple dom elements\n', () => {
    const messages = {
      richText: '{today}, my name is {name}, and {age} years old!',
    };
    const i18n = new I18n({
      locale: 'es',
      messages: { es: messages },
    });
    const Name = () => {
      return <span>tom</span>;
    };
    const Age = () => {
      return <span>16</span>;
    };
    const Today = () => {
      return <span>3月2日</span>;
    };
    const values = {
      today: <Today />,
      name: <Name />,
      age: <Age />,
    };
    const formattedMessage = i18n.formatMessage({ id: 'richText' }, values);
    // 渲染格式化后的文本内容
    const { getByText } = render(<div>{formattedMessage}</div>);
    // 检查文本内容中是否包含自定义组件的内容
    expect(getByText('my name is tom, and 16 years old!')).toBeTruthy();
  });
  it('should return the formatted date and time', () => {
    const i18n = new I18n({
      locale: 'fr',
    });
    const formattedDateTime = i18n.formatDate('2023-06-06T07:53:54.465Z', {
      dateStyle: 'full',
      timeStyle: 'short',
    });
    expect(typeof formattedDateTime).toBe('string');
    expect(formattedDateTime).toEqual('mardi 6 juin 2023 à 15:53');
  });
  it('should return the formatted number', () => {
    const i18n = new I18n({
      locale: 'en',
    });
    const formattedNumber = i18n.formatNumber(123456.789, { style: 'currency', currency: 'USD' });
    expect(typeof formattedNumber).toBe('string');
    expect(formattedNumber).toEqual('$123,456.79');
  });
 });
--- a/packages/inula-intl/tests/core/components/FormattedMessage.test.tsx
+++ b/packages/inula-intl/tests/core/components/FormattedMessage.test.tsx
@ -43,7 +43,7 @@ describe('<FormattedMessage>', () => {
    );
    setTimeout(() => {
-      expect(getByTestId('id').textContent).toEqual(i18n.formatMessage('hello', {}, {}));
+      expect(getByTestId('id')).toHaveTextContent(i18n.formatMessage('hello', '', {}));
    }, 1000);
  });
  it('should  format context', function () {
@ -58,6 +58,6 @@ describe('<FormattedMessage>', () => {
        </span>
      </I18nProvider>
    );
-    expect(getByTestId('id').textContent).toEqual(i18n.formatMessage('id', { name: 'fred' }, {}));
+    expect(getByTestId('id')).toHaveTextContent(i18n.formatMessage('id', { name: 'fred' }, {}));
  });
 });
--- a/packages/inula-intl/tests/core/components/InjectI18n.test.tsx
+++ b/packages/inula-intl/tests/core/components/InjectI18n.test.tsx
@ -42,6 +42,7 @@ describe('InjectIntl', () => {
    jest.spyOn(console, 'error').mockImplementation(() => {});
    const Injected = injectIntl(Wrapped);
    // @ts-ignore
    expect(() => render(<Injected />)).toThrow("Cannot read properties of null (reading 'i18n')");
  });
@ -52,7 +53,7 @@ describe('InjectIntl', () => {
    };
    const { getByTestId } = mountWithProvider(<Injected {...props} />);
-    expect(JSON.stringify(getByTestId('test'))).toEqual(
+    expect(getByTestId('test')).toHaveTextContent(
      '{"_events":{},"locale":"en","locales":["en"],"allMessages":{},"_localeData":{}}'
    );
  });
--- a/packages/inula-intl/tests/core/creatI18n.test.ts
+++ b/packages/inula-intl/tests/core/creatI18n.test.ts
@ -29,20 +29,6 @@ describe('createI18n', () => {
    ).toBe('bar');
  });
  it('createIntl', function () {
    const i18n = createI18n({
      locale: 'en',
      messages: {
        test: 'test',
      },
    });
    expect(
      i18n.$t({
        id: 'test',
      })
    ).toBe('test');
  });
  it('should not warn when defaultRichTextElements is not used', function () {
    const onWarn = jest.fn();
    createI18n({
--- a/packages/inula-intl/tests/core/hooks/useIntl.test.tsx
+++ b/packages/inula-intl/tests/core/hooks/useIntl.test.tsx
@ -0,0 +1,75 @@
 /*
 * Copyright (c) 2023 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 * as React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider, useIntl } from '../../../index';
 const FunctionComponent = ({ spy }: { spy?: Function }) => {
  const { i18n } = useIntl();
  spy!(i18n.locale);
  return null;
 };
 const FC = () => {
  const i18n = useIntl();
  return i18n.formatNumber(10000, { style: 'currency', currency: 'USD' }) as any;
 };
 describe('useIntl() hooks', () => {
  it('throws when <IntlProvider> is missing from ancestry', () => {
    // So it doesn't spam the console
    jest.spyOn(console, 'error').mockImplementation(() => {});
    expect(() => render(<FunctionComponent />)).toThrow('I18n object is not found!');
  });
  it('hooks onto the intl context', () => {
    const spy = jest.fn();
    render(
      <IntlProvider locale="en">
        <FunctionComponent spy={spy} />
      </IntlProvider>
    );
    expect(spy).toHaveBeenCalledWith('en');
  });
  it('should work when switching locale on provider', () => {
    const { rerender, getByTestId } = render(
      <IntlProvider locale="en">
        <span data-testid="comp">
          <FC />
        </span>
      </IntlProvider>
    );
    expect(getByTestId('comp')).toMatchSnapshot();
    rerender(
      <IntlProvider locale="es">
        <span data-testid="comp">
          <FC />
        </span>
      </IntlProvider>
    );
    expect(getByTestId('comp')).toMatchSnapshot();
    rerender(
      <IntlProvider locale="en">
        <span data-testid="comp">
          <FC />
        </span>
      </IntlProvider>
    );
    expect(getByTestId('comp')).toMatchSnapshot();
  });
 });
--- a/packages/inula-intl/tests/format/cache/cache.test.ts
+++ b/packages/inula-intl/tests/format/cache/cache.test.ts
@ -15,7 +15,7 @@
 import creatI18nCache from '../../../src/format/cache/cache';
 describe('creatI18nCache', () => {
-  it('should create an empty I18nCache object', () => {
+  it('should create an empty IntlCache object', () => {
    const intlCache = creatI18nCache();
    expect(intlCache).toEqual({
--- a/packages/inula-intl/tests/format/formatters/DateTimeFormatter.test.ts
+++ b/packages/inula-intl/tests/format/formatters/DateTimeFormatter.test.ts
@ -61,7 +61,7 @@ describe('DateTimeFormatter', () => {
    expect(spy).toHaveBeenCalledWith('en-GB', { month: 'short' });
  });
-  it('should not memoize formatter instances when cache is effective', () => {
+  it('should not memoize formatter instances when memoize is false', () => {
    const spy = jest.spyOn(Intl, 'DateTimeFormat');
    const formatter1 = new DateTimeFormatter('en-US', { month: 'short' });
    const formatter2 = new DateTimeFormatter('en-US', { month: 'short' });
@ -91,7 +91,7 @@ describe('DateTimeFormatter', () => {
    expect(formatted).toEqual('January 1, 2023');
  });
-  it('should format using memorized formatter when cache is effective', () => {
+  it('should format using memorized formatter when useMemorize is true', () => {
    const formatter = new DateTimeFormatter('en-US', { year: 'numeric' }, creatI18nCache());
    const date = new Date(2023, 0, 1);
    const formatted1 = formatter.dateTimeFormat(date);
--- a/packages/inula-intl/tests/format/getFormatMessage.test.ts
+++ b/packages/inula-intl/tests/format/getFormatMessage.test.ts
@ -24,7 +24,7 @@ describe('getFormatMessage', () => {
      },
    },
    locale: 'en',
-    onError: 'missingMessage',
+    error: 'missingMessage',
  });
  it('should return the correct translation for an existing message ID', () => {
@ -32,7 +32,7 @@ describe('getFormatMessage', () => {
    const values = { name: 'John' };
    const expectedResult = 'Hello, John!';
-    const result = getFormatMessage(i18nInstance, id, values, {}, {});
+    const result = getFormatMessage(i18nInstance, id, values);
    expect(result).toEqual(expectedResult);
  });
@ -41,7 +41,7 @@ describe('getFormatMessage', () => {
    const id = 'missingMessage';
    const expectedResult = 'missingMessage';
-    const result = getFormatMessage(i18nInstance, id, {}, {}, {});
+    const result = getFormatMessage(i18nInstance, id);
    expect(result).toEqual(expectedResult);
  });
--- a/packages/inula-intl/tests/utils/copyStatics.test.ts
+++ b/packages/inula-intl/tests/utils/copyStatics.test.ts
@ -15,7 +15,7 @@
 import copyStaticProps from '../../src/utils/copyStaticProps';
 describe('copyStaticProps', () => {
-  it('should hoist static properties from sourceComponent to targetComponent', () => {
+  test('should hoist static properties from sourceComponent to targetComponent', () => {
    class SourceComponent {
      static staticProp = 'sourceProp';
    }
@ -23,10 +23,11 @@ describe('copyStaticProps', () => {
    class TargetComponent {}
    copyStaticProps(TargetComponent, SourceComponent);
    expect((TargetComponent as any).staticProp).toBe('sourceProp');
  });
-  it('should hoist static properties from inherited components', () => {
+  test('should hoist static properties from inherited components', () => {
    class SourceComponent {
      static staticProp = 'sourceProp';
    }
@ -36,10 +37,11 @@ describe('copyStaticProps', () => {
    class TargetComponent {}
    copyStaticProps(TargetComponent, InheritedComponent);
    expect((TargetComponent as any).staticProp).toBe('sourceProp');
  });
-  it('should not hoist properties if descriptor is not valid', () => {
+  test('should not hoist properties if descriptor is not valid', () => {
    class SourceComponent {
      get staticProp() {
        return 'sourceProp';
@ -49,10 +51,11 @@ describe('copyStaticProps', () => {
    class TargetComponent {}
    copyStaticProps(TargetComponent, SourceComponent);
    expect((TargetComponent as any).staticProp).toBeUndefined();
  });
-  it('should not hoist properties if descriptor is not valid', () => {
+  test('should not hoist properties if descriptor is not valid', () => {
    class SourceComponent {
      static get staticProp() {
        return 'sourceProp';
@ -62,10 +65,11 @@ describe('copyStaticProps', () => {
    class TargetComponent {}
    copyStaticProps(TargetComponent, SourceComponent);
    expect((TargetComponent as any).staticProp).toBe('sourceProp');
  });
-  it('copyStaticProps should not copy static properties that already exist in target or source component', () => {
+  test('copyStaticProps should not copy static properties that already exist in target or source component', () => {
    const targetComponent = { staticProp: 'target' };
    const sourceComponent = { staticProp: 'source' };
    copyStaticProps(targetComponent, sourceComponent);
--- a/packages/inula-intl/tsconfig.json
+++ b/packages/inula-intl/tsconfig.json
@ -31,7 +31,6 @@
    "declaration": true,
    "experimentalDecorators": true,
    "downlevelIteration": true,
    "emitDeclarationOnly": true,
    "declarationDir": "./build/@types",
    // 赋值为空数组使@types/node不会起作用
    "lib": [
@ -55,8 +54,7 @@
    }
  },
  "include": [
-    "./index.ts",
+    "./index.ts"
  ],
  "exclude": [
    "node_modules",
--- a/packages/inula-intl/webpack.config.js
+++ b/packages/inula-intl/webpack.config.js
@ -12,18 +12,16 @@
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */
-import path from 'path';
+
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+const { resolve } = require('path');
-import { fileURLToPath } from 'url';
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const isDevelopment = process.env.NODE_ENV === 'development';
 const entryPath = './example/index.tsx';
-const __filename = fileURLToPath(import.meta.url);
+module.exports = {
-const __dirname = path.dirname(__filename);
+  entry: resolve(__dirname, entryPath),
 export default {
  entry: path.join(__dirname, entryPath),
  output: {
-    path: path.join(__dirname, './build'),
+    path: resolve(__dirname, './build'),
    filename: 'main.js',
  },
  module: {
@ -52,7 +50,7 @@ export default {
  mode: isDevelopment ? 'development' : 'production',
  plugins: [
    new HtmlWebpackPlugin({
-      template: path.join(__dirname, './example/index.html'),
+      template: resolve(__dirname, './example/index.html'),
    }),
  ],
  resolve: {
--- 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/Show More
+++ b/Show More
Author	SHA1	Message	Date
openinula	cd9bddbe10	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
iandxssxx	4657df9532	feat: add runtime and alter parser	2024-10-15 11:00:42 -04:00
Hoikan	b15d746697	fix(props): rename the prop without alias and deconstruction	2024-05-24 17:56:42 +08:00
Hoikan	c7de85630e	fix(reactivity): fix for	2024-05-24 17:20:30 +08:00
Hoikan	00418eba82	docs(parser): docs	2024-05-22 17:38:53 +08:00
Hoikan	4a877cdc34	refactor(parser): prune unused bit	2024-05-22 17:13:43 +08:00
Hoikan	5fc41b8e5e	fix(reactivity): remove used bit	2024-05-17 17:57:07 +08:00
Hoikan	3665d927ae	fix(reactivity): fix for view analyze	2024-05-15 16:13:14 +08:00
Hoikan	dabc0eed20	feat: autoNaming, autoReturn, deconstructing, jsxSlice and props	2024-05-14 21:03:38 +08:00
Hoikan	4ca2d66fac	fix(reactivity): fix for dependency	2024-05-10 16:54:38 +08:00
Hoikan	601381032d	refactor(parse): use bitmap instead of dependency map	2024-05-08 15:56:42 +08:00
Hoikan	0dcad572f3	refactor(parse): use bitmap instead of dependency map	2024-04-29 17:58:19 +08:00
Hoikan	f32da0e9c7	refactor(proposal): use bitmap instead of dependency map	2024-04-28 21:02:37 +08:00
Hoikan	be4456f225	feat: viewNode as child	2024-04-25 15:58:26 +08:00
Hoikan	f15b7d1a14	feat: sub component	2024-04-25 11:46:11 +08:00
Hoikan	5427f13880	feat: analyze watch lifeCycle properties	2024-04-24 16:21:40 +08:00
Hoikan	fcc734e05f	feat: init	2024-04-19 17:58:52 +08:00
Hoikan	a536958ad4	feat(fn2cls): env	2024-04-15 20:59:31 +08:00
Hoikan	2d5d3c29e4	test(inula-next): add test	2024-04-15 20:57:16 +08:00
Hoikan	37d6ba1033	Merge remote-tracking branch 'gitee/api2/for' into dev-04-15 # Conflicts: # demos/benchmark/src/main.jsx # demos/v2/src/App.view.tsx # packages/transpiler/babel-preset-inula-next/CHANGELOG.md # packages/transpiler/babel-preset-inula-next/package.json # packages/transpiler/class-transformer/package.json # packages/transpiler/class-transformer/src/pluginProvider.ts # packages/transpiler/vite-plugin-inula-next/CHANGELOG.md # packages/transpiler/vite-plugin-inula-next/package.json	2024-04-15 11:51:44 +08:00
HoikanChan	f447bb8989	feat(watch): switch to label watch	2024-04-15 11:46:05 +08:00
Hoikan	7b4c3a35d0	feat: cls2fn	2024-04-15 11:44:13 +08:00
iandxssxx	4608422c0a	feat: publish (feat: add lifecycles and watch)	2024-04-10 23:00:49 -04:00
iandxssxx	325f4c406a	feat: add lifecycles and watch	2024-04-10 22:59:55 -04:00
HoikanChan	bf90ea1b7f	feat(watch): switch to label watch	2024-04-11 10:38:03 +08:00
Hoikan	8f60ec6b26	feat: test	2024-04-10 17:58:16 +08:00
IanDxSSXX	be4b0cb024	!172 Add for support and benchmark * refactor: publish new version * feat: add changeset and changed package name * Merge branch 'API-2.0' into api2/for * fix: import package from workspace * feat: add for unit parsing * feat: init benchmark demo * refactor: gitignore add history	2024-04-10 02:06:11 +00:00
iandxssxx	1f4b164952	refactor: publish new version	2024-04-09 21:58:08 -04:00
iandxssxx	2f9d3737db	feat: add changeset and changed package name	2024-04-09 03:28:10 -04:00
iandxssxx	ef4126b767	Merge branch 'API-2.0' into api2/for	2024-04-07 23:17:00 -04:00
陈超涛	b7756e9732	!171 fix: this patcher Merge pull request !171 from Hoikan/API-2.0-4-8	2024-04-08 03:16:05 +00:00
Hoikan	bf1bd09721	refactor: add this with thisPatcher.ts	2024-04-08 11:11:46 +08:00
iandxssxx	d6ba039445	fix: import package from workspace	2024-04-07 23:09:39 -04:00
iandxssxx	4467bdae73	feat: add for unit parsing	2024-04-07 23:09:21 -04:00
iandxssxx	627a8b7785	feat: init benchmark demo	2024-04-07 23:08:50 -04:00
iandxssxx	109746acef	refactor: gitignore add history	2024-04-07 23:08:39 -04:00
Hoikan	d599b36eaa	!169 feat: inula 2.0 init * feat: update doc * feat: inula next	2024-04-03 08:55:27 +00:00
Hoikan	83c80341dc	!168 inula api2.0 * feat: inula-next init * feat: v2 init * feat(class-transform): add watch decorator * feat(class-transform): update docs * feat(class-transform): init	2024-04-03 08:41:11 +00:00