@epa-wg/custom-element 0.0.17 → 0.0.19

package/http-request.js

@@ -18,7 +18,8 @@ export class HttpRequestElement extends HTMLElement
     }
     get requestProps()
     {   const ret = {};
-        [...this.attributes].filter(a=>!a.name.startsWith('header-')).map( a => ret[a.name] = a.value );
+        [...this.attributes].filter(a=>!a.name.startsWith('header-'))
+                            .filter(a=>!a.name.startsWith('slice')).map( a => ret[a.name] = a.value );
         return ret
     }
 

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,112 @@
+{
+  "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-event` 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-event",
+      "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"
+        }
+      ]
+    },
+    {
+      "name": "slice-value",
+      "description": {
+        "kind": "markdown",
+        "value": "XPath expression to populate into the slice"
+      },
+      "references": [
+        {
+          "name": "Demo",
+          "url": "https://unpkg.com/@epa-wg/custom-element/demo/data-slices.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"
+        }
+      ]
+    },
+    {
+      "name": "slice",
+      "description": "Synthetic element for defining the slice-attributed when more then one slice/event/value associated with parent element",
+      "references": [
+        {
+          "name": "README",
+          "url": "https://github.com/EPA-WG/custom-element/tree/develop?tab=readme-ov-file#interactivity-via-data-slice-triggered-by-events"
+        }
+      ]
+    }
+  ]
+}