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

!141 fix(no-vdom): modify test name 

* fix(no-vdom): modify $$style
* fix(no-vdom): modify test name
* Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive
* fix(no-vdom): modify event
* Merge branch 'reactive' of https://gitee.com/openInula/inula into reactive
* 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-08 09:53:01 +00:00
parent 813d819fa7
commit 80f3be9436
8 changed files with 105 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/inula-novdom/src/core.ts
View File

@ -14,7 +14,7 @@
*/ */
import { insert } from './dom'; import { insert } from './dom';
import { untrack } from 'inula-reactive/dist'; import { untrack } from 'inula-reactive';
type ComponentConstructor<T> = (props: T) => any; type ComponentConstructor<T> = (props: T) => any;
type CodeFunction = () => any; type CodeFunction = () => any;

8
packages/inula-novdom/src/dom.ts
View File

@ -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) { if (value == null) {
node.removeAttribute(name); (node as Element).removeAttribute(name);
} else { } else {
node.setAttribute(name, value); (node as Element).setAttribute(name, value);
} }
} }
export function className(node: Element, value: string | Record<string, boolean> | null): void { export function className(node: Element, value: string | string[] | Record<string, boolean> | null): void {
if (value == null) { if (value == null) {
node.removeAttribute('class'); node.removeAttribute('class');
} else { } else {

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

@ -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) { if (delegate) {
node[`$$DELEGATE_EVENT_${name}`] = handler; node[`$$DELEGATE_EVENT_${name}`] = handler;
} else { } else {

13
packages/inula-novdom/tests/For.bench.tsx
View File

@ -13,13 +13,14 @@
* See the Mulan PSL v2 for more details. * See the Mulan PSL v2 for more details.
*/ */
import { bench } from 'vitest'; import { bench } from 'vitest';
import { computed, reactive, watch } from 'inula-reactive'; import { computed, reactive } from 'inula-reactive';
import { import {
template as $$template, template as $$template,
insert as $$insert, insert as $$insert,
setAttribute as $$setAttribute, setAttribute as $$attr,
effect as $$effect,
} from '../src/dom'; } 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 { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event';
import { For } from '../src/components/For'; import { For } from '../src/components/For';
@ -99,7 +100,7 @@ bench('For', () => {
* ); * );
* }; * };
* *
* render(() => <Main />, document.getElementById("app")); * $$render(() => <Main />, document.getElementById("app"));
*/ */
// 编译后： // 编译后：
@ -178,7 +179,7 @@ bench('For', () => {
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
$$on(_el$4, 'click', props.cb, true); $$on(_el$4, 'click', props.cb, true);
$$insert(_el$4, () => props.title); $$insert(_el$4, () => props.title);
watch(() => $$setAttribute(_el$4, 'id', props.id)); $$effect(() => $$attr(_el$4, 'id', props.id));
return _el$3; return _el$3;
})(); })();
const Main = () => { const Main = () => {
@ -228,7 +229,7 @@ bench('For', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => $$runComponent(Main, {}), container); $$render(() => $$runComponent(Main, {}), container);
$$delegateEvents(['click']); $$delegateEvents(['click']);
container.querySelector('#run').click(); container.querySelector('#run').click();

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

@ -15,13 +15,14 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck For the compiled code. // @ts-nocheck For the compiled code.
import { computed, reactive, watch } from 'inula-reactive'; import { computed, reactive } from 'inula-reactive';
import { import {
template as $$template, template as $$template,
insert as $$insert, insert as $$insert,
setAttribute as $$setAttribute, setAttribute as $$attr,
effect as $$effect,
} from '../src/dom'; } 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 { delegateEvents as $$delegateEvents, addEventListener as $$on } 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';
@ -72,7 +73,7 @@ describe('For', () => {
* </div>; * </div>;
* }; * };
* *
* render(() => <CountingComponent />, document.getElementById("app")); * $$render(() => <CountingComponent />, document.getElementById("app"));
*/ */
// 编译后： // 编译后：
@ -157,7 +158,7 @@ describe('For', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => $$runComponent(CountingComponent, {}), container); $$render(() => $$runComponent(CountingComponent, {}), container);
$$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#todos').innerHTML).toEqual( expect(container.querySelector('#todos').innerHTML).toEqual(
@ -250,7 +251,7 @@ describe('For', () => {
* ); * );
* }; * };
* *
* render(() => <Main />, document.getElementById("app")); * $$render(() => <Main />, document.getElementById("app"));
*/ */
// 编译后： // 编译后：
@ -329,7 +330,7 @@ describe('For', () => {
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
$$on(_el$4, 'click', props.cb, true); $$on(_el$4, 'click', props.cb, true);
$$insert(_el$4, () => props.title); $$insert(_el$4, () => props.title);
watch(() => $$setAttribute(_el$4, 'id', props.id)); $$effect(() => $$attr(_el$4, 'id', props.id));
return _el$3; return _el$3;
})(); })();
const Main = () => { const Main = () => {
@ -379,7 +380,7 @@ describe('For', () => {
return _el$5; return _el$5;
})(); })();
}; };
render(() => $$runComponent(Main, {}), container); $$render(() => $$runComponent(Main, {}), container);
$$delegateEvents(['click']); $$delegateEvents(['click']);
expect(container.querySelector('#tbody').innerHTML).toEqual( expect(container.querySelector('#tbody').innerHTML).toEqual(

92
packages/inula-novdom/tests/conditions.test.tsx
View File

@ -17,9 +17,9 @@
import { describe, expect } from 'vitest'; import { describe, expect } from 'vitest';
import { domTest as it } from './utils'; 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 { 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'; import { reactive } from 'inula-reactive';
describe('conditions', () => { describe('conditions', () => {
@ -45,15 +45,15 @@ describe('conditions', () => {
* </div> * </div>
* ); * );
* } * }
* render(() => <App />, container); * $$render(() => <App />, container);
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template(`<p> is greater than 10`), const _tmpl$ = /*#__PURE__*/ $$template(`<p> is greater than 10`),
_tmpl$2 = /*#__PURE__*/ _$template(`<p> is less than 5`), _tmpl$2 = /*#__PURE__*/ $$template(`<p> is less than 5`),
_tmpl$3 = /*#__PURE__*/ _$template(`<div><h1>xxx`), _tmpl$3 = /*#__PURE__*/ $$template(`<div><h1>xxx`),
_tmpl$4 = /*#__PURE__*/ _$template(`<p> is between 5 and 10`); _tmpl$4 = /*#__PURE__*/ $$template(`<p> is between 5 and 10`);
let change; let change;
function App() { function App() {
@ -62,9 +62,9 @@ describe('conditions', () => {
return (() => { return (() => {
const _el$ = _tmpl$3(), const _el$ = _tmpl$3(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert( $$insert(
_el$, _el$,
_$runComponent(Cond, { $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -72,7 +72,7 @@ describe('conditions', () => {
() => { () => {
const _el$3 = _tmpl$(), const _el$3 = _tmpl$(),
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
_$insert(_el$3, x, _el$4); $$insert(_el$3, x, _el$4);
return _el$3; return _el$3;
}, },
], ],
@ -81,7 +81,7 @@ describe('conditions', () => {
() => { () => {
const _el$5 = _tmpl$2(), const _el$5 = _tmpl$2(),
_el$6 = _el$5.firstChild; _el$6 = _el$5.firstChild;
_$insert(_el$5, x, _el$6); $$insert(_el$5, x, _el$6);
return _el$5; return _el$5;
}, },
], ],
@ -90,7 +90,7 @@ describe('conditions', () => {
() => { () => {
const _el$7 = _tmpl$4(), const _el$7 = _tmpl$4(),
_el$8 = _el$7.firstChild; _el$8 = _el$7.firstChild;
_$insert(_el$7, x, _el$8); $$insert(_el$7, x, _el$8);
return _el$7; return _el$7;
}, },
], ],
@ -104,7 +104,7 @@ describe('conditions', () => {
})(); })();
} }
render(() => _$runComponent(App, {}), container); $$render(() => $$runComponent(App, {}), container);
expect(container.innerHTML).toBe('<div><h1>xxx</h1><p>7 is between 5 and 10</p></div>'); expect(container.innerHTML).toBe('<div><h1>xxx</h1><p>7 is between 5 and 10</p></div>');
change(11); change(11);
@ -130,13 +130,13 @@ describe('conditions', () => {
* </div> * </div>
* ); * );
* } * }
* render(() => <App />, container); * $$render(() => <App />, container);
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template(`<p> is greater than 10`), const _tmpl$ = /*#__PURE__*/ $$template(`<p> is greater than 10`),
_tmpl$3 = /*#__PURE__*/ _$template(`<div><h1>xxx`); _tmpl$3 = /*#__PURE__*/ $$template(`<div><h1>xxx`);
let change; let change;
function App() { function App() {
@ -145,9 +145,9 @@ describe('conditions', () => {
return (() => { return (() => {
const _el$ = _tmpl$3(), const _el$ = _tmpl$3(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert( $$insert(
_el$, _el$,
_$runComponent(Cond, { $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -155,7 +155,7 @@ describe('conditions', () => {
() => { () => {
const _el$3 = _tmpl$(), const _el$3 = _tmpl$(),
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
_$insert(_el$3, x, _el$4); $$insert(_el$3, x, _el$4);
return _el$3; return _el$3;
}, },
], ],
@ -169,7 +169,7 @@ describe('conditions', () => {
})(); })();
} }
render(() => _$runComponent(App, {}), container); $$render(() => $$runComponent(App, {}), container);
expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1></div>"'); expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1></div>"');
change(11); change(11);
@ -203,15 +203,15 @@ describe('conditions', () => {
* </div> * </div>
* ); * );
* } * }
* render(() => <App />, container); * $$render(() => <App />, container);
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template(`<p> is greater than 10`), const _tmpl$ = /*#__PURE__*/ $$template(`<p> is greater than 10`),
_tmpl$2 = /*#__PURE__*/ _$template(`<p> is less than 5`), _tmpl$2 = /*#__PURE__*/ $$template(`<p> is less than 5`),
_tmpl$3 = /*#__PURE__*/ _$template(`<p> is greater than 7`), _tmpl$3 = /*#__PURE__*/ $$template(`<p> is greater than 7`),
_tmpl$4 = /*#__PURE__*/ _$template(`<p> is 7 or less`), _tmpl$4 = /*#__PURE__*/ $$template(`<p> is 7 or less`),
_tmpl$5 = /*#__PURE__*/ _$template(`<div><h1>xxx`); _tmpl$5 = /*#__PURE__*/ $$template(`<div><h1>xxx`);
let change; let change;
function App() { function App() {
@ -220,9 +220,9 @@ describe('conditions', () => {
return (() => { return (() => {
const _el$ = _tmpl$5(), const _el$ = _tmpl$5(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert( $$insert(
_el$, _el$,
_$runComponent(Cond, { $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -230,7 +230,7 @@ describe('conditions', () => {
() => { () => {
const _el$3 = _tmpl$(), const _el$3 = _tmpl$(),
_el$4 = _el$3.firstChild; _el$4 = _el$3.firstChild;
_$insert(_el$3, x, _el$4); $$insert(_el$3, x, _el$4);
return _el$3; return _el$3;
}, },
], ],
@ -239,14 +239,14 @@ describe('conditions', () => {
() => { () => {
const _el$5 = _tmpl$2(), const _el$5 = _tmpl$2(),
_el$6 = _el$5.firstChild; _el$6 = _el$5.firstChild;
_$insert(_el$5, x, _el$6); $$insert(_el$5, x, _el$6);
return _el$5; return _el$5;
}, },
], ],
[ [
true, true,
() => { () => {
return _$runComponent(Cond, { return $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -254,7 +254,7 @@ describe('conditions', () => {
() => { () => {
const _el$8 = _tmpl$3(), const _el$8 = _tmpl$3(),
_el$9 = _el$8.firstChild; _el$9 = _el$8.firstChild;
_$insert(_el$8, x, _el$9); $$insert(_el$8, x, _el$9);
return _el$8; return _el$8;
}, },
], ],
@ -263,7 +263,7 @@ describe('conditions', () => {
() => { () => {
const _el$10 = _tmpl$4(), const _el$10 = _tmpl$4(),
_el$11 = _el$10.firstChild; _el$11 = _el$10.firstChild;
_$insert(_el$10, x, _el$11); $$insert(_el$10, x, _el$11);
return _el$10; return _el$10;
}, },
], ],
@ -281,7 +281,7 @@ describe('conditions', () => {
})(); })();
} }
render(() => _$runComponent(App, {}), container); $$render(() => $$runComponent(App, {}), container);
expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1><p>7 is 7 or less</p></div>"'); expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1><p>7 is 7 or less</p></div>"');
change(11); change(11);
expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1><p>11 is greater than 10</p></div>"'); expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1><p>11 is greater than 10</p></div>"');
@ -316,15 +316,15 @@ describe('conditions', () => {
* </div> * </div>
* ); * );
* } * }
* render(() => <App />, container); * $$render(() => <App />, container);
*/ */
// 编译后： // 编译后：
const _tmpl$ = /*#__PURE__*/ _$template(`<p>XXX`), const _tmpl$ = /*#__PURE__*/ $$template(`<p>XXX`),
_tmpl2$ = /*#__PURE__*/ _$template(`<p>YYY`), _tmpl2$ = /*#__PURE__*/ $$template(`<p>YYY`),
_tmpl3$ = /*#__PURE__*/ _$template(`<p>ZZZ`), _tmpl3$ = /*#__PURE__*/ $$template(`<p>ZZZ`),
_tmpl$4 = /*#__PURE__*/ _$template(`<div><h1>parallel`); _tmpl$4 = /*#__PURE__*/ $$template(`<div><h1>parallel`);
const showX = reactive(true); const showX = reactive(true);
const showY = reactive(true); const showY = reactive(true);
@ -334,9 +334,9 @@ describe('conditions', () => {
return (() => { return (() => {
const _el$ = _tmpl$4(), const _el$ = _tmpl$4(),
_el$2 = _el$.firstChild; _el$2 = _el$.firstChild;
_$insert( $$insert(
_el$, _el$,
_$runComponent(Cond, { $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -350,9 +350,9 @@ describe('conditions', () => {
}), }),
null null
); );
_$insert( $$insert(
_el$, _el$,
_$runComponent(Cond, { $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -366,9 +366,9 @@ describe('conditions', () => {
}), }),
null null
); );
_$insert( $$insert(
_el$, _el$,
_$runComponent(Cond, { $$runComponent(Cond, {
get branches() { get branches() {
return [ return [
[ [
@ -387,7 +387,7 @@ describe('conditions', () => {
})(); })();
} }
render(() => _$runComponent(App, {}), container); $$render(() => $$runComponent(App, {}), container);
expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>parallel</h1><p>XXX</p><p>YYY</p><p>ZZZ</p></div>"'); expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>parallel</h1><p>XXX</p><p>YYY</p><p>ZZZ</p></div>"');
// hide X, Y, Z randomly // hide X, Y, Z randomly

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

@ -18,7 +18,7 @@
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 } from '../src/dom'; 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'; import { delegateEvents as $$delegateEvents, addEventListener as $$on } from '../src/event';
function dispatchMouseEvent(element: HTMLElement, eventType = 'click') { function dispatchMouseEvent(element: HTMLElement, eventType = 'click') {
@ -50,7 +50,7 @@ describe('event', () => {
* </>; * </>;
* }; * };
* *
* render(() => <CountingComponent />, container); * $$render(() => <CountingComponent />, container);
*/ */
// 编译后： // 编译后：
@ -97,7 +97,7 @@ describe('event', () => {
})(), })(),
]; ];
}; };
render(() => $$runComponent(Comp), container); $$render(() => $$runComponent(Comp), container);
$$delegateEvents(['click']); $$delegateEvents(['click']);
dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change'); dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change');

69
packages/inula-novdom/tests/render.test.tsx
View File

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