@epa-wg/custom-element 0.0.8 → 0.0.9

package/README.md

@@ -1,8 +1,11 @@
 # custom-element
-`Declarative Custom Element` proof of concept as a part of [WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
-discussion.
+`Declarative Custom Element` is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
+[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
+discussion. The functionality of DCE and its data access does not require programming using JavaScript. 
 
-It allows to define custom HTML tag with template filled from slots and attributes.
+It allows to define custom HTML tag with template filled from slots and attributes and data `slice` as of now from  
+[local-storage][local-storage-demo] and [http-request][http-request-demo].
+UI is re-rendered on each data slice change.
 
 [![git][github-image] GitHub][git-url]
 | Live demo: [custom-element][demo-url]
@@ -182,12 +185,14 @@ within template
 [git-url]:        https://github.com/EPA-WG/custom-element
 [git-test-url]:   https://github.com/EPA-WG/custom-element-test
 [demo-url]:       https://unpkg.com/@epa-wg/custom-element@0.0/index.html
+[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
+[http-request-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
 [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.8/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.8/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.8/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.9/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.9/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.9/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/custom-element.js

@@ -17,7 +17,9 @@ bodyXml( dce )
 {
     const t = dce.firstElementChild
     , sanitize = s => s.replaceAll("<html:","<")
-                       .replaceAll("</html:","</");
+                       .replaceAll("</html:","</")
+                       .replaceAll( />\s*<\/xsl:value-of>/g ,"/>")
+                       .replaceAll( />\s*<\/(br|hr|img|area|base|col|embed|input|link|meta|param|source|track|wbr)>/g ,"/>");
     if( t?.tagName === 'TEMPLATE')
         return sanitize( new XMLSerializer().serializeToString( t.content ) );
 
@@ -71,17 +73,17 @@ Json2Xml( o, tag )
         return "<"+tag+">"+o.map(function(el){ return Json2Xml(el,tag); }).join()+"</"+tag+">";
     }
     noTag &&  (tag = 'r');
-    tag=tag.replace( /[^a-z0-9]/gi,'_' );
+    tag=tag.replace( /[^a-z0-9\-]/gi,'_' );
     var oo  = {}
         ,   ret = [ "<"+tag+" "];
-    for( var k in o )
+    for( let k in o )
         if( typeof o[k] == "object" )
             oo[k] = o[k];
         else
-            ret.push( k.replace( /[^a-z0-9]/gi,'_' ) + '="'+o[k].toString().replace(/&/gi,'&#38;')+'"');
+            ret.push( k.replace( /[^a-z0-9\-]/gi,'_' ) + '="'+o[k].toString().replace(/&/gi,'&#38;')+'"');
     if( oo )
     {   ret.push(">");
-        for( var k in oo )
+        for( let k in oo )
             ret.push( Json2Xml( oo[k], k ) );
         ret.push("</"+tag+">");
     }else
@@ -142,7 +144,7 @@ CustomElement extends HTMLElement
                 }
                 let timeoutID;
 
-                const onSlice = ev=>
+                this.onSlice = ev=>
                 {   ev.stopPropagation?.();
                     sliceEvents.push(ev);
                     if( !timeoutID )
@@ -151,7 +153,6 @@ CustomElement extends HTMLElement
                             timeoutID =0;
                         },10);
                 };
-                this.onSlice = onSlice;
                 const transform = ()=>
                 {
                     const f = p.transformToFragment( x, document );

package/demo/http-request.html

@@ -3,6 +3,8 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>http-request Declarative Custom Element implementation demo</title>
+        <link rel="icon" href="./wc-square.svg" />
+
     <script type="module" src="../http-request.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
@@ -35,6 +37,8 @@
         <http-request
             url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
             slice="page"
+            method="GET"
+            header-accept="application/json"
             ></http-request>
         <xsl:for-each select="//slice/page/data/results/*">
             <xsl:variable name="slides-url"
@@ -54,6 +58,65 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="1. http-request headers"
+                   description="request and response headers access demo">
+
+    <template>
+            <custom-element
+                tag="headers-demo"
+                hidden
+                >
+<http-request
+    url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6"
+    slice="request_slice"
+    type="text"
+    mode="cors"
+    header-x-test="testing"
+    ></http-request>
+Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
+from <code>${url}</code>
+
+<h3>Samples</h3>
+<table>
+<tr><th>//slice/request_slice/request/headers/@mode</th>
+    <td><xsl:value-of select="//slice/request_slice/request/@mode"/></td></tr>
+<tr><th>//slice/request_slice/response/headers/@content-type</th>
+    <td><xsl:value-of select="//slice/request_slice/response/headers/@content-type"/></td></tr>
+<tr><th>//slice/request_slice/response/@status</th>
+    <td><xsl:value-of select="//slice/request_slice/response/@status"/></td></tr>
+</table>
+<xsl:for-each select="//slice/request_slice/*">
+    <ul data-request-section="{name(.)}">
+        <b data-testid="request-section"><xsl:value-of select='name(.)'/></b>
+        <xsl:for-each select="@*">
+            <div>
+                <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
+                =
+                <code><xsl:value-of select='.'/></code>
+            </div>
+        </xsl:for-each>
+        <xsl:for-each select="*">
+            <div>
+                <b data-testid="section-deep"><xsl:value-of select='local-name(.)'/></b>
+                <ul>
+                    <xsl:for-each select="@*">
+                        <li>
+                            <var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
+                            =
+                            <code><xsl:value-of select='.'/></code>
+                        </li>
+                    </xsl:for-each>
+                    <code><xsl:value-of select='.'/></code>
+                </ul>
+            </div>
+        </xsl:for-each>
+    </ul>
+</xsl:for-each>
+            </custom-element>
+            <headers-demo></headers-demo>
+    </template>
+</html-demo-element>
+
 
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 

package/demo/local-storage.html

@@ -3,6 +3,7 @@
 <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="../local-storage.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>

package/demo/wc-square.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>

package/http-request.js

@@ -6,6 +6,16 @@ export class HttpRequestElement extends HTMLElement
     constructor() {
         super();
     }
+    get requestHeaders()
+    {   const ret = {};
+        [...this.attributes].filter(a=>a.name.startsWith('header-')).map( a => ret[a.name.substring(7)] = a.value );
+        return ret;
+    }
+    get requestProps()
+    {   const ret = {};
+        [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
+        return ret;
+    }
     sliceInit( s )
     {   if( !s )
             s = {};
@@ -18,7 +28,7 @@ export class HttpRequestElement extends HTMLElement
             controller.abort();
         };
         const     url = attr(this, 'url') || ''
-        ,     request = { url }
+        ,     request = { ...this.requestProps, headers: this.requestHeaders }
         ,       slice = { detail: { request }, target: this }
         , updateSlice = slice =>
         {   for( let parent = s.element.parentElement; parent; parent = parent.parentElement )
@@ -30,9 +40,14 @@ export class HttpRequestElement extends HTMLElement
 
         setTimeout( async ()=>
         {   updateSlice( slice );
-            slice.detail.response = await fetch(url,{ signal: controller.signal });
+            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.detail.response = r;
             updateSlice( slice );
-            slice.detail.data = await slice.detail.response.json();
+            slice.detail.data = await response.json();
             updateSlice( slice );
         },0 );
 
@@ -41,4 +56,4 @@ export class HttpRequestElement extends HTMLElement
 }
 
 window.customElements.define( 'http-request', HttpRequestElement );
-export default HttpRequestElement;
+export default HttpRequestElement;

package/index.html

@@ -3,6 +3,7 @@
 <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="demo/wc-square.svg" />
     <script type="module" src="custom-element.js"></script>
     <style>
         @import "demo/demo.css";

package/package.json

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