!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

View File

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

View File

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

View File

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

View File

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

View File

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