@w-lfpup/wctk 0.2.3 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +11 -13
- package/dist/events.d.ts +2 -2
- package/dist/microtask.d.ts +4 -2
- package/dist/microtask.js +2 -2
- package/dist/query_selector.js +5 -5
- package/dist/wc.js +4 -7
- package/package.json +6 -6
- package/src/events.ts +2 -4
- package/src/microtask.ts +5 -3
- package/src/query_selector.ts +6 -4
- package/src/wc.ts +4 -9
- package/.github/workflows/browsers.macos.json +0 -51
- package/.github/workflows/browsers.ubuntu.json +0 -37
- package/.github/workflows/builds.yml +0 -27
- package/.prettierignore +0 -5
- package/.prettierrc +0 -5
- package/docs/events.md +0 -93
- package/docs/microtask.md +0 -32
- package/docs/query_selector.md +0 -37
- package/docs/wc.md +0 -55
- package/examples/counter/index.html +0 -30
- package/examples/counter/mod.js +0 -37
- package/examples/counter/mod.ts +0 -52
- package/examples/form_associated/index.html +0 -31
- package/examples/form_associated/mod.js +0 -11
- package/examples/form_associated/mod.ts +0 -20
- package/examples/form_associated/text_input.js +0 -22
- package/examples/form_associated/text_input.ts +0 -31
- package/examples/stopwatch/index.html +0 -32
- package/examples/stopwatch/mod.js +0 -13
- package/examples/stopwatch/mod.ts +0 -13
- package/examples/stopwatch/stopwatch.js +0 -48
- package/examples/stopwatch/stopwatch.ts +0 -70
- package/examples/tsconfig.json +0 -11
- package/jr.json +0 -25
- package/tests/dist/events.tests.js +0 -60
- package/tests/dist/microtask.tests.js +0 -38
- package/tests/dist/mod.js +0 -10
- package/tests/dist/query_selector.tests.js +0 -43
- package/tests/dist/wc.tests.js +0 -41
- package/tests/src/events.tests.ts +0 -73
- package/tests/src/microtask.tests.ts +0 -54
- package/tests/src/mod.ts +0 -11
- package/tests/src/query_selector.tests.ts +0 -46
- package/tests/src/wc.tests.ts +0 -52
- package/tests/tsconfig.json +0 -8
package/examples/counter/mod.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { Wc, Events } from "wctk";
|
|
2
|
-
class Counter extends HTMLElement {
|
|
3
|
-
#wc = new Wc({ host: this });
|
|
4
|
-
#ev = new Events({
|
|
5
|
-
connected: true,
|
|
6
|
-
target: this.#wc.shadowRoot,
|
|
7
|
-
listeners: {
|
|
8
|
-
click: this.#clickHandler.bind(this),
|
|
9
|
-
},
|
|
10
|
-
});
|
|
11
|
-
#state = getStateFromDOM(this.#wc.shadowRoot);
|
|
12
|
-
#clickHandler(e) {
|
|
13
|
-
let increment = getIncrement(e);
|
|
14
|
-
if (increment) {
|
|
15
|
-
this.#state.count += increment;
|
|
16
|
-
let el = this.#state.el;
|
|
17
|
-
if (el)
|
|
18
|
-
el.textContent = this.#state.count.toString();
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
function getStateFromDOM(shadowRoot) {
|
|
23
|
-
let slot = shadowRoot.querySelector("slot");
|
|
24
|
-
let el;
|
|
25
|
-
if (slot)
|
|
26
|
-
for (let slotted of slot.assignedNodes()) {
|
|
27
|
-
if (slotted instanceof HTMLSpanElement)
|
|
28
|
-
el = slotted;
|
|
29
|
-
}
|
|
30
|
-
return { el, count: parseInt(el?.textContent ?? "0") };
|
|
31
|
-
}
|
|
32
|
-
function getIncrement(e) {
|
|
33
|
-
if (e.target instanceof HTMLButtonElement) {
|
|
34
|
-
return e.target.hasAttribute("increase") ? 1 : -1;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
customElements.define("counter-wc", Counter);
|
package/examples/counter/mod.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Custom Element with state and interactivity.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
import { Wc, Events } from "wctk";
|
|
6
|
-
|
|
7
|
-
interface State {
|
|
8
|
-
el: HTMLSpanElement | undefined;
|
|
9
|
-
count: number;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
class Counter extends HTMLElement {
|
|
13
|
-
#wc = new Wc({ host: this });
|
|
14
|
-
|
|
15
|
-
#ev = new Events({
|
|
16
|
-
connected: true,
|
|
17
|
-
target: this.#wc.shadowRoot,
|
|
18
|
-
listeners: {
|
|
19
|
-
click: this.#clickHandler.bind(this),
|
|
20
|
-
},
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
#state: State = getStateFromDOM(this.#wc.shadowRoot);
|
|
24
|
-
|
|
25
|
-
#clickHandler(e: PointerEvent) {
|
|
26
|
-
let increment = getIncrement(e);
|
|
27
|
-
if (increment) {
|
|
28
|
-
this.#state.count += increment;
|
|
29
|
-
let el = this.#state.el;
|
|
30
|
-
if (el) el.textContent = this.#state.count.toString();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function getStateFromDOM(shadowRoot: ShadowRoot): State {
|
|
36
|
-
let slot = shadowRoot.querySelector("slot");
|
|
37
|
-
let el: HTMLSpanElement | undefined;
|
|
38
|
-
if (slot)
|
|
39
|
-
for (let slotted of slot.assignedNodes()) {
|
|
40
|
-
if (slotted instanceof HTMLSpanElement) el = slotted;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
return { el, count: parseInt(el?.textContent ?? "0") };
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function getIncrement(e: Event) {
|
|
47
|
-
if (e.target instanceof HTMLButtonElement) {
|
|
48
|
-
return e.target.hasAttribute("increase") ? 1 : -1;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
customElements.define("counter-wc", Counter);
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-us">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset=utf-8>
|
|
5
|
-
<meta name=viewport content="width=device-width, initial-scale=1">
|
|
6
|
-
<script type="importmap">
|
|
7
|
-
{
|
|
8
|
-
"imports": {
|
|
9
|
-
"wctk": "../../dist/mod.js"
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
</script>
|
|
13
|
-
<script src="./mod.js" type=module></script>
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
<main>
|
|
17
|
-
<form>
|
|
18
|
-
<!-- html component input -->
|
|
19
|
-
<input name="html_element">
|
|
20
|
-
<!-- custom element input -->
|
|
21
|
-
<text-input name="web_component">
|
|
22
|
-
<template shadowrootmode="closed">
|
|
23
|
-
<input>
|
|
24
|
-
</template>
|
|
25
|
-
</text-input>
|
|
26
|
-
<button type="submit">submit !</button>
|
|
27
|
-
</form>
|
|
28
|
-
<pre results></pre>
|
|
29
|
-
</main>
|
|
30
|
-
</body>
|
|
31
|
-
</html>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { TextInput } from "./text_input.js";
|
|
2
|
-
customElements.define("text-input", TextInput);
|
|
3
|
-
const results = document.querySelector("[results]");
|
|
4
|
-
document.addEventListener("submit", function (e) {
|
|
5
|
-
if (!(e.target instanceof HTMLFormElement))
|
|
6
|
-
return;
|
|
7
|
-
e.preventDefault();
|
|
8
|
-
let formdata = new FormData(e.target);
|
|
9
|
-
if (results)
|
|
10
|
-
results.textContent = JSON.stringify(Object.fromEntries(formdata), undefined, " ");
|
|
11
|
-
});
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { TextInput } from "./text_input.js";
|
|
2
|
-
|
|
3
|
-
customElements.define("text-input", TextInput);
|
|
4
|
-
|
|
5
|
-
const results = document.querySelector("[results]");
|
|
6
|
-
|
|
7
|
-
document.addEventListener("submit", function (e: SubmitEvent) {
|
|
8
|
-
if (!(e.target instanceof HTMLFormElement)) return;
|
|
9
|
-
|
|
10
|
-
e.preventDefault();
|
|
11
|
-
|
|
12
|
-
let formdata: FormData = new FormData(e.target);
|
|
13
|
-
|
|
14
|
-
if (results)
|
|
15
|
-
results.textContent = JSON.stringify(
|
|
16
|
-
Object.fromEntries(formdata),
|
|
17
|
-
undefined,
|
|
18
|
-
" ",
|
|
19
|
-
);
|
|
20
|
-
});
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { Wc, Events } from "wctk";
|
|
2
|
-
export class TextInput extends HTMLElement {
|
|
3
|
-
static formAssociated = true;
|
|
4
|
-
#wc = new Wc({ host: this });
|
|
5
|
-
#ev = new Events({
|
|
6
|
-
connected: true,
|
|
7
|
-
target: this.#wc.shadowRoot,
|
|
8
|
-
listeners: {
|
|
9
|
-
change: this.#changeHandler.bind(this),
|
|
10
|
-
},
|
|
11
|
-
});
|
|
12
|
-
#changeHandler(event) {
|
|
13
|
-
let { target } = event;
|
|
14
|
-
if (target instanceof HTMLInputElement)
|
|
15
|
-
this.#wc.setFormValue(target.value);
|
|
16
|
-
}
|
|
17
|
-
formStateRestoreCallback(state) {
|
|
18
|
-
let input = this.#wc.shadowRoot.querySelector("input");
|
|
19
|
-
if (input)
|
|
20
|
-
input.value = state;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Form associated custom element.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
import { Wc, Events } from "wctk";
|
|
6
|
-
|
|
7
|
-
export class TextInput extends HTMLElement {
|
|
8
|
-
static formAssociated = true;
|
|
9
|
-
|
|
10
|
-
#wc = new Wc({ host: this });
|
|
11
|
-
|
|
12
|
-
#ev = new Events({
|
|
13
|
-
connected: true,
|
|
14
|
-
target: this.#wc.shadowRoot,
|
|
15
|
-
listeners: {
|
|
16
|
-
change: this.#changeHandler.bind(this),
|
|
17
|
-
},
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
#changeHandler(event: Event): void {
|
|
21
|
-
let { target } = event;
|
|
22
|
-
if (target instanceof HTMLInputElement)
|
|
23
|
-
this.#wc.setFormValue(target.value);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// lifecycle method
|
|
27
|
-
formStateRestoreCallback(state: string) {
|
|
28
|
-
let input = this.#wc.shadowRoot.querySelector("input");
|
|
29
|
-
if (input) input.value = state;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-us">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset=utf-8>
|
|
5
|
-
<meta name=viewport content="width=device-width, initial-scale=1">
|
|
6
|
-
<script type="importmap">
|
|
7
|
-
{
|
|
8
|
-
"imports": {
|
|
9
|
-
"wctk": "../../dist/mod.js"
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
</script>
|
|
13
|
-
<script src="./mod.js" type=module></script>
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
<main>
|
|
17
|
-
<!-- webcomponent -->
|
|
18
|
-
<stopwatch-wc>
|
|
19
|
-
<template shadowrootmode="closed">
|
|
20
|
-
<!-- Shadow DOM content -->
|
|
21
|
-
<span>117.00</span>
|
|
22
|
-
</template>
|
|
23
|
-
</stopwatch-wc>
|
|
24
|
-
|
|
25
|
-
<section>
|
|
26
|
-
<button start>|></button>
|
|
27
|
-
<button pause>| |</button>
|
|
28
|
-
<button stop>[ ]</button>
|
|
29
|
-
</section>
|
|
30
|
-
</main>
|
|
31
|
-
</body>
|
|
32
|
-
</html>
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Stopwatch } from "./stopwatch.js";
|
|
2
|
-
customElements.define("stopwatch-wc", Stopwatch);
|
|
3
|
-
const stopwatch = document.querySelector("stopwatch-wc");
|
|
4
|
-
document.addEventListener("click", function (e) {
|
|
5
|
-
if (!(stopwatch && e.target instanceof HTMLButtonElement))
|
|
6
|
-
return;
|
|
7
|
-
if (e.target.hasAttribute("start"))
|
|
8
|
-
stopwatch.start();
|
|
9
|
-
if (e.target.hasAttribute("pause"))
|
|
10
|
-
stopwatch.pause();
|
|
11
|
-
if (e.target.hasAttribute("stop"))
|
|
12
|
-
stopwatch.stop();
|
|
13
|
-
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Stopwatch } from "./stopwatch.js";
|
|
2
|
-
|
|
3
|
-
customElements.define("stopwatch-wc", Stopwatch);
|
|
4
|
-
|
|
5
|
-
const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
|
|
6
|
-
|
|
7
|
-
document.addEventListener("click", function (e: PointerEvent) {
|
|
8
|
-
if (!(stopwatch && e.target instanceof HTMLButtonElement)) return;
|
|
9
|
-
|
|
10
|
-
if (e.target.hasAttribute("start")) stopwatch.start();
|
|
11
|
-
if (e.target.hasAttribute("pause")) stopwatch.pause();
|
|
12
|
-
if (e.target.hasAttribute("stop")) stopwatch.stop();
|
|
13
|
-
});
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { Wc, Microtask } from "wctk";
|
|
2
|
-
export class Stopwatch extends HTMLElement {
|
|
3
|
-
#wc = new Wc({ host: this });
|
|
4
|
-
#rc = new Microtask(this.#render.bind(this));
|
|
5
|
-
#state = getStateFromShadowDOM(this.#wc.shadowRoot);
|
|
6
|
-
#render() {
|
|
7
|
-
let { el } = this.#state;
|
|
8
|
-
if (el)
|
|
9
|
-
el.textContent = this.#state.count.toFixed(2);
|
|
10
|
-
}
|
|
11
|
-
#update = this.#undboundUpdate.bind(this);
|
|
12
|
-
#undboundUpdate(now) {
|
|
13
|
-
this.#state.count += (now - this.#state.prevTimestamp) * 0.001;
|
|
14
|
-
this.#state.prevTimestamp = now;
|
|
15
|
-
this.#state.receipt = window.requestAnimationFrame(this.#update);
|
|
16
|
-
this.#rc.queue();
|
|
17
|
-
}
|
|
18
|
-
start() {
|
|
19
|
-
if (this.#state.receipt)
|
|
20
|
-
return;
|
|
21
|
-
this.#state.prevTimestamp = performance.now();
|
|
22
|
-
this.#state.receipt = window.requestAnimationFrame(this.#update);
|
|
23
|
-
}
|
|
24
|
-
pause() {
|
|
25
|
-
let { receipt } = this.#state;
|
|
26
|
-
if (receipt)
|
|
27
|
-
window.cancelAnimationFrame(receipt);
|
|
28
|
-
this.#state.receipt = undefined;
|
|
29
|
-
}
|
|
30
|
-
stop() {
|
|
31
|
-
this.pause();
|
|
32
|
-
this.#state.count = 0;
|
|
33
|
-
this.#rc.queue();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
function getStateFromShadowDOM(shadowRoot) {
|
|
37
|
-
let el = shadowRoot.querySelector("span");
|
|
38
|
-
let count = parseInt(el?.textContent ?? "0");
|
|
39
|
-
if (Number.isNaN(count))
|
|
40
|
-
count = 0;
|
|
41
|
-
let prevTimestamp = performance.now();
|
|
42
|
-
return {
|
|
43
|
-
count,
|
|
44
|
-
el,
|
|
45
|
-
prevTimestamp,
|
|
46
|
-
receipt: undefined,
|
|
47
|
-
};
|
|
48
|
-
}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Custom Element with performant and "asynchronous" renders
|
|
3
|
-
on the microtask queue.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// This example uses window.requestAnimationFrame.
|
|
7
|
-
// Multiple stopwatches means multiple animation frame requests.
|
|
8
|
-
// This is not terribly performant but it's a quick way to retrieve
|
|
9
|
-
// accurate timestamp data for a stopwatch.
|
|
10
|
-
|
|
11
|
-
import { Wc, Microtask } from "wctk";
|
|
12
|
-
|
|
13
|
-
interface State {
|
|
14
|
-
count: number;
|
|
15
|
-
el: HTMLSpanElement | null;
|
|
16
|
-
prevTimestamp: DOMHighResTimeStamp;
|
|
17
|
-
receipt: number | void;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export class Stopwatch extends HTMLElement {
|
|
21
|
-
#wc = new Wc({ host: this });
|
|
22
|
-
#rc = new Microtask(this.#render.bind(this));
|
|
23
|
-
#state: State = getStateFromShadowDOM(this.#wc.shadowRoot);
|
|
24
|
-
|
|
25
|
-
#render() {
|
|
26
|
-
let { el } = this.#state;
|
|
27
|
-
if (el) el.textContent = this.#state.count.toFixed(2);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#update = this.#undboundUpdate.bind(this);
|
|
31
|
-
#undboundUpdate(now: DOMHighResTimeStamp) {
|
|
32
|
-
this.#state.count += (now - this.#state.prevTimestamp) * 0.001;
|
|
33
|
-
this.#state.prevTimestamp = now;
|
|
34
|
-
this.#state.receipt = window.requestAnimationFrame(this.#update);
|
|
35
|
-
this.#rc.queue();
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
start() {
|
|
39
|
-
if (this.#state.receipt) return;
|
|
40
|
-
|
|
41
|
-
this.#state.prevTimestamp = performance.now();
|
|
42
|
-
this.#state.receipt = window.requestAnimationFrame(this.#update);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
pause() {
|
|
46
|
-
let { receipt } = this.#state;
|
|
47
|
-
if (receipt) window.cancelAnimationFrame(receipt);
|
|
48
|
-
this.#state.receipt = undefined;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
stop() {
|
|
52
|
-
this.pause();
|
|
53
|
-
this.#state.count = 0;
|
|
54
|
-
this.#rc.queue();
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function getStateFromShadowDOM(shadowRoot: ShadowRoot): State {
|
|
59
|
-
let el = shadowRoot.querySelector("span");
|
|
60
|
-
let count = parseInt(el?.textContent ?? "0");
|
|
61
|
-
if (Number.isNaN(count)) count = 0;
|
|
62
|
-
let prevTimestamp = performance.now();
|
|
63
|
-
|
|
64
|
-
return {
|
|
65
|
-
count,
|
|
66
|
-
el,
|
|
67
|
-
prevTimestamp,
|
|
68
|
-
receipt: undefined,
|
|
69
|
-
};
|
|
70
|
-
}
|
package/examples/tsconfig.json
DELETED
package/jr.json
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"jackrabbit_url": "http://localhost:4000",
|
|
3
|
-
"run_asynchronously": false,
|
|
4
|
-
"webdrivers": [
|
|
5
|
-
{
|
|
6
|
-
"command": "safaridriver -p 4001",
|
|
7
|
-
"title": "Safari",
|
|
8
|
-
"timeout_ms": 20000,
|
|
9
|
-
"webdriver_url": "http://localhost:4001"
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
"command": "geckodriver -p 4001",
|
|
13
|
-
"title": "Firefox",
|
|
14
|
-
"timeout_ms": 20000,
|
|
15
|
-
"webdriver_url": "http://localhost:4001",
|
|
16
|
-
"capabilities": {
|
|
17
|
-
"alwaysMatch": {
|
|
18
|
-
"moz:firefoxOptions": {
|
|
19
|
-
"args": ["-headless"]
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
]
|
|
25
|
-
}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { findElement, elementClick, elementSendKeys, } from "@w-lfpup/jackrabbit/browser/dist/commands.js";
|
|
2
|
-
import { Events } from "../../dist/mod.js";
|
|
3
|
-
let eventController;
|
|
4
|
-
let eventReceipts = [];
|
|
5
|
-
function setup() {
|
|
6
|
-
eventController = new Events({
|
|
7
|
-
target: document.body,
|
|
8
|
-
connected: true,
|
|
9
|
-
listeners: {
|
|
10
|
-
click: function (e) {
|
|
11
|
-
eventReceipts.push(e);
|
|
12
|
-
},
|
|
13
|
-
input: function (e) {
|
|
14
|
-
eventReceipts.push(e);
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
});
|
|
18
|
-
document.body.setHTMLUnsafe(`
|
|
19
|
-
<input>
|
|
20
|
-
<button>
|
|
21
|
-
`);
|
|
22
|
-
}
|
|
23
|
-
async function testClickEvents() {
|
|
24
|
-
let buttonId = await findElement("button");
|
|
25
|
-
if (!buttonId)
|
|
26
|
-
return "failed to query button";
|
|
27
|
-
await elementClick(buttonId);
|
|
28
|
-
await elementClick(buttonId);
|
|
29
|
-
let clicks = [];
|
|
30
|
-
for (let event of eventReceipts) {
|
|
31
|
-
if ("click" === event.type)
|
|
32
|
-
clicks.push(event);
|
|
33
|
-
}
|
|
34
|
-
if (2 !== clicks.length)
|
|
35
|
-
return `incorrect number of clicks: ${clicks.length}/2`;
|
|
36
|
-
}
|
|
37
|
-
async function testInputEvents() {
|
|
38
|
-
const expectedMessage = "UwU";
|
|
39
|
-
let inputId = await findElement("input");
|
|
40
|
-
if (!inputId)
|
|
41
|
-
return "failed to query input element";
|
|
42
|
-
await elementSendKeys(inputId, expectedMessage);
|
|
43
|
-
let inputs = [];
|
|
44
|
-
for (let event of eventReceipts) {
|
|
45
|
-
if ("input" === event.type)
|
|
46
|
-
inputs.push(event);
|
|
47
|
-
}
|
|
48
|
-
if (3 !== inputs.length)
|
|
49
|
-
return `incorrect number of input events: ${inputs.length}/1`;
|
|
50
|
-
let input = document.body.querySelector("input");
|
|
51
|
-
if (expectedMessage !== input?.value)
|
|
52
|
-
return `expected input: ${expectedMessage}, found: ${input?.value}`;
|
|
53
|
-
}
|
|
54
|
-
function tearDown() {
|
|
55
|
-
eventController.disconnect();
|
|
56
|
-
}
|
|
57
|
-
export const tests = [setup, testClickEvents, testInputEvents, tearDown];
|
|
58
|
-
export const options = {
|
|
59
|
-
title: import.meta.url,
|
|
60
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { Microtask } from "../../dist/mod.js";
|
|
2
|
-
let microtaskController;
|
|
3
|
-
let expectedSleepy = "-_-";
|
|
4
|
-
let expectedHappy = "^_^";
|
|
5
|
-
let span;
|
|
6
|
-
function nextFrame() {
|
|
7
|
-
return new Promise((resolve, reject) => {
|
|
8
|
-
window.queueMicrotask(function () {
|
|
9
|
-
resolve();
|
|
10
|
-
});
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
function updateExpression() {
|
|
14
|
-
if (!span)
|
|
15
|
-
return;
|
|
16
|
-
span.textContent = expectedHappy;
|
|
17
|
-
}
|
|
18
|
-
function setup() {
|
|
19
|
-
microtaskController = new Microtask(updateExpression);
|
|
20
|
-
document.body.setHTMLUnsafe(`
|
|
21
|
-
<span>-_-</span>
|
|
22
|
-
`);
|
|
23
|
-
span = document.querySelector("span");
|
|
24
|
-
}
|
|
25
|
-
async function testTaskCycle() {
|
|
26
|
-
if (expectedSleepy !== span?.textContent)
|
|
27
|
-
return "wrong expression, expected sleepy -_-";
|
|
28
|
-
microtaskController.queue();
|
|
29
|
-
if (expectedSleepy !== span?.textContent)
|
|
30
|
-
return "still wrong expression, still expected sleepy -_-";
|
|
31
|
-
await nextFrame();
|
|
32
|
-
if (expectedHappy !== span?.textContent)
|
|
33
|
-
return "wrong expression after frame, expected happy ^_^";
|
|
34
|
-
}
|
|
35
|
-
export const tests = [setup, testTaskCycle];
|
|
36
|
-
export const options = {
|
|
37
|
-
title: import.meta.url,
|
|
38
|
-
};
|
package/tests/dist/mod.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as EventTests from "./events.tests.js";
|
|
2
|
-
import * as MicrotaskQueueTests from "./microtask.tests.js";
|
|
3
|
-
import * as QuerySelectorTests from "./query_selector.tests.js";
|
|
4
|
-
import * as WcTests from "./wc.tests.js";
|
|
5
|
-
export const testModules = [
|
|
6
|
-
EventTests,
|
|
7
|
-
MicrotaskQueueTests,
|
|
8
|
-
QuerySelectorTests,
|
|
9
|
-
WcTests,
|
|
10
|
-
];
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { QuerySelector } from "../../dist/mod.js";
|
|
2
|
-
let qs;
|
|
3
|
-
function setup() {
|
|
4
|
-
qs = new QuerySelector(document.body);
|
|
5
|
-
document.body.setHTMLUnsafe(`
|
|
6
|
-
<p>
|
|
7
|
-
<span data-first>hello</span>
|
|
8
|
-
<span data-second>hai :3</span>
|
|
9
|
-
</p>
|
|
10
|
-
`);
|
|
11
|
-
}
|
|
12
|
-
function testQuerySelector() {
|
|
13
|
-
let p = qs.querySelector("p");
|
|
14
|
-
let span = qs.querySelector("[data-second]");
|
|
15
|
-
if (!p)
|
|
16
|
-
return "failed to query p";
|
|
17
|
-
if (!span)
|
|
18
|
-
return "failed to query span";
|
|
19
|
-
}
|
|
20
|
-
function testQuerySelectorAll() {
|
|
21
|
-
let peas = qs.querySelectorAll("p");
|
|
22
|
-
let spans = qs.querySelectorAll("span");
|
|
23
|
-
if (!peas.length)
|
|
24
|
-
return "failed to query peas";
|
|
25
|
-
if (!spans.length)
|
|
26
|
-
return "failed to query spans";
|
|
27
|
-
if (1 !== peas.length)
|
|
28
|
-
return `failed to query ${peas.length}/1 peas`;
|
|
29
|
-
if (2 !== spans.length)
|
|
30
|
-
return `failed to query ${spans.length}/2 spans`;
|
|
31
|
-
}
|
|
32
|
-
function testDeleteAll() {
|
|
33
|
-
qs.deleteAll();
|
|
34
|
-
}
|
|
35
|
-
export const tests = [
|
|
36
|
-
setup,
|
|
37
|
-
testQuerySelector,
|
|
38
|
-
testQuerySelectorAll,
|
|
39
|
-
testDeleteAll,
|
|
40
|
-
];
|
|
41
|
-
export const options = {
|
|
42
|
-
title: import.meta.url,
|
|
43
|
-
};
|
package/tests/dist/wc.tests.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { Wc } from "../../dist/mod.js";
|
|
2
|
-
class WcDeclarativeElement extends HTMLElement {
|
|
3
|
-
#wc = new Wc({ host: this });
|
|
4
|
-
get delcarative() {
|
|
5
|
-
return this.#wc.declarative;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
window.customElements.define("declarative-element", WcDeclarativeElement);
|
|
9
|
-
let testEl;
|
|
10
|
-
let declarativeEl;
|
|
11
|
-
function setup() {
|
|
12
|
-
document.body.setHTMLUnsafe(`
|
|
13
|
-
<declarative-element></declarative-element>
|
|
14
|
-
<declarative-element data-declarative>
|
|
15
|
-
<template shadowrootmode="open">
|
|
16
|
-
<p>howdy!</p>
|
|
17
|
-
</template>
|
|
18
|
-
</declarative-element>
|
|
19
|
-
`);
|
|
20
|
-
[testEl, declarativeEl] = document.querySelectorAll("declarative-element");
|
|
21
|
-
}
|
|
22
|
-
function testDeclarativeShadowDomDoesNotExist() {
|
|
23
|
-
if (!testEl)
|
|
24
|
-
return "failed to query declarative-element";
|
|
25
|
-
if (testEl.delcarative)
|
|
26
|
-
return "element incorrectly labelled as declarative";
|
|
27
|
-
}
|
|
28
|
-
function testDeclarativeShadowDomExists() {
|
|
29
|
-
if (!declarativeEl)
|
|
30
|
-
return "failed to query declarative-element with declarative shadow dom";
|
|
31
|
-
if (!declarativeEl.delcarative)
|
|
32
|
-
return "element incorrectly labelled as not declarative";
|
|
33
|
-
}
|
|
34
|
-
export const tests = [
|
|
35
|
-
setup,
|
|
36
|
-
testDeclarativeShadowDomExists,
|
|
37
|
-
testDeclarativeShadowDomDoesNotExist,
|
|
38
|
-
];
|
|
39
|
-
export const options = {
|
|
40
|
-
title: import.meta.url,
|
|
41
|
-
};
|