@epa-wg/custom-element 0.0.5 → 0.0.7

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 (14) hide show
  1. package/README.md +11 -9
  2. package/custom-element.d.ts +4 -4
  3. package/custom-element.js +100 -80
  4. package/index.html +150 -150
  5. package/package.json +1 -1
  6. package/.idea/custom-element.iml +0 -9
  7. package/.idea/inspectionProfiles/Project_Default.xml +0 -28
  8. package/.idea/misc.xml +0 -6
  9. package/.idea/modules.xml +0 -8
  10. package/.idea/php.xml +0 -12
  11. package/.idea/vcs.xml +0 -6
  12. package/0/1.xml +0 -23
  13. package/0/1.xsl +0 -26
  14. package/0/a.html +0 -42
package/README.md CHANGED
@@ -8,7 +8,10 @@ It allows to define custom HTML tag with template filled from slots and attribut
8
8
  | Live demo: [custom-element][demo-url]
9
9
  | Try in [Sandbox][sandbox-url]
10
10
  | [tests project][git-test-url]
11
- [![NPM version][npm-image]][npm-url] [![coverage][coverage-image]][coverage-url]
11
+
12
+ [![NPM version][npm-image]][npm-url]
13
+ [![coverage][coverage-image]][coverage-url]
14
+ [![Published on webcomponents.org][webcomponents-img]][webcomponents-url]
12
15
 
13
16
  # use
14
17
  ## install
@@ -16,16 +19,13 @@ use via CDN
16
19
  ```html
17
20
  <script type="module" src="https://unpkg.com/@epa-wg/custom-element@0.0/custom-element.js"></script>
18
21
  ```
19
- NPM
22
+ NPM, yarn
20
23
  ```shell
21
24
  npm i -P @epa-wg/custom-element
22
- ```
23
- yarn
24
- ```shell
25
25
  yarn add @epa-wg/custom-element
26
26
  ```
27
27
 
28
- ## [Live demo][demo-url]
28
+ ## [Live demo 🔗][demo-url]
29
29
  ```html
30
30
  <custom-element tag="pokemon-tile" hidden>
31
31
  <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
@@ -141,7 +141,9 @@ within template
141
141
  [github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
142
142
  [npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
143
143
  [npm-url]: https://npmjs.org/package/@epa-wg/custom-element
144
- [coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.5/coverage/coverage.svg
145
- [coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.5/coverage/lcov-report/index.html
144
+ [coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/coverage/coverage.svg
145
+ [coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/coverage/lcov-report/index.html
146
+ [storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.7/storybook-static/index.html?path=/story/welcome--introduction
146
147
  [sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
147
- [storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.5/storybook-static/index.html?path=/story/welcome--introduction
148
+ [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
149
+ [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
package/custom-element.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export function log(x: any): void;
2
- export class CustomElement extends HTMLElement {
3
- }
4
- export default CustomElement;
1
+ export function log(x: any): void;
2
+ export class CustomElement extends HTMLElement {
3
+ }
4
+ export default CustomElement;
package/custom-element.js CHANGED
@@ -1,81 +1,101 @@
1
- const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
2
- , XSL_NS_URL = 'http://www.w3.org/1999/XSL/Transform';
3
-
4
- // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
5
-
6
- const create = ( tag, t='' ) =>
7
- {
8
- const e = document.createElement( tag );
9
- if(t) e.innerText = t;
10
- return e;
11
- }
12
- function xml2dom( xmlString )
13
- {
14
- return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
15
- }
16
- function bodyXml( dce )
17
- { const s = new XMLSerializer().serializeToString( dce );
18
- return s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) );
19
- }
20
- function slot2xsl( s )
21
- { const v = document.createElementNS( XSL_NS_URL, 'value-of' );
22
- v.setAttribute( 'select', `//*[@slot="${ s.name }"]` );
23
- s.parentNode.replaceChild( v, s );
24
- }
25
- function injectData( root, sectionName, arr, cb )
26
- {
27
- const inject = ( tag, parent, s ) =>
28
- {
29
- parent.append( s = create( tag ) );
30
- return s;
31
- };
32
- const l = inject( sectionName, root );
33
- [ ...arr ].forEach( e => l.append( cb(e) ) );
34
- }
35
- function assureSlot( e )
36
- { if( !e.slot )
37
- { if( !e.setAttribute )
38
- e = create( 'span', e.textContent.replaceAll('\n','') );
39
- e.setAttribute( 'slot', '' )
40
- }
41
- return e;
42
- }
43
- export class CustomElement extends HTMLElement
44
- {
45
- constructor()
46
- { super();
47
-
48
- [ ...this.getElementsByTagName( 'slot' ) ].forEach( slot2xsl );
49
- const p = new XSLTProcessor();
50
- p.importStylesheet( xml2dom( `<xsl:stylesheet version="1.0"
51
- xmlns:xsl="${XSL_NS_URL}">
52
- <xsl:output method="html" />
53
-
54
- <xsl:template match="/">
55
- <xsl:apply-templates select="//attributes"/>
56
- </xsl:template>
57
- <xsl:template match="attributes">
58
- ${ bodyXml(this) }
59
- </xsl:template>
60
-
61
- </xsl:stylesheet>` ) );
62
- const tag = this.getAttribute( 'tag' );
63
- tag && window.customElements.define( tag, class extends HTMLElement
64
- {
65
- constructor()
66
- {
67
- super();
68
- const x = create( 'div' );
69
- injectData( x, 'payload' , this.childNodes, assureSlot );
70
- injectData( x, 'attributes' , this.attributes, e=>create( e.nodeName, e.value ) );
71
- injectData( x, 'dataset' , Object.keys( this.dataset ), k=>create( k, this.dataset[ k ] ) );
72
- const f = p.transformToFragment( x, document );
73
- this.innerHTML = '';
74
- [...f.childNodes].forEach(e=>this.appendChild(e));
75
- }
76
- });
77
- }
78
- }
79
-
80
- window.customElements.define( 'custom-element', CustomElement );
1
+ const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8"?>'
2
+ , XSL_NS_URL = 'http://www.w3.org/1999/XSL/Transform';
3
+
4
+ // const log = x => console.debug( new XMLSerializer().serializeToString( x ) );
5
+
6
+ const create = ( tag, t = '' ) =>
7
+ {
8
+ const e = document.createElement( tag );
9
+ if( t ) e.innerText = t;
10
+ return e;
11
+ }
12
+
13
+ function xml2dom( xmlString )
14
+ {
15
+ return new DOMParser().parseFromString( XML_DECLARATION + xmlString, "application/xml" )
16
+ }
17
+
18
+ function bodyXml( dce )
19
+ {
20
+ const s = new XMLSerializer().serializeToString( dce );
21
+ return s.substring( s.indexOf( '>' ) + 1, s.lastIndexOf( '<' ) );
22
+ }
23
+
24
+ function slot2xsl( s )
25
+ {
26
+ const v = document.createElementNS( XSL_NS_URL, 'value-of' );
27
+ v.setAttribute( 'select', `//*[@slot="${ s.name }"]` );
28
+ s.parentNode.replaceChild( v, s );
29
+ }
30
+
31
+ function injectData( root, sectionName, arr, cb )
32
+ {
33
+ const inject = ( tag, parent, s ) =>
34
+ {
35
+ parent.append( s = create( tag ) );
36
+ return s;
37
+ };
38
+ const l = inject( sectionName, root );
39
+ [ ...arr ].forEach( e => l.append( cb( e ) ) );
40
+ }
41
+
42
+ function assureSlot( e )
43
+ {
44
+ if( !e.slot )
45
+ {
46
+ if( !e.setAttribute )
47
+ e = create( 'span', e.textContent.replaceAll( '\n', '' ) );
48
+ e.setAttribute( 'slot', '' )
49
+ }
50
+ return e;
51
+ }
52
+
53
+ export class CustomElement extends HTMLElement
54
+ {
55
+ constructor()
56
+ {
57
+ super();
58
+
59
+ [ ...this.getElementsByTagName( 'slot' ) ].forEach( slot2xsl );
60
+ const p = new XSLTProcessor();
61
+ p.importStylesheet( this.xslt );
62
+ const tag = this.getAttribute( 'tag' );
63
+ const dce = this;
64
+ tag && window.customElements.define( tag, class extends HTMLElement
65
+ {
66
+ constructor()
67
+ {
68
+ super();
69
+ const x = create( 'div' );
70
+ injectData( x, 'payload', this.childNodes, assureSlot );
71
+ injectData( x, 'attributes', this.attributes, e => create( e.nodeName, e.value ) );
72
+ injectData( x, 'dataset', Object.keys( this.dataset ), k => create( k, this.dataset[ k ] ) );
73
+ this.xml = x;
74
+ const f = p.transformToFragment( x, document );
75
+ this.innerHTML = '';
76
+ [ ...f.childNodes ].forEach( e => this.appendChild( e ) );
77
+ }
78
+ get dce(){ return dce;}
79
+ } );
80
+ }
81
+ get dce(){ return this;}
82
+ get xslt()
83
+ {
84
+ return xml2dom(
85
+ `<xsl:stylesheet version="1.0"
86
+ xmlns:xsl="${ XSL_NS_URL }">
87
+ <xsl:output method="html" />
88
+
89
+ <xsl:template match="/">
90
+ <xsl:apply-templates select="//attributes"/>
91
+ </xsl:template>
92
+ <xsl:template match="attributes">
93
+ ${ bodyXml( this ) }
94
+ </xsl:template>
95
+
96
+ </xsl:stylesheet>` );
97
+ }
98
+ }
99
+
100
+ window.customElements.define( 'custom-element', CustomElement );
81
101
  export default CustomElement;
package/index.html CHANGED
@@ -1,150 +1,150 @@
1
- <!DOCTYPE html>
2
- <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
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
- <script type="module" src="custom-element.js"></script>
7
- <style>
8
- body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
9
- nav{ flex-direction: column;}
10
- dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile
11
- { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
12
- dd{ padding: 1rem;}
13
- p{ margin: 0;}
14
- </style>
15
- </head>
16
- <body>
17
- <nav>
18
- <h3><code>custom-element</code> demo</h3>
19
- <div><a href="https://github.com/EPA-WG/custom-element"
20
- ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg" alt="icon">GIT</a>
21
- | <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html">Sandbox</a>
22
- </div>
23
- <p>
24
- This <em>Declarative Custom Element</em> allows to define<br/>
25
- custom HTML tag with template filled from slots, attributes, dataset. </p>
26
- <p>The template is fully loaded with variables, conditions, loops, etc. <br/>
27
- The data query is powered by XPath. </p>
28
- <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
29
- </nav>
30
- <html-demo-element legend="1. simple payload"
31
- description="payload is ignored as in DCE definition there is no default slot">
32
- <template>
33
- <custom-element tag="dce-link" hidden>
34
- <a href="#">link 😃</a>
35
- </custom-element>
36
- <dce-link><i>🍋</i></dce-link>
37
- </template>
38
- </html-demo-element>
39
-
40
- <html-demo-element legend="2. payload with slot definition and slot value"
41
- description="slots are filled as in template+shadow root">
42
- <template>
43
- <custom-element tag="dce-1-slot" hidden>
44
- <slot name="slot1"> 😃</slot>
45
- </custom-element>
46
- <dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
47
- </template>
48
- </html-demo-element>
49
-
50
- <html-demo-element legend="2a. payload with slot definition and slot value"
51
- description="same slot can be used multiple times unlike in TEMPLATE">
52
- <template>
53
- <custom-element tag="dce-2-slots" hidden>
54
- <slot name="slot2"> 😃</slot> and again:
55
- <slot name="slot2"> 😃</slot>
56
- </custom-element>
57
- <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
58
- </template>
59
- </html-demo-element>
60
-
61
- <html-demo-element legend="2b. named default slot"
62
- description="slot without `name` attribute or with blank value `name=''` use whole payload">
63
- <template>
64
- <custom-element tag="dce-3-slot" hidden>
65
- #1
66
- <slot name=""> 😃</slot>
67
- and
68
- <slot> 😃</slot>
69
- </custom-element>
70
- <dce-3-slot><i slot="">🥕</i></dce-3-slot>
71
- </template>
72
- </html-demo-element>
73
-
74
- <html-demo-element legend="2c. named default slot"
75
- description="slot without `name` attribute or with blank value `name=''` use whole payload">
76
- <template>
77
- <custom-element tag="dce-4-slot" hidden>
78
- #2
79
- <slot name=""> 😃</slot>
80
- and
81
- <slot> 😃</slot>
82
- </custom-element>
83
- <dce-4-slot>🥕</dce-4-slot>
84
- </template>
85
- </html-demo-element>
86
- <html-demo-element legend="2d. default slot"
87
- description="slot without `name` attribute use whole payload">
88
- <template>
89
-
90
- <custom-element tag="greet-element" hidden>
91
- <slot> Hello </slot> World!
92
- </custom-element>
93
- <greet-element>👋</greet-element>
94
- </template>
95
- </html-demo-element>
96
-
97
- <html-demo-element legend="3. 💪 DCE template "
98
- description="Complex case with slots, attributes, dataset, conditional render">
99
- <template>
100
-
101
- <custom-element tag="pokemon-tile" hidden>
102
- <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
103
- mapped into /*/attributes/title -->
104
- <xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
105
- mapped into /*/dataset/smile
106
- used in condition -->
107
- <!-- data-smile DCE instance attribute, used as HTML -->
108
- <div>Smile as: <xsl:value-of select='//smile'/></div>
109
- </xsl:if>
110
- <!-- image would not be visible in sandbox, see live demo -->
111
- <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
112
- alt="{title} image"/>
113
- <!-- image-src and title are DCE instance attributes,
114
- mapped into /*/attributes/
115
- used within output attribute via curly brackets -->
116
-
117
- <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
118
- <p><slot name="description"><i>description is not available</i></slot></p>
119
- <xsl:for-each select="//*[@pokemon-id]">
120
- <!-- loop over payload elements with `pokemon-id` attribute -->
121
- <button>
122
- <img height="32"
123
- src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
124
- alt="{text()}"/>
125
- <br/>
126
- <xsl:value-of select='text()'/>
127
- </button>
128
-
129
- </xsl:for-each>
130
- </custom-element>
131
-
132
- <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
133
- <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
134
- the seed grows in size as the Pokémon does.</p>
135
- <ul>
136
- <li pokemon-id="2">ivysaur</li>
137
- <li pokemon-id="3">venusaur</li>
138
- </ul>
139
- </pokemon-tile>
140
-
141
- <pokemon-tile title="ninetales" pokemon-id="38" >
142
- <li pokemon-id="37">vulpix</li>
143
- </pokemon-tile>
144
- </template>
145
- </html-demo-element>
146
-
147
- <script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
148
-
149
- </body>
150
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
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
+ <script type="module" src="custom-element.js"></script>
7
+ <style>
8
+ body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
9
+ nav{ flex-direction: column;}
10
+ dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile
11
+ { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
12
+ dd{ padding: 1rem;}
13
+ p{ margin: 0;}
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <nav>
18
+ <h3><code>custom-element</code> demo</h3>
19
+ <div><a href="https://github.com/EPA-WG/custom-element"
20
+ ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg" alt="icon">GIT</a>
21
+ | <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html">Sandbox</a>
22
+ </div>
23
+ <p>
24
+ This <em>Declarative Custom Element</em> allows to define<br/>
25
+ custom HTML tag with template filled from slots, attributes, dataset. </p>
26
+ <p>The template is fully loaded with variables, conditions, loops, etc. <br/>
27
+ The data query is powered by XPath. </p>
28
+ <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
29
+ </nav>
30
+ <html-demo-element legend="1. simple payload"
31
+ description="payload is ignored as in DCE definition there is no default slot">
32
+ <template>
33
+ <custom-element tag="dce-link" hidden>
34
+ <a href="#">link 😃</a>
35
+ </custom-element>
36
+ <dce-link><i>🍋</i></dce-link>
37
+ </template>
38
+ </html-demo-element>
39
+
40
+ <html-demo-element legend="2. payload with slot definition and slot value"
41
+ description="slots are filled as in template+shadow root">
42
+ <template>
43
+ <custom-element tag="dce-1-slot" hidden>
44
+ <slot name="slot1"> 😃</slot>
45
+ </custom-element>
46
+ <dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
47
+ </template>
48
+ </html-demo-element>
49
+
50
+ <html-demo-element legend="2a. payload with slot definition and slot value"
51
+ description="same slot can be used multiple times unlike in TEMPLATE">
52
+ <template>
53
+ <custom-element tag="dce-2-slots" hidden>
54
+ <slot name="slot2"> 😃</slot> and again:
55
+ <slot name="slot2"> 😃</slot>
56
+ </custom-element>
57
+ <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
58
+ </template>
59
+ </html-demo-element>
60
+
61
+ <html-demo-element legend="2b. named default slot"
62
+ description="slot without `name` attribute or with blank value `name=''` use whole payload">
63
+ <template>
64
+ <custom-element tag="dce-3-slot" hidden>
65
+ #1
66
+ <slot name=""> 😃</slot>
67
+ and
68
+ <slot> 😃</slot>
69
+ </custom-element>
70
+ <dce-3-slot><i slot="">🥕</i></dce-3-slot>
71
+ </template>
72
+ </html-demo-element>
73
+
74
+ <html-demo-element legend="2c. named default slot"
75
+ description="slot without `name` attribute or with blank value `name=''` use whole payload">
76
+ <template>
77
+ <custom-element tag="dce-4-slot" hidden>
78
+ #2
79
+ <slot name=""> 😃</slot>
80
+ and
81
+ <slot> 😃</slot>
82
+ </custom-element>
83
+ <dce-4-slot>🥕</dce-4-slot>
84
+ </template>
85
+ </html-demo-element>
86
+ <html-demo-element legend="2d. default slot"
87
+ description="slot without `name` attribute use whole payload">
88
+ <template>
89
+
90
+ <custom-element tag="greet-element" hidden>
91
+ <slot> Hello </slot> World!
92
+ </custom-element>
93
+ <greet-element>👋</greet-element>
94
+ </template>
95
+ </html-demo-element>
96
+
97
+ <html-demo-element legend="3. 💪 DCE template "
98
+ description="Complex case with slots, attributes, dataset, conditional render">
99
+ <template>
100
+
101
+ <custom-element tag="pokemon-tile" hidden>
102
+ <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
103
+ mapped into /*/attributes/title -->
104
+ <xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
105
+ mapped into /*/dataset/smile
106
+ used in condition -->
107
+ <!-- data-smile DCE instance attribute, used as HTML -->
108
+ <div>Smile as: <xsl:value-of select='//smile'/></div>
109
+ </xsl:if>
110
+ <!-- image would not be visible in sandbox, see live demo -->
111
+ <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
112
+ alt="{title} image"/>
113
+ <!-- image-src and title are DCE instance attributes,
114
+ mapped into /*/attributes/
115
+ used within output attribute via curly brackets -->
116
+
117
+ <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
118
+ <p><slot name="description"><i>description is not available</i></slot></p>
119
+ <xsl:for-each select="//*[@pokemon-id]">
120
+ <!-- loop over payload elements with `pokemon-id` attribute -->
121
+ <button>
122
+ <img height="32"
123
+ src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
124
+ alt="{text()}"/>
125
+ <br/>
126
+ <xsl:value-of select='text()'/>
127
+ </button>
128
+
129
+ </xsl:for-each>
130
+ </custom-element>
131
+
132
+ <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
133
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
134
+ the seed grows in size as the Pokémon does.</p>
135
+ <ul>
136
+ <li pokemon-id="2">ivysaur</li>
137
+ <li pokemon-id="3">venusaur</li>
138
+ </ul>
139
+ </pokemon-tile>
140
+
141
+ <pokemon-tile title="ninetales" pokemon-id="38" >
142
+ <li pokemon-id="37">vulpix</li>
143
+ </pokemon-tile>
144
+ </template>
145
+ </html-demo-element>
146
+
147
+ <script type="module" src="https://unpkg.com/html-demo-element@1.0/html-demo-element.js"></script>
148
+
149
+ </body>
150
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epa-wg/custom-element",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
5
5
  "browser": "custom-element.js",
6
6
  "module": "custom-element.js",
package/.idea/custom-element.iml DELETED
@@ -1,9 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <module type="JAVA_MODULE" version="4">
3
- <component name="NewModuleRootManager" inherit-compiler-output="true">
4
- <exclude-output />
5
- <content url="file://$MODULE_DIR$" />
6
- <orderEntry type="inheritedJdk" />
7
- <orderEntry type="sourceFolder" forTests="false" />
8
- </component>
9
- </module>
package/.idea/inspectionProfiles/Project_Default.xml DELETED
@@ -1,28 +0,0 @@
1
- <component name="InspectionProjectProfileManager">
2
- <profile version="1.0">
3
- <option name="myName" value="Project Default" />
4
- <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
5
- <option name="myValues">
6
- <value>
7
- <list size="14">
8
- <item index="0" class="java.lang.String" itemvalue="nobr" />
9
- <item index="1" class="java.lang.String" itemvalue="noembed" />
10
- <item index="2" class="java.lang.String" itemvalue="comment" />
11
- <item index="3" class="java.lang.String" itemvalue="noscript" />
12
- <item index="4" class="java.lang.String" itemvalue="embed" />
13
- <item index="5" class="java.lang.String" itemvalue="script" />
14
- <item index="6" class="java.lang.String" itemvalue="dce-link" />
15
- <item index="7" class="java.lang.String" itemvalue="dce-1-slot" />
16
- <item index="8" class="java.lang.String" itemvalue="dce-2-slots" />
17
- <item index="9" class="java.lang.String" itemvalue="greet-element" />
18
- <item index="10" class="java.lang.String" itemvalue="pokemon-tile" />
19
- <item index="11" class="java.lang.String" itemvalue="html-demo-element" />
20
- <item index="12" class="java.lang.String" itemvalue="custom-element" />
21
- <item index="13" class="java.lang.String" itemvalue="slot" />
22
- </list>
23
- </value>
24
- </option>
25
- <option name="myCustomValuesEnabled" value="true" />
26
- </inspection_tool>
27
- </profile>
28
- </component>
package/.idea/misc.xml DELETED
@@ -1,6 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="ProjectRootManager">
4
- <output url="file://$PROJECT_DIR$/out" />
5
- </component>
6
- </project>
package/.idea/modules.xml DELETED
@@ -1,8 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="ProjectModuleManager">
4
- <modules>
5
- <module fileurl="file://$PROJECT_DIR$/.idea/custom-element.iml" filepath="$PROJECT_DIR$/.idea/custom-element.iml" />
6
- </modules>
7
- </component>
8
- </project>
package/.idea/php.xml DELETED
@@ -1,12 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="MessDetectorOptionsConfiguration">
4
- <option name="transferred" value="true" />
5
- </component>
6
- <component name="PHPCSFixerOptionsConfiguration">
7
- <option name="transferred" value="true" />
8
- </component>
9
- <component name="PHPCodeSnifferOptionsConfiguration">
10
- <option name="transferred" value="true" />
11
- </component>
12
- </project>
package/.idea/vcs.xml DELETED
@@ -1,6 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="VcsDirectoryMappings">
4
- <mapping directory="" vcs="Git" />
5
- </component>
6
- </project>
package/0/1.xml DELETED
@@ -1,23 +0,0 @@
1
- <div>
2
- <payload>
3
- <span slot="">
4
- <br>
5
- <br>
6
- </span>
7
- <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;\n the seed
8
- grows in size as the Pokémon does.
9
- </p>
10
- <span slot="">
11
- <br>
12
- <br>
13
- </span>
14
- </payload>
15
- <attributes>
16
- <title>bulbasaur</title>
17
- <data-smile>👼</data-smile>
18
- <image-src>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg</image-src>
19
- </attributes>
20
- <dataset>
21
- <smile>👼</smile>
22
- </dataset>
23
- </div>
package/0/1.xsl DELETED
@@ -1,26 +0,0 @@
1
- <xsl:stylesheet version="1.0"
2
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
- <xsl:output method="html" />
4
-
5
- <xsl:template match="/">
6
- <xsl:apply-templates select="//attributes"/>
7
- </xsl:template>
8
- <xsl:template match="attributes">
9
-
10
- <h3><xsl:value-of select="title"></xsl:value-of></h3> <!-- title is an attribute in instance
11
- mapped into /*/attributes/title -->
12
- <xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
13
- mapped into /*/dataset/smile
14
- used in condition -->
15
- <!-- data-smile DCE instance attribute, used as HTML -->
16
- <div>Smile as: <xsl:value-of select="//smile"></xsl:value-of></div>
17
- </xsl:if>
18
- <img src="{image-src}" alt="{title}" /> <!-- image-src and title are DCE instance attributes,
19
- mapped into /*/attributes/
20
- used within output attribute via curly brackets -->
21
- <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
22
- <p><value-of xmlns="http://www.w3.org/1999/XSL/Transform" select="//*[@slot=&quot;description&quot;]"/></p>
23
-
24
- </xsl:template>
25
-
26
- </xsl:stylesheet>
package/0/a.html DELETED
@@ -1,42 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
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
- <script type="module" src="../custom-element.js"></script>
7
- <style>
8
- body{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
9
- dce-link,dce-1-slot,dce-2-slots,greet-element,pokemon-tile
10
- { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
11
- </style>
12
- </head>
13
- <body>
14
- <custom-element tag="pokemon-tile" hidden>
15
- <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
16
- mapped into /*/attributes/title -->
17
- <xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
18
- mapped into /*/dataset/smile
19
- used in condition -->
20
- <!-- data-smile DCE instance attribute, used as HTML -->
21
- <div>Smile as: <xsl:value-of select='//smile'/></div>
22
- </xsl:if>
23
- <img src="{image-src}" alt="{title}"/> <!-- image-src and title are DCE instance attributes,
24
- mapped into /*/attributes/
25
- used within output attribute via curly brackets -->
26
- <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
27
- <p><slot name="description"><i>description is not available</i></slot></p>
28
- </custom-element>
29
- <pokemon-tile title="bulbasaur"
30
- data-smile="👼"
31
- image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg">
32
-
33
- <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
34
- the seed grows in size as the Pokémon does.</p>
35
-
36
- </pokemon-tile>
37
-
38
- <pokemon-tile title="ninetales"
39
- image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/38.svg">
40
- </pokemon-tile>
41
- </body>
42
- </html>