alepha 0.19.1 → 0.19.2

package/dist/cli/devtools/index.d.ts

@@ -0,0 +1,45 @@
+import * as _$alepha from "alepha";
+import { Static } from "alepha";
+
+//#region ../../src/cli/devtools/atoms/devtoolsOptions.d.ts
+/**
+ * Devtools configuration atom.
+ *
+ * Filled from the `devtools` section of `alepha.config.ts`.
+ */
+declare const devtoolsOptions: _$alepha.Atom<_$alepha.TOptional<_$alepha.TObject<{
+  /**
+   * Hide the floating devtools button in the browser.
+   *
+   * The devtools UI is still accessible at `/__devtools/`.
+   */
+  hideButton: _$alepha.TOptional<_$alepha.TBoolean>;
+}>>, "alepha.cli.devtools.options">;
+/**
+ * Type for devtools options.
+ */
+type DevtoolsOptions = Static<typeof devtoolsOptions.schema>;
+//#endregion
+//#region ../../src/cli/devtools/index.d.ts
+/**
+ * CLI plugin that integrates @alepha/devtools into the Vite dev server.
+ *
+ * This module is intentionally lightweight — it does NOT statically import
+ * `@alepha/devtools` (which pulls in `alepha/react` and `.tsx` files).
+ * Instead, it lazy-loads devtools via Vite's SSR module loader at runtime.
+ *
+ * Usage in `alepha.config.ts`:
+ * ```ts
+ * import { AlephaCliDevtoolsPlugin } from "alepha/devtools/plugin";
+ *
+ * export default defineConfig({
+ *   services: [AlephaCliDevtoolsPlugin],
+ * });
+ * ```
+ *
+ * @module alepha.devtools.plugin
+ */
+declare const AlephaCliDevtoolsPlugin: _$alepha.Service<_$alepha.Module>;
+//#endregion
+export { AlephaCliDevtoolsPlugin, DevtoolsOptions, devtoolsOptions };
+//# sourceMappingURL=index.d.ts.map

package/dist/cli/devtools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/cli/devtools/atoms/devtoolsOptions.ts","../../../src/cli/devtools/index.ts"],"mappings":";;;;;;;AAOA;;cAAa,eAAA,EAAe,QAAA,CAAA,IAAA,CAAA,QAAA,CAAA,SAAA,UAAA,OAAA;EAa1B;;;;;iCAAA,QAAA,CAAA,QAAA;AAAA;;;;KAKU,eAAA,GAAkB,MAAA,QAAc,eAAA,CAAgB,MAAA;;;;;;;AAlB5D;;;;;;;;;;;;;;cCsGa,uBAAA,EAAuB,QAAA,CAAA,OAAA,CAgFlC,QAAA,CAhFkC,MAAA"}

package/dist/cli/devtools/index.js

@@ -0,0 +1,170 @@
+import { createRequire } from "node:module";
+import { readFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { $atom, $module, AlephaError, t } from "alepha";
+import { ViteDevServerProvider } from "alepha/cli";
+//#region ../../src/cli/devtools/atoms/devtoolsOptions.ts
+/**
+* Devtools configuration atom.
+*
+* Filled from the `devtools` section of `alepha.config.ts`.
+*/
+const devtoolsOptions = $atom({
+	name: "alepha.cli.devtools.options",
+	description: "Devtools plugin configuration",
+	schema: t.optional(t.object({ hideButton: t.optional(t.boolean({ default: false })) }))
+});
+//#endregion
+//#region ../../src/cli/devtools/index.ts
+const DEVTOOLS_OVERLAY_SCRIPT = `
+(function () {
+  if (window.__alepha_devtools_injected) return;
+  window.__alepha_devtools_injected = true;
+
+  const STORAGE_KEY = "alepha-devtools-open";
+
+  // Button
+  const btn = document.createElement("button");
+  btn.id = "alepha-devtools-btn";
+  btn.innerHTML = \`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m14.7 6.3-5.4 5.4a2.1 2.1 0 1 0 3 3l5.4-5.4a2.1 2.1 0 1 0-3-3z"/><path d="m8 16 1.5-1.5"/></svg>\`;
+  Object.assign(btn.style, {
+    position: "fixed", bottom: "16px", right: "16px", zIndex: "99998",
+    width: "40px", height: "40px", borderRadius: "50%",
+    background: "#1a1a2e", color: "#a0a0c0", border: "1px solid #2a2a4a",
+    cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.3)", transition: "all 0.2s",
+    padding: "0", fontSize: "0",
+  });
+  btn.addEventListener("mouseenter", () => {
+    btn.style.background = "#2a2a4e";
+    btn.style.color = "#c0c0e0";
+    btn.style.transform = "scale(1.1)";
+  });
+  btn.addEventListener("mouseleave", () => {
+    btn.style.background = "#1a1a2e";
+    btn.style.color = "#a0a0c0";
+    btn.style.transform = "scale(1)";
+  });
+
+  // Overlay
+  const overlay = document.createElement("div");
+  overlay.id = "alepha-devtools-overlay";
+  Object.assign(overlay.style, {
+    position: "fixed", inset: "0", zIndex: "99999",
+    background: "rgba(0,0,0,0.6)", backdropFilter: "blur(2px)",
+    display: "none", alignItems: "center", justifyContent: "center",
+  });
+
+  // Panel
+  const panel = document.createElement("div");
+  Object.assign(panel.style, {
+    width: "90vw", height: "85vh", maxWidth: "1400px",
+    borderRadius: "12px", overflow: "hidden",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.5)",
+    border: "1px solid #2a2a4a",
+  });
+
+  const iframe = document.createElement("iframe");
+  iframe.style.cssText = "width:100%;height:100%;border:none;";
+
+  panel.appendChild(iframe);
+  overlay.appendChild(panel);
+  document.body.appendChild(btn);
+  document.body.appendChild(overlay);
+
+  function open() {
+    if (!iframe.src) iframe.src = "/__devtools/";
+    overlay.style.display = "flex";
+    btn.style.display = "none";
+    sessionStorage.setItem(STORAGE_KEY, "1");
+  }
+
+  function close() {
+    overlay.style.display = "none";
+    btn.style.display = "flex";
+    sessionStorage.removeItem(STORAGE_KEY);
+  }
+
+  btn.addEventListener("click", open);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) close();
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && overlay.style.display === "flex") close();
+  });
+
+  // Restore state after HMR
+  if (sessionStorage.getItem(STORAGE_KEY)) open();
+})();
+`;
+/**
+* CLI plugin that integrates @alepha/devtools into the Vite dev server.
+*
+* This module is intentionally lightweight — it does NOT statically import
+* `@alepha/devtools` (which pulls in `alepha/react` and `.tsx` files).
+* Instead, it lazy-loads devtools via Vite's SSR module loader at runtime.
+*
+* Usage in `alepha.config.ts`:
+* ```ts
+* import { AlephaCliDevtoolsPlugin } from "alepha/devtools/plugin";
+*
+* export default defineConfig({
+*   services: [AlephaCliDevtoolsPlugin],
+* });
+* ```
+*
+* @module alepha.devtools.plugin
+*/
+const AlephaCliDevtoolsPlugin = $module({
+	name: "alepha.cli.plugins.devtools",
+	atoms: [devtoolsOptions],
+	register: (alepha) => {
+		const vite = alepha.inject(ViteDevServerProvider);
+		const assetsPath = join(dirname(createRequire(import.meta.url).resolve("@alepha/devtools/package.json")), "assets/ui");
+		process.env.VITE_ALEPHA_DEVTOOLS = "true";
+		vite.addVitePlugin({
+			name: "alepha-devtools",
+			configureServer: (server) => {
+				server.middlewares.use((req, res, next) => {
+					if (req.url !== "/__devtools/api/reload" || req.method !== "POST") return next();
+					vite.reload();
+					res.writeHead(200, { "content-type": "application/json" });
+					res.end(JSON.stringify({ ok: true }));
+				});
+				server.middlewares.use(async (req, res, next) => {
+					if (!(req.url || "/").startsWith("/__devtools") || !req.headers.accept?.includes("text/html")) return next();
+					const indexPath = join(assetsPath, "index.html");
+					try {
+						let html = await readFile(indexPath, "utf-8");
+						html = html.replace("<head>", `<head><script type="module" src="/@vite/client"><\/script>`);
+						res.writeHead(200, { "content-type": "text/html" });
+						res.end(html);
+					} catch {
+						next();
+					}
+				});
+			},
+			transformIndexHtml: () => {
+				if (alepha.store.get(devtoolsOptions)?.hideButton) return [];
+				return [{
+					tag: "script",
+					attrs: { type: "module" },
+					children: DEVTOOLS_OVERLAY_SCRIPT,
+					injectTo: "head"
+				}];
+			}
+		});
+		vite.onAlephaLoaded(async (appAlepha, server) => {
+			try {
+				const mod = await server.ssrLoadModule("@alepha/devtools");
+				appAlepha.with(mod.AlephaDevtools);
+			} catch (err) {
+				throw new AlephaError("Failed to load @alepha/devtools. Make sure the package is installed", { cause: err });
+			}
+		});
+	}
+});
+//#endregion
+export { AlephaCliDevtoolsPlugin, devtoolsOptions };
+
+//# sourceMappingURL=index.js.map

package/dist/cli/devtools/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cli/devtools/atoms/devtoolsOptions.ts","../../../src/cli/devtools/index.ts"],"sourcesContent":["import { $atom, type Static, t } from \"alepha\";\n\n/**\n * Devtools configuration atom.\n *\n * Filled from the `devtools` section of `alepha.config.ts`.\n */\nexport const devtoolsOptions = $atom({\n  name: \"alepha.cli.devtools.options\",\n  description: \"Devtools plugin configuration\",\n  schema: t.optional(\n    t.object({\n      /**\n       * Hide the floating devtools button in the browser.\n       *\n       * The devtools UI is still accessible at `/__devtools/`.\n       */\n      hideButton: t.optional(t.boolean({ default: false })),\n    }),\n  ),\n});\n\n/**\n * Type for devtools options.\n */\nexport type DevtoolsOptions = Static<typeof devtoolsOptions.schema>;\n","import { readFile } from \"node:fs/promises\";\nimport { createRequire } from \"node:module\";\nimport { dirname, join } from \"node:path\";\nimport { $module, AlephaError } from \"alepha\";\nimport { ViteDevServerProvider } from \"alepha/cli\";\nimport { devtoolsOptions } from \"./atoms/devtoolsOptions.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nconst DEVTOOLS_OVERLAY_SCRIPT = `\n(function () {\n  if (window.__alepha_devtools_injected) return;\n  window.__alepha_devtools_injected = true;\n\n  const STORAGE_KEY = \"alepha-devtools-open\";\n\n  // Button\n  const btn = document.createElement(\"button\");\n  btn.id = \"alepha-devtools-btn\";\n  btn.innerHTML = \\`<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"/><path d=\"m14.7 6.3-5.4 5.4a2.1 2.1 0 1 0 3 3l5.4-5.4a2.1 2.1 0 1 0-3-3z\"/><path d=\"m8 16 1.5-1.5\"/></svg>\\`;\n  Object.assign(btn.style, {\n    position: \"fixed\", bottom: \"16px\", right: \"16px\", zIndex: \"99998\",\n    width: \"40px\", height: \"40px\", borderRadius: \"50%\",\n    background: \"#1a1a2e\", color: \"#a0a0c0\", border: \"1px solid #2a2a4a\",\n    cursor: \"pointer\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n    boxShadow: \"0 2px 8px rgba(0,0,0,0.3)\", transition: \"all 0.2s\",\n    padding: \"0\", fontSize: \"0\",\n  });\n  btn.addEventListener(\"mouseenter\", () => {\n    btn.style.background = \"#2a2a4e\";\n    btn.style.color = \"#c0c0e0\";\n    btn.style.transform = \"scale(1.1)\";\n  });\n  btn.addEventListener(\"mouseleave\", () => {\n    btn.style.background = \"#1a1a2e\";\n    btn.style.color = \"#a0a0c0\";\n    btn.style.transform = \"scale(1)\";\n  });\n\n  // Overlay\n  const overlay = document.createElement(\"div\");\n  overlay.id = \"alepha-devtools-overlay\";\n  Object.assign(overlay.style, {\n    position: \"fixed\", inset: \"0\", zIndex: \"99999\",\n    background: \"rgba(0,0,0,0.6)\", backdropFilter: \"blur(2px)\",\n    display: \"none\", alignItems: \"center\", justifyContent: \"center\",\n  });\n\n  // Panel\n  const panel = document.createElement(\"div\");\n  Object.assign(panel.style, {\n    width: \"90vw\", height: \"85vh\", maxWidth: \"1400px\",\n    borderRadius: \"12px\", overflow: \"hidden\",\n    boxShadow: \"0 8px 32px rgba(0,0,0,0.5)\",\n    border: \"1px solid #2a2a4a\",\n  });\n\n  const iframe = document.createElement(\"iframe\");\n  iframe.style.cssText = \"width:100%;height:100%;border:none;\";\n\n  panel.appendChild(iframe);\n  overlay.appendChild(panel);\n  document.body.appendChild(btn);\n  document.body.appendChild(overlay);\n\n  function open() {\n    if (!iframe.src) iframe.src = \"/__devtools/\";\n    overlay.style.display = \"flex\";\n    btn.style.display = \"none\";\n    sessionStorage.setItem(STORAGE_KEY, \"1\");\n  }\n\n  function close() {\n    overlay.style.display = \"none\";\n    btn.style.display = \"flex\";\n    sessionStorage.removeItem(STORAGE_KEY);\n  }\n\n  btn.addEventListener(\"click\", open);\n  overlay.addEventListener(\"click\", (e) => {\n    if (e.target === overlay) close();\n  });\n  document.addEventListener(\"keydown\", (e) => {\n    if (e.key === \"Escape\" && overlay.style.display === \"flex\") close();\n  });\n\n  // Restore state after HMR\n  if (sessionStorage.getItem(STORAGE_KEY)) open();\n})();\n`;\n\n/**\n * CLI plugin that integrates @alepha/devtools into the Vite dev server.\n *\n * This module is intentionally lightweight — it does NOT statically import\n * `@alepha/devtools` (which pulls in `alepha/react` and `.tsx` files).\n * Instead, it lazy-loads devtools via Vite's SSR module loader at runtime.\n *\n * Usage in `alepha.config.ts`:\n * ```ts\n * import { AlephaCliDevtoolsPlugin } from \"alepha/devtools/plugin\";\n *\n * export default defineConfig({\n *   services: [AlephaCliDevtoolsPlugin],\n * });\n * ```\n *\n * @module alepha.devtools.plugin\n */\nexport const AlephaCliDevtoolsPlugin = $module({\n  name: \"alepha.cli.plugins.devtools\",\n  atoms: [devtoolsOptions],\n  register: (alepha) => {\n    const vite = alepha.inject(ViteDevServerProvider) as ViteDevServerProvider;\n\n    const require = createRequire(import.meta.url);\n    const pkgPath = require.resolve(\"@alepha/devtools/package.json\");\n    const assetsPath = join(dirname(pkgPath), \"assets/ui\");\n\n    process.env.VITE_ALEPHA_DEVTOOLS = \"true\";\n\n    vite.addVitePlugin({\n      name: \"alepha-devtools\",\n      configureServer: (server) => {\n        // Reload endpoint\n        server.middlewares.use((req, res, next) => {\n          if (req.url !== \"/__devtools/api/reload\" || req.method !== \"POST\") {\n            return next();\n          }\n\n          vite.reload();\n          res.writeHead(200, { \"content-type\": \"application/json\" });\n          res.end(JSON.stringify({ ok: true }));\n        });\n\n        // Serve devtools HTML\n        server.middlewares.use(async (req, res, next) => {\n          const url = req.url || \"/\";\n\n          if (\n            !url.startsWith(\"/__devtools\") ||\n            !req.headers.accept?.includes(\"text/html\")\n          ) {\n            return next();\n          }\n\n          const indexPath = join(assetsPath, \"index.html\");\n\n          try {\n            let html = await readFile(indexPath, \"utf-8\");\n            html = html.replace(\n              \"<head>\",\n              `<head><script type=\"module\" src=\"/@vite/client\"></script>`,\n            );\n\n            res.writeHead(200, { \"content-type\": \"text/html\" });\n            res.end(html);\n          } catch {\n            next();\n          }\n        });\n      },\n      transformIndexHtml: () => {\n        const options = alepha.store.get(devtoolsOptions);\n        if (options?.hideButton) return [];\n\n        return [\n          {\n            tag: \"script\",\n            attrs: { type: \"module\" },\n            children: DEVTOOLS_OVERLAY_SCRIPT,\n            injectTo: \"head\",\n          },\n        ];\n      },\n    });\n\n    vite.onAlephaLoaded(async (appAlepha, server) => {\n      try {\n        const mod = await server.ssrLoadModule(\"@alepha/devtools\");\n        appAlepha.with(mod.AlephaDevtools);\n      } catch (err) {\n        throw new AlephaError(\n          \"Failed to load @alepha/devtools. Make sure the package is installed\",\n          { cause: err },\n        );\n      }\n    });\n  },\n});\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport * from \"./atoms/devtoolsOptions.ts\";\n"],"mappings":";;;;;;;;;;;AAOA,MAAa,kBAAkB,MAAM;CACnC,MAAM;CACN,aAAa;CACb,QAAQ,EAAE,SACR,EAAE,OAAO,EAMP,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,OAAO,CAAC,CAAC,EACtD,CAAC,CACH;CACF,CAAC;;;ACXF,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGhC,MAAa,0BAA0B,QAAQ;CAC7C,MAAM;CACN,OAAO,CAAC,gBAAgB;CACxB,WAAW,WAAW;EACpB,MAAM,OAAO,OAAO,OAAO,sBAAsB;EAIjD,MAAM,aAAa,KAAK,QAFR,cAAc,OAAO,KAAK,IAAI,CACtB,QAAQ,gCAAgC,CACxB,EAAE,YAAY;AAEtD,UAAQ,IAAI,uBAAuB;AAEnC,OAAK,cAAc;GACjB,MAAM;GACN,kBAAkB,WAAW;AAE3B,WAAO,YAAY,KAAK,KAAK,KAAK,SAAS;AACzC,SAAI,IAAI,QAAQ,4BAA4B,IAAI,WAAW,OACzD,QAAO,MAAM;AAGf,UAAK,QAAQ;AACb,SAAI,UAAU,KAAK,EAAE,gBAAgB,oBAAoB,CAAC;AAC1D,SAAI,IAAI,KAAK,UAAU,EAAE,IAAI,MAAM,CAAC,CAAC;MACrC;AAGF,WAAO,YAAY,IAAI,OAAO,KAAK,KAAK,SAAS;AAG/C,SACE,EAHU,IAAI,OAAO,KAGhB,WAAW,cAAc,IAC9B,CAAC,IAAI,QAAQ,QAAQ,SAAS,YAAY,CAE1C,QAAO,MAAM;KAGf,MAAM,YAAY,KAAK,YAAY,aAAa;AAEhD,SAAI;MACF,IAAI,OAAO,MAAM,SAAS,WAAW,QAAQ;AAC7C,aAAO,KAAK,QACV,UACA,6DACD;AAED,UAAI,UAAU,KAAK,EAAE,gBAAgB,aAAa,CAAC;AACnD,UAAI,IAAI,KAAK;aACP;AACN,YAAM;;MAER;;GAEJ,0BAA0B;AAExB,QADgB,OAAO,MAAM,IAAI,gBAAgB,EACpC,WAAY,QAAO,EAAE;AAElC,WAAO,CACL;KACE,KAAK;KACL,OAAO,EAAE,MAAM,UAAU;KACzB,UAAU;KACV,UAAU;KACX,CACF;;GAEJ,CAAC;AAEF,OAAK,eAAe,OAAO,WAAW,WAAW;AAC/C,OAAI;IACF,MAAM,MAAM,MAAM,OAAO,cAAc,mBAAmB;AAC1D,cAAU,KAAK,IAAI,eAAe;YAC3B,KAAK;AACZ,UAAM,IAAI,YACR,uEACA,EAAE,OAAO,KAAK,CACf;;IAEH;;CAEL,CAAC"}