@epa-wg/custom-element 0.0.10 → 0.0.12

package/.gitignore

@@ -103,5 +103,9 @@ dist
 # TernJS port file
 .tern-port
 
-/.idea/
-/0/
+.idea/
+0/
+.vs/
+a.*
+?.*
+??.*

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,41 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="slice" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="17">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="html-demo-element" />
+            <item index="7" class="java.lang.String" itemvalue="custom-element" />
+            <item index="8" class="java.lang.String" itemvalue="local-storage" />
+            <item index="9" class="java.lang.String" itemvalue="dce-1" />
+            <item index="10" class="java.lang.String" itemvalue="xhtml:table" />
+            <item index="11" class="java.lang.String" itemvalue="xhtml:tbody" />
+            <item index="12" class="java.lang.String" itemvalue="xhtml:tr" />
+            <item index="13" class="java.lang.String" itemvalue="xhtml:th" />
+            <item index="14" class="java.lang.String" itemvalue="xhtml:td" />
+            <item index="15" class="java.lang.String" itemvalue="xhtml:tfoot" />
+            <item index="16" class="java.lang.String" itemvalue="dce-2" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/.idea/misc.xml

@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
 </project>

package/.vs/VSWorkspaceState.json

@@ -0,0 +1,8 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\demo"
+  ],
+  "SelectedNode": "\\demo",
+  "PreviewInSolutionExplorer": false
+}

package/README.md

@@ -1,6 +1,6 @@
 # custom-element
 `Declarative Custom Element` is a part of pure `Declarative Web Application` stack. A proof of concept as a part of 
-[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) 
+[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301) and [Declarative Web Application](https://github.com/EPA-WG/dwa#readme)
 discussion. The functionality of DCE and its data access does not require programming using JavaScript. 
 
 It allows to define custom HTML tag with template filled from slots, attributes and data `slice` as of now from  
@@ -32,13 +32,13 @@ yarn add @epa-wg/custom-element
 ## [Live demo 🔗][demo-url]
 ```html
 <custom-element tag="pokemon-tile" hidden>
-    <h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
+    <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: <xsl:value-of select='//smile'/></div>
+        <div>Smile as: {//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"
@@ -88,6 +88,10 @@ generates HTML
 NOTE: attempt to register custom element with already registered tag name would fail due to w3c standard limitations. 
 The scoped custom element registry is still a proposal.
 
+### omitting `tag` leads to template instantiation
+Whether template is inline or given by `src` attribute, the `custom-element` would be instantiated inline if no `tag` 
+attribute is given.
+
 ### custom element instance
 constructor creates XML with 
 * root matching the tag 
@@ -98,6 +102,29 @@ constructor creates XML with
 
 DOM content is replaced with results of instance XML transformation by declaration XSLT.
 
+# `src` attribute
+allows to refer either external template or template within external library by `#id` hash in URL.
+
+See [demo](demo/external-template.html) with various samples.
+
+## types of template
+* HTML with DCE syntax ( slots, data slices, xslt operators, etc. )
+* SVG image, MathML, etc.
+* XSLT template. The `datadom` is the XML payload for transformation. In order to be embedded into external document, 
+this document has to have XML syntax like XHTML. Attempt of including XSLT within HTML file would break the template
+integrity by parser.
+
+
+## `#id` Local reference
+allows to refer the template withing same document
+
+## `url`
+allows to use the external document as template
+
+## `url#id`
+allows to refer the template withing external document
+
+
 # template syntax
 ## Attributes
 curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
@@ -138,21 +165,28 @@ template engine.
 
 # troubleshooting
 ## HTML parser is not compatible with templates
-On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order missmatch to given 
-in template. In such cases the `html:` prefix in front of troubled tag would solve the parsing.
+On many tags like `table`, or link `a` the attempt to use XSLT operations could lead to DOM order mismatch to given 
+in template. In such cases the `xhtml:` prefix in front of troubled tag would solve the parsing.
 
 ```html
 <custom-element tag="dce-2" hidden>
-    <local-storage key="basket" slice="basket"></local-storage>
-    <html:table>
-        <xsl:for-each select="//slice/basket/@*">
-            <html:tr>
-                <html:th><xsl:value-of select="name()"/></html:th>
-                <html:td><xsl:value-of select="."/></html:td>
-            </html:tr>
-        </xsl:for-each>
-    </html:table>
-    count:<xsl:value-of select="count(//slice/basket/@*)"/>
+  <local-storage key="basket" slice="basket" live type="json"></local-storage>
+  <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml"  >
+    <xhtml:tbody>
+      <xsl:for-each select="//basket/@*">
+        <xhtml:tr>
+          <xhtml:th> {name()} </xhtml:th>
+          <xhtml:td> {.}      </xhtml:td>
+        </xhtml:tr>
+      </xsl:for-each>
+    </xhtml:tbody>
+    <xhtml:tfoot>
+      <xhtml:tr>
+        <xhtml:td><slot>🤔</slot></xhtml:td>
+        <xhtml:th> {sum(//slice/basket/@*)} </xhtml:th>
+      </xhtml:tr>
+    </xhtml:tfoot>
+  </xhtml:table>
 </custom-element>
 ```
 See [demo source](demo/local-storage.html) for detailed sample.
@@ -179,7 +213,7 @@ run transformation under debugger.
 * try to add as attribute you could observe and put the value of node name or text to identify the current location in data 
 within template
 ```xml
-<b title="{name(*)} : {text()}">xml tag name:<xsl:value-of select='name()'/></b>
+<b title="{name(*)} : {text()}">xml tag name: <xsl:value-of select='name()'/></b>
 ```
 
 [git-url]:        https://github.com/EPA-WG/custom-element
@@ -191,9 +225,9 @@ within template
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.10/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.10/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.10/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.12/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.12/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.12/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg