@epa-wg/custom-element 0.0.24 → 0.0.26

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.
@@ -0,0 +1,141 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6
+ <title>custom-element Declarative Custom Element implementation demo</title>
7
+ <link rel="icon" href="./wc-square.svg"/>
8
+ <script type="module" src="../location-element.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+ input[type="text"]{ min-width: 30rem; }
13
+
14
+ .infolink {
15
+ &:before {
16
+ content: '❔';
17
+ display: inline-block;
18
+ border-radius: 1.2em;
19
+ }
20
+
21
+ &:hover:before {
22
+ background: blue;
23
+ }
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <nav>
29
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
30
+ </nav>
31
+ <main>
32
+ <h3>How to set the page URL by <code>location-element</code>?</h3>
33
+ Answer: by defining following attributes:
34
+ <ol>
35
+ <li><code>method</code> to one of values provided bellow</li>
36
+ <li><code>src</code> with URL </li>
37
+ </ol>
38
+ <p> &lt;location-element&gt; is safe to be used unconditionally as long as `src` is missing or same as page URL.
39
+ Otherwise it can be injected by event driven condition as in sample <a href="#dce3">#3</a> </p>
40
+ </main>
41
+ <html-demo-element legend="1. Set the page URL by location.hash"
42
+ description="click on 'set' button and observe hash value change in url"
43
+ id="dce1">
44
+ <template>
45
+ <custom-element>
46
+ <template>
47
+ <button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
48
+ <button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
49
+ <location-element method="location.href" src="{//set-button/@value}"></location-element>
50
+ </template>
51
+ </custom-element>
52
+ </template>
53
+ </html-demo-element>
54
+
55
+ <html-demo-element legend="2. Set the page URL by method"
56
+ description="click on 'set' button and observe hash value change in url"
57
+ id="dce2">
58
+ <template>
59
+ <custom-element>
60
+ <template>
61
+ <style>
62
+ button{ display: block; width: 100%; }
63
+ </style>
64
+ <button value="location.href" slice="set-button" slice-event="click"> location.href </button>
65
+ <button value="location.hash" slice="set-button" slice-event="click"> location.hash </button>
66
+ <button value="location.assign" slice="set-button" slice-event="click"> location.assign </button>
67
+ <button value="location.replace" slice="set-button" slice-event="click"> location.replace </button>
68
+ <button value="history.pushState" slice="set-button" slice-event="click"> history.pushState </button>
69
+ <button value="history.replaceState" slice="set-button" slice-event="click"> history.replaceState </button>
70
+ <location-element method="{//set-button/@value}" src="#dce2"></location-element>
71
+ </template>
72
+ </custom-element>
73
+ </template>
74
+ </html-demo-element>
75
+
76
+ <html-demo-element legend="3. Set the page URL by location.href in conditionally injected location-element"
77
+ description="click on 'set' button and observe in url #dce3"
78
+ id="dce3">
79
+ <p>Has to produce URL properties</p>
80
+ <template>
81
+ <custom-element>
82
+ <template>
83
+ <button value="#dce3" slice="set-button" slice-event="click">set</button>
84
+ <if test="//set-button/@slice-event">
85
+ <location-element method="location.href" src="#dce3"></location-element>
86
+ look for <b>#dce3</b> in URL which is set by <code>location-element</code>
87
+ </if>
88
+ </template>
89
+ </custom-element>
90
+ </template>
91
+ </html-demo-element>
92
+
93
+ <html-demo-element legend="4. Set page URL methods"
94
+ description="To define the URL, fill input field or click the radio button, then 'set' button. "
95
+ id="dce4">
96
+ <template>
97
+ <custom-element>
98
+ <template>
99
+ <xsl:variable name="methods">
100
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
101
+ title="./set-url.html?a=A">location.href</a>
102
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"
103
+ title="#dec4">location.hash</a>
104
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
105
+ title="./set-url.html?assign=1">location.assign</a>
106
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace"
107
+ title="./set-url.html?replace=location">location.replace</a>
108
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState"
109
+ title="./set-url.html?history=pushState">history.pushState</a>
110
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
111
+ title="./set-url.html?history=replaceState">history.replaceState</a>
112
+ </xsl:variable>
113
+ <form slice="url-form" custom-validity="'invalid'" method="post">
114
+ <fieldset>
115
+ <legend><b>set-by</b></legend>
116
+ <for-each select="exsl:node-set($methods)/*">
117
+ <p><label><input type="radio" name="method" value="{.}"/> {.} </label>
118
+ <a class="infolink" href="{@href}">mdn</a>
119
+ </p>
120
+ </for-each>
121
+ </fieldset>
122
+ <variable name="selected-method" select="//form-data/method/text()"></variable>
123
+ <variable name="selected-url"
124
+ select="exsl:node-set($methods)/*[text() = $selected-method ]/@title"></variable>
125
+
126
+ <label><input name="url" value="{//url ?? $selected-url }" type="text"/></label>
127
+ <button name="submit-btn" value="by-submit" type="submit">set</button>
128
+ <if test="//form-data/url">
129
+ <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
130
+ {$selected-method} = {//form-data/url}
131
+ </if>
132
+ </form>
133
+ </template>
134
+ </custom-element>
135
+ </template>
136
+ </html-demo-element>
137
+
138
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
139
+
140
+ </body>
141
+ </html>
package/demo/z.js ADDED
@@ -0,0 +1,9 @@
1
+ import circle from "circle";
2
+ import circle2 from "lib-root/circle.js";
3
+ console.log(circle())
4
+ try{
5
+
6
+ console.log(import.meta.resolve('lib-root/a.js'))
7
+ }catch( err ){
8
+ console.error(err.message)
9
+ }
@@ -1,125 +1,215 @@
1
- {
2
- "version": 1.1,
3
- "globalAttributes": [
4
- {
5
- "name": "slice",
6
- "description": {
7
- "kind": "markdown",
8
- "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event"
9
- },
10
- "references": [
11
- {
12
- "name": "Demo",
13
- "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
14
- }
15
- ]
16
- },
17
- {
18
- "name": "slice-event",
19
- "description": {
20
- "kind": "markdown",
21
- "value": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event"
22
- },
23
- "references": [
24
- {
25
- "name": "Demo",
26
- "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
27
- }
28
- ]
29
- },
30
- {
31
- "name": "custom-validity",
32
- "description": {
33
- "kind": "markdown",
34
- "value": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission."
35
- },
36
- "references": [
37
- {
38
- "name": "Demo",
39
- "url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
40
- }
41
- ]
42
- },
43
- {
44
- "name": "slice-value",
45
- "description": {
46
- "kind": "markdown",
47
- "value": "XPath expression to populate into the slice"
48
- },
49
- "references": [
50
- {
51
- "name": "Demo",
52
- "url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
53
- }
54
- ]
55
- }
56
- ],
57
- "tags": [
58
- {
59
- "name": "custom-element",
60
- "description": "Declarative Cuestom ELement(DCE). `<custom-element tag='my-element'></custom-element>`.",
61
- "attributes": [
62
- {
63
- "name": "hidden",
64
- "description": "hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.",
65
- "type": "boolean"
66
- },
67
- {
68
- "name": "tag",
69
- "description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline.",
70
- "type": "string"
71
- },
72
- {
73
- "name": "src",
74
- "description": "full, relative, or hash URL to DCE template",
75
- "type": "string",
76
- "references": [
77
- {
78
- "name": "example",
79
- "url": "https://unpkg.com/@epa-wg/custom-element/demo/external-template.html"
80
- }
81
- ]
82
- }
83
- ],
84
- "references": [
85
- {
86
- "name": "custom-element",
87
- "url": "https://github.com/EPA-WG/custom-element"
88
- }
89
- ]
90
- },
91
- {
92
- "name": "for-each",
93
- "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
94
- "attributes": [
95
- {
96
- "name": "select",
97
- "description": "Uses an XPath expression to select nodes to be processed.",
98
- "type": "string",
99
- "references": [
100
- {
101
- "name": "MDN docs",
102
- "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select"
103
- }
104
- ]
105
- }
106
- ],
107
- "references": [
108
- {
109
- "name": "for-each",
110
- "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each"
111
- }
112
- ]
113
- },
114
- {
115
- "name": "slice",
116
- "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
117
- "references": [
118
- {
119
- "name": "README",
120
- "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
121
- }
122
- ]
123
- }
124
- ]
125
- }
1
+ {
2
+ "version": 1.1,
3
+ "globalAttributes": [
4
+ {
5
+ "name": "slice",
6
+ "description": {
7
+ "kind": "markdown",
8
+ "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event"
9
+ },
10
+ "references": [
11
+ {
12
+ "name": "Demo",
13
+ "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
14
+ }
15
+ ]
16
+ },
17
+ {
18
+ "name": "slice-event",
19
+ "description": {
20
+ "kind": "markdown",
21
+ "value": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event"
22
+ },
23
+ "references": [
24
+ {
25
+ "name": "Demo",
26
+ "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
27
+ }
28
+ ]
29
+ },
30
+ {
31
+ "name": "custom-validity",
32
+ "description": {
33
+ "kind": "markdown",
34
+ "value": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission."
35
+ },
36
+ "references": [
37
+ {
38
+ "name": "Demo",
39
+ "url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
40
+ }
41
+ ]
42
+ },
43
+ {
44
+ "name": "slice-value",
45
+ "description": {
46
+ "kind": "markdown",
47
+ "value": "XPath expression to populate into the slice"
48
+ },
49
+ "references": [
50
+ {
51
+ "name": "Demo",
52
+ "url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
53
+ }
54
+ ]
55
+ }
56
+ ],
57
+ "tags": [
58
+ {
59
+ "name": "custom-element",
60
+ "description": "Declarative Cuestom ELement(DCE). `<custom-element tag='my-element'></custom-element>`.",
61
+ "attributes": [
62
+ {
63
+ "name": "hidden",
64
+ "description": "hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.",
65
+ "type": "boolean"
66
+ },
67
+ {
68
+ "name": "tag",
69
+ "description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline.",
70
+ "type": "string"
71
+ },
72
+ {
73
+ "name": "src",
74
+ "description": "full, relative, or hash URL to DCE template",
75
+ "type": "string",
76
+ "references": [
77
+ {
78
+ "name": "example",
79
+ "url": "https://unpkg.com/@epa-wg/custom-element/demo/external-template.html"
80
+ }
81
+ ]
82
+ }
83
+ ],
84
+ "references": [
85
+ {
86
+ "name": "custom-element",
87
+ "url": "https://github.com/EPA-WG/custom-element"
88
+ }
89
+ ]
90
+ },
91
+ {
92
+ "name": "for-each",
93
+ "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
94
+ "attributes": [
95
+ {
96
+ "name": "select",
97
+ "description": "Uses an XPath expression to select nodes to be processed.",
98
+ "type": "string",
99
+ "references": [
100
+ {
101
+ "name": "MDN docs",
102
+ "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select"
103
+ }
104
+ ]
105
+ }
106
+ ],
107
+ "references": [
108
+ {
109
+ "name": "for-each",
110
+ "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each"
111
+ }
112
+ ]
113
+ },
114
+ {
115
+ "name": "slice",
116
+ "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
117
+ "references": [
118
+ {
119
+ "name": "README",
120
+ "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
121
+ }
122
+ ]
123
+ },
124
+ {
125
+ "name": "location-element",
126
+ "description": "get/set window URL parts or from SRC URL",
127
+ "attributes": [
128
+ {
129
+ "name": "href",
130
+ "description": "url to be parsed. When omitted window.location is used.",
131
+ "type": "string",
132
+ "references": [
133
+ {
134
+ "name": "MDN docs",
135
+ "url": "https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
136
+ }
137
+ ]
138
+ },
139
+ {
140
+ "name": "live",
141
+ "description": "monitors history change, applicable only when href is omitted.",
142
+ "type": "string",
143
+ "references": [
144
+ {
145
+ "name": "docs",
146
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html"
147
+ }
148
+ ]
149
+ },
150
+ {
151
+ "name": "src",
152
+ "description": "sets the window URL",
153
+ "type": "string",
154
+ "references": [
155
+ {
156
+ "name": "docs",
157
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html"
158
+ }
159
+ ]
160
+ },
161
+ {
162
+ "name": "method",
163
+ "description": "when defined, changes URL by one of predefined methods.",
164
+ "type": "string",
165
+ "references": [
166
+ {
167
+ "name": "docs",
168
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html"
169
+ }
170
+ ]
171
+ }
172
+ ],
173
+ "references": [
174
+ {
175
+ "name": "docs",
176
+ "url": "https://github.com/EPA-WG/custom-element"
177
+ }
178
+ ]
179
+ },
180
+ {
181
+ "name": "module-url",
182
+ "description": "get module URL into slice from SRC according to web page importmap",
183
+ "attributes": [
184
+ {
185
+ "name": "src",
186
+ "description": "path to module resource, If omitted, it would match the window.location.href",
187
+ "type": "string",
188
+ "references": [
189
+ {
190
+ "name": "docs",
191
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html"
192
+ }
193
+ ]
194
+ },
195
+ {
196
+ "name": "slice",
197
+ "description": "slice name where resolved URL would be propagated",
198
+ "type": "string",
199
+ "references": [
200
+ {
201
+ "name": "docs",
202
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html"
203
+ }
204
+ ]
205
+ }
206
+ ],
207
+ "references": [
208
+ {
209
+ "name": "docs",
210
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html"
211
+ }
212
+ ]
213
+ }
214
+ ]
215
+ }