import { Shadow, HTML, SVG, El, Attrs, shadow, frag, html, define } from '../../index';
import { Coroutine } from 'spica/coroutine';
import { Sequence } from 'spica/sequence';
import { wait } from 'spica/timer';
import i18next from 'i18next';
declare global {
interface ShadowHostHTMLElementTagNameMap {
'custom-tag': HTMLCustomElement;
}
interface HTMLElementTagNameMap {
'custom': HTMLElement;
}
interface HTMLCustomElement extends HTMLElement {
custom: true;
}
}
declare const _: { shuffle(as: T[]): T[]; };
const doc = Shadow.section([]);
document.body.appendChild(doc.element);
describe('Integration: Package', function () {
describe('spec', function () {
it('call', function () {
assert(HTML('p').element.outerHTML === '');
assert(HTML('p', 'a').element.outerHTML === 'a
');
assert(HTML('p', { class: 'class' }, 'a', (h, t) => h(t, { id: 'id' })).element.outerHTML === 'a
');
});
it('html', function () {
assert(HTML.html().element instanceof HTMLElement);
assert(HTML.html().element.outerHTML === '');
});
it('svg', function () {
assert(SVG.svg().element instanceof SVGElement);
assert(SVG.svg().element.outerHTML === '');
});
it('empty', function () {
const dom = HTML.p();
assert(dom.element.outerHTML === '');
assert(dom.children === undefined);
assert.deepStrictEqual({ ...dom.element }, {});
});
it('factory', function () {
const dom = HTML.p({ class: 'test' }, [HTML.a()], (h, tag, _, children) => {
assert(children.every(child => child.element instanceof HTMLAnchorElement));
return html('div').appendChild(h(tag, { id: 'test' }));
});
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert(dom.children.length === 1);
assert(dom.children.every(child => child.element instanceof HTMLAnchorElement));
});
it('node', function () {
const dom = Shadow.p(frag(['a', html('br'), 'b']));
assert(dom.element.shadowRoot?.innerHTML === 'a
b');
assert(dom.children instanceof DocumentFragment);
assert(dom.children.childNodes.length === 0);
dom.children = frag(['c']);
assert(dom.element.shadowRoot?.innerHTML === 'c');
assert(dom.children.childNodes.length === 0);
});
it('text', function () {
const dom = HTML.p('a');
assert(dom.element.outerHTML === 'a
');
assert(dom.children === 'a');
});
it('text children update', function () {
const dom = HTML.p('a');
// @ts-expect-error
() => dom.children = undefined;
dom.children = 'b';
assert(dom.element.outerHTML === 'b
');
assert(dom.children === 'b');
});
it('text with factory', function () {
const dom = HTML.p('a', (h, tag) =>
h(tag, { id: 'test' }));
assert(dom.element.id === 'test');
assert(dom.children === 'a');
});
it('collection', function () {
const dom = HTML.ul([
HTML.li('1'),
HTML.li('2'),
]);
assert(dom.element.outerHTML === '');
assert(dom.children.length === 2);
assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
});
it('collection children update', function () {
this.timeout(9 * 1e3);
const dom = HTML.ul([
HTML.li('1'),
]);
assert.doesNotThrow(() => dom.children = dom.children);
assert.throws(() => dom.children = HTML.ul([HTML.li('1')]).children);
dom.children = [
HTML.li('2'),
HTML.li('3'),
];
assert(dom.element.outerHTML === '');
assert(dom.children.length === 2);
assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
dom.children = [
HTML.li('4'),
];
assert(dom.element.outerHTML === '');
assert(dom.children.length === 1);
assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
dom.children = [
HTML.li('4'),
HTML.li('5'),
];
assert(dom.element.outerHTML === '');
assert(dom.children.length === 2);
assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
// Property test
const el = HTML.ul([]);
const es = Sequence.from([HTML.li('1'), HTML.li('2'), HTML.li('3')]);
el.children = [];
Sequence.from([
...es.permutations(),
...es.permutations().bind(es => Sequence.from(es).subsequences()),
])
.extract()
.forEach(es => {
el.children = es;
assert.deepStrictEqual(el.children, es);
});
});
it('collection children partial update', function () {
const dom = HTML.ul([
HTML.li(),
]);
// @ts-expect-error
() => dom.children[0] = dom.children[0];
//() => dom.children[0] = HTML.li();
//() => dom.children.push(HTML.li());
//() => dom.children.pop();
//() => dom.children.length = 0;
// @ts-expect-error
() => dom.children = [undefined];
// @ts-expect-error
() => dom.children = [HTML.li(), undefined];
assert(dom.children.length === 1);
assert(dom.children.every(({ element }, i) => element === dom.element.children[i]));
});
it('collection with factory', function () {
const dom = HTML.ul([], (h, tag) =>
h(tag, { id: 'test' }));
assert(dom.element.id === 'test');
assert.deepStrictEqual(dom.children, []);
});
it('struct', function () {
const dom = HTML.article({
title: HTML.h1('title'),
content: HTML.p(),
});
assert(dom.element.outerHTML === 'title
');
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.content.element === dom.element.lastChild);
});
it('struct empty', function () {
const dom = HTML.div({}, {});
assert.deepStrictEqual(dom.children, {});
});
it('struct children update', function () {
const dom = HTML.article({
title: HTML.h1('a'),
content: HTML.p(),
});
assert.doesNotThrow(() => dom.children = dom.children);
assert.throws(() => dom.children = HTML.article({ title: HTML.h1('b') }).children);
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.title.element.textContent === 'a');
assert(dom.children.title.children === 'a');
dom.children = {
content: HTML.p(),
title: HTML.h1('b'),
};
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.title.element.textContent === 'b');
assert(dom.children.title.children === 'b');
});
it('struct children partial update', function () {
const dom = HTML.article({
title: HTML.h1('a'),
content: HTML.p(),
});
assert.doesNotThrow(() => dom.children.title = dom.children.title);
assert.throws(() => dom.children.title = HTML.article({ title: HTML.h1('b') }).children.title);
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.title.element.textContent === 'a');
assert(dom.children.title.children === 'a');
dom.children.title = HTML.h1('b');
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.title.element.textContent === 'b');
assert(dom.children.title.children === 'b');
dom.children.title.children = 'c';
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.title.element.textContent === 'c');
assert(dom.children.title.children === 'c');
dom.children = {
title: HTML.h1('d'),
};
assert(dom.children.title.element === dom.element.firstChild);
assert(dom.children.title.element.textContent === 'd');
assert(dom.children.title.children === 'd');
dom.children = {
title: HTML.h1('e'),
content: undefined,
};
assert(dom.children.content.element === dom.element.lastChild);
assert(dom.element.outerHTML === 'e
');
});
it('struct with factory', function () {
const dom = HTML.article(
{
content: HTML.p('b'),
},
(h, tag, _, children) =>
h(tag, { id: 'test' }, [
html('h1', 'a'),
children.content.element,
'z',
]));
assert(dom.element.id === 'test');
assert.deepStrictEqual(dom.children, { content: dom.children.content });
assert(dom.element.innerHTML === 'a
b
z');
dom.children.content.children = 'c';
assert(dom.element.innerHTML === 'a
c
z');
dom.children.content = HTML.p('d');
assert(dom.element.innerHTML === 'a
d
z');
});
it('attr', function () {
(): void => HTML.div({}).children;
assert.deepStrictEqual(HTML.div({}).children, undefined);
const dom = HTML.div({ id: 'test', class: 'test' });
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert(dom.children === undefined);
});
it('attr with factory', function () {
const dom = HTML.div({ id: 'test' }, (h, tag) =>
h(tag, { id: 'id', class: 'test' }, 'test'));
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert(dom.children === undefined);
assert(HTML.div({}, (h, tag) => h(tag, 'test')).element.textContent === 'test');
});
it('attr with text', function () {
const dom = HTML.div({ id: 'test', class: 'test' }, '');
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert(dom.children === '');
});
it('attr with collection', function () {
const dom = HTML.div({ id: 'test', class: 'test' }, []);
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert.deepStrictEqual(dom.children, []);
});
it('attr with struct', function () {
const dom = HTML.div({ id: 'test', class: 'test' }, {});
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert.deepStrictEqual(dom.children, {});
});
it('attr with text and factory', function () {
const dom = HTML.div({ id: 'test' }, '', (h, tag) =>
h(tag, { id: 'id', class: 'test' }));
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert(dom.children === '');
});
it('attr with collection and factory', function () {
const dom = HTML.div({ id: 'test' }, [], (h, tag) =>
h(tag, { id: 'id', class: 'test' }));
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert.deepStrictEqual(dom.children, []);
});
it('attr with struct and factory', function () {
const dom = HTML.div({ id: 'test' }, {}, (h, tag) =>
h(tag, { id: 'id', class: 'test' }));
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert.deepStrictEqual(dom.children, {});
assert.deepStrictEqual(HTML('div', undefined, {}, html => html('div', 'a')).children, {});
assert.deepStrictEqual(HTML.div(undefined, {}, html => html('div', 'a')).children, {});
});
it('listen', function (done) {
HTML.a({ onclick: ev => void assert(ev instanceof Event) ?? done() }).element.click();
});
it('sanitize', function () {
const dom = HTML.div('