@epa-wg/custom-element 0.0.32 → 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

@@ -47,7 +47,7 @@ This project is a POC( Proof of Concept ) targeting to become a base for native
 
 # use
 
-Use the [bootstrap project](https://github.com/EPA-WG/custom-element-bootstrap) with all pre-configured or
+[//]: # (Use the [bootstrap project](https://github.com/EPA-WG/custom-element-bootstrap) with all pre-configured or)
 ## install
 use via CDN
 ```html
@@ -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.32/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.32/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.32/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.32/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.32",
-    "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.d.ts

@@ -1,5 +1,9 @@
 export function log(x: any): void;
 export function deepEqual(a: any, b:any): boolean|0;
+export function cloneAs(sourceNode: HTMLElement, tag:string): HTMLElement;
+export function mix(objTo: any, objFrom:any): any;
+export function mergeAttr(fromEl: HTMLElement, toEL:HTMLElement): void;
+
 export function xml2dom(xmlString:string): Document;
 export function xmlString(doc:Node|Document): string;
 export function obj2node(o:any, tag:string, doc:Document): HTMLElement;