lucynui 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "lucynui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Desktop apps from plain HTML, CSS and JS. No React, no Rust, no Electron.",
+  "license": "MIT",
+  "type": "module",
+  "module": "src/index.ts",
+  "bin": {
+    "lucyn": "./bin/lucyn.ts",
+    "lucynui": "./bin/lucyn.ts"
+  },
+  "files": [
+    "bin/",
+    "cli/",
+    "src/",
+    "webview-bun/src/",
+    "webview-bun/build/"
+  ],
+  "scripts": {
+    "dev": "bun src/lucyn.ts --dev",
+    "lucynbuild": "bun src/build.ts",
+    "typecheck": "bun check",
+    "postinstall": "bun ./cli/postinstall.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LucyNBrowserEngine/lucynui.git"
+  },
+  "keywords": [
+    "bun",
+    "webview",
+    "desktop",
+    "html",
+    "css",
+    "javascript"
+  ],
+  "dependencies": {
+    "elysia": "^1.4.30"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^7"
+  }
+}

package/src/build.ts

@@ -0,0 +1,41 @@
+import { mkdir } from "node:fs/promises";
+import { join, resolve } from "node:path";
+import { loadConfig } from "./config";
+
+const root = resolve(process.cwd());
+const entry = join(root, "app.ts");
+
+if (!(await Bun.file(entry).exists())) {
+  console.error(`[LucyN UI] No app.ts in ${root}. Create one that calls createApp() and build again.`);
+  process.exit(1);
+}
+
+const { title } = await loadConfig(root);
+const name = binaryName(title);
+const outfile = join(root, "dist", name);
+
+await mkdir(join(root, "dist"), { recursive: true });
+console.log(`[LucyN UI] Building ./dist/${name} from app.ts`);
+
+const build = Bun.spawn([process.execPath, "build", "--compile", "--minify", entry, "--outfile", outfile], {
+  stdout: "inherit",
+  stderr: "inherit",
+});
+
+const code = await build.exited;
+
+if (code !== 0) {
+  console.error("[LucyN UI] Build failed.");
+  process.exit(code);
+}
+
+console.log(`[LucyN UI] Done — ./dist/${name}`);
+
+function binaryName(title: string) {
+  return (
+    title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "lucyn-app"
+  );
+}

package/src/config.ts

@@ -0,0 +1,54 @@
+import { resolve } from "node:path";
+
+/** Every field is optional — LucyN UI fills in smart defaults. */
+export interface LucynConfig {
+  /** Window title. Default: "LucyN App" */
+  title?: string;
+  /** Window width. Default: 1024 */
+  width?: number;
+  /** Window height. Default: 768 */
+  height?: number;
+  /** Port for the local file server. Default: 3927 (falls back to the next free port) */
+  port?: number;
+  /** Enables hot reload and devtools. Default: false */
+  dev?: boolean;
+}
+
+/** Config with every field present. */
+export type ResolvedConfig = Required<LucynConfig>;
+
+export const DEFAULTS: ResolvedConfig = {
+  title: "LucyN App",
+  width: 1024,
+  height: 768,
+  port: 3927,
+  dev: false,
+};
+
+const CONFIG_FILE = "lucyn.config.ts";
+
+/**
+ * Helper for `lucyn.config.ts` so editors give you autocomplete.
+ */
+export function defineConfig(config: LucynConfig): LucynConfig {
+  return config;
+}
+
+/**
+ * Reads `lucyn.config.ts` from the project root. Missing file or bad config
+ * silently falls back to defaults.
+ */
+export async function loadConfig(root: string = process.cwd()): Promise<ResolvedConfig> {
+  const path = resolve(root, CONFIG_FILE);
+
+  if (!(await Bun.file(path).exists())) return { ...DEFAULTS };
+
+  try {
+    const module = await import(path);
+    return { ...DEFAULTS, ...(module.default ?? {}) };
+  } catch (error) {
+    console.warn(`[LucyN UI] Could not read ${CONFIG_FILE}, using defaults.`);
+    console.warn(error);
+    return { ...DEFAULTS };
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { createApp } from "./lucyn";
+export { defineConfig } from "./config";
+export type { LucynConfig } from "./config";
+export * from "../webview-bun/src/index";
+export const LUCYN_VERSION = "0.1.0";

package/src/lucyn.ts

@@ -0,0 +1,50 @@
+import { resolve } from "node:path";
+import { SizeHint, Webview } from "../webview-bun/src/webview";
+import { DEFAULTS, loadConfig, type LucynConfig } from "./config";
+import { errorPage, startServer, watchForChanges } from "./server";
+
+const WINDOWS_NOTICE =
+  "You are on Windows. LucyN UI on Windows is not top grade as Windows builds differ from Linux where the framework was made and tested. If you encounter any bugs or build errors please dont hesitate to open an issue at the LucyN org. Thank you.";
+
+/**
+ * Starts the file server, opens the native window and blocks until it closes.
+ *
+ * Reads `lucyn.config.ts` from the project root; anything passed here wins.
+ */
+export async function createApp(config: LucynConfig = {}) {
+  if (process.platform === "win32") console.warn(WINDOWS_NOTICE);
+
+  const root = resolve(process.cwd());
+  const { title, width, height, port, dev } = { ...DEFAULTS, ...(await loadConfig(root)), ...config };
+
+  const server = await startServer(root, port);
+
+  console.log(dev ? `LucyN UI dev server running on http://localhost:${server.port}` : `LucyN UI running on http://localhost:${server.port}`);
+
+  const webview = new Webview(dev, { width, height, hint: SizeHint.NONE });
+  webview.title = title;
+
+  if (await Bun.file(resolve(root, "index.html")).exists()) {
+    webview.navigate(`http://localhost:${server.port}`);
+  } else {
+    webview.setHTML(
+      errorPage(
+        "Missing index.html",
+        "No index.html found",
+        `<p>LucyN UI looked for <code>${resolve(root, "index.html")}</code> but it isn't there.</p>
+         <p>Create an <code>index.html</code> in your project root — that's the page this window shows.</p>`,
+      ),
+    );
+  }
+
+  const watcher = dev ? watchForChanges(root, () => webview.eval("window.location.reload()")) : null;
+
+  webview.run();
+
+  watcher?.close();
+  await server.stop();
+}
+
+if (import.meta.main) {
+  await createApp(process.argv.includes("--dev") ? { dev: true } : {});
+}

package/src/server.ts

@@ -0,0 +1,162 @@
+import { Elysia } from "elysia";
+import { statSync, watch, type FSWatcher } from "node:fs";
+import { extname, resolve, sep } from "node:path";
+
+const MIME_TYPES: Record<string, string> = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".txt": "text/plain; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".wasm": "application/wasm",
+};
+
+/** Only these files trigger a reload in dev mode. */
+const RELOAD_EXTENSIONS = new Set([".html", ".css", ".js"]);
+const RELOAD_DEBOUNCE_MS = 100;
+
+/** Folders that should never trigger a reload. */
+const IGNORED = /(^|[\\/])(node_modules|\.git|dist|out)([\\/]|$)/;
+
+const PORT_ATTEMPTS = 100;
+
+export interface LucynServer {
+  /** The port actually in use — may be higher than the requested one. */
+  port: number;
+  stop(): Promise<void>;
+}
+
+/**
+ * The LucyN branded error page used for 404s and other fatal problems.
+ */
+export function errorPage(status: string, title: string, message: string) {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${status} — LucyN UI</title>
+    <style>
+      :root { color-scheme: dark; }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0; min-height: 100vh; display: grid; place-items: center;
+        background: #0d0f14; color: #e8eaf0; padding: 2rem;
+        font-family: ui-monospace, "SF Mono", Menlo, monospace;
+      }
+      .card {
+        max-width: 42rem; padding: 2rem; border: 1px solid #232838;
+        border-radius: 14px; background: #141824;
+      }
+      .brand {
+        margin-bottom: 1.25rem; font-size: .75rem; letter-spacing: .22em;
+        text-transform: uppercase; color: #e0b34d;
+      }
+      h1 { margin: 0 0 .75rem; font-size: 1.4rem; }
+      p { margin: 0 0 .75rem; line-height: 1.65; color: #a3abbf; }
+      code { padding: .15rem .4rem; border-radius: 5px; background: #1d2231; color: #e8eaf0; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="brand">LucyN UI</div>
+      <h1>${title}</h1>
+      ${message}
+    </div>
+  </body>
+</html>`;
+}
+
+/**
+ * Serves every file in `root` and keeps serving until the window closes.
+ * Falls back to `port + 1` while the requested port is taken.
+ */
+export async function startServer(root: string, port: number): Promise<LucynServer> {
+  // `reusePort` would let a second app silently share a taken port, so the
+  // port-in-use fallback below would never trigger.
+  const app = new Elysia({ serve: { reusePort: false } }).get("/*", ({ params }) => serveFile(root, params["*"] ?? ""));
+
+  for (let offset = 0; offset < PORT_ATTEMPTS; offset++) {
+    try {
+      app.listen(port + offset);
+      return {
+        port: port + offset,
+        stop: async () => {
+          await app.stop();
+        },
+      };
+    } catch (error) {
+      if (!isPortInUse(error)) throw error;
+    }
+  }
+
+  throw new Error(`[LucyN UI] Ports ${port}-${port + PORT_ATTEMPTS - 1} are all in use.`);
+}
+
+/**
+ * Watches the project for changes to `.html`, `.css` and `.js` files and calls
+ * `onReload` at most once every 100ms.
+ */
+export function watchForChanges(root: string, onReload: () => void): FSWatcher {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  return watch(root, { recursive: true }, (_event, filename) => {
+    if (filename) {
+      const name = String(filename);
+      if (IGNORED.test(name)) return;
+      if (!RELOAD_EXTENSIONS.has(extname(name).toLowerCase())) return;
+    }
+
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      onReload();
+    }, RELOAD_DEBOUNCE_MS);
+  });
+}
+
+async function serveFile(root: string, urlPath: string) {
+  const relative = decodeURIComponent(urlPath).replace(/^\/+/, "");
+  const target = resolve(root, relative || "index.html");
+
+  if (target !== root && !target.startsWith(root + sep)) {
+    return new Response(errorPage("403", "Not allowed", "<p>That path lives outside the project root.</p>"), {
+      status: 403,
+      headers: { "Content-Type": "text/html; charset=utf-8" },
+    });
+  }
+
+  const stats = statSync(target, { throwIfNoEntry: false });
+  if (!stats?.isFile()) {
+    return new Response(
+      errorPage(
+        "404",
+        "File not found",
+        `<p>Nothing at <code>/${relative || "index.html"}</code>.</p>
+         <p>LucyN UI serves every file inside <code>${root}</code>, so check the path or create the file.</p>`,
+      ),
+      { status: 404, headers: { "Content-Type": "text/html; charset=utf-8" } },
+    );
+  }
+
+  return new Response(Bun.file(target), {
+    headers: { "Content-Type": MIME_TYPES[extname(target).toLowerCase()] ?? "application/octet-stream" },
+  });
+}
+
+function isPortInUse(error: unknown) {
+  if (typeof error !== "object" || error === null) return false;
+  if ((error as { code?: string }).code === "EADDRINUSE") return true;
+  return /port .*in use|address already in use/i.test((error as Error).message ?? "");
+}

package/webview-bun/src/ffi.ts

@@ -0,0 +1,90 @@
+import { dlopen, FFIType, ptr } from "bun:ffi";
+import { Webview } from "./webview";
+
+export function encodeCString(value: string) {
+  return ptr(new TextEncoder().encode(value + "\0"));
+}
+
+export const instances: Webview[] = [];
+
+/**
+ * Unload the library and destroy all webview instances. Should only be run
+ * once all windows are closed.
+ */
+export function unload() {
+  for (const instance of instances) instance.destroy();
+  lib.close();
+}
+
+let lib_file;
+
+if (process.env.WEBVIEW_PATH) {
+  lib_file = { default: process.env.WEBVIEW_PATH };
+} else if (process.platform === "win32") {
+  //@ts-expect-error
+  lib_file = await import("../build/libwebview.dll");
+} else if (process.platform === "linux") {
+  lib_file = await import(`../build/libwebview-${process.arch}.so`);
+} else if (process.platform === "darwin") {
+  //@ts-expect-error
+  lib_file = await import("../build/libwebview.dylib");
+}
+
+export const lib = dlopen(lib_file.default, {
+  webview_create: {
+    args: [FFIType.i32, FFIType.ptr],
+    returns: FFIType.ptr,
+  },
+  webview_destroy: {
+    args: [FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_run: {
+    args: [FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_terminate: {
+    args: [FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_get_window: {
+    args: [FFIType.ptr],
+    returns: FFIType.ptr,
+  },
+  webview_set_title: {
+    args: [FFIType.ptr, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_set_size: {
+    args: [FFIType.ptr, FFIType.i32, FFIType.i32, FFIType.i32],
+    returns: FFIType.void,
+  },
+  webview_navigate: {
+    args: [FFIType.ptr, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_set_html: {
+    args: [FFIType.ptr, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_init: {
+    args: [FFIType.ptr, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_eval: {
+    args: [FFIType.ptr, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_bind: {
+    args: [FFIType.ptr, FFIType.ptr, FFIType.function, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_unbind: {
+    args: [FFIType.ptr, FFIType.ptr],
+    returns: FFIType.void,
+  },
+  webview_return: {
+    args: [FFIType.ptr, FFIType.ptr, FFIType.i32, FFIType.ptr],
+    returns: FFIType.void,
+  },
+});

package/webview-bun/src/index.ts

@@ -0,0 +1,3 @@
+export { unload } from "./ffi";
+export * from "./webview";
+export const WEBVIEW_VERSION = "0.12.0";