jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-22 07:49:38 +01:00
Code Packages Releases Activity

🚀 🚧 improvements (handlign special cases) + docs

Browse Source
This commit is contained in:
Jan Andrle 2023-11-05 21:49:32 +01:00
parent d0b76727ee
commit b597c00176
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
16 changed files with 88 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bs/docs.js
View File

@ -12,10 +12,12 @@ const { el }= await register(ssr.dom);
echo("Loading components…"); echo("Loading components…");
const pkg= s.cat("package.json").xargs(JSON.parse); const pkg= s.cat("package.json").xargs(JSON.parse);
import { head, body, css } from "../docs_src/index.html.js"; 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.head.append(
document.body.append(body(pkg)); head(pkg, path_target)
);
document.body.append( document.body.append(
el(body, pkg),
el("script", { src: "https://cdn.jsdelivr.net/npm/shiki" }), el("script", { src: "https://cdn.jsdelivr.net/npm/shiki" }),
el("script", { src: "index.js", type: "module" }) el("script", { src: "index.js", type: "module" })
); );

20
dist/dde-with-signals.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/dde.js vendored
View File

File diff suppressed because one or more lines are too long

8
dist/esm-with-signals.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/esm.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/index.css
View File

@ -1,6 +1,6 @@
:root { :root {
color-scheme: dark light; color-scheme: dark light;
--body-max-width: 40rem; --body-max-width: 45rem;
} }
*, ::before, ::after { box-sizing: border-box; } *, ::before, ::after { box-sizing: border-box; }
body > * { body > * {
@ -17,5 +17,5 @@ h1{
} }
.example{ .example{
--body-max-width: 80rem; --body-max-width: 80rem;
height: 20rem; height: 25rem;
} }

12
docs/index.html
View File

@ -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&nbsp;small wrapper around the native JavaScript DOM</li><li>keep library size under 10kB</li><li>zero dependencies (if possible)</li><li>prefer a&nbsp;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&nbsp;small wrapper around the native JavaScript DOM</li><li>keep library size under 10kB</li><li>zero dependencies (if possible)</li><li>prefer a&nbsp;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); const clicks= S(0);
document.body.append( document.body.append(
el("&lt;&gt;").append( el("&lt;&gt;").append(
@ -12,12 +12,4 @@ document.body.append(
}) })
) )
); );
</code></pre></div><script> </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>
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>

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

@ -1,12 +1,12 @@
let loaded= false; let is_register= false;
import { styles } from "../index.css.js"; import { styles } from "../index.css.js";
export const css= styles().scope(example).css` export const css= styles().scope(example).css`
:host{ :host{
--body-max-width: 80rem; --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" }){ export function example({ src, language= "javascript" }){
register(); register();
const cwd= "components"; const cwd= "components";
@ -32,12 +32,12 @@ function elCode({ id, content }){
files: [{ name: ".js", content }], files: [{ name: ".js", content }],
toolbar: false 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(){ function register(){
if(loaded) return; if(is_register) return;
document.head.append( document.head.append(
el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }) el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
); );
loaded= true; is_register= true;
} }

2
docs_src/index.css.js
View File

@ -30,7 +30,7 @@ export function styles(){ return Object.assign(Object.create(s), { content: "" }
export const common= css` export const common= css`
:root { :root {
color-scheme: dark light; color-scheme: dark light;
--body-max-width: 40rem; --body-max-width: 45rem;
} }
*, ::before, ::after { box-sizing: border-box; } *, ::before, ::after { box-sizing: border-box; }
body > * { body > * {

4
docs_src/index.html.js
View File

@ -1,4 +1,4 @@
import { el } from "../jsdom.js"; import { el } from "deka-dom-el";
import { head as headCommon } from "./layout/head.html.js"; import { head as headCommon } from "./layout/head.html.js";
export function head(pkg, path_target){ export function head(pkg, path_target){
return headCommon({ 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){ function pageName(pkg){

2
docs_src/layout/head.html.js
View File

@ -1,4 +1,4 @@
import { el } from "../../jsdom.js"; import { el } from "deka-dom-el";
/** /**
* @param {object} def * @param {object} def
* @param {string} def.id Page `id` is used as stylesheet name. * @param {string} def.id Page `id` is used as stylesheet name.

37
jsdom.js
View File

@ -11,35 +11,16 @@ prop_process.setDeleteAttr= function(obj, prop, value){
const keys= [ "HTMLElement", "SVGElement", "DocumentFragment", "MutationObserver", "document" ]; const keys= [ "HTMLElement", "SVGElement", "DocumentFragment", "MutationObserver", "document" ];
let dom_last; let dom_last;
export let namespace; export function register(dom, keys_aditional= []){
export let createElement; if(dom_last!==dom){
export let el; keys.push(...keys_aditional);
export let assign; const w= dom.window;
export let classListDeclarative; keys.forEach(key=> globalThis[key]= w[key]);
export let empty; globalThis.window= w;
export let on; w.console= globalThis.console;
export let dispatchEvent; }
export async function register(dom, keys_aditional= []){ return import("./index.js");
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;
} }
export function unregister(){ export function unregister(){
if(!dom_last) if(!dom_last)

31
package-lock.json generated
View File

@ -2524,6 +2524,37 @@
"integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==", "integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
"dev": true "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": { "node_modules/web-streams-polyfill": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "deka-dom-el", "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.", "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>", "author": "Jan Andrle <andrle.jan@centrum.cz>",
"license": "MIT", "license": "MIT",

12
src/dom.js
View File

@ -43,16 +43,19 @@ export function createElement(tag, attributes, ...connect){
const s= signals(this); const s= signals(this);
const { namespace }= scope; const { namespace }= scope;
let scoped= 0; let scoped= 0;
let el; let el, el_host;
//TODO Array.isArray(tag) ⇒ set key (cache els) //TODO Array.isArray(tag) ⇒ set key (cache els)
if(Object(attributes)!==attributes || s.isSignal(attributes)) if(Object(attributes)!==attributes || s.isSignal(attributes))
attributes= { textContent: attributes }; attributes= { textContent: attributes };
switch(true){ switch(true){
case typeof tag==="function": { case typeof tag==="function": {
scoped= 1; 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= 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; break;
} }
case tag==="#text": el= assign.call(this, document.createTextNode(""), attributes); 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 namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break;
case !el: el= assign.call(this, document.createElement(tag), attributes); 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(); if(scoped) scope.pop();
scoped= 2; scoped= 2;
return el; return el;

4
src/signals-lib.js
View File

@ -118,8 +118,8 @@ S.clear= function(...signals){
}; };
const key_reactive= "__dde_reactive"; const key_reactive= "__dde_reactive";
S.el= function(signal, map){ S.el= function(signal, map){
const mark_start= document.createComment(`<dde:reactive>`); const mark_start= document.createComment(`<dde:mark type="reactive">`);
const mark_end= document.createComment("</dde:reactive>"); const mark_end= document.createComment("</dde:mark>");
const out= document.createDocumentFragment(); const out= document.createDocumentFragment();
out.append(mark_start, mark_end); out.append(mark_start, mark_end);
const { current }= scope; const { current }= scope;