decue 1.0.0 → 1.1.0

package/dist/decue.min.js

@@ -1 +1 @@
-var decue=function(){const d=document.currentScript.getAttribute("shadow")||"none";if(!["open","closed","none"].includes(d)){throw`Invalid default shadow DOM mode "${d}". Must be one of "open", "closed" or "none".`}const a=/{([a-zA-Z_0-9]+)((?:\|[.]?[a-zA-Z_0-9]+)*)}/g;const c=t=>!(t==="shadow"||t.startsWith("decue-"));const u=t=>{var e=t;while(e&&e.parentNode){if(e.parentNode===document){return true}else if(e.parentNode instanceof ShadowRoot){e=e.parentNode.host}else{e=e.parentNode}}return false};const n=o=>(t,e)=>{const s=e.startsWith(".")?e.substring(1):undefined;const i=window[e];if(!s&&!i){throw`Global function "${e}" not found. Make sure to include it (not deferred) before this element is created.`}return s?typeof t[s]==="function"?t[s]():t[s]:i.apply(o,[t])};const r=(i,o,t)=>t.replaceAll(a,(t,e,s)=>o.hasAttribute(e)?s.split("|").slice(1).reduce(n(i),o.getAttribute(e)):t);const h=(t,[e,s,i])=>{const o=r(e,t,s);if(e instanceof Text){if(o!==e.data){e.data=o}}else if(e instanceof HTMLElement){if(o!==e.getAttribute(i)){e.setAttribute(i,o)}}};const f=(t,s)=>{const e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT|NodeFilter.SHOW_ELEMENT);while(e.nextNode()){const i=e.currentNode;if(i instanceof Text){[...i.data.matchAll(a)].forEach(t=>s(i,undefined,t[1]))}else if(i instanceof HTMLElement){i.getAttributeNames().forEach(e=>[...i.getAttribute(e).matchAll(a)].forEach(t=>s(i,e,t[1])))}}};const b=(i,t)=>{t.querySelectorAll("slot[name]").forEach(t=>{const e=i.querySelectorAll(`:scope > [slot="${t.getAttribute("name")}"]`);const s=e.length>0?e:t.children;t.replaceWith.apply(t,s)});const e=t.querySelector("slot:not([name])");if(e){const s=[...i.childNodes].filter(t=>t.nodeType!==Node.ELEMENT_NODE||!t.hasAttribute("slot"));const o=s.length>0?s:e.children;e.replaceWith.apply(e,o)}};const i=(o,a,n,t,e)=>{const r=t=>o?console.log(a+": "+t):undefined;var l=e;if(n){f(n.content,(t,e,s)=>l.push(s))}l=[...new Set(l.filter(c))];window.customElements.define(a,class extends HTMLElement{static formAssociated=t;static observedAttributes=l;constructor(){super();this._template=n||[...document.getElementsByTagName("template")].find(t=>t.getAttribute("decue")===a);if(!this._template){throw`Template for "${a}" not found. Make sure it comes in the DOM before any corresponding custom element.`}if(!t&&this._template.hasAttribute("formAssociated")){throw`Cannot declare a predefined custom element "${a}" as formAssociated. Move it from elements="..." to formAssociated="...".`}const i=this;this.getAttributeNames().filter(t=>t.startsWith("decue-on:")).map(t=>t.substring("decue-on:".length)).forEach(t=>{const e=i.getAttribute("decue-on:"+t);const s=window[e];if(!s){throw`Global handler function "${e}" for event "${t}" not found.`}r("Registering event listener for event: "+t);i.addEventListener(t,s)});if(t){const o=this.attachInternals();var s=this.getAttribute("value");r("Making form-associated with value: "+s);Object.defineProperties(this,{internals:{value:o,writable:false},value:{get:()=>s,set:t=>{s=t;o.setFormValue(s);i.checkValidity()}},name:{get:()=>this.getAttribute("name")},form:{get:()=>o.form},labels:{get:()=>o.labels},validity:{get:()=>o.validity},validationMessage:{get:()=>o.validationMessage},willValidate:{get:()=>o.willValidate},setFormValue:{value:(t,e)=>o.setFormValue(s=t,e),writable:false},setValidity:{value:o.setValidity.bind(o),writable:false},checkValidity:{value:()=>{m(i,"checkvalidity");return o.checkValidity()},writable:false},reportValidity:{value:o.reportValidity.bind(o),writable:false}});this.value=s;if(!this.hasAttribute("tabindex")){this.tabIndex=0}}}connectedCallback(){this._shadow=this.getAttribute("shadow")||this._template.getAttribute("shadow")||d;if(!["open","closed","none"].includes(this._shadow)){throw`Invalid shadow DOM mode "${this._shadow}" for element "${a}". Must be one of "open", "closed" or "none".`}const t=this._shadow==="none"?this:this.attachShadow({mode:this._shadow,delegatesFocus:true});const i=this._template.content.cloneNode(true);const e=()=>{r("Finalizing...");if(this._shadow==="none"){b(t,i);r("Slots initialized")}this._boundNodes=[];[i,this].forEach(t=>f(t,(t,e,s)=>this._boundNodes.push(t instanceof HTMLElement?[t,t.getAttribute(e),e]:[t,t.data,undefined])));const e=this;const s=this.getAttributeNames().filter(c).filter(t=>!l.includes(t));if(s.length>0&&this._boundNodes.length>0){new MutationObserver(t=>t.forEach(t=>{if(s.includes(t.attributeName)){e.attributeChangedCallback(t.attributeName,t.oldValue,t.target.getAttribute(t.attributeName))}})).observe(this,{attributes:true});this._decueMutationObserved=true;if(o){r("Observing attributes with MutationObserver: "+s.join(" "));this.setAttribute("data-decue-mutation-observed-attributes",s.join(" "))}}if(o&&l.length>0){r("Observing attributes with observedAttributes: "+l.join(" "));this.setAttribute("data-decue-observed-attributes",l.join(" "))}t.append(i);this._boundNodes.forEach(t=>h(e,t));m(this,"connect")};if(n){e()}else{const s=new MutationObserver(()=>{s.disconnect();e()});s.observe(this.parentElement,{childList:true})}}attributeChangedCallback(t,e,s){if(e!==s){if(t==="value"&&this.value!==s){this.value=s}if(this._boundNodes){const i=this._boundNodes.filter(([t,e])=>u(t));if(i.length!==this._boundNodes.length){this._boundNodes=i}const o=this;this._boundNodes.forEach(t=>h(o,t))}m(this,"attributechange",{name:t,oldValue:e,newValue:s})}}disconnectedCallback(){m(this,"disconnect")}adoptedCallback(){m(this,"adopt")}formAssociatedCallback(t){m(this,"formassociate",{form:t})}formDisabledCallback(t){m(this,"formdisable",{disabled:t})}formResetCallback(){m(this,"formreset")}formStateRestoreCallback(t,e){m(this,"formstaterestore",{state:t,mode:e})}})};const m=(t,e,s)=>{t.dispatchEvent(new CustomEvent(e,{detail:s||{},bubbles:true}))};const o=document.currentScript.hasAttribute("debug");[{attr:"elements",formAssociated:false},{attr:"form-associated",formAssociated:true}].forEach(({attr:t,formAssociated:s})=>{if(document.currentScript.hasAttribute(t)){document.currentScript.getAttribute(t).split(/\s+/).map(t=>t.split(/\[|]/)).forEach(([t,e])=>i(o,t,undefined,s,e?e.split(","):[]))}});const e=t=>{const e=t.getAttribute("decue");if(e&&!window.customElements.get(e)){i(o,e,t,t.hasAttribute("form-associated"),[])}};window.addEventListener("DOMContentLoaded",()=>{[...document.getElementsByTagName("template")].forEach(e);[...document.getElementsByTagName("object")].filter(t=>t.getAttribute("type")==="text/html").forEach(t=>{t.addEventListener("load",()=>[...t.contentDocument.getElementsByTagName("template")].forEach(e));[...t.contentDocument.getElementsByTagName("template")].forEach(e)})});return{processTemplate:e,defineElement:i}}();
+var decue=function(){var r=("currentScript"in document&&document["currentScript"]?document["currentScript"].hasAttribute("debug"):false)||false;var n=("currentScript"in document&&document["currentScript"]?document["currentScript"].getAttribute("shadow"):undefined)||"none";if(!["open","closed","none"].includes(n)){throw new Error('Invalid default shadow DOM mode "'+n+'". Must be one of "open", "closed" or "none".')}var s=/{(\.?[a-zA-Z_0-9]+)((?:[.|][a-zA-Z_0-9]+)*)}/g;var l=function(e){return!(e==="shadow"||e.startsWith("decue-"))};var a=function(o){return function(e,t){var n=t.startsWith(".")?t.substring(1):undefined;var r=n&&typeof e[n]==="function";var i=c[t];if(!n&&!i){throw new Error('Global function "'+t+'" not found. Make sure to include it (not deferred) before this element is created.')}return n?r?e[n]():e[n]:i.apply(o,[e])}};var u=function(i,o,e){return e.replaceAll(s,function(e,t,n){var r=(t+n).replaceAll(/([^|])\./g,"$1|.").split("|");return o.hasAttribute(t)?r.slice(1).reduce(a(i),o.getAttribute(t)):t.startsWith(".")?r.reduce(a(i),o):e})};var d=function(e,t){var n=t[0];var r=t[1];var i=t[2];var o=u(n,e,r);if(n.nodeType===Node.TEXT_NODE){var a=n;if(o!==a.data){a.data=o}}else if(n.nodeType===Node.ELEMENT_NODE){var s=n;if(o!==s.getAttribute(i)){s.setAttribute(i,o)}}};var f=function(e,r){var t=document.createTreeWalker(e,4|1);while(t.nextNode()){var n=t.currentNode;if(n.nodeType===Node.TEXT_NODE){var i=n;var o;while((o=s.exec(i.data))!==null){r(i,null,o[1])}}else if(n.nodeType===Node.ELEMENT_NODE){var a=n;a.getAttributeNames().forEach(function(e){var t=a.getAttribute(e);var n;while((n=s.exec(t))!==null){r(a,e,n[1])}})}}};var h=function(r,e){e.querySelectorAll("slot[name]").forEach(function(e){var t=r.querySelectorAll(':scope > [slot="'+e.getAttribute("name")+'"]');var n=t.length>0?t:e.children;e.replaceWith.apply(e,n)});var t=e.querySelector("slot:not([name])");if(t){var n=Array.prototype.slice.call(r.childNodes).filter(function(e){return e.nodeType!==Node.ELEMENT_NODE||!e.hasAttribute("slot")});var i=n.length>0?n:t.children;t.replaceWith.apply(t,i)}};var b=function(r){return r.getAttributeNames().filter(function(e){return e.startsWith("decue-on:")}).map(function(e){return e.substring("decue-on:".length)}).map(function(e){var t=r.getAttribute("decue-on:"+e);var n=globalThis[t];if(!n){throw'Global handler function "'+t+'" for event "'+e+'" not found.'}r.addEventListener(e,n);return[e,n]})};var v=function(t,e){if(e){var n=e.filter(function(e){return e[0].ownerDocument!==undefined});if(n.length!==e.length){e=n}e.forEach(function(e){d(t,e)})}return e};var i=function(i,o,a,s,e){var u=function(){if(i&&console){console.log.apply(null,[o].concat(Array.prototype.slice.call(arguments)))}};var c=e;if(a){f(a.content,function(e,t,n){c.push(n)})}c=c.filter(l).filter(function(e,t,n){return n.indexOf(e)===t});globalThis.customElements.define(o,class extends HTMLElement{static get formAssociated(){return s}static get observedAttributes(){return c}constructor(){super();this._template=a||Array.prototype.slice.call(document.getElementsByTagName("template")).filter(function(e){return e.getAttribute("decue")===o}).concat([undefined])[0];if(!this._template){throw`Template for "${o}" not found. Make sure it comes in the DOM before any corresponding custom element.`}if(!s&&this._template.hasAttribute("formAssociated")){throw`Cannot declare a predefined custom element "${o}" as formAssociated. Move it from elements="..." to formAssociated="...".`}if(s){var n=this.attachInternals();var r;var i=this;Object.defineProperties(this,{internals:{value:n,writable:false},value:{get:function(){return r},set:function(e){r=e;n.setFormValue(r);i.checkValidity();i._boundNodes=v(i,i._boundNodes)}},name:{get:function(){return this.getAttribute("name")}},form:{get:function(){return n.form}},labels:{get:function(){return n.labels}},validity:{get:function(){return n.validity}},validationMessage:{get:function(){return n.validationMessage}},willValidate:{get:function(){return n.willValidate}},setFormValue:{value:function(e,t){n.setFormValue(r=e,t);i._boundNodes=v(i,i._boundNodes)},writable:false},setValidity:{value:n.setValidity.bind(n),writable:false},checkValidity:{value:function(){m(i,"checkvalidity");return n.checkValidity()},writable:false},reportValidity:{value:n.reportValidity.bind(n),writable:false}})}}connectedCallback(){this._shadow=this.getAttribute("shadow")||this._template.getAttribute("shadow")||n;if(!["open","closed","none"].includes(this._shadow)){throw`Invalid shadow DOM mode "${this._shadow}" for element "${o}". Must be one of "open", "closed" or "none".`}if(!this._shadowRoot){this._shadowRoot=this._shadow==="none"?this:this.attachShadow({mode:this._shadow,delegatesFocus:true});if(s){this.value=this.getAttribute("value");u("Making form-associated with value",this.value);if(!this.hasAttribute("tabindex")){this.tabIndex=0}}this._eventListeners=b(this);var r=this;var e=function(){u("Finalizing...");var e=r._template.content.cloneNode(true);if(r._shadow==="none"){h(r._shadowRoot,e);u("Slots initialized")}r._boundNodes=[];[e,r].forEach(function(e){f(e,function(e,t){r._boundNodes.push(e.nodeType==Node.ELEMENT_NODE?[e,e.getAttribute(t),t]:[e,e.data,undefined])})});var n=r.getAttributeNames().filter(l).filter(function(e){return!c.includes(e)});if(n.length>0&&r._boundNodes.length>0){if(typeof MutationObserver==="undefined"){console.info(`Decue: Element "${o}" has attributes (${n.join(" ")}) which are not declared in observedAttributes, but no MutationObserver is available. These attributes won't be observed.`)}else{r._observer=new MutationObserver(function(e){e.forEach(function(e){if(n.includes(e.attributeName)){var t=e.target.getAttribute(e.attributeName);u("Attribute observer hit",e.attributeName,t,"(unobserved attributes: ",n,")");r.attributeChangedCallback(e.attributeName,e.oldValue,t)}})});r._observer.observe(r,{attributeOldValue:true});r._decueMutationObserved=true;if(i){u("Observing attributes with MutationObserver",n);r.setAttribute("data-decue-mutation-observed-attributes",n.join(" "))}}}if(i&&c.length>0){u("Observing attributes with observedAttributes",c);r.setAttribute("data-decue-observed-attributes",c.join(" "))}r._shadowRoot.append(e);r._boundNodes.forEach(function(e){d(r,e)});m(r,"connect")};if(a||r.ownerDocument.readyState!="loading"){e()}else if(typeof MutationObserver==="undefined"){throw new Error(`No MutationObserver available, cannot use predefined elements`)}else{var t=new MutationObserver(function(){t.disconnect();e()});t.observe(r.parentElement,{childList:true})}}}attributeChangedCallback(e,t,n){if(t!==n){if(s&&e==="value"&&this.value!==n){this.value=n}this._boundNodes=v(this,this._boundNodes);m(this,"attributechange",{name:e,oldValue:t,newValue:n})}}disconnectedCallback(){m(this,"disconnect");if(this._observer){u("Disconnecting MutationObserver");this._observer.disconnect();delete this._observer}if(this._eventListeners){u("Removing event listeners");this._eventListeners.forEach(function(e){this.removeEventListener(e[0],e[1])},this);delete this._eventListeners}}adoptedCallback(){m(this,"adopt")}formAssociatedCallback(e){m(this,"formassociate",{form:e})}formDisabledCallback(e){m(this,"formdisable",{disabled:e})}formResetCallback(){m(this,"formreset")}formStateRestoreCallback(e,t){m(this,"formstaterestore",{state:e,mode:t})}})};var m=function(e,t,n){if(typeof CustomEvent!=="undefined"){e.dispatchEvent(new CustomEvent(t,{detail:n||{},bubbles:true}))}else{e.dispatchEvent(new Event(t,{detail:n||{},bubbles:true}))}};[{attr:"elements",formAssociated:false},{attr:"form-associated",formAssociated:true}].forEach(function(n){if(document.currentScript.hasAttribute(n.attr)){document.currentScript.getAttribute(n.attr).split(/\s+/).map(function(e){return e.split(/\[|]/)}).forEach(function([e,t]){i(r,e,null,n.formAssociated,t?t.split(","):[])})}});var c={};if(document.currentScript&&document.currentScript.hasAttribute("functions")){document.currentScript.getAttribute("functions").split(/\s+/).forEach(function(n){var e=n;var t=n;var r=n.indexOf(":");if(r>=0){e=n.substring(0,r);t=n.substring(r+1)}var i=t.split(".").reduce(function(e,t){if(e&&t in e){return e[t]}else{throw`Cannot find namespace "${t}" while resolving function "${n}".`}},globalThis);if(typeof i!=="function"){throw`Function "${n}" not found. Make sure to include it (not deferred) before Decue script.`}c[e]=i})}var t=function(e){var t=e.getAttribute("decue");if(t&&!globalThis.customElements.get(t)){i(r,t,e,e.hasAttribute("form-associated"),[])}};var e=function(){[...document.getElementsByTagName("template")].forEach(t);[...document.getElementsByTagName("object")].filter(function(e){return e.getAttribute("type")==="text/html"}).forEach(function(e){e.addEventListener("load",function(){if(e.contentDocument){[...e.contentDocument.getElementsByTagName("template")].forEach(t)}});if(e.contentDocument){[...e.contentDocument.getElementsByTagName("template")].forEach(t)}})};if(typeof globalThis!=="undefined"){globalThis.addEventListener("DOMContentLoaded",e)}else if(typeof window!=="undefined"){window.addEventListener("DOMContentLoaded",e)}return{processTemplate:t,defineElement:i,registeredFunctions:c}}();if(typeof globalThis!=="undefined"){globalThis.decue=decue}else if(typeof window!=="undefined"){window.decue=decue}

package/eslint.config.js

@@ -0,0 +1,53 @@
+import js from '@eslint/js';
+import compat from 'eslint-plugin-compat';
+
+export default [
+  js.configs.recommended,
+  {
+    ignores: ['coverage/', 'dist/', 'node_modules/', '**/*.min.js']
+  },
+  {
+    files: ['src/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2015,
+      sourceType: 'script',
+      globals: {
+        // Browser globals
+        globalThis: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        performance: 'readonly',
+        customElements: 'readonly',
+        HTMLElement: 'readonly',
+        HTMLTableElement: 'readonly',
+        HTMLTableRowElement: 'readonly',
+        HTMLTableCellElement: 'readonly',
+        Element: 'readonly',
+        Node: 'readonly',
+        NodeList: 'readonly',
+        Event: 'readonly',
+        CustomEvent: 'readonly',
+        // Test globals
+        describe: 'readonly',
+        it: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        expect: 'readonly',
+        sinon: 'readonly',
+        assert: 'readonly'
+      }
+    },
+    plugins: {
+      compat
+    },
+    rules: {
+      'compat/compat': 'error'
+    },
+    settings: {
+      polyfills: []
+    }
+  }
+];

package/examples.html

@@ -2,8 +2,13 @@
 <html>
 <head>
     <meta charset="utf-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'nonce-a' 'nonce-b' 'nonce-c' 'nonce-d'" />
     <title>DeCuE examples</title>
-    <style>
+    <style nonce="a">
+        object {
+            position:absolute;
+            left: -99999px;
+        }
         main {
             display: flex;
         }
@@ -20,12 +25,12 @@
             outline: 2px solid blue;
         }
     </style>
-    <script>
+    <script nonce="b">
         function toLower(str) {
             return str.toLowerCase();
         }
     </script>
-    <script>
+    <script nonce="c">
         function validateme(ev) {
             const target = ev.target;
             if (target.value.indexOf('hello') < 0) {
@@ -45,9 +50,26 @@
             document.querySelector('[data-modifyvalues]').addEventListener('click', () => {
                 document.querySelectorAll('[value]').forEach(x => {x.value = 'hello ' + x.value; x.dispatchEvent(new Event('change'));});
             });
+
+            setTimeout(() => {
+                document.querySelectorAll('.remove-then-append nested-element-with-attribute').forEach(el => {
+                    const parent = el.parentNode;
+                    parent.removeChild(el);
+                    parent.appendChild(el);
+                });
+
+                
+                document.querySelectorAll('.move nested-element-with-attribute').forEach(el => {
+                    if (el.parentNode.moveBefore) { 
+                        el.parentNode.moveBefore(el, null);
+                    } else {
+                        el.parentNode.querySelector('.text').textContent = "(browser doesn't support moveBefore)";
+                    }
+                });
+            }, 1000);
         });
     </script>
-    <script src="src/decue.js" debug elements="predefined-element predefined-element-with-attributes predefined-element-with-slot"></script>
+    <script src="src/decue.js" debug elements="predefined-element predefined-element-with-attributes predefined-element-with-slot" functions="toLower"></script>
 </head>
 <body>
 
@@ -67,7 +89,7 @@
     </template>
     <template decue="nesting-element">
         <nested-element title="a nesting element"></nested-element>
-        <nested-element-with-attribute greetings="World!" title="a nesting element with an attribute"></nested-element-with-attribute>
+        <nested-element-with-attribute greetings="{greetings}" title="a nesting element with an attribute"></nested-element-with-attribute>
     </template>
 
     <template decue="default-slotted-element">
@@ -88,11 +110,11 @@
     <template decue="element-with-function">
         <div data-function="{greetings|toLower}" title="an element with a function {greetings|toLower}">Hello {greetings|toLower}</div>
     </template>
-    <template decue="element-with-method" title="an element with a method {greetings|.toUpperCase}">
-        <div data-method="{greetings|.toUpperCase}">Hello {greetings|.toUpperCase}</div>
+    <template decue="element-with-method" title="an element with a method {greetings.toUpperCase}">
+        <div data-method="{greetings.toUpperCase}">Hello {greetings.toUpperCase}</div>
     </template>
     <template decue="element-with-pipe">
-        <div data-piped="{greetings|.toUpperCase|toLower}" title="an element with a piping function {greetings|.toUpperCase|toLower}">Hello {greetings|.toUpperCase|toLower}</div>
+        <div data-piped="{greetings.toUpperCase|toLower}" title="an element with a piping function {greetings.toUpperCase|toLower}">Hello {greetings.toUpperCase|toLower}</div>
     </template>
 
     <template decue="predefined-element">
@@ -148,7 +170,7 @@
                 <td>
                     <fieldset>
                         <legend>Nesting</legend>
-                        <nesting-element></nesting-element>
+                        <nesting-element greetings="World!"></nesting-element>
                     </fieldset>
 
                     <fieldset>
@@ -190,7 +212,7 @@
                 <td>
                     <fieldset>
                         <legend>Nesting</legend>
-                        <nesting-element shadow="open"></nesting-element>
+                        <nesting-element greetings="World!" shadow="open"></nesting-element>
                     </fieldset>
 
                     <fieldset>
@@ -231,7 +253,7 @@
                 <td>
                     <fieldset>
                         <legend>Nesting</legend>
-                        <nesting-element shadow="closed"></nesting-element>
+                        <nesting-element greetings="World!" shadow="closed"></nesting-element>
                     </fieldset>
 
                     <fieldset>
@@ -270,9 +292,57 @@
                     </fieldset>
                 </td>
             </tr>
+
+            <tr>
+                <td>
+                    <fieldset class="remove-then-append">
+                        <legend>remove-then-append</legend>
+                        <nested-element-with-attribute greetings="World!"></nested-element-with-attribute>
+                        <div class="text">text originally in the end</div>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="remove-then-append">
+                        <legend>remove-then-append</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="open"></nested-element-with-attribute>
+                        <div class="text">text originally in the end</div>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="remove-then-append">
+                        <legend>remove-then-append</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="closed"></nested-element-with-attribute>
+                        <div class="text">text originally in the end</div>
+                    </fieldset>
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <fieldset class="move">
+                        <legend>move</legend>
+                        <nested-element-with-attribute greetings="World!"></nested-element-with-attribute>
+                        <div class="text">text originally in the end</div>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="move">
+                        <legend>move</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="open"></nested-element-with-attribute>
+                        <div class="text">text originally in the end</div>
+                    </fieldset>
+                </td>
+                <td>
+                    <fieldset class="move">
+                        <legend>move</legend>
+                        <nested-element-with-attribute greetings="World!" shadow="closed"></nested-element-with-attribute>
+                        <div class="text">text originally in the end</div>
+                    </fieldset>
+                </td>
+            </tr>
         </table>
     </main>
 
-    <object data="external.html" type="text/html" style="position:absolute; left: -99999px"></object>
+    <object nonce="d" data="external.html" type="text/html"></object>
 </body>
 </html>

package/external.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <template decue="external-element">
     <slot><div title="an external element with default slot">default slot: Hello {greetings}</div></slot>
 </template>

package/npm.sh

@@ -1,4 +1,4 @@
 #! /usr/bin/env nix-shell
-#! nix-shell -I channel:nixos-22.11-small -i bash -p nodejs-16_x
+#! nix-shell -I channel:nixos-25.05-small -i bash -p nodejs
 
 npm $*

package/package.json

@@ -1,25 +1,38 @@
 {
   "name": "decue",
-  "version": "1.0.0",
-  "description": "",
+  "version": "1.1.0",
+  "description": "Declarative Custom Elements. Create simple web components with just HTML, parameterized with slots and attributes. With or without shadow-dom.",
   "author": "Jyri-Matti Lähteenmäki <jyri-matti@lahteenmaki.net>",
-  "keywords": [],
+  "keywords": [
+    "html",
+    "web-component",
+    "custom-element"
+  ],
   "license": "MIT",
+  "browserslist": [
+    "since 2010"
+  ],
   "scripts": {
-    "test": "mocha-chrome test/index.html",
-    "dist": "cp -r src/* dist/ && npm run-script uglify",
+    "test": "npx playwright install && web-test-runner",
+    "test:watch": "web-test-runner --watch",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "compat": "eslint src/ --rule 'compat/compat: error'",
+    "dist": "npm test && npm run lint && npm run compat && cp -r src/* dist/ && npm run-script uglify",
     "uglify": "uglifyjs -m eval -o dist/decue.min.js dist/decue.js"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://codeberg.org/jyri-matti/decue.git"
+    "url": "https://codeberg.org/jyri-matti/decue.git"
   },
   "devDependencies": {
-    "chai": "^4.3.6",
-    "mocha": "^8.3.2",
-    "sinon": "^9.2.4",
-    "mocha-chrome": "^2.2.0",
-    "mocha-webdriver-runner": "^0.6.4",
+    "@esm-bundle/chai": "^4.3.4",
+    "@web/test-runner": "^0.18.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "browserslist": "^4.28.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-compat": "^6.1.0",
+    "sinon": "^17.0.0",
     "uglify-js": "^3.15.0"
   }
 }