jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-25 01:39:37 +01:00
Code Packages Releases Activity

🐛 docs (now includes dde directly)

Browse Source
This commit is contained in:
Jan Andrle 2024-05-17 22:13:16 +02:00
parent f1983dcd38
commit 82e4ca687c
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
11 changed files with 2360 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

488
dist/dde.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

469
dist/esm.js vendored
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

File diff suppressed because one or more lines are too long

16
docs/p02-elements.html
View File

File diff suppressed because one or more lines are too long

12
docs/p03-events.html
View File

File diff suppressed because one or more lines are too long

20
docs/p04-observables.html
View File

File diff suppressed because one or more lines are too long

16
docs/p05-scopes.html
View File

File diff suppressed because one or more lines are too long

2
docs/p06-customElement.html
View File

@ -31,4 +31,4 @@ import { lifecyclesToEvents } from "deka-dom-el";
set customAttribute(value){ this.setAttribute("custom-attribute", value); } set customAttribute(value){ this.setAttribute("custom-attribute", value); }
} }
customElements.define(CustomHTMLElement.tagName, CustomHTMLElement); customElements.define(CustomHTMLElement.tagName, CustomHTMLElement);
</code></div><p><a href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4" title="Ideas and tips from WebReflection">Handy Custom Elements' Patterns</a></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 `lifecycleToEvents`, 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>O.observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase and values are observables)</li><li><code>lifecycleToEvents(&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><a href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4" title="Ideas and tips from WebReflection">Handy Custom Elements' Patterns</a></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>O.observedAttributes(&lt;custom-element&gt;)</code> — returns record of observed attributes (keys uses camelCase and values are observables)</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>

9
docs_src/components/example.html.js
View File

@ -12,7 +12,10 @@ ${host}{
background: #212121 !important; background: #212121 !important;
border: 1px solid white; border: 1px solid white;
} }
` `;
const dde_content= s.cat(new URL("../../dist/esm-with-observables.js", import.meta.url)).toString();
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
import { code } from "./code.html.js"; import { code } from "./code.html.js";
import { relative } from "node:path"; import { relative } from "node:path";
@ -26,7 +29,7 @@ import { relative } from "node:path";
export function example({ src, language= "js", page_id }){ export function example({ src, language= "js", page_id }){
registerClientPart(page_id); registerClientPart(page_id);
const content= s.cat(src).toString() const content= s.cat(src).toString()
.replaceAll(/ from "deka-dom-el(\/observables)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";'); .replaceAll(/ from "deka-dom-el(\/observables)?";/g, ' from "./esm-with-observables.js";');
const id= "code-example-"+generateCodeId(src); const id= "code-example-"+generateCodeId(src);
return el().append( return el().append(
el(code, { id, content, language, className: example.name }), el(code, { id, content, language, className: example.name }),
@ -35,7 +38,7 @@ export function example({ src, language= "js", page_id }){
} }
function elCode({ id, content, extension: name }){ function elCode({ id, content, extension: name }){
const options= JSON.stringify({ const options= JSON.stringify({
files: [{ name, content }], files: [{ name, content }, { name: "esm-with-observables.js", content: dde_content }],
toolbar: false toolbar: false
}); });
return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`); return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);