npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.21 → 0.0.22 - Mend

@epa-wg/custom-element-dist 0.0.21 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (171) hide show

package/src/custom-element/demo/a.html CHANGED Viewed

@@ -1,63 +1,60 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-      xmlns:html="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>custom-element Declarative Custom Element implementation demo</title>
+    <title>Data slices - Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
     <script type="module" src="../http-request.js"></script>
-    <script type="module" src="../local-storage.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;
+        label {
+            display: flex;
         }
-        td, th {
-            text-align: right;
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
         }
-        caption {
-            padding: 1rem;
-            font-weight: bolder;
-            font-family: sans-serif;
+        nav {
+            max-width: 32em;
         }
     </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
 </head>
 <body>
-    <custom-element tag="dce-1">
-        <template >
-            <style >
-                color:red;
-            </style>
-            <u ><slot>red</slot></u>
+<fieldset>
+    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
+            style="color:red">red</i> in 1st instance
+    </legend>
+    <custom-element tag="dce-3">
+        <template>
+            <u>
+                <slot>is green</slot>
+            </u>
         </template>
+        <style>dce-3 {
+            color: green
+        }</style>
     </custom-element>
-<dce-1></dce-1> *
-<dce-1><template >
-            <style >
-                color:green;
-            </style>
-            <u >green</u>
-        </template></dce-1>
+   <u>should be</u> <i style="color:red">red</i>:
+    <dce-3 id="dce32">
+        <template>
+            <style> color:red; </style>
+            <u>red</u>
+        </template>
+    </dce-3> <br/>
+    should be GREEN:
+    <dce-3 id="dce31">green</dce-3>
+</fieldset>
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 </body>
 </html>

package/src/custom-element/demo/b.html ADDED Viewed

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><u data-dce-id="2" xmlns="">
+    <dce-text data-dce-id="3">
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
+            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
+        </xhtml:style>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+    </dce-text>
+</u></dce-root>

package/src/custom-element/demo/data-slices.html CHANGED Viewed

@@ -178,6 +178,38 @@
     </template>
 </html-demo-element>
+<html-demo-element legend="10. multiple slices by same field"
+                   description="same element value sets s1 and s2 slice">
+    <template>
+        <custom-element>
+        <template>
+            <input  slice="s1|s2"
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="11. slices and attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="emotion">😃</attribute>
+                <input slice="/datadom/attributes/emotion | s1"/>
+                Type and unfocus to update emotion attribute: {emotion}
+                and slice: {//slice/s1}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 </body>

package/src/custom-element/demo/form.html ADDED Viewed

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Forms - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+    <script type="module" src="../local-storage.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+        label{ display: flex;  }
+        label:has(input[type="text"],input[type="password"],input:not([type]) ){flex-direction: column;}
+        nav{ max-width: 32em; }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>Forms handling.</h3>
+    <ul>
+        <li> The form triggers re-render on <code>change</code> event before submit</li>
+        <li> <code>disabled</code> form attribute is added when validation is not passed </li>
+        <li> Form action triggered on submit changing the hash in URL </li>
+        <li> URL hash hides the <var>signin</var> form from DOM and shown <var>signout</var> form </li>
+        <li> signout action reverse visibility of signin and signout </li>
+        <li> "remember" checkbox triggers <code>local-storage</code> with value set from <var>form-data/remember</var> slice </li>
+        <li> "username" initial value taken from <code>local-storage</code> <var>usernane</var> slice </li>
+        <li> <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation - MDN</a> </li>
+    </ul>
+</nav>
+<html-demo-element legend="1. Simple validation"
+                   description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button  ">
+    <ol>
+        <li> Click Next, observe the warning </li>
+        <li> Fill input with 10+ characters </li>
+        <li> Click Next, the password and "Sign In" button should appear </li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form   slice="signin-form"
+                        custom-validity="
+                            string-length(/datadom/slice/signin-form/form-data/username) &gt; 10
+                            and string-length(//form-data/password) &gt; 3 "
+                    >
+                    <label> Email
+                        <input name="username" autocomplete="username" placeholder="Email, phone, or username" required="">
+                    </label>
+                    <variable name="showpassword" select="string-length(//form-data/username) &gt; 10 "></variable>
+                    <if test="not($showpassword)">
+                        <button slice="confirm" slice-event="click" slice-value="'password'">Next</button>
+                    </if>
+                    <if test="$showpassword">
+                        <label>Enter password: <input name="password" type="password" required> </label>
+                        <button>Sign In</button>
+                    </if>
+                    username {//username}
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="2. Form life cycle demo"
+                   description="form-data in the form slice is the source of truth" >
+    <template>
+        <custom-element>
+            <template>
+                <form   slice="signin-form"
+                        custom-validity="
+                            string-length(/datadom/slice/signin-form/form-data/username) &gt; 9
+                            and (   ( //confirm-by = 'sms' )
+                                    or ( //confirm-by = 'email' )
+                                    or ( //confirm-by = 'password' and string-length(//form-data/password) &gt; 3 )
+                                )
+                        "
+                    >
+                    <!-- form validity should be based on form-data -->
+                    <variable name="warn">
+                        <if test="string-length(//username-slice) &lt; 9 ">
+                            Should be 10 or more symbols. &nbsp;
+                            <!-- updated by slice on input event -->
+                        </if>
+                        <if test="//form-data/confirm-by = 'sms'">
+                            Message and Data Rates may apply.
+                            <!-- updated by form change by radio select -->
+                        </if>
+                    </variable>
+                    <label> Enter your email, phone, or user name
+                        <input name="username" autocomplete="username"
+                            placeholder="Email, phone, or username"
+                            custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
+                            slice-event="input"
+                            slice="username-slice"
+                            required
+                        />
+                    </label>
+                    <var> {$warn} </var>
+                    <fieldset>
+                        <legend>Confirm by</legend>
+                        <label><input type="radio" name="confirm-by" value="email"      /> email         </label>
+                        <label><input type="radio" name="confirm-by" value="sms"        /> text to phone </label>
+                        <label><input type="radio" name="confirm-by" value="password"   /> password      </label>
+                        <if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
+                            <label>Enter password: <input type="password" NAME="password"
+                                   custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
+                            /></label>
+                        </if>
+                        <if test="not(//confirm-by)">
+                            Please select the auth method
+                        </if>
+                    </fieldset>
+                    <section>
+                        <button>Sign In</button>
+                    </section>
+                </form>
+                //username-slice {//username-slice}<br/>
+                //username {//username}<br/>
+                //confirm-by {//confirm-by}<br/>
+                //password {//password}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="3. read system validity message"
+                   description="validationMessage propagated into slice as 'validation-message' attribute ">
+    <ol>
+        <li> type in input field</li>
+        <li> delete input field content</li>
+        <li> observe the warning in string bellow input</li>
+        <li> Click Next observe the system warning in  dropdown and in string bellow input</li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="email-form">
+                    <label> Email
+                        <input slice="username" slice-event="input" placeholder="non-empty" required>
+                    </label>
+                    <if test="//username/@validation-message">
+                        <var>{//username/@validation-message}</var>
+                    </if>
+                    <button>Next</button>
+                    <p>{//email-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<html-demo-element legend="4. form validity message"
+                   description="@validation-message propagated into form slice and  ">
+    <ol>
+        <li> type up to 3 chars in input field          </li>
+        <li> observe the slice value change             </li>
+        <li> click next                                 </li>
+        <li> observe the warning bellow the button      </li>
+    </ol>
+    <template>
+        <custom-element>
+            <template>
+                <form slice="email-form"
+                    custom-validity=" string-length(//slice/username) &gt; 3 ??
+                        concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
+                    >
+                    <label> Email
+                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required />
+                    </label>
+                    <if test="//username/@validation-message">
+                        <var>{//username/@validation-message}</var>
+                    </if>
+                    <button>Next</button>
+                    <p>//email-form/@validation-message:    {//email-form/@validation-message}  </p>
+                    <p>//slice/username:                    {//slice/username}                  </p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+</body>
+</html>

package/src/custom-element/demo/s.xml CHANGED Viewed

@@ -1,14 +1,19 @@
-<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><!-- wrapping into template to prevent images loading within DCE declaration -->
-    <local-storage key="undefined" slice="s" }=""></local-storage>
-    <input placeholder="value for localStorage" slice="s" value="{ //s ?? 'undefined' }" />
-    <button>set</button>
-    <button slice="sv" slice-value="''" slice-event="click">set blank</button>
-    <button slice="sv" slice-value="'/reflect'" slice-event="click">/reflect</button>
-    <button slice="sv" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
-    <button slice="sv" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
-    <br />
-    <var>undefined</var>:<code>{ //slice/s }</code>
-    <br />
-    undefined
-</div>
+<?xml version="1.0" encoding="UTF-8"?>
+<datadom xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+         xmlns:dce="urn:schemas-epa-wg:dce">
+    <payload>
+        <xhtml:span slot=""></xhtml:span>
+        <xhtml:style slot="" title="ABC">dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }</xhtml:style>
+        <xhtml:span slot=""></xhtml:span>
+        <xhtml:u slot="">red</xhtml:u>
+        <xhtml:span slot=""></xhtml:span>
+    </payload>
+    <attributes>
+        <id>dce32</id>
+        <data-dce-style>54f96d52-ce70-435d-83c4-b421357d9a17</data-dce-style>
+    </attributes>
+    <dataset>
+        <dceStyle>54f96d52-ce70-435d-83c4-b421357d9a17</dceStyle>
+    </dataset>
+    <slice/>
+</datadom>

package/src/custom-element/demo/s.xslt CHANGED Viewed

@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
                 xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
                 exclude-result-prefixes="exsl">
@@ -14,56 +15,39 @@
     </xsl:template>
     <xsl:template mode="payload" match="attributes">
         <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <http-request xmlns="" url="{concat(//s , '') }" slice="s" data-dce-id="2"/>
-            <p xmlns="" data-dce-id="3">Pokemon Count:
-                <xsl:value-of select="count(/datadom/slice/s//results)"/>
-            </p>
-            <xsl:if xmlns:xsl="http://www.w3.org/1999/XSL/Transform" test="count(/datadom/slice/s//results) &lt; 0">
-                <h3 xmlns="" data-dce-id="4">loading...</h3>
-            </xsl:if>
-            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="/datadom/slice/s//results">
-                <xsl:variable name="pokeid"
-                              select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"/>
-                <button xmlns="" data-dce-id="5">
-                    <xsl:value-of select="@name">
-                    </xsl:value-of>
-                </button>
-            </xsl:for-each>
-            <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="//slice/s/value/*">
-                <ul xmlns="" data-dce-id="6">
-                    <var data-testid="request-section" data-dce-id="7">
-                        <dce-text data-dce-id="8">
-                            <xsl:value-of select="name(.)"/>
-                        </dce-text>
-                    </var>
-                    <xsl:for-each select="@*">
-                        <div data-dce-id="9">
-                            <var data-dce-id="10">@<xsl:value-of select="local-name(.)"/>
-                            </var>
-                            <dce-text data-dce-id="11">
-                                =
-                            </dce-text>
-                            <code data-testid="attr-{local-name(.)}" data-dce-id="12">
-                                <xsl:value-of select="."/>
-                            </code>
-                        </div>
-                    </xsl:for-each>
-                </ul>
-            </xsl:for-each>
+            <u xmlns="" data-dce-id="2">
+                <dce-text data-dce-id="3">
+                    <xsl:call-template name="slot">
+                        <xsl:with-param name="slotname" select="''"/>
+                        <xsl:with-param name="defaultvalue">
+                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
+                        </xsl:with-param>
+                    </xsl:call-template>
+                </dce-text>
+            </u>
         </dce-root>
     </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
+    <xsl:template match="@*|node()" mode="copy-html">
+      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
+    </xsl:template>
+    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
+      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
+    </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:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
-                <xsl:copy-of select="$defaultvalue"/>
+                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
             </xsl:otherwise>
         </xsl:choose>
     </xsl:template>

package/src/custom-element/demo/s1.xslt ADDED Viewed

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
+                exclude-result-prefixes="exsl">
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">
+                <xsl:value-of select="//attr"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:value-of select="def"/>
+            </xsl:otherwise>
+        </xsl:choose>
+        <xsl:value-of select="."/>
+    </xsl:template>
+    <xsl:template mode="payload" match="attributes">
+        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
+            <u xmlns="" data-dce-id="2">
+                <dce-text data-dce-id="3">
+                    <xsl:call-template name="slot">
+                        <xsl:with-param name="slotname" select="''"/>
+                        <xsl:with-param name="defaultvalue">
+                            <dce-text xmlns="" data-dce-id="4">is green</dce-text>
+                        </xsl:with-param>
+                    </xsl:call-template>
+                </dce-text>
+            </u>
+        </dce-root>
+    </xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+    <xsl:template match="@*|node()" mode="copy-html">
+      <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
+    </xsl:template>
+    <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
+      <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
+    </xsl:template>
+    <xsl:template name="slot">
+        <xsl:param name="slotname"/>
+        <xsl:param name="defaultvalue"/>
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+                <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>

package/src/custom-element/ide/customData-dce.json CHANGED Viewed

@@ -27,6 +27,19 @@
         }
       ]
     },
+    {
+      "name": "custom-validity",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission."
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+        }
+      ]
+    },
     {
       "name": "slice-value",
       "description": {
@@ -109,4 +122,4 @@
       ]
     }
   ]
-}
+}

package/src/custom-element/ide/web-types-dce.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@epa-wg/custom-element",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -17,6 +17,11 @@
           "description": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event",
           "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
         },
+        {
+          "name": "custom-validity",
+          "description": "XPath expression to return either boolean or error string to be shown by browser native UI on form validation event. Unless value is true, prevents the form submission.",
+          "doc-url": "https://unpkg.com/@epa-wg/custom-element/demo/form.html"
+        },
         {
           "name": "slice-value",
           "description": "XPath expression to populate into the slice",

package/src/custom-element/ide/web-types-xsl.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.21",
+    "version": "0.0.22",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/index.html CHANGED Viewed

@@ -35,6 +35,7 @@
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/data-slices.html"       >data slices/events </a> |
+        <a href="./demo/form.html"              >Form validation    </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

package/src/custom-element.test.ts CHANGED Viewed

@@ -1,10 +1,26 @@
-import { expect, test } from 'vitest'
-import { deepEqual}     from './custom-element/custom-element.js'
+import {expect, test}                  from 'vitest'
+import {deepEqual, xml2dom, xmlString, obj2node } from './custom-element/custom-element.js'
-test('deepEqual', () => {
-  expect(deepEqual(1, 1) ).toBe(true);
-  expect(deepEqual({}, null) ).toBe(false);
-  expect(deepEqual({a:1},{a:1,b:2}) ).toBe(false);
-  expect(deepEqual({a:1},{a:2}) ).toBe(false);
-  expect(deepEqual({a:1},{a:1}) ).toBe(true);
+test('deepEqual', () =>
+{
+    expect(deepEqual(1, 1)).toBe(true);
+    expect(deepEqual({}, null)).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1, b: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1})).toBe(true);
+})
+test('xml2dom', () =>
+{
+    const dom = xml2dom('<a/>');
+    expect(dom.documentElement.localName).to.equal('a');
+    expect(dom.documentElement.childNodes.length).to.equal(0);
+    const xStr = xmlString(dom);
+    expect(xStr).to.include('<a');
+})
+test('obj2node', () =>
+{
+    expect(obj2node(()=>{}      , 'f',document).outerHTML).to.equal('<f></f>'       );
+    expect(obj2node(9           , 'a',document).outerHTML).to.equal('<a>9</a>'      );
+    expect(obj2node('abc'       , 's',document).outerHTML).to.equal('<s>abc</s>'    );
+    expect(obj2node({a:1,b:{c:'abc'}}       , 's',document).outerHTML).to.equal('<s a="1"><b c="abc"></b></s>');
 })