jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-11-03 22:59:16 +01:00
Code Packages Releases Activity

fixes #9

Browse Source
This commit is contained in:
Jan Andrle
2024-02-03 14:36:17 +01:00
parent b740b8e020
commit 971b595927
12 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/dde-with-observables.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/dde.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/esm-with-observables.d.ts vendored
View File

@@ -245,7 +245,7 @@ export function customElementRender<
props?: P | ((...args: any[])=> P) props?: P | ((...args: any[])=> P)
): EL ): EL
export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/* TypeScript MEH */ /* TypeScript MEH */

4
dist/esm-with-observables.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/esm.d.ts vendored
View File

@@ -245,7 +245,7 @@ export function customElementRender<
props?: P | ((...args: any[])=> P) props?: P | ((...args: any[])=> P)
): EL ): EL
export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/* TypeScript MEH */ /* TypeScript MEH */

2
dist/esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/p06-customElement.html
View File

@@ -9,7 +9,7 @@ import { O } from "deka-dom-el/observables";
O.observedAttributes; O.observedAttributes;
// “internal” utils // “internal” utils
import { lifecycleToEvents } 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><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" title="Article about custom elements on MDN">Using custom elements</a></p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">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><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" title="Article about custom elements on MDN">Using custom elements</a></p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">class CustomHTMLElement extends HTMLElement{
static tagName = "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)` static tagName = "custom-element"; // just suggestion, we can use `el(CustomHTMLElement.tagName)`
static observedAttributes= [ "custom-attribute" ]; static observedAttributes= [ "custom-attribute" ];

2
docs_src/components/examples/customElement/intro.js
View File

@@ -9,4 +9,4 @@ import { O } from "deka-dom-el/observables";
O.observedAttributes; O.observedAttributes;
// “internal” utils // “internal” utils
import { lifecycleToEvents } from "deka-dom-el"; import { lifecyclesToEvents } from "deka-dom-el";

4
docs_src/components/mnemonic/customElement-init.js
View File

@@ -7,7 +7,7 @@ export function mnemonic(){
el("code", "customElementRender(<custom-element>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>", el("code", "customElementRender(<custom-element>, <render-function>[, <properties>])"), " — use function to render DOM structure for given <custom-element>",
), ),
el("li").append( el("li").append(
el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecycleToEvents`, can be also used as decorator", el("code", "customElementWithDDE(<custom-element>)"), " — register <custom-element> to DDE library, see also `lifecyclesToEvents`, can be also used as decorator",
), ),
el("li").append( el("li").append(
el("code", "observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase)", el("code", "observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase)",
@@ -16,7 +16,7 @@ export function mnemonic(){
el("code", "O.observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase and values are observables)", el("code", "O.observedAttributes(<custom-element>)"), " — returns record of observed attributes (keys uses camelCase and values are observables)",
), ),
el("li").append( el("li").append(
el("code", "lifecycleToEvents(<class-declaration>)"), " — convert lifecycle methods to events, can be also used as decorator", el("code", "lifecyclesToEvents(<class-declaration>)"), " — convert lifecycle methods to events, can be also used as decorator",
) )
); );
} }

2
index.d.ts vendored
View File

@@ -180,7 +180,7 @@ export function customElementRender<
props?: P | ((...args: any[])=> P) props?: P | ((...args: any[])=> P)
): EL ): EL
export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL export function lifecyclesToEvents<EL extends HTMLElement>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/* TypeScript MEH */ /* TypeScript MEH */

6
src/customElement.js
View File

@@ -8,7 +8,7 @@ export function customElementRender(custom_element, target, render, props= obser
}); });
if(typeof props==="function") props= props.call(custom_element, custom_element); if(typeof props==="function") props= props.call(custom_element, custom_element);
const is_lte= custom_element[keyLTE]; const is_lte= custom_element[keyLTE];
if(!is_lte) lifecycleToEvents(custom_element); if(!is_lte) lifecyclesToEvents(custom_element);
const out= render.call(custom_element, props); const out= render.call(custom_element, props);
if(!is_lte) custom_element.dispatchEvent(new Event(evc)); if(!is_lte) custom_element.dispatchEvent(new Event(evc));
if(target.nodeType===11 && typeof target.mode==="string") // is ShadowRoot if(target.nodeType===11 && typeof target.mode==="string") // is ShadowRoot
@@ -16,7 +16,7 @@ export function customElementRender(custom_element, target, render, props= obser
scope.pop(); scope.pop();
return target.append(out); return target.append(out);
} }
export function lifecycleToEvents(class_declaration){ export function lifecyclesToEvents(class_declaration){
wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){ wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){
target.apply(thisArg, detail); target.apply(thisArg, detail);
thisArg.dispatchEvent(new Event(evc)); thisArg.dispatchEvent(new Event(evc));
@@ -37,7 +37,7 @@ export function lifecycleToEvents(class_declaration){
class_declaration.prototype[keyLTE]= true; class_declaration.prototype[keyLTE]= true;
return class_declaration; return class_declaration;
} }
export { lifecycleToEvents as customElementWithDDE }; export { lifecyclesToEvents as customElementWithDDE };
function wrapMethod(obj, method, apply){ function wrapMethod(obj, method, apply){
obj[method]= new Proxy(obj[method] || (()=> {}), { apply }); obj[method]= new Proxy(obj[method] || (()=> {}), { apply });
} }

2
src/dom-common.js
View File

@@ -26,7 +26,7 @@ function setDeleteAttr(obj, prop, val){
if(Reflect.get(obj, prop)==="undefined") if(Reflect.get(obj, prop)==="undefined")
return Reflect.set(obj, prop, ""); return Reflect.set(obj, prop, "");
} }
export const keyLTE= "__dde_lifecycleToEvents"; //boolean export const keyLTE= "__dde_lifecyclesToEvents"; //boolean
export const evc= "dde:connected"; export const evc= "dde:connected";
export const evd= "dde:disconnected"; export const evd= "dde:disconnected";
export const eva= "dde:attributeChanged"; export const eva= "dde:attributeChanged";