@epa-wg/custom-element 0.0.2 → 0.0.4

package/.github/workflows/npm-publish-github-packages.yml

@@ -0,0 +1,36 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.gitignore

@@ -105,4 +105,3 @@ dist
 
 /.idea/
 /0/
-/package-lock.json

package/README.md

@@ -144,6 +144,6 @@ within template
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.2/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.2/coverage/lcov-report/index.html
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.4/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.4/coverage/lcov-report/index.html
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html

package/bin/stackblitz.sh

@@ -0,0 +1,5 @@
+## needed for stackblitz sandbox
+## https://stackblitz.com/github/EPA-WG/custom-element
+npm i @web/dev-server
+web-dev-server --node-resolve
+echo "stackblitz scripts changes package.json"

package/custom-element.js

@@ -59,8 +59,8 @@ export class CustomElement extends HTMLElement
   </xsl:template>
 
 </xsl:stylesheet>` ) );
-
-        window.customElements.define( this.getAttribute( 'tag' ), class extends HTMLElement
+        const tag =  this.getAttribute( 'tag' );
+        tag && window.customElements.define( tag, class extends HTMLElement
         {
             constructor()
             {

package/index.html

@@ -17,7 +17,7 @@
 <nav>
     <h3><code>custom-element</code> demo</h3>
     <a href="https://github.com/EPA-WG/custom-element"
-    ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">GIT</a>
+    ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg" alt="icon">GIT</a>
     <p>
         This <em>Declarative Custom Element</em> allows to define<br/>
         custom HTML tag with template filled from slots, attributes, dataset. </p>
@@ -114,14 +114,31 @@
 
                                                     <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
             <p><slot name="description"><i>description is not available</i></slot></p>
+            <xsl:for-each select="//*[@pokemon-id]">
+                                                    <!-- loop over payload elements with `pokemon-id` attribute -->
+                <button>
+                    <img height="32"
+                        src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                        alt="{text()}"/>
+                    <br/>
+                    <xsl:value-of select='text()'/>
+                </button>
+
+            </xsl:for-each>
         </custom-element>
 
         <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
             <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
                 the seed grows in size as the Pokémon  does.</p>
+            <ul>
+                <li pokemon-id="2">ivysaur</li>
+                <li pokemon-id="3">venusaur</li>
+            </ul>
         </pokemon-tile>
 
-        <pokemon-tile title="ninetales" pokemon-id="38" ></pokemon-tile>
+        <pokemon-tile title="ninetales" pokemon-id="38" >
+                <li pokemon-id="37">vulpix</li>
+        </pokemon-tile>
     </template>
 </html-demo-element>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",
@@ -15,7 +15,8 @@
     "type": "module",
     "types": "./custom-element.d.ts",
     "scripts": {
-        "start": "npm i @web/dev-server && web-dev-server --node-resolve",
+        "dev": "bash bin/stackblitz.sh",
+        "start": "npm i --no-save @web/dev-server && web-dev-server --node-resolve",
         "test": "echo \"test would reside in https://github.com/EPA-WG/custom-element-test\" && exit 0",
         "typings": "npx -p typescript tsc custom-element.js --declaration --allowJs --emitDeclarationOnly "
     },
@@ -43,8 +44,5 @@
     "funding": {
         "type": "patreon",
         "url": "https://www.patreon.com/sashafirsov"
-    },
-    "dependencies": {
-        "@web/dev-server": "^0.1.35"
     }
 }