p-elements-core 1.2.32-rc2 → 1.2.32-rc4

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 (78) hide show
  1. package/.editorconfig +17 -17
  2. package/.gitlab-ci.yml +18 -18
  3. package/CHANGELOG.md +201 -0
  4. package/demo/sample.js +1 -1
  5. package/demo/screen.css +16 -16
  6. package/dist/p-elements-core-modern.js +1 -1
  7. package/dist/p-elements-core.js +1 -1
  8. package/docs/package-lock.json +6897 -6897
  9. package/docs/package.json +27 -27
  10. package/docs/src/404.md +8 -8
  11. package/docs/src/_data/demos/hello-world/hello-world.tsx +35 -35
  12. package/docs/src/_data/demos/hello-world/index.html +10 -10
  13. package/docs/src/_data/demos/hello-world/project.json +7 -7
  14. package/docs/src/_data/demos/timer/demo-timer.tsx +120 -120
  15. package/docs/src/_data/demos/timer/icons.tsx +62 -62
  16. package/docs/src/_data/demos/timer/index.html +12 -12
  17. package/docs/src/_data/demos/timer/project.json +8 -8
  18. package/docs/src/_data/global.js +13 -13
  19. package/docs/src/_data/helpers.js +19 -19
  20. package/docs/src/_includes/layouts/base.njk +30 -30
  21. package/docs/src/_includes/layouts/playground.njk +40 -40
  22. package/docs/src/_includes/partials/app-header.njk +8 -8
  23. package/docs/src/_includes/partials/head.njk +14 -14
  24. package/docs/src/_includes/partials/nav.njk +19 -19
  25. package/docs/src/_includes/partials/top-nav.njk +51 -51
  26. package/docs/src/documentation/custom-element.md +221 -221
  27. package/docs/src/documentation/decorators/bind.md +71 -71
  28. package/docs/src/documentation/decorators/custom-element-config.md +63 -63
  29. package/docs/src/documentation/decorators/property.md +83 -83
  30. package/docs/src/documentation/decorators/query.md +66 -66
  31. package/docs/src/documentation/decorators/render-property-on-set.md +60 -60
  32. package/docs/src/documentation/decorators.md +9 -9
  33. package/docs/src/documentation/reactive-properties.md +53 -53
  34. package/docs/src/index.d.ts +25 -25
  35. package/docs/src/index.md +3 -3
  36. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css +78 -78
  37. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx +166 -166
  38. package/docs/src/scripts/components/app-playground/app-playground.tsx +189 -189
  39. package/docs/tsconfig.json +22 -22
  40. package/package.json +9 -2
  41. package/readme.md +206 -206
  42. package/src/custom-element-controller.test.ts +226 -0
  43. package/src/custom-element-controller.ts +31 -31
  44. package/src/custom-element.test.ts +906 -0
  45. package/src/custom-element.ts +17 -1
  46. package/src/custom-style-element.ts +4 -1
  47. package/src/decorators/bind.test.ts +163 -0
  48. package/src/decorators/bind.ts +46 -46
  49. package/src/decorators/custom-element-config.ts +17 -17
  50. package/src/decorators/property.test.ts +279 -0
  51. package/src/decorators/property.ts +789 -684
  52. package/src/decorators/query.test.ts +146 -0
  53. package/src/decorators/query.ts +12 -12
  54. package/src/decorators/render-property-on-set.ts +3 -3
  55. package/src/helpers/css.test.ts +150 -0
  56. package/src/helpers/css.ts +71 -71
  57. package/src/maquette/cache.test.ts +150 -0
  58. package/src/maquette/cache.ts +35 -35
  59. package/src/maquette/dom.test.ts +263 -0
  60. package/src/maquette/dom.ts +115 -115
  61. package/src/maquette/h.test.ts +165 -0
  62. package/src/maquette/h.ts +100 -100
  63. package/src/maquette/index.ts +12 -12
  64. package/src/maquette/interfaces.ts +536 -536
  65. package/src/maquette/jsx.ts +61 -61
  66. package/src/maquette/mapping.test.ts +294 -0
  67. package/src/maquette/mapping.ts +56 -56
  68. package/src/maquette/maquette.test.ts +493 -0
  69. package/src/maquette/projection.test.ts +366 -0
  70. package/src/maquette/projection.ts +666 -666
  71. package/src/maquette/projector.test.ts +351 -0
  72. package/src/maquette/projector.ts +200 -200
  73. package/src/sample/mixin/highlight.tsx +33 -33
  74. package/src/test-setup.ts +85 -0
  75. package/src/test-utils.ts +223 -0
  76. package/tsconfig.json +1 -0
  77. package/vitest.config.ts +41 -0
  78. package/webpack.config.js +1 -1
package/docs/package.json CHANGED
@@ -1,27 +1,27 @@
1
- {
2
- "name": "docs",
3
- "version": "1.0.0",
4
- "main": "index.js",
5
- "scripts": {
6
- "test": "echo \"Error: no test specified\" && exit 1",
7
- "dev": "eleventy --serve",
8
- "build": "eleventy"
9
- },
10
- "keywords": [],
11
- "author": "",
12
- "license": "ISC",
13
- "description": "",
14
- "type": "module",
15
- "dependencies": {
16
- "@11ty/eleventy": "^3.0.0",
17
- "@11ty/eleventy-navigation": "^1.0.4",
18
- "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
19
- "cssnano": "^7.0.6",
20
- "esbuild": "^0.25.3",
21
- "p-elements-core": "^1.2.27",
22
- "playground-elements": "^0.20.0",
23
- "postcss": "^8.5.3",
24
- "postcss-import": "^16.1.0",
25
- "postcss-preset-env": "^10.1.6"
26
- }
27
- }
1
+ {
2
+ "name": "docs",
3
+ "version": "1.0.0",
4
+ "main": "index.js",
5
+ "scripts": {
6
+ "test": "echo \"Error: no test specified\" && exit 1",
7
+ "dev": "eleventy --serve",
8
+ "build": "eleventy"
9
+ },
10
+ "keywords": [],
11
+ "author": "",
12
+ "license": "ISC",
13
+ "description": "",
14
+ "type": "module",
15
+ "dependencies": {
16
+ "@11ty/eleventy": "^3.0.0",
17
+ "@11ty/eleventy-navigation": "^1.0.4",
18
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
19
+ "cssnano": "^7.0.6",
20
+ "esbuild": "^0.25.3",
21
+ "p-elements-core": "^1.2.27",
22
+ "playground-elements": "^0.20.0",
23
+ "postcss": "^8.5.3",
24
+ "postcss-import": "^16.1.0",
25
+ "postcss-preset-env": "^10.1.6"
26
+ }
27
+ }
package/docs/src/404.md CHANGED
@@ -1,8 +1,8 @@
1
- ---
2
- title: "Page Not Found"
3
- layout: "base.njk"
4
- description: "Requested page does not exist."
5
- permalink: "404.html"
6
- ---
7
-
8
- # Page Not Found
1
+ ---
2
+ title: "Page Not Found"
3
+ layout: "base.njk"
4
+ description: "Requested page does not exist."
5
+ permalink: "404.html"
6
+ ---
7
+
8
+ # Page Not Found
package/docs/src/_data/demos/hello-world/hello-world.tsx CHANGED
@@ -1,35 +1,35 @@
1
- /* playground-hide */
2
-
3
- import "p-elements-core";
4
-
5
- // Can not configure tsxFactory in the playground,
6
- // so we assign Maquette.h to React.createElement
7
- const React = {
8
- createElement: Maquette.h,
9
- };
10
-
11
- /* playground-hide-end */
12
-
13
- @CustomElementConfig({
14
- tagName: "p-hello",
15
- })
16
- export class HelloWorldElement extends CustomElement {
17
- static style = `
18
- .hello-world{
19
- color: red;
20
- }`;
21
-
22
- onNameClick = () => {
23
- const newName = prompt("Enter a new name:", this.name);
24
- if (newName) {
25
- this.name = newName;
26
- }
27
- }
28
-
29
- @Property({ type: "string", attribute: "name", reflect: true })
30
- name: string = "World";
31
-
32
- render= () : VNode => {
33
- return <div class="hello-world">Hello <strong onclick={this.onNameClick}>{this.name}</strong></div>;
34
- }
35
- }
1
+ /* playground-hide */
2
+
3
+ import "p-elements-core";
4
+
5
+ // Can not configure tsxFactory in the playground,
6
+ // so we assign Maquette.h to React.createElement
7
+ const React = {
8
+ createElement: Maquette.h,
9
+ };
10
+
11
+ /* playground-hide-end */
12
+
13
+ @CustomElementConfig({
14
+ tagName: "p-hello",
15
+ })
16
+ export class HelloWorldElement extends CustomElement {
17
+ static style = `
18
+ .hello-world{
19
+ color: red;
20
+ }`;
21
+
22
+ onNameClick = () => {
23
+ const newName = prompt("Enter a new name:", this.name);
24
+ if (newName) {
25
+ this.name = newName;
26
+ }
27
+ }
28
+
29
+ @Property({ type: "string", attribute: "name", reflect: true })
30
+ name: string = "World";
31
+
32
+ render= () : VNode => {
33
+ return <div class="hello-world">Hello <strong onclick={this.onNameClick}>{this.name}</strong></div>;
34
+ }
35
+ }
package/docs/src/_data/demos/hello-world/index.html CHANGED
@@ -1,10 +1,10 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Hello World</title>
5
- </head>
6
- <body>
7
- <p-hello name="World"></p-hello>
8
- <script type="module" src="./hello-world.js"></script>
9
- </body>
10
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Hello World</title>
5
+ </head>
6
+ <body>
7
+ <p-hello name="World"></p-hello>
8
+ <script type="module" src="./hello-world.js"></script>
9
+ </body>
10
+ </html>
package/docs/src/_data/demos/hello-world/project.json CHANGED
@@ -1,7 +1,7 @@
1
- {
2
- "files": {
3
- "hello-world.tsx": {},
4
- "index.html": {}
5
- },
6
- "previewHeight": "125px"
7
- }
1
+ {
2
+ "files": {
3
+ "hello-world.tsx": {},
4
+ "index.html": {}
5
+ },
6
+ "previewHeight": "125px"
7
+ }
package/docs/src/_data/demos/timer/demo-timer.tsx CHANGED
@@ -1,120 +1,120 @@
1
- import { pause, play, replay } from "./icons.js";
2
-
3
- /* playground-hide */
4
-
5
- import "p-elements-core";
6
-
7
- // Can not configure tsxFactory in the playground,
8
- // so we assign Maquette.h to React.createElement
9
- const React = {
10
- createElement: Maquette.h,
11
- };
12
-
13
- /* playground-hide-end */
14
- /* playground-fold */
15
- function pad(pad: unknown, val: number) {
16
- return pad ? String(val).padStart(2, "0") : val;
17
- }
18
- /* playground-fold-end */
19
-
20
- const css = /* playground-fold */ `
21
- :host {
22
- margin: 1rem;
23
- font-family: monospace;
24
- font-size: 2rem;
25
- display: inline-flex;
26
- flex-direction: column;
27
- align-items: center;
28
- justify-content: center;
29
- }
30
- .timer {
31
- display: flex;
32
- justify-content: center;
33
- align-items: center;
34
- }
35
- .buttons {
36
- user-select: none;
37
- display: flex;
38
- gap: .5rem;
39
- }
40
- button {
41
- line-height: 0;
42
- padding: 0;
43
- }
44
- ` /* playground-fold-end */;
45
-
46
- @CustomElementConfig({
47
- tagName: "demo-timer",
48
- })
49
- export class DemoTimerElement extends CustomElement {
50
- static style = css
51
-
52
- @Property({ type: "number", attribute: "duration" })
53
- duration: number = 0;
54
-
55
- @PropertyRenderOnSet
56
- private end: number = null;
57
-
58
- @PropertyRenderOnSet
59
- private remaining: number = 0;
60
-
61
- render(): VNode {
62
- const { remaining, running } = this;
63
- const min = Math.floor(remaining / 60000);
64
- const sec = pad(min, Math.floor((remaining / 1000) % 60));
65
- const hun = pad(true, Math.floor((remaining % 1000) / 10));
66
-
67
- return (
68
- <div>
69
- <div class="timer">{`${min ? `${min}:${sec}` : `${sec}.${hun}`}`}</div>
70
- <div class="buttons">
71
- {remaining === 0 ? (
72
- ""
73
- ) : running ? (
74
- <button onclick={this.pause} key="pause-button">
75
- {pause("pause-icon")}
76
- </button>
77
- ) : (
78
- <button onclick={this.start} key="play-button">
79
- {play("play-icon")}
80
- </button>
81
- )}
82
- <button onclick={this.reset} key="replay-button">
83
- {replay("replay-icon")}
84
- </button>
85
- </div>
86
- </div>
87
- );
88
- }
89
-
90
- start = () => {
91
- this.end = Date.now() + this.remaining;
92
- this.tick();
93
- };
94
-
95
- pause = () => {
96
- this.end = null;
97
- };
98
-
99
- reset = () => {
100
- const running = this.running;
101
- this.remaining = this.duration * 1000;
102
- this.end = running ? Date.now() + this.remaining : null;
103
- };
104
-
105
- tick() {
106
- if (this.running) {
107
- this.remaining = Math.max(0, this.end! - Date.now());
108
- requestAnimationFrame(() => this.tick());
109
- }
110
- }
111
-
112
- get running() {
113
- return this.end && this.remaining;
114
- }
115
-
116
- connectedCallback() {
117
- super.connectedCallback();
118
- this.reset();
119
- }
120
- }
1
+ import { pause, play, replay } from "./icons.js";
2
+
3
+ /* playground-hide */
4
+
5
+ import "p-elements-core";
6
+
7
+ // Can not configure tsxFactory in the playground,
8
+ // so we assign Maquette.h to React.createElement
9
+ const React = {
10
+ createElement: Maquette.h,
11
+ };
12
+
13
+ /* playground-hide-end */
14
+ /* playground-fold */
15
+ function pad(pad: unknown, val: number) {
16
+ return pad ? String(val).padStart(2, "0") : val;
17
+ }
18
+ /* playground-fold-end */
19
+
20
+ const css = /* playground-fold */ `
21
+ :host {
22
+ margin: 1rem;
23
+ font-family: monospace;
24
+ font-size: 2rem;
25
+ display: inline-flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ justify-content: center;
29
+ }
30
+ .timer {
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+ .buttons {
36
+ user-select: none;
37
+ display: flex;
38
+ gap: .5rem;
39
+ }
40
+ button {
41
+ line-height: 0;
42
+ padding: 0;
43
+ }
44
+ ` /* playground-fold-end */;
45
+
46
+ @CustomElementConfig({
47
+ tagName: "demo-timer",
48
+ })
49
+ export class DemoTimerElement extends CustomElement {
50
+ static style = css
51
+
52
+ @Property({ type: "number", attribute: "duration" })
53
+ duration: number = 0;
54
+
55
+ @PropertyRenderOnSet
56
+ private end: number = null;
57
+
58
+ @PropertyRenderOnSet
59
+ private remaining: number = 0;
60
+
61
+ render(): VNode {
62
+ const { remaining, running } = this;
63
+ const min = Math.floor(remaining / 60000);
64
+ const sec = pad(min, Math.floor((remaining / 1000) % 60));
65
+ const hun = pad(true, Math.floor((remaining % 1000) / 10));
66
+
67
+ return (
68
+ <div>
69
+ <div class="timer">{`${min ? `${min}:${sec}` : `${sec}.${hun}`}`}</div>
70
+ <div class="buttons">
71
+ {remaining === 0 ? (
72
+ ""
73
+ ) : running ? (
74
+ <button onclick={this.pause} key="pause-button">
75
+ {pause("pause-icon")}
76
+ </button>
77
+ ) : (
78
+ <button onclick={this.start} key="play-button">
79
+ {play("play-icon")}
80
+ </button>
81
+ )}
82
+ <button onclick={this.reset} key="replay-button">
83
+ {replay("replay-icon")}
84
+ </button>
85
+ </div>
86
+ </div>
87
+ );
88
+ }
89
+
90
+ start = () => {
91
+ this.end = Date.now() + this.remaining;
92
+ this.tick();
93
+ };
94
+
95
+ pause = () => {
96
+ this.end = null;
97
+ };
98
+
99
+ reset = () => {
100
+ const running = this.running;
101
+ this.remaining = this.duration * 1000;
102
+ this.end = running ? Date.now() + this.remaining : null;
103
+ };
104
+
105
+ tick() {
106
+ if (this.running) {
107
+ this.remaining = Math.max(0, this.end! - Date.now());
108
+ requestAnimationFrame(() => this.tick());
109
+ }
110
+ }
111
+
112
+ get running() {
113
+ return this.end && this.remaining;
114
+ }
115
+
116
+ connectedCallback() {
117
+ super.connectedCallback();
118
+ this.reset();
119
+ }
120
+ }
package/docs/src/_data/demos/timer/icons.tsx CHANGED
@@ -1,62 +1,62 @@
1
- /* playground-hide */
2
-
3
- import "p-elements-core";
4
-
5
- // Can not configure tsxFactory in the playground,
6
- // so we assign Maquette.h to React.createElement
7
- const React = {
8
- createElement: Maquette.h,
9
- };
10
-
11
- /* playground-hide-end */
12
- export const replay = (key: string) => (
13
- <svg
14
- key={key}
15
- xmlns="http://www.w3.org/2000/svg"
16
- enable-background="new 0 0 24 24"
17
- height="24px"
18
- viewBox="0 0 24 24"
19
- width="24px"
20
- fill="#000000"
21
- >
22
- <title>Replay</title>
23
- <g>
24
- <rect fill="none" height="24" width="24" />
25
- <rect fill="none" height="24" width="24" />
26
- <rect fill="none" height="24" width="24" />
27
- </g>
28
- <g>
29
- <g />
30
- <path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z" />
31
- </g>
32
- </svg>
33
- );
34
-
35
- export const pause = (key: string) => (
36
- <svg
37
- key={key}
38
- xmlns="http://www.w3.org/2000/svg"
39
- height="24px"
40
- viewBox="0 0 24 24"
41
- width="24px"
42
- fill="#000000"
43
- >
44
- <title>Pause</title>
45
- <path d="M0 0h24v24H0V0z" fill="none" />
46
- <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
47
- </svg>
48
- );
49
- export const play = (key: string) => (
50
- <svg
51
- key={key}
52
- xmlns="http://www.w3.org/2000/svg"
53
- height="24px"
54
- viewBox="0 0 24 24"
55
- width="24px"
56
- fill="#000000"
57
- >
58
- <title>Play</title>
59
- <path d="M0 0h24v24H0V0z" fill="none" />
60
- <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
61
- </svg>
62
- );
1
+ /* playground-hide */
2
+
3
+ import "p-elements-core";
4
+
5
+ // Can not configure tsxFactory in the playground,
6
+ // so we assign Maquette.h to React.createElement
7
+ const React = {
8
+ createElement: Maquette.h,
9
+ };
10
+
11
+ /* playground-hide-end */
12
+ export const replay = (key: string) => (
13
+ <svg
14
+ key={key}
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ enable-background="new 0 0 24 24"
17
+ height="24px"
18
+ viewBox="0 0 24 24"
19
+ width="24px"
20
+ fill="#000000"
21
+ >
22
+ <title>Replay</title>
23
+ <g>
24
+ <rect fill="none" height="24" width="24" />
25
+ <rect fill="none" height="24" width="24" />
26
+ <rect fill="none" height="24" width="24" />
27
+ </g>
28
+ <g>
29
+ <g />
30
+ <path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z" />
31
+ </g>
32
+ </svg>
33
+ );
34
+
35
+ export const pause = (key: string) => (
36
+ <svg
37
+ key={key}
38
+ xmlns="http://www.w3.org/2000/svg"
39
+ height="24px"
40
+ viewBox="0 0 24 24"
41
+ width="24px"
42
+ fill="#000000"
43
+ >
44
+ <title>Pause</title>
45
+ <path d="M0 0h24v24H0V0z" fill="none" />
46
+ <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
47
+ </svg>
48
+ );
49
+ export const play = (key: string) => (
50
+ <svg
51
+ key={key}
52
+ xmlns="http://www.w3.org/2000/svg"
53
+ height="24px"
54
+ viewBox="0 0 24 24"
55
+ width="24px"
56
+ fill="#000000"
57
+ >
58
+ <title>Play</title>
59
+ <path d="M0 0h24v24H0V0z" fill="none" />
60
+ <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
61
+ </svg>
62
+ );
package/docs/src/_data/demos/timer/index.html CHANGED
@@ -1,12 +1,12 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Demo timer</title>
5
- </head>
6
- <body>
7
- <demo-timer duration="7"></demo-timer>
8
- <demo-timer duration="60"></demo-timer>
9
- <demo-timer duration="300"></demo-timer>
10
- <script type="module" src="./demo-timer.js"></script>
11
- </body>
12
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Demo timer</title>
5
+ </head>
6
+ <body>
7
+ <demo-timer duration="7"></demo-timer>
8
+ <demo-timer duration="60"></demo-timer>
9
+ <demo-timer duration="300"></demo-timer>
10
+ <script type="module" src="./demo-timer.js"></script>
11
+ </body>
12
+ </html>
package/docs/src/_data/demos/timer/project.json CHANGED
@@ -1,8 +1,8 @@
1
- {
2
- "files": {
3
- "demo-timer.tsx": {},
4
- "icons.tsx": {},
5
- "index.html": {}
6
- },
7
- "previewHeight": "125px"
8
- }
1
+ {
2
+ "files": {
3
+ "demo-timer.tsx": {},
4
+ "icons.tsx": {},
5
+ "index.html": {}
6
+ },
7
+ "previewHeight": "125px"
8
+ }
package/docs/src/_data/global.js CHANGED
@@ -1,13 +1,13 @@
1
-
2
-
3
- export default global = {
4
- site:"P Elements",
5
- pathPrefix: process.argv.indexOf("--serve") !== -1 ? "" : "/p-elements-core",
6
- navigation: [
7
- { title: "Documentation", url: "/documentation/index.html" },
8
- { title: "Playground", url: "/playground/index.html"},
9
- ],
10
- playground: [
11
- { title: "Hello world", path: "/playground" }
12
- ]
13
- };
1
+
2
+
3
+ export default global = {
4
+ site:"P Elements",
5
+ pathPrefix: process.argv.indexOf("--serve") !== -1 ? "" : "/p-elements-core",
6
+ navigation: [
7
+ { title: "Documentation", url: "/documentation/index.html" },
8
+ { title: "Playground", url: "/playground/index.html"},
9
+ ],
10
+ playground: [
11
+ { title: "Hello world", path: "/playground" }
12
+ ]
13
+ };
package/docs/src/_data/helpers.js CHANGED
@@ -1,19 +1,19 @@
1
- export function getLinkActiveState(itemUrl, pageUrl) {
2
- let response = '';
3
-
4
- // Ensure pageUrl is a string before proceeding
5
- if (typeof pageUrl === 'string') {
6
- if (itemUrl === pageUrl) {
7
- response = ' aria-current=page';
8
- }
9
-
10
- // Need to check if the pageUrl is a subpath of the itemUrl
11
- const itemPath = itemUrl.split('/')[1];
12
- const pagePath = pageUrl.split('/')[1];
13
- if (itemPath === pagePath) {
14
- response += ' data-state=active';
15
- }
16
- }
17
-
18
- return response;
19
- }
1
+ export function getLinkActiveState(itemUrl, pageUrl) {
2
+ let response = '';
3
+
4
+ // Ensure pageUrl is a string before proceeding
5
+ if (typeof pageUrl === 'string') {
6
+ if (itemUrl === pageUrl) {
7
+ response = ' aria-current=page';
8
+ }
9
+
10
+ // Need to check if the pageUrl is a subpath of the itemUrl
11
+ const itemPath = itemUrl.split('/')[1];
12
+ const pagePath = pageUrl.split('/')[1];
13
+ if (itemPath === pagePath) {
14
+ response += ' data-state=active';
15
+ }
16
+ }
17
+
18
+ return response;
19
+ }