@w-lfpup/wctk 0.1.1 → 0.2.1

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.
Files changed (56) hide show
  1. package/.github/workflows/browsers.macos.json +51 -0
  2. package/.github/workflows/browsers.ubuntu.json +37 -0
  3. package/.github/workflows/builds.yml +13 -4
  4. package/README.md +35 -10
  5. package/dist/events.d.ts +2 -3
  6. package/dist/events.js +8 -22
  7. package/dist/microtask.d.ts +4 -6
  8. package/dist/microtask.js +3 -8
  9. package/dist/mod.d.ts +0 -2
  10. package/dist/mod.js +0 -2
  11. package/dist/query_selector.d.ts +2 -5
  12. package/dist/query_selector.js +16 -14
  13. package/dist/subscription.d.ts +0 -1
  14. package/dist/subscription.js +6 -14
  15. package/dist/wc.d.ts +4 -4
  16. package/dist/wc.js +5 -7
  17. package/docs/events.md +11 -14
  18. package/docs/microtask.md +2 -5
  19. package/docs/query_selector.md +1 -4
  20. package/docs/wc.md +1 -1
  21. package/examples/counter/mod.js +13 -17
  22. package/examples/counter/mod.ts +15 -17
  23. package/examples/form_associated/mod.js +1 -3
  24. package/examples/form_associated/mod.ts +0 -1
  25. package/examples/form_associated/text_input.js +2 -7
  26. package/examples/form_associated/text_input.ts +2 -3
  27. package/examples/stopwatch/index.html +6 -3
  28. package/examples/stopwatch/mod.js +8 -18
  29. package/examples/stopwatch/mod.ts +6 -20
  30. package/examples/stopwatch/stopwatch.js +38 -24
  31. package/examples/stopwatch/stopwatch.ts +46 -25
  32. package/examples/tsconfig.json +1 -0
  33. package/jr.json +25 -0
  34. package/package.json +9 -5
  35. package/src/events.ts +10 -30
  36. package/src/microtask.ts +6 -17
  37. package/src/mod.ts +0 -2
  38. package/src/query_selector.ts +18 -27
  39. package/src/wc.ts +11 -11
  40. package/tests/dist/events.tests.js +60 -0
  41. package/tests/dist/microtask.tests.js +38 -0
  42. package/tests/dist/mod.js +10 -0
  43. package/tests/dist/query_selector.tests.js +43 -0
  44. package/tests/dist/wc.tests.js +41 -0
  45. package/tests/src/events.tests.ts +73 -0
  46. package/tests/src/microtask.tests.ts +54 -0
  47. package/tests/src/mod.ts +11 -0
  48. package/tests/src/query_selector.tests.ts +46 -0
  49. package/tests/src/wc.tests.ts +52 -0
  50. package/tests/tsconfig.json +8 -0
  51. package/dist/bind.d.ts +0 -7
  52. package/dist/bind.js +0 -14
  53. package/docs/bind.md +0 -26
  54. package/docs/subscription.md +0 -85
  55. package/src/bind.ts +0 -22
  56. package/src/subscription.ts +0 -47
package/examples/counter/mod.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  import { Wc, Events } from "wctk";
6
6
 
7
7
  interface State {
8
- el: HTMLSpanElement;
8
+ el: HTMLSpanElement | undefined;
9
9
  count: number;
10
10
  }
11
11
 
@@ -13,41 +13,39 @@ class Counter extends HTMLElement {
13
13
  #wc = new Wc({ host: this });
14
14
 
15
15
  #ev = new Events({
16
- host: this,
17
16
  target: this.#wc.shadowRoot,
18
17
  connected: true,
19
- callbacks: {
20
- click: this.#onClick,
18
+ listeners: {
19
+ click: this.#clickHandler.bind(this),
21
20
  },
22
21
  });
23
22
 
24
- #state?: State = getStateFromDOM(this.#wc.shadowRoot);
25
-
26
- #onClick(e: PointerEvent) {
27
- if (!this.#state) return;
23
+ #state: State = getStateFromDOM(this.#wc.shadowRoot);
28
24
 
25
+ #clickHandler(e: PointerEvent) {
29
26
  let increment = getIncrement(e);
30
27
  if (increment) {
31
28
  this.#state.count += increment;
32
- this.#state.el.textContent = this.#state.count.toString();
29
+ let el = this.#state.el;
30
+ if (el) el.textContent = this.#state.count.toString();
33
31
  }
34
32
  }
35
33
  }
36
34
 
37
- function getStateFromDOM(shadowRoot: ShadowRoot): State | undefined {
35
+ function getStateFromDOM(shadowRoot: ShadowRoot): State {
38
36
  let slot = shadowRoot.querySelector("slot");
37
+ let el: HTMLSpanElement | undefined;
39
38
  if (slot)
40
- for (let el of slot.assignedNodes()) {
41
- if (el instanceof HTMLSpanElement) {
42
- return { el, count: parseInt(el.textContent ?? "0") };
43
- }
39
+ for (let slotted of slot.assignedNodes()) {
40
+ if (slotted instanceof HTMLSpanElement) el = slotted;
44
41
  }
42
+
43
+ return { el, count: parseInt(el?.textContent ?? "0") };
45
44
  }
46
45
 
47
46
  function getIncrement(e: Event) {
48
- let { target } = e;
49
- if (target instanceof HTMLButtonElement) {
50
- return target.hasAttribute("increase") ? 1 : -1;
47
+ if (e.target instanceof HTMLButtonElement) {
48
+ return e.target.hasAttribute("increase") ? 1 : -1;
51
49
  }
52
50
  }
53
51
 
package/examples/form_associated/mod.js CHANGED
@@ -7,7 +7,5 @@ document.addEventListener("submit", function (e) {
7
7
  e.preventDefault();
8
8
  let formdata = new FormData(e.target);
9
9
  if (results)
10
- results.textContent = JSON.stringify(
11
- // @ts-expect-error
12
- Object.fromEntries(formdata), undefined, " ");
10
+ results.textContent = JSON.stringify(Object.fromEntries(formdata), undefined, " ");
13
11
  });
package/examples/form_associated/mod.ts CHANGED
@@ -13,7 +13,6 @@ document.addEventListener("submit", function (e: SubmitEvent) {
13
13
 
14
14
  if (results)
15
15
  results.textContent = JSON.stringify(
16
- // @ts-expect-error
17
16
  Object.fromEntries(formdata),
18
17
  undefined,
19
18
  " ",
package/examples/form_associated/text_input.js CHANGED
@@ -1,16 +1,12 @@
1
- /*
2
- Form associated custom element.
3
- */
4
1
  import { Wc, Events } from "wctk";
5
2
  export class TextInput extends HTMLElement {
6
3
  static formAssociated = true;
7
4
  #wc = new Wc({ host: this });
8
5
  #ev = new Events({
9
- host: this,
10
6
  target: this.#wc.shadowRoot,
11
7
  connected: true,
12
- callbacks: {
13
- change: this.#changeHandler,
8
+ listeners: {
9
+ change: this.#changeHandler.bind(this),
14
10
  },
15
11
  });
16
12
  #changeHandler(event) {
@@ -18,7 +14,6 @@ export class TextInput extends HTMLElement {
18
14
  if (target instanceof HTMLInputElement)
19
15
  this.#wc.setFormValue(target.value);
20
16
  }
21
- // lifecycle method
22
17
  formStateRestoreCallback(state) {
23
18
  let input = this.#wc.shadowRoot.querySelector("input");
24
19
  if (input)
package/examples/form_associated/text_input.ts CHANGED
@@ -9,11 +9,10 @@ export class TextInput extends HTMLElement {
9
9
 
10
10
  #wc = new Wc({ host: this });
11
11
  #ev = new Events({
12
- host: this,
13
12
  target: this.#wc.shadowRoot,
14
13
  connected: true,
15
- callbacks: {
16
- change: this.#changeHandler,
14
+ listeners: {
15
+ change: this.#changeHandler.bind(this),
17
16
  },
18
17
  });
19
18
 
package/examples/stopwatch/index.html CHANGED
@@ -14,9 +14,6 @@
14
14
  </head>
15
15
  <body>
16
16
  <main>
17
- <button start>|></button>
18
- <button>| |</button>
19
-
20
17
  <!-- web component -->
21
18
  <stopwatch-wc>
22
19
  <template shadowrootmode="closed">
@@ -24,6 +21,12 @@
24
21
  <span>117.00</span>
25
22
  </template>
26
23
  </stopwatch-wc>
24
+
25
+ <section>
26
+ <button start>|></button>
27
+ <button pause>| |</button>
28
+ <button stop>[ ]</button>
29
+ </section>
27
30
  </main>
28
31
  </body>
29
32
  </html>
package/examples/stopwatch/mod.js CHANGED
@@ -1,23 +1,13 @@
1
1
  import { Stopwatch } from "./stopwatch.js";
2
2
  customElements.define("stopwatch-wc", Stopwatch);
3
3
  const stopwatch = document.querySelector("stopwatch-wc");
4
- let receipt;
5
- function draw(timestamp) {
6
- if (!stopwatch)
7
- return;
8
- receipt = requestAnimationFrame(draw);
9
- stopwatch.update(timestamp);
10
- }
11
- function start() {
12
- if (!stopwatch)
13
- return;
14
- requestAnimationFrame(draw);
15
- }
16
- function pause() {
17
- cancelAnimationFrame(receipt);
18
- }
19
4
  document.addEventListener("click", function (e) {
20
- if (stopwatch && e.target instanceof HTMLButtonElement) {
21
- e.target.hasAttribute("start") ? start() : pause();
22
- }
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();
23
13
  });
package/examples/stopwatch/mod.ts CHANGED
@@ -1,27 +1,13 @@
1
1
  import { Stopwatch } from "./stopwatch.js";
2
2
 
3
3
  customElements.define("stopwatch-wc", Stopwatch);
4
- const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
5
-
6
- let receipt: number;
7
- function draw(timestamp: DOMHighResTimeStamp) {
8
- if (!stopwatch) return;
9
4
 
10
- receipt = requestAnimationFrame(draw);
11
- stopwatch.update(timestamp);
12
- }
13
-
14
- function start() {
15
- if (!stopwatch) return;
16
- requestAnimationFrame(draw);
17
- }
5
+ const stopwatch = document.querySelector<Stopwatch>("stopwatch-wc");
18
6
 
19
- function pause() {
20
- cancelAnimationFrame(receipt);
21
- }
7
+ document.addEventListener("click", function (e: PointerEvent) {
8
+ if (!(stopwatch && e.target instanceof HTMLButtonElement)) return;
22
9
 
23
- document.addEventListener("click", function (e: Event) {
24
- if (stopwatch && e.target instanceof HTMLButtonElement) {
25
- e.target.hasAttribute("start") ? start() : pause();
26
- }
10
+ if (e.target.hasAttribute("start")) stopwatch.start();
11
+ if (e.target.hasAttribute("pause")) stopwatch.pause();
12
+ if (e.target.hasAttribute("stop")) stopwatch.stop();
27
13
  });
package/examples/stopwatch/stopwatch.js CHANGED
@@ -1,34 +1,48 @@
1
- /*
2
- Custom Element with performant and "asynchronous" renders
3
- on the microtask queue.
4
- */
5
1
  import { Wc, Microtask } from "wctk";
6
- class Stopwatch extends HTMLElement {
2
+ export class Stopwatch extends HTMLElement {
7
3
  #wc = new Wc({ host: this });
8
- #rc = new Microtask({ host: this, callback: this.#render });
4
+ #rc = new Microtask(this.#render.bind(this));
9
5
  #state = getStateFromShadowDOM(this.#wc.shadowRoot);
10
- update(timestamp) {
11
- if (!this.#state || timestamp < this.#state.prevTimestamp)
12
- return;
13
- this.#state.count += (timestamp - this.#state.prevTimestamp) * 0.001;
14
- this.#state.prevTimestamp = timestamp;
15
- // push render to microtask queue
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
16
  this.#rc.queue();
17
17
  }
18
- #render() {
19
- if (this.#state)
20
- this.#state.el.textContent = this.#state.count.toFixed(2);
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();
21
34
  }
22
35
  }
23
36
  function getStateFromShadowDOM(shadowRoot) {
24
37
  let el = shadowRoot.querySelector("span");
25
- if (el instanceof HTMLSpanElement) {
26
- return {
27
- el,
28
- count: parseInt(el.textContent ?? "0"),
29
- receipt: 0,
30
- prevTimestamp: performance.now(),
31
- };
32
- }
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
+ };
33
48
  }
34
- export { Stopwatch };
package/examples/stopwatch/stopwatch.ts CHANGED
@@ -3,47 +3,68 @@
3
3
  on the microtask queue.
4
4
  */
5
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 get
9
+ // accurate timestamp data for a stopwatch.
10
+
6
11
  import { Wc, Microtask } from "wctk";
7
12
 
8
13
  interface State {
9
- receipt: number | void;
10
14
  count: number;
15
+ el: HTMLSpanElement | null;
11
16
  prevTimestamp: DOMHighResTimeStamp;
12
- el: HTMLSpanElement;
17
+ receipt: number | void;
13
18
  }
14
19
 
15
- class Stopwatch extends HTMLElement {
20
+ export class Stopwatch extends HTMLElement {
16
21
  #wc = new Wc({ host: this });
17
- #rc = new Microtask({ host: this, callback: this.#render });
22
+ #rc = new Microtask(this.#render.bind(this));
23
+ #state: State = getStateFromShadowDOM(this.#wc.shadowRoot);
18
24
 
19
- #state?: State = getStateFromShadowDOM(this.#wc.shadowRoot);
25
+ #render() {
26
+ let { el } = this.#state;
27
+ if (el) el.textContent = this.#state.count.toFixed(2);
28
+ }
20
29
 
21
- update(timestamp: DOMHighResTimeStamp) {
22
- if (!this.#state || timestamp < this.#state.prevTimestamp) return;
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
+ }
23
37
 
24
- this.#state.count += (timestamp - this.#state.prevTimestamp) * 0.001;
25
- this.#state.prevTimestamp = timestamp;
38
+ start() {
39
+ if (this.#state.receipt) return;
26
40
 
27
- // push render to microtask queue
28
- this.#rc.queue();
41
+ this.#state.prevTimestamp = performance.now();
42
+ this.#state.receipt = window.requestAnimationFrame(this.#update);
29
43
  }
30
44
 
31
- #render() {
32
- if (this.#state)
33
- this.#state.el.textContent = this.#state.count.toFixed(2);
45
+ pause() {
46
+ let { receipt } = this.#state;
47
+ if (receipt) window.cancelAnimationFrame(receipt);
48
+ this.#state.receipt = undefined;
34
49
  }
35
- }
36
50
 
37
- function getStateFromShadowDOM(shadowRoot: ShadowRoot): State | undefined {
38
- let el = shadowRoot.querySelector("span");
39
- if (el instanceof HTMLSpanElement) {
40
- return {
41
- el,
42
- count: parseInt(el.textContent ?? "0"),
43
- receipt: 0,
44
- prevTimestamp: performance.now(),
45
- };
51
+ stop() {
52
+ this.pause();
53
+ this.#state.count = 0;
54
+ this.#rc.queue();
46
55
  }
47
56
  }
48
57
 
49
- export { Stopwatch };
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 CHANGED
@@ -2,6 +2,7 @@
2
2
  "extends": "../tsconfig.json",
3
3
  "compilerOptions": {
4
4
  "declaration": false,
5
+ "removeComments": true,
5
6
  "paths": {
6
7
  "wctk": ["../dist/mod.d.ts"],
7
8
  "wctk/*": ["../dist/"]
package/jr.json ADDED
@@ -0,0 +1,25 @@
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
+ }
package/package.json CHANGED
@@ -2,18 +2,22 @@
2
2
  "name": "@w-lfpup/wctk",
3
3
  "type": "module",
4
4
  "main": "dist/mod.js",
5
- "description": "A bare-metal web component toolkit",
5
+ "description": "A bare-metal toolkit for web components",
6
6
  "license": "BSD-3-Clause",
7
- "version": "0.1.1",
7
+ "version": "0.2.1",
8
8
  "scripts": {
9
9
  "prepare": "npm run build",
10
- "build": "npx tsc --project ./src",
10
+ "build": "npm run build:src && npm run build:tests && npm run build:examples",
11
+ "build:src": "npx tsc --project ./src",
12
+ "build:tests": "npx tsc --project ./tests",
11
13
  "build:examples": "npx tsc --project ./examples",
14
+ "test": "npx jackrabbit_webdriver jr.json tests/dist/mod.js",
12
15
  "format": "prettier --write ./"
13
16
  },
14
17
  "devDependencies": {
15
- "prettier": "^3.3.0",
16
- "typescript": "^5.4.5"
18
+ "@w-lfpup/jackrabbit": "^0.3.2",
19
+ "prettier": "^3.8.3",
20
+ "typescript": "^6.0.2"
17
21
  },
18
22
  "repository": {
19
23
  "type": "git",
package/src/events.ts CHANGED
@@ -24,10 +24,9 @@ interface EventElementInterface {
24
24
  }
25
25
 
26
26
  export interface EventParamsInterface {
27
- callbacks: EventMap;
27
+ listeners: EventMap;
28
28
  connected?: boolean;
29
- host: EventElementInterface;
30
- target?: EventElementInterface;
29
+ target: EventElementInterface;
31
30
  }
32
31
 
33
32
  export interface EventsInterface {
@@ -37,14 +36,14 @@ export interface EventsInterface {
37
36
 
38
37
  export class Events implements EventsInterface {
39
38
  #connected: boolean = false;
40
- #callbacks: Callbacks = [];
39
+ #listeners: Callbacks = [];
41
40
  #target: EventElementInterface;
42
41
 
43
42
  constructor(params: EventParamsInterface) {
44
- const { host, target, callbacks, connected } = params;
43
+ const { target, listeners, connected } = params;
45
44
 
46
- this.#target = target ?? host;
47
- this.#callbacks = getBoundCallbacks(host, callbacks);
45
+ this.#target = target;
46
+ this.#listeners = Object.entries(listeners) as Callbacks;
48
47
 
49
48
  if (connected) this.connect();
50
49
  }
@@ -53,8 +52,8 @@ export class Events implements EventsInterface {
53
52
  if (this.#connected) return;
54
53
  this.#connected = true;
55
54
 
56
- for (let [name, callback] of this.#callbacks) {
57
- this.#target.addEventListener(name, callback);
55
+ for (let [name, listener] of this.#listeners) {
56
+ this.#target.addEventListener(name, listener);
58
57
  }
59
58
  }
60
59
 
@@ -62,27 +61,8 @@ export class Events implements EventsInterface {
62
61
  if (!this.#connected) return;
63
62
  this.#connected = false;
64
63
 
65
- for (let [name, callback] of this.#callbacks) {
66
- this.#target.removeEventListener(name, callback);
64
+ for (let [name, listener] of this.#listeners) {
65
+ this.#target.removeEventListener(name, listener);
67
66
  }
68
67
  }
69
68
  }
70
-
71
- function getBoundCallbacks(host: Object, callbacks: EventMap): Callbacks {
72
- let boundCallbacks: Callbacks = [];
73
- for (let [name, callback] of Object.entries(callbacks)) {
74
- if (
75
- callback instanceof Function &&
76
- !callback.hasOwnProperty("prototype")
77
- ) {
78
- callback = callback.bind(host);
79
- }
80
-
81
- boundCallbacks.push([
82
- name,
83
- callback as EventListenerOrEventListenerObject,
84
- ]);
85
- }
86
-
87
- return boundCallbacks;
88
- }
package/src/microtask.ts CHANGED
@@ -1,30 +1,19 @@
1
- export interface MicrotaskParamsInterface {
2
- host: Object;
3
- callback: Function;
4
- }
5
-
6
1
  export interface MicrotaskInterface {
7
2
  queue(): void;
8
3
  }
9
4
 
5
+ type Callback = () => void;
6
+
10
7
  export class Microtask implements MicrotaskInterface {
11
8
  #queued = false;
12
- #callback: Function;
13
-
14
- constructor(params: MicrotaskParamsInterface) {
15
- let { host, callback } = params;
9
+ #callback: Callback;
10
+ queue = this.#queue.bind(this);
16
11
 
17
- this.queue = this.queue.bind(this);
12
+ constructor(callback: Callback) {
18
13
  this.#callback = callback;
19
- if (
20
- callback instanceof Function &&
21
- !callback.hasOwnProperty("prototype")
22
- ) {
23
- this.#callback = callback.bind(host);
24
- }
25
14
  }
26
15
 
27
- queue() {
16
+ #queue() {
28
17
  if (this.#queued) return;
29
18
  this.#queued = true;
30
19
 
package/src/mod.ts CHANGED
@@ -1,6 +1,4 @@
1
- export * from "./bind.js";
2
1
  export * from "./events.js";
3
2
  export * from "./microtask.js";
4
- export * from "./subscription.js";
5
3
  export * from "./query_selector.js";
6
4
  export * from "./wc.js";
package/src/query_selector.ts CHANGED
@@ -1,46 +1,37 @@
1
- export interface QuerySelectorParamsInterface {
2
- parent: ParentNode;
3
- }
4
-
5
1
  export interface QuerySelectorInterface {
6
2
  querySelector(name: string): Element | undefined;
7
- querySelectorAll(name: string): Element[] | undefined;
3
+ querySelectorAll(name: string): Element[];
8
4
  deleteAll(): void;
9
5
  }
10
6
 
11
7
  export class QuerySelector implements QuerySelectorInterface {
12
- #queries: Map<string, Element[]> = new Map();
13
- #params: QuerySelectorParamsInterface;
8
+ #queries: Map<string, Element | undefined> = new Map();
9
+ #queryAlls: Map<string, Element[]> = new Map();
10
+ #parentNode: ParentNode;
14
11
 
15
- constructor(params: QuerySelectorParamsInterface) {
16
- this.#params = params;
12
+ constructor(parentNode: ParentNode) {
13
+ this.#parentNode = parentNode;
17
14
  }
18
15
 
19
16
  querySelector(selector: string): Element | undefined {
20
- return getQuery(this.#params, this.#queries, selector)[0];
17
+ if (this.#queries.has(selector)) return this.#queries.get(selector);
18
+
19
+ let query = this.#parentNode.querySelector(selector) ?? undefined;
20
+ this.#queries.set(selector, query);
21
+ return query;
21
22
  }
22
23
 
23
24
  querySelectorAll(selector: string): Element[] {
24
- return getQuery(this.#params, this.#queries, selector);
25
+ let results = this.#queryAlls.get(selector);
26
+ if (results) return results;
27
+
28
+ let query = Array.from(this.#parentNode.querySelectorAll(selector));
29
+ this.#queryAlls.set(selector, query);
30
+ return query;
25
31
  }
26
32
 
27
33
  deleteAll() {
28
34
  this.#queries = new Map();
35
+ this.#queryAlls = new Map();
29
36
  }
30
37
  }
31
-
32
- function getQuery(
33
- params: QuerySelectorParamsInterface,
34
- queries: Map<string, Element[]>,
35
- selector: string,
36
- ): Element[] {
37
- const { parent } = params;
38
-
39
- let results = queries.get(selector);
40
- if (!results) {
41
- results = Array.from(parent.querySelectorAll(selector));
42
- queries.set(selector, results);
43
- }
44
-
45
- return results;
46
- }