@epa-wg/custom-element 0.0.9 → 0.0.10
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 +6 -5
- package/custom-element.js +6 -5
- package/demo/http-request.html +3 -0
- package/demo/local-storage.html +3 -0
- package/demo/location-element.html +149 -0
- package/demo/logo.png +0 -0
- package/index.html +2 -1
- package/location-element.js +63 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301)
|
|
4
4
|
discussion. The functionality of DCE and its data access does not require programming using JavaScript.
|
|
5
5
|
|
|
6
|
-
It allows to define custom HTML tag with template filled from slots
|
|
7
|
-
[local-storage][local-storage-demo]
|
|
6
|
+
It allows to define custom HTML tag with template filled from slots, attributes and data `slice` as of now from
|
|
7
|
+
[local-storage][local-storage-demo], [http-request][http-request-demo], [location][location-demo].
|
|
8
8
|
UI is re-rendered on each data slice change.
|
|
9
9
|
|
|
10
10
|
[![git][github-image] GitHub][git-url]
|
|
@@ -187,12 +187,13 @@ within template
|
|
|
187
187
|
[demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/index.html
|
|
188
188
|
[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
|
|
189
189
|
[http-request-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
|
|
190
|
+
[location-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
|
|
190
191
|
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
|
|
191
192
|
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
|
|
192
193
|
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element
|
|
193
|
-
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
194
|
-
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
195
|
-
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
194
|
+
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.10/coverage/coverage.svg
|
|
195
|
+
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.10/coverage/lcov-report/index.html
|
|
196
|
+
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.10/storybook-static/index.html?path=/story/welcome--introduction
|
|
196
197
|
[sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
|
|
197
198
|
[webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
|
|
198
199
|
[webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
|
package/custom-element.js
CHANGED
|
@@ -94,12 +94,13 @@ Json2Xml( o, tag )
|
|
|
94
94
|
function
|
|
95
95
|
injectSlice( x, s, data )
|
|
96
96
|
{
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
el
|
|
100
|
-
|
|
97
|
+
const isString = typeof data === 'string' ;
|
|
98
|
+
|
|
99
|
+
const el = isString
|
|
100
|
+
? create(s, data)
|
|
101
|
+
: document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
|
|
101
102
|
[...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
|
|
102
|
-
x.append(
|
|
103
|
+
x.append(el);
|
|
103
104
|
}
|
|
104
105
|
|
|
105
106
|
export class
|
package/demo/http-request.html
CHANGED
package/demo/local-storage.html
CHANGED
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
</head>
|
|
20
20
|
<body>
|
|
21
21
|
|
|
22
|
+
<nav>
|
|
23
|
+
<a href=".."><h3><code>custom-element</code> demo</h3></a>
|
|
24
|
+
</nav>
|
|
22
25
|
|
|
23
26
|
<html-demo-element legend="1. localStorage simplest"
|
|
24
27
|
description="local-storage read only during initial and only render, does not track the changes.">
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
|
+
<title>custom-element Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg" />
|
|
7
|
+
<script type="module" src="../location-element.js"></script>
|
|
8
|
+
<script type="module" src="../custom-element.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
@import "./demo.css";
|
|
11
|
+
|
|
12
|
+
button{ background: forestgreen; }
|
|
13
|
+
table{ min-width: 16rem; }
|
|
14
|
+
td{ border-bottom: 1px solid silver; }
|
|
15
|
+
tfoot td{ border-bottom: none; }
|
|
16
|
+
td,th{text-align: right; }
|
|
17
|
+
caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
|
|
18
|
+
</style>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
<nav>
|
|
22
|
+
<a href=".."><h3><code>custom-element</code> demo</h3></a>
|
|
23
|
+
</nav>
|
|
24
|
+
<html-demo-element legend="Change window URL">
|
|
25
|
+
<template>
|
|
26
|
+
<a href="#dce2">#dce2</a>
|
|
27
|
+
<form >
|
|
28
|
+
<input name="p1" value="abc"/>
|
|
29
|
+
<input name="p2" value="def"/>
|
|
30
|
+
<input type="submit" value="params"/>
|
|
31
|
+
</form>
|
|
32
|
+
<button onclick="history.pushState( {},'', 'location.html?pushstate')"
|
|
33
|
+
>history.pushState</button>
|
|
34
|
+
<button onclick="history.replaceState( {},'', 'location.html?replaceState#dce1')"
|
|
35
|
+
>history.replaceState</button>
|
|
36
|
+
|
|
37
|
+
</template>
|
|
38
|
+
</html-demo-element>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<html-demo-element legend="2. window.location live update"
|
|
42
|
+
description="In the page beginning change the window URL via link or by history change"
|
|
43
|
+
id="dce2"
|
|
44
|
+
>
|
|
45
|
+
<p>Has to produce URL properties</p>
|
|
46
|
+
<template>
|
|
47
|
+
<custom-element tag="dce-2" hidden>
|
|
48
|
+
<template>
|
|
49
|
+
|
|
50
|
+
<location-element slice="window-url" live></location-element>
|
|
51
|
+
|
|
52
|
+
<html:table>
|
|
53
|
+
<xsl:for-each select="//slice/window-url/@*">
|
|
54
|
+
<html:tr>
|
|
55
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
56
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
57
|
+
</html:tr>
|
|
58
|
+
</xsl:for-each>
|
|
59
|
+
<html:tr>
|
|
60
|
+
<html:th><u>params</u></html:th>
|
|
61
|
+
<html:th></html:th>
|
|
62
|
+
</html:tr>
|
|
63
|
+
<xsl:for-each select="//slice/window-url/params/*">
|
|
64
|
+
<html:tr>
|
|
65
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
66
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
67
|
+
</html:tr>
|
|
68
|
+
</xsl:for-each>
|
|
69
|
+
</html:table>
|
|
70
|
+
</template>
|
|
71
|
+
</custom-element>
|
|
72
|
+
<dce-2>?</dce-2>
|
|
73
|
+
</template>
|
|
74
|
+
</html-demo-element>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<html-demo-element legend="1. window.location simplest"
|
|
78
|
+
description="location read only during initial and only render, does not track the changes."
|
|
79
|
+
id="dce1">
|
|
80
|
+
<p>Has to produce URL properties</p>
|
|
81
|
+
<template>
|
|
82
|
+
<custom-element tag="dce-1" hidden>
|
|
83
|
+
<template>
|
|
84
|
+
|
|
85
|
+
<location-element slice="window-url"></location-element>
|
|
86
|
+
|
|
87
|
+
<html:table>
|
|
88
|
+
<xsl:for-each select="//slice/window-url/@*">
|
|
89
|
+
<html:tr>
|
|
90
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
91
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
92
|
+
</html:tr>
|
|
93
|
+
</xsl:for-each>
|
|
94
|
+
<html:tr>
|
|
95
|
+
<html:th><u>params</u></html:th>
|
|
96
|
+
<html:th></html:th>
|
|
97
|
+
</html:tr>
|
|
98
|
+
<xsl:for-each select="//slice/window-url/params/*">
|
|
99
|
+
<html:tr>
|
|
100
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
101
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
102
|
+
</html:tr>
|
|
103
|
+
</xsl:for-each>
|
|
104
|
+
</html:table>
|
|
105
|
+
</template>
|
|
106
|
+
</custom-element>
|
|
107
|
+
<dce-1>?</dce-1>
|
|
108
|
+
</template>
|
|
109
|
+
</html-demo-element>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<html-demo-element legend="3. External URL as SRC attribute"
|
|
113
|
+
description="url parsed and populated into slice."
|
|
114
|
+
id="dce3">
|
|
115
|
+
<p>Has to produce URL properties</p>
|
|
116
|
+
<template>
|
|
117
|
+
<custom-element tag="dce-3" hidden>
|
|
118
|
+
<template>
|
|
119
|
+
|
|
120
|
+
<location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
|
|
121
|
+
|
|
122
|
+
<html:table>
|
|
123
|
+
<xsl:for-each select="//slice/src-url/@*">
|
|
124
|
+
<html:tr>
|
|
125
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
126
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
127
|
+
</html:tr>
|
|
128
|
+
</xsl:for-each>
|
|
129
|
+
<html:tr>
|
|
130
|
+
<html:th><u>params</u></html:th>
|
|
131
|
+
<html:th></html:th>
|
|
132
|
+
</html:tr>
|
|
133
|
+
<xsl:for-each select="//slice/src-url/params/*">
|
|
134
|
+
<html:tr>
|
|
135
|
+
<html:th><xsl:value-of select="name()"/></html:th>
|
|
136
|
+
<html:td><xsl:value-of select="."/></html:td>
|
|
137
|
+
</html:tr>
|
|
138
|
+
</xsl:for-each>
|
|
139
|
+
</html:table>
|
|
140
|
+
</template>
|
|
141
|
+
</custom-element>
|
|
142
|
+
<dce-3>?</dce-3>
|
|
143
|
+
</template>
|
|
144
|
+
</html-demo-element>
|
|
145
|
+
|
|
146
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
147
|
+
|
|
148
|
+
</body>
|
|
149
|
+
</html>
|
package/demo/logo.png
ADDED
|
Binary file
|
package/index.html
CHANGED
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
<section>
|
|
28
28
|
<b>Data layer demo</b>
|
|
29
29
|
<a href="./demo/local-storage.html">local-storage</a> |
|
|
30
|
-
<a href="./demo/http-request.html">http-request</a>
|
|
30
|
+
<a href="./demo/http-request.html">http-request</a> |
|
|
31
|
+
<a href="./demo/location-element.html">location-element</a>
|
|
31
32
|
</section>
|
|
32
33
|
</nav>
|
|
33
34
|
<html-demo-element legend="1. simple payload"
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const attr = (el, attr)=> el.getAttribute(attr);
|
|
2
|
+
|
|
3
|
+
export class LocationElement extends HTMLElement
|
|
4
|
+
{
|
|
5
|
+
// @attribute live - monitors localStorage change
|
|
6
|
+
// @attribute src - URL to be parsed, defaults to `window.location`
|
|
7
|
+
|
|
8
|
+
constructor()
|
|
9
|
+
{
|
|
10
|
+
super();
|
|
11
|
+
const state = {}
|
|
12
|
+
, listener = e=> propagateSlice(e)
|
|
13
|
+
, propagateSlice = (e)=>
|
|
14
|
+
{ const urlStr = attr(this,'src')
|
|
15
|
+
const url = urlStr? new URL(urlStr) : window.location
|
|
16
|
+
|
|
17
|
+
const params= {}
|
|
18
|
+
const search = new URLSearchParams(url.search);
|
|
19
|
+
for (const key of search.keys())
|
|
20
|
+
params[key] = search.getAll(key)
|
|
21
|
+
|
|
22
|
+
const detail = {params}
|
|
23
|
+
for( const k in url )
|
|
24
|
+
{ if ('string' === typeof url[k])
|
|
25
|
+
detail[k] = url[k]
|
|
26
|
+
}
|
|
27
|
+
for( let parent = this.parentElement; parent; parent = parent.parentElement)
|
|
28
|
+
{ if (parent.onSlice)
|
|
29
|
+
return parent.onSlice(
|
|
30
|
+
{ detail
|
|
31
|
+
, target: this
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
console.error(`${this.localName} used outside of custom-element`)
|
|
35
|
+
debugger;
|
|
36
|
+
};
|
|
37
|
+
this.sliceInit = s =>
|
|
38
|
+
{
|
|
39
|
+
if( !state.listener && this.hasAttribute('live') )
|
|
40
|
+
{ state.listener = 1;
|
|
41
|
+
window.addEventListener( 'popstate', listener );
|
|
42
|
+
window.addEventListener( 'hashchange', listener );
|
|
43
|
+
}
|
|
44
|
+
propagateSlice();
|
|
45
|
+
return s || {}
|
|
46
|
+
}
|
|
47
|
+
this._destroy = ()=>
|
|
48
|
+
{
|
|
49
|
+
if( !state.listener )
|
|
50
|
+
return;
|
|
51
|
+
if(state.listener)
|
|
52
|
+
{ window.removeEventListener('popstate', listener);
|
|
53
|
+
window.removeEventListener('hashchange', listener);
|
|
54
|
+
}
|
|
55
|
+
delete state.listener;
|
|
56
|
+
};
|
|
57
|
+
this.sliceInit()
|
|
58
|
+
}
|
|
59
|
+
disconnectedCallback(){ this._destroy(); }
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
window.customElements.define( 'location-element', LocationElement );
|
|
63
|
+
export default LocationElement;
|
package/package.json
CHANGED