diff --git a/packages/inula-novdom/src/core.ts b/packages/inula-novdom/src/core.ts index 9b2a2f60..f42a6e90 100644 --- a/packages/inula-novdom/src/core.ts +++ b/packages/inula-novdom/src/core.ts @@ -14,7 +14,7 @@ */ import { insert } from './dom'; -import { untrack } from 'inula-reactive/dist'; +import { untrack } from 'inula-reactive'; type ComponentConstructor = (props: T) => any; type CodeFunction = () => any; diff --git a/packages/inula-novdom/src/dom.ts b/packages/inula-novdom/src/dom.ts index 077b6a28..ff11474e 100644 --- a/packages/inula-novdom/src/dom.ts +++ b/packages/inula-novdom/src/dom.ts @@ -282,15 +282,15 @@ export default function reconcileArrays(parentNode: Node, oldChildren: Node[], n } } -export function setAttribute(node: Element, name: string, value: string | null): void { +export function setAttribute(node: Node, name: string, value: string | null): void { if (value == null) { - node.removeAttribute(name); + (node as Element).removeAttribute(name); } else { - node.setAttribute(name, value); + (node as Element).setAttribute(name, value); } } -export function className(node: Element, value: string | Record | null): void { +export function className(node: Element, value: string | string[] | Record | null): void { if (value == null) { node.removeAttribute('class'); } else { diff --git a/packages/inula-novdom/src/event.ts b/packages/inula-novdom/src/event.ts index 99e79d59..734d6ad1 100644 --- a/packages/inula-novdom/src/event.ts +++ b/packages/inula-novdom/src/event.ts @@ -72,7 +72,7 @@ function eventHandler(e: Event) { } } -export function addEventListener(node: Element, name: string, handler: EventListener, delegate?: boolean): void { +export function addEventListener(node: Node, name: string, handler: EventListener, delegate?: boolean): void { if (delegate) { node[`$$DELEGATE_EVENT_${name}`] = handler; } else { diff --git a/packages/inula-novdom/tests/For.bench.tsx b/packages/inula-novdom/tests/For.bench.tsx index 786b7278..3771a559 100644 --- a/packages/inula-novdom/tests/For.bench.tsx +++ b/packages/inula-novdom/tests/For.bench.tsx @@ -13,13 +13,14 @@ * See the Mulan PSL v2 for more details. */ import { bench } from 'vitest'; -import { computed, reactive, watch } from 'inula-reactive'; +import { computed, reactive } from 'inula-reactive'; import { template as $$template, insert as $$insert, - setAttribute as $$setAttribute, + setAttribute as $$attr, + effect as $$effect, } from '../src/dom'; -import { runComponent as $$runComponent, render } from '../src/core'; +import { runComponent as $$runComponent, render as $$render } from '../src/core'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event'; import { For } from '../src/components/For'; @@ -99,7 +100,7 @@ bench('For', () => { * ); * }; * - * render(() =>
, document.getElementById("app")); + * $$render(() =>
, document.getElementById("app")); */ // 编译后： @@ -178,7 +179,7 @@ bench('For', () => { _el$4 = _el$3.firstChild; $$on(_el$4, 'click', props.cb, true); $$insert(_el$4, () => props.title); - watch(() => $$setAttribute(_el$4, 'id', props.id)); + $$effect(() => $$attr(_el$4, 'id', props.id)); return _el$3; })(); const Main = () => { @@ -228,7 +229,7 @@ bench('For', () => { return _el$5; })(); }; - render(() => $$runComponent(Main, {}), container); + $$render(() => $$runComponent(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 e2ea6dd1..46c4b94f 100644 --- a/packages/inula-novdom/tests/For.test.tsx +++ b/packages/inula-novdom/tests/For.test.tsx @@ -15,13 +15,14 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-nocheck For the compiled code. -import { computed, reactive, watch } from 'inula-reactive'; +import { computed, reactive } from 'inula-reactive'; import { template as $$template, insert as $$insert, - setAttribute as $$setAttribute, + setAttribute as $$attr, + effect as $$effect, } from '../src/dom'; -import { runComponent as $$runComponent, render } from '../src/core'; +import { runComponent as $$runComponent, render as $$render } from '../src/core'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event'; import { describe, expect } from 'vitest'; import { domTest as it } from './utils'; @@ -72,7 +73,7 @@ describe('For', () => { * ; * }; * - * render(() => , document.getElementById("app")); + * $$render(() => , document.getElementById("app")); */ // 编译后： @@ -157,7 +158,7 @@ describe('For', () => { return _el$5; })(); }; - render(() => $$runComponent(CountingComponent, {}), container); + $$render(() => $$runComponent(CountingComponent, {}), container); $$delegateEvents(['click']); expect(container.querySelector('#todos').innerHTML).toEqual( @@ -250,7 +251,7 @@ describe('For', () => { * ); * }; * - * render(() =>
, document.getElementById("app")); + * $$render(() =>
, document.getElementById("app")); */ // 编译后： @@ -329,7 +330,7 @@ describe('For', () => { _el$4 = _el$3.firstChild; $$on(_el$4, 'click', props.cb, true); $$insert(_el$4, () => props.title); - watch(() => $$setAttribute(_el$4, 'id', props.id)); + $$effect(() => $$attr(_el$4, 'id', props.id)); return _el$3; })(); const Main = () => { @@ -379,7 +380,7 @@ describe('For', () => { return _el$5; })(); }; - render(() => $$runComponent(Main, {}), container); + $$render(() => $$runComponent(Main, {}), container); $$delegateEvents(['click']); expect(container.querySelector('#tbody').innerHTML).toEqual( diff --git a/packages/inula-novdom/tests/conditions.test.tsx b/packages/inula-novdom/tests/conditions.test.tsx index 6845efc8..d4b1753c 100644 --- a/packages/inula-novdom/tests/conditions.test.tsx +++ b/packages/inula-novdom/tests/conditions.test.tsx @@ -17,9 +17,9 @@ import { describe, expect } from 'vitest'; import { domTest as it } from './utils'; -import { template as _$template, insert as _$insert } from '../src/dom'; +import { template as $$template, insert as $$insert } from '../src/dom'; import { Cond } from '../src/components/Cond'; -import { runComponent as _$runComponent, render } from '../src/core'; +import { runComponent as $$runComponent, render as $$render } from '../src/core'; import { reactive } from 'inula-reactive'; describe('conditions', () => { @@ -45,15 +45,15 @@ describe('conditions', () => { * * ); * } - * render(() => , container); + * $$render(() => , container); */ // 编译后： - const _tmpl$ = /*#__PURE__*/ _$template(`

is greater than 10`), - _tmpl$2 = /*#__PURE__*/ _$template(`

is less than 5`), - _tmpl$3 = /*#__PURE__*/ _$template(`

xxx`), - _tmpl$4 = /*#__PURE__*/ _$template(`

is between 5 and 10`); + const _tmpl$ = /*#__PURE__*/ $$template(`

is greater than 10`), + _tmpl$2 = /*#__PURE__*/ $$template(`

is less than 5`), + _tmpl$3 = /*#__PURE__*/ $$template(`

xxx`), + _tmpl$4 = /*#__PURE__*/ $$template(`

is between 5 and 10`); let change; function App() { @@ -62,9 +62,9 @@ describe('conditions', () => { return (() => { const _el$ = _tmpl$3(), _el$2 = _el$.firstChild; - _$insert( + $$insert( _el$, - _$runComponent(Cond, { + $$runComponent(Cond, { get branches() { return [ [ @@ -72,7 +72,7 @@ describe('conditions', () => { () => { const _el$3 = _tmpl$(), _el$4 = _el$3.firstChild; - _$insert(_el$3, x, _el$4); + $$insert(_el$3, x, _el$4); return _el$3; }, ], @@ -81,7 +81,7 @@ describe('conditions', () => { () => { const _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild; - _$insert(_el$5, x, _el$6); + $$insert(_el$5, x, _el$6); return _el$5; }, ], @@ -90,7 +90,7 @@ describe('conditions', () => { () => { const _el$7 = _tmpl$4(), _el$8 = _el$7.firstChild; - _$insert(_el$7, x, _el$8); + $$insert(_el$7, x, _el$8); return _el$7; }, ], @@ -104,7 +104,7 @@ describe('conditions', () => { })(); } - render(() => _$runComponent(App, {}), container); + $$render(() => $$runComponent(App, {}), container); expect(container.innerHTML).toBe('

xxx

7 is between 5 and 10

'); change(11); @@ -130,13 +130,13 @@ describe('conditions', () => { *

* ); * } - * render(() => , container); + * $$render(() => , container); */ // 编译后： - const _tmpl$ = /*#__PURE__*/ _$template(`

is greater than 10`), - _tmpl$3 = /*#__PURE__*/ _$template(`

xxx`); + const _tmpl$ = /*#__PURE__*/ $$template(`

is greater than 10`), + _tmpl$3 = /*#__PURE__*/ $$template(`

xxx`); let change; function App() { @@ -145,9 +145,9 @@ describe('conditions', () => { return (() => { const _el$ = _tmpl$3(), _el$2 = _el$.firstChild; - _$insert( + $$insert( _el$, - _$runComponent(Cond, { + $$runComponent(Cond, { get branches() { return [ [ @@ -155,7 +155,7 @@ describe('conditions', () => { () => { const _el$3 = _tmpl$(), _el$4 = _el$3.firstChild; - _$insert(_el$3, x, _el$4); + $$insert(_el$3, x, _el$4); return _el$3; }, ], @@ -169,7 +169,7 @@ describe('conditions', () => { })(); } - render(() => _$runComponent(App, {}), container); + $$render(() => $$runComponent(App, {}), container); expect(container.innerHTML).toMatchInlineSnapshot('"

xxx

"'); change(11); @@ -203,15 +203,15 @@ describe('conditions', () => { *

* ); * } - * render(() => , container); + * $$render(() => , container); */ // 编译后： - const _tmpl$ = /*#__PURE__*/ _$template(`

is greater than 10`), - _tmpl$2 = /*#__PURE__*/ _$template(`

is less than 5`), - _tmpl$3 = /*#__PURE__*/ _$template(`

is greater than 7`), - _tmpl$4 = /*#__PURE__*/ _$template(`

is 7 or less`), - _tmpl$5 = /*#__PURE__*/ _$template(`

xxx`); + const _tmpl$ = /*#__PURE__*/ $$template(`

is greater than 10`), + _tmpl$2 = /*#__PURE__*/ $$template(`

is less than 5`), + _tmpl$3 = /*#__PURE__*/ $$template(`

is greater than 7`), + _tmpl$4 = /*#__PURE__*/ $$template(`

is 7 or less`), + _tmpl$5 = /*#__PURE__*/ $$template(`

xxx`); let change; function App() { @@ -220,9 +220,9 @@ describe('conditions', () => { return (() => { const _el$ = _tmpl$5(), _el$2 = _el$.firstChild; - _$insert( + $$insert( _el$, - _$runComponent(Cond, { + $$runComponent(Cond, { get branches() { return [ [ @@ -230,7 +230,7 @@ describe('conditions', () => { () => { const _el$3 = _tmpl$(), _el$4 = _el$3.firstChild; - _$insert(_el$3, x, _el$4); + $$insert(_el$3, x, _el$4); return _el$3; }, ], @@ -239,14 +239,14 @@ describe('conditions', () => { () => { const _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild; - _$insert(_el$5, x, _el$6); + $$insert(_el$5, x, _el$6); return _el$5; }, ], [ true, () => { - return _$runComponent(Cond, { + return $$runComponent(Cond, { get branches() { return [ [ @@ -254,7 +254,7 @@ describe('conditions', () => { () => { const _el$8 = _tmpl$3(), _el$9 = _el$8.firstChild; - _$insert(_el$8, x, _el$9); + $$insert(_el$8, x, _el$9); return _el$8; }, ], @@ -263,7 +263,7 @@ describe('conditions', () => { () => { const _el$10 = _tmpl$4(), _el$11 = _el$10.firstChild; - _$insert(_el$10, x, _el$11); + $$insert(_el$10, x, _el$11); return _el$10; }, ], @@ -281,7 +281,7 @@ describe('conditions', () => { })(); } - render(() => _$runComponent(App, {}), container); + $$render(() => $$runComponent(App, {}), container); expect(container.innerHTML).toMatchInlineSnapshot('"

xxx

7 is 7 or less

"'); change(11); expect(container.innerHTML).toMatchInlineSnapshot('"

xxx

11 is greater than 10

"'); @@ -316,15 +316,15 @@ describe('conditions', () => { *

* ); * } - * render(() => , container); + * $$render(() => , container); */ // 编译后： - const _tmpl$ = /*#__PURE__*/ _$template(`

XXX`), - _tmpl2$ = /*#__PURE__*/ _$template(`

YYY`), - _tmpl3$ = /*#__PURE__*/ _$template(`

ZZZ`), - _tmpl$4 = /*#__PURE__*/ _$template(`

parallel`); + const _tmpl$ = /*#__PURE__*/ $$template(`

XXX`), + _tmpl2$ = /*#__PURE__*/ $$template(`

YYY`), + _tmpl3$ = /*#__PURE__*/ $$template(`

ZZZ`), + _tmpl$4 = /*#__PURE__*/ $$template(`

parallel`); const showX = reactive(true); const showY = reactive(true); @@ -334,9 +334,9 @@ describe('conditions', () => { return (() => { const _el$ = _tmpl$4(), _el$2 = _el$.firstChild; - _$insert( + $$insert( _el$, - _$runComponent(Cond, { + $$runComponent(Cond, { get branches() { return [ [ @@ -350,9 +350,9 @@ describe('conditions', () => { }), null ); - _$insert( + $$insert( _el$, - _$runComponent(Cond, { + $$runComponent(Cond, { get branches() { return [ [ @@ -366,9 +366,9 @@ describe('conditions', () => { }), null ); - _$insert( + $$insert( _el$, - _$runComponent(Cond, { + $$runComponent(Cond, { get branches() { return [ [ @@ -387,7 +387,7 @@ describe('conditions', () => { })(); } - render(() => _$runComponent(App, {}), container); + $$render(() => $$runComponent(App, {}), container); expect(container.innerHTML).toMatchInlineSnapshot('"

parallel

XXX

YYY

ZZZ

"'); // hide X, Y, Z randomly diff --git a/packages/inula-novdom/tests/event.test.tsx b/packages/inula-novdom/tests/event.test.tsx index a21dfa8a..f1ce7b7a 100644 --- a/packages/inula-novdom/tests/event.test.tsx +++ b/packages/inula-novdom/tests/event.test.tsx @@ -18,7 +18,7 @@ import { describe, expect, vi } from 'vitest'; import { domTest as it } from './utils'; import { template as $$template } from '../src/dom'; -import { runComponent as $$runComponent, render } from '../src/core'; +import { runComponent as $$runComponent, render as $$render} from '../src/core'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event'; function dispatchMouseEvent(element: HTMLElement, eventType = 'click') { @@ -50,7 +50,7 @@ describe('event', () => { * ; * }; * - * render(() => , container); + * $$render(() => , container); */ // 编译后： @@ -97,7 +97,7 @@ describe('event', () => { })(), ]; }; - render(() => $$runComponent(Comp), container); + $$render(() => $$runComponent(Comp), container); $$delegateEvents(['click']); dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change'); diff --git a/packages/inula-novdom/tests/render.test.tsx b/packages/inula-novdom/tests/render.test.tsx index b193a66a..d43b40b3 100644 --- a/packages/inula-novdom/tests/render.test.tsx +++ b/packages/inula-novdom/tests/render.test.tsx @@ -21,9 +21,9 @@ import { effect as $$effect, style as $$style, className as $$className, - setAttribute as $$setAttribute, + setAttribute as $$attr, } from '../src/dom'; -import { runComponent as $$runComponent, render } from '../src/core'; +import { runComponent as $$runComponent, render as $$render } from '../src/core'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event'; import { describe, expect } from 'vitest'; import { domTest as it } from './utils'; @@ -36,7 +36,7 @@ describe('render', () => { * return
Count value is 0.
; * }; * - * render(() => , container); + * $$render(() => , container); */ // 编译后： @@ -44,7 +44,7 @@ describe('render', () => { const CountingComponent = () => { return $tmpl(); }; - render(() => $$runComponent(CountingComponent, {}), container); + $$render(() => $$runComponent(CountingComponent, {}), container); expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0.'); }); @@ -56,7 +56,7 @@ describe('render', () => { * return
Count value is {0}.
; * }; * - * render(() => , container); + * $$render(() => , container); */ // 编译后： @@ -70,7 +70,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(CountingComponent, {}), container); + $$render(() => $$runComponent(CountingComponent, {}), container); expect(container.querySelector('#count').innerHTML).toEqual('Count value is 0.'); }); @@ -114,7 +114,7 @@ describe('render', () => { })(), ]; }; - render(() => $$runComponent(CountingComponent, {}), container); + $$render(() => $$runComponent(CountingComponent, {}), container); $$delegateEvents(['click']); @@ -142,7 +142,7 @@ describe('render', () => { *

; * }; * - * render(() => , document.getElementById("app")); + * $$render(() => , document.getElementById("app")); */ // 编译后： @@ -177,7 +177,7 @@ describe('render', () => { return _el$5; })(); }; - render(() => $$runComponent(CountingComponent, {}), container); + $$render(() => $$runComponent(CountingComponent, {}), container); $$delegateEvents(['click']); container.querySelector('#btn').click(); @@ -211,7 +211,7 @@ describe('render', () => { * ); * }; * - * render(() => , document.getElementById("app")); + * $$render(() => , document.getElementById("app")); */ // 编译后： @@ -255,7 +255,7 @@ describe('render', () => { return _el$6; })(); }; - render(() => $$runComponent(CountingComponent, {}), container); + $$render(() => $$runComponent(CountingComponent, {}), container); $$delegateEvents(['click']); expect(container.querySelector('h1').innerHTML).toMatchInlineSnapshot('"0"'); @@ -265,7 +265,7 @@ describe('render', () => { it('should throw error when container is not valid', () => { [undefined, null, 0, 1, true, false, 'string', Symbol('symbol'), {}].forEach(container => { - expect(() => render(() => $$runComponent(() => null, undefined), container)).toThrowError( + expect(() => $$render(() => $$runComponent(() => null, undefined), container)).toThrowError( 'Render target is not valid.' ); }); @@ -278,7 +278,7 @@ describe('render', () => { * return
Count value is 0.
; * }; * - * render(() => , container); + * $$render(() => , container); */ // 编译后： @@ -286,7 +286,7 @@ describe('render', () => { const Comp = () => { return $tmpl(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); }); @@ -298,7 +298,7 @@ describe('render', () => { * const color = 'red'; * return
Count value is 0.
; * } - * render(() => , container); + * $$render(() => , container); * */ // 编译后： @@ -308,7 +308,7 @@ describe('render', () => { return $tmpl(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); }); @@ -324,12 +324,11 @@ describe('render', () => { const Comp = () => { return (() => { const _el$ = $tmpl(); - _el$.style.setProperty('color', 'red'); - _el$.style.setProperty('display', 'flex'); + $$style(_el$, { color: 'red', display: 'flex' }); return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); }); @@ -347,12 +346,12 @@ describe('render', () => { const color = 'red'; return (() => { const _el$ = $tmpl(); - _el$.style.setProperty('color', 'red'); + $$style(_el$, { color: 'red' }); return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); }); @@ -371,13 +370,13 @@ describe('render', () => { return (() => { const _el$ = $tmpl(); $$effect(() => - color.get() != null ? _el$.style.setProperty('color', color.get()) : _el$.style.removeProperty('color') + $$style(_el$, { color: color.get() }) ); return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); container.querySelector('div').style.color = 'green'; expect(container.querySelector('div').style.color).toEqual('green'); @@ -402,7 +401,7 @@ describe('render', () => { })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').style.color).toEqual('red'); container.querySelector('div').style.color = 'green'; expect(container.querySelector('div').style.color).toEqual('green'); @@ -420,7 +419,7 @@ describe('render', () => { const Comp = () => { return $tmpl(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); @@ -442,7 +441,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); @@ -464,7 +463,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); @@ -484,7 +483,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red green'); }); @@ -506,7 +505,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); container.querySelector('div').className = 'green'; expect(container.querySelector('div').className).toEqual('green'); @@ -534,7 +533,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red'); }); @@ -556,7 +555,7 @@ describe('render', () => { return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').className).toEqual('red green'); }); @@ -574,11 +573,11 @@ describe('render', () => { const Comp = () => { return (() => { const _el$ = $tmpl(); - $$setAttribute(_el$, 'id', 'test'); + $$attr(_el$, 'id', 'test'); return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').id).toEqual('test'); }); @@ -598,11 +597,11 @@ describe('render', () => { const Comp = () => { return (() => { const _el$ = $tmpl(); - $$effect(() => $$setAttribute(_el$, 'id', id.get())); + $$effect(() => $$attr(_el$, 'id', id.get())); return _el$; })(); }; - render(() => $$runComponent(Comp, {}), container); + $$render(() => $$runComponent(Comp, {}), container); expect(container.querySelector('div').id).toEqual('el'); id.set('test'); expect(container.querySelector('div').id).toEqual('test');