@epa-wg/custom-element 0.0.25 → 0.0.26

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-dist@0.0.25/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/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.25",
+    "version": "0.0.26",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -259,7 +259,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     for( const c of fr.childNodes )
         payload.append(xslDom.importNode(c,true))
 
-    const embeddedTemplates = [...payload.querySelectorAll('template')];
+    const embeddedTemplates = [...payload.getElementsByTagName('xsl:template')];
     embeddedTemplates.forEach(t=>payload.ownerDocument.documentElement.append(t));
 
     const   slotCall = $(xslDom,'call-template[name="slot"]')
@@ -288,8 +288,9 @@ xhrTemplate(src)
         // xhr.overrideMimeType("text/xml");
         xhr.onload = () =>
         {   if( xhr.readyState === xhr.DONE && xhr.status === 200 )
-                resolve( xhr.responseXML ||  create('div', xhr.responseText ) )
-            reject(xhr.statusText)
+                resolve( xhr.responseXML?.body || xhr.responseXML ||  create('div', xhr.responseText ) )
+            else
+                reject(`${xhr.statusText} - ${src}`)
         };
         xhr.addEventListener("error", ev=>reject(ev) );
 
@@ -372,7 +373,7 @@ event2slice( x, sliceNames, ev, dce )
                 s.append( obj2node(new FormData(el),'value', s.ownerDocument) )
                 return s
             }
-            const v = el.value ?? attr( sel, 'value' ) ;
+            const v = el.value ?? attr( el, 'value' ) ;
             cleanSliceValue();
             if( v === null || v === undefined )
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
@@ -396,19 +397,27 @@ const loadTemplateRoots = async ( src, dce )=>
         return [dce]
     if( src.startsWith('#') )
         return ( n =>
-        {   if(!n) return []
-            const a = n.querySelectorAll(src)
-            if( a.length )
-                return [...a]
-            const r = n.getRootNode();
-            return r===n ? []: getByHashId(r)
+        {   const a = n.querySelectorAll(src)
+            return  [...( a.length ? a : n.getRootNode().querySelectorAll(src) )]
         })(dce.parentElement)
     try
-    {   // todo cache
-        const dom = await xhrTemplate(src)
-        const hash = new URL(src, location).hash
+    {   const [path, hash] = src.split('#');
+        if( '.' === src.charAt(0))
+            src = new URL(path, dce.closest('[base]')?.getAttribute('base') || location ).href;
+        else
+            try
+            {   src = import.meta.resolve( path );
+                if(hash)
+                    src +='#'+hash;
+            }
+            catch( e )
+                {   console.error(e.message) }
+        // todo cache
+        const dom = await xhrTemplate(src);
+        dce.setAttributeNS('xml', 'base', src );
+
         if( hash )
-        {   const ret = dom.querySelectorAll(hash);
+        {   const ret = dom.querySelectorAll('#'+hash);
             if( ret.length )
                 return [...ret]
             return [dce]
@@ -454,8 +463,11 @@ export function appendByDceId(parent,e,k)
 }
 export function merge( parent, fromArr )
 {
-    if(!fromArr.length)
-        return removeChildren(parent);
+    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0].localName)
+        return;
+    if( !fromArr.length )
+        return 'dce-root' !== parent.firstElementChild?.localName && removeChildren(parent);
+
     const id2old = {};
     for( let c of parent.childNodes)
     {   ASSERT( !id2old[c.dceId] );
@@ -482,7 +494,8 @@ export function merge( parent, fromArr )
             appendByDceId(parent,e,k)
     }
     for( let v of Object.values(id2old) )
-        v.remove();
+        if( v.localName !== 'dce-root')
+           v.remove();
 }
 export function assureUID(n,attr)
 {   if( !n.hasAttribute(attr) )
@@ -523,7 +536,7 @@ export const xPath = (x,root)=>
         ret += n.textContent;
     return ret
 }
-export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback'.split(',');
+export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback'.split(',');
 export const toXsl = (el, defParent) => {
     const x = create('xsl:'+el.localName);
     for( let a of el.attributes )
@@ -725,13 +738,17 @@ CustomElement extends HTMLElement
                 applySlices();
             }
             #applyAttribute(name, newValue)
-            {   let a = this.xml.querySelector(`attributes>${name}`);
+            {   if( 'value' === name )
+                    this.value = newValue;
+                let a = this.xml.querySelector(`attributes>${name}`);
                 if( a )
                     emptyNode(a).append( createText(a,newValue) );
                 else
                 {   a = create( name, newValue, this.xml );
                     this.xml.querySelector('attributes').append( a );
                 }
+
+                this.dispatchEvent(new CustomEvent('change', { bubbles: true,detail: { [name]: newValue }}))
             }
             attributeChangedCallback(name, oldValue, newValue)
             {   if( !this.xml || this.#inTransform )

package/demo/confused.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <title>Confused</title>
   <defs>
     <linearGradient id="d">
       <stop offset="0"/>

package/demo/demo.css

@@ -11,9 +11,13 @@ custom-element:not([tag]),
 dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
 dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
 { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
+script{ display:none !important; }
 dd{ padding: 1rem;}
 p{ margin: 0;}
-
+code{ font-weight: bold; color: green; text-wrap: nowrap; }
+*{
+    gap: 1rem;
+}
 
 html-demo-element h3
 {   text-shadow: 0 0 0.25em white;

package/demo/embed-1.html

@@ -1,3 +1,2 @@
 <h4>embed-1.html</h4>
-<custom-element tag="dce-embed-1" hidden>🖖</custom-element>
-<dce-embed-1>?</dce-embed-1>
+<custom-element><template>🖖</template></custom-element>

package/demo/external-template.html

@@ -3,26 +3,61 @@
 <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" />
+    <link rel="icon" href="./wc-square.svg"/>
 
     <script type="module" src="../http-request.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;
+        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;
+        }
+
+        button img {
+            max-height: 10vw;
+            min-height: 4rem;
+        }
+
+        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;
+        }
+
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+
+        svg {
+            max-height: 3rem;
         }
-        button img{ max-height: 10vw; min-height: 4rem;}
-        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; }
-        code{ text-align: right; min-width: 3rem;}
-        svg{ max-height: 3rem;}
     </style>
 </head>
 <body>
@@ -35,15 +70,16 @@
 <html-demo-element legend="1. reference the template in page DOM"
                    description="should render hand wave with '👋 World!' and 'Hello World!'">
     <template>
-<template id="template1">
-    <slot> Hello </slot> World!
-</template>
+        <template id="template1">
+            <slot> Hello</slot>
+            World!
+        </template>
 
-<custom-element tag="dce-internal" src="#template1"></custom-element>
-<!-- no need for loading fallback as the template exists -->
+        <custom-element tag="dce-internal" src="#template1"></custom-element>
+        <!-- no need for loading fallback as the template exists -->
 
-<dce-internal>👋</dce-internal>
-<dce-internal></dce-internal>
+        <dce-internal>👋</dce-internal>
+        <dce-internal></dce-internal>
     </template>
 </html-demo-element>
 
@@ -51,67 +87,67 @@
 <html-demo-element legend="2. without TAG, inline instantiation"
                    description="hash value in SRC references template by ID. Should output 'construction' 2 times">
     <template>
-<template id="template2">
-    🏗️ construction
-</template>
+        <template id="template2">
+            🏗️ construction
+        </template>
 
-<custom-element src="#template2"></custom-element>
-<custom-element src="#template2"></custom-element>
+        <custom-element src="#template2"></custom-element>
+        <custom-element src="#template2"></custom-element>
     </template>
 </html-demo-element>
 
-<html-demo-element legend="3. external SVG file" >
+<html-demo-element legend="3. external SVG file">
     <template>
-            <custom-element tag="dce-external" src="confused.svg" >
-                <template><i>loading from SVG ...</i></template>
-            </custom-element>
-            <dce-external></dce-external>
-            <custom-element src="confused.svg" >
-                <i>inline DCE loading from SVG ...</i>
-            </custom-element>
-            <custom-element src="no.svg" >
-                <i>fallback for missing image</i>
-            </custom-element>
+        <custom-element tag="dce-external" src="confused.svg">
+            <template><i>loading from SVG ...</i></template>
+        </custom-element>
+        <dce-external></dce-external>
+        <custom-element src="confused.svg">
+            <i>inline DCE loading from SVG ...</i>
+        </custom-element>
+        <custom-element src="no.svg">
+            <i>fallback for missing image</i>
+        </custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="4. external XSLT file"
                    description="This external templates generated the tree for DCE data set"
-    >
+>
     <a href="tree.xsl">tree.xsl</a>
     <template>
-            <custom-element tag="dce-external-4" src="tree.xsl" >
-                <template><i>loading from XSLT ...</i></template>
-            </custom-element>
-            <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
-            <custom-element src="tree.xsl"  data-smile="👼" data-basket="🍒">
-                <i>inline DCE loading from XSLT ...</i>
-            </custom-element>
+        <custom-element tag="dce-external-4" src="tree.xsl">
+            <template><i>loading from XSLT ...</i></template>
+        </custom-element>
+        <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
+        <custom-element src="tree.xsl" data-smile="👼" data-basket="🍒">
+            <i>inline DCE loading from XSLT ...</i>
+        </custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg, formula">
     <template>
-            <custom-element tag="dce-external-5" src="html-template.html" >
-                <template><i>loading from HTML file ...</i></template>
-            </custom-element>
-            <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
-            <custom-element src="html-template.html"  data-smile="👼" data-basket="🍒">
-                <i>inline DCE loading from HTML file ...</i>
-            </custom-element>
+        <custom-element tag="dce-external-5" src="html-template.html">
+            <template><i>loading from HTML file ...</i></template>
+        </custom-element>
+        <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
+        <custom-element src="html-template.html" data-smile="👼" data-basket="🍒">
+            <i>inline DCE loading from HTML file ...</i>
+        </custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
     <a href="html-template.html">html-template.html</a>
     <template>
-        <custom-element src="html-template.html#wave" >
+        <custom-element src="html-template.html#wave">
             <template><i>loading HTML from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#dwc-logo" >
-            <template><i>loading  SVG from templates file ...</i></template>
+        <custom-element src="html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#sophomores-dream" >
+        <custom-element src="html-template.html#sophomores-dream">
             <template><i>loading MathML from HTML file ...</i></template>
         </custom-element>
     </template>
@@ -119,10 +155,10 @@
 <html-demo-element legend="7. XSLT by ID within external file" description="Should render tree, and fallback">
     <a href="html-template.html">html-template.html</a>
     <template>
-        <custom-element src="html-template.xhtml#embedded-xsl" >
-            <template>whole XSLT is  embedded into HTML body</template>
+        <custom-element src="html-template.xhtml#embedded-xsl">
+            <template>whole XSLT is embedded into HTML body</template>
         </custom-element>
-         <custom-element src="html-template.html#none" >
+        <custom-element src="html-template.html#none">
             <template><i>element with id=none is missing in template</i></template>
         </custom-element>
     </template>
@@ -132,13 +168,37 @@
                    description="Should render Vulcan Salute 🖖"
 >
     <template>
-            <custom-element src="embed-1.html" >
-                loading from embed-1.html ...
-            </custom-element>
+        <custom-element src="embed-1.html">
+            loading from embed-1.html ...
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="9. external file with invoking of relative template as hash by enclosed custom-element"
+                   description="Should render Vulcan Salute 🖖"
+>
+    <template>
+        <custom-element src="./lib-dir/embed-lib.html#embed-relative-hash">
+            loading from embed-1.html ...
+        </custom-element>
     </template>
 </html-demo-element>
-<html-demo-element legend="embed-1.html external file " src="embed-1.html">
+
+<html-demo-element
+        legend="10. external file with invoking of template in another relative path file by enclosed custom-element"
+        description="Should render Vulcan Salute 🖖"
+>
+    <template>
+        <custom-element src="./lib-dir/embed-lib.html#embed-relative-file">
+            loading from ./lib-dir/embed-lib.html ...
+        </custom-element>
+    </template>
 </html-demo-element>
+
+
+<html-demo-element legend="embed-1.html external file" src="embed-1.html"></html-demo-element>
+<html-demo-element legend="embed-lib.html with multiple templates" src="embed-lib.html"></html-demo-element>
 <!--
 <html-demo-element legend="9. deep external files, complex rendering" >
     <template>

package/demo/lib-dir/Smiley.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" baseProfile="full" viewBox="-21 -21 42 42">
+  <defs>
+    <radialGradient id="b" cx=".2" cy=".2" r=".5" fx=".2" fy=".2">
+      <stop offset="0" stop-color="#fff" stop-opacity=".7"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="a" cx=".5" cy=".5" r=".5">
+      <stop offset="0" stop-color="#ff0"/>
+      <stop offset=".75" stop-color="#ff0"/>
+      <stop offset=".95" stop-color="#ee0"/>
+      <stop offset="1" stop-color="#e8e800"/>
+    </radialGradient>
+  </defs>
+  <circle r="20" fill="url(#a)" stroke="#000" stroke-width=".15"/>
+  <circle r="20" fill="url(#b)"/>
+  <g id="c">
+    <ellipse cx="-6" cy="-7" rx="2.5" ry="4"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-width=".5" d="M10.6 2.7a4 4 0 0 0 4 3"/>
+  </g>
+  <use xlink:href="#c" transform="scale(-1 1)"/>
+  <path fill="none" stroke="#000" stroke-width=".75" d="M-12 5a13.5 13.5 0 0 0 24 0 13 13 0 0 1-24 0"/>
+</svg>

package/demo/lib-dir/embed-lib.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>templates for embedded and external DCE lib dependencies</title>
+</head>
+<body>
+<h1>templates for embedded and external DCE lib dependencies</h1>
+
+<template id="embed-lib-component">
+    👋 from embed-lib-component
+</template>
+
+<template id="embed-relative-hash">
+    👌 from embed-relative-hash invoking
+    <module-url slice="full-url" src="./embed-lib.html"></module-url>
+    <a href="{//full-url}#embed-lib-component">
+        <img src="{//full-url}/../Smiley.svg"/>
+        #embed-lib-component
+    </a>:
+    <custom-element src="#embed-lib-component"></custom-element>
+</template>
+
+<template id="embed-relative-file">
+    👍 from embed-relative-file invoking
+    <module-url slice="up-url" src="../embed-1.html"></module-url>
+    <a href="{//up-url}">../embed-1.html</a>:
+    <custom-element src="../embed-1.html">
+        loading from ../embed-1.html ...
+    </custom-element>
+</template>
+
+</body>
+</html>