⚡ 🔤 Better build and improve texting

docs/components/code.html.js

@@ -1,4 +1,4 @@
-import { registerClientFile, styles } from "../ssr.js";
+import { page_id, registerClientFile, styles } from "../ssr.js";
 const host= "."+code.name;
 styles.css`
 /* Code block styling */
@@ -177,6 +177,9 @@ ${host}:hover .copy-button {
 }
 `;
 import { el } from "deka-dom-el";
+/**
+ * @typedef {"js"|"ts"|"html"|"css"|"shell"|"-"} Language
+ * */
 /**
  * Prints code to the page and registers flems to make it interactive.
  * @param {object} attrs
@@ -184,15 +187,17 @@ import { el } from "deka-dom-el";
  * @param {string} [attrs.className]
  * @param {URL} [attrs.src] Example code file path
  * @param {string} [attrs.content] Example code
- * @param {"js"|"ts"|"html"|"css"|"shell"} [attrs.language="js"] Language of the code
- * @param {string} [attrs.page_id] ID of the page, if setted it registers shiki
+ * @param {Language} [attrs.language="-s"] Language of the code
  * */
-export function code({ id, src, content, language= "js", className= host.slice(1), page_id }){
-	if(src) content= s.cat(src);
+export function code({ id, src, content, language= "-", className= host.slice(1) }){
+	if(src){
+		content= s.cat(src);
+		if(language=== "-") language= /** @type {Language} */(src.pathname.split(".").pop());
+	}
 	content= normalizeIndentation(content);
 	let dataJS;
-	if(page_id){
-		registerClientPart(page_id);
+	if(language!== "-"){
+		registerClientPart();
 		dataJS= "todo";
 	}
 	return el("div", { id, className, dataJS, tabIndex: 0 }).append(
@@ -204,8 +209,7 @@ export function pre({ content }){
 	return el("pre").append(el("code", content.trim()));
 }
 let is_registered= {};
-/** @param {string} page_id */
-function registerClientPart(page_id){
+function registerClientPart(){
 	if(is_registered[page_id]) return;
 
 	// Add Shiki with a more reliable loading method

docs/components/converter.html.js

@@ -1,4 +1,4 @@
-import { styles } from "../ssr.js";
+import { page_id, styles } from "../ssr.js";
 
 styles.css`
 #html-to-dde-converter {
@@ -149,12 +149,11 @@ import { ireland } from "./ireland.html.js";
 import { el } from "deka-dom-el";
 const fileURL= url=> new URL(url, import.meta.url);
 
-export function converter({ page_id }){
+export function converter(){
 	registerClientPart(page_id);
 	return el(ireland, {
 		src: fileURL("./converter.js.js"),
 		exportName: "converter",
-		page_id,
 	});
 }
 

docs/components/example.html.js

@@ -1,4 +1,4 @@
-import { styles } from "../ssr.js";
+import { page_id, styles } from "../ssr.js";
 const host= "."+example.name;
 styles.css`
 ${host} {
@@ -119,9 +119,8 @@ import { relative } from "node:path";
  * @param {URL} attrs.src Example code file path
  * @param {"js"|"ts"|"html"|"css"} [attrs.language="js"] Language of the code
  * @param {"normal"|"big"} [attrs.variant="normal"] Size of the example
- * @param {string} attrs.page_id ID of the page
  * */
-export function example({ src, language= "js", variant= "normal", page_id }){
+export function example({ src, language= "js", variant= "normal" }){
 	registerClientPart(page_id);
 	const content= s.cat(src).toString()
 		.replaceAll(/ from "deka-dom-el(\/signals)?";/g, ' from "./esm-with-signals.js";');

docs/components/examples/case-studies/data-dashboard.js

@@ -303,6 +303,7 @@ document.body.append(
 				padding: 1rem;
 				margin-bottom: 1.5rem;
 				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+				overflow: auto;
 			}
 
 			.loading-spinner {

docs/components/examples/case-studies/task-manager.js

@@ -483,7 +483,7 @@ document.body.append(
 
 		.task-board {
 			display: grid;
-			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 			gap: 1.5rem;
 		}
 

docs/components/examples/elements/dde-dom-create.js

@@ -4,11 +4,11 @@ import { el } from "deka-dom-el";
 const button = el("button", {
 	textContent: "Click me",
 	className: "primary",
-	disabled: true
+	disabled: true,
 });
 
 // Shorter and more expressive
 // than the native approach
 
 // Add to DOM
-document.body.append(button);
+document.body.append(button);

docs/components/examples/elements/dde-dom-tree.js

@@ -6,6 +6,6 @@ import { el } from "deka-dom-el";
 document.body.append(
 	el("div").append(
 		el("h1", "Title"),
-		el("p", "Paragraph")
-	)
+		el("p", "Paragraph"),
+	),
 );

docs/components/getLibraryUrl.html.js

@@ -1,4 +1,4 @@
-import { styles } from "../ssr.js";
+import { styles, page_id } from "../ssr.js";
 
 styles.css`
 #library-url-form {
@@ -74,7 +74,7 @@ styles.css`
 import { el } from "deka-dom-el";
 import { ireland } from "./ireland.html.js";
 
-export function getLibraryUrl({ page_id }){
+export function getLibraryUrl(){
 	return el(ireland, {
 		src: new URL("./getLibraryUrl.js.js", import.meta.url),
 		exportName: "getLibraryUrl",

docs/components/ireland.html.js

@@ -43,7 +43,6 @@ const componentsRegistry = new Map();
  * @param {object} attrs
  * @param {URL} attrs.src - Path to the file containing the component
  * @param {string} [attrs.exportName="default"] - Name of the export to use
- * @param {string} attrs.page_id - ID of the current page
  * @param {object} [attrs.props={}] - Props to pass to the component
  */
 export function ireland({ src, exportName = "default", props = {} }) {

docs/components/mnemonic/events-init.js

@@ -12,6 +12,10 @@ export function mnemonic(){
 			" — corresponds to custom elemnets callbacks ", el("code", "<live-cycle>Callback(...){...}"),
 			". To connect to custom element see following page, else it is simulated by MutationObserver."
 		),
+		el("li").append(
+			el("code", "on.defer(<identity>=> <identity>)(<identity>)"),
+			" — calls callback later",
+		),
 		el("li").append(
 			el("code", "dispatchEvent(<event>[, <options>])(element)"),
 			" — just ", el("code", "<element>.dispatchEvent(new Event(<event>[, <options>]))")