yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

!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
This commit is contained in:
陈超涛 2024-02-06 12:22:18 +00:00
parent 62614d2dd5
commit c7d039cfe3
5 changed files with 220 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/inula-novdom/src/event.ts
View File

@ -70,12 +70,9 @@ function eventHandler(e: Event) {
} }
export function addEventListener(node: Element, name: string, handler: EventListener, delegate?: boolean): void { export function addEventListener(node: Element, name: string, handler: EventListener, delegate?: boolean): void {
const prev = node[`$$${name}`]; if (delegate) {
if (!delegate) { node[`$$${name}`] = handler;
if (prev) { } else {
node.removeEventListener(name, prev);
}
node.addEventListener(name, handler); node.addEventListener(name, handler);
} }
node[`$$${name}`] = handler;
} }

46
packages/inula-novdom/tests/For.bench.ts
View File

@ -15,12 +15,12 @@
import { bench } from 'vitest'; import { bench } from 'vitest';
import { computed, reactive, watch } from 'inula-reactive'; import { computed, reactive, watch } from 'inula-reactive';
import { import {
template as _$template, template as $$template,
insert as _$insert, insert as $$insert,
setAttribute as _$setAttribute, setAttribute as $$setAttribute,
} from '../src/dom'; } from '../src/dom';
import { createComponent as _$createComponent, render } from '../src/core'; import { createComponent as $$createComponent, render } from '../src/core';
import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event'; import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
import { For } from '../src/components/For'; import { For } from '../src/components/For';
const container = document.createElement('div'); const container = document.createElement('div');
@ -103,9 +103,9 @@ bench('For', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template('<tr><td class="col-md-1">'), const $tmpl = /*#__PURE__*/ $$template('<tr><td class="col-md-1">'),
_tmpl$2 = /*#__PURE__*/ _$template('<div class="col-sm-6"><button type="button">'), $tmpl_2 = /*#__PURE__*/ $$template('<div class="col-sm-6"><button type="button">'),
_tmpl$3 = /*#__PURE__*/ _$template( $tmpl_3 = /*#__PURE__*/ $$template(
'<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">' '<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">'
); );
const A = [ const A = [
@ -155,30 +155,30 @@ bench('For', () => {
}); });
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert(_el$2, () => props.item.label); $$insert(_el$2, () => props.item.label);
return _el$; return _el$;
})(); })();
}; };
const RowList = props => { const RowList = props => {
return _$createComponent(For, { return $$createComponent(For, {
get each() { get each() {
return props.list; return props.list;
}, },
children: item => children: item =>
_$createComponent(Row, { $$createComponent(Row, {
item: item, item: item,
}), }),
}); });
}; };
const Button = props => const Button = props =>
(() => { (() => {
const _el$3 = _tmpl$2(), const _el$3 = $tmpl_2(),
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
_$addEventListener(_el$4, 'click', props.cb, true); $$addEventListener(_el$4, 'click', props.cb, true);
_$insert(_el$4, () => props.title); $$insert(_el$4, () => props.title);
watch(() => _$setAttribute(_el$4, 'id', props.id)); watch(() => $$setAttribute(_el$4, 'id', props.id));
return _el$3; return _el$3;
})(); })();
const Main = () => { const Main = () => {
@ -201,7 +201,7 @@ bench('For', () => {
} }
return (() => { return (() => {
const _el$5 = _tmpl$3(), const _el$5 = $tmpl_3(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.firstChild, _el$7 = _el$6.firstChild,
_el$8 = _el$7.firstChild, _el$8 = _el$7.firstChild,
@ -209,17 +209,17 @@ bench('For', () => {
_el$10 = _el$9.firstChild, _el$10 = _el$9.firstChild,
_el$11 = _el$6.nextSibling, _el$11 = _el$6.nextSibling,
_el$12 = _el$11.firstChild; _el$12 = _el$11.firstChild;
_$insert( $$insert(
_el$10, _el$10,
_$createComponent(Button, { $$createComponent(Button, {
id: 'run', id: 'run',
title: 'Create 1,000 rows', title: 'Create 1,000 rows',
cb: run, cb: run,
}) })
); );
_$insert( $$insert(
_el$12, _el$12,
_$createComponent(RowList, { $$createComponent(RowList, {
get list() { get list() {
return state.list; return state.list;
}, },
@ -228,8 +228,8 @@ bench('For', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(Main, {}), container); render(() => $$createComponent(Main, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
container.querySelector('#run').click(); container.querySelector('#run').click();
}); });

68
packages/inula-novdom/tests/For.test.tsx
View File

@ -17,12 +17,12 @@
import { computed, reactive, watch } from 'inula-reactive'; import { computed, reactive, watch } from 'inula-reactive';
import { import {
template as _$template, template as $$template,
insert as _$insert, insert as $$insert,
setAttribute as _$setAttribute, setAttribute as $$setAttribute,
} from '../src/dom'; } from '../src/dom';
import { createComponent as _$createComponent, render } from '../src/core'; import { createComponent as $$createComponent, render } from '../src/core';
import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event'; import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
import { describe, expect } from 'vitest'; import { describe, expect } from 'vitest';
import { domTest as it } from './utils'; import { domTest as it } from './utils';
import { For } from '../src/components/For'; import { For } from '../src/components/For';
@ -76,17 +76,17 @@ describe('For', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is <!>.'), const $tmpl = /*#__PURE__*/ $$template('<div>Count value is <!>.'),
_tmpl$2 = /*#__PURE__*/ _$template( $tmpl_2 = /*#__PURE__*/ $$template(
'<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push' '<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push'
); );
const Todo = props => { const Todo = props => {
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling,
_el$3 = _el$4.nextSibling; _el$3 = _el$4.nextSibling;
_$insert(_el$, () => props.todo.title, _el$4); $$insert(_el$, () => props.todo.title, _el$4);
return _el$; return _el$;
})(); })();
}; };
@ -130,23 +130,23 @@ describe('For', () => {
}); });
}; };
return (() => { return (() => {
const _el$5 = _tmpl$2(), const _el$5 = $tmpl_2(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.nextSibling, _el$7 = _el$6.nextSibling,
_el$8 = _el$7.firstChild, _el$8 = _el$7.firstChild,
_el$9 = _el$7.nextSibling, _el$9 = _el$7.nextSibling,
_el$10 = _el$9.firstChild; _el$10 = _el$9.firstChild;
_$insert( $$insert(
_el$6, _el$6,
_$createComponent(For, { $$createComponent(For, {
get each() { get each() {
return state.todoList; return state.todoList;
}, },
children: todo => [ children: todo => [
_$createComponent(Todo, { $$createComponent(Todo, {
todo: todo, todo: todo,
}), }),
_$createComponent(Todo, { $$createComponent(Todo, {
todo: todo, todo: todo,
}), }),
], ],
@ -157,8 +157,8 @@ describe('For', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#todos').innerHTML).toEqual( 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>' '<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">'), const $tmpl = /*#__PURE__*/ $$template('<tr><td class="col-md-1">'),
_tmpl$2 = /*#__PURE__*/ _$template('<div class="col-sm-6"><button type="button">'), $tmpl_2 = /*#__PURE__*/ $$template('<div class="col-sm-6"><button type="button">'),
_tmpl$3 = /*#__PURE__*/ _$template( $tmpl_3 = /*#__PURE__*/ $$template(
'<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">' '<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">'
); );
const A = [ const A = [
@ -306,30 +306,30 @@ describe('For', () => {
}); });
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert(_el$2, () => props.item.label); $$insert(_el$2, () => props.item.label);
return _el$; return _el$;
})(); })();
}; };
const RowList = props => { const RowList = props => {
return _$createComponent(For, { return $$createComponent(For, {
get each() { get each() {
return props.list; return props.list;
}, },
children: item => children: item =>
_$createComponent(Row, { $$createComponent(Row, {
item: item, item: item,
}), }),
}); });
}; };
const Button = props => const Button = props =>
(() => { (() => {
const _el$3 = _tmpl$2(), const _el$3 = $tmpl_2(),
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
_$addEventListener(_el$4, 'click', props.cb, true); $$addEventListener(_el$4, 'click', props.cb, true);
_$insert(_el$4, () => props.title); $$insert(_el$4, () => props.title);
watch(() => _$setAttribute(_el$4, 'id', props.id)); watch(() => $$setAttribute(_el$4, 'id', props.id));
return _el$3; return _el$3;
})(); })();
const Main = () => { const Main = () => {
@ -352,7 +352,7 @@ describe('For', () => {
} }
return (() => { return (() => {
const _el$5 = _tmpl$3(), const _el$5 = $tmpl_3(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.firstChild, _el$7 = _el$6.firstChild,
_el$8 = _el$7.firstChild, _el$8 = _el$7.firstChild,
@ -360,17 +360,17 @@ describe('For', () => {
_el$10 = _el$9.firstChild, _el$10 = _el$9.firstChild,
_el$11 = _el$6.nextSibling, _el$11 = _el$6.nextSibling,
_el$12 = _el$11.firstChild; _el$12 = _el$11.firstChild;
_$insert( $$insert(
_el$10, _el$10,
_$createComponent(Button, { $$createComponent(Button, {
id: 'run', id: 'run',
title: 'Create 1,000 rows', title: 'Create 1,000 rows',
cb: run, cb: run,
}) })
); );
_$insert( $$insert(
_el$12, _el$12,
_$createComponent(RowList, { $$createComponent(RowList, {
get list() { get list() {
return state.list; return state.list;
}, },
@ -379,8 +379,8 @@ describe('For', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(Main, {}), container); render(() => $$createComponent(Main, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#tbody').innerHTML).toEqual( expect(container.querySelector('#tbody').innerHTML).toEqual(
'<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>' '<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>'

47
packages/inula-novdom/tests/event.test.tsx
View File

@ -17,10 +17,9 @@
import { describe, expect, vi } from 'vitest'; import { describe, expect, vi } from 'vitest';
import { domTest as it } from './utils'; import { domTest as it } from './utils';
import { template as _$template, effect as _$effect } from '../src/dom'; import { template as $$template } from '../src/dom';
import { createComponent as _$createComponent, render } from '../src/core'; import { createComponent as $$createComponent, render } from '../src/core';
import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event'; import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
import { reactive } from 'inula-reactive';
function dispatchMouseEvent(element: HTMLElement, eventType = 'click') { function dispatchMouseEvent(element: HTMLElement, eventType = 'click') {
element.dispatchEvent(new MouseEvent(eventType, { bubbles: true })); element.dispatchEvent(new MouseEvent(eventType, { bubbles: true }));
@ -55,51 +54,51 @@ describe('event', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template(`<input id="inline-fn-change">`), const $tmpl = /*#__PURE__*/ $$template(`<input id="inline-fn-change">`),
_tmpl$2 = /*#__PURE__*/ _$template(`<input id="var-change">`), $tmpl_2 = /*#__PURE__*/ $$template(`<input id="var-change">`),
_tmpl$3 = /*#__PURE__*/ _$template(`<input id="hoisted-var-change">`), $tmpl_3 = /*#__PURE__*/ $$template(`<input id="hoisted-var-change">`),
_tmpl$4 = /*#__PURE__*/ _$template(`<button id="inline-fn-click">Click Delegated`), $tmpl_4 = /*#__PURE__*/ $$template(`<button id="inline-fn-click">Click Delegated`),
_tmpl$5 = /*#__PURE__*/ _$template(`<button id="var-click">Click Delegated`), $tmpl_5 = /*#__PURE__*/ $$template(`<button id="var-click">Click Delegated`),
_tmpl$6 = /*#__PURE__*/ _$template(`<button id="hoisted-var-click">Click Delegated`); $tmpl_6 = /*#__PURE__*/ $$template(`<button id="hoisted-var-click">Click Delegated`);
const fn = vi.fn(); const fn = vi.fn();
const Comp = () => { const Comp = () => {
const handler = () => fn(); const handler = () => fn();
return [ return [
(() => { (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_el$.addEventListener('change', () => fn('bound')); $$addEventListener(_el$, 'change', () => fn('bound'));
return _el$; return _el$;
})(), })(),
(() => { (() => {
const _el$2 = _tmpl$2(); const _el$2 = $tmpl_2();
_el$2.addEventListener('change', handler); $$addEventListener(_el$2, 'change', handler);
return _el$2; return _el$2;
})(), })(),
(() => { (() => {
const _el$3 = _tmpl$3(); const _el$3 = $tmpl_3();
_el$3.addEventListener('change', fn); $$addEventListener(_el$3, 'change', fn);
return _el$3; return _el$3;
})(), })(),
(() => { (() => {
const _el$4 = _tmpl$4(); const _el$4 = $tmpl_4();
_el$4.$$click = () => fn('delegated'); $$addEventListener(_el$4, 'click', () => fn('delegated'));
return _el$4; return _el$4;
})(), })(),
(() => { (() => {
const _el$5 = _tmpl$5(); const _el$5 = $tmpl_5();
_el$5.$$click = handler; $$addEventListener(_el$5, 'click', handler);
return _el$5; return _el$5;
})(), })(),
(() => { (() => {
const _el$6 = _tmpl$6(); const _el$6 = $tmpl_6();
_el$6.$$click = fn; $$addEventListener(_el$6, 'click', fn);
return _el$6; return _el$6;
})(), })(),
]; ];
}; };
render(() => _$createComponent(Comp), container); render(() => $$createComponent(Comp), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change'); dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change');
expect(fn).toHaveBeenCalledTimes(1); expect(fn).toHaveBeenCalledTimes(1);

279
packages/inula-novdom/tests/render.test.ts
View File

@ -16,15 +16,15 @@
// @ts-nocheck For the compiled code. // @ts-nocheck For the compiled code.
import { computed, reactive, watch } from 'inula-reactive'; import { computed, reactive, watch } from 'inula-reactive';
import { import {
template as _$template, template as $$template,
insert as _$insert, insert as $$insert,
setAttribute as _$setAttribute, setAttribute as $$setAttribute,
effect as _$effect, effect as $$effect,
style as _$style, style as $$style,
className as _$className, className as $$className,
} from '../src/dom'; } from '../src/dom';
import { createComponent as _$createComponent, render } from '../src/core'; import { createComponent as $$createComponent, render } from '../src/core';
import { delegateEvents as _$delegateEvents, addEventListener as _$addEventListener } from '../src/event'; import { delegateEvents as $$delegateEvents, addEventListener as $$addEventListener } from '../src/event';
import { describe, expect } from 'vitest'; import { describe, expect } from 'vitest';
import { domTest as it } from './utils'; import { domTest as it } from './utils';
import { Show } from '../src/components/Show'; 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 = () => { const CountingComponent = () => {
return _tmpl$(); return $tmpl();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0.'); 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 = () => { const CountingComponent = () => {
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling;
_el$3 = _el$4.nextSibling; $$insert(_el$, 0, _el$4);
_$insert(_el$, 0, _el$4);
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0<!---->.'); 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 <!>.'), const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.'),
_tmpl$2 = /*#__PURE__*/ _$template('<div><button id="btn">add'); $tmpl_2 = /*#__PURE__*/ $$template('<div><button id="btn">add');
const CountingComponent = () => { const CountingComponent = () => {
const count = reactive(0); const count = reactive(0);
const add = () => { const add = () => {
@ -103,24 +102,23 @@ describe('render', () => {
}; };
return [ return [
(() => { (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling;
_el$3 = _el$4.nextSibling; $$insert(_el$, count, _el$4);
_$insert(_el$, count, _el$4);
return _el$; return _el$;
})(), })(),
(() => { (() => {
const _el$5 = _tmpl$2(), const _el$5 = $tmpl_2(),
_el$6 = _el$5.firstChild; _el$6 = _el$5.firstChild;
_el$6.$$click = add; _el$6.$$click = add;
return _el$5; return _el$5;
})(), })(),
]; ];
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
container.querySelector('#btn').click(); container.querySelector('#btn').click();
@ -150,15 +148,14 @@ describe('render', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is <!>.'), const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.'),
_tmpl$2 = /*#__PURE__*/ _$template('<div><div><button id="btn">add'); $tmpl_2 = /*#__PURE__*/ $$template('<div><div><button id="btn">add');
const CountValue = props => { const CountValue = props => {
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling;
_el$3 = _el$4.nextSibling; $$insert(_el$, () => props.count, _el$4);
_$insert(_el$, () => props.count, _el$4);
return _el$; return _el$;
})(); })();
}; };
@ -168,12 +165,12 @@ describe('render', () => {
count.set(c => c + 1); count.set(c => c + 1);
}; };
return (() => { return (() => {
const _el$5 = _tmpl$2(), const _el$5 = $tmpl_2(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.firstChild; _el$7 = _el$6.firstChild;
_$insert( $$insert(
_el$5, _el$5,
_$createComponent(CountValue, { $$createComponent(CountValue, {
count: count, count: count,
}), }),
_el$6 _el$6
@ -182,8 +179,8 @@ describe('render', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
container.querySelector('#btn').click(); container.querySelector('#btn').click();
@ -220,16 +217,15 @@ describe('render', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is <!> .'), const $tmpl = /*#__PURE__*/ $$template('<div>Count value is <!> .'),
_tmpl$2 = /*#__PURE__*/ _$template('<h1>'), $tmpl_2 = /*#__PURE__*/ $$template('<h1>'),
_tmpl$3 = /*#__PURE__*/ _$template('<div><div><button>add'); $tmpl_3 = /*#__PURE__*/ $$template('<div><div><button>add');
const CountValue = props => { const CountValue = props => {
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling;
_el$3 = _el$4.nextSibling; $$insert(_el$, () => props.count, _el$4);
_$insert(_el$, () => props.count, _el$4);
return _el$; return _el$;
})(); })();
}; };
@ -240,29 +236,29 @@ describe('render', () => {
}; };
const Nested = () => { const Nested = () => {
return (() => { return (() => {
const _el$5 = _tmpl$2(); const _el$5 = $tmpl_2();
_$insert(_el$5, count); $$insert(_el$5, count);
return _el$5; return _el$5;
})(); })();
}; };
return (() => { return (() => {
const _el$6 = _tmpl$3(), const _el$6 = $tmpl_3(),
_el$7 = _el$6.firstChild, _el$7 = _el$6.firstChild,
_el$8 = _el$7.firstChild; _el$8 = _el$7.firstChild;
_$insert( $$insert(
_el$6, _el$6,
_$createComponent(CountValue, { $$createComponent(CountValue, {
count: count, count: count,
}), }),
_el$7 _el$7
); );
_el$8.$$click = add; _el$8.$$click = add;
_$insert(_el$6, _$createComponent(Nested, {}), null); $$insert(_el$6, $$createComponent(Nested, {}), null);
return _el$6; return _el$6;
})(); })();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('h1').innerHTML).toMatchInlineSnapshot('"0"'); expect(container.querySelector('h1').innerHTML).toMatchInlineSnapshot('"0"');
container.querySelector('button').click(); 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 = () => { const Comp = () => {
return _tmpl$(); return $tmpl();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').style.color).toEqual('red'); 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 Comp = () => {
const color = 'red'; const color = 'red';
return _tmpl$(); return $tmpl();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').style.color).toEqual('red'); 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 = () => { const Comp = () => {
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_el$.style.setProperty('color', 'red'); _el$.style.setProperty('color', 'red');
_el$.style.setProperty('display', 'flex'); _el$.style.setProperty('display', 'flex');
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').style.color).toEqual('red'); 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 Comp = () => {
const color = 'red'; const color = 'red';
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_el$.style.setProperty('color', 'red'); _el$.style.setProperty('color', 'red');
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').style.color).toEqual('red'); 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 Comp = () => {
const color = reactive('red'); const color = reactive('red');
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$effect(() => $$effect(() =>
color.get() != null ? _el$.style.setProperty('color', color.get()) : _el$.style.removeProperty('color') color.get() != null ? _el$.style.setProperty('color', color.get()) : _el$.style.removeProperty('color')
); );
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').style.color).toEqual('red'); expect(container.querySelector('div').style.color).toEqual('red');
container.querySelector('div').style.color = 'green'; container.querySelector('div').style.color = 'green';
expect(container.querySelector('div').style.color).toEqual('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 Comp = () => {
const style = reactive({ color: 'red' }); const style = reactive({ color: 'red' });
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$effect(_$p => _$style(_el$, style.get(), _$p)); $$effect(_$p => $$style(_el$, style.get(), _$p));
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').style.color).toEqual('red'); expect(container.querySelector('div').style.color).toEqual('red');
container.querySelector('div').style.color = 'green'; container.querySelector('div').style.color = 'green';
expect(container.querySelector('div').style.color).toEqual('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 = () => { const Comp = () => {
return _tmpl$(); return $tmpl();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red'); 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 Comp = () => {
const color = 'red'; const color = 'red';
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$effect(() => (_el$.className = color)); $$effect(() => (_el$.className = color));
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red'); 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 = () => { const Comp = () => {
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$className(_el$, { $$className(_el$, {
red: true, red: true,
}); });
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red'); 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 = () => { const Comp = () => {
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$className(_el$, ['red', 'green']); $$className(_el$, ['red', 'green']);
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red green'); 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 Comp = () => {
const color = reactive('red'); const color = reactive('red');
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$effect(() => _$className(_el$, color.get())); $$effect(() => $$className(_el$, color.get()));
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red'); expect(container.querySelector('div').className).toEqual('red');
container.querySelector('div').className = 'green'; container.querySelector('div').className = 'green';
expect(container.querySelector('div').className).toEqual('green'); expect(container.querySelector('div').className).toEqual('green');
@ -519,20 +515,20 @@ describe('render', () => {
* >Count value is 0.</div>; * >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 Comp = () => {
const color = reactive('red'); const color = reactive('red');
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$effect(() => $$effect(() =>
_$className(_el$, { $$className(_el$, {
[color.get()]: true, [color.get()]: true,
}) })
); );
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red'); expect(container.querySelector('div').className).toEqual('red');
}); });
@ -545,16 +541,16 @@ describe('render', () => {
* >Count value is 0.</div>; * >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 Comp = () => {
const color = reactive('red'); const color = reactive('red');
return (() => { return (() => {
const _el$ = _tmpl$(); const _el$ = $tmpl();
_$effect(() => _$className(_el$, [color.get(), 'green'])); $$effect(() => $$className(_el$, [color.get(), 'green']));
return _el$; return _el$;
})(); })();
}; };
render(() => _$createComponent(Comp, {}), container); render(() => $$createComponent(Comp, {}), container);
expect(container.querySelector('div').className).toEqual('red green'); expect(container.querySelector('div').className).toEqual('red green');
}); });
@ -583,15 +579,14 @@ describe('render', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template('<div id="count">Count value is <!>.'), const $tmpl = /*#__PURE__*/ $$template('<div id="count">Count value is <!>.'),
_tmpl$2 = /*#__PURE__*/ _$template('<div><div><button id="btn">add'); $tmpl_2 = /*#__PURE__*/ $$template('<div><div><button id="btn">add');
const CountValue = props => { const CountValue = props => {
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling;
_el$3 = _el$4.nextSibling; $$insert(_el$, () => props.count, _el$4);
_$insert(_el$, () => props.count, _el$4);
return _el$; return _el$;
})(); })();
}; };
@ -601,22 +596,22 @@ describe('render', () => {
count.set(c => c + 1); count.set(c => c + 1);
}; };
return (() => { return (() => {
const _el$5 = _tmpl$2(), const _el$5 = $tmpl_2(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.firstChild; _el$7 = _el$6.firstChild;
_$insert( $$insert(
_el$5, _el$5,
_$createComponent(Show, { $$createComponent(Show, {
get if() { get if() {
return computed(() => count.get() > 0); return computed(() => count.get() > 0);
}, },
get else() { get else() {
return _$createComponent(CountValue, { return $$createComponent(CountValue, {
count: 999, count: 999,
}); });
}, },
get children() { get children() {
return _$createComponent(CountValue, { return $$createComponent(CountValue, {
count: count, count: count,
}); });
}, },
@ -627,8 +622,8 @@ describe('render', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#count').innerHTML).toEqual('Count value is 999<!---->.'); expect(container.querySelector('#count').innerHTML).toEqual('Count value is 999<!---->.');
@ -685,17 +680,17 @@ describe('render', () => {
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template('<div>Count value is <!>.'), const $tmpl = /*#__PURE__*/ $$template('<div>Count value is <!>.'),
_tmpl$2 = /*#__PURE__*/ _$template( $tmpl_2 = /*#__PURE__*/ $$template(
'<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push' '<div><div id="todos"></div><div><button id="btn">add</button></div><div><button id="btn-push">push'
); );
const Todo = props => { const Todo = props => {
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild, _el$2 = _el$.firstChild,
_el$4 = _el$2.nextSibling, _el$4 = _el$2.nextSibling,
_el$3 = _el$4.nextSibling; _el$3 = _el$4.nextSibling;
_$insert(_el$, () => props.todo.title, _el$4); $$insert(_el$, () => props.todo.title, _el$4);
return _el$; return _el$;
})(); })();
}; };
@ -739,23 +734,23 @@ describe('render', () => {
}); });
}; };
return (() => { return (() => {
const _el$5 = _tmpl$2(), const _el$5 = $tmpl_2(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.nextSibling, _el$7 = _el$6.nextSibling,
_el$8 = _el$7.firstChild, _el$8 = _el$7.firstChild,
_el$9 = _el$7.nextSibling, _el$9 = _el$7.nextSibling,
_el$10 = _el$9.firstChild; _el$10 = _el$9.firstChild;
_$insert( $$insert(
_el$6, _el$6,
_$createComponent(For, { $$createComponent(For, {
get each() { get each() {
return state.todoList; return state.todoList;
}, },
children: todo => [ children: todo => [
_$createComponent(Todo, { $$createComponent(Todo, {
todo: todo, todo: todo,
}), }),
_$createComponent(Todo, { $$createComponent(Todo, {
todo: todo, todo: todo,
}), }),
], ],
@ -766,8 +761,8 @@ describe('render', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(CountingComponent, {}), container); render(() => $$createComponent(CountingComponent, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#todos').innerHTML).toEqual( 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>' '<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">'), const $tmpl = /*#__PURE__*/ $$template('<tr><td class="col-md-1">'),
_tmpl$2 = /*#__PURE__*/ _$template('<div class="col-sm-6"><button type="button">'), $tmpl_2 = /*#__PURE__*/ $$template('<div class="col-sm-6"><button type="button">'),
_tmpl$3 = /*#__PURE__*/ _$template( $tmpl_3 = /*#__PURE__*/ $$template(
'<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">' '<div><div><div><div><h1>Horizon-reactive-novnode</h1></div><div><div></div></div></div></div><table><tbody id="tbody">'
); );
const A = [ const A = [
@ -915,30 +910,30 @@ describe('render', () => {
}); });
return (() => { return (() => {
const _el$ = _tmpl$(), const _el$ = $tmpl(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert(_el$2, () => props.item.label); $$insert(_el$2, () => props.item.label);
return _el$; return _el$;
})(); })();
}; };
const RowList = props => { const RowList = props => {
return _$createComponent(For, { return $$createComponent(For, {
get each() { get each() {
return props.list; return props.list;
}, },
children: item => children: item =>
_$createComponent(Row, { $$createComponent(Row, {
item: item, item: item,
}), }),
}); });
}; };
const Button = props => const Button = props =>
(() => { (() => {
const _el$3 = _tmpl$2(), const _el$3 = $tmpl_2(),
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
_$addEventListener(_el$4, 'click', props.cb, true); $$addEventListener(_el$4, 'click', props.cb, true);
_$insert(_el$4, () => props.title); $$insert(_el$4, () => props.title);
watch(() => _$setAttribute(_el$4, 'id', props.id)); watch(() => $$setAttribute(_el$4, 'id', props.id));
return _el$3; return _el$3;
})(); })();
const Main = () => { const Main = () => {
@ -961,7 +956,7 @@ describe('render', () => {
} }
return (() => { return (() => {
const _el$5 = _tmpl$3(), const _el$5 = $tmpl_3(),
_el$6 = _el$5.firstChild, _el$6 = _el$5.firstChild,
_el$7 = _el$6.firstChild, _el$7 = _el$6.firstChild,
_el$8 = _el$7.firstChild, _el$8 = _el$7.firstChild,
@ -969,17 +964,17 @@ describe('render', () => {
_el$10 = _el$9.firstChild, _el$10 = _el$9.firstChild,
_el$11 = _el$6.nextSibling, _el$11 = _el$6.nextSibling,
_el$12 = _el$11.firstChild; _el$12 = _el$11.firstChild;
_$insert( $$insert(
_el$10, _el$10,
_$createComponent(Button, { $$createComponent(Button, {
id: 'run', id: 'run',
title: 'Create 1,000 rows', title: 'Create 1,000 rows',
cb: run, cb: run,
}) })
); );
_$insert( $$insert(
_el$12, _el$12,
_$createComponent(RowList, { $$createComponent(RowList, {
get list() { get list() {
return state.list; return state.list;
}, },
@ -988,8 +983,8 @@ describe('render', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => _$createComponent(Main, {}), container); render(() => $$createComponent(Main, {}), container);
_$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#tbody').innerHTML).toEqual( expect(container.querySelector('#tbody').innerHTML).toEqual(
'<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>' '<tr><td class="col-md-1">111</td></tr><tr><td class="col-md-1">222</td></tr>'