npm - @epa-wg/custom-element - Versions diffs - 0.0.18 → 0.0.20 - Mend

@epa-wg/custom-element 0.0.18 → 0.0.20

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

package/README.md +32 -7
package/bin/xslDtd2Ide.mjs +1 -1
package/custom-element.js +203 -59
package/demo/a.html +55 -15
package/demo/data-slices.html +185 -0
package/demo/demo.css +1 -0
package/demo/dom-merge.html +2 -2
package/demo/external-template.html +1 -0
package/demo/http-request.html +39 -10
package/demo/local-storage.html +108 -3
package/demo/location-element.html +14 -9
package/demo/parameters.html +18 -0
package/demo/s.xml +93 -1
package/demo/s.xslt +12 -10
package/demo/ss.html +50 -30
package/demo/z.html +62 -48
package/http-request.js +55 -26
package/ide/customData-dce.json +25 -2
package/ide/web-types-dce.json +16 -3
package/ide/web-types-xsl.json +1 -1
package/index.html +2 -1
package/local-storage.js +47 -10
package/location-element.js +7 -7
package/package.json +1 -1

package/demo/s.xslt CHANGED Viewed

@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
     <xsl:template match="ignore">
         <xsl:choose>
@@ -5,14 +6,15 @@
             <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
         </xsl:choose>
         <xsl:value-of select="."/></xsl:template>
-    <xsl:template mode="payload" match="attributes"><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p1"><xsl:choose>
-        <xsl:when test="//p1 "><xsl:value-of select="//p1 "/></xsl:when>
-        <xsl:otherwise><xsl:value-of select=" 'def_p1' "/></xsl:otherwise>
-    </xsl:choose></xsl:param><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"><xsl:choose>
-        <xsl:when test="//p3"><xsl:value-of select="//p3"/></xsl:when>
-        <xsl:otherwise><xsl:value-of select="'default_P3                &#10;                p1:{$p1"/>  p2:<xsl:value-of select="$p2"/>  p3:<xsl:value-of select="$p3"/>
-            '}</xsl:otherwise>
-    </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p1" select="//p1 ?? 'def_p1' "/><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"/></dce-root></xsl:template>
+    <xsl:template mode="payload" match="attributes"><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><local-storage xmlns="" key="dateKey" slice="date-key" type="date" live="live" data-dce-id="2"/><local-storage xmlns="" key="timeKey" slice="time-key" type="time" live="live" data-dce-id="3"/><local-storage xmlns="" key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live" data-dce-id="4"/><local-storage xmlns="" key="numberKey" slice="number-key" type="number" live="live" data-dce-id="5"/><local-storage xmlns="" key="jsonKey" slice="json-key" type="json" live="live" data-dce-id="6"/><input xmlns="" id="typesinput" placeholder="set value" data-dce-id="7"/><button xmlns="" onclick="&#10;                        'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')&#10;                            .map( k=&gt; localStorage.setItem(k, typesinput.value) )&#10;                    " data-dce-id="8"> set to all</button><br xmlns="" data-dce-id="9"/><hr xmlns="" data-dce-id="10"/><dce-text xmlns="" data-dce-id="11">
+                date-key:
+                    </dce-text><button xmlns="" onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')" data-dce-id="12">2024-04-21T03:58:42.131Z           </button><button xmlns="" onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())" data-dce-id="13">now                                </button><button xmlns="" onclick="localStorage.setItem('dateKey', 'ABC'  )" data-dce-id="14">date ABC - invalid                 </button><code xmlns="" data-dce-id="15"><xsl:value-of select="//date-key       "/></code><br xmlns="" data-dce-id="16"/><dce-text xmlns="" data-dce-id="17">
+                time-key:
+                    </dce-text><button xmlns="" onclick="localStorage.setItem('timeKey', '13:30')" data-dce-id="18">13:30                              </button><code xmlns="" data-dce-id="19"><xsl:value-of select="//time-key       "/></code><br xmlns="" data-dce-id="20"/><dce-text xmlns="" data-dce-id="21">
+                local-date-time:
+                    </dce-text><button xmlns="" onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')" data-dce-id="22">21977-04-01T14:00:30 - local       </button><code xmlns="" data-dce-id="23"><xsl:value-of select="//local-date-time"/></code><br xmlns="" data-dce-id="24"/><dce-text xmlns="" data-dce-id="25">
+                number-key:
+                    </dce-text><button xmlns="" onclick="localStorage.setItem('numberKey', '2024')" data-dce-id="26">2024 - number                      </button><button xmlns="" onclick="localStorage.setItem('numberKey', '24')" data-dce-id="27">24   - number                      </button><code xmlns="" data-dce-id="28"><xsl:value-of select="//number-key     "/></code><br xmlns="" data-dce-id="29"/><fieldset xmlns="" data-dce-id="30"><legend data-dce-id="31">json-key: </legend><button onclick="localStorage.setItem('jsonKey', jsonStringSample)" data-dce-id="32"> a:1,b:'B' - json                  </button><xsl:apply-templates xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="//json-key/value/@*" mode="json"/></fieldset></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -21,7 +23,7 @@
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>
@@ -34,4 +36,4 @@
             <xsl:with-param name="defaultvalue"/>
         </xsl:call-template>
     </xsl:variable>
-</xsl:stylesheet>
+<xsl:template xmlns:xsl="http://www.w3.org/1999/XSL/Transform" mode="json" match="*|@*"><div xmlns="" data-dce-id="33"><xsl:value-of select="name()"/> : <xsl:value-of select="."/></div></xsl:template></xsl:stylesheet>

package/demo/ss.html CHANGED Viewed

@@ -1,32 +1,52 @@
-<!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>CSS scoping - Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="./wc-square.svg"/>
+<?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">
+    <local-storage key="dateKey" slice="date-key" type="date" live="live" data-dce-id="2" xmlns=""/>
+    <local-storage key="timeKey" slice="time-key" type="time" live="live" data-dce-id="3" xmlns=""/>
+    <local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live" data-dce-id="4"
+                   xmlns=""/>
+    <local-storage key="numberKey" slice="number-key" type="number" live="live" data-dce-id="5" xmlns=""/>
+    <local-storage key="jsonKey" slice="json-key" type="json" live="live" data-dce-id="6" xmlns=""/>
+    <input id="typesinput" placeholder="set value" data-dce-id="7" xmlns=""/>
+    <button onclick="&#10;                        'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')&#10;                            .map( k=&gt; localStorage.setItem(k, typesinput.value) )&#10;                    "
+            data-dce-id="8" xmlns=""> set to all
+    </button>
+    <br data-dce-id="9" xmlns=""/>
+    <hr data-dce-id="10" xmlns=""/>
+    <dce-text data-dce-id="11" xmlns="">
+        date-key:
+    </dce-text>
+    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')" data-dce-id="12" xmlns="">
+        2024-04-21T03:58:42.131Z
+    </button>
+    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())" data-dce-id="13" xmlns="">
+        now
+    </button>
+    <button onclick="localStorage.setItem('dateKey', 'ABC'  )" data-dce-id="14" xmlns="">date ABC - invalid</button>
+    <code data-dce-id="15" xmlns="">
-    <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../input-text.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-    </style>
-</head>
-<body>
-        <custom-element src="hex-grid-dce.html#hex-grid-template">
-            <template>
-                <style>nav{--hex-grid-size: 4rem;}</style>
-                <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
-                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
-                <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
-                <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
-                <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
-                <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
-                <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
-            </template>
-        </custom-element>
-</body>
-</html>
+    </code><br data-dce-id="16" xmlns=""/>
+    <dce-text data-dce-id="17" xmlns="">
+        time-key:
+    </dce-text>
+    <button onclick="localStorage.setItem('timeKey', '13:30')" data-dce-id="18" xmlns="">13:30</button>
+    <code data-dce-id="19" xmlns=""/><br data-dce-id="20" xmlns=""/>
+    <dce-text data-dce-id="21" xmlns="">
+        local-date-time:
+    </dce-text>
+    <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')" data-dce-id="22" xmlns="">
+        21977-04-01T14:00:30 - local
+    </button>
+    <code data-dce-id="23" xmlns=""/><br data-dce-id="24" xmlns=""/>
+    <dce-text data-dce-id="25" xmlns="">
+        number-key:
+    </dce-text>
+    <button onclick="localStorage.setItem('numberKey', '2024')" data-dce-id="26" xmlns="">2024 - number</button>
+    <button onclick="localStorage.setItem('numberKey', '24')" data-dce-id="27" xmlns="">24 - number</button>
+    <code data-dce-id="28" xmlns=""/><br data-dce-id="29" xmlns=""/>
+    <fieldset data-dce-id="30" xmlns="">
+        <legend data-dce-id="31">json-key:</legend>
+        <button onclick="localStorage.setItem('jsonKey', jsonStringSample)" data-dce-id="32"> a:1,b:'B' - json</button>
+    </fieldset>
+</dce-root>

package/demo/z.html CHANGED Viewed

@@ -1,48 +1,62 @@
-<!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>CSS scoping - 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="../input-text.js"></script>
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "./demo.css";
-        button {
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            flex: auto;
-            box-shadow: inset silver 0 0 1rem;
-            min-width: 12rem;
-            padding: 1rem;
-            color: coral;
-            text-shadow: 1px 1px silver;
-            font-weight: bolder;
-        }
-        caption {
-            padding: 1rem;
-            font-weight: bolder;
-            font-family: sans-serif;
-        }
-        code {
-            text-align: right;
-            min-width: 3rem;
-        }
-    </style>
-</head>
-<body>
-<custom-element src="embed-1.html">
-    loading from embed-1.html ...
-</custom-element>
-</body>
-</html>
+<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
+    <location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
+    <table xmlns="" data-dce-id="3">
+        <tbody data-dce-id="0-1">
+        <tr data-dce-id="4">
+            <th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
+            <td data-dce-id="7">9</td>
+        </tr>
+        <tr data-dce-id="10">
+            <th data-dce-id="11">href</th>
+            <td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="10-1">
+            <th data-dce-id="11">origin</th>
+            <td data-dce-id="12">http://localhost:63342</td>
+        </tr>
+        <tr data-dce-id="10-2">
+            <th data-dce-id="11">protocol</th>
+            <td data-dce-id="12">http:</td>
+        </tr>
+        <tr data-dce-id="10-3">
+            <th data-dce-id="11">host</th>
+            <td data-dce-id="12">localhost:63342</td>
+        </tr>
+        <tr data-dce-id="10-4">
+            <th data-dce-id="11">hostname</th>
+            <td data-dce-id="12">localhost</td>
+        </tr>
+        <tr data-dce-id="10-5">
+            <th data-dce-id="11">port</th>
+            <td data-dce-id="12">63342</td>
+        </tr>
+        <tr data-dce-id="10-6">
+            <th data-dce-id="11">pathname</th>
+            <td data-dce-id="12">/custom-element/demo/a.html</td>
+        </tr>
+        <tr data-dce-id="10-7">
+            <th data-dce-id="11">search</th>
+            <td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
+        </tr>
+        <tr data-dce-id="10-8">
+            <th data-dce-id="11">hash</th>
+            <td data-dce-id="12"></td>
+        </tr>
+        </tbody>
+    </table>
+    <h3 data-dce-id="9"> URL parameters </h3>
+    <table xmlns="" data-dce-id="8">
+        <tbody data-dce-id="0-1">
+        <tr data-dce-id="10">
+            <th data-dce-id="11">_ijt</th>
+            <td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
+        </tr>
+        <tr data-dce-id="10-1">
+            <th data-dce-id="11">_ij_reload</th>
+            <td data-dce-id="12">RELOAD_ON_SAVE</td>
+        </tr>
+        </tbody>
+    </table>
+</dce-root>

package/http-request.js CHANGED Viewed

@@ -2,14 +2,13 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 export class HttpRequestElement extends HTMLElement
 {
-    static get observedAttributes() {
-        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
-                ,   'slice'
-                ,   'url'
-                ,   'method'
-                ,   'header-accept'
-                ]
-    }
+    static observedAttributes =
+    [   'value' // populated from localStorage, if defined initially, sets the value in storage
+    ,   'slice'
+    ,   'url'
+    ,   'method'
+    ,   'header-accept'
+    ];
     get requestHeaders()
     {   const ret = {};
@@ -18,34 +17,64 @@ export class HttpRequestElement extends HTMLElement
     }
     get requestProps()
     {   const ret = {};
-        [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
+        [...this.attributes].filter(a=>!a.name.startsWith('header-'))
+                            .filter(a=>!a.name.startsWith('slice')).map( a => ret[a.name] = a.value );
         return ret
     }
-    disconnectedCallback(){ this._destroy?.(); }
+    disconnectedCallback(){ this.#destroy?.(); }
     connectedCallback()
-    {   const controller = new AbortController();
-        this._destroy = ()=> controller.abort(this.localName+' disconnected');
+    {
+        setTimeout(()=>this.fetch(),0)
+    }
+    #inProgressUrl = ''
+    #destroy = ()=>{}
+    async fetch()
+    {
+        if( !this.closest('custom-element') )
+            return;
+        const url = attr(this, 'url') || '';
+        if( !url )
+        {   this.#destroy?.();
+            return this.value = {};
+        }
+        if( this.#inProgressUrl === url )
+            return ;
+        this.#inProgressUrl = url;
+        const controller = new AbortController();
+        this.#destroy = ()=> controller.abort(this.localName+' disconnected');
-        const     url = attr(this, 'url') || ''
-        ,     request = { ...this.requestProps, headers: this.requestHeaders }
+        const request = { ...this.requestProps, headers: this.requestHeaders }
         ,       slice = { request }
         ,      update = () => this.dispatchEvent( new Event('change') );
         this.value = slice;
-        setTimeout( async ()=>
-        {   update();
-            const response = await fetch(url,{ ...this.requestProps, signal: controller.signal, headers: this.requestHeaders })
-            ,      r = {headers: {}};
-            [...response.headers].map( ([k,v]) => r.headers[k] = v );
-            'ok,status,statusText,type,url,redirected'.split(',').map( k=> r[k] = response[k] )
-            slice.response = r;
-            update();
-            slice.data = await response.json();
-            update();
-        },0 );
+        update();
+        const response = await fetch(url,{ ...this.requestProps, signal: controller.signal, headers: this.requestHeaders })
+        ,      r = {headers: {}};
+        [...response.headers].map( ([k,v]) => r.headers[k] = v );
+        'ok,status,statusText,type,url,redirected'.split(',').map( k=> r[k] = response[k] )
+        slice.response = r;
+        update();
+        slice.data = await response.json();
+        update();
     }
+    attributeChangedCallback(name, oldValue, newValue)
+    {   if( name === 'url' )
+        {   if( newValue && oldValue !== newValue)
+            {
+                oldValue && this.#destroy?.();
+                setTimeout(()=>this.fetch(),0)
+            }
+        }
+    }
 }
 window.customElements.define( 'http-request', HttpRequestElement );

package/ide/customData-dce.json CHANGED Viewed

@@ -5,7 +5,7 @@
       "name": "slice",
       "description": {
         "kind": "markdown",
-        "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-update` event\n\nOn: any component with `value` and associated change event"
+        "value": "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"
       },
       "references": [
         {
@@ -15,7 +15,7 @@
       ]
     },
     {
-      "name": "slice-update",
+      "name": "slice-event",
       "description": {
         "kind": "markdown",
         "value": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event"
@@ -26,6 +26,19 @@
           "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
         }
       ]
+    },
+    {
+      "name": "slice-value",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to populate into the slice"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
+        }
+      ]
     }
   ],
   "tags": [
@@ -84,6 +97,16 @@
           "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each"
         }
       ]
+    },
+    {
+      "name": "slice",
+      "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+      "references": [
+        {
+          "name": "README",
+          "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
+        }
+      ]
     }
   ]
 }

package/ide/web-types-dce.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@epa-wg/custom-element",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -9,13 +9,18 @@
       "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-update` event\n\nOn: any component with `value` and associated change event",
+          "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-update",
+          "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": "slice-value",
+          "description": "XPath expression to populate into the slice",
+          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.html"
         }
       ],
       "elements": [
@@ -91,6 +96,14 @@
               }
             }
           ]
+        },
+        {
+          "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/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.18",
+    "version": "0.0.20",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/index.html CHANGED Viewed

@@ -9,7 +9,7 @@
         @import "demo/demo.css";
     </style>
 </head>
-<body>
+<body xmlns:xhtml="http://www.w3.org/1999/xhtml">
 <nav>
     <h3><code>custom-element</code> demo</h3>
     <div><a href="https://github.com/EPA-WG/custom-element"
@@ -34,6 +34,7 @@
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.html"        >attributes         </a> |
+        <a href="./demo/data-slices.html"       >data slices/events </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

package/local-storage.js CHANGED Viewed

@@ -2,44 +2,81 @@ const     string2value = (type, v) =>
 {   if( type === 'text')
         return v;
     if( type === 'json')
-        return JSON.parse( v );
+        try{ return JSON.parse( v );}
+        catch(err){ return null }
     const el = document.createElement('input');
     el.setAttribute('type',type);
-    el.setAttribute('value', v );
-    return type==='number'? el.valueAsNumber : 'date|time|dateTimeLocal'.includes(type)? el.valueAsDate: el.value;
+    if( 'number' === type )
+    {   el.value = v;
+        return el.valueAsNumber;
+    }
+    if( 'date' === type )
+    {   if(!v) return null;
+        el.valueAsDate = new Date( v );
+        return el.value;
+    }
+    el.value = v;
+    return el.value;
 };
+let originalSetItem,originalRemoveItem,originalClear;
+function ensureTrackLocalStorage()
+{   if( originalSetItem )
+        return;
+    originalSetItem = localStorage.setItem;
+    localStorage.setItem = function( key, value, ...rest )
+        {   originalSetItem.apply(this, [ key, value, ...rest ]);
+            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
+        };
+    originalRemoveItem = localStorage.removeItem;
+    localStorage.removeItem = function( key, ...rest )
+        {   originalRemoveItem.apply(this, [ key, ...rest ]);
+            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key}}) );
+        };
+    originalClear = localStorage.clear;
+    localStorage.clear = function( ...rest )
+        {   originalClear.apply(this, [ ...rest ]);
+            window.dispatchEvent( new CustomEvent('local-storage',{detail:{}}) );
+        };
+}
 export function localStorageSetItem(key, value)
 {   localStorage.setItem(key, value);
     window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
 }
 export class LocalStorageElement extends HTMLElement
 {
-    static get observedAttributes() {
-        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
+    static observedAttributes=
+                [   'value' // populated from localStorage, if defined initially, sets the value in storage
                 ,   'slice'
                 ,   'key'
                 ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
                 ,   'live' // monitors localStorage change
                 ];
-    }
+    #value;
+    get value(){ return this.#value ===null ? undefined: this.#value }
+    set value(o){ return this.#value = o; }
     async connectedCallback()
     {
         const    attr = attr => this.getAttribute(attr)
             , fromStorage = ()=>
-        {   this.value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
+        {   this.#value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
             this.dispatchEvent( new Event('change') )
         }
-        // todo apply type
+        this.#value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
         if( this.hasAttribute('value'))
-            localStorageSetItem( attr( this, 'key' ) )
+            localStorageSetItem( attr( 'key' ), this.#value = attr( 'value' )  )
         else
             fromStorage()
         if( this.hasAttribute('live') )
-        {   const listener = (e => e.detail.key === attr( 'key' ) && fromStorage());
+        {   const listener = (e => (e.detail.key === attr( 'key' ) || !e.detail.key ) && fromStorage());
             window.addEventListener( 'local-storage', listener );
+            ensureTrackLocalStorage();
             this._destroy = ()=> window.removeEventListener('local-storage', listener );
         }
     }

package/location-element.js CHANGED Viewed

@@ -2,13 +2,13 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 export class LocationElement extends HTMLElement
 {
-    static get observedAttributes()
-    {   return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
-                ,   'slice'
-                ,   'live' // monitors location change
-                ,   'src'  // URL to be parsed, defaults to `window.location`
-                ];
-    }
+    static observedAttributes=
+            [   'value' // populated from localStorage, if defined initially, sets the value in storage
+            ,   'slice'
+            ,   'key'
+            ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
+            ,   'live' // monitors localStorage change
+            ];
     constructor()
     {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.18",
+    "version": "0.0.20",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",