@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.
- package/README.md +3 -3
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.js +52 -23
- package/demo/confused.svg +1 -0
- package/demo/demo.css +5 -1
- package/demo/embed-1.html +1 -2
- package/demo/external-template.html +122 -62
- package/demo/lib-dir/Smiley.svg +24 -0
- package/demo/lib-dir/embed-lib.html +34 -0
- package/demo/location-element.html +17 -4
- package/demo/module-url.html +215 -0
- package/demo/npm-versions-demo.html +105 -0
- package/demo/npm-versions.html +65 -0
- package/demo/s.xml +27 -10
- package/demo/s.xslt +96 -59
- package/demo/set-url.html +141 -0
- package/demo/z.js +9 -0
- package/ide/customData-dce.json +215 -125
- package/ide/web-types-dce.json +184 -116
- package/ide/web-types-xsl.json +1 -1
- package/index.html +3 -1
- package/location-element.js +25 -2
- package/module-url.js +33 -0
- package/package.json +1 -1
package/ide/web-types-dce.json
CHANGED
|
@@ -1,116 +1,184 @@
|
|
|
1
|
-
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@epa-wg/custom-element",
|
|
4
|
+
"version": "0.0.26",
|
|
5
|
+
"js-types-syntax": "typescript",
|
|
6
|
+
"description-markup": "markdown",
|
|
7
|
+
"contributions": {
|
|
8
|
+
"html": {
|
|
9
|
+
"attributes": [
|
|
10
|
+
{
|
|
11
|
+
"name": "slice",
|
|
12
|
+
"description": "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",
|
|
13
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"name": "slice-event",
|
|
17
|
+
"description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
|
|
18
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "custom-validity",
|
|
22
|
+
"description": "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.",
|
|
23
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "slice-value",
|
|
27
|
+
"description": "XPath expression to populate into the slice",
|
|
28
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
"elements": [
|
|
32
|
+
{
|
|
33
|
+
"name": "custom-element",
|
|
34
|
+
"description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
|
|
35
|
+
"doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#custom-element",
|
|
36
|
+
"attributes": [
|
|
37
|
+
{
|
|
38
|
+
"name": "hidden",
|
|
39
|
+
"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.",
|
|
40
|
+
"required": false,
|
|
41
|
+
"doc-url": "https://developer.mozilla.org/en-US/docs/web/html/global_attributes/hidden",
|
|
42
|
+
"value": {
|
|
43
|
+
"type": "boolean"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "tag",
|
|
48
|
+
"description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline. ",
|
|
49
|
+
"default": "",
|
|
50
|
+
"required": false,
|
|
51
|
+
"doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#tag-attribute",
|
|
52
|
+
"value": {
|
|
53
|
+
"type": "string"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "src",
|
|
58
|
+
"description": "full, relative, or hash URL to DCE template.",
|
|
59
|
+
"default": "",
|
|
60
|
+
"required": false,
|
|
61
|
+
"doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#src-attribute",
|
|
62
|
+
"value": {
|
|
63
|
+
"type": "URL"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
],
|
|
67
|
+
"slots": [ ],
|
|
68
|
+
"js": {
|
|
69
|
+
"events": [
|
|
70
|
+
{
|
|
71
|
+
"name": "value:changed",
|
|
72
|
+
"description": "Emitted when data changes. Can be used for state serialization in hydration flow"
|
|
73
|
+
}
|
|
74
|
+
],
|
|
75
|
+
"properties": [
|
|
76
|
+
{
|
|
77
|
+
"name": "value",
|
|
78
|
+
"type": "string",
|
|
79
|
+
"default": "",
|
|
80
|
+
"description": "DCE state. Can be used for state serialization in hydration flow. Format TBD, most likely encoded XML string"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
"css": {
|
|
85
|
+
"properties": [
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "for-each",
|
|
91
|
+
"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.",
|
|
92
|
+
"doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each",
|
|
93
|
+
"attributes": [
|
|
94
|
+
{
|
|
95
|
+
"name": "select",
|
|
96
|
+
"description": "Uses an XPath expression to select nodes to be processed.",
|
|
97
|
+
"required": true,
|
|
98
|
+
"doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select",
|
|
99
|
+
"value": {
|
|
100
|
+
"type": "string"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"name": "location-element",
|
|
107
|
+
"description": "get/set window URL parts or from SRC URL",
|
|
108
|
+
"doc-url": "https://github.com/EPA-WG/custom-element",
|
|
109
|
+
"attributes": [
|
|
110
|
+
{
|
|
111
|
+
"name": "href",
|
|
112
|
+
"description": "url to be parsed. When omitted window.location is used.",
|
|
113
|
+
"required": false,
|
|
114
|
+
"doc-url": "https://developer.mozilla.org/en-US/docs/Web/API/Location/href",
|
|
115
|
+
"value": {
|
|
116
|
+
"type": "string"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "live",
|
|
121
|
+
"description": "monitors history change, applicable only when href is omitted.",
|
|
122
|
+
"required": false,
|
|
123
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html",
|
|
124
|
+
"value": {
|
|
125
|
+
"type": "string"
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"name": "src",
|
|
130
|
+
"description": "sets the window URL",
|
|
131
|
+
"required": false,
|
|
132
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html",
|
|
133
|
+
"value": {
|
|
134
|
+
"type": "string"
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "method",
|
|
139
|
+
"description": "when defined, changes URL by one of predefined methods.",
|
|
140
|
+
"required": false,
|
|
141
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html",
|
|
142
|
+
"value": {
|
|
143
|
+
"type": "string"
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "module-url",
|
|
150
|
+
"description": "get module URL into slice from SRC according to web page importmap",
|
|
151
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html",
|
|
152
|
+
"attributes": [
|
|
153
|
+
{
|
|
154
|
+
"name": "src",
|
|
155
|
+
"description": "path to module resource, If omitted, it would match the window.location.href",
|
|
156
|
+
"required": false,
|
|
157
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html",
|
|
158
|
+
"value": {
|
|
159
|
+
"type": "string"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "slice",
|
|
164
|
+
"description": "slice name where resolved URL would be propagated",
|
|
165
|
+
"required": false,
|
|
166
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html",
|
|
167
|
+
"value": {
|
|
168
|
+
"type": "string"
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"name": "slice",
|
|
175
|
+
"description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
|
|
176
|
+
"doc-url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events",
|
|
177
|
+
"attributes": [
|
|
178
|
+
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
package/ide/web-types-xsl.json
CHANGED
package/index.html
CHANGED
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
<a href="./demo/local-storage.html" >local-storage </a> |
|
|
31
31
|
<a href="./demo/http-request.html" >http-request </a> |
|
|
32
32
|
<a href="./demo/location-element.html" >location-element </a> |
|
|
33
|
-
<a href="./demo/
|
|
33
|
+
<a href="./demo/set-url.html" >set-url </a> |
|
|
34
|
+
<a href="./demo/external-template.html" >external template </a> |
|
|
35
|
+
<a href="./demo/module-url.html" >importmap </a> <br/>
|
|
34
36
|
<a href="./demo/hex-grid.html" >hex grid lib </a> |
|
|
35
37
|
<a href="./demo/scoped-css.html" >scoped CSS </a> |
|
|
36
38
|
<a href="./demo/parameters.html" >attributes </a> |
|
package/location-element.js
CHANGED
|
@@ -16,6 +16,15 @@ function ensureTrackLocationChange()
|
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
|
+
const methods =
|
|
20
|
+
{ 'location.href' : src => window.location.href = src
|
|
21
|
+
, 'location.hash' : src => window.location.hash = src
|
|
22
|
+
, 'location.assign' : src => window.location.assign( src )
|
|
23
|
+
, 'location.replace' : src => window.location.replace( src )
|
|
24
|
+
, 'history.pushState' : src => window.history.pushState( {}, "", src )
|
|
25
|
+
, 'history.replaceState' : src => window.history.replaceState( {}, "", src )
|
|
26
|
+
};
|
|
27
|
+
|
|
19
28
|
|
|
20
29
|
export class LocationElement extends HTMLElement
|
|
21
30
|
{
|
|
@@ -25,6 +34,8 @@ export class LocationElement extends HTMLElement
|
|
|
25
34
|
, 'href' // url to be parsed. When omitted window.location is used.
|
|
26
35
|
, 'type' // `text|json`, defaults to text, other types are compatible with INPUT field
|
|
27
36
|
, 'live' // monitors history change, applicable only when href is omitted.
|
|
37
|
+
, 'src' // sets the URL
|
|
38
|
+
, 'method' // when defined, changes URL by one of predefined methods.
|
|
28
39
|
];
|
|
29
40
|
|
|
30
41
|
constructor()
|
|
@@ -53,6 +64,17 @@ export class LocationElement extends HTMLElement
|
|
|
53
64
|
};
|
|
54
65
|
this.sliceInit = s =>
|
|
55
66
|
{
|
|
67
|
+
if( this.hasAttribute('method') )
|
|
68
|
+
{
|
|
69
|
+
const method = this.getAttribute('method');
|
|
70
|
+
const src = this.getAttribute('src');
|
|
71
|
+
if( method && src )
|
|
72
|
+
if( method === 'location.hash' )
|
|
73
|
+
{ if( src !== window.location.hash )
|
|
74
|
+
methods[ method ]?.( src );
|
|
75
|
+
}else if( window.location.href !== new URL(src, window.location).href )
|
|
76
|
+
methods[method]?.(src);
|
|
77
|
+
}
|
|
56
78
|
if( !state.listener && this.hasAttribute('live') )
|
|
57
79
|
{ state.listener = 1;
|
|
58
80
|
window.navigation?.addEventListener("navigate", listener );
|
|
@@ -74,8 +96,9 @@ export class LocationElement extends HTMLElement
|
|
|
74
96
|
}
|
|
75
97
|
attributeChangedCallback(name, oldValue, newValue)
|
|
76
98
|
{
|
|
77
|
-
if('href'!== name)
|
|
78
|
-
|
|
99
|
+
if('href'!== name && 'method' !== name && 'src' )
|
|
100
|
+
if( !['method','src','href'].includes(name) )
|
|
101
|
+
return;
|
|
79
102
|
this.sliceInit && this.sliceInit();
|
|
80
103
|
}
|
|
81
104
|
|
package/module-url.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
const attr = ( el, attr )=> el.getAttribute( attr );
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
export class ModuleUrl extends HTMLElement
|
|
5
|
+
{
|
|
6
|
+
static observedAttributes=
|
|
7
|
+
[ 'slice'
|
|
8
|
+
, 'src' // module path, relative or absolute URL
|
|
9
|
+
];
|
|
10
|
+
|
|
11
|
+
sliceInit()
|
|
12
|
+
{ let path = attr(this,'src');
|
|
13
|
+
try
|
|
14
|
+
{ const url = '.' === path.charAt(0)
|
|
15
|
+
? new URL(path, this.closest('[base]')?.getAttribute('base') ).href
|
|
16
|
+
: import.meta.resolve(path);
|
|
17
|
+
this.setAttribute('value',this.value = url );
|
|
18
|
+
}catch( er )
|
|
19
|
+
{ this.setAttribute('error', er.message);
|
|
20
|
+
this.setAttribute('value', path);
|
|
21
|
+
console.error(er.message ?? er, path);
|
|
22
|
+
}
|
|
23
|
+
this.dispatchEvent( new Event('change') );
|
|
24
|
+
}
|
|
25
|
+
attributeChangedCallback( name, oldValue, newValue )
|
|
26
|
+
{
|
|
27
|
+
if( 'src'=== name )
|
|
28
|
+
this.sliceInit();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
window.customElements.define( 'module-url', ModuleUrl );
|
|
33
|
+
export default ModuleUrl;
|
package/package.json
CHANGED