Update package.json

🚀 🚧 improvements (handlign special cases) + docs
2024-11-24 01:29:36 +01:00 · 2023-11-05 22:29:40 +01:00 · 2023-11-05 21:49:32 +01:00
16 changed files with 89 additions and 79 deletions
--- a/bs/docs.js
+++ b/bs/docs.js
@ -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" })
 );
--- a/dist/dde-with-signals.js
+++ b/dist/dde-with-signals.js
--- a/dist/dde.js
+++ b/dist/dde.js
--- a/dist/esm-with-signals.js
+++ b/dist/esm-with-signals.js
--- a/dist/esm.js
+++ b/dist/esm.js
--- a/docs/index.css
+++ b/docs/index.css
@ -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;
 }
--- a/docs/index.html
+++ b/docs/index.html
@ -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);
 document.body.append(
 	el("&lt;&gt;").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>
--- a/docs_src/components/example.html.js
+++ b/docs_src/components/example.html.js
@ -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;
 }
--- a/docs_src/index.css.js
+++ b/docs_src/index.css.js
@ -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 > * {
--- a/docs_src/index.html.js
+++ b/docs_src/index.html.js
@ -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){
--- a/docs_src/layout/head.html.js
+++ b/docs_src/layout/head.html.js
@ -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.
--- a/jsdom.js
+++ b/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 async function register(dom, keys_aditional= []){
-	if(dom_last===dom)
-		return import("./index.js");
-
+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;
+	}

-	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)
--- a/package-lock.json
+++ b/package-lock.json
@ -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",
--- a/package.json
+++ b/package.json
@ -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",
@ -48,7 +48,7 @@
 		"latedef": "true",
 		"maxparams": 5,
 		"maxdepth": 3,
-		"maxcomplexity": 11,
+		"maxcomplexity": 12,
 		"globals": {
 			"requestIdleCallback": false,
 			"AbortController": false,
--- a/src/dom.js
+++ b/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;
--- a/src/signals-lib.js
+++ b/src/signals-lib.js
@ -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;
Author	SHA1	Message	Date
Jan Andrle	64a03c8ba5	Update package.json	2023-11-05 22:29:40 +01:00
Jan Andrle	b597c00176	🚀 🚧 improvements (handlign special cases) + docs	2023-11-05 21:49:32 +01:00