🔤 ui p14

bs/dev/.build.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env -S npx nodejsscript
+import { analyzeMetafileSync, buildSync as esbuildSync } from "esbuild";
 const css= echo.css`
 	.info{ color: gray; }
 `;
@@ -8,8 +9,7 @@ export function build({ files, filesOut, minify= "partial", iife= true, types= t
 		const file= file_root+".js";
 		echo(`Processing ${file} (minified: ${minify})`);
 		const out= filesOut(file);
-		const esbuild_output= buildEsbuild({ file, out, minify });
-		echoVariant(esbuild_output.stderr.split("\n")[1].trim());
+		esbuild({ file, out, minify });
 
 		if(types){
 			const file_dts= file_root+".d.ts";
@@ -31,14 +31,13 @@ export function build({ files, filesOut, minify= "partial", iife= true, types= t
 		const name= "DDE";
 		const out= filesOut(file_root+".js", fileMark);
 
-		const params= [
-			"--format=iife",
-			"--global-name="+name,
-		];
-		const dde_output= buildEsbuild({ file, out, minify, params });
-		echoVariant(`${out} (${name})`)
+		const params= {
+			format: "iife",
+			globalName: name
+		};
+		esbuild({ file, out, minify, params });
 
-		if(!types) return dde_output;
+		if(!types) return;
 		const file_dts= file_root+".d.ts";
 		const file_dts_out= filesOut(file_dts, fileMark);
 		echoVariant(file_dts_out, true);
@@ -48,8 +47,6 @@ export function build({ files, filesOut, minify= "partial", iife= true, types= t
 			entry: file_dts,
 		})
 		echoVariant(file_dts_out);
-
-		return dde_output;
 	}
 }
 export function buildDts({ bundle, entry, name }){
@@ -64,46 +61,39 @@ export function buildDts({ bundle, entry, name }){
 	].filter(Boolean).join(" "), { out, entry });
 	return dts_b_g_output;
 }
-class ErrorEsbuild extends Error{
-	constructor({ code, stderr }){
-		super(stderr);
-		this.code= code;
-		this.stderr= stderr;
-	}
-}
-function buildEsbuild({ file, out, minify= "partial", params= [] }){
-	try {
-		return esbuild({ file, out, minify, params });
-	} catch(e){
-		if(e instanceof ErrorEsbuild)
-			return $.exit(e.code, echo(e.stderr));
-		throw e;
-	}
-}
-export function esbuild({ file, out, minify= "partial", params= [] }){
-	const esbuild_output= s.$().run([
-		"npx esbuild '::file::'",
-		"--platform=neutral",
-		"--bundle",
-		minifyOption(minify),
-		"--legal-comments=inline",
-		"--packages=external",
-		...params,
-		"--outfile='::out::'"
-	].filter(Boolean).join(" "), { file, out });
-	if(esbuild_output.code)
-		throw new ErrorEsbuild(esbuild_output);
+export function esbuild({ file, out, minify= "partial", params= {} }){
+	const esbuild_output= esbuildSync({
+		entryPoints: [file],
+		outfile: out,
+		platform: "neutral",
+		bundle: true,
+		legalComments: "inline",
+		packages: "external",
+		metafile: true,
+		...minifyOption(minify),
+		...params
+	});
 	pipe(
 		f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)),
 		f=> s.echo(f).to(out)
 	)(s.cat(out));
+
+	echoVariant(metaToLineStatus(esbuild_output.metafile, out));
 	return esbuild_output;
 }
 /** @param {"no"|"full"|"partial"} level */
 function minifyOption(level= "partial"){
-	if("no"===level) return undefined;
-	if("full"===level) return "--minify";
-	return "--minify-syntax --minify-identifiers";
+	if("no"===level) return { minify: false };
+	if("full"===level) return { minify: true };
+	return { minifySyntax: true, minifyIdentifiers: true };
+}
+function metaToLineStatus(meta, file){
+	const status= meta.outputs[file];
+	if(!status) return `? ${file}: unknown`;
+	const { bytes }= status;
+	const kbytes= bytes/1024;
+	const kbytesR= kbytes.toFixed(2);
+	return `${file}: ${kbytesR} KiB`;
 }
 function echoVariant(name, todo= false){
 	if(todo) return echo.use("-R", "~ "+name);

docs/components/converter.html.js

@@ -70,6 +70,7 @@ styles.css`
 	background-color: var(--bg);
 	color: var(--text);
 	min-height: 200px;
+	height: 25em;
 	resize: vertical;
 }
 

docs/components/converter.js.js

@@ -356,11 +356,12 @@ export function converter() {
 						"dd<el> Output",
 						el("div", { className: "button-group" }).append(
 							el("button", {
+								textContent: "Copy",
 								type: "button",
 								className: "copy-button",
 								title: "Copy to clipboard",
 								disabled: S(() => !ddeOutput.get())
-							}, onCopy).append("Copy")
+							}, onCopy)
 						)
 					),
 					el("textarea", {

docs/p14-converter.html.js

@@ -9,7 +9,6 @@ export const info= {
 import { el } from "deka-dom-el";
 import { simplePage } from "./layout/simplePage.html.js";
 import { h3 } from "./components/pageUtils.html.js";
-import { code } from "./components/code.html.js";
 import { converter } from "./components/converter.html.js";
 
 /** @param {import("./types.d.ts").PageAttrs} attrs */
@@ -21,55 +20,6 @@ export function page({ pkg, info }){
 			transform existing HTML markup into dd<el> JavaScript code, making it easier to adopt dd<el> in your projects.
 		`),
 
-		el("div", { className: "callout" }).append(
-			el("h4", t`Features`),
-			el("ul").append(
-				el("li", t`Convert any HTML snippet to dd<el> code instantly`),
-				el("li", t`Choose between different output formats (append vs arrays, style handling)`),
-				el("li", t`Try pre-built examples or paste your own HTML`),
-				el("li", t`Copy results to clipboard with one click`)
-			)
-		),
-
-		el("h3", t`How to Use the Converter`),
-		el("ol").append(
-			el("li").append(T`
-				${el("strong", "Paste your HTML")} into the input box or select one of the example templates
-			`),
-			el("li").append(T`
-				${el("strong", "Configure options")} to match your preferred coding style:
-				${el("ul").append(
-					el("li", t`Convert inline styles to JavaScript objects`),
-					el("li", t`Transform data-attributes/aria-attributes`),
-				)}
-			`),
-			el("li").append(T`
-				${el("strong", "Click convert")} to generate dd<el> code
-			`),
-			el("li").append(T`
-				${el("strong", "Copy the result")} to your project
-			`)
-		),
-
-		// The actual converter component
-		el(converter, { page_id }),
-
-		el("h3", t`How the Converter Works`),
-		el("p").append(T`
-			The converter uses a three-step process:
-		`),
-		el("ol").append(
-			el("li").append(T`
-				${el("strong", "Parsing:")} The HTML is parsed into a structured AST (Abstract Syntax Tree)
-			`),
-			el("li").append(T`
-				${el("strong", "Transformation:")} Each HTML node is converted to its dd<el> equivalent
-			`),
-			el("li").append(T`
-				${el("strong", "Code Generation:")} The final JavaScript code is properly formatted and indented
-			`)
-		),
-
 		el("div", { className: "warning" }).append(
 			el("p").append(T`
 				While the converter handles most basic HTML patterns, complex attributes or specialized elements might
@@ -77,7 +27,10 @@ export function page({ pkg, info }){
 			`)
 		),
 
-		el("h3", t`Next Steps`),
+		// The actual converter component
+		el(converter, { page_id }),
+
+		el(h3, t`Next Steps`),
 		el("p").append(T`
 			After converting your HTML to dd<el>, you might want to:
 		`),
@@ -86,14 +39,15 @@ export function page({ pkg, info }){
 				Add signal bindings for dynamic content (see ${el("a", { href: "p04-signals.html",
 					textContent: "Signals section" })})
 			`),
-			el("li").append(T`
-				Organize your components with scopes (see ${el("a", { href: "p05-scopes.html",
-					textContent: "Scopes section" })})
-			`),
 			el("li").append(T`
 				Add event handlers for interactivity (see ${el("a", { href: "p03-events.html",
 					textContent: "Events section" })})
-			`)
+			`),
+			el("li").append(T`
+				Organize your components with components (see ${el("a", { href:
+					"p02-elements.html#h-using-components-to-build-ui-fragments", textContent: "Components section" })}
+					and ${el("a", { href: "p05-scopes.html", textContent: "Scopes section" })})
+			`),
 		)
 	);
 }