raktajs 0.1.2 → 0.1.3

package/dist/index.js

@@ -1615,8 +1615,8 @@ function mergeConfig(baseConfig, overrideConfig) {
   };
 }
 // src/forge/build.ts
-import { mkdirSync as mkdirSync2 } from "fs";
-import { join as join5, resolve as resolve2 } from "path";
+import { existsSync as existsSync6, mkdirSync as mkdirSync3 } from "fs";
+import { join as join6, resolve as resolve2 } from "path";
 
 // src/router/manifest.ts
 import { existsSync as existsSync4, readFileSync, writeFileSync as writeFileSync2 } from "fs";
@@ -1776,14 +1776,219 @@ function printManifest(manifest) {
 `);
 }
 
+// src/forge/clientEntry.ts
+import { existsSync as existsSync5, mkdirSync as mkdirSync2, writeFileSync as writeFileSync3 } from "fs";
+import { dirname, join as join5, relative as relative3 } from "path";
+function toModuleSpecifier(fromFile, targetFile) {
+  const relativePath = relative3(dirname(fromFile), targetFile).replace(/\\/g, "/");
+  if (relativePath.startsWith(".")) {
+    return relativePath;
+  }
+  return `./${relativePath}`;
+}
+function toCssImportSpecifier(entryPath, projectRoot) {
+  const candidates = [
+    join5(projectRoot, "styles", "globals.css"),
+    join5(projectRoot, "styles", "globals.scss"),
+    join5(projectRoot, "styles", "globals.sass")
+  ];
+  const stylePath = candidates.find((candidate) => existsSync5(candidate));
+  if (!stylePath) {
+    return null;
+  }
+  return toModuleSpecifier(entryPath, stylePath);
+}
+function getPageRoutes(manifest) {
+  return manifest.routes.filter((route) => route.kind === "page");
+}
+function buildRouteImports(entryPath, appDir, pageRoutes) {
+  const routeEntries = pageRoutes.map((route) => {
+    const pagePath = join5(appDir, route.filePath);
+    return `  ${JSON.stringify(route.urlPattern)}: () => import("${toModuleSpecifier(entryPath, pagePath)}"),`;
+  }).join(`
+`);
+  return `const routeModules = {
+${routeEntries}
+} as const;`;
+}
+function buildRouteTable(pageRoutes) {
+  const routeEntries = pageRoutes.map((route) => `  ${JSON.stringify(route.urlPattern)}: routeModules[${JSON.stringify(route.urlPattern)}],`).join(`
+`);
+  return `const routes = {
+${routeEntries}
+} as const;`;
+}
+function findExistingModule(basePathWithoutExtension) {
+  const candidates = [".tsx", ".ts", ".jsx", ".js"].map((extension) => `${basePathWithoutExtension}${extension}`);
+  return candidates.find((candidate) => existsSync5(candidate));
+}
+function buildStarterGlobalLoaders(entryPath, appDir) {
+  const mascotPath = findExistingModule(join5(appDir, "components", "raktaShrimpMascot"));
+  const gamePath = findExistingModule(join5(appDir, "components", "shrimpRunGame"));
+  const loaders = [];
+  if (mascotPath !== undefined) {
+    loaders.push(`  const mascotModule = await import("${toModuleSpecifier(entryPath, mascotPath)}");
+  (globalThis as typeof globalThis & Record<string, unknown>).RaktaShrimpMascot = mascotModule.default;`);
+  }
+  if (gamePath !== undefined) {
+    loaders.push(`  const gameModule = await import("${toModuleSpecifier(entryPath, gamePath)}");
+  (globalThis as typeof globalThis & Record<string, unknown>).ShrimpRunGame = gameModule.default;`);
+  }
+  if (loaders.length === 0) {
+    return `async function loadRaktaGlobals(): Promise<void> {
+  return;
+}`;
+  }
+  return `async function loadRaktaGlobals(): Promise<void> {
+${loaders.join(`
+
+`)}
+}`;
+}
+function buildClientEntrySource(options, entryPath) {
+  const pageRoutes = getPageRoutes(options.manifest);
+  const routeModules = buildRouteImports(entryPath, options.appDir, pageRoutes);
+  const routeTable = buildRouteTable(pageRoutes);
+  const cssImportSpecifier = toCssImportSpecifier(entryPath, options.projectRoot);
+  const cssImport = cssImportSpecifier !== null ? `import "${cssImportSpecifier}";
+` : "";
+  const starterGlobalLoaders = buildStarterGlobalLoaders(entryPath, options.appDir);
+  return `import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import * as ReactHooks from "react";
+${cssImport}
+(globalThis as typeof globalThis & Record<string, unknown>).useCallback = ReactHooks.useCallback;
+(globalThis as typeof globalThis & Record<string, unknown>).useEffect = ReactHooks.useEffect;
+(globalThis as typeof globalThis & Record<string, unknown>).useRef = ReactHooks.useRef;
+(globalThis as typeof globalThis & Record<string, unknown>).useState = ReactHooks.useState;
+
+${starterGlobalLoaders}
+
+await loadRaktaGlobals();
+
+${routeModules}
+
+${routeTable}
+
+type RoutePath = keyof typeof routes;
+type PageModule = { default: React.ComponentType };
+
+function normalizePathname(pathname: string): string {
+  if (pathname.length > 1 && pathname.endsWith("/")) {
+    return pathname.slice(0, -1);
+  }
+
+  return pathname;
+}
+
+function resolveRouteLoader(pathname: string): () => Promise<PageModule> {
+  const normalizedPathname = normalizePathname(pathname) as RoutePath;
+
+  return routes[normalizedPathname] ?? routes["/"];
+}
+
+function navigate(to: string): void {
+  window.history.pushState({ source: "rakta-click", to }, "", to);
+  window.dispatchEvent(new PopStateEvent("popstate", { state: { to } }));
+}
+
+function App(): React.ReactElement {
+  const [pathname, setPathname] = useState(() => window.location.pathname);
+  const [Page, setPage] = useState<React.ComponentType | null>(null);
+
+  useEffect(() => {
+    function handlePopState(): void {
+      setPathname(window.location.pathname);
+    }
+
+    function handleClick(event: MouseEvent): void {
+      const target = event.target;
+
+      if (!(target instanceof Element)) {
+        return;
+      }
+
+      const clickElement = target.closest("click");
+
+      if (!clickElement) {
+        return;
+      }
+
+      const to = clickElement.getAttribute("to");
+
+      if (!to || to.startsWith("http://") || to.startsWith("https://")) {
+        return;
+      }
+
+      event.preventDefault();
+      navigate(to);
+      setPathname(window.location.pathname);
+    }
+
+    window.addEventListener("popstate", handlePopState);
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+
+  useEffect(() => {
+    let isCurrent = true;
+
+    resolveRouteLoader(pathname)().then((pageModule) => {
+      if (isCurrent) {
+        setPage(() => pageModule.default);
+      }
+    });
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [pathname]);
+
+  if (!Page) {
+    return React.createElement("main", {
+      style: {
+        minHeight: "100vh",
+        display: "grid",
+        placeItems: "center",
+        background: "#050505",
+        color: "#f8fafc",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+      },
+    }, "Loading Rakta.js...");
+  }
+
+  return React.createElement(Page);
+}
+
+const rootElement = document.getElementById("rakta-root");
+
+if (!rootElement) {
+  throw new Error("Rakta.js root element #rakta-root was not found.");
+}
+
+createRoot(rootElement).render(React.createElement(App));
+`;
+}
+function writeClientEntry(options) {
+  mkdirSync2(options.workDir, { recursive: true });
+  const entryPath = join5(options.workDir, "client-entry.tsx");
+  const entrySource = buildClientEntrySource(options, entryPath);
+  writeFileSync3(entryPath, entrySource, "utf-8");
+  return entryPath;
+}
+
 // src/forge/build.ts
 async function buildProject(options) {
   const startMs = Date.now();
   const artifacts = [];
   const errors = [];
-  mkdirSync2(resolve2(options.outDir), { recursive: true });
+  mkdirSync3(resolve2(options.outDir), { recursive: true });
   const manifest = generateManifest(options.appDir);
-  const manifestPath = join5(options.outDir, "route-manifest.json");
+  const manifestPath = join6(options.outDir, "route-manifest.json");
   writeManifest(manifest, manifestPath);
   const manifestContent = JSON.stringify(manifest);
   artifacts.push({
@@ -1791,15 +1996,21 @@ async function buildProject(options) {
     sizeBytes: new TextEncoder().encode(manifestContent).byteLength,
     kind: "manifest"
   });
+  const entryPoint = existsSync6(options.entryPoint) ? options.entryPoint : writeClientEntry({
+    projectRoot: options.projectRoot,
+    appDir: options.appDir,
+    workDir: join6(options.projectRoot, ".rakta"),
+    manifest
+  });
   const buildResult = await Bun.build({
-    entrypoints: [options.entryPoint],
+    entrypoints: [entryPoint],
     outdir: options.outDir,
     target: options.target,
     minify: options.minify,
     sourcemap: options.sourcemap ? "external" : "none",
     splitting: options.splitting,
     naming: {
-      entry: "[name].[ext]",
+      entry: "app.[ext]",
       chunk: "chunks/[name]-[hash].[ext]",
       asset: "assets/[name]-[hash].[ext]"
     }
@@ -1832,8 +2043,8 @@ async function buildProject(options) {
   };
 }
 // src/forge/devServer.ts
-import { existsSync as existsSync5, readFileSync as readFileSync2, statSync as statSync2 } from "fs";
-import { join as join6 } from "path";
+import { existsSync as existsSync7, readFileSync as readFileSync2, statSync as statSync2 } from "fs";
+import { join as join7 } from "path";
 
 // src/render/modes.ts
 var RENDER_MODE_DESCRIPTORS = {
@@ -2091,18 +2302,55 @@ function resolveDevPort(port) {
   return port > 0 ? port : DEFAULT_DEV_PORT;
 }
 function isReadableFile(filePath) {
-  return existsSync5(filePath) && statSync2(filePath).isFile();
+  return existsSync7(filePath) && statSync2(filePath).isFile();
+}
+async function buildDevClientBundle(options, manifest) {
+  const workDir = join7(options.projectRoot, ".rakta");
+  const clientOutDir = join7(workDir, "dev");
+  const clientEntry = writeClientEntry({
+    projectRoot: options.projectRoot,
+    appDir: options.appDir,
+    workDir,
+    manifest
+  });
+  const buildResult = await Bun.build({
+    entrypoints: [clientEntry],
+    outdir: clientOutDir,
+    target: "browser",
+    sourcemap: "external",
+    naming: {
+      entry: "app.[ext]",
+      chunk: "chunks/[name]-[hash].[ext]",
+      asset: "assets/[name]-[hash].[ext]"
+    }
+  });
+  if (!buildResult.success) {
+    const buildErrors = buildResult.logs.map((buildLog) => buildLog.message).join(`
+`);
+    throw new Error(`Failed to build Rakta.js client bundle.
+${buildErrors}`);
+  }
+  return clientOutDir;
 }
-function startDevServer(options) {
+async function startDevServer(options) {
   const manifest = generateManifest(options.appDir);
   const resolvedPort = resolveDevPort(options.port);
+  const clientOutDir = await buildDevClientBundle(options, manifest);
   const server = Bun.serve({
     port: resolvedPort,
     hostname: options.host,
     async fetch(request) {
       const url = new URL(request.url);
       const { pathname } = url;
-      const publicPath = join6(options.publicDir, pathname);
+      if (clientOutDir.length > 0) {
+        const clientBundlePath = join7(clientOutDir, pathname);
+        if (isReadableFile(clientBundlePath)) {
+          return new Response(readFileSync2(clientBundlePath), {
+            headers: { "Content-Type": resolveMime(clientBundlePath) }
+          });
+        }
+      }
+      const publicPath = join7(options.publicDir, pathname);
       if (isReadableFile(publicPath)) {
         return new Response(readFileSync2(publicPath), {
           headers: { "Content-Type": resolveMime(pathname) }
@@ -2110,7 +2358,7 @@ function startDevServer(options) {
       }
       const apiMatch = matchRoute(pathname, manifest.routes.filter((route) => route.kind === "api"));
       if (apiMatch) {
-        const modulePath = join6(options.appDir, apiMatch.entry.filePath);
+        const modulePath = join7(options.appDir, apiMatch.entry.filePath);
         const routeModule = await import(modulePath);
         const method = request.method.toUpperCase();
         const handler = routeModule[method];
@@ -2138,7 +2386,7 @@ function startDevServer(options) {
       }, {
         appName: options.appName,
         scriptPath: "/app.js",
-        cssPath: "/globals.css",
+        cssPath: "/app.css",
         lang: "en"
       });
       if (result.kind === "failure") {
@@ -2159,8 +2407,8 @@ function startDevServer(options) {
   };
 }
 // src/forge/inspect.ts
-import { existsSync as existsSync6, readdirSync as readdirSync3, statSync as statSync3 } from "fs";
-import { join as join7 } from "path";
+import { existsSync as existsSync8, readdirSync as readdirSync3, statSync as statSync3 } from "fs";
+import { join as join8 } from "path";
 function detectArtifactKind(filename) {
   if (filename === "route-manifest.json")
     return "manifest";
@@ -2178,13 +2426,13 @@ function formatBytes(bytes) {
   return `${(bytes / 1048576).toFixed(2)} MB`;
 }
 function scanDirectory2(dirPath) {
-  if (!existsSync6(dirPath))
+  if (!existsSync8(dirPath))
     return [];
   const collected = [];
   function walk(current) {
     const entries = readdirSync3(current, { withFileTypes: true });
     for (const entry of entries) {
-      const full = join7(current, entry.name);
+      const full = join8(current, entry.name);
       if (entry.isDirectory()) {
         walk(full);
       } else if (entry.isFile()) {
@@ -2201,7 +2449,7 @@ function scanDirectory2(dirPath) {
 }
 function inspectBuild(options) {
   const artifacts = scanDirectory2(options.outDir);
-  const manifestPath = join7(options.outDir, "route-manifest.json");
+  const manifestPath = join8(options.outDir, "route-manifest.json");
   const manifest = readManifest(manifestPath);
   const emptyManifest = {
     version: "1",
@@ -3605,8 +3853,8 @@ function createRaktaStore(creator) {
   return Object.assign(useStore, storeApi);
 }
 // src/tide/adapter.ts
-import { existsSync as existsSync7, readFileSync as readFileSync3, statSync as statSync4 } from "fs";
-import { join as join8 } from "path";
+import { existsSync as existsSync9, readFileSync as readFileSync3, statSync as statSync4 } from "fs";
+import { join as join9 } from "path";
 
 // src/tide/runtime.ts
 function createRuntimeContext(request, url, params, resolvedMode) {
@@ -3678,7 +3926,7 @@ function normalizeStaticPath(pathname) {
   return "index.html";
 }
 function isReadableFile2(filePath) {
-  return existsSync7(filePath) && statSync4(filePath).isFile();
+  return existsSync9(filePath) && statSync4(filePath).isFile();
 }
 function isApiRouteExports(value) {
   if (typeof value !== "object" || value === null) {
@@ -3719,7 +3967,7 @@ function createBunAdapter(adapterConfig, renderConfig) {
     const { pathname } = url;
     const staticPathname = normalizeStaticPath(pathname);
     for (const searchDirectory of searchDirectories) {
-      const filePath = join8(searchDirectory, staticPathname);
+      const filePath = join9(searchDirectory, staticPathname);
       if (isReadableFile2(filePath)) {
         return new Response(readFileSync3(filePath), {
           headers: {
@@ -3732,7 +3980,7 @@ function createBunAdapter(adapterConfig, renderConfig) {
     const apiRoutes = manifest.routes.filter((route) => route.kind === "api");
     const apiMatch = matchRoute(pathname, apiRoutes);
     if (apiMatch) {
-      const modulePath = join8(adapterConfig.appDir, apiMatch.entry.filePath);
+      const modulePath = join9(adapterConfig.appDir, apiMatch.entry.filePath);
       const routeModule = await import(modulePath);
       if (!isApiRouteExports(routeModule)) {
         return new Response("Invalid API route module", {
@@ -3759,7 +4007,7 @@ function createBunAdapter(adapterConfig, renderConfig) {
     }, {
       appName: adapterConfig.appName,
       scriptPath: "/app.js",
-      cssPath: "/globals.css",
+      cssPath: "/app.css",
       lang: "en"
     });
     if (renderResult.kind === "failure") {
@@ -3875,4 +4123,4 @@ export {
   ArrayType
 };
 
-//# debugId=64277F0C4350509364756E2164756E21
+//# debugId=5C94719A0BDF167E64756E2164756E21