x4js 2.2.74 → 2.3.2

package/cli/dev.mjs

@@ -0,0 +1,190 @@
+import fs from "node:fs";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import { parseArgs } from "node:util";
+import esbuild from "esbuild";
+import { loadConfig, resolveTls } from "./config.mjs";
+import { createBuildOptions } from "./build-options.mjs";
+import { info, success, failure } from "./log.mjs";
+
+function openBrowser(url) {
+    let command;
+    let args;
+
+    if (process.platform === "win32") {
+        command = "cmd";
+        args = ["/c", "start", "", url];
+    }
+    else if (process.platform === "darwin") {
+        command = "open";
+        args = [url];
+    }
+    else {
+        command = "xdg-open";
+        args = [url];
+    }
+
+    const child = spawn(command, args, {
+        detached: true,
+        stdio: "ignore",
+    });
+    child.unref();
+}
+
+function protocolConfig(config, values) {
+    if (values.http && values.https)
+        throw new Error("--http and --https are mutually exclusive");
+
+    let https = config.dev.https;
+    if (values.http)
+        https = false;
+    if (values.https)
+        https = true;
+
+    return https;
+}
+
+function serverUrl(host, port, https) {
+    let displayHost = host;
+    if (host === "0.0.0.0")
+        displayHost = "127.0.0.1";
+    else if (host === "::")
+        displayHost = "[::1]";
+    else if (host.includes(":") && !host.startsWith("["))
+        displayHost = `[${host}]`;
+    return `${https ? "https" : "http"}://${displayHost}:${port}`;
+}
+
+export async function dev(argv = [], root = process.cwd()) {
+    const { values, positionals } = parseArgs({
+        args: argv,
+        options: {
+            host: { type: "string" },
+            port: { type: "string" },
+            http: { type: "boolean", default: false },
+            https: { type: "boolean", default: false },
+            open: { type: "boolean", default: false },
+        },
+        allowPositionals: true,
+        strict: true,
+    });
+
+    if (positionals.length)
+        throw new Error(`Unexpected argument: ${positionals[0]}`);
+
+    if (values.port !== undefined && !/^\d+$/.test(values.port))
+        throw new Error("--port must be an integer");
+
+    let context;
+    let packageWatcher;
+    let stopping = false;
+    let restartTimer;
+    let restartChain = Promise.resolve();
+    let browserOpened = false;
+
+    async function start(config) {
+        const host = values.host ?? config.dev.host;
+        const port = values.port === undefined ? config.dev.port : Number(values.port);
+        if (port !== undefined && (port < 0 || port > 65535))
+            throw new Error("--port must be between 0 and 65535");
+
+        const useHttps = protocolConfig(config, values);
+        const serveOptions = {
+            host,
+            servedir: config.outdir,
+        };
+
+        if (port !== undefined)
+            serveOptions.port = port;
+
+        if (useHttps)
+            Object.assign(serveOptions, resolveTls(config));
+
+        const next = await esbuild.context(createBuildOptions(config, "dev"));
+        try {
+            await next.watch();
+            const result = await next.serve(serveOptions);
+            context = next;
+
+            const actualHost = result.hosts.includes(host) ? host : (result.hosts[0] ?? host);
+            const url = serverUrl(actualHost, result.port, useHttps);
+            info("mode", "dev");
+            info("outdir", config.outdir);
+            success("server", url);
+
+            if (values.open && !browserOpened) {
+                browserOpened = true;
+                openBrowser(url);
+            }
+        }
+        catch (error) {
+            await next.dispose();
+            throw error;
+        }
+    }
+
+    async function reload() {
+        let config;
+        try {
+            config = loadConfig(root);
+            protocolConfig(config, values);
+            if ((values.https || (!values.http && config.dev.https)))
+                resolveTls(config);
+        }
+        catch (error) {
+            failure(`config: ${error.message}`);
+            return;
+        }
+
+        const previous = context;
+        context = undefined;
+        if (previous)
+            await previous.dispose();
+
+        try {
+            await start(config);
+            success("config", "reloaded");
+        }
+        catch (error) {
+            failure(`restart: ${error.message}`);
+            // The old context cannot be restored after dispose. Keep watching
+            // package.json so fixing the configuration starts dev again.
+        }
+    }
+
+    function scheduleReload() {
+        clearTimeout(restartTimer);
+        restartTimer = setTimeout(() => {
+            restartChain = restartChain.then(reload, reload);
+        }, 150);
+    }
+
+    const initialConfig = loadConfig(root);
+    await start(initialConfig);
+
+    packageWatcher = fs.watch(path.resolve(root), { persistent: true }, (_event, filename) => {
+        if (filename === null || filename.toString() === "package.json")
+            scheduleReload();
+    });
+
+    async function stop() {
+        if (stopping)
+            return;
+        stopping = true;
+        clearTimeout(restartTimer);
+        packageWatcher?.close();
+        await restartChain.catch(() => {});
+        await context?.dispose();
+    }
+
+    process.once("SIGINT", async () => {
+        await stop();
+        process.exit(0);
+    });
+    process.once("SIGTERM", async () => {
+        await stop();
+        process.exit(0);
+    });
+
+    return { stop };
+}

package/cli/less-plugin.mjs

@@ -0,0 +1,47 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+
+async function loadLess(projectRoot) {
+    const require = createRequire(path.join(projectRoot, "package.json"));
+    let resolved;
+    try {
+        resolved = require.resolve("less");
+    }
+    catch {
+        throw new Error(
+            'LESS support requires the "less" package.\n' +
+            'Install it with: npm install -D less',
+        );
+    }
+
+    const module = await import(pathToFileURL(resolved).href);
+    return module.default ?? module;
+}
+
+export function lessPlugin(projectRoot) {
+    let lessPromise;
+
+    return {
+        name: "x4-less",
+        setup(build) {
+            build.onLoad({ filter: /\.less$/ }, async (args) => {
+                const source = await fs.readFile(args.path, "utf8");
+                lessPromise ??= loadLess(projectRoot);
+                const less = await lessPromise;
+
+                const result = await less.render(source, {
+                    filename: args.path,
+                });
+
+                return {
+                    contents: result.css,
+                    loader: "css",
+                    resolveDir: path.dirname(args.path),
+                    watchFiles: [args.path, ...(result.imports ?? [])],
+                };
+            });
+        },
+    };
+}

package/cli/log.mjs

@@ -0,0 +1,41 @@
+import { styleText } from "node:util";
+
+function useColor(stream = process.stdout) {
+    if (process.env.NO_COLOR !== undefined)
+        return false;
+    if (process.env.FORCE_COLOR !== undefined)
+        return process.env.FORCE_COLOR !== "0";
+    return !!stream.isTTY;
+}
+
+function paint(style, value, stream = process.stdout) {
+    const text = String(value);
+    return useColor(stream) ? styleText(style, text) : text;
+}
+
+export const color = {
+    cyan: (value) => paint("cyan", value),
+    green: (value) => paint("green", value),
+    yellow: (value) => paint("yellow", value),
+    red: (value) => paint("red", value, process.stderr),
+    gray: (value) => paint("gray", value),
+    white: (value) => paint("white", value),
+};
+
+export function info(label, value = "") {
+    const left = color.cyan(String(label).padEnd(11));
+    console.log(value === "" ? left.trimEnd() : `${left}${value}`);
+}
+
+export function success(label, value = "") {
+    const left = color.green(String(label).padEnd(11));
+    console.log(value === "" ? left.trimEnd() : `${left}${value}`);
+}
+
+export function warning(message) {
+    console.warn(color.yellow(message));
+}
+
+export function failure(message) {
+    console.error(color.red(message));
+}

package/cli/main.mjs

@@ -0,0 +1,74 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { failure } from "./log.mjs";
+
+const cliDir = path.dirname(fileURLToPath(import.meta.url));
+const packageFile = path.join(cliDir, "..", "package.json");
+
+function getVersion() {
+    try {
+        return JSON.parse(fs.readFileSync(packageFile, "utf8")).version ?? "unknown";
+    }
+    catch {
+        return "unknown";
+    }
+}
+
+function printHelp(version) {
+    console.log(`x4js ${version}
+
+Usage:
+  x4js create <project> [--template <name>] [--no-install]
+  x4js templates
+  x4js dev [--host <host>] [--port <port>] [--http|--https] [--open]
+  x4js build [--debug]
+
+Options:
+  -h, --help       Show help
+  -v, --version    Show version`);
+}
+
+const version = getVersion();
+const [command, ...argv] = process.argv.slice(2);
+
+try {
+    switch (command) {
+        case "create": {
+            const { create } = await import("./create.mjs");
+            await create(argv, { version });
+            break;
+        }
+        case "templates": {
+            const { templates } = await import("./templates.mjs");
+            await templates(argv, { version });
+            break;
+        }
+        case "dev": {
+            const { dev } = await import("./dev.mjs");
+            await dev(argv);
+            break;
+        }
+        case "build": {
+            const { build } = await import("./build.mjs");
+            await build(argv);
+            break;
+        }
+        case undefined:
+        case "help":
+        case "--help":
+        case "-h":
+            printHelp(version);
+            break;
+        case "--version":
+        case "-v":
+            console.log(version);
+            break;
+        default:
+            throw new Error(`Unknown command '${command}'. Run 'x4js --help'.`);
+    }
+}
+catch (error) {
+    failure(error instanceof Error ? error.message : String(error));
+    process.exitCode = 1;
+}

package/cli/templates-source.mjs

@@ -0,0 +1,61 @@
+const OWNER = "rlibre";
+const REPO = "x4-templates";
+const REF = "main";
+
+function headers(version = "unknown") {
+    return {
+        "Accept": "application/vnd.github+json",
+        "User-Agent": `x4js/${version}`,
+        "X-GitHub-Api-Version": "2022-11-28",
+    };
+}
+
+async function checkedFetch(url, options) {
+    const response = await fetch(url, options);
+    if (!response.ok)
+        throw new Error(`Template repository request failed (${response.status} ${response.statusText})`);
+    return response;
+}
+
+export async function fetchTemplates(version = "unknown") {
+    const url = `https://raw.githubusercontent.com/${OWNER}/${REPO}/${REF}/templates.json`;
+    const response = await checkedFetch(url, { headers: headers(version) });
+    const manifest = await response.json();
+
+    if (!manifest || typeof manifest !== "object" || Array.isArray(manifest))
+        throw new Error("Invalid templates.json");
+
+    for (const [name, description] of Object.entries(manifest)) {
+        if (!name || typeof description !== "string")
+            throw new Error("Invalid templates.json entry");
+    }
+
+    return manifest;
+}
+
+export async function fetchTemplateFiles(name, version = "unknown") {
+    const treeUrl = `https://api.github.com/repos/${OWNER}/${REPO}/git/trees/${REF}?recursive=1`;
+    const response = await checkedFetch(treeUrl, { headers: headers(version) });
+    const tree = await response.json();
+
+    if (!Array.isArray(tree.tree))
+        throw new Error("Invalid template repository tree");
+
+    const prefix = `${name}/`;
+    const files = tree.tree
+        .filter((item) => item.type === "blob" && item.path.startsWith(prefix))
+        .map((item) => ({
+            path: item.path.slice(prefix.length),
+            url: `https://raw.githubusercontent.com/${OWNER}/${REPO}/${REF}/${item.path.split("/").map(encodeURIComponent).join("/")}`,
+        }));
+
+    if (!files.length)
+        throw new Error(`Template '${name}' contains no files`);
+
+    return files;
+}
+
+export async function downloadTemplateFile(url, version = "unknown") {
+    const response = await checkedFetch(url, { headers: headers(version) });
+    return Buffer.from(await response.arrayBuffer());
+}

package/cli/templates.mjs

@@ -0,0 +1,13 @@
+import { fetchTemplates } from "./templates-source.mjs";
+import { color } from "./log.mjs";
+
+export async function templates(_argv = [], { version = "unknown" } = {}) {
+    const manifest = await fetchTemplates(version);
+    const names = Object.keys(manifest).sort();
+    const width = names.reduce((max, name) => Math.max(max, name.length), 0) + 3;
+
+    console.log(color.cyan("Available templates"));
+    console.log();
+    for (const name of names)
+        console.log(`  ${color.green(name.padEnd(width))}${manifest[name]}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.74",
+  "version": "2.3.2",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",
@@ -9,6 +9,9 @@
     ".": "./src/x4.ts",
     "./monaco": "./src/components/monaco/monaco.ts"
   },
+  "bin": {
+    "x4js": "./bin/x4js.mjs"
+  },
   "scripts": {
     "build-publish": "deno run --allow-all ./publish.ts",
     "build-doc": "typedoc",
@@ -16,6 +19,8 @@
   },
   "files": [
     "src",
+    "bin",
+    "cli",
     "README.md",
     "LICENSE"
   ],
@@ -32,6 +37,10 @@
     "desktop",
     "application"
   ],
+  "dependencies": {
+    "esbuild": "0.28",
+    "esbuild-sass-plugin": "^3.7"
+  },
   "devDependencies": {
     "typescript": "^5.8.3",
     "typedoc": "^0.28.19",