@epa-wg/custom-element 0.0.1 → 0.0.3

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 (6) hide show
  1. package/.gitignore +1 -0
  2. package/.idea/php.xml +12 -0
  3. package/README.md +38 -34
  4. package/custom-element.js +2 -2
  5. package/index.html +13 -11
  6. package/package.json +2 -1
package/.gitignore CHANGED
@@ -105,3 +105,4 @@ dist
105
105
 
106
106
  /.idea/
107
107
  /0/
108
+ /package-lock.json
package/.idea/php.xml ADDED
@@ -0,0 +1,12 @@
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/README.md CHANGED
@@ -6,53 +6,56 @@ It allows to define custom HTML tag with template filled from slots and attribut
6
6
 
7
7
  [![git][github-image] GitHub][git-url]
8
8
  | Live demo: [custom-element][demo-url]
9
+ | Try in [Sandbox][sandbox-url]
9
10
  | [tests project][git-test-url]
10
11
 
11
- [![NPM version][npm-image]][npm-url] [![coverage][coverage-image]][coverage-url]
12
+ [![NPM version][npm-image]][npm-url]
13
+
14
+ [//]: # ([![coverage][coverage-image]][coverage-url])
12
15
 
13
16
  # use
14
17
  ## install
15
18
  use via CDN
16
19
  ```html
17
- <script type="module" src="https://unpkg.com/epa-wg/custom-element/@0.0/custom-element.js"></script>
20
+ <script type="module" src="https://unpkg.com/@epa-wg/custom-element@0.0/custom-element.js"></script>
18
21
  ```
19
22
  NPM
20
23
  ```shell
21
- npm i -P epa-wg/custom-element
24
+ npm i -P @epa-wg/custom-element
22
25
  ```
23
26
  yarn
24
27
  ```shell
25
- yarn add epa-wg/custom-element
28
+ yarn add @epa-wg/custom-element
26
29
  ```
27
30
 
28
31
  ## [Live demo][demo-url]
29
32
  ```html
30
- <custom-element tag="pokemon-tile" hidden>
31
- <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
32
- mapped into /*/attributes/title -->
33
- <xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
34
- mapped into /*/dataset/smile
35
- used in condition -->
36
- <!-- data-smile DCE instance attribute, used as HTML -->
37
- <div>Smile as: <xsl:value-of select='//smile'/></div>
38
- </xsl:if>
39
- <img src="{image-src}" alt="{title}"/> <!-- image-src and title are DCE instance attributes,
40
- mapped into /*/attributes/
41
- used within output attribute via curly brackets -->
42
- <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
43
- <p><slot name="description"><i>description is not available</i></slot></p>
44
- </custom-element>
45
-
46
- <pokemon-tile title="bulbasaur"
47
- data-smile="👼"
48
- image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg">
49
- <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
50
- the seed grows in size as the Pokémon does.</p>
51
- </pokemon-tile>
33
+ <custom-element tag="pokemon-tile" hidden>
34
+ <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
35
+ mapped into /*/attributes/title -->
36
+ <xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
37
+ mapped into /*/dataset/smile
38
+ used in condition -->
39
+ <!-- data-smile DCE instance attribute, used as HTML -->
40
+ <div>Smile as: <xsl:value-of select='//smile'/></div>
41
+ </xsl:if>
42
+ <!-- image would not be visible in sandbox, see live demo -->
43
+ <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
44
+ alt="{title} image"/>
45
+ <!-- image-src and title are DCE instance attributes,
46
+ mapped into /*/attributes/
47
+ used within output attribute via curly brackets -->
48
+
49
+ <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
50
+ <p><slot name="description"><i>description is not available</i></slot></p>
51
+ </custom-element>
52
+
53
+ <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
54
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
55
+ the seed grows in size as the Pokémon does.</p>
56
+ </pokemon-tile>
52
57
 
53
- <pokemon-tile title="ninetales"
54
- image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/38.svg">
55
- </pokemon-tile>
58
+ <pokemon-tile title="ninetales" pokemon-id="38" ></pokemon-tile>
56
59
  ```
57
60
  generates HTML
58
61
  ```html
@@ -137,9 +140,10 @@ within template
137
140
 
138
141
  [git-url]: https://github.com/EPA-WG/custom-element
139
142
  [git-test-url]: https://github.com/EPA-WG/custom-element-test
140
- [demo-url]: https://unpkg.com/epa-wg/custom-element/@0.0/index.html
143
+ [demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/index.html
141
144
  [github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
142
- [npm-image]: https://img.shields.io/npm/v/epa-wg/custom-element.svg
143
- [npm-url]: https://npmjs.org/package/epa-wg/custom-element
144
- [coverage-image]: https://unpkg.com/epa-wg/custom-element-test@0.0.2/coverage/coverage.svg
145
- [coverage-url]: https://unpkg.com/epa-wg/custom-element-test@0.0.2/coverage/lcov-report/index.html
145
+ [npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
146
+ [npm-url]: https://npmjs.org/package/@epa-wg/custom-element
147
+ [coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.3/coverage/coverage.svg
148
+ [coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.3/coverage/lcov-report/index.html
149
+ [sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
package/custom-element.js CHANGED
@@ -59,8 +59,8 @@ export class CustomElement extends HTMLElement
59
59
  </xsl:template>
60
60
 
61
61
  </xsl:stylesheet>` ) );
62
-
63
- window.customElements.define( this.getAttribute( 'tag' ), class extends HTMLElement
62
+ const tag = this.getAttribute( 'tag' );
63
+ tag && window.customElements.define( tag, class extends HTMLElement
64
64
  {
65
65
  constructor()
66
66
  {
package/index.html CHANGED
@@ -10,17 +10,20 @@
10
10
  dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile
11
11
  { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block;}
12
12
  dd{ padding: 1rem;}
13
+ p{ margin: 0;}
13
14
  </style>
14
15
  </head>
15
16
  <body>
16
17
  <nav>
17
18
  <h3><code>custom-element</code> demo</h3>
18
- <a href="https://github.com/EPA-WG/custom-element"
19
+ <a href="https://github.com/EPA-WG/custom-element"
19
20
  ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">GIT</a>
20
21
  <p>
21
22
  This <em>Declarative Custom Element</em> allows to define<br/>
22
- custom HTML tag with template filled from slots and attributes.
23
- </p>
23
+ custom HTML tag with template filled from slots, attributes, dataset. </p>
24
+ <p>The template is fully loaded with variables, conditions, loops, etc. <br/>
25
+ The data query is powered by XPath. </p>
26
+ <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
24
27
  </nav>
25
28
  <html-demo-element legend="1. simple payload"
26
29
  description="payload is ignored as in DCE definition there is no default slot">
@@ -102,24 +105,23 @@
102
105
  <!-- data-smile DCE instance attribute, used as HTML -->
103
106
  <div>Smile as: <xsl:value-of select='//smile'/></div>
104
107
  </xsl:if>
105
- <img src="{image-src}" alt="{title}"/> <!-- image-src and title are DCE instance attributes,
108
+ <!-- image would not be visible in sandbox, see live demo -->
109
+ <img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
110
+ alt="{title} image"/>
111
+ <!-- image-src and title are DCE instance attributes,
106
112
  mapped into /*/attributes/
107
113
  used within output attribute via curly brackets -->
114
+
108
115
  <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
109
116
  <p><slot name="description"><i>description is not available</i></slot></p>
110
117
  </custom-element>
111
- <pokemon-tile title="bulbasaur"
112
- data-smile="👼"
113
- image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/1.svg">
114
118
 
119
+ <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
115
120
  <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
116
121
  the seed grows in size as the Pokémon does.</p>
117
-
118
122
  </pokemon-tile>
119
123
 
120
- <pokemon-tile title="ninetales"
121
- image-src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/38.svg">
122
- </pokemon-tile>
124
+ <pokemon-tile title="ninetales" pokemon-id="38" ></pokemon-tile>
123
125
  </template>
124
126
  </html-demo-element>
125
127
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epa-wg/custom-element",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
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",
@@ -15,6 +15,7 @@
15
15
  "type": "module",
16
16
  "types": "./custom-element.d.ts",
17
17
  "scripts": {
18
+ "start": "npm i --no-save @web/dev-server && web-dev-server --node-resolve",
18
19
  "test": "echo \"test would reside in https://github.com/EPA-WG/custom-element-test\" && exit 0",
19
20
  "typings": "npx -p typescript tsc custom-element.js --declaration --allowJs --emitDeclarationOnly "
20
21
  },