mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-21 15:39:36 +01:00
🚀 🚧 improvements (handlign special cases) + docs
This commit is contained in:
parent
d0b76727ee
commit
b597c00176
GPG Key ID:
B3A25AED155AFFAB
@ -12,10 +12,12 @@ const { el }= await register(ssr.dom);
|
||||
|
||||
echo("Loading components…");
|
||||
const pkg= s.cat("package.json").xargs(JSON.parse);
|
||||
import { head, body, css } from "../docs_src/index.html.js";
|
||||
document.head.append(head(pkg, path_target));
|
||||
document.body.append(body(pkg));
|
||||
const { head, body, css }= await import("../docs_src/index.html.js"); //→ TODO: important to mention in docs!!!
|
||||
document.head.append(
|
||||
head(pkg, path_target)
|
||||
);
|
||||
document.body.append(
|
||||
el(body, pkg),
|
||||
el("script", { src: "https://cdn.jsdelivr.net/npm/shiki" }),
|
||||
el("script", { src: "index.js", type: "module" })
|
||||
);
|
||||
|
||||
20
dist/dde-with-signals.js
vendored
20
dist/dde-with-signals.js
vendored
File diff suppressed because one or more lines are too long
6
dist/dde.js
vendored
6
dist/dde.js
vendored
File diff suppressed because one or more lines are too long
8
dist/esm-with-signals.js
vendored
8
dist/esm-with-signals.js
vendored
File diff suppressed because one or more lines are too long
2
dist/esm.js
vendored
2
dist/esm.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
:root {
|
||||
color-scheme: dark light;
|
||||
--body-max-width: 40rem;
|
||||
--body-max-width: 45rem;
|
||||
}
|
||||
*, ::before, ::after { box-sizing: border-box; }
|
||||
body > * {
|
||||
@ -17,5 +17,5 @@ h1{
|
||||
}
|
||||
.example{
|
||||
--body-max-width: 80rem;
|
||||
height: 20rem;
|
||||
height: 25rem;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="index.css"><meta name="description" content="Introducing basic concepts."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://gitea.jaandrle.cz/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"><meta name="og:url" content="https://gitea.jaandrle.cz/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"><title>`deka-dom-el` — Introduction/Guide</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><h1>`deka-dom-el` — Introduction/Guide</h1><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.The main goals are:</p><ul><li>provide a small wrapper around the native JavaScript DOM</li><li>keep library size under 10kB</li><li>zero dependencies (if possible)</li><li>prefer a declarative/functional approach</li><li>unopinionated (allow alternative methods)</li></ul><p class="note">It is, in fact, an reimplementation of <a href="https://github.com/jaandrle/dollar_dom_component" title="GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.">jaandrle/dollar_dom_component</a>.</p><div id="code-2f13w" class="example"><pre><code class="language-javascript">import { el, S } from "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"><link rel="stylesheet" href="index.css"><meta name="description" content="Introducing basic concepts."><!--<dde:mark type="component" name="metaTwitter"/>--><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"/>--><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"><title>`deka-dom-el` — Introduction/Guide</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><!--<dde:mark type="component" name="body"/>--><h1>`deka-dom-el` — Introduction/Guide</h1><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.The main goals are:</p><ul><li>provide a small wrapper around the native JavaScript DOM</li><li>keep library size under 10kB</li><li>zero dependencies (if possible)</li><li>prefer a declarative/functional approach</li><li>unopinionated (allow alternative methods)</li></ul><p class="note">It is, in fact, an reimplementation of <a href="https://github.com/jaandrle/dollar_dom_component" title="GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.">jaandrle/dollar_dom_component</a>.</p><!--<dde:mark type="component" name="example"/>--><div id="code-vup3z" class="example"><pre><code class="language-javascript">import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
|
||||
const clicks= S(0);
|
||||
document.body.append(
|
||||
el("<>").append(
|
||||
@ -12,12 +12,4 @@ document.body.append(
|
||||
})
|
||||
)
|
||||
);
|
||||
</code></pre></div><script>
|
||||
Flems(document.getElementById("code-2f13w"), {
|
||||
files: [{
|
||||
name: ".js",
|
||||
content: "import { el, S } from \"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\";\nconst clicks= S(0);\ndocument.body.append(\n\tel(\"<>\").append(\n\t\tel(\"p\", S(()=>\n\t\t\t\"Hello World \"+\"🎉\".repeat(clicks())\n\t\t)),\n\t\tel(\"button\", {\n\t\t\ttype: \"button\",\n\t\t\tonclick: ()=> clicks(clicks()+1),\n\t\t\ttextContent: \"Fire\"\n\t\t})\n\t)\n);\n"
|
||||
}],
|
||||
toolbar: false,
|
||||
})
|
||||
</script><script src="https://cdn.jsdelivr.net/npm/shiki"></script><script src="index.js" type="module"></script></body></html>
|
||||
</code></pre></div><script>Flems(document.getElementById("code-vup3z"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel(\\\"<>\\\").append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><script src="https://cdn.jsdelivr.net/npm/shiki"></script><script src="index.js" type="module"></script></body></html>
|
||||
@ -1,12 +1,12 @@
|
||||
let loaded= false;
|
||||
let is_register= false;
|
||||
import { styles } from "../index.css.js";
|
||||
export const css= styles().scope(example).css`
|
||||
:host{
|
||||
--body-max-width: 80rem;
|
||||
height: 20rem;
|
||||
height: 25rem;
|
||||
}
|
||||
`
|
||||
import { el } from "../../jsdom.js";
|
||||
import { el } from "deka-dom-el";
|
||||
export function example({ src, language= "javascript" }){
|
||||
register();
|
||||
const cwd= "components";
|
||||
@ -32,12 +32,12 @@ function elCode({ id, content }){
|
||||
files: [{ name: ".js", content }],
|
||||
toolbar: false
|
||||
});
|
||||
return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${options}));`);
|
||||
return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);
|
||||
}
|
||||
function register(){
|
||||
if(loaded) return;
|
||||
if(is_register) return;
|
||||
document.head.append(
|
||||
el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
|
||||
);
|
||||
loaded= true;
|
||||
is_register= true;
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ export function styles(){ return Object.assign(Object.create(s), { content: "" }
|
||||
export const common= css`
|
||||
:root {
|
||||
color-scheme: dark light;
|
||||
--body-max-width: 40rem;
|
||||
--body-max-width: 45rem;
|
||||
}
|
||||
*, ::before, ::after { box-sizing: border-box; }
|
||||
body > * {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { el } from "../jsdom.js";
|
||||
import { el } from "deka-dom-el";
|
||||
import { head as headCommon } from "./layout/head.html.js";
|
||||
export function head(pkg, path_target){
|
||||
return headCommon({
|
||||
@ -43,7 +43,7 @@ export function body(pkg){
|
||||
}),
|
||||
".",
|
||||
),
|
||||
example({ src: "./components/examples/helloWorld.js" })
|
||||
el(example, { src: "./components/examples/helloWorld.js" })
|
||||
);
|
||||
}
|
||||
function pageName(pkg){
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { el } from "../../jsdom.js";
|
||||
import { el } from "deka-dom-el";
|
||||
/**
|
||||
* @param {object} def
|
||||
* @param {string} def.id Page `id` is used as stylesheet name.
|
||||
|
||||
37
jsdom.js
37
jsdom.js
@ -11,35 +11,16 @@ prop_process.setDeleteAttr= function(obj, prop, value){
|
||||
const keys= [ "HTMLElement", "SVGElement", "DocumentFragment", "MutationObserver", "document" ];
|
||||
let dom_last;
|
||||
|
||||
export let namespace;
|
||||
export let createElement;
|
||||
export let el;
|
||||
export let assign;
|
||||
export let classListDeclarative;
|
||||
export let empty;
|
||||
export let on;
|
||||
export let dispatchEvent;
|
||||
export function register(dom, keys_aditional= []){
|
||||
if(dom_last!==dom){
|
||||
keys.push(...keys_aditional);
|
||||
const w= dom.window;
|
||||
keys.forEach(key=> globalThis[key]= w[key]);
|
||||
globalThis.window= w;
|
||||
w.console= globalThis.console;
|
||||
}
|
||||
|
||||
export async function register(dom, keys_aditional= []){
|
||||
if(dom_last===dom)
|
||||
return import("./index.js");
|
||||
|
||||
keys.push(...keys_aditional);
|
||||
const w= dom.window;
|
||||
keys.forEach(key=> globalThis[key]= w[key]);
|
||||
globalThis.window= w;
|
||||
w.console= globalThis.console;
|
||||
|
||||
const m= await import("./index.js");
|
||||
namespace= m.namespace;
|
||||
createElement= m.createElement;
|
||||
el= m.el;
|
||||
assign= m.assign;
|
||||
classListDeclarative= m.classListDeclarative;
|
||||
empty= m.empty;
|
||||
on= m.on;
|
||||
dispatchEvent= m.dispatchEvent;
|
||||
return m;
|
||||
return import("./index.js");
|
||||
}
|
||||
export function unregister(){
|
||||
if(!dom_last)
|
||||
|
||||
31
package-lock.json
generated
31
package-lock.json
generated
@ -2524,6 +2524,37 @@
|
||||
"integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/universalify": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
|
||||
"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/url-parse": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
|
||||
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"querystringify": "^2.1.1",
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
|
||||
"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"xml-name-validator": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/web-streams-polyfill": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deka-dom-el",
|
||||
"version": "0.6.0",
|
||||
"version": "0.6.1",
|
||||
"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
|
||||
"author": "Jan Andrle <andrle.jan@centrum.cz>",
|
||||
"license": "MIT",
|
||||
|
||||
12
src/dom.js
12
src/dom.js
@ -43,16 +43,19 @@ export function createElement(tag, attributes, ...connect){
|
||||
const s= signals(this);
|
||||
const { namespace }= scope;
|
||||
let scoped= 0;
|
||||
let el;
|
||||
let el, el_host;
|
||||
//TODO Array.isArray(tag) ⇒ set key (cache els)
|
||||
if(Object(attributes)!==attributes || s.isSignal(attributes))
|
||||
attributes= { textContent: attributes };
|
||||
switch(true){
|
||||
case typeof tag==="function": {
|
||||
scoped= 1;
|
||||
scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el), undefined) : el });
|
||||
scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el_host), undefined) : el_host });
|
||||
el= tag(attributes || undefined);
|
||||
(el instanceof HTMLElement ? setRemove : setRemoveNS)(el, "Attribute", "dde-fun", tag.name);
|
||||
const el_mark= document.createComment(`<dde:mark type="component" name="${tag.name}"/>`);
|
||||
el.prepend(el_mark);
|
||||
if(el instanceof DocumentFragment)
|
||||
el_host= el_mark;
|
||||
break;
|
||||
}
|
||||
case tag==="#text": el= assign.call(this, document.createTextNode(""), attributes); break;
|
||||
@ -60,7 +63,8 @@ export function createElement(tag, attributes, ...connect){
|
||||
case namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break;
|
||||
case !el: el= assign.call(this, document.createElement(tag), attributes);
|
||||
}
|
||||
connect.forEach(c=> c(el));
|
||||
if(!el_host) el_host= el;
|
||||
connect.forEach(c=> c(el_host));
|
||||
if(scoped) scope.pop();
|
||||
scoped= 2;
|
||||
return el;
|
||||
|
||||
@ -118,8 +118,8 @@ S.clear= function(...signals){
|
||||
};
|
||||
const key_reactive= "__dde_reactive";
|
||||
S.el= function(signal, map){
|
||||
const mark_start= document.createComment(`<dde:reactive>`);
|
||||
const mark_end= document.createComment("</dde:reactive>");
|
||||
const mark_start= document.createComment(`<dde:mark type="reactive">`);
|
||||
const mark_end= document.createComment("</dde:mark>");
|
||||
const out= document.createDocumentFragment();
|
||||
out.append(mark_start, mark_end);
|
||||
const { current }= scope;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user