Merge pull request #28 from EPA-WG/develop

0.0.14 - FF compatibility
EPA-WG · Feb 4, 2024 · 1246920 · 1246920
2 parents 94e7d44 + d86d9bd
commit 1246920
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -270,9 +270,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/[email protected].13/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/[email protected].13/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/[email protected].13/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/[email protected].14/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/[email protected].14/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/[email protected].14/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

diff --git a/custom-element.js b/custom-element.js
@@ -19,12 +19,12 @@ ASSERT(x)
     // if(!x)
     //     debugger
 }
-    function
+    export function
 xml2dom( xmlString )
 {
     return new DOMParser().parseFromString( xmlString, "application/xml" )
 }
-    function
+    export function
 xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
 
     function
@@ -95,7 +95,7 @@ tagUid( node )
             [...m].forEach(t=>
             {   if( t.index > l )
                     tt.push( txt( t.input.substring( l, t.index ) ))
-                const v = e.ownerDocument.createElement('xsl:value-of');
+                const v = node.querySelector('value-of').cloneNode();
                 v.setAttribute('select', t[1] );
                 tt.push(v);
                 l = t.index+t[0].length;
@@ -124,7 +124,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         return tagUid(templateNode)
     const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >   
         <xsl:output method="xml" />
-        <xsl:template match="/"><dce-root><xsl:apply-templates select="*"/></dce-root></xsl:template>
+        <xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*"/></dce-root></xsl:template>
         <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
         <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
         <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
@@ -141,7 +141,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         {
             forEach$(n,'script', s=> s.remove() );
             const e = n.firstElementChild?.content || n.content
-            , asXmlNode = r => xslHtmlNs(xml2dom( '<xhtml/>' ).importNode(r, true));
+            , asXmlNode = r => {
+                const d = xml2dom( '<xhtml/>' )
+                ,     n = d.importNode(r, true);
+                d.replaceChild(n,d.documentElement);
+                return xslHtmlNs(n);
+            };
             if( e )
             {   const t = create('div');
                 [ ...e.childNodes ].map( c => t.append(c.cloneNode(true)) )
@@ -152,10 +157,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   xslDom = xml2dom(
         `<xsl:stylesheet version="1.0"
         xmlns:xsl="${ XSL_NS_URL }"
+        xmlns:xhtml="${ HTML_NS_URL }"
         xmlns:dce="urn:schemas-epa-wg:dce"
         xmlns:exsl="http://exslt.org/common"
         exclude-result-prefixes="exsl"
     >
+    <xsl:template match="ignore"><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"/>
@@ -436,7 +443,7 @@ CustomElement extends HTMLElement
                 const transform = ()=>
                 {
                     const ff = xp.map( (p,i) =>
-                    {   const f = p.transformToFragment(x, document)
+                    {   const f = p.transformToFragment(x.ownerDocument, document)
                         if( !f )
                             console.error( "XSLT transformation error. xsl:\n", xmlString(templateDocs[i]), '\nxml:\n', xmlString(x) );
                         return f

diff --git a/demo/local-storage.html b/demo/local-storage.html
@@ -82,18 +82,19 @@
     </table>
 </fieldset>
 <script type="module">
+    import { localStorageSetItem } from '../local-storage.js';
     import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
 
     const basket = {cherries: 12, lemons:1 };
-    localStorage.setItem( 'basket', JSON.stringify(basket) );
+    localStorageSetItem( 'basket', JSON.stringify(basket) );
 
     $('button[name]')
         .forEach( b=> localStorage.setItem( b.name, b.value ) )
         .addEventListener( 'click', e =>
         {   const k = e.target.name;
             basket[k] || (basket[k] = 1);
-            localStorage.setItem( k, basket[k] = 1+1*localStorage[k] )
-            localStorage.setItem( 'basket', JSON.stringify(basket) );
+            localStorageSetItem( k, basket[k] = 1+1*localStorage[k] )
+            localStorageSetItem( 'basket', JSON.stringify(basket) );
             renderStorage();
         } );
 

diff --git a/local-storage.js b/local-storage.js
@@ -9,22 +9,14 @@ const     string2value = (type, v) =>
     return type==='number'? el.valueAsNumber : 'date|time|dateTimeLocal'.includes(type)? el.valueAsDate: el.value;
 };
 
-let originalSetItem;
-
-function ensureTrackLocalStorage()
-{   if( originalSetItem )
-        return;
-    originalSetItem = localStorage.setItem;
-    localStorage.setItem = function( key, value, ...rest )
-        {   originalSetItem.apply(this, [ key, value, ...rest ]);
-            window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
-        };
+export function localStorageSetItem(key, value)
+{   localStorage.setItem(key, value);
+    window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
 }
-
 export class LocalStorageElement extends HTMLElement
 {
     static get observedAttributes() {
-        return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
                 ,   'slice'
                 ,   'key'
                 ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
@@ -41,14 +33,13 @@ export class LocalStorageElement extends HTMLElement
         }
         // todo apply type
         if( this.hasAttribute('value'))
-            localStorage.setItem( attr( this, 'key' ) )
+            localStorageSetItem( attr( this, 'key' ) )
         else
             fromStorage()
 
         if( this.hasAttribute('live') )
         {   const listener = (e => e.detail.key === attr( 'key' ) && fromStorage());
             window.addEventListener( 'local-storage', listener );
-            ensureTrackLocalStorage();
             this._destroy = ()=> window.removeEventListener('local-storage', listener );
         }
     }

diff --git a/location-element.js b/location-element.js
@@ -3,7 +3,7 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 export class LocationElement extends HTMLElement
 {
     static get observedAttributes()
-    {   return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+    {   return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
                 ,   'slice'
                 ,   'live' // monitors location change
                 ,   'src'  // URL to be parsed, defaults to `window.location`

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