@epa-wg/custom-element 0.0.10 → 0.0.12

package/http-request.js

@@ -2,56 +2,49 @@ const     attr = (el, attr)=> el.getAttribute(attr);
 
 export class HttpRequestElement extends HTMLElement
 {
-    // @attribute url
-    constructor() {
-        super();
+    static get observedAttributes() {
+        return  [   'value' // populated from localStorage, if defined initially, sets the value in storage
+                ,   'slice'
+                ,   'url'
+                ,   'method'
+                ,   'header-accept'
+                ]
     }
+
     get requestHeaders()
     {   const ret = {};
         [...this.attributes].filter(a=>a.name.startsWith('header-')).map( a => ret[a.name.substring(7)] = a.value );
-        return ret;
+        return ret
     }
     get requestProps()
     {   const ret = {};
         [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
-        return ret;
+        return ret
     }
-    sliceInit( s )
-    {   if( !s )
-            s = {};
-        s.element = this;
-        if( s.destroy )
-            return s;
-        const controller = new AbortController();
-        s.destroy = ()=>
-        {   // todo destroy slices in custom-element
-            controller.abort();
-        };
+
+    disconnectedCallback(){ this._destroy?.(); }
+
+    connectedCallback()
+    {   const controller = new AbortController();
+        this._destroy = ()=> controller.abort(this.localName+' disconnected');
+
         const     url = attr(this, 'url') || ''
         ,     request = { ...this.requestProps, headers: this.requestHeaders }
-        ,       slice = { detail: { request }, target: this }
-        , updateSlice = slice =>
-        {   for( let parent = s.element.parentElement; parent; parent = parent.parentElement )
-                if ( parent.onSlice )
-                    return parent.onSlice(slice);
-            console.error(`${this.localName} used outside of custom-element`)
-            debugger;
-        };
-
+        ,       slice = { request }
+        ,      update = () => this.dispatchEvent( new Event('change') );
+        this.value = slice;
         setTimeout( async ()=>
-        {   updateSlice( slice );
+        {   update();
             const response = await fetch(url,{ ...this.requestProps, signal: controller.signal, headers: this.requestHeaders })
-            ,      r= {headers: {}};
-            [...response.headers].map( ([k,v]) => r.headers[k]=v );
-            'ok,status,statusText,type,url,redirected'.split(',').map(k=>r[k]=response[k])
+            ,      r = {headers: {}};
+            [...response.headers].map( ([k,v]) => r.headers[k] = v );
+            'ok,status,statusText,type,url,redirected'.split(',').map( k=> r[k] = response[k] )
 
-            slice.detail.response = r;
-            updateSlice( slice );
-            slice.detail.data = await response.json();
-            updateSlice( slice );
+            slice.response = r;
+            update();
+            slice.data = await response.json();
+            update();
         },0 );
-
-        return s;
     }
 }
 

package/index.html

@@ -25,10 +25,12 @@
         The data query is powered by XPath. </p>
     <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
     <section>
-    <b>Data layer demo</b>
-        <a href="./demo/local-storage.html">local-storage</a> |
-        <a href="./demo/http-request.html">http-request</a> |
-        <a href="./demo/location-element.html">location-element</a>
+    <h4>Data layer demo</h4>
+        <a href="./demo/local-storage.html"     >local-storage      </a> |
+        <a href="./demo/http-request.html"      >http-request       </a> |
+        <a href="./demo/location-element.html"  >location-element   </a> |
+        <a href="./demo/external-template.html" >external template  </a> |
+        <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>
 <html-demo-element legend="1. simple payload"
@@ -45,20 +47,22 @@
                    description="slots are filled as in template+shadow root">
     <template>
         <custom-element tag="dce-1-slot" hidden>
-           <slot name="slot1"> 😃</slot>
+           🐇❤️<slot name="slot1"> 🥦</slot>
         </custom-element>
         <dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="2a. payload with slot definition and slot value"
-                   description="same slot can be used multiple times unlike in TEMPLATE">
+                   description="unlike in TEMPLATE, same slot can be used multiple times and within attribute ">
     <template>
         <custom-element tag="dce-2-slots" hidden>
            <slot name="slot2"> 😃</slot> and again:
            <slot name="slot2"> 😃</slot>
+            <xhtml:input placeholder="🐇❤️{//*[@slot='slot2']}"/>
         </custom-element>
         <dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
+        <dce-2-slots></dce-2-slots>
     </template>
 </html-demo-element>
 
@@ -94,6 +98,7 @@
         <custom-element tag="greet-element" hidden>
           <slot> Hello </slot> World!
         </custom-element>
+        <greet-element></greet-element>
         <greet-element>👋</greet-element>
     </template>
 </html-demo-element>
@@ -102,35 +107,38 @@
                    description="Complex case with slots, attributes, dataset, conditional render">
     <template>
 
-        <custom-element tag="pokemon-tile" hidden>
-            <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
-                                                         mapped into /*/attributes/title -->
-            <xsl:if 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 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 -->
+        <custom-element tag="pokemon-tile" hidden id="shared-template">
+            <template>
+                <h3> {title} </h3>           <!-- title is an attribute in instance
+                                                  mapped into /*/attributes/title -->
+                <xsl:if 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: {//smile}</div> <!-- /datadom/dataset/smile -->
+                </xsl:if>
+                <!-- image would not be visible in sandbox, see live demo -->
+                <img 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><slot name="description"><i>description is not available</i></slot></p>
-            <xsl:for-each 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()'/>
-                </button>
+                                                        <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
+                <p><slot name="description"><i>description is not available</i></slot></p>
+                <xsl:for-each select="//*[@pokemon-id]">
+                                                        <!-- loop over payload elements with `pokemon-id` attribute,
+                                                            i.e LI elements -->
+                    <button>
+                        <img height="32"
+                            src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
+                            alt="{text()}"/>
+                        <br/>
+                        {text()} <!-- text from LI element in loop -->
+                    </button>
 
-            </xsl:for-each>
+                </xsl:for-each>
+            </template>
         </custom-element>
 
         <pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >

package/input-text.js

@@ -0,0 +1,17 @@
+export class InputTextElement extends HTMLElement
+{
+    constructor()
+    {
+        super();
+        const i = this.ownerDocument.createElement('input');
+        for(let a of this.attributes)
+            a.namespaceURI ? i.setAttributeNS(a.namespaceURI,a.name,a.value) : i.setAttribute(a.name,a.value)
+        this.append(i)
+    }
+    get value(){ return this.firstChild.value }
+    set value(v){ return this.firstChild.value = v }
+    disconnectedCallback(){ }
+}
+
+window.customElements.define( 'input-text', InputTextElement );
+export default InputTextElement;

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.10",
+    "version": "0.0.12",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",