@epa-wg/custom-element 0.0.19 → 0.0.20

package/README.md

@@ -348,9 +348,9 @@ within template
 [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.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.19/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.19/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.19/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.20/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.20/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.20/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/bin/xslDtd2Ide.mjs

@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
 const intelliJ = {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.19",
+    "version": "0.0.20",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -11,7 +11,8 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isNode = e => e && typeof e.nodeType === 'number'
 ,   create = ( tag, t = '', d=document ) => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
-,   emptyNode = n => { while(n.firstChild) n.firstChild.remove(); n.getAttributeNames().map( a => n.removeAttribute(a) ); return n; }
+,   removeChildren = n => { while(n.firstChild) n.firstChild.remove(); return n; }
+,   emptyNode = n => {  n.getAttributeNames().map( a => n.removeAttribute(a) ); return removeChildren(n); }
 ,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
@@ -95,10 +96,12 @@ Json2Xml( o, tag )
 
     export function
 obj2node( o, tag, doc )
-{
-    if( typeof o === 'function'){debugger}
-    if( typeof o === 'string' )
+{   const t = typeof o;
+    if( t === 'function'){debugger}
+    if( t === 'string' )
         return create(tag,o,doc);
+    if( t === 'number' )
+        return create(tag,''+o,doc);
 
     if( o instanceof Array )
     {   const ret = create('array');
@@ -364,17 +367,23 @@ event2slice( x, sliceNames, ev, dce )
         ev.type==='init' && cleanSliceValue();
         s.append( obj2node( ev, 'event', d ) );
         if( sel.hasAttribute('slice-value') )
-        {   s.setAttribute('value', el.value );
+        {   if( el.value === undefined)
+                s.removeAttribute('value')
+            else
+                s.setAttribute('value', el.value );
             const v = xPath( attr( sel, 'slice-value'),s );
             cleanSliceValue();
             s.append( createText( d, v ) );
         }else
-        {   const v = el.value || attr( sel, 'value' ) ;
+        {   const v = el.value ?? attr( sel, 'value' ) ;
             cleanSliceValue();
-            if( isString(v) )
-                s.append( createText( d, v) );
+            if( v === null || v === undefined )
+                [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
             else
-                s.append( obj2node(v,'value',s.ownerDocument) )
+                if( isString(v) )
+                    s.append( createText( d, v) );
+                else
+                    s.append( obj2node(v,'value',s.ownerDocument) )
         }
     })
 }
@@ -445,6 +454,8 @@ export function assureUnique(n, id=0)
 }
 export function merge( parent, fromArr )
 {
+    if(!fromArr.length)
+        return removeChildren(parent);
     const id2old = {};
     for( let c of parent.childNodes)
     {   ASSERT( !id2old[c.dceId] );
@@ -455,8 +466,8 @@ export function merge( parent, fromArr )
             id2old[attr(c, 'data-dce-id') || 0] = c;
     }
     for( let e of [...fromArr] )
-    {
-        const o = id2old[ attr(e, 'data-dce-id') || e.dceId ];
+    {   const k = attr(e, 'data-dce-id') || e.dceId;
+        const o = id2old[ k ];
         if( o )
         {   if( isText(e) )
             {   if( o.nodeValue !== e.nodeValue )
@@ -466,9 +477,12 @@ export function merge( parent, fromArr )
                 if( o.childNodes.length || e.childNodes.length )
                     merge(o, e.childNodes)
             }
+            delete id2old[ k ]
         }else
             parent.append( e )
     }
+    for( let v of Object.values(id2old) )
+        v.remove();
 }
 export function assureUID(n,attr)
 {   if( !n.hasAttribute(attr) )

package/demo/a.html

@@ -6,6 +6,7 @@
     <title>custom-element 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="../local-storage.js"></script>
     <script type="module" src="../custom-element.js"></script>
 
     <style>
@@ -40,22 +41,33 @@
 </head>
 <body>
 
- <custom-element>
-            <template>
-                <button slice="clickcount"
-                        slice-event="click"
-                        slice-value="//clickcount + 1"   >
-                    +
-                </button>
-                <button slice="clickcount"
-                        slice-event="click"
-                        slice-value="//clickcount - 1"   >
-                    -
-                </button>
-                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
-                {//clickcount}
-            </template>
-        </custom-element>
+    <custom-element>
+        <template>
+            <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click"
+                >⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
+            <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
+            <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
+            <http-request
+                url="{//fetch-url}"
+                slice="request_slice"
+                type="text"
+                mode="cors"
+                ></http-request>
+            //fetch-url : <code>{//fetch-url}</code>
+<!--            <for-each select="//slice/request_slice/value/*">-->
+<!--                <ul>-->
+<!--                    <var data-testid="request-section"><value-of select='name(.)'/></var>-->
+<!--                    <for-each select="@*">-->
+<!--                        <div>-->
+<!--                            <var data-testid="section-attribute">@<value-of select='local-name(.)'/></var>-->
+<!--                            =-->
+<!--                            <code><value-of select='.'/></code>-->
+<!--                        </div>-->
+<!--                    </for-each>-->
+<!--                </ul>-->
+<!--            </for-each>-->
+        </template>
+    </custom-element>
 
 </body>
 </html>

package/demo/dom-merge.html

@@ -94,9 +94,9 @@
             <form>
                 <label>
                     <input type="text"
-                           value="Type time update"
+                           value="{//txt ?? 'Type time update'}"
                            slice="txt"
-                           slice-event="keyup"/>
+                           slice-event="init input"/>
 
                     <span> Character count:
                         <b> {string-length(//slice/txt)} </b>

package/demo/http-request.html

@@ -31,6 +31,33 @@
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
 
+
+<html-demo-element legend="0. url from text to http-request "
+                   description="read data from arbitrary URL">
+    <template>
+        <custom-element>
+            <template>
+
+                <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
+                <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
+                <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
+                <http-request
+                    url="{//fetch-url}"
+                    slice="request_slice"
+                    type="text"
+                    mode="cors"
+                    ></http-request>
+                <code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
+                <for-each select="//results">
+                    <var>
+                        *{@name}
+                    </var>
+                </for-each>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <html-demo-element legend="1. http-request simplest"
                    description="load the list of pokemons">
     <p>Should display 6 image buttons with pokemon name </p>

package/demo/local-storage.html

@@ -16,14 +16,119 @@
         td,th{text-align: right; }
         caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
     </style>
+
+    <script>
+        window.JsonSample = {a:1,b:'B'};
+    </script>
 </head>
 <body>
 
 <nav>
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
 </nav>
+<main>
+    <code>local-storage</code> allows to read and write its value to the key in <code>localStorage</code>.
+    The <code>type</code> attribute allows to place the validation constrains to the value: when the value does not
+    match the expected type, it would not be assigned, keeping empty <code>value</code> instead.
+</main>
+<html-demo-element legend="0. read localStorage text value"
+                   description="click should set text-key slice via localStorage change.">
+    <template>
+        <custom-element>
+            <template>
+                <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
+                <button onclick="localStorage.setItem('textKey','text value')">text value</button>
+                <button onclick="localStorage.setItem('textKey','another value')">another value</button>
+                //text-key: <code>{//text-key}</code>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="1. always override "
+                   description="value in localStorage[] should be always reset to ABC. click should set text-key slice via localStorage change.">
+    <template>
+        <custom-element>
+            <template>
+                <!-- always reset -->
+                <local-storage key="overrideKey" slice="override-key" type="text" value="ABC"></local-storage>
+                <button onclick="localStorage.setItem('overrideKey','text value')">text value</button>
+                <button onclick="localStorage.removeItem('attrKey')">clear key</button>
+                //override-key: <code>{//override-key}</code>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. from storage with default "
+                   description="default overridden by button, refresh should preserve updated value">
+    <template>
+        <custom-element>
+            <template>
+                <!-- initially set value to DEF and update by button. On reload the value picked from localStorage -->
+                <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF'"></local-storage>
+                <button onclick="localStorage.clear()">clear localStorage</button>
+                <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
+                <button onclick="localStorage.setItem('attr2Key','text value')">updated value</button>
+                //attr2-key: <code>{//attr2-key}</code>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. localStorage type"
+                   description="type validation happy path. Invalid for type value in storage would be treated as null">
+    <template>
+        <custom-element>
+            <template>
+                <local-storage key="dateKey"            slice="date-key"        type="date"             live="live"></local-storage>
+                <local-storage key="timeKey"            slice="time-key"        type="time"             live="live"></local-storage>
+                <local-storage key="localDateTimeKey"   slice="local-date-time" type="datetime-local"   live="live"></local-storage>
+                <local-storage key="numberKey"          slice="number-key"      type="number"           live="live"></local-storage>
+                <local-storage key="jsonKey"            slice="json-key"        type="json"             live="live"></local-storage>
+                <input id="typesinput" placeholder="set value" /><button onclick="
+                        'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
+                            .map( k=> localStorage.setItem(k, typesinput.value) )
+                    "> set to all</button><br/>
+                <hr/>
+                date-key:
+                    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')"           >2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())"   >now                                </button>
+                    <button onclick="localStorage.setItem('dateKey', 'ABC'  )"                              >date ABC - invalid                 </button>
+                    <code>{//date-key       }</code><br/>
+                time-key:
+                    <button onclick="localStorage.setItem('timeKey', '13:30')"                              >13:30                              </button>
+                    <code>{//time-key       }</code><br/>
+                local-date-time:
+                    <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')"       >21977-04-01T14:00:30 - local       </button>
+                    <code>{//local-date-time}</code><br/>
+                number-key:
+                    <button onclick="localStorage.setItem('numberKey', '2024'       )"                      >2024 - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '24'         )"                      >24   - number                      </button>
+                    <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )"                      >1.23456e+5                         </button>
+                    <button onclick="localStorage.setItem('numberKey', '0001'       )"                      >0001                               </button>
+                    <button onclick="localStorage.setItem('numberKey', '000'        )"                      >000                                </button>
+                    <button onclick="localStorage.setItem('numberKey', '0'          )"                      >0                                  </button>
+                    <button onclick="localStorage.setItem('numberKey', 'ABC'        )"                      >ABC - invalid, NaN                 </button>
+                    <code>{//number-key     }</code> <br/>
+                <fieldset>
+                    <legend>json-key: </legend>
+
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))"                >'ABC'   - string  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))"               >12.345  - number  </button>
+                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )"   >a:1,b:'B'  -json  </button>
+                    <button onclick="localStorage.setItem('jsonKey', 'ABC'  )"                              >ABC - invalid     </button><br/>
+                    json-key:<code><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
+                </fieldset>
+                <xsl:template mode="json" match="*|@*">
+                    <div>{name()} : {.}</div>
+            </xsl:template>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
 
-<html-demo-element legend="1. localStorage simplest"
+<html-demo-element legend="3. localStorage simplest"
                    description="local-storage read only during initial and only render, does not track the changes.">
     <p>Has to produce 12🍒</p>
     <template>

package/demo/s.xml

@@ -1,6 +1,93 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<datadom><payload><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" slot="">
-                    +
-                </button><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><button xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" slot="">
-                    -
-                </button><span xmlns="http://www.w3.org/1999/xhtml" slot="">                </span><input xmlns="http://www.w3.org/1999/xhtml" slice="clickcount" type="number" value="{//clickcount ?? 0}" slot="" /><span xmlns="http://www.w3.org/1999/xhtml" slot="">                {//clickcount}            </span></payload><attributes><tag>dce-72e0d208-b3b4-4b0a-8798-a094beaf5fe1</tag></attributes><dataset/><slice><clickcount xmlns="" slice="clickcount" type="number" value="" data-dce-id="2" slice-event="click" slice-value="//clickcount + 1"><event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse" isPrimary="false" screenX="19" screenY="99" clientX="19" clientY="12" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="19" pageY="12" x="19" y="12" offsetX="10" offsetY="0" movementX="0" movementY="0" layerX="19" layerY="12" detail="1" which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false" composed="true" timeStamp="5460750.8000000715" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3"><relatedTarget/><fromElement/><toElement/><sourceCapabilities firesTouchEvents="false"/><currentTarget/></event>46</clickcount></slice></datadom>
+<datadom>
+    <payload>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <button xmlns="http://www.w3.org/1999/xhtml" slice="url-string"
+                slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click" slot="">
+            ⬇️https://pokeapi.co/api/v2/pokemon?limit=6
+        </button>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <input xmlns="http://www.w3.org/1999/xhtml" slice="url-string" value="{ //url-string ?? '' }" style="width:100%"
+               slot=""/>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <button xmlns="http://www.w3.org/1999/xhtml" slice="fetch-url" slice-event="click" slice-value="//url-string"
+                slot="">GET
+        </button>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <http-request xmlns="http://www.w3.org/1999/xhtml" url="{//fetch-url}" slice="request_slice" type="text"
+                      mode="cors" slot=""></http-request>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <code xmlns="http://www.w3.org/1999/xhtml" slot="">//fetch-url</code>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot="">from</span>
+        <code xmlns="http://www.w3.org/1999/xhtml" slot="">{//fetch-url}</code>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//slice/request_slice/value/*" slot="">
+            <ul>
+                <var data-testid="request-section">
+                    <xsl:value-of select="name(.)"></xsl:value-of>
+                </var>
+                <xsl:for-each select="@*">
+                    <div>
+                        <var data-testid="section-attribute">@
+                            <xsl:value-of select="local-name(.)"></xsl:value-of>
+                        </var>
+                        =
+                        <code>
+                            <xsl:value-of select="."></xsl:value-of>
+                        </code>
+                    </div>
+                </xsl:for-each>
+            </ul>
+        </xsl:for-each>
+        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+    </payload>
+    <attributes>
+        <tag>dce-5dc8d4a0-d545-4498-9de5-eec25c2b232f</tag>
+    </attributes>
+    <dataset/>
+    <slice>
+        <url-string xmlns="" slice="url-string" value="" style="width:100%" data-dce-id="2"
+                    slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">
+            <event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0"
+                   altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse"
+                   isPrimary="false" screenX="94" screenY="186" clientX="94" clientY="99" ctrlKey="false"
+                   shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="94" pageY="99" x="94"
+                   y="99" offsetX="60" offsetY="6" movementX="0" movementY="0" layerX="94" layerY="99" detail="1"
+                   which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false"
+                   composed="true" timeStamp="5596.5" returnValue="true" cancelBubble="false" NONE="0"
+                   CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+                <currentTarget/>
+            </event>
+            https://pokeapi.co/api/v2/pokemon?limit=6
+        </url-string>
+        <fetch-url xmlns="" slice="fetch-url" slice-event="click" slice-value="//url-string" data-dce-id="4" value="">
+            <event isTrusted="true" pointerId="1" width="1" height="1" pressure="0" tiltX="0" tiltY="0" azimuthAngle="0"
+                   altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0" pointerType="mouse"
+                   isPrimary="false" screenX="56" screenY="232" clientX="56" clientY="145" ctrlKey="false"
+                   shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="56" pageY="145" x="56"
+                   y="145" offsetX="23" offsetY="8" movementX="0" movementY="0" layerX="56" layerY="145" detail="1"
+                   which="1" type="click" eventPhase="0" bubbles="true" cancelable="true" defaultPrevented="false"
+                   composed="true" timeStamp="6699.100000023842" returnValue="true" cancelBubble="false" NONE="0"
+                   CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
+                <relatedTarget/>
+                <fromElement/>
+                <toElement/>
+                <sourceCapabilities firesTouchEvents="false"/>
+                <currentTarget/>
+            </event>
+            https://pokeapi.co/api/v2/pokemon?limit=6
+        </fetch-url>
+        <request_slice xmlns="" url="" slice="request_slice" type="text" mode="cors" data-dce-id="5">
+            <event type="init"/>
+            <value>
+                <request xmlns="" url="" type="text" mode="cors" data-dce-id="5">
+                    <headers/>
+                </request>
+            </value>
+        </request_slice>
+    </slice>
+</datadom>

package/demo/s.xslt

@@ -6,13 +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"><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount + 1" data-dce-id="2">
-                    +
-                </button><button xmlns="" slice="clickcount" slice-event="click" slice-value="//clickcount - 1" data-dce-id="3">
-                    -
-                </button><input xmlns="" slice="clickcount" type="number" value="{concat( //clickcount  , substring(  0 , (1+string-length(  0 )) * string-length( //clickcount  ) ) )}" data-dce-id="4"/><dce-text xmlns="" data-dce-id="5">
-                <xsl:value-of select="//clickcount"/>
-            </dce-text></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>
@@ -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

@@ -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/http-request.js

@@ -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 = {};
@@ -23,30 +22,59 @@ export class HttpRequestElement extends HTMLElement
         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/web-types-dce.json

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

package/ide/web-types-xsl.json

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

package/local-storage.js

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

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

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.19",
+    "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",