🔤 Web Components (WIP)

This commit is contained in:
jaandrle committed 2024-06-05 16:20:12 +02:00
1 parent 5299a0329c
commit 528a865d79
5 files changed
+119 -9

No files matched your search

+55 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using custom elements in combinantion with DDE"><title>`deka-dom-el` — Web Components</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Web Components</h1><p>Using custom elements in combinantion with DDE</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE" class="current">6. Web Components</a></nav><main><h2>Using web components in combinantion with DDE</h2><p>The DDE library allows for use within <a title="MDN documentation page for Web Components" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"><strong>Web Components</strong></a> for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered <a title="MDN documentation page for observedAttributes" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"><code>observedAttributes</code></a>) and additional functionality is (unfortunately) required to use helpers provided by the library.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using custom elements in combinantion with DDE"><title>`deka-dom-el` — Web Components</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Web Components</h1><p>Using custom elements in combinantion with DDE</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE" class="current">6. Web Components</a></nav><main><h2>Using web components in combinantion with DDE</h2><p>The DDE library allows for use within <a title="MDN documentation page for Web Components" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components"><strong>Web Components</strong></a> for dom-tree generation. However, in order to be able to use signals (possibly mapping to registered <a title="MDN documentation page for observedAttributes" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"><code>observedAttributes</code></a>) and additional functionality is (unfortunately) required to use helpers provided by the library.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
import { import {
customElementRender, customElementRender,
customElementWithDDE, customElementWithDDE,
@@ -10,8 +10,8 @@ S.observedAttributes;
// “internal” utils // “internal” utils
import { lifecyclesToEvents } from "deka-dom-el"; import { lifecyclesToEvents } from "deka-dom-el";
</code></div><h3 id="h-custom-elements-introduction"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-custom-elements-introduction" tabindex="-1">#</a> Custom Elements Introduction</h3><p>To start with, let’s see how to use native Custom Elements. As starting point please read <a title="MDN documentation page for Custom Elements" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements"><strong>Using Custom Elements</strong> on MDN</a>. To sum up and for mnemonic see following code overview:</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">export class CustomHTMLElement extends HTMLElement{ </code></div><h3 id="h-custom-elements-introduction"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-custom-elements-introduction" tabindex="-1">#</a> Custom Elements Introduction</h3><p>To start with, let’s see how to use native Custom Elements. As starting point please read <a title="MDN documentation page for Custom Elements" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements"><strong>Using Custom Elements</strong> on MDN</a>. To sum up and for mnemonic see following code overview:</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)` static tagName= "custom-element"; // just suggestion, we can use `el(HTMLCustomElement.tagName)`
static observedAttributes= [ "custom-attribute" ]; static observedAttributes= [ "custom-attribute" ];
constructor(){ constructor(){
super(); super();
@@ -30,5 +30,55 @@ import { lifecyclesToEvents } from "deka-dom-el";
get customAttribute(){ return this.getAttribute("custom-attribute"); } get customAttribute(){ return this.getAttribute("custom-attribute"); }
set customAttribute(value){ this.setAttribute("custom-attribute", value); } set customAttribute(value){ this.setAttribute("custom-attribute", value); }
} }
customElements.define(CustomHTMLElement.tagName, CustomHTMLElement); customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
</code></div><p>For more advanced use of Custom Elements, the summary <a title="Ideas and tips from WebReflection" href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4"><strong>Handy Custom Elements' Patterns</strong></a> may be useful. Especially pay attention to linking HTML attributes and defining setters/getters, this is very helpful to use in combination with the library (<code>el(CustomHTMLElement.tagName, { customAttribute: "new-value" });</code>).</p><div class="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>customElementRender(&lt;custom-element&gt;, &lt;render-function&gt;[, &lt;properties&gt;])</code> — use function to render DOM structure for given &lt;custom-element&gt;</li><li><code>customElementWithDDE(&lt;custom-element&gt;)</code> — register &lt;custom-element&gt; to DDE library, see also `lifecyclesToEvents`, can be also used as decorator</li><li><code>observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase)</li><li><code>S.observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase and values are signals)</li><li><code>lifecyclesToEvents(&lt;class-declaration&gt;)</code> — convert lifecycle methods to events, can be also used as decorator</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p05-scopes" title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Scopes and components (previous)</a><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--></div></main></body></html> </code></div><p>For more advanced use of Custom Elements, the summary <a title="Ideas and tips from WebReflection" href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4"><strong>Handy Custom Elements' Patterns</strong></a> may be useful. Especially pay attention to linking HTML attributes and defining setters/getters, this is very helpful to use in combination with the library (<code>el(HTMLCustomElement.tagName, { customAttribute: "new-value" });</code>).</p><p>Also see the Life Cycle Events sections, very similarly we would like to use <a href="./p03-events.html" title="See events part of the library documentation">DDE events</a>. To do it, the library provides function <code>customElementWithDDE</code>…</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-n7xtdicpa" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { customElementWithDDE, el, on } from "./esm-with-signals.js";
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element";
connectedCallback(){
this.append(
el("p", "Hello from custom element!")
);
}
}
customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
const instance= el(HTMLCustomElement.tagName);
on.connected(e=&gt; console.log("Element connected to the DOM:", e))(instance);
document.body.append(
instance,
);
</code></div><script>Flems(document.getElementById("code-example-1-n7xtdicpa"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { customElementWithDDE, el, on } from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tconnectedCallback(){\\n\\t\\tthis.append(\\n\\t\\t\\tel(\\\"p\\\", \\\"Hello from custom element!\\\")\\n\\t\\t);\\n\\t}\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\nconst instance= el(HTMLCustomElement.tagName);\\non.connected(e=> console.log(\\\"Element connected to the DOM:\\\", e))(instance);\\ndocument.body.append(\\n\\tinstance,\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragmentLine truncated
customElementRender,
customElementWithDDE,
} from "./esm-with-signals.js";
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element";
static observedAttributes= [ "attr" ];
connectedCallback(){
customElementRender(
this,
this.attachShadow({ mode: "open" }),
ddeComponent
);
}
set attr(value){ this.setAttribute("attr", value); }
get attr(){ return this.getAttribute("attr"); }
}
import { el, on, scope } from "./esm-with-signals.js";
function ddeComponent({ attr }){
scope.host(
on.connected(e=&gt; console.log(this.outerHTML)),
);
return el().append(
el("p", `Hello from Custom Element with attribute '${attr}'`)
)
}
customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
document.body.append(
el(HTMLCustomElement.tagName, { attr: "Attribute" })
);
</code></div><script>Flems(document.getElementById("code-example-1-vivfgyxx9kw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import {\\n\\tcustomElementRender,\\n\\tcustomElementWithDDE,\\n} from \\\"./esm-with-signals.js\\\";\\nexport class HTMLCustomElement extends HTMLElement{\\n\\tstatic tagName= \\\"custom-element\\\";\\n\\tstatic observedAttributes= [ \\\"attr\\\" ];\\n\\tconnectedCallback(){\\n\\t\\tcustomElementRender(\\n\\t\\t\\tthis,\\n\\t\\t\\tthis.attachShadow({ mode: \\\"open\\\" }),\\n\\t\\t\\tddeComponent\\n\\t\\t);\\n\\t}\\n\\tset attr(value){ this.setAttribute(\\\"attr\\\", value); }\\n\\tget attr(){ return this.getAttribute(\\\"attr\\\"); }\\n}\\n\\nimport { el, on, scope } from \\\"./esm-with-signals.js\\\";\\nfunction ddeComponent({ attr }){\\n\\tscope.host(\\n\\t\\ton.connected(e=> console.log(this.outerHTML)),\\n\\t);\\n\\treturn el().append(\\n\\t\\tel(\\\"p\\\", `Hello from Custom Element with attribute '${attr}'`)\\n\\t)\\n}\\ncustomElementWithDDE(HTMLCustomElement);\\ncustomElements.define(HTMLCustomElement.tagName, HTMLCustomElement);\\n\\ndocument.body.append(\\n\\tel(HTMLCustomElement.tagName, { attr: \\\"Attribute\\\" })\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\Line truncated
@@ -0,0 +1,17 @@
import { customElementWithDDE, el, on } from "deka-dom-el";
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element";
connectedCallback(){
this.append(
el("p", "Hello from custom element!")
);
}
}
customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
const instance= el(HTMLCustomElement.tagName);
on.connected(e=> console.log("Element connected to the DOM:", e))(instance);
document.body.append(
instance,
);
@@ -0,0 +1,33 @@
import {
customElementRender,
customElementWithDDE,
} from "deka-dom-el";
export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element";
static observedAttributes= [ "attr" ];
connectedCallback(){
customElementRender(
this,
this.attachShadow({ mode: "open" }),
ddeComponent
);
}
set attr(value){ this.setAttribute("attr", value); }
get attr(){ return this.getAttribute("attr"); }
}
import { el, on, scope } from "deka-dom-el";
function ddeComponent({ attr }){
scope.host(
on.connected(e=> console.log(e.target.outerHTML)),
);
return el().append(
el("p", `Hello from Custom Element with attribute '${attr}'`)
)
}
customElementWithDDE(HTMLCustomElement);
customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
document.body.append(
el(HTMLCustomElement.tagName, { attr: "Attribute" })
);
@@ -1,5 +1,5 @@
export class CustomHTMLElement extends HTMLElement{ export class HTMLCustomElement extends HTMLElement{
static tagName= "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)` static tagName= "custom-element"; // just suggestion, we can use `el(HTMLCustomElement.tagName)`
static observedAttributes= [ "custom-attribute" ]; static observedAttributes= [ "custom-attribute" ];
constructor(){ constructor(){
super(); super();
@@ -18,4 +18,4 @@ export class CustomHTMLElement extends HTMLElement{
get customAttribute(){ return this.getAttribute("custom-attribute"); } get customAttribute(){ return this.getAttribute("custom-attribute"); }
set customAttribute(value){ this.setAttribute("custom-attribute", value); } set customAttribute(value){ this.setAttribute("custom-attribute", value); }
} }
customElements.define(CustomHTMLElement.tagName, CustomHTMLElement); customElements.define(HTMLCustomElement.tagName, HTMLCustomElement);
+11 -1
View File
@@ -58,8 +58,18 @@ export function page({ pkg, info }){
For more advanced use of Custom Elements, the summary ${el("a", references.custom_elements_tips) For more advanced use of Custom Elements, the summary ${el("a", references.custom_elements_tips)
.append( el("strong", t`Handy Custom Elements' Patterns`) )} may be useful. Especially pay attention to .append( el("strong", t`Handy Custom Elements' Patterns`) )} may be useful. Especially pay attention to
linking HTML attributes and defining setters/getters, this is very helpful to use in combination with linking HTML attributes and defining setters/getters, this is very helpful to use in combination with
the library (${el("code", "el(CustomHTMLElement.tagName, { customAttribute: \"new-value\" });")}). the library (${el("code", "el(HTMLCustomElement.tagName, { customAttribute: \"new-value\" });")}).
`), `),
el("p").append(...T`
Also see the Life Cycle Events sections, very similarly we would like to use
${el("a", { textContent: t`DDE events`, href: "./p03-events.html", title: t`See events part of the library documentation` })}.
To do it, the library provides function ${el("code", "customElementWithDDE")}…
`),
el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
el("h3", t`Custom Elements with DDE`),
el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
el(mnemonic) el(mnemonic)
); );