npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.23 → 0.0.25 - Mend

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

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 (93) hide show

package/src/custom-element/demo/set-url.html ADDED Viewed

@@ -0,0 +1,141 @@
+<!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>custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        input[type="text"]{ min-width: 30rem; }
+        .infolink {
+            &:before {
+                content: '❔';
+                display: inline-block;
+                border-radius: 1.2em;
+            }
+            &:hover:before {
+                background: blue;
+            }
+        }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<main>
+    <h3>How to set the page URL by location-element?</h3>
+    Answer: by defining following attributes:
+    <ol>
+        <li><code>method</code> to one of values provided bellow</li>
+        <li><code>src</code> with URL </li>
+    </ol>
+    <p> &lt;location-element&gt; is safe to be used unconditionally as long as `src` is missing or same as page URL.
+        Otherwise it can be injected by event driven condition as in sample <a href="#dce3">#3</a> </p>
+</main>
+<html-demo-element legend="1. Set the page URL by location.hash"
+                   description="click on 'set' button and observe hash value change in url"
+                   id="dce1">
+    <template>
+        <custom-element>
+            <template>
+                <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>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="2. Set the page URL by method"
+                   description="click on 'set' button and observe hash value change in url"
+                   id="dce2">
+    <template>
+        <custom-element>
+            <template>
+                <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}" src="#dce2"></location-element>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="3. Set the page URL by location.href in conditionally injected location-element"
+                   description="click on 'set' button and observe in url #dce3"
+                   id="dce3">
+    <p>Has to produce URL properties</p>
+    <template>
+        <custom-element>
+            <template>
+                <button value="#dce3" slice="set-button" slice-event="click">set</button>
+                <if test="//set-button/@slice-event">
+                    <location-element method="location.href" src="#dce3"></location-element>
+                    look for <b>#dce3</b> in URL which is set by <code>location-element</code>
+                </if>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="4. Set page URL methods"
+                   description="To define the URL, fill input field or click the radio button, then 'set' button. "
+                   id="dce4">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="methods">
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
+                       title="./set-url.html?a=A">location.href</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"
+                       title="#dec4">location.hash</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
+                       title="./set-url.html?assign=1">location.assign</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace"
+                       title="./set-url.html?replace=location">location.replace</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState"
+                       title="./set-url.html?history=pushState">history.pushState</a>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
+                       title="./set-url.html?history=replaceState">history.replaceState</a>
+                </xsl:variable>
+                <form slice="url-form" custom-validity="'invalid'" method="post">
+                    <fieldset>
+                        <legend><b>set-by</b></legend>
+                        <for-each select="exsl:node-set($methods)/*">
+                            <p><label><input type="radio" name="method" value="{.}"/> {.} </label>
+                                <a class="infolink" href="{@href}">mdn</a>
+                            </p>
+                        </for-each>
+                    </fieldset>
+                    <variable name="selected-method" select="//form-data/method/text()"></variable>
+                    <variable name="selected-url"
+                              select="exsl:node-set($methods)/*[text() = $selected-method ]/@title"></variable>
+                    <label><input name="url" value="{//url ?? $selected-url }" type="text"/></label>
+                    <button name="submit-btn" value="by-submit" type="submit">set</button>
+                    <if test="//form-data/url">
+                        <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
+                        {$selected-method} = {//form-data/url}
+                    </if>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+</body>
+</html>

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

@@ -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 CHANGED Viewed

@@ -1,116 +1,159 @@
 {
-  "$schema": "http://json.schemastore.org/web-types",
-  "name": "@epa-wg/custom-element",
-  "version": "0.0.23",
-  "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 CHANGED Viewed

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

package/src/custom-element/index.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>');
+})