@epa-wg/custom-element 0.0.33 → 0.0.34

package/.idea/copilot.data.migration.agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/README.md

@@ -341,16 +341,16 @@ within template
 [css-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
 [slice-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
 [hex-grid-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
-[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.33/demo/hex-grid-transform.png
+[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.34/demo/hex-grid-transform.png
 [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
 [location-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.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-dist@0.0.33/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.33/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.33/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.34/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.34/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.34/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

@@ -1,160 +1,160 @@
-/**
- * node xslDtd2Ide.cjs
- * would get xsl 1.0 schema and populate IntelliJ and VS Code IDE custom elements definitions
- *
- * This is one time use script as XSLT 1.0 schema is not changing.
- * DTD parsing here is not generic and cobers only particula XSLT 1.0 schema.
- */
-import { readFileSync, writeFileSync } from 'node:fs';
-
-
-const dtdText = await fetch( 'https://www.w3.org/1999/11/xslt10.dtd' )
-    .then( ( response ) => response.text() )
-    .then( ( body ) =>
-    {
-        return body;
-    } );
-const matches = dtdText.match( /<([^>]*)>/g );
-
-const chopOff = ( s, begin = 1, end = 1 ) => s.substring( begin, s.length - end );
-const trim = s => s?.trim ? s.trim() : s;
-
-let lastComment = ''
-const dtdObj = { ENTITY: {}, ELEMENT: {} }
-for( const match of matches ){
-    if( match.startsWith( '<!--' ) ) {
-        lastComment = match;
-        continue;
-    }
-    const body = chopOff( match, 2 );
-    const arr = body.split( /\s/ );
-    const name = arr[ 1 ].trim();
-    const resolveRef = s => s ? ( s.startsWith ? ( s.startsWith( '%' ) ? dtdObj.ENTITY[ chopOff( s, 1, 0 ).replace( ';',
-        '' ) ] : s ) : s ) : s;
-    const attrObj = a =>
-    {
-        if( !a || Array.isArray( a ) || !a.trim )
-            return a;
-        const as = a.trim();
-        if( 'CDATA,#PCDATA,NMTOKEN,NMTOKENS,'.includes( as + ',' ) )
-            return as;
-        const ar = as.split( ';' )
-        const aa = ar[ 0 ].split( ' ' );
-        // if( aa[0].includes('select')){debugger;}
-        return { name: aa[ 0 ], type: resolveRef( aa[ 1 ] ), defValue: aa[ 1 ], required: (ar[1] || aa[ 2 ])?.trim() }
-    };
-    switch( arr[ 0 ] ){
-        case 'ENTITY':{
-            let key = arr[ 2 ];
-            let val = body.substring( body.indexOf( key ) + key.length ).trim();
-            let ss;
-            if( val.startsWith( '"' ) || val.startsWith( "'" ) ) {
-                val = chopOff( val );
-                if( val.includes( '(#PCDATA' ) ) {
-                    val = val.replace( '(#PCDATA', '' ).replace( ')*', '' ).trim();
-                    ss = [ '#PCDATA', ...val.split( '\n' ).map( s => s.trim() ).map( resolveRef ).flat() ];
-                } else
-                    ss = val.split( /[\n]/ ).map( s => s.replace( '|', '' ).trim() ).filter( s => s );
-            } else
-                ss = val.split( /[|\n]/ );
-
-            const v = ss.map( trim ).filter( s => s ).map( resolveRef ).map( attrObj ).flat().filter( s => s );
-            dtdObj.ENTITY[ key ] = !v.length ? '' : v.length === 1 ? v[ 0 ] : v;
-            break;
-        }
-        case 'ELEMENT':
-            dtdObj.ELEMENT[ name ] = { values: arr[ 2 ], attributes: [] };
-            break;
-        case 'ATTLIST':{
-            const attrStr = body.split( name )[ 1 ].trim();
-            const attrs = attrStr.split( '\n' ).map( s => s.trim() );
-            const elementAttrs = dtdObj.ELEMENT[ name ].attributes;
-            for( let a of attrs ){
-                if( a.startsWith( '%' ) ) {
-                    const v = dtdObj.ENTITY[ chopOff( a.split( ';' )[ 0 ], 1, 0 ) ];
-                    if( !v ) {
-                        debugger;
-                    }
-                    Array.isArray( v )
-                    ? elementAttrs.push( ...v )
-                    : elementAttrs.push( v );
-                } else
-                    elementAttrs.push( attrObj( a ) );
-            }
-
-            break;
-        }
-    }
-}
-
-// replace the tags list in custom-element.js
-
-const tagsCsv = Object.keys( dtdObj.ELEMENT ).map( s => s.replace( 'xsl:', '' ) ).join( ',' );
-const jsText = readFileSync( '../custom-element.js', 'utf8' )
-const updatedJs = jsText.replace( /^.*export const xslTags = .*$/mg,
-    `export const xslTags = '${ tagsCsv }'.split(',');` );
-writeFileSync( '../custom-element.js', updatedJs );
-
-const vsCode = {
-    "version": 1.1, tags: Object.keys( dtdObj.ELEMENT ).map( s => (
-        {   name        : s.replace( 'xsl:', '' )
-        ,   description : `${ s }`
-        ,   attributes  : dtdObj.ELEMENT[ s ].attributes.map( a => (
-                            {   name         : a.name
-                            ,   description: `${ JSON.stringify( a ) }`
-                            ,   type       : "string"
-                            ,   required    : a.required === '#REQUIRED'
-                            } ) )
-        ,    references : [ {   name: "MDN docs"
-                            ,   url : `https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/${s.replace( 'xsl:', '' )}`
-                            }]
-        } ) )
-};
-
-writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined, 4 ) );
-
-const intelliJ = {
-    "$schema": "http://json.schemastore.org/web-types",
-    "name": "@epa-wg/custom-element",
-    "version": "0.0.33",
-    "js-types-syntax": "typescript",
-    "description-markup": "markdown",
-    "contributions": {
-        "html": {
-            "elements": [
-                ...Object.keys( dtdObj.ELEMENT ).map( s => (
-                    {   name        : s.replace( 'xsl:', '' )
-                        ,   description : `${ s }`
-                        ,   attributes  : dtdObj.ELEMENT[ s ].attributes.map( a => (
-                            {   name        : a.name
-                            ,   description : `${ JSON.stringify( a ) }`
-                            ,   type        : "string"
-                            ,   required    : a.required === '#REQUIRED'
-                            } ) )
-                        ,   'doc-url'   : `https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/${s.replace( 'xsl:', '' )}`
-                    } ) ),
-                {
-                    "name": "for-each",
-                    "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
-                    "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each",
-                    "attributes": [
-                        {
-                            "name": "select",
-                            "description": "Uses an XPath expression to select nodes to be processed.",
-                            "required": true,
-                            "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select",
-                            "value": {
-                                "type": "string"
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    }
-};
-
-
-writeFileSync( '.././ide/web-types-xsl.json', JSON.stringify( intelliJ, undefined, 4 ) );
-
-
+/**
+ * node xslDtd2Ide.cjs
+ * would get xsl 1.0 schema and populate IntelliJ and VS Code IDE custom elements definitions
+ *
+ * This is one time use script as XSLT 1.0 schema is not changing.
+ * DTD parsing here is not generic and cobers only particula XSLT 1.0 schema.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+
+
+const dtdText = await fetch( 'https://www.w3.org/1999/11/xslt10.dtd' )
+    .then( ( response ) => response.text() )
+    .then( ( body ) =>
+    {
+        return body;
+    } );
+const matches = dtdText.match( /<([^>]*)>/g );
+
+const chopOff = ( s, begin = 1, end = 1 ) => s.substring( begin, s.length - end );
+const trim = s => s?.trim ? s.trim() : s;
+
+let lastComment = ''
+const dtdObj = { ENTITY: {}, ELEMENT: {} }
+for( const match of matches ){
+    if( match.startsWith( '<!--' ) ) {
+        lastComment = match;
+        continue;
+    }
+    const body = chopOff( match, 2 );
+    const arr = body.split( /\s/ );
+    const name = arr[ 1 ].trim();
+    const resolveRef = s => s ? ( s.startsWith ? ( s.startsWith( '%' ) ? dtdObj.ENTITY[ chopOff( s, 1, 0 ).replace( ';',
+        '' ) ] : s ) : s ) : s;
+    const attrObj = a =>
+    {
+        if( !a || Array.isArray( a ) || !a.trim )
+            return a;
+        const as = a.trim();
+        if( 'CDATA,#PCDATA,NMTOKEN,NMTOKENS,'.includes( as + ',' ) )
+            return as;
+        const ar = as.split( ';' )
+        const aa = ar[ 0 ].split( ' ' );
+        // if( aa[0].includes('select')){debugger;}
+        return { name: aa[ 0 ], type: resolveRef( aa[ 1 ] ), defValue: aa[ 1 ], required: (ar[1] || aa[ 2 ])?.trim() }
+    };
+    switch( arr[ 0 ] ){
+        case 'ENTITY':{
+            let key = arr[ 2 ];
+            let val = body.substring( body.indexOf( key ) + key.length ).trim();
+            let ss;
+            if( val.startsWith( '"' ) || val.startsWith( "'" ) ) {
+                val = chopOff( val );
+                if( val.includes( '(#PCDATA' ) ) {
+                    val = val.replace( '(#PCDATA', '' ).replace( ')*', '' ).trim();
+                    ss = [ '#PCDATA', ...val.split( '\n' ).map( s => s.trim() ).map( resolveRef ).flat() ];
+                } else
+                    ss = val.split( /[\n]/ ).map( s => s.replace( '|', '' ).trim() ).filter( s => s );
+            } else
+                ss = val.split( /[|\n]/ );
+
+            const v = ss.map( trim ).filter( s => s ).map( resolveRef ).map( attrObj ).flat().filter( s => s );
+            dtdObj.ENTITY[ key ] = !v.length ? '' : v.length === 1 ? v[ 0 ] : v;
+            break;
+        }
+        case 'ELEMENT':
+            dtdObj.ELEMENT[ name ] = { values: arr[ 2 ], attributes: [] };
+            break;
+        case 'ATTLIST':{
+            const attrStr = body.split( name )[ 1 ].trim();
+            const attrs = attrStr.split( '\n' ).map( s => s.trim() );
+            const elementAttrs = dtdObj.ELEMENT[ name ].attributes;
+            for( let a of attrs ){
+                if( a.startsWith( '%' ) ) {
+                    const v = dtdObj.ENTITY[ chopOff( a.split( ';' )[ 0 ], 1, 0 ) ];
+                    if( !v ) {
+                        debugger;
+                    }
+                    Array.isArray( v )
+                    ? elementAttrs.push( ...v )
+                    : elementAttrs.push( v );
+                } else
+                    elementAttrs.push( attrObj( a ) );
+            }
+
+            break;
+        }
+    }
+}
+
+// replace the tags list in custom-element.js
+
+const tagsCsv = Object.keys( dtdObj.ELEMENT ).map( s => s.replace( 'xsl:', '' ) ).join( ',' );
+const jsText = readFileSync( '../custom-element.js', 'utf8' )
+const updatedJs = jsText.replace( /^.*export const xslTags = .*$/mg,
+    `export const xslTags = '${ tagsCsv }'.split(',');` );
+writeFileSync( '../custom-element.js', updatedJs );
+
+const vsCode = {
+    "version": 1.1, tags: Object.keys( dtdObj.ELEMENT ).map( s => (
+        {   name        : s.replace( 'xsl:', '' )
+        ,   description : `${ s }`
+        ,   attributes  : dtdObj.ELEMENT[ s ].attributes.map( a => (
+                            {   name         : a.name
+                            ,   description: `${ JSON.stringify( a ) }`
+                            ,   type       : "string"
+                            ,   required    : a.required === '#REQUIRED'
+                            } ) )
+        ,    references : [ {   name: "MDN docs"
+                            ,   url : `https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/${s.replace( 'xsl:', '' )}`
+                            }]
+        } ) )
+};
+
+writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined, 4 ) );
+
+const intelliJ = {
+    "$schema": "http://json.schemastore.org/web-types",
+    "name": "@epa-wg/custom-element",
+    "version": "0.0.34",
+    "js-types-syntax": "typescript",
+    "description-markup": "markdown",
+    "contributions": {
+        "html": {
+            "elements": [
+                ...Object.keys( dtdObj.ELEMENT ).map( s => (
+                    {   name        : s.replace( 'xsl:', '' )
+                        ,   description : `${ s }`
+                        ,   attributes  : dtdObj.ELEMENT[ s ].attributes.map( a => (
+                            {   name        : a.name
+                            ,   description : `${ JSON.stringify( a ) }`
+                            ,   type        : "string"
+                            ,   required    : a.required === '#REQUIRED'
+                            } ) )
+                        ,   'doc-url'   : `https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/${s.replace( 'xsl:', '' )}`
+                    } ) ),
+                {
+                    "name": "for-each",
+                    "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
+                    "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each",
+                    "attributes": [
+                        {
+                            "name": "select",
+                            "description": "Uses an XPath expression to select nodes to be processed.",
+                            "required": true,
+                            "doc-url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select",
+                            "value": {
+                                "type": "string"
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+};
+
+
+writeFileSync( '.././ide/web-types-xsl.json', JSON.stringify( intelliJ, undefined, 4 ) );
+
+

package/custom-element.js

@@ -89,7 +89,12 @@ obj2node( o, tag, doc )
         return create(tag,o,doc);
     if( t === 'number' )
         return create(tag,''+o,doc);
-
+    if( isNode(o) )
+    {
+        const el = create(tag);
+        el.append(o);
+        return el;
+    }
     if( o instanceof Array )
     {   const ret = create('array','',doc);
         o.map( ae => ret.append( obj2node(ae,tag,doc)) );
@@ -103,13 +108,20 @@ obj2node( o, tag, doc )
     }
     const ret = create(tag,'',doc);
     for( let k in o )
-        if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
+    {
+        if( typeof o[ k ] === 'function' || o[ k ] instanceof Window )
             continue
-        else
-            if( typeof o[k] !== "object" && isValidTagName(k) )
-                ret.setAttribute(k, o[k] );
+        if( isNode( o[ k ] ) )
+        {   if( k === 'data' || k==='value' )
+                ;
             else
-                ret.append(obj2node(o[k], k, doc))
+                continue
+        }
+        if( typeof o[ k ] !== "object" && isValidTagName( k ) )
+            ret.setAttribute( k, o[ k ] )
+        else
+            ret.append( obj2node( o[ k ], k, doc ) )
+    }
     return ret;
 }
     export function
@@ -234,6 +246,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
                 const d = xml2dom( '<xhtml/>' )
                 ,     n = d.importNode(r, true);
                 d.replaceChild(n,d.documentElement);
+                if( n.namespaceURI === HTML_NS_URL && !attr(n,'xmlns'))
+                    n.setAttribute('xmlns',HTML_NS_URL);
                 return xslHtmlNs(n);
             };
             if( e )
@@ -311,7 +325,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         ,  name = attr(a,'name');
 
         declaredAttributes.push(name);
-        if( a.childNodes.length)
+        if( a.childNodes.length )
             hardcodedAttributes[name] = a.textContent;
 
         payload.append(p);
@@ -536,6 +550,8 @@ export function mergeAttr( from, to )
 {   for( let a of from.attributes)
         try
         {   const name = a.name;
+            if( name.startsWith('xmlns') )
+                continue;
             if( a.namespaceURI )
             {   if( !to.hasAttributeNS(a.namespaceURI, name) || to.getAttributeNS(a.namespaceURI, name) !== a.value )
                     to.setAttributeNS( a.namespaceURI, name, a.value )
@@ -665,14 +681,19 @@ export const toXsl = (el, defParent) => {
         x.setAttribute( a.name, a.value );
     while(el.firstChild)
         x.append(el.firstChild);
+    const replacement = el.localName === 'if' || el.localName === 'choose' ? (() => {
+        const span = create('span');
+        span.append(x);
+        return span;
+    })() : x;
     if( el.parentElement )
-        el.parentElement.replaceChild( x, el );
+        el.parentElement.replaceChild( replacement, el );
     else
     {  const p = (el.parentElement || defParent)
         ,  arr = [...p.childNodes];
         arr.forEach((n, i) => {
             if (n === el)
-                arr[i] = x;
+                arr[i] = replacement;
         });
         p.replaceChildren(...arr);
     }
@@ -685,7 +706,7 @@ CustomElement extends HTMLElement
     async connectedCallback()
     {
         if(this.firstElementChild && this.firstElementChild.localName !== 'template')
-            console.warn('custom-element used without template wrapping content\n', this.outerHTML);
+            console.log('custom-element used without template wrapping content\n', this.outerHTML);
         const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
         ,               tag = attr( this, 'tag' )
         ,           tagName = tag ? tag : 'dce-'+crypto.randomUUID();

package/demo/a.html

@@ -63,11 +63,18 @@
 <body>
 
 
+<custom-element tag="dce-link2" >
+        <template>
 
-        <custom-element src="./html-template.html#dwc-logo">
-            <template><i>loading SVG from templates file ...</i></template>
-        </custom-element>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
 
+            p3: <code data-testid="t3">{$p3}</code>
+        </template>
+    </custom-element>
+    <section>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2>
+
+    </section>
 
 </body>
 </html>

package/demo/html-template.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <head>
+  <meta charset="utf-8">
     <title>template based on HTML file</title>
     <style>svg {
         width: 4rem;
@@ -8,9 +9,9 @@
 </head>
 <body>
 <script>console.error('Stranger danger!')</script>
-<b id="wave">👋</b>
-<b id="ok">👌</b>
-<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
+<b id="wave" data-testid="wave" >👋</b>
+<b id="ok"   data-testid="ok"   >👌</b>
+<svg id="dwc-logo" data-testid="dwc-logo"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
     <defs>
         <style>.cls-1 {
             fill: #c2e6f1;
@@ -73,7 +74,7 @@
     <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>
-<math id="sophomores-dream" display="block">
+<math id="sophomores-dream"  data-testid="ml-test" display="block">
     <mrow>
         <msubsup>
             <mo>∫</mo>