@epa-wg/custom-element 0.0.17 → 0.0.19

package/custom-element.js

@@ -7,12 +7,22 @@ const XSL_NS_URL  = 'http://www.w3.org/1999/XSL/Transform'
 
 const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   isText = e => e.nodeType === 3
-,   create = ( tag, t = '', d=document ) => ( e => ((e.innerText = t||''),e) )((d.ownerDocument || d ).createElement( tag ))
+,   isString = s => typeof s === 'string'
+,   isNode = e => e && typeof e.nodeType === 'number'
+,   create = ( tag, t = '', d=document ) => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
 ,   createText = ( d, t) => (d.ownerDocument || d ).createTextNode( t )
-,   emptyNode = n=> { while(n.firstChild) n.firstChild.remove(); return n; }
+,   emptyNode = n => { while(n.firstChild) n.firstChild.remove(); n.getAttributeNames().map( a => n.removeAttribute(a) ); return n; }
 ,   createNS = ( ns, tag, t = '' ) => ( e => ((e.innerText = t||''),e) )(document.createElementNS( ns, tag ))
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
-,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) );
+,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
+,   cloneAs = (p,tag) =>
+{   const px = p.ownerDocument.createElementNS(p.namespaceURI,tag);
+    for( let a of p.attributes)
+        px.setAttribute(a.name, a.value);
+    while( p.firstChild )
+        px.append(p.firstChild);
+    return px;
+}
 
     function
 ASSERT(x)
@@ -82,6 +92,30 @@ Json2Xml( o, tag )
         ret.push("/>");
     return ret.join('\n');
 }
+
+    export function
+obj2node( o, tag, doc )
+{
+    if( typeof o === 'function'){debugger}
+    if( typeof o === 'string' )
+        return create(tag,o,doc);
+
+    if( o instanceof Array )
+    {   const ret = create('array');
+        o.map( ae => ret.append( obj2node(ae,tag,doc)) );
+        return ret
+    }
+    const ret = create(tag,'',doc);
+    for( let k in o )
+        if( isNode(o[k]) || typeof o[k] ==='function' || o[k] instanceof Window )
+            continue
+        else
+            if( typeof o[k] !== "object" )
+                ret.setAttribute(k, o[k] );
+            else
+                ret.append(obj2node(o[k], k, doc))
+    return ret;
+}
     export function
 tagUid( node )
 {   // {} to xsl:value-of
@@ -123,7 +157,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
         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" >   
+    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 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>
@@ -141,6 +175,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     ,   tc = (n =>
         {
             forEach$(n,'script', s=> s.remove() );
+            const xslRoot = n.content ?? n.firstElementChild?.content ?? n.body ?? n;
+            xslTags.forEach( tag => forEach$( xslRoot, tag, el=>toXsl(el,xslRoot) ) );
             const e = n.firstElementChild?.content || n.content
             , asXmlNode = r => {
                 const d = xml2dom( '<xhtml/>' )
@@ -202,24 +238,38 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     if( !fr )
         return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
     const params = [];
-    [...fr.querySelectorAll('dce-root>param')].forEach(p=>
-    {   payload.append(p);
+    [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
+    {
+        const p = cloneAs(a,'xsl:param')
+        ,  name = attr(a,'name');
+        payload.append(p);
         let select = attr(p,'select')?.split('??')
         if( !select)
-        {   select = ['//'+attr(p, 'name'), `'${p.textContent}'`];
+        {   select = ['//'+name, `'${p.textContent}'`];
             emptyNode(p);
+            p.setAttribute('name',name);
         }
-        if( select?.length>1){
+        let val;
+        if( select?.length>1 ){
             p.removeAttribute('select');
             const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
-            c.firstElementChild.setAttribute('test',select[0]);
             emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
             emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
-            p.append(c)
-        }
+            c.firstElementChild.setAttribute('test',select[0]);
+            p.append(c);
+            val = c.cloneNode(true);
+        }else
+            val=cloneAs(a,'xsl:value-of');
+        val.removeAttribute('name');
+        a.append(val);
+        a.removeAttribute('select');
         params.push(p)
     });
-
+    [...fr.querySelectorAll('[value]')].filter(el=>el.getAttribute('value').match( /\{(.*)\?\?(.*)\}/g )).forEach(el=>
+    {   const v = attr(el,'value');
+        if(v)
+            el.setAttribute('value', evalCurly(v));
+    });
     for( const c of fr.childNodes )
         payload.append(xslDom.importNode(c,true))
 
@@ -276,18 +326,57 @@ deepEqual(a, b, O=false)
             return O
     return true;
 }
-
+    export const
+assureSlices = ( root, names) =>
+    names.split('|').map(n=>n.trim()).map( xp =>
+    {   if(xp.includes('/'))
+        {   const ret = [], r = root.ownerDocument.evaluate( xp, root );
+            for( let n; n = r.iterateNext(); )
+                ret.push( n )
+            return ret
+        }
+        return [...root.childNodes].find(n=>n.localName === xp) || create(xp);
+    }).flat();
+
+/**
+ *
+ * @param x slice node
+ * @param sliceNames slice name, xPath in /datadom/slice/
+ * @param ev Event obj
+ * @param dce
+ */
     export function
-injectSlice( x, s, data )
+event2slice( x, sliceNames, ev, dce )
 {
-    const isString = typeof data === 'string' ;
-    const createXmlNode = ( tag, t = '' ) => ( e => ((e.append( createText(x, t||''))),e) )(x.ownerDocument.createElement( tag ))
-    const el = isString
-        ? createXmlNode(s, data)
-        : document.adoptNode( xml2dom( Json2Xml( data, s ) ).documentElement);
-    [...x.children].filter( e=>e.localName === s ).map( el=>el.remove() );
-    el.data = data
-        x.append(el);
+    // evaluate slices[]
+    // inject @attributes
+    // inject event
+    // evaluate slice-value
+    // slice[i] = slice-value
+    assureSlices(x,sliceNames).map( s =>
+    {
+        const d = x.ownerDocument
+        ,    el = ev.sliceEventSource
+        ,   sel = ev.sliceElement
+        ,   cleanSliceValue = ()=>[...s.childNodes].filter(n=>n.nodeType===3 || n.localName==='value').map(n=>n.remove());
+        el.getAttributeNames().map( a => s.setAttribute( a, attr(el,a) ) );
+        [...s.childNodes].filter(n=>n.localName==='event').map(n=>n.remove());
+        ev.type==='init' && cleanSliceValue();
+        s.append( obj2node( ev, 'event', d ) );
+        if( sel.hasAttribute('slice-value') )
+        {   s.setAttribute('value', el.value );
+            const v = xPath( attr( sel, 'slice-value'),s );
+            cleanSliceValue();
+            s.append( createText( d, v ) );
+        }else
+        {   const v = el.value || attr( sel, 'value' ) ;
+            cleanSliceValue();
+            if( isString(v) )
+                s.append( createText( d, v) );
+            else
+                s.append( obj2node(v,'value',s.ownerDocument) )
+        }
+    })
 }
 
 function forEach$( el, css, cb){
@@ -328,7 +417,10 @@ export function mergeAttr( from, to )
         return
     }
     for( let a of from.attributes)
-        a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+    {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+        if( a.name === 'value')
+            to.value = a.value
+    }
 }
 export function assureUnique(n, id=0)
 {
@@ -370,7 +462,7 @@ export function merge( parent, fromArr )
             {   if( o.nodeValue !== e.nodeValue )
                     o.nodeValue = e.nodeValue;
             }else
-            {   mergeAttr(o,e)
+            {   mergeAttr(e,o)
                 if( o.childNodes.length || e.childNodes.length )
                     merge(o, e.childNodes)
             }
@@ -383,6 +475,54 @@ export function assureUID(n,attr)
         n.setAttribute(attr, crypto.randomUUID());
     return n.getAttribute(attr)
 }
+export const evalCurly = s =>
+{   const exp = [...s?.matchAll( /([^{}]*)(\{)([^}]+)}([^{}]*)/g ) ].map(l=>`${l[1]}{${ xPathDefaults(l[3] )}}${l[4]}`);
+    return exp.join('');
+}
+export const xPathDefaults = x=>
+{   if(!x.trim())
+        return x;
+    const xx = x.split('??')
+    ,      a = xx.shift()
+    ,      b = xPathDefaults(xx.join('??'));
+
+    return xx.length ? `concat( ${a} , substring( ${b} , (1+string-length( ${b} )) * string-length( ${a} ) ) )`: x
+    // return xx.length ? `${a}|(${xPathDefaults(xx.join('??'))})[not(${a})]`: a
+}
+export const xPath = (x,root)=>
+{   x = xPathDefaults(x);
+
+    const it = root.ownerDocument.evaluate(x, root);
+    switch( it.resultType )
+    {   case XPathResult.NUMBER_TYPE: return it.numberValue;
+        case XPathResult.STRING_TYPE: return it.stringValue;
+    }
+
+    let ret = '';
+    for( let n ;n=it.iterateNext(); )
+        ret += n.textContent;
+    return ret
+}
+export const xslTags = 'stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback'.split(',');
+export const toXsl = (el, defParent) => {
+    const x = create('xsl:'+el.localName);
+    for( let a of el.attributes )
+        x.setAttribute( a.name, a.value );
+    while(el.firstChild)
+        x.append(el.firstChild);
+    if( el.parentElement )
+        el.parentElement.replaceChild( x, el );
+    else
+    {  const p = (el.parentElement || defParent)
+        ,  arr = [...p.childNodes];
+        arr.forEach((n, i) => {
+            if (n === el)
+                arr[i] = x;
+        });
+        p.replaceChildren(...arr);
+    }
+};
+
     export class
 CustomElement extends HTMLElement
 {
@@ -405,19 +545,23 @@ CustomElement extends HTMLElement
 
         Object.defineProperty( this, "xsltString", { get: ()=>templateDocs.map( td => xmlString(td) ).join('\n') });
 
-        const dce = this;
-        const sliceNames = [...this.templateNode.querySelectorAll('[slice]')].map(e=>attr(e,'slice'));
+        const dce = this
+        , sliceNodes = [...this.templateNode.querySelectorAll('[slice]')]
+        , sliceNames = sliceNodes.map(e=>attr(e,'slice')).filter(n=>!n.includes('/')).filter((v, i, a)=>a.indexOf(v) === i)
+        , declaredAttributes = templateDocs.reduce( (ret,t) => { if( t.params ) ret.push( ...t.params ); return ret; }, [] );
+
         class DceElement extends HTMLElement
         {
-            static get observedAttributes()
-            {   return templateDocs.reduce( (ret,t) =>
-                {   if( t.params ) ret.push( ...t.params.map(e=>attr(e,'name')) );
-                    return ret;
-                }, [] );
-            }
+            static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
+            #inTransform = 0;
             connectedCallback()
-            {   if( this.firstElementChild?.tagName === 'TEMPLATE' )
-                {   const t = this.firstElementChild;
+            {   let payload = this.childNodes;
+                if( this.firstElementChild?.tagName === 'TEMPLATE' )
+                {
+                    const t = this.firstElementChild;
+                    t.remove();
+                    payload = t.content.childNodes;
+
                     for( const n of [...t.content.childNodes] )
                         if( n.localName === 'style' ){
                             const id = assureUID(this,'data-dce-style')
@@ -428,9 +572,6 @@ CustomElement extends HTMLElement
                                 t.insertAdjacentElement('beforebegin',n);
                             else if(n.nodeType===3)
                                 t.insertAdjacentText('beforebegin',n.data);
-
-                    t.remove();
-
                 }
                 const x = xml2dom( '<datadom/>' ).documentElement;
                 const createXmlNode = ( tag, t = '' ) => ( e =>
@@ -438,11 +579,12 @@ CustomElement extends HTMLElement
                         e.append( createText( x, t ))
                     return e;
                 })(x.ownerDocument.createElement( tag ))
-                injectData( x, 'payload'    , this.childNodes, assureSlot );
+                injectData( x, 'payload'    , payload , assureSlot );
                 this.innerHTML='';
                 injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
-                const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) );
+                const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
+                ,     sliceXPath = x => xPath(x, sliceRoot);
                 this.xml = x;
 
                 const sliceEvents=[];
@@ -450,10 +592,10 @@ CustomElement extends HTMLElement
                 {   const processed = {}
 
                     for(let ev; ev = sliceEvents.pop(); )
-                    {   const s = attr( ev.target, 'slice');
+                    {   const s = attr( ev.sliceElement, 'slice');
                         if( processed[s] )
                             continue;
-                        injectSlice( sliceRoot, s, 'object' === typeof ev.detail ? {...ev.detail}: ev.detail );
+                        event2slice( sliceRoot, s, ev, this );
                         processed[s] = ev;
                     }
                     Object.keys(processed).length !== 0 && transform();
@@ -462,10 +604,7 @@ CustomElement extends HTMLElement
 
                 this.onSlice = ev=>
                 {   ev.stopPropagation?.();
-                    const s = attr( ev.target, 'slice')
-                    if( deepEqual( ev.detail, [...sliceRoot.children].find( e=>e.localName === s )?.data ) )
-                        return
-
+                    ev.sliceEventSource = ev.currentTarget || ev.target;
                     sliceEvents.push(ev);
                     if( !timeoutID )
                         timeoutID = setTimeout(()=>
@@ -474,7 +613,9 @@ CustomElement extends HTMLElement
                         },10);
                 };
                 const transform = this.transform = ()=>
-                {
+                {   if(this.#inTransform){ debugger }
+                    this.#inTransform = 1;
+
                     const ff = xp.map( (p,i) =>
                     {   const f = p.transformToFragment(x.ownerDocument, document)
                         if( !f )
@@ -487,35 +628,55 @@ CustomElement extends HTMLElement
                         assureUnique(f);
                         merge( this, f.childNodes )
                     })
-                    const changeCb = el=>this.onSlice({ detail: el[attr(el,'slice-prop') || 'value'], target: el })
-                    , hasInitValue = el => el.hasAttribute('slice-prop') || el.hasAttribute('value') || el.value;
+
+                    DceElement.observedAttributes.map( a =>
+                    {   let v = attr(this.firstElementChild,a);
+                        if( v !== attr(this,a) )
+                        {   this.setAttribute( a, v );
+                            this.#applyAttribute( a, v );
+                        }
+                    })
 
                     forEach$( this,'[slice]', el =>
                     {   if( !el.dceInitialized )
                         {   el.dceInitialized = 1;
-                            el.addEventListener( attr(el,'slice-update')|| 'change', ()=>changeCb(el) )
-                            if( hasInitValue(el) )
-                                changeCb(el)
+                            const evs = attr(el,'slice-event');
+                            (evs || 'change')
+                                .split(' ')
+                                .forEach( t=> (el.localName==='slice'? el.parentElement : el)
+                                                .addEventListener( t, ev=>
+                                                {   ev.sliceElement = el;
+                                                    this.onSlice(ev)
+                                                } ));
+                            if( !evs || evs.includes('init') )
+                            {   if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
+                                    this.onSlice({type:'init', target: el, sliceElement:el })
+                                else
+                                    el.value = sliceXPath( attr(el,'slice') )
+                            }
                         }
-                    })
+                    });
+                    this.#inTransform = 0;
                 };
                 transform();
                 applySlices();
             }
-            attributeChangedCallback(name, oldValue, newValue)
-            {   if( !this.xml )
-                    return;
-                let a = this.xml.querySelector(`attributes>${name}`);
+            #applyAttribute(name, newValue)
+            {   let a = this.xml.querySelector(`attributes>${name}`);
                 if( a )
-                    emptyNode(a).append( createText(a,newValue));
+                    emptyNode(a).append( createText(a,newValue) );
                 else
                 {   a = create( name, newValue, this.xml );
-                    a.append( createText(a,newValue) );
                     this.xml.querySelector('attributes').append( a );
                 }
-
+            }
+            attributeChangedCallback(name, oldValue, newValue)
+            {   if( !this.xml || this.#inTransform )
+                    return;
+                this.#applyAttribute(name, newValue);
                 this.transform(); // needs throttling
             }
+
             get dce(){ return dce }
         }
         if(tag)

package/demo/a.html

@@ -4,24 +4,58 @@
 <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="./wc-square.svg" />
-    <script type="module" src="../location-element.js"></script>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../http-request.js"></script>
     <script type="module" src="../custom-element.js"></script>
 
     <style>
         @import "./demo.css";
 
-        button{ background: forestgreen; }
-        table{ min-width: 16rem; }
-        td{ border-bottom: 1px solid silver; }
-        tfoot td{ border-bottom: none; }
-        td,th{text-align: right; }
-        caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
+        button {
+            background: forestgreen;
+        }
+
+        table {
+            min-width: 16rem;
+        }
+
+        td {
+            border-bottom: 1px solid silver;
+        }
+
+        tfoot td {
+            border-bottom: none;
+        }
+
+        td, th {
+            text-align: right;
+        }
+
+        caption {
+            padding: 1rem;
+            font-weight: bolder;
+            font-family: sans-serif;
+        }
     </style>
 </head>
 <body>
-<custom-element> my tag is {tag} </custom-element>
-<my-element></my-element>
+
+ <custom-element>
+            <template>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount + 1"   >
+                    +
+                </button>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount - 1"   >
+                    -
+                </button>
+                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
+                {//clickcount}
+            </template>
+        </custom-element>
 
 </body>
 </html>