@epa-wg/custom-element 0.0.3 → 0.0.5

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/.github/workflows/npm-publish-github-packages.yml +36 -0
  2. package/.gitignore +0 -1
  3. package/README.md +5 -7
  4. package/bin/stackblitz.sh +5 -0
  5. package/index.html +22 -3
  6. package/package.json +2 -1
package/.github/workflows/npm-publish-github-packages.yml ADDED
@@ -0,0 +1,36 @@
1
+ # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2
+ # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
3
+
4
+ name: Node.js Package
5
+
6
+ on:
7
+ release:
8
+ types: [created]
9
+
10
+ jobs:
11
+ build:
12
+ runs-on: ubuntu-latest
13
+ steps:
14
+ - uses: actions/checkout@v3
15
+ - uses: actions/setup-node@v3
16
+ with:
17
+ node-version: 16
18
+ - run: npm ci
19
+ - run: npm test
20
+
21
+ publish-gpr:
22
+ needs: build
23
+ runs-on: ubuntu-latest
24
+ permissions:
25
+ contents: read
26
+ packages: write
27
+ steps:
28
+ - uses: actions/checkout@v3
29
+ - uses: actions/setup-node@v3
30
+ with:
31
+ node-version: 16
32
+ registry-url: https://npm.pkg.github.com/
33
+ - run: npm ci
34
+ - run: npm publish
35
+ env:
36
+ NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
package/.gitignore CHANGED
@@ -105,4 +105,3 @@ dist
105
105
 
106
106
  /.idea/
107
107
  /0/
108
- /package-lock.json
package/README.md CHANGED
@@ -8,10 +8,7 @@ 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
-
12
- [![NPM version][npm-image]][npm-url]
13
-
14
- [//]: # ([![coverage][coverage-image]][coverage-url])
11
+ [![NPM version][npm-image]][npm-url] [![coverage][coverage-image]][coverage-url]
15
12
 
16
13
  # use
17
14
  ## install
@@ -144,6 +141,7 @@ within template
144
141
  [github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
145
142
  [npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
146
143
  [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
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
146
+ [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
package/bin/stackblitz.sh ADDED
@@ -0,0 +1,5 @@
1
+ ## needed for stackblitz sandbox
2
+ ## https://stackblitz.com/github/EPA-WG/custom-element
3
+ npm i @web/dev-server
4
+ web-dev-server --node-resolve
5
+ echo "stackblitz scripts changes package.json"
package/index.html CHANGED
@@ -16,8 +16,10 @@
16
16
  <body>
17
17
  <nav>
18
18
  <h3><code>custom-element</code> demo</h3>
19
- <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">GIT</a>
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>
21
23
  <p>
22
24
  This <em>Declarative Custom Element</em> allows to define<br/>
23
25
  custom HTML tag with template filled from slots, attributes, dataset. </p>
@@ -114,14 +116,31 @@
114
116
 
115
117
  <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
116
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>
117
130
  </custom-element>
118
131
 
119
132
  <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
120
133
  <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
121
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>
122
139
  </pokemon-tile>
123
140
 
124
- <pokemon-tile title="ninetales" pokemon-id="38" ></pokemon-tile>
141
+ <pokemon-tile title="ninetales" pokemon-id="38" >
142
+ <li pokemon-id="37">vulpix</li>
143
+ </pokemon-tile>
125
144
  </template>
126
145
  </html-demo-element>
127
146
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epa-wg/custom-element",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
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
+ "dev": "bash bin/stackblitz.sh",
18
19
  "start": "npm i --no-save @web/dev-server && web-dev-server --node-resolve",
19
20
  "test": "echo \"test would reside in https://github.com/EPA-WG/custom-element-test\" && exit 0",
20
21
  "typings": "npx -p typescript tsc custom-element.js --declaration --allowJs --emitDeclarationOnly "