@epa-wg/custom-element 0.0.14 → 0.0.15

package/README.md

@@ -1,11 +1,11 @@
 # custom-element
-`Declarative Custom Element` is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
+`Declarative Custom Element` (DCE) 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) and [Declarative Web Application](https://github.com/EPA-WG/dwa#readme)
 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, attributes and data `slice` as of now from  
 [local-storage][local-storage-demo],  [http-request][http-request-demo], [location][location-demo].
-UI is re-rendered on each data slice change.
+UI is re-rendered on each data slice change triggered by initialization or DOM event.
 
 [![git][github-image] GitHub][git-url]
 | Live demo: [custom-element][demo-url]
@@ -17,6 +17,33 @@ UI is re-rendered on each data slice change.
 [![coverage][coverage-image]][coverage-url] 
 [![Published on webcomponents.org][webcomponents-img]][webcomponents-url]
 
+
+
+<details>
+<summary> What is DCE? </summary>
+DCE provides the next level of abstraction in HTML - native composition. With native implementation which is 
+streaming parser, streaming transformation, multithreading. native assumes the C/Rust compiled code. There is no place for JavaScript except of polyfill and ability to extend DCE, which otherwise has to be native.
+
+The composition assumes the fully functional template and ability to call the template with parameters( custom tag + attributes) .
+
+As the next to HTML abstraction layer - composition, it needs and provide:
+* ability to use dependencies as from withing the page as from external file/lib via src attribute and # in URL
+* ability to treat external content via content-type like html, SVG, images, video with own template rendering
+* provide styles and embedded DCE declarations in own and named(lib) scope, sharing the scoped registry.
+
+As the next to composition layer of **functional component** it provides
+* data layer with access to attributes/payload(+slots), dataset, data bound slice
+* means in template to use the data selector for condition/enumeration/text injection into attributes and DOM
+* Set of native primitives to support browser APIs declaratively: location,storage, http request which bonded to slice and as result to reactive UI.
+* support the data change trigger over events
+
+While DCE is no-JS concept, DCE provides the basic declarative constructs to build most of simple apps. Assuming the extending via custom elements and JS.  The evolution goal is to adopt most demanded APIs/construct natively into DCE stack over time.
+
+DCE is compatible with closed/open/named root. Enabling as site-scoped styling and registry as encapsulated anonymous scopes in shadow root.
+
+This project is a POC( Proof of Concept ) targeting to become a base for native DCE implementation polyfill.
+</details>
+
 # use
 ## install
 use via CDN
@@ -138,7 +165,7 @@ In order to prevent the style leaking, it has to be defined withing `template` t
 <custom-element>
   <template>
     <style>
-        color:green;
+        color: green;
         button{ color: blue; }
     </style>
     <label> green <button>blue</button> </label>
@@ -169,7 +196,18 @@ In same way as in DCE itself:
         </dce-2>
 ```
 ## Attributes
-curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
+To be served by IDE and to track the attributes changes, they have to be declared via `xsl:param` syntax:
+```html
+    <custom-element tag="dce-with-attrs" hidden>
+        <xsl:param name="p1" >default_P1</xsl:param>
+        <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+        <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+        p1: {$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+    </custom-element>
+    <dce-with-attrs p1="123" p3="qwe"></dce-with-attrs>
+```
+
+The curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
 
 The names in curly braces are matching the instance attributes. I.e. in XML node `/my-component/attributes/`.
 
@@ -270,9 +308,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.14/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.14/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.14/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.15/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.15/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.15/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

@@ -7,8 +7,9 @@ const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
 
 const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
-,   create = ( tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElement( tag ))
+,   create = ( tag, t = '', d=document ) => ( e => ((e.innerText = t||''),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
+,   emptyNode = n=> { while(n.firstChild) n.firstChild.remove(); return 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) );
@@ -162,7 +163,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         xmlns:exsl="http://exslt.org/common"
         exclude-result-prefixes="exsl"
     >
-    <xsl:template match="ignore"><xsl:value-of select="."/></xsl:template>
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">{//attr}</xsl:when>
+            <xsl:otherwise>{def}</xsl:otherwise>
+        </xsl:choose>
+        <xsl:value-of select="."/></xsl:template>
     <xsl:template mode="payload"  match="attributes"></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
@@ -195,6 +201,24 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   payload = $( xslDom, 'template[mode="payload"]');
     if( !fr )
         return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
+    const params = [];
+    [...fr.querySelectorAll('dce-root>param')].forEach(p=>
+    {   payload.append(p);
+        let select = attr(p,'select')?.split('??')
+        if( !select)
+        {   select = ['//'+attr(p, 'name'), `'${p.textContent}'`];
+            emptyNode(p);
+        }
+        if( select?.length>1){
+            p.removeAttribute('select');
+            const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
+            c.firstElementChild.setAttribute('test',select[0]);
+            emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
+            emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
+            p.append(c)
+        }
+        params.push(p)
+    });
 
     for( const c of fr.childNodes )
         payload.append(xslDom.importNode(c,true))
@@ -214,7 +238,9 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
-    return tagUid(xslDom)
+    const ret = tagUid(xslDom)
+    ret.params = params;
+    return ret;
 }
     export async function
 xhrTemplate(src)
@@ -382,6 +408,10 @@ CustomElement extends HTMLElement
         const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
         class DceElement extends HTMLElement
         {
+            static get observedAttributes()
+            {
+                return templateDocs.reduce( (ret,t) =>{ ret.push( ...t.params.map(e=>attr(e,'name')) ); return ret; }, [] );
+            }
             connectedCallback()
             {   if( this.firstElementChild?.tagName === 'TEMPLATE' )
                 {   const t = this.firstElementChild;
@@ -416,7 +446,7 @@ CustomElement extends HTMLElement
                 const applySlices = ()=>
                 {   const processed = {}
 
-                    for(let ev; ev =  sliceEvents.pop(); )
+                    for(let ev; ev = sliceEvents.pop(); )
                     {   const s = attr( ev.target, 'slice');
                         if( processed[s] )
                             continue;
@@ -440,7 +470,7 @@ CustomElement extends HTMLElement
                             timeoutID =0;
                         },10);
                 };
-                const transform = ()=>
+                const transform = this.transform = ()=>
                 {
                     const ff = xp.map( (p,i) =>
                     {   const f = p.transformToFragment(x.ownerDocument, document)
@@ -469,6 +499,20 @@ CustomElement extends HTMLElement
                 transform();
                 applySlices();
             }
+            attributeChangedCallback(name, oldValue, newValue)
+            {   if( !this.xml )
+                    return;
+                let a = this.xml.querySelector(`attributes>${name}`);
+                if( a )
+                    emptyNode(a).append( createText(a,newValue));
+                else
+                {   a = create( name, newValue, this.xml );
+                    a.append( createText(a,newValue) );
+                    this.xml.querySelector('attributes').append( a );
+                }
+
+                this.transform(); // needs throttling
+            }
             get dce(){ return dce }
         }
         if(tag)

package/demo/parameters.html

@@ -0,0 +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>parameters - 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";
+
+        button{ background: forestgreen; }
+        table{ min-width: 16rem; }
+        td{ border-bottom: 1px solid silver; }
+        tfoot td{ border-bottom: none; }
+        td,th{text-align: right; }
+        caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<html-demo-element legend="param as attributes definition" description="
+params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.
+">
+    <template>
+        <custom-element tag="dce-link" hidden>
+            <xsl:param name="p1" >default_P1</xsl:param>
+            <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+            <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+            p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+        </custom-element>
+        <dce-link id="dce1"></dce-link>
+        <section>
+            <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
+            <div><input id="i1" value="p1" />  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+            <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+            <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+        </section>
+        <dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
+
+    </template>
+</html-demo-element>
+
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/demo/s.xslt

@@ -1,29 +1,20 @@
-<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce"
-                xmlns:exsl="http://exslt.org/common" exclude-result-prefixes="exsl">
+<?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:value-of select="."/>
-    </xsl:template>
-    <xsl:template mode="payload" match="attributes">
-        <nav data-dce-id="1">
-            <xsl:for-each select="/datadom/payload/xhtml:*">
-                <xsl:if test="local-name(.) = 'style'">
-                    <xsl:copy-of select=".">
-                    </xsl:copy-of>
-                </xsl:if>
-                <xsl:if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
-                    <section data-dce-id="2">
-                        <button class="action" data-dce-id="3">
-                            <dce-text data-dce-id="4">
-                                <xsl:value-of select="@alt"/>
-                            </dce-text>
-                            <xsl:copy-of select=".">
-                            </xsl:copy-of>
-                        </button>
-                    </section>
-                </xsl:if>
-            </xsl:for-each>
-        </nav>
-    </xsl:template>
+        <xsl:choose>
+            <xsl:when test="//attr"><xsl:value-of select="//attr"/></xsl:when>
+            <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"/></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"><dce-text xmlns="" data-dce-id="2">
+        p1:<xsl:value-of select="$p1"/> </dce-text><br xmlns="" data-dce-id="3"/><dce-text xmlns="" data-dce-id="4"> p2: <xsl:value-of select="$p2"/> </dce-text><br xmlns="" data-dce-id="5"/><dce-text xmlns="" data-dce-id="6"> p3: <xsl:value-of select="$p3"/>
+    </dce-text></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>

package/demo/z.html

@@ -38,23 +38,22 @@
     </style>
 </head>
 <body>
-        <custom-element src="hex-grid-dce.html#hex-grid-template">
-            <template>
-                <style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</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://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
-                <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>
-
-
 
 
+<custom-element tag="dce-link" hidden>
+    <xsl:param name="p1" select="//p1 ?? 'def_p1' "  ></xsl:param>
+    <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+    <xsl:param name="p3" >default_P3</xsl:param>
+    p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+</custom-element>
+<section>
+    <dce-link id="dce1"></dce-link>
+    <div><input id="i1" value="p1" />  <button onclick="debugger; dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+    <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+    <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+</section>
+<dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> |
+<dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
 
 </body>
 </html>

package/index.html

@@ -14,6 +14,7 @@
     <h3><code>custom-element</code> demo</h3>
     <div><a href="https://github.com/EPA-WG/custom-element"
         ><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg" alt="icon">GIT</a>
+        | <a href="https://github.com/EPA-WG/custom-element/blob/main/README.md">README</a>
         | <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html">Sandbox</a>
         | <a href="https://chrome.google.com/webstore/detail/epa-wgcustom-element/hiofgpmmkdembdogjpagmbbbmefefhbl"
             >Chrome devtools plugin</a>
@@ -25,13 +26,14 @@
         The data query is powered by XPath. </p>
     <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
     <section>
-    <h4>Data layer demo</h4>
+    <h4>Features demo</h4>
         <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/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> |
+        <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

package/package.json

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