@epa-wg/custom-element-dist 0.0.24 → 0.0.25

package/src/custom-element/ide/customData-dce.json

@@ -120,6 +120,62 @@
           "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
         }
       ]
+    },
+    {
+      "name": "location-element",
+      "description": "get/set window URL parts or from SRC URL",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "url to be parsed. When omitted window.location is used.",
+          "type": "string",
+          "references": [
+            {
+              "name": "MDN docs",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
+            }
+          ]
+        },
+        {
+          "name": "live",
+          "description": "monitors history change, applicable only when href is omitted.",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html"
+            }
+          ]
+        },
+        {
+          "name": "src",
+          "description": "sets the window URL",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html"
+            }
+          ]
+        },
+        {
+          "name": "method",
+          "description": "when defined, changes URL by one of predefined methods.",
+          "type": "string",
+          "references": [
+            {
+              "name": "docs",
+              "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "docs",
+          "url": "https://github.com/EPA-WG/custom-element"
+        }
+      ]
     }
   ]
 }

package/src/custom-element/ide/web-types-dce.json

@@ -1,116 +1,159 @@
 {
-  "$schema": "http://json.schemastore.org/web-types",
-  "name": "@epa-wg/custom-element",
-  "version": "0.0.24",
-  "js-types-syntax": "typescript",
-  "description-markup": "markdown",
-  "contributions": {
-    "html": {
-      "attributes": [
-        {
-          "name": "slice",
-          "description": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
-        },
-        {
-          "name": "slice-event",
-          "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
-        },
-        {
-          "name": "custom-validity",
-          "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
-        },
-        {
-          "name": "slice-value",
-          "description": "XPath expression to populate into the slice",
-          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
-        }
-      ],
-      "elements": [
-        {
-          "name": "custom-element",
-          "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
-          "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#custom-element",
-          "attributes": [
-            {
-              "name": "hidden",
-              "description": "hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.",
-              "required": false,
-              "doc-url": "https://developer.mozilla.org/en-US/docs/web/html/global_attributes/hidden",
-              "value": {
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "tag",
-              "description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline. ",
-              "default": "",
-              "required": false,
-              "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#tag-attribute",
-              "value": {
-                "type": "string"
-              }
-            },
-            {
-              "name": "src",
-              "description": "full, relative, or hash URL to DCE template.",
-              "default": "",
-              "required": false,
-              "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#src-attribute",
-              "value": {
-                "type": "URL"
-              }
-            }
-          ],
-          "slots": [],
-          "js": {
-            "events": [
-              {
-                "name": "value:changed",
-                "description": "Emitted when data changes. Can be used for state serialization in hydration flow"
-              }
+    "$schema": "http://json.schemastore.org/web-types",
+    "name": "@epa-wg/custom-element",
+    "version": "0.0.25",
+    "js-types-syntax": "typescript",
+    "description-markup": "markdown",
+    "contributions": {
+        "html": {
+            "attributes": [
+                {
+                    "name": "slice",
+                    "description": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-event` event\n\nOn: any component with `value` and associated change event",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+                },
+                {
+                    "name": "slice-event",
+                    "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+                },
+                {
+                    "name": "custom-validity",
+                    "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+                },
+                {
+                    "name": "slice-value",
+                    "description": "XPath expression to populate into the slice",
+                    "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
+                }
             ],
-            "properties": [
-              {
-                "name": "value",
-                "type": "string",
-                "default": "",
-                "description": "DCE state. Can be used for state serialization in hydration flow. Format TBD, most likely encoded XML string"
-              }
-            ]
-          },
-          "css": {
-            "properties": [
-            ]
-          }
-        },
-        {
-          "name": "for-each",
-          "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
-          "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each",
-          "attributes": [
-            {
-              "name": "select",
-              "description": "Uses an XPath expression to select nodes to be processed.",
-              "required": true,
-              "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select",
-              "value": {
-                "type": "string"
-              }
-            }
-          ]
-        },
-        {
-          "name": "slice",
-          "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
-          "doc-url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events",
-          "attributes": [
+            "elements": [
+                {
+                    "name": "custom-element",
+                    "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
+                    "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#custom-element",
+                    "attributes": [
+                        {
+                            "name": "hidden",
+                            "description": "hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.",
+                            "required": false,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/web/html/global_attributes/hidden",
+                            "value": {
+                                "type": "boolean"
+                            }
+                        },
+                        {
+                            "name": "tag",
+                            "description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline. ",
+                            "default": "",
+                            "required": false,
+                            "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#tag-attribute",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "src",
+                            "description": "full, relative, or hash URL to DCE template.",
+                            "default": "",
+                            "required": false,
+                            "doc-url": "https://github.com/EPA-WG/custom-element?tab=readme-ov-file#src-attribute",
+                            "value": {
+                                "type": "URL"
+                            }
+                        }
+                    ],
+                    "slots": [ ],
+                    "js": {
+                        "events": [
+                            {
+                                "name": "value:changed",
+                                "description": "Emitted when data changes. Can be used for state serialization in hydration flow"
+                            }
+                        ],
+                        "properties": [
+                            {
+                                "name": "value",
+                                "type": "string",
+                                "default": "",
+                                "description": "DCE state. Can be used for state serialization in hydration flow. Format TBD, most likely encoded XML string"
+                            }
+                        ]
+                    },
+                    "css": {
+                        "properties": [
+                        ]
+                    }
+                },
+                {
+                    "name": "for-each",
+                    "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
+                    "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each",
+                    "attributes": [
+                        {
+                            "name": "select",
+                            "description": "Uses an XPath expression to select nodes to be processed.",
+                            "required": true,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select",
+                            "value": {
+                                "type": "string"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "location-element",
+                    "description": "get/set window URL parts or from SRC URL",
+                    "doc-url": "https://github.com/EPA-WG/custom-element",
+                    "attributes": [
+                        {
+                            "name": "href",
+                            "description": "url to be parsed. When omitted window.location is used.",
+                            "required": false,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/Web/API/Location/href",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "live",
+                            "description": "monitors history change, applicable only when href is omitted.",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "src",
+                            "description": "sets the window URL",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        },
+                        {
+                            "name": "method",
+                            "description": "when defined, changes URL by one of predefined methods.",
+                            "required": false,
+                            "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/set-url.html",
+                            "value": {
+                                "type": "string"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "slice",
+                    "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+                    "doc-url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events",
+                    "attributes": [
 
-          ]
+                    ]
+                }
+            ]
         }
-      ]
     }
-  }
 }

package/src/custom-element/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.25",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/index.html

@@ -30,6 +30,7 @@
         <a href="./demo/local-storage.html"     >local-storage      </a> |
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
+        <a href="./demo/set-url.html"           >set-url            </a> |
         <a href="./demo/external-template.html" >external template  </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |

package/src/custom-element/location-element.js

@@ -16,6 +16,15 @@ function ensureTrackLocationChange()
         }
     });
 }
+const methods =
+{   'location.href'         : src => window.location.href = src
+,   'location.hash'         : src => window.location.hash = src
+,   'location.assign'       : src => window.location.assign( src )
+,   'location.replace'      : src => window.location.replace( src )
+,   'history.pushState'     : src => window.history.pushState( {}, "", src )
+,   'history.replaceState'  : src => window.history.replaceState( {}, "", src )
+};
+
 
 export class LocationElement extends HTMLElement
 {
@@ -25,6 +34,8 @@ export class LocationElement extends HTMLElement
             ,   'href'  // url to be parsed. When omitted window.location is used.
             ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
             ,   'live' // monitors history change, applicable only when href is omitted.
+            ,   'src' // sets the URL
+            ,   'method' // when defined, changes URL by one of predefined methods.
             ];
 
     constructor()
@@ -53,6 +64,17 @@ export class LocationElement extends HTMLElement
         };
         this.sliceInit = s =>
         {
+            if( this.hasAttribute('method') )
+            {
+                const method = this.getAttribute('method');
+                const src = this.getAttribute('src');
+                if( method && src )
+                    if( method === 'location.hash' )
+                    {   if( src !== window.location.hash )
+                            methods[ method ]?.( src );
+                    }else if( window.location.href !== new URL(src, window.location).href )
+                        methods[method]?.(src);
+            }
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
                 window.navigation?.addEventListener("navigate", listener );
@@ -74,8 +96,9 @@ export class LocationElement extends HTMLElement
     }
     attributeChangedCallback(name, oldValue, newValue)
     {
-        if('href'!== name)
-            return;
+        if('href'!== name && 'method' !== name && 'src' )
+            if( !['method','src','href'].includes(name) )
+                return;
         this.sliceInit && this.sliceInit();
     }
 

package/src/custom-element.test.ts

@@ -1,26 +1,26 @@
-import {expect, test}                  from 'vitest'
-import {deepEqual, xml2dom, xmlString, obj2node } from './custom-element/custom-element.js'
-
-test('deepEqual', () =>
-{
-    expect(deepEqual(1, 1)).toBe(true);
-    expect(deepEqual({}, null)).toBe(false);
-    expect(deepEqual({a: 1}, {a: 1, b: 2})).toBe(false);
-    expect(deepEqual({a: 1}, {a: 2})).toBe(false);
-    expect(deepEqual({a: 1}, {a: 1})).toBe(true);
-})
-test('xml2dom', () =>
-{
-    const dom = xml2dom('<a/>');
-    expect(dom.documentElement.localName).to.equal('a');
-    expect(dom.documentElement.childNodes.length).to.equal(0);
-    const xStr = xmlString(dom);
-    expect(xStr).to.include('<a');
-})
-test('obj2node', () =>
-{
-    expect(obj2node(()=>{}      , 'f',document).outerHTML).to.equal('<f></f>'       );
-    expect(obj2node(9           , 'a',document).outerHTML).to.equal('<a>9</a>'      );
-    expect(obj2node('abc'       , 's',document).outerHTML).to.equal('<s>abc</s>'    );
-    expect(obj2node({a:1,b:{c:'abc'}}       , 's',document).outerHTML).to.equal('<s a="1"><b c="abc"></b></s>');
-})
+import {expect, test}                  from 'vitest'
+import {deepEqual, xml2dom, xmlString, obj2node } from './custom-element/custom-element.js'
+
+test('deepEqual', () =>
+{
+    expect(deepEqual(1, 1)).toBe(true);
+    expect(deepEqual({}, null)).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1, b: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1})).toBe(true);
+})
+test('xml2dom', () =>
+{
+    const dom = xml2dom('<a/>');
+    expect(dom.documentElement.localName).to.equal('a');
+    expect(dom.documentElement.childNodes.length).to.equal(0);
+    const xStr = xmlString(dom);
+    expect(xStr).to.include('<a');
+})
+test('obj2node', () =>
+{
+    expect(obj2node(()=>{}      , 'f',document).outerHTML).to.equal('<f></f>'       );
+    expect(obj2node(9           , 'a',document).outerHTML).to.equal('<a>9</a>'      );
+    expect(obj2node('abc'       , 's',document).outerHTML).to.equal('<s>abc</s>'    );
+    expect(obj2node({a:1,b:{c:'abc'}}       , 's',document).outerHTML).to.equal('<s a="1"><b c="abc"></b></s>');
+})

package/src/stories/set-url.test.stories.ts

@@ -0,0 +1,114 @@
+// noinspection DuplicatedCode
+
+import type {StoryObj} from '@storybook/web-components';
+import {expect, getByTestId, userEvent, within} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+import '../custom-element/location-element.js';
+
+type TProps = { title: string; slice: string; href: string; live: string; body: string };
+const defs: TProps =
+    {
+        title: ''
+        , slice: 'url-slice'
+        , href: ''
+        , live: ''
+        , body: ``
+    };
+type Story = StoryObj<TProps>;
+
+function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function render(args: TProps) {
+    const {title, body} = {...defs, ...args};
+    return `
+        <fieldset>
+            <legend>${title}</legend>
+
+            <custom-element>
+<template><!-- wrapping into template to prevent images loading within DCE declaration -->
+
+    ${body}
+    
+</template>
+            </custom-element>
+      </fieldset>
+  `;
+}
+
+const meta =
+    {
+        title: 'location-element set URL'
+        , render
+    };
+
+export default meta;
+
+export const DynamicSrc: Story =
+    {
+        args: {
+            title: '1. Set the page URL by location.hash', body: `
+            <button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
+            <button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
+            <location-element method="location.href" src="{//set-button/@value}"></location-element>`
+        }
+        , play: async ({canvasElement}) => {
+            const canvas = within(canvasElement);
+            await canvas.findByText(DynamicSrc.args!.title as string);
+            await userEvent.click(canvas.getByText('#dce1'));
+            await sleep(1);
+            await expect(window.location.hash).toEqual('#dce1')
+            await userEvent.click(canvas.getByText('#dce2'));
+            await sleep(1);
+            await expect(window.location.hash).toEqual('#dce2')
+        },
+    };
+export const DynamicMethod: Story =
+    {
+        args: {
+            title: '2. Set the page URL by method', body: `
+            <style>
+                button{ display: block; width: 100%; }
+            </style>
+            <button value="location.href"           slice="set-button" slice-event="click"> location.href        </button>
+            <button value="location.hash"           slice="set-button" slice-event="click"> location.hash        </button>
+            <button value="location.assign"         slice="set-button" slice-event="click"> location.assign      </button>
+            <button value="location.replace"        slice="set-button" slice-event="click"> location.replace     </button>
+            <button value="history.pushState"       slice="set-button" slice-event="click"> history.pushState    </button>
+            <button value="history.replaceState"    slice="set-button" slice-event="click"> history.replaceState </button>
+            <location-element method="{//set-button/@value}" ></location-element>`
+        }
+        , play: async ({canvasElement}) => {
+            const canvas = within(canvasElement);
+            const le = canvasElement.querySelector('location-element');
+            await canvas.findByText(DynamicMethod.args!.title as string);
+
+            async function testHash(hash, text) {
+                le.setAttribute('method', ''); // to prevent immediate URL change
+                le.setAttribute('src', hash);
+                await userEvent.click(canvas.getByText(text));
+                await sleep(1);
+                await expect(window.location.hash).toEqual(hash)
+            }
+
+            await testHash('#byHash', 'location.hash');
+            await testHash('#byhref', 'location.href');
+            await testHash('#byassign', 'location.assign');
+            await testHash('#byreplace', 'location.replace');
+            await testHash('#by.history.pushState', 'history.pushState');
+            await testHash('#by.history.replaceState', 'history.replaceState');
+
+        },
+    };
+
+
+/* istanbul ignore else -- @preserve */
+if ('test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest')) {
+    const mod = await import('./set-url.test.stories.ts?skiptest');
+    const {testStoryBook} = await import('./testStoryBook')
+    const {describe} = await import('vitest')
+    describe(meta.title, () => testStoryBook(mod, meta));
+}

package/src/stories/version-select.test.stories.ts

@@ -0,0 +1,76 @@
+// noinspection DuplicatedCode
+
+import type { StoryObj }                        from '@storybook/web-components';
+import {expect, within} from '@storybook/test';
+
+import '../custom-element/custom-element.js';
+import '../custom-element/http-request.js';
+
+type TProps = { title: string; body:string};
+
+type Story = StoryObj<TProps>;
+
+function sleep(ms: number) {    return new Promise((resolve) => setTimeout(resolve, ms)); }
+
+function render(args: TProps)
+{
+    const {title,  body} = args;
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            ${ body }
+        </fieldset>
+  `;
+}
+const meta =
+{        title: 'site/VersionSelect'
+// ,         tags: ['autodocs']
+,       render
+};
+
+export default meta;
+
+export const VersionsSelect:Story  =
+{   args : {title: 'Versions of custom-element', body:`
+    <p>Select the version of custom-element StoryBook.</p>
+    <custom-element >
+        <template>
+            <http-request 
+                url="https://registry.npmjs.org/@epa-wg/custom-element-dist" 
+                method="GET" 
+                header-accept="application/json"
+                slice="page" ></http-request>
+            <xhtml:select>
+                <for-each select="//versions/*">
+                    <option>
+                        {./@version} 
+                    </option>
+                </for-each>
+            </xhtml:select>
+        </template>
+    </custom-element>
+    <dce-link id="dce1"></dce-link>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const titleText = VersionsSelect.args!.title as string;
+        const canvas = within(canvasElement)
+        , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
+
+        await sleep(20)
+        expect( await code('p1') ).toEqual('default_P1' );
+        expect( await code('p2') ).toEqual('always_p2'  );
+        expect( await code('p3') ).toEqual('def_P3'     );
+    },
+};
+
+
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &&
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./attributes.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () => testStoryBook( mod, meta ) );
+}