!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:
陈超涛
parent
813d819fa7
commit
80f3be9436
|
|
@ -14,7 +14,7 @@
|
|||
*/
|
||||
|
||||
import { insert } from './dom';
|
||||
import { untrack } from 'inula-reactive/dist';
|
||||
import { untrack } from 'inula-reactive';
|
||||
|
||||
type ComponentConstructor<T> = (props: T) => any;
|
||||
type CodeFunction = () => any;
|
||||
|
|
|
|||
|
|
@ -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<string, boolean> | null): void {
|
||||
export function className(node: Element, value: string | string[] | Record<string, boolean> | null): void {
|
||||
if (value == null) {
|
||||
node.removeAttribute('class');
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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(() => <Main />, document.getElementById("app"));
|
||||
* $$render(() => <Main />, 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();
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
|||
* </div>;
|
||||
* };
|
||||
*
|
||||
* render(() => <CountingComponent />, document.getElementById("app"));
|
||||
* $$render(() => <CountingComponent />, 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(() => <Main />, document.getElementById("app"));
|
||||
* $$render(() => <Main />, 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(
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
|||
* </div>
|
||||
* );
|
||||
* }
|
||||
* render(() => <App />, container);
|
||||
* $$render(() => <App />, container);
|
||||
*/
|
||||
|
||||
// 编译后：
|
||||
|
||||
const _tmpl$ = /*#__PURE__*/ _$template(`<p> is greater than 10`),
|
||||
_tmpl$2 = /*#__PURE__*/ _$template(`<p> is less than 5`),
|
||||
_tmpl$3 = /*#__PURE__*/ _$template(`<div><h1>xxx`),
|
||||
_tmpl$4 = /*#__PURE__*/ _$template(`<p> is between 5 and 10`);
|
||||
const _tmpl$ = /*#__PURE__*/ $$template(`<p> is greater than 10`),
|
||||
_tmpl$2 = /*#__PURE__*/ $$template(`<p> is less than 5`),
|
||||
_tmpl$3 = /*#__PURE__*/ $$template(`<div><h1>xxx`),
|
||||
_tmpl$4 = /*#__PURE__*/ $$template(`<p> 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('<div><h1>xxx</h1><p>7 is between 5 and 10</p></div>');
|
||||
change(11);
|
||||
|
|
@ -130,13 +130,13 @@ describe('conditions', () => {
|
|||
* </div>
|
||||
* );
|
||||
* }
|
||||
* render(() => <App />, container);
|
||||
* $$render(() => <App />, container);
|
||||
*/
|
||||
|
||||
// 编译后：
|
||||
|
||||
const _tmpl$ = /*#__PURE__*/ _$template(`<p> is greater than 10`),
|
||||
_tmpl$3 = /*#__PURE__*/ _$template(`<div><h1>xxx`);
|
||||
const _tmpl$ = /*#__PURE__*/ $$template(`<p> is greater than 10`),
|
||||
_tmpl$3 = /*#__PURE__*/ $$template(`<div><h1>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('"<div><h1>xxx</h1></div>"');
|
||||
change(11);
|
||||
|
|
@ -203,15 +203,15 @@ describe('conditions', () => {
|
|||
* </div>
|
||||
* );
|
||||
* }
|
||||
* render(() => <App />, container);
|
||||
* $$render(() => <App />, container);
|
||||
*/
|
||||
|
||||
// 编译后：
|
||||
const _tmpl$ = /*#__PURE__*/ _$template(`<p> is greater than 10`),
|
||||
_tmpl$2 = /*#__PURE__*/ _$template(`<p> is less than 5`),
|
||||
_tmpl$3 = /*#__PURE__*/ _$template(`<p> is greater than 7`),
|
||||
_tmpl$4 = /*#__PURE__*/ _$template(`<p> is 7 or less`),
|
||||
_tmpl$5 = /*#__PURE__*/ _$template(`<div><h1>xxx`);
|
||||
const _tmpl$ = /*#__PURE__*/ $$template(`<p> is greater than 10`),
|
||||
_tmpl$2 = /*#__PURE__*/ $$template(`<p> is less than 5`),
|
||||
_tmpl$3 = /*#__PURE__*/ $$template(`<p> is greater than 7`),
|
||||
_tmpl$4 = /*#__PURE__*/ $$template(`<p> is 7 or less`),
|
||||
_tmpl$5 = /*#__PURE__*/ $$template(`<div><h1>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('"<div><h1>xxx</h1><p>7 is 7 or less</p></div>"');
|
||||
change(11);
|
||||
expect(container.innerHTML).toMatchInlineSnapshot('"<div><h1>xxx</h1><p>11 is greater than 10</p></div>"');
|
||||
|
|
@ -316,15 +316,15 @@ describe('conditions', () => {
|
|||
* </div>
|
||||
* );
|
||||
* }
|
||||
* render(() => <App />, container);
|
||||
* $$render(() => <App />, container);
|
||||
*/
|
||||
|
||||
// 编译后：
|
||||
|
||||
const _tmpl$ = /*#__PURE__*/ _$template(`<p>XXX`),
|
||||
_tmpl2$ = /*#__PURE__*/ _$template(`<p>YYY`),
|
||||
_tmpl3$ = /*#__PURE__*/ _$template(`<p>ZZZ`),
|
||||
_tmpl$4 = /*#__PURE__*/ _$template(`<div><h1>parallel`);
|
||||
const _tmpl$ = /*#__PURE__*/ $$template(`<p>XXX`),
|
||||
_tmpl2$ = /*#__PURE__*/ $$template(`<p>YYY`),
|
||||
_tmpl3$ = /*#__PURE__*/ $$template(`<p>ZZZ`),
|
||||
_tmpl$4 = /*#__PURE__*/ $$template(`<div><h1>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('"<div><h1>parallel</h1><p>XXX</p><p>YYY</p><p>ZZZ</p></div>"');
|
||||
// hide X, Y, Z randomly
|
||||
|
|
|
|||
|
|
@ -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(() => <CountingComponent />, container);
|
||||
* $$render(() => <CountingComponent />, container);
|
||||
*/
|
||||
|
||||
// 编译后：
|
||||
|
|
@ -97,7 +97,7 @@ describe('event', () => {
|
|||
})(),
|
||||
];
|
||||
};
|
||||
render(() => $$runComponent(Comp), container);
|
||||
$$render(() => $$runComponent(Comp), container);
|
||||
$$delegateEvents(['click']);
|
||||
|
||||
dispatchChangeEvent(document.getElementById('inline-fn-change'), 'change');
|
||||
|
|
|
|||
|
|
@ -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 <div id="count">Count value is 0.</div>;
|
||||
* };
|
||||
*
|
||||
* render(() => <CountingComponent />, container);
|
||||
* $$render(() => <CountingComponent />, 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 <div id="count">Count value is {0}.</div>;
|
||||
* };
|
||||
*
|
||||
* render(() => <CountingComponent />, container);
|
||||
* $$render(() => <CountingComponent />, 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', () => {
|
|||
* </div>;
|
||||
* };
|
||||
*
|
||||
* render(() => <CountingComponent />, document.getElementById("app"));
|
||||
* $$render(() => <CountingComponent />, 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(() => <CountingComponent />, document.getElementById("app"));
|
||||
* $$render(() => <CountingComponent />, 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 <div style="color: red;">Count value is 0.</div>;
|
||||
* };
|
||||
*
|
||||
* render(() => <CountingComponent />, container);
|
||||
* $$render(() => <CountingComponent />, 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 <div style={`color: ${color};`}>Count value is 0.</div>;
|
||||
* }
|
||||
* render(() => <Comp />, container);
|
||||
* $$render(() => <Comp />, 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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue