@epa-wg/custom-element 0.0.16 → 0.0.18

package/demo/location-element.html

@@ -52,18 +52,18 @@
 
                 <xhtml:table>
                         <tr><th><h3> URL properties </h3></th></tr>
-                        <xsl:apply-templates mode="attrs"  select="//slice/window-url/@*"></xsl:apply-templates>
+                        <apply-templates mode="attrs"  select="//slice/window-url/@*"></apply-templates>
                 </xhtml:table>
                 <xhtml:table>
                         <tr><th><h3> URL parameters </h3></th></tr>
-                        <xsl:apply-templates mode="attrs"  select="//slice/window-url/params/*"></xsl:apply-templates>
+                        <apply-templates mode="attrs"  select="//slice/window-url/params/*"></apply-templates>
                 </xhtml:table>
-                <xsl:template mode="attrs" match="*|@*">
+                <template mode="attrs" match="*|@*">
                     <xhtml:tr>
                         <xhtml:th>{name()}</xhtml:th>
                         <xhtml:td>{.}</xhtml:td>
                     </xhtml:tr>
-                </xsl:template>
+                </template>
             </template>
         </custom-element>
         <dce-2>?</dce-2>
@@ -84,21 +84,21 @@
                 <xhtml:table>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
-                        <xsl:for-each select="//slice/window-url/@*">
+                        <for-each select="//slice/window-url/@*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
                             </xhtml:tr>
-                        </xsl:for-each>
+                        </for-each>
                     </xhtml:tbody>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
-                        <xsl:for-each select="//slice/window-url/params/*">
+                        <for-each select="//slice/window-url/params/*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
                             </xhtml:tr>
-                        </xsl:for-each>
+                        </for-each>
                     </xhtml:tbody>
                 </xhtml:table>
             </template>
@@ -121,21 +121,21 @@
                 <xhtml:table>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
-                        <xsl:for-each select="//slice/src-url/@*">
+                        <for-each select="//slice/src-url/@*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
                             </xhtml:tr>
-                        </xsl:for-each>
+                        </for-each>
                     </xhtml:tbody>
                     <xhtml:tbody>
                         <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
-                        <xsl:for-each select="//slice/src-url/params/*">
+                        <for-each select="//slice/src-url/params/*">
                             <xhtml:tr>
                                 <xhtml:th>{name()}</xhtml:th>
                                 <xhtml:td>{.}</xhtml:td>
                             </xhtml:tr>
-                        </xsl:for-each>
+                        </for-each>
                     </xhtml:tbody>
                 </xhtml:table>
             </template>

package/demo/parameters.html

@@ -27,12 +27,12 @@ params needed to declare DCE attributes and track the attributes changes. It als
 ">
     <template>
         <custom-element tag="dce-link" hidden>
-            <xsl:param name="p1" >default_P1</xsl:param>
-            <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
-            <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+            <attribute name="p1" >default_P1                </attribute>
+            <attribute name="p2" select="'always_p2'"       ></attribute>
+            <attribute name="p3" select="//p3 ?? 'def_P3' " ></attribute>
             p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
         </custom-element>
-        <dce-link id="dce1"></dce-link>
+        <dce-link id="dce1" ></dce-link>
         <section>
             <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
             <div><input id="i1" value="p1" />  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>

package/demo/s.xslt

@@ -1,4 +1,3 @@
-<?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>
@@ -10,11 +9,10 @@
         <xsl:when test="//p1 "><xsl:value-of select="//p1 "/></xsl:when>
         <xsl:otherwise><xsl:value-of select=" 'def_p1' "/></xsl:otherwise>
     </xsl:choose></xsl:param><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:param xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"><xsl:choose>
-        <xsl:when test="p3"><xsl:value-of select="p3"/></xsl:when>
-        <xsl:otherwise><xsl:value-of select="default_P3"/></xsl:otherwise>
-    </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><dce-text xmlns="" data-dce-id="2">
-        p1:<xsl:value-of select="$p1"/> </dce-text><br xmlns="" data-dce-id="3"/><dce-text xmlns="" data-dce-id="4"> p2: <xsl:value-of select="$p2"/> </dce-text><br xmlns="" data-dce-id="5"/><dce-text xmlns="" data-dce-id="6"> p3: <xsl:value-of select="$p3"/>
-    </dce-text></dce-root></xsl:template>
+        <xsl:when test="//p3"><xsl:value-of select="//p3"/></xsl:when>
+        <xsl:otherwise><xsl:value-of select="'default_P3                &#10;                p1:{$p1"/>  p2:<xsl:value-of select="$p2"/>  p3:<xsl:value-of select="$p3"/>
+            '}</xsl:otherwise>
+    </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p1" select="//p1 ?? 'def_p1' "/><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p2" select="'always_p2'"/><xsl:attribute xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="p3"/></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>

package/demo/z.html

@@ -39,12 +39,10 @@
 </head>
 <body>
 
-<custom-element src="html-template.xhtml#embedded-xsl">
-    <template>whole XSLT is  embedded into HTML body</template>
+<custom-element src="embed-1.html">
+    loading from embed-1.html ...
 </custom-element>
-<!--<custom-element src="html-template.html#none">-->
-<!--    <template><i>element with id=none is missing in template</i></template>-->
-<!--</custom-element>-->
+
 
 </body>
 </html>

package/ide/IDE.md

@@ -0,0 +1,31 @@
+# Ide setup for DCE
+<details>
+<summary> VS Code </summary>
+Copy into `.vscode/settings.json`
+
+    {
+      "html.customData": [
+        "./node_modules/@epa-wg/custom-element/ide/customData-dce.json",
+        "./node_modules/@epa-wg/custom-element/ide/customData-xsl.json",
+        "./customData.json"
+      ],
+    }
+After editing the DCE in the HTML sources, update `./customData.json` with project' custom tags and attributes.
+</details>
+
+<details>
+<summary> IntelliJ </summary>
+Append into `package.json`
+
+    {
+        "web-types":[   "./node_modules/@epa-wg/custom-element/ide/web-types-dce.json",
+                        "./node_modules/@epa-wg/custom-element/ide/web-types-xsl.json",
+                        "./web_types.json"
+                    ],
+    }
+After editing the DCE in the HTML, update `./web-types.json` with project' custom tags and attributes.
+</details>
+
+# Publishing your components
+When preparing your package for publishing, make sure the instructions on IDE support with your package and DCE package 
+tags covered in IntelliJ and VS Code format.

package/ide/customData-dce.json

@@ -0,0 +1,89 @@
+{
+  "version": 1.1,
+  "globalAttributes": [
+    {
+      "name": "slice",
+      "description": {
+        "kind": "markdown",
+        "value": "Defines the name of data slice in DCE where the data from `value` will be propagated on `change` or by `slice-update` event\n\nOn: any component with `value` and associated change event"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+        }
+      ]
+    },
+    {
+      "name": "slice-update",
+      "description": {
+        "kind": "markdown",
+        "value": "Defines the event name on which `value` would be synchronized with DCE slice\n\nOn: any component with `value` and associated change event"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/dom-merge.html"
+        }
+      ]
+    }
+  ],
+  "tags": [
+    {
+      "name": "custom-element",
+      "description": "Declarative Cuestom ELement(DCE).  `<custom-element tag='my-element'></custom-element>`.",
+      "attributes": [
+        {
+          "name": "hidden",
+          "description": "hides DCE definition to prevent visual appearance of content. Wrap the payload into template tag to prevent applying the inline CSS in global scope.",
+          "type": "boolean"
+        },
+        {
+          "name": "tag",
+          "description": "HTML tag for Custom Element. Used for window.customElements.define(). If not set, would be generated and DCE instance rendered inline.",
+          "type": "string"
+        },
+        {
+          "name": "src",
+          "description": "full, relative, or hash URL to DCE template",
+          "type": "string",
+          "references": [
+            {
+              "name": "example",
+              "url": "https://unpkg.com/@epa-wg/custom-element/demo/external-template.html"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "custom-element",
+          "url": "https://github.com/EPA-WG/custom-element"
+        }
+      ]
+    },
+    {
+      "name": "for-each",
+      "description": "The <xsl:for-each> element selects a set of nodes and processes each of them in the same way. It is often used to iterate through a set of nodes or to change the current node. If one or more <xsl:sort> elements appear as the children of this element, sorting occurs before processing. Otherwise, nodes are processed in document order.",
+      "attributes": [
+        {
+          "name": "select",
+          "description": "Uses an XPath expression to select nodes to be processed.",
+          "type": "string",
+          "references": [
+            {
+              "name": "MDN docs",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each#select"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "for-each",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each"
+        }
+      ]
+    }
+  ]
+}