@epa-wg/custom-element 0.0.11 → 0.0.13

package/local-storage.js

@@ -1,5 +1,4 @@
-const     attr = (el, attr)=> el.getAttribute(attr)
-, string2value = (type, v) =>
+const     string2value = (type, v) =>
 {   if( type === 'text')
         return v;
     if( type === 'json')
@@ -24,42 +23,36 @@ function ensureTrackLocalStorage()
 
 export class LocalStorageElement extends HTMLElement
 {
-    // @attribute live - monitors localStorage change
-    // @attribute type - `text|json`, defaults to text, other types are compatible with INPUT field
-    constructor()
+    static get observedAttributes() {
+        return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+                ,   'slice'
+                ,   'key'
+                ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
+                ,   'live' // monitors localStorage change
+                ];
+    }
+
+    async connectedCallback()
     {
-        super();
-        const      state = {}
-        ,           type = attr(this, 'type') || 'text'
-        ,       listener = e=> e.detail.key === attr( this,'key' ) && propagateSlice()
-        , propagateSlice = ()=>
-        {   for( let parent = this.parentElement; parent; parent = parent.parentElement)
-                if( parent.onSlice )
-                    return parent.onSlice(
-                        {     detail: string2value( type, localStorage.getItem( attr( this, 'key' ) ) )
-                        ,     target: this
-                        } );
-                console.error(`${this.localName} used outside of custom-element`)
-                debugger;
-        };
-        this.sliceInit = s =>
-        {   if( !state.listener && this.hasAttribute('live') )
-            {   state.listener = 1;
-                window.addEventListener( 'local-storage', listener );
-                ensureTrackLocalStorage();
-            }
-            propagateSlice();
-            return s || {}
+        const    attr = attr => this.getAttribute(attr)
+            , fromStorage = ()=>
+        {   this.value = string2value( attr('type'), localStorage.getItem( attr( 'key' ) ) );
+            this.dispatchEvent( new Event('change') )
+        }
+        // todo apply type
+        if( this.hasAttribute('value'))
+            localStorage.setItem( 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 );
         }
-        this._destroy = ()=>
-        {
-            if( !state.listener )
-                return;
-            state.listener && window.removeEventListener('local-storage', listener );
-            delete state.listener;
-        };
     }
-    disconnectedCallback(){ this._destroy(); }
+    disconnectedCallback(){ this._destroy?.(); }
 }
 
 window.customElements.define( 'local-storage', LocalStorageElement );

package/location-element.js

@@ -2,15 +2,20 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 
 export class LocationElement extends HTMLElement
 {
-    // @attribute live - monitors localStorage change
-    // @attribute src - URL to be parsed, defaults to `window.location`
+    static get observedAttributes()
+    {   return  [   'value' // populated from localStorage, if defined initially, sets the valiue in storage
+                ,   'slice'
+                ,   'live' // monitors location change
+                ,   'src'  // URL to be parsed, defaults to `window.location`
+                ];
+    }
 
     constructor()
     {
         super();
         const      state = {}
         ,       listener = e=> propagateSlice(e)
-        , propagateSlice = (e)=>
+        , propagateSlice = ()=>
         {   const urlStr = attr(this,'src')
             const url = urlStr? new URL(urlStr) : window.location
 
@@ -24,21 +29,14 @@ export class LocationElement extends HTMLElement
             {   if ('string' === typeof url[k])
                     detail[k] = url[k]
             }
-            for( let parent = this.parentElement; parent; parent = parent.parentElement)
-            {   if (parent.onSlice)
-                    return parent.onSlice(
-                        {   detail
-                            , target: this
-                        });
-            }
-            console.error(`${this.localName} used outside of custom-element`)
-            debugger;
+            this.value = detail;
+            this.dispatchEvent( new Event('change') );
         };
         this.sliceInit = s =>
         {
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
-                window.addEventListener( 'popstate', listener );
+                window.addEventListener( 'popstate'  , listener );
                 window.addEventListener( 'hashchange', listener );
             }
             propagateSlice();
@@ -49,14 +47,15 @@ export class LocationElement extends HTMLElement
             if( !state.listener )
                 return;
             if(state.listener)
-            {   window.removeEventListener('popstate', listener);
+            {   window.removeEventListener('popstate'  , listener);
                 window.removeEventListener('hashchange', listener);
             }
             delete state.listener;
         };
-        this.sliceInit()
+
     }
-    disconnectedCallback(){ this._destroy(); }
+    connectedCallback(){ this.sliceInit() }
+    disconnectedCallback(){ this._destroy() }
 }
 
 window.customElements.define( 'location-element', LocationElement );

package/package.json

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

package/0/a.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>custom-element Declarative Custom Element implementation demo</title>
-    <link rel="icon" href="demo/wc-square.svg" />
-    <script type="module" src="../custom-element.js"></script>
-    <style>
-        @import "demo/demo.css";
-    </style>
-</head>
-<body>
-
-<custom-element src="../demo/embed-1.html" hidden>
-    loading from embed-1.html ...
-</custom-element>
-
-</body>
-</html>

package/0/a.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?xml-stylesheet type="text/xsl" href="a.xsl"?>
-<datadom xmlns="urn:schemas-epa-wg:dce">
-	<payload/>
-	<attributes>
-		<a></a>
-	</attributes>
-	<dataset/>
-	<slice/>
-</datadom>

package/0/a.xsl

@@ -1,66 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-    <xsl:output method="html"/>
-
-    <xsl:template match="/">
-        selecting <xsl:value-of select="count(//attributes)"/> attrs
-        <xsl:for-each select="//attributes">
-            <xsl:call-template name="attributes"/>
-        </xsl:for-each>
-    </xsl:template>
-    <xsl:template name="slot">
-        <xsl:param name="slotname"/>
-        <xsl:param name="defaultvalue"/>
-        <xsl:choose>
-            <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
-    </xsl:template>
-    <xsl:template name="attributes">
-
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
-  <defs>
-    <linearGradient id="d">
-      <stop offset="0"/>
-      <stop offset=".5"/>
-      <stop offset=".80000001" stop-opacity=".46666667"/>
-      <stop offset="1" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="a">
-      <stop offset="0" stop-color="#fb0"/>
-      <stop offset=".5" stop-color="#e29d00"/>
-      <stop offset="1" stop-color="#fb0"/>
-    </linearGradient>
-    <linearGradient id="c">
-      <stop offset="0"/>
-      <stop offset="1" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="b">
-      <stop offset="0" stop-color="#ffc"/>
-      <stop offset=".5" stop-color="#fff965"/>
-      <stop offset="1" stop-color="#fc3"/>
-    </linearGradient>
-    <linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
-    <radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
-    <radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
-    <radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
-  </defs>
-  <path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
-  <path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
-  <path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
-  <path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
-  <use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
-  <path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
-  <path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
-  <use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
-</svg></xsl:template>
-    <xsl:variable name="slottemplate">
-        <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template>
-    </xsl:variable>
-</xsl:stylesheet>

package/0/a1.xsl

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce" version="1.0">
-    <xsl:output method="html"/>
-
-    <xsl:template match="/">
-    <xsl:apply-templates select="//dce:attributes"/>
-    </xsl:template>
-    <xsl:template name="slot">
-        <xsl:param name="slotname"/>
-        <xsl:param name="defaultvalue"/>
-        <xsl:choose>
-            <xsl:when test="//dce:payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//dce:payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
-    </xsl:template>
-    <xsl:template match="dce:attributes">
-		slot1
-   <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="'slot1'"/>
-            <xsl:with-param name="defaultvalue"> 😃</xsl:with-param>
-        </xsl:call-template> 
-		<hr/> slot2:
-   <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="'slot2'"/>
-            <xsl:with-param name="defaultvalue"> 😃</xsl:with-param>
-        </xsl:call-template>
-    <input xmlns="http://www.w3.org/1999/xhtml" placeholder="🐇❤️{//*[@slot='slot2']}" />
-</xsl:template>
-    <xsl:variable name="slottemplate">
-        <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template>
-    </xsl:variable>
-</xsl:stylesheet>

package/0/ab.xsl

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-    <xsl:output method="html"/>
-
-    <xsl:template match="/">
-        <xsl:apply-templates select="//attributes"/>
-    </xsl:template>
-    <xsl:variable name="body">
-        <slot> Hello </slot> World!
-    </xsl:variable>
-    <xsl:template match="attributes">
-        <h1>attributes</h1>
-        <xsl:apply-templates mode="slots" select="."/>
-        <xsl:value-of select="//*[@slot=&quot;&quot;] "/> World!
-    </xsl:template>
-    <xsl:template mode="slots" match="slot">
-        <xsl:copy />
-    </xsl:template>
-    <xsl:template mode="slots" match="*">
-        <xsl:copy />
-    </xsl:template>
-
-</xsl:stylesheet>

package/0/az.xml

@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-    <xsl:output method="html"/>
-
-    <xsl:template match="/">
-        <xsl:for-each select="//attributes">
-            <xsl:call-template name="attributes"/>
-        </xsl:for-each>
-    </xsl:template>
-    <xsl:template name="slot">
-        <xsl:param name="slotname"/>
-        <xsl:param name="defaultvalue"/>
-        <xsl:choose>
-            <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
-            </xsl:otherwise>
-        </xsl:choose>
-    </xsl:template>
-    <xsl:template name="attributes"><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><h4>embed-1.html</h4>
-<custom-element tag="dce-embed-1">🖖</custom-element>
-<dce-embed-1>?</dce-embed-1></body></html></xsl:template>
-    <xsl:variable name="slottemplate">
-        <xsl:call-template name="slot">
-            <xsl:with-param name="slotname" select="''"/>
-            <xsl:with-param name="defaultvalue"/>
-        </xsl:call-template>
-    </xsl:variable>
-</xsl:stylesheet>

package/0/b.html

@@ -1,90 +0,0 @@
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-    <xsl:output method="html"/>
-
-    <xsl:template match="/">
-        <xsl:apply-templates select="//attributes"/>
-    </xsl:template>
-    <xsl:template match="attributes">
-        <h3 xmlns="http://www.w3.org/1999/xhtml">
-            <xsl:value-of select="title"/>
-        </h3> <!-- title is an attribute in instance
-                                                             mapped into /*/attributes/title -->
-        <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile">                 <!-- data-smile DCE instance attribute,
-                                                             mapped into /*/dataset/smile
-                                                             used in condition -->
-            <!-- data-smile DCE instance attribute, used as HTML -->
-            <div>Smile as:
-                <xsl:value-of select="//smile"/>
-            </div>
-        </xsl:if>
-        <!-- image would not be visible in sandbox, see live demo -->
-        <img xmlns="http://www.w3.org/1999/xhtml"
-             src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
-             alt="{title} image"/>
-        <!-- image-src and title are DCE instance attributes,
-             mapped into /*/attributes/
-             used within output attribute via curly brackets -->
-
-        <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
-        <p xmlns="http://www.w3.org/1999/xhtml">
-            <xsl:value-of select="//*[@slot=&quot;description&quot;]"/>
-        </p>
-        <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
-            <!-- loop over payload elements with `pokemon-id` attribute -->
-            <button>
-                <img height="32"
-                     src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
-                     alt="{text()}"/>
-                <br/>
-                <xsl:value-of select="text()">
-                </xsl:value-of>
-            </button>
-
-        </xsl:for-each>
-        <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-            <xsl:output method="html"/>
-
-            <xsl:template match="/">
-                <xsl:apply-templates select="//attributes"/>
-            </xsl:template>
-            <xsl:template match="attributes">
-                <h3 xmlns="http://www.w3.org/1999/xhtml">
-                    <xsl:value-of select="title"/>
-                </h3> <!-- title is an attribute in instance
-                                                             mapped into /*/attributes/title -->
-                <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile">                 <!-- data-smile DCE instance attribute,
-                                                             mapped into /*/dataset/smile
-                                                             used in condition -->
-                    <!-- data-smile DCE instance attribute, used as HTML -->
-                    <div>Smile as:
-                        <xsl:value-of select="//smile"/>
-                    </div>
-                </xsl:if>
-                <!-- image would not be visible in sandbox, see live demo -->
-                <img xmlns="http://www.w3.org/1999/xhtml"
-                     src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
-                     alt="{title} image"/>
-                <!-- image-src and title are DCE instance attributes,
-                     mapped into /*/attributes/
-                     used within output attribute via curly brackets -->
-
-                <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
-                <p xmlns="http://www.w3.org/1999/xhtml">
-                    <xsl:value-of select="//*[@slot=&quot;description&quot;]"/>
-                </p>
-                <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
-                    <!-- loop over payload elements with `pokemon-id` attribute -->
-                    <button>
-                        <img height="32"
-                             src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
-                             alt="{text()}"/>
-                        <br/>
-                        <xsl:value-of select="text()">
-                        </xsl:value-of>
-                    </button>
-
-                </xsl:for-each>
-            </xsl:template>
-        </xsl:stylesheet>
-    </xsl:template>
-</xsl:stylesheet>