dom-merge story & test

src/custom-element.js

@@ -122,7 +122,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><xsl:apply-templates select="*"/></dce-root></xsl:template>
         <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>

src/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;

stories/dom-merge.stories.js

@@ -0,0 +1,53 @@
+import '../src/custom-element.js';
+
+export default
+{   title: 'dom-merge', component: 'custom-element', argTypes:
+    {        title: { control: 'text', defaultValue: 'simple payload' }
+    ,          tag: { control: 'text', defaultValue: 'my-component' }
+    ,   attributes: { control: 'text', defaultValue: '' }
+    ,         slot: { control: 'text', defaultValue: `Hello World` }
+    ,      payload: { control: 'text', defaultValue: `🍋` }
+    }
+};
+
+function Template( { title, tag , attributes, slot, payload } )
+{
+    return `
+        <fieldset>
+            <legend>${ title }</legend>
+            <custom-element
+                tag="${ tag }"
+                hidden
+                >
+                ${ slot }
+            </custom-element>
+            <${ tag } ${attributes}>${ payload }</${ tag }>
+      </fieldset>
+  `;
+}
+
+export const TextareaOnBlur = Template.bind( {} );
+TextareaOnBlur.args =
+{     title: 'Textarea value, type and observe char count update on focus change'
+,       tag: ''
+,      slot: `  <textarea slice="text-container" >Hello world!</textarea>
+                <p> Char count:
+                        <b>{string-length(//slice/text-container/text())}</b>
+                </p>
+                <button> click to focus change </button>
+             `
+};
+
+export const InputOnChange = Template.bind( {} );
+InputOnChange.args =
+{     title: 'input value, type and observe char count update on keyup'
+,      slot: `  <input type="text"  value="Type time update" slice="txt" slice-update="keyup"/>
+                <span> Character count:
+                    <b> {string-length(//slice/txt)} </b>
+                </span>
+                <span> Word count:
+                    <i> {string-length(normalize-space(//slice/txt)) -
+                        string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </i>
+                </span>
+            `
+};

test/dom-merge.test.js

@@ -0,0 +1,50 @@
+import { fixture, expect, aTimeout } from '@open-wc/testing';
+
+import '../src/custom-element.js';
+import defaults, {TextareaOnBlur, InputOnChange} from "../stories/dom-merge.stories.js";
+
+const defs = {}; Object.keys(defaults.argTypes).map( k=> defs[k]= defaults.argTypes[k].defaultValue);
+const renderStory = async (story) =>
+{   const el = await fixture(story({...defs, ...story.args}));
+    return  {  el
+            ,   $: css => el.querySelector(css)
+            ,  $$: css => el.querySelectorAll(css)
+            , txt: css => el.querySelector(css).innerText
+            }
+}
+const TXT = "BE CURIOUS, LEARN AND ADOPT KNOWLEDGE, SEEK THE PATH, STATE THE GOALS AND OVERCOME.";
+
+describe('dom-merge', () => {
+
+  it('LocalStorageLoad slice init from value', async () => {
+    const {el, $,$$,txt} = await renderStory(TextareaOnBlur);
+    expect( txt('textarea')        ).to.equal(`Hello world!`);
+    expect( $('textarea').value    ).to.equal(`Hello world!`);
+    await aTimeout(10); // wait for update from slice
+    expect( txt('b')               ).to.equal(`Hello world!`.length+'' );
+  });
+
+  it('LocalStorageLoad slot change on blur', async () => {
+      const {el, $,$$,txt} = await renderStory(TextareaOnBlur);
+      await aTimeout(10); // wait for update from slice
+      expect( txt('b') ).to.equal(`Hello world!`.length+'' );
+      const ta = $('textarea');
+      ta.value = TXT;
+      ta.dispatchEvent( new Event('change') );
+      await aTimeout(10); // wait for update from slice
+      expect( txt('b') ).to.equal(TXT.length+'' );
+  });
+
+  it('LocalStorageLoad slot change on blur', async () => {
+      const {el, $,$$,txt} = await renderStory(InputOnChange);
+      await aTimeout(10); // wait for update from slice
+      expect( txt('b[data-dce-id]') ) // from instance instead of in-template
+          .to.equal(`Type time update`.length+'' );
+      const ta = $('input[data-dce-id]');
+      ta.value = TXT;
+      ta.dispatchEvent( new Event('keyup') );
+      await aTimeout(10); // wait for update from slice
+      expect( txt('b[data-dce-id]') ).to.equal(TXT.length+'' );
+  });
+
+});