mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-01 12:22:15 +02:00
⚡ dde and docs improvements (#27)
* ⚡ 🎉 * ⚡ wip * 🔤 * ⚡ wip * ⚡ wip * ⚡ Refatc signals to .get/.set syntax #26 * 🐛 Better types for on* * 🔤 * 🔤 * 🐛 coumputed signal * 🔤 ⚡ Docs UI/UX * ⚡ 🔤 UI enhancements * ⚡ (bs) (un)min * 🔤 adds debugging * 🔤 ssr * 🔤 * ⚡ bs/lint * 🔤 * 🔤 UI * 🔤 updates texts * 🔤UI * ⚡ dispatch * 🔤 events * 🔤 elements * 🔤 intro * 🐛 fixes completitions for el with components * 🐛 wrong file(s) in git * 🔤 logo * 🐛 🔤 types 3ps * 🔤 ui/ux * 🔤 * 🔤 * 🔤 scopes * 🔤 * 🔤 ui/ux * 🔤 * ⚡ issignal * 🔤 improvemens * ⚡ irelands * 🔤 UI/UX/wording * 🐛 npx-hint [Scrollable region must have keyboard access | Axe Rules | Deque University | Deque Systems](https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI) * 🔤 logos * ⚡ better? dts builds * Update README.md
This commit is contained in:
GitHub
96
bs/build.js
96
bs/build.js
@ -1,71 +1,37 @@
|
||||
#!/usr/bin/env -S npx nodejsscript
|
||||
import { bundle as bundleDTS } from "dts-bundler";
|
||||
import { build } from "./dev/.build.js"
|
||||
const files= [ "index", "index-with-signals" ];
|
||||
const filesOut= (file, mark= "esm")=> "dist/"+file.replace("index", mark);
|
||||
const css= echo.css`
|
||||
.info{ color: gray; }
|
||||
`;
|
||||
|
||||
$.api("", true)
|
||||
.option("--minify", "Level of minification [ no, full, partial (default) ]")
|
||||
.action(async function main({ minify= "partial" }){
|
||||
for(const file_root of files){
|
||||
const file= file_root+".js";
|
||||
echo("Processing: "+ file);
|
||||
const out= filesOut(file);
|
||||
const esbuild_output= s.$().run([
|
||||
"npx esbuild '::file::'",
|
||||
"--platform=neutral",
|
||||
"--bundle",
|
||||
minifyOption(minify),
|
||||
"--legal-comments=inline",
|
||||
"--packages=external",
|
||||
"--outfile='::out::'"
|
||||
].filter(Boolean).join(" "), { file, out });
|
||||
if(esbuild_output.code)
|
||||
return $.exit(esbuild_output.code, echo(esbuild_output.stderr));
|
||||
echoVariant(esbuild_output.stderr.split("\n")[1].trim()+ " (esbuild)");
|
||||
pipe(
|
||||
f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)),
|
||||
f=> s.echo(f).to(out)
|
||||
)(s.cat(out));
|
||||
|
||||
const file_dts= file_root+".d.ts";
|
||||
const file_dts_out= filesOut(file_dts);
|
||||
echoVariant(file_dts_out);
|
||||
s.echo(bundleDTS(file_dts)).to(file_dts_out);
|
||||
|
||||
await toDDE(out, file_root);
|
||||
}
|
||||
$.exit(0);
|
||||
|
||||
async function toDDE(file, file_root){
|
||||
const name= "dde";
|
||||
const out= filesOut(file_root+".js", name);
|
||||
echoVariant(`${out} (${file} → globalThis.${name})`)
|
||||
|
||||
let content= s.cat(file).toString().split(/export ?{/);
|
||||
content.splice(1, 0, `\nglobalThis.${name}= {`);
|
||||
content[2]= content[2]
|
||||
.replace(/,(?!\n)/g, ",\n")
|
||||
.replace(/(?<!\n)}/, "\n}")
|
||||
.replace(/^(\t*)(.*) as ([^,\n]*)(,?)$/mg, "$1$3: $2$4");
|
||||
s.echo([
|
||||
`//deka-dom-el library is available via global namespace \`${name}\``,
|
||||
"(()=> {",
|
||||
content.join(""),
|
||||
"})();"
|
||||
].join("\n")).to(out);
|
||||
}
|
||||
$.api("")
|
||||
.command("main", "Build main files", { default: true })
|
||||
.action(async function main(){
|
||||
const regular = await build({
|
||||
files,
|
||||
filesOut,
|
||||
minify: "no",
|
||||
});
|
||||
const min = await build({
|
||||
files,
|
||||
filesOut(file, mark= "esm"){
|
||||
const out= filesOut(file, mark);
|
||||
const idx= out.lastIndexOf(".");
|
||||
return out.slice(0, idx)+".min"+out.slice(idx);
|
||||
},
|
||||
minify: "full",
|
||||
});
|
||||
return $.exit(regular + min);
|
||||
})
|
||||
.command("signals", "Build only signals (for example for analysis)")
|
||||
.action(async function signals(){
|
||||
const regular = await build({
|
||||
files: [ "signals" ],
|
||||
filesOut(file){ return "dist/."+file; },
|
||||
minify: "no",
|
||||
dde: false,
|
||||
});
|
||||
return $.exit(regular);
|
||||
})
|
||||
.parse();
|
||||
|
||||
/** @param {"no"|"full"|"partial"} level */
|
||||
function minifyOption(level= "partial"){
|
||||
if("no"===level) return undefined;
|
||||
if("full"===level) return "--minify";
|
||||
return "--minify-syntax --minify-identifiers";
|
||||
}
|
||||
function echoVariant(name){
|
||||
return echo("%c✓ "+name, css.info+css);
|
||||
}
|
||||
|
||||
function filesOut(file, mark= "esm"){ return "dist/"+file.replace("index", mark); }
|
||||
|
||||
108
bs/dev/.build.js
Normal file
108
bs/dev/.build.js
Normal file
@ -0,0 +1,108 @@
|
||||
#!/usr/bin/env -S npx nodejsscript
|
||||
import { bundle, bundle as bundleDTS } from "dts-bundler";
|
||||
const css= echo.css`
|
||||
.info{ color: gray; }
|
||||
`;
|
||||
|
||||
export async function build({ files, filesOut, minify= "partial", dde= true }){
|
||||
for(const file_root of files){
|
||||
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)");
|
||||
|
||||
const file_dts= file_root+".d.ts";
|
||||
const file_dts_out= filesOut(file_dts);
|
||||
echoVariant(file_dts_out, true);
|
||||
buildDts({
|
||||
bundle: out,
|
||||
entry: file_dts,
|
||||
});
|
||||
echoVariant(file_dts_out);
|
||||
|
||||
if(dde) toDDE(file, file_root);
|
||||
}
|
||||
return 0;
|
||||
|
||||
async function toDDE(file, file_root){
|
||||
const name= "dde";
|
||||
const out= filesOut(file_root+".js", name);
|
||||
|
||||
const params= [
|
||||
"--format=iife",
|
||||
"--global-name="+name,
|
||||
];
|
||||
const dde_output= buildEsbuild({ file, out, minify, params });
|
||||
echoVariant(`${out} (${file} → globalThis.${name})`)
|
||||
|
||||
const file_dts= file_root+".d.ts";
|
||||
const file_dts_out= filesOut(file_dts, name);
|
||||
echoVariant(file_dts_out, true);
|
||||
buildDts({
|
||||
name,
|
||||
bundle: out,
|
||||
entry: file_dts,
|
||||
})
|
||||
echoVariant(file_dts_out);
|
||||
|
||||
return dde_output;
|
||||
}
|
||||
}
|
||||
export function buildDts({ bundle, entry, name }){
|
||||
const out= bundle.slice(0, bundle.lastIndexOf("."))+".d.ts";
|
||||
const dts_b_g_output= s.run([
|
||||
"npx dts-bundle-generator",
|
||||
"--silent",
|
||||
"-o ::out::",
|
||||
!name ? false : ("--umd-module-name "+name),
|
||||
"--inline-declare-global",
|
||||
"::entry::"
|
||||
].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);
|
||||
pipe(
|
||||
f=> f.replace(/^ +/gm, m=> "\t".repeat(m.length/2)),
|
||||
f=> s.echo(f).to(out)
|
||||
)(s.cat(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";
|
||||
}
|
||||
function echoVariant(name, todo= false){
|
||||
if(todo) return echo.use("-R", "~ "+name);
|
||||
return echo("%c✓ "+name, css.info);
|
||||
}
|
||||
14
bs/docs.js
14
bs/docs.js
@ -4,7 +4,7 @@ echo("Building static documentation files…");
|
||||
echo("Preparing…");
|
||||
import { path_target, pages as pages_registered, styles, dispatchEvent, t } from "../docs/ssr.js";
|
||||
import { createHTMl } from "./docs/jsdom.js";
|
||||
import { register } from "../jsdom.js";
|
||||
import { register, queue } from "../jsdom.js";
|
||||
const pkg= s.cat("package.json").xargs(JSON.parse);
|
||||
|
||||
if(s.test("-d", path_target.root)){
|
||||
@ -14,6 +14,10 @@ if(s.test("-d", path_target.root)){
|
||||
echo("Creating directory…");
|
||||
s.mkdir("-p", path_target.root);
|
||||
}
|
||||
|
||||
// Create assets directory in target
|
||||
echo("Creating assets directory…");
|
||||
s.mkdir("-p", path_target.root+"assets");
|
||||
echo("Collecting list of pages…");
|
||||
const pages= s.ls($.xdg.main`../docs/*.html.js`).map(addPage);
|
||||
for(const { id, info } of pages){
|
||||
@ -27,12 +31,20 @@ for(const { id, info } of pages){
|
||||
serverDOM.document.body.append(
|
||||
el(page, { pkg, info }),
|
||||
);
|
||||
await queue();
|
||||
|
||||
echo.use("-R", `Writing ${id}.html…`);
|
||||
dispatchEvent("oneachrender", document);
|
||||
s.echo(serverDOM.serialize()).to(path_target.root+id+".html");
|
||||
}
|
||||
s.echo(styles.content).to(path_target.css+styles.name);
|
||||
|
||||
// Copy assets
|
||||
echo("Copying assets…");
|
||||
if(s.test("-d", "docs/assets")) {
|
||||
s.cp("-r", "docs/assets/*", path_target.assets);
|
||||
}
|
||||
|
||||
dispatchEvent("onssrend");
|
||||
echo("Done");
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { JSDOM } from "jsdom";
|
||||
const html_default= "<!doctype html><html><head><meta charset=\"utf-8\"></head><body></body></html>";
|
||||
const html_default= "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"></head><body></body></html>";
|
||||
let keys= [];
|
||||
let dom= null;
|
||||
import { relative } from 'node:path';
|
||||
|
||||
Reference in New Issue
Block a user