Merge pull request #5 from EPA-WG/develop

0.0.26

.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<script type="importmap">
+{
+    "imports": {
+        "lib-root/": "./demo/lib-dir/",
+        "embed-lib": "./demo/lib-dir/embed-lib.html"
+    }
+}
+</script>

.storybook/preview.ts

@@ -1,18 +1,24 @@
-import {initialize, mswLoader}       from 'msw-storybook-addon'
+import {initialize, mswLoader} from 'msw-storybook-addon'
+import {handlers} from "../src/mocks/handlers";
 
-initialize({ onUnhandledRequest: 'bypass' });// SB
+initialize({onUnhandledRequest: 'bypass'});// SB
 
 const preview = {
     parameters: {
         controls: {
             matchers: {
                 color: /(background|color)$/i,
-                date:  /Date$/i
+                date: /Date$/i
             }
-        }
+        },
+        msw: {
+            handlers: {
+                auth: null,
+                others: handlers,
+            },
+        },
     },
-
-    loaders:    [mswLoader],
+    loaders: [mswLoader],
     tags: ['autodocs']
 };
 

README.md

@@ -26,7 +26,7 @@ CDN version of StoryBook.
 [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-dist.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/index.html
-[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html
-[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/dist/custom-element-bundle.js
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/index.html
+[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html
+[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/dist/custom-element-bundle.js

bin/postinstall.sh

@@ -12,6 +12,7 @@ pwd
 cp ../../node_modules/@epa-wg/custom-element/*.d.ts .
 cp ../../node_modules/@epa-wg/custom-element/*.js .
 cp ../../node_modules/@epa-wg/custom-element/index.html index.html
-cp ../../node_modules/@epa-wg/custom-element/demo/* demo/
-cp ../../node_modules/@epa-wg/custom-element/ide/* ide/
+cp -r ../../node_modules/@epa-wg/custom-element/demo/* demo/
+cp -r ../../node_modules/@epa-wg/custom-element/ide/* ide/
 
+cp -r demo ../../public

bin/vitest/vitest-browser-importmaps.mjs

@@ -0,0 +1,20 @@
+// injects importmaps for module-url.test.stories.ts
+//           see notes in ^^
+import fs from 'node:fs'
+
+const pathName = 'node_modules/@vitest/browser/dist/client/tester/tester.html';
+const jsStr = fs.readFileSync(pathName).toString();
+if( !jsStr.includes('importmap') ) // skip if already patched
+{
+    const injectedStr = jsStr.replace('</style>', `</style>
+<script type="importmap">
+    {
+        "imports": {
+            "lib-root/": "../../../demo/lib-dir/",
+            "embed-lib": "../../../demo/lib-dir/embed-lib.html"
+        }
+    }
+</script>
+`);
+    fs.writeFileSync(pathName, injectedStr);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,14 +10,14 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest --coverage.enabled --coverage.all --no-file-parallelism --watch=false",
+    "test": "node bin/vitest/vitest-browser-importmaps.mjs && vitest --coverage.enabled --coverage.all --no-file-parallelism --watch=false",
     "test:watch": "vitest --inspect-brk --no-file-parallelism --browser.headless=false --test-timeout=0",
     "test:storybook": "test-storybook",
     "sb": "yarn storybook",
-    "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/module-url.test.stories.ts"
+    "t": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --watch --browser.headless=false src/stories/module-url.test.stories.ts"
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.25"
+    "@epa-wg/custom-element": "0.0.26"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.7.0",

public/demo/a.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
+</head>
+<body>
+
+<fieldset>
+    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
+            style="color:red">red</i> in 1st instance
+    </legend>
+    <custom-element tag="dce-3">
+        <template>
+            <u>
+                <slot>is green</slot>
+            </u>
+        </template>
+        <style>dce-3 {
+            color: green
+        }</style>
+    </custom-element>
+   <u>should be</u> <i style="color:red">red</i>:
+    <dce-3 id="dce32">
+        <template>
+            <style> color:red; </style>
+            <u>red</u>
+        </template>
+    </dce-3> <br/>
+    should be GREEN:
+    <dce-3 id="dce31">green</dce-3>
+</fieldset>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

public/demo/b.html

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><u data-dce-id="2" xmlns="">
+    <dce-text data-dce-id="3">
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
+            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
+        </xhtml:style>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+    </dce-text>
+</u></dce-root>