From c7d039cfe327d7a328df555043273bedbaa0c7ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=B6=85=E6=B6=9B?=
 <10857776+chaoling83@user.noreply.gitee.com>
Date: Tue, 6 Feb 2024 12:22:18 +0000
Subject: [PATCH] !137 fix(no-vdom): modify test code's name rule *
 fix(no-vdom): modify test code's name rule * Merge branch 'reactive' of
 https://gitee.com/openInula/inula into reactive * fix(no-vdom): delete
 no-vnode module * fix(no-vdom): update render function * Merge branch
 'reactive' of https://gitee.com/openInula/inula into reactive * Merge branch
 'reactive' of https://gitee.com/openInula/inula into reactive * Merge
 remote-tracking branch 'origin/reactive' into reactive * fix(no-vdom): add TS
 * fix(no-vdom): change js 2 ts

---
 packages/inula-novdom/src/event.ts         |   9 +-
 packages/inula-novdom/tests/For.bench.ts   |  46 ++--
 packages/inula-novdom/tests/For.test.tsx   |  68 ++---
 packages/inula-novdom/tests/event.test.tsx |  47 ++--
 packages/inula-novdom/tests/render.test.ts | 279 ++++++++++-----------
 5 files changed, 220 insertions(+), 229 deletions(-)

diff --git a/packages/inula-novdom/src/event.ts b/packages/inula-novdom/src/event.ts
index 48b9f98b..9d356e5b 100644
--- a/packages/inula-novdom/src/event.ts
+++ b/packages/inula-novdom/src/event.ts
@@ -70,12 +70,9 @@ function eventHandler(e: Event) {
 }
 
 export function addEventListener(node: Element, name: string, handler: EventListener, delegate?: boolean): void {
-  const prev = node[`$$${name}`];
-  if (!delegate) {
-    if (prev) {
-      node.removeEventListener(name, prev);
-    }
+  if (delegate) {
+    node[`$$${name}`] = handler;
+  } else {
     node.addEventListener(name, handler);
   }
-  node[`$$${name}`] = handler;
 }
diff --git a/packages/inula-novdom/tests/For.bench.ts b/packages/inula-novdom/tests/For.bench.ts
index 182945ae..b8e65a75 100644
--- a/packages/inula-novdom/tests/For.bench.ts
+++ b/packages/inula-novdom/tests/For.bench.ts
@@ -15,12 +15,12 @@
 import { bench } from 'vitest';
 import { computed, reactive, watch } from 'inula-reactive';
 import {
-  template as _$template,
-  insert as _$insert,
-  setAttribute as _$setAttribute,
+  template as $$template,
+  insert as $$insert,
+  setAttribute as $$setAttribute,
 } from '../src/dom';
-import { createComponent as _$createComponent, render } from '../src/core';
-import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event';
+import { createComponent as $$createComponent, render } from '../src/core';
+import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
 import { For } from '../src/components/For';
 
 const container = document.createElement('div');
@@ -103,9 +103,9 @@ bench('For', () => {
    */
 
     // 编译后：
-  const _tmpl$ = /*#__PURE__*/ _$template('<tr><td class="col-md-1">'),
-    _tmpl$2 = /*#__PURE__*/ _$template('<div class="col-sm-6"><button type="button">'),
-    _tmpl$3 = /*#__PURE__*/ _$template(
+  const $tmpl = /*#__PURE__*/ $$template('<tr><td class="col-md-1">'),
+    $tmpl_2 = /*#__PURE__*/ $$template('<div class="col-sm-6"><button type="button">'),
+    $tmpl_3 = /*#__PURE__*/ $$template(
       '<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">'
     );
   const A = [
@@ -155,30 +155,30 @@ bench('For', () => {
     });
 
     return (() => {
-      const _el$ = _tmpl$(),
+      const _el$ = $tmpl(),
         _el$2 = _el$.firstChild;
-      _$insert(_el$2, () => props.item.label);
+      $$insert(_el$2, () => props.item.label);
       return _el$;
     })();
   };
   const RowList = props => {
-    return _$createComponent(For, {
+    return $$createComponent(For, {
       get each() {
         return props.list;
       },
       children: item =>
-        _$createComponent(Row, {
+        $$createComponent(Row, {
           item: item,
         }),
     });
   };
   const Button = props =>
     (() => {
-      const _el$3 = _tmpl$2(),
+      const _el$3 = $tmpl_2(),
         _el$4 = _el$3.firstChild;
-      _$addEventListener(_el$4, 'click', props.cb, true);
-      _$insert(_el$4, () => props.title);
-      watch(() => _$setAttribute(_el$4, 'id', props.id));
+      $$addEventListener(_el$4, 'click', props.cb, true);
+      $$insert(_el$4, () => props.title);
+      watch(() => $$setAttribute(_el$4, 'id', props.id));
       return _el$3;
     })();
   const Main = () => {
@@ -201,7 +201,7 @@ bench('For', () => {
     }
 
     return (() => {
-      const _el$5 = _tmpl$3(),
+      const _el$5 = $tmpl_3(),
         _el$6 = _el$5.firstChild,
         _el$7 = _el$6.firstChild,
         _el$8 = _el$7.firstChild,
@@ -209,17 +209,17 @@ bench('For', () => {
         _el$10 = _el$9.firstChild,
         _el$11 = _el$6.nextSibling,
         _el$12 = _el$11.firstChild;
-      _$insert(
+      $$insert(
         _el$10,
-        _$createComponent(Button, {
+        $$createComponent(Button, {
           id: 'run',
           title: 'Create 1,000 rows',
           cb: run,
         })
       );
-      _$insert(
+      $$insert(
         _el$12,
-        _$createComponent(RowList, {
+        $$createComponent(RowList, {
           get list() {
             return state.list;
           },
@@ -228,8 +228,8 @@ bench('For', () => {
       return _el$5;
     })();
   };
-  render(() => _$createComponent(Main, {}), container);
-  _$delegateEvents(['click']);
+  render(() => $$createComponent(Main, {}), container);
+  $$delegateEvents(['click']);
 
   container.querySelector('#run').click();
 });
diff --git a/packages/inula-novdom/tests/For.test.tsx b/packages/inula-novdom/tests/For.test.tsx
index 14af6750..fae0c612 100644
--- a/packages/inula-novdom/tests/For.test.tsx
+++ b/packages/inula-novdom/tests/For.test.tsx
@@ -17,12 +17,12 @@
 
 import { computed, reactive, watch } from 'inula-reactive';
 import {
-  template as _$template,
-  insert as _$insert,
-  setAttribute as _$setAttribute,
+  template as $$template,
+  insert as $$insert,
+  setAttribute as $$setAttribute,
 } from '../src/dom';
-import { createComponent as _$createComponent, render } from '../src/core';
-import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event';
+import { createComponent as $$createComponent, render } from '../src/core';
+import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
 import { describe, expect } from 'vitest';
 import { domTest as it } from './utils';
 import { For } from '../src/components/For';
@@ -76,17 +76,17 @@ describe('For', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is <!>.'),
-      _tmpl$2 = /*#__PURE__*/ _$template(
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is <!>.'),
+      $tmpl_2 = /*#__PURE__*/ $$template(
         '<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push'
       );
     const Todo = props => {
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild,
           _el$4 = _el$2.nextSibling,
           _el$3 = _el$4.nextSibling;
-        _$insert(_el$, () => props.todo.title, _el$4);
+        $$insert(_el$, () => props.todo.title, _el$4);
         return _el$;
       })();
     };
@@ -130,23 +130,23 @@ describe('For', () => {
         });
       };
       return (() => {
-        const _el$5 = _tmpl$2(),
+        const _el$5 = $tmpl_2(),
           _el$6 = _el$5.firstChild,
           _el$7 = _el$6.nextSibling,
           _el$8 = _el$7.firstChild,
           _el$9 = _el$7.nextSibling,
           _el$10 = _el$9.firstChild;
-        _$insert(
+        $$insert(
           _el$6,
-          _$createComponent(For, {
+          $$createComponent(For, {
             get each() {
               return state.todoList;
             },
             children: todo => [
-              _$createComponent(Todo, {
+              $$createComponent(Todo, {
                 todo: todo,
               }),
-              _$createComponent(Todo, {
+              $$createComponent(Todo, {
                 todo: todo,
               }),
             ],
@@ -157,8 +157,8 @@ describe('For', () => {
         return _el$5;
       })();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(CountingComponent, {}), container);
+    $$delegateEvents(['click']);
 
     expect(container.querySelector('#todos').innerHTML).toEqual(
       '<div>Count value is Birds<!---->.</div><div>Count value is Birds<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Fish<!---->.</div>'
@@ -254,9 +254,9 @@ describe('For', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<tr><td class="col-md-1">'),
-      _tmpl$2 = /*#__PURE__*/ _$template('<div class="col-sm-6"><button type="button">'),
-      _tmpl$3 = /*#__PURE__*/ _$template(
+    const $tmpl = /*#__PURE__*/ $$template('<tr><td class="col-md-1">'),
+      $tmpl_2 = /*#__PURE__*/ $$template('<div class="col-sm-6"><button type="button">'),
+      $tmpl_3 = /*#__PURE__*/ $$template(
         '<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">'
       );
     const A = [
@@ -306,30 +306,30 @@ describe('For', () => {
       });
 
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild;
-        _$insert(_el$2, () => props.item.label);
+        $$insert(_el$2, () => props.item.label);
         return _el$;
       })();
     };
     const RowList = props => {
-      return _$createComponent(For, {
+      return $$createComponent(For, {
         get each() {
           return props.list;
         },
         children: item =>
-          _$createComponent(Row, {
+          $$createComponent(Row, {
             item: item,
           }),
       });
     };
     const Button = props =>
       (() => {
-        const _el$3 = _tmpl$2(),
+        const _el$3 = $tmpl_2(),
           _el$4 = _el$3.firstChild;
-        _$addEventListener(_el$4, 'click', props.cb, true);
-        _$insert(_el$4, () => props.title);
-        watch(() => _$setAttribute(_el$4, 'id', props.id));
+        $$addEventListener(_el$4, 'click', props.cb, true);
+        $$insert(_el$4, () => props.title);
+        watch(() => $$setAttribute(_el$4, 'id', props.id));
         return _el$3;
       })();
     const Main = () => {
@@ -352,7 +352,7 @@ describe('For', () => {
       }
 
       return (() => {
-        const _el$5 = _tmpl$3(),
+        const _el$5 = $tmpl_3(),
           _el$6 = _el$5.firstChild,
           _el$7 = _el$6.firstChild,
           _el$8 = _el$7.firstChild,
@@ -360,17 +360,17 @@ describe('For', () => {
           _el$10 = _el$9.firstChild,
           _el$11 = _el$6.nextSibling,
           _el$12 = _el$11.firstChild;
-        _$insert(
+        $$insert(
           _el$10,
-          _$createComponent(Button, {
+          $$createComponent(Button, {
             id: 'run',
             title: 'Create 1,000 rows',
             cb: run,
           })
         );
-        _$insert(
+        $$insert(
           _el$12,
-          _$createComponent(RowList, {
+          $$createComponent(RowList, {
             get list() {
               return state.list;
             },
@@ -379,8 +379,8 @@ describe('For', () => {
         return _el$5;
       })();
     };
-    render(() => _$createComponent(Main, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(Main, {}), container);
+    $$delegateEvents(['click']);
 
     expect(container.querySelector('#tbody').innerHTML).toEqual(
       '<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>'
diff --git a/packages/inula-novdom/tests/event.test.tsx b/packages/inula-novdom/tests/event.test.tsx
index 69032acb..c4ddeea4 100644
--- a/packages/inula-novdom/tests/event.test.tsx
+++ b/packages/inula-novdom/tests/event.test.tsx
@@ -17,10 +17,9 @@
 
 import { describe, expect, vi } from 'vitest';
 import { domTest as it } from './utils';
-import { template as _$template, effect as _$effect } from '../src/dom';
-import { createComponent as _$createComponent, render } from '../src/core';
-import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event';
-import { reactive } from 'inula-reactive';
+import { template as $$template } from '../src/dom';
+import { createComponent as $$createComponent, render } from '../src/core';
+import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
 
 function dispatchMouseEvent(element: HTMLElement, eventType = 'click') {
   element.dispatchEvent(new MouseEvent(eventType, { bubbles: true }));
@@ -55,51 +54,51 @@ describe('event', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template(`<input id="inline-fn-change">`),
-      _tmpl$2 = /*#__PURE__*/ _$template(`<input id="var-change">`),
-      _tmpl$3 = /*#__PURE__*/ _$template(`<input id="hoisted-var-change">`),
-      _tmpl$4 = /*#__PURE__*/ _$template(`<button id="inline-fn-click">Click Delegated`),
-      _tmpl$5 = /*#__PURE__*/ _$template(`<button id="var-click">Click Delegated`),
-      _tmpl$6 = /*#__PURE__*/ _$template(`<button id="hoisted-var-click">Click Delegated`);
+    const $tmpl = /*#__PURE__*/ $$template(`<input id="inline-fn-change">`),
+      $tmpl_2 = /*#__PURE__*/ $$template(`<input id="var-change">`),
+      $tmpl_3 = /*#__PURE__*/ $$template(`<input id="hoisted-var-change">`),
+      $tmpl_4 = /*#__PURE__*/ $$template(`<button id="inline-fn-click">Click Delegated`),
+      $tmpl_5 = /*#__PURE__*/ $$template(`<button id="var-click">Click Delegated`),
+      $tmpl_6 = /*#__PURE__*/ $$template(`<button id="hoisted-var-click">Click Delegated`);
 
     const fn = vi.fn();
     const Comp = () => {
       const handler = () => fn();
       return [
         (() => {
-          const _el$ = _tmpl$();
-          _el$.addEventListener('change', () => fn('bound'));
+          const _el$ = $tmpl();
+          $$addEventListener(_el$, 'change', () => fn('bound'));
           return _el$;
         })(),
         (() => {
-          const _el$2 = _tmpl$2();
-          _el$2.addEventListener('change', handler);
+          const _el$2 = $tmpl_2();
+          $$addEventListener(_el$2, 'change', handler);
           return _el$2;
         })(),
         (() => {
-          const _el$3 = _tmpl$3();
-          _el$3.addEventListener('change', fn);
+          const _el$3 = $tmpl_3();
+          $$addEventListener(_el$3, 'change', fn);
           return _el$3;
         })(),
         (() => {
-          const _el$4 = _tmpl$4();
-          _el$4.$$click = () => fn('delegated');
+          const _el$4 = $tmpl_4();
+          $$addEventListener(_el$4, 'click', () => fn('delegated'));
           return _el$4;
         })(),
         (() => {
-          const _el$5 = _tmpl$5();
-          _el$5.$$click = handler;
+          const _el$5 = $tmpl_5();
+          $$addEventListener(_el$5, 'click', handler);
           return _el$5;
         })(),
         (() => {
-          const _el$6 = _tmpl$6();
-          _el$6.$$click = fn;
+          const _el$6 = $tmpl_6();
+          $$addEventListener(_el$6, 'click', fn);
           return _el$6;
         })(),
       ];
     };
-    render(() => _$createComponent(Comp), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(Comp), container);
+    $$delegateEvents(['click']);
 
     dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change');
     expect(fn).toHaveBeenCalledTimes(1);
diff --git a/packages/inula-novdom/tests/render.test.ts b/packages/inula-novdom/tests/render.test.ts
index 3d47ebfb..31ad5839 100644
--- a/packages/inula-novdom/tests/render.test.ts
+++ b/packages/inula-novdom/tests/render.test.ts
@@ -16,15 +16,15 @@
 // @ts-nocheck For the compiled code.
 import { computed, reactive, watch } from 'inula-reactive';
 import {
-  template as _$template,
-  insert as _$insert,
-  setAttribute as _$setAttribute,
-  effect as _$effect,
-  style as _$style,
-  className as _$className,
+  template as $$template,
+  insert as $$insert,
+  setAttribute as $$setAttribute,
+  effect as $$effect,
+  style as $$style,
+  className as $$className,
 } from '../src/dom';
-import { createComponent as _$createComponent, render } from '../src/core';
-import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event';
+import { createComponent as $$createComponent, render } from '../src/core';
+import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
 import { describe, expect } from 'vitest';
 import { domTest as it } from './utils';
 import { Show } from '../src/components/Show';
@@ -42,11 +42,11 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is 0.');
     const CountingComponent = () => {
-      return _tmpl$();
+      return $tmpl();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
+    render(() => $$createComponent(CountingComponent, {}), container);
 
     expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0.');
   });
@@ -62,18 +62,17 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is <!>.');
+    const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.');
     const CountingComponent = () => {
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild,
-          _el$4 = _el$2.nextSibling,
-          _el$3 = _el$4.nextSibling;
-        _$insert(_el$, 0, _el$4);
+          _el$4 = _el$2.nextSibling;
+        $$insert(_el$, 0, _el$4);
         return _el$;
       })();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
+    render(() => $$createComponent(CountingComponent, {}), container);
 
     expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0<!---->.');
   });
@@ -94,8 +93,8 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is <!>.'),
-      _tmpl$2 = /*#__PURE__*/ _$template('<div><button id="btn">add');
+    const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.'),
+      $tmpl_2 = /*#__PURE__*/ $$template('<div><button id="btn">add');
     const CountingComponent = () => {
       const count = reactive(0);
       const add = () => {
@@ -103,24 +102,23 @@ describe('render', () => {
       };
       return [
         (() => {
-          const _el$ = _tmpl$(),
+          const _el$ = $tmpl(),
             _el$2 = _el$.firstChild,
-            _el$4 = _el$2.nextSibling,
-            _el$3 = _el$4.nextSibling;
-          _$insert(_el$, count, _el$4);
+            _el$4 = _el$2.nextSibling;
+          $$insert(_el$, count, _el$4);
           return _el$;
         })(),
         (() => {
-          const _el$5 = _tmpl$2(),
+          const _el$5 = $tmpl_2(),
             _el$6 = _el$5.firstChild;
           _el$6.$$click = add;
           return _el$5;
         })(),
       ];
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
+    render(() => $$createComponent(CountingComponent, {}), container);
 
-    _$delegateEvents(['click']);
+    $$delegateEvents(['click']);
 
     container.querySelector('#btn').click();
 
@@ -150,15 +148,14 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is <!>.'),
-      _tmpl$2 = /*#__PURE__*/ _$template('<div><div><button id="btn">add');
+    const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.'),
+      $tmpl_2 = /*#__PURE__*/ $$template('<div><div><button id="btn">add');
     const CountValue = props => {
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild,
-          _el$4 = _el$2.nextSibling,
-          _el$3 = _el$4.nextSibling;
-        _$insert(_el$, () => props.count, _el$4);
+          _el$4 = _el$2.nextSibling;
+        $$insert(_el$, () => props.count, _el$4);
         return _el$;
       })();
     };
@@ -168,12 +165,12 @@ describe('render', () => {
         count.set(c => c + 1);
       };
       return (() => {
-        const _el$5 = _tmpl$2(),
+        const _el$5 = $tmpl_2(),
           _el$6 = _el$5.firstChild,
           _el$7 = _el$6.firstChild;
-        _$insert(
+        $$insert(
           _el$5,
-          _$createComponent(CountValue, {
+          $$createComponent(CountValue, {
             count: count,
           }),
           _el$6
@@ -182,8 +179,8 @@ describe('render', () => {
         return _el$5;
       })();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(CountingComponent, {}), container);
+    $$delegateEvents(['click']);
 
     container.querySelector('#btn').click();
 
@@ -220,16 +217,15 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is <!> .'),
-      _tmpl$2 = /*#__PURE__*/ _$template('<h1>'),
-      _tmpl$3 = /*#__PURE__*/ _$template('<div><div><button>add');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is <!> .'),
+      $tmpl_2 = /*#__PURE__*/ $$template('<h1>'),
+      $tmpl_3 = /*#__PURE__*/ $$template('<div><div><button>add');
     const CountValue = props => {
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild,
-          _el$4 = _el$2.nextSibling,
-          _el$3 = _el$4.nextSibling;
-        _$insert(_el$, () => props.count, _el$4);
+          _el$4 = _el$2.nextSibling;
+        $$insert(_el$, () => props.count, _el$4);
         return _el$;
       })();
     };
@@ -240,29 +236,29 @@ describe('render', () => {
       };
       const Nested = () => {
         return (() => {
-          const _el$5 = _tmpl$2();
-          _$insert(_el$5, count);
+          const _el$5 = $tmpl_2();
+          $$insert(_el$5, count);
           return _el$5;
         })();
       };
       return (() => {
-        const _el$6 = _tmpl$3(),
+        const _el$6 = $tmpl_3(),
           _el$7 = _el$6.firstChild,
           _el$8 = _el$7.firstChild;
-        _$insert(
+        $$insert(
           _el$6,
-          _$createComponent(CountValue, {
+          $$createComponent(CountValue, {
             count: count,
           }),
           _el$7
         );
         _el$8.$$click = add;
-        _$insert(_el$6, _$createComponent(Nested, {}), null);
+        $$insert(_el$6, $$createComponent(Nested, {}), null);
         return _el$6;
       })();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(CountingComponent, {}), container);
+    $$delegateEvents(['click']);
 
     expect(container.querySelector('h1').innerHTML).toMatchInlineSnapshot('"0"');
     container.querySelector('button').click();
@@ -280,11 +276,11 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div style="color: red;">Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div style="color: red;">Count value is 0.');
     const Comp = () => {
-      return _tmpl$();
+      return $tmpl();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
 
     expect(container.querySelector('div').style.color).toEqual('red');
   });
@@ -300,13 +296,13 @@ describe('render', () => {
      *
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div style="color: red;">Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div style="color: red;">Count value is 0.');
     const Comp = () => {
       const color = 'red';
-      return _tmpl$();
+      return $tmpl();
     };
 
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').style.color).toEqual('red');
   });
 
@@ -318,16 +314,16 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       return (() => {
-        const _el$ = _tmpl$();
+        const _el$ = $tmpl();
         _el$.style.setProperty('color', 'red');
         _el$.style.setProperty('display', 'flex');
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').style.color).toEqual('red');
   });
 
@@ -340,17 +336,17 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const color = 'red';
       return (() => {
-        const _el$ = _tmpl$();
+        const _el$ = $tmpl();
         _el$.style.setProperty('color', 'red');
         return _el$;
       })();
     };
 
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').style.color).toEqual('red');
   });
 
@@ -363,19 +359,19 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const color = reactive('red');
       return (() => {
-        const _el$ = _tmpl$();
-        _$effect(() =>
+        const _el$ = $tmpl();
+        $$effect(() =>
           color.get() != null ? _el$.style.setProperty('color', color.get()) : _el$.style.removeProperty('color')
         );
         return _el$;
       })();
     };
 
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').style.color).toEqual('red');
     container.querySelector('div').style.color = 'green';
     expect(container.querySelector('div').style.color).toEqual('green');
@@ -390,17 +386,17 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const style = reactive({ color: 'red' });
       return (() => {
-        const _el$ = _tmpl$();
-        _$effect(_$p => _$style(_el$, style.get(), _$p));
+        const _el$ = $tmpl();
+        $$effect(_$p => $$style(_el$, style.get(), _$p));
         return _el$;
       })();
     };
 
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').style.color).toEqual('red');
     container.querySelector('div').style.color = 'green';
     expect(container.querySelector('div').style.color).toEqual('green');
@@ -414,11 +410,11 @@ describe('render', () => {
      *  }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div class="red">Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div class="red">Count value is 0.');
     const Comp = () => {
-      return _tmpl$();
+      return $tmpl();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red');
   });
 
@@ -431,16 +427,16 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const color = 'red';
       return (() => {
-        const _el$ = _tmpl$();
-        _$effect(() => (_el$.className = color));
+        const _el$ = $tmpl();
+        $$effect(() => (_el$.className = color));
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red');
   });
 
@@ -452,17 +448,17 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       return (() => {
-        const _el$ = _tmpl$();
-        _$className(_el$, {
+        const _el$ = $tmpl();
+        $$className(_el$, {
           red: true,
         });
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red');
   });
 
@@ -474,15 +470,15 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       return (() => {
-        const _el$ = _tmpl$();
-        _$className(_el$, ['red', 'green']);
+        const _el$ = $tmpl();
+        $$className(_el$, ['red', 'green']);
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red green');
   });
 
@@ -495,16 +491,16 @@ describe('render', () => {
      * }
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const color = reactive('red');
       return (() => {
-        const _el$ = _tmpl$();
-        _$effect(() => _$className(_el$, color.get()));
+        const _el$ = $tmpl();
+        $$effect(() => $$className(_el$, color.get()));
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red');
     container.querySelector('div').className = 'green';
     expect(container.querySelector('div').className).toEqual('green');
@@ -519,20 +515,20 @@ describe('render', () => {
      *  >Count value is 0.</div>;
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const color = reactive('red');
       return (() => {
-        const _el$ = _tmpl$();
-        _$effect(() =>
-          _$className(_el$, {
+        const _el$ = $tmpl();
+        $$effect(() =>
+          $$className(_el$, {
             [color.get()]: true,
           })
         );
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red');
   });
 
@@ -545,16 +541,16 @@ describe('render', () => {
      *  >Count value is 0.</div>;
      */
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is 0.');
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is 0.');
     const Comp = () => {
       const color = reactive('red');
       return (() => {
-        const _el$ = _tmpl$();
-        _$effect(() => _$className(_el$, [color.get(), 'green']));
+        const _el$ = $tmpl();
+        $$effect(() => $$className(_el$, [color.get(), 'green']));
         return _el$;
       })();
     };
-    render(() => _$createComponent(Comp, {}), container);
+    render(() => $$createComponent(Comp, {}), container);
     expect(container.querySelector('div').className).toEqual('red green');
   });
 
@@ -583,15 +579,14 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is <!>.'),
-      _tmpl$2 = /*#__PURE__*/ _$template('<div><div><button id="btn">add');
+    const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.'),
+      $tmpl_2 = /*#__PURE__*/ $$template('<div><div><button id="btn">add');
     const CountValue = props => {
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild,
-          _el$4 = _el$2.nextSibling,
-          _el$3 = _el$4.nextSibling;
-        _$insert(_el$, () => props.count, _el$4);
+          _el$4 = _el$2.nextSibling;
+        $$insert(_el$, () => props.count, _el$4);
         return _el$;
       })();
     };
@@ -601,22 +596,22 @@ describe('render', () => {
         count.set(c => c + 1);
       };
       return (() => {
-        const _el$5 = _tmpl$2(),
+        const _el$5 = $tmpl_2(),
           _el$6 = _el$5.firstChild,
           _el$7 = _el$6.firstChild;
-        _$insert(
+        $$insert(
           _el$5,
-          _$createComponent(Show, {
+          $$createComponent(Show, {
             get if() {
               return computed(() => count.get() > 0);
             },
             get else() {
-              return _$createComponent(CountValue, {
+              return $$createComponent(CountValue, {
                 count: 999,
               });
             },
             get children() {
-              return _$createComponent(CountValue, {
+              return $$createComponent(CountValue, {
                 count: count,
               });
             },
@@ -627,8 +622,8 @@ describe('render', () => {
         return _el$5;
       })();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(CountingComponent, {}), container);
+    $$delegateEvents(['click']);
 
     expect(container.querySelector('#count').innerHTML).toEqual('Count value is 999<!---->.');
 
@@ -685,17 +680,17 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is <!>.'),
-      _tmpl$2 = /*#__PURE__*/ _$template(
+    const $tmpl = /*#__PURE__*/ $$template('<div>Count value is <!>.'),
+      $tmpl_2 = /*#__PURE__*/ $$template(
         '<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push'
       );
     const Todo = props => {
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild,
           _el$4 = _el$2.nextSibling,
           _el$3 = _el$4.nextSibling;
-        _$insert(_el$, () => props.todo.title, _el$4);
+        $$insert(_el$, () => props.todo.title, _el$4);
         return _el$;
       })();
     };
@@ -739,23 +734,23 @@ describe('render', () => {
         });
       };
       return (() => {
-        const _el$5 = _tmpl$2(),
+        const _el$5 = $tmpl_2(),
           _el$6 = _el$5.firstChild,
           _el$7 = _el$6.nextSibling,
           _el$8 = _el$7.firstChild,
           _el$9 = _el$7.nextSibling,
           _el$10 = _el$9.firstChild;
-        _$insert(
+        $$insert(
           _el$6,
-          _$createComponent(For, {
+          $$createComponent(For, {
             get each() {
               return state.todoList;
             },
             children: todo => [
-              _$createComponent(Todo, {
+              $$createComponent(Todo, {
                 todo: todo,
               }),
-              _$createComponent(Todo, {
+              $$createComponent(Todo, {
                 todo: todo,
               }),
             ],
@@ -766,8 +761,8 @@ describe('render', () => {
         return _el$5;
       })();
     };
-    render(() => _$createComponent(CountingComponent, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(CountingComponent, {}), container);
+    $$delegateEvents(['click']);
 
     expect(container.querySelector('#todos').innerHTML).toEqual(
       '<div>Count value is Birds<!---->.</div><div>Count value is Birds<!---->.</div><div>Count value is Fish<!---->.</div><div>Count value is Fish<!---->.</div>'
@@ -863,9 +858,9 @@ describe('render', () => {
      */
 
     // 编译后：
-    const _tmpl$ = /*#__PURE__*/ _$template('<tr><td class="col-md-1">'),
-      _tmpl$2 = /*#__PURE__*/ _$template('<div class="col-sm-6"><button type="button">'),
-      _tmpl$3 = /*#__PURE__*/ _$template(
+    const $tmpl = /*#__PURE__*/ $$template('<tr><td class="col-md-1">'),
+      $tmpl_2 = /*#__PURE__*/ $$template('<div class="col-sm-6"><button type="button">'),
+      $tmpl_3 = /*#__PURE__*/ $$template(
         '<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">'
       );
     const A = [
@@ -915,30 +910,30 @@ describe('render', () => {
       });
 
       return (() => {
-        const _el$ = _tmpl$(),
+        const _el$ = $tmpl(),
           _el$2 = _el$.firstChild;
-        _$insert(_el$2, () => props.item.label);
+        $$insert(_el$2, () => props.item.label);
         return _el$;
       })();
     };
     const RowList = props => {
-      return _$createComponent(For, {
+      return $$createComponent(For, {
         get each() {
           return props.list;
         },
         children: item =>
-          _$createComponent(Row, {
+          $$createComponent(Row, {
             item: item,
           }),
       });
     };
     const Button = props =>
       (() => {
-        const _el$3 = _tmpl$2(),
+        const _el$3 = $tmpl_2(),
           _el$4 = _el$3.firstChild;
-        _$addEventListener(_el$4, 'click', props.cb, true);
-        _$insert(_el$4, () => props.title);
-        watch(() => _$setAttribute(_el$4, 'id', props.id));
+        $$addEventListener(_el$4, 'click', props.cb, true);
+        $$insert(_el$4, () => props.title);
+        watch(() => $$setAttribute(_el$4, 'id', props.id));
         return _el$3;
       })();
     const Main = () => {
@@ -961,7 +956,7 @@ describe('render', () => {
       }
 
       return (() => {
-        const _el$5 = _tmpl$3(),
+        const _el$5 = $tmpl_3(),
           _el$6 = _el$5.firstChild,
           _el$7 = _el$6.firstChild,
           _el$8 = _el$7.firstChild,
@@ -969,17 +964,17 @@ describe('render', () => {
           _el$10 = _el$9.firstChild,
           _el$11 = _el$6.nextSibling,
           _el$12 = _el$11.firstChild;
-        _$insert(
+        $$insert(
           _el$10,
-          _$createComponent(Button, {
+          $$createComponent(Button, {
             id: 'run',
             title: 'Create 1,000 rows',
             cb: run,
           })
         );
-        _$insert(
+        $$insert(
           _el$12,
-          _$createComponent(RowList, {
+          $$createComponent(RowList, {
             get list() {
               return state.list;
             },
@@ -988,8 +983,8 @@ describe('render', () => {
         return _el$5;
       })();
     };
-    render(() => _$createComponent(Main, {}), container);
-    _$delegateEvents(['click']);
+    render(() => $$createComponent(Main, {}), container);
+    $$delegateEvents(['click']);
 
     expect(container.querySelector('#tbody').innerHTML).toEqual(
       '<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>'