@chr33s/solarflare 0.0.2

package/src/build.bundle-client.ts

@@ -0,0 +1,404 @@
+import { createHash } from "node:crypto";
+import { readFile, unlink, mkdir, writeFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import ts from "typescript";
+import { rolldown } from "rolldown";
+import { replacePlugin } from "rolldown/plugins";
+import { transform } from "lightningcss";
+import { createProgram, getDefaultExportInfo } from "./ast.ts";
+import { exists } from "./fs.ts";
+import { assetUrlPrefixPlugin, type BuildArgs, moduleTypes } from "./build.bundle.ts";
+import { parsePath } from "./paths.ts";
+import { generateClientScript } from "./console-forward.ts";
+import { createScanner } from "./build.scan.ts";
+import { generateChunkedClientEntry, type ComponentMeta } from "./build.hmr-entry.ts";
+import type { RoutesManifest, ChunkManifest } from "./manifest.ts";
+
+export interface BuildClientOptions {
+  args: BuildArgs;
+  rootDir: string;
+  appDir: string;
+  distDir: string;
+  distClient: string;
+  publicDir: string;
+  chunksPath: string;
+}
+
+async function remove(path: string) {
+  try {
+    await unlink(path);
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code !== "ENOENT") {
+      throw err;
+    }
+  }
+}
+
+export function hash(content: string) {
+  return createHash("sha256").update(content).digest("hex").slice(0, 8);
+}
+
+export function normalizeAssetPath(path: string) {
+  return path.replace(/\//g, ".");
+}
+
+export function getChunkName(file: string, contentHash?: string) {
+  const base = file
+    .replace(/\.client\.tsx?$/, "")
+    .replace(/\//g, ".")
+    .replace(/\$/g, "")
+    .replace(/^index$/, "index");
+
+  return contentHash ? `${base}-${contentHash}.js` : `${base}.js`;
+}
+
+function extractPropsFromProgram(program: ts.Program, filePath: string) {
+  const checker = program.getTypeChecker();
+  const sourceFile = program.getSourceFile(filePath);
+  if (!sourceFile) return [];
+
+  const exportInfo = getDefaultExportInfo(checker, sourceFile);
+  if (!exportInfo || exportInfo.signatures.length === 0) return [];
+
+  const firstParam = exportInfo.signatures[0].getParameters()[0];
+  if (!firstParam) return [];
+
+  const paramType = checker.getTypeOfSymbolAtLocation(firstParam, sourceFile);
+  const properties = paramType.getProperties();
+
+  return properties.map((p) => p.getName());
+}
+
+async function getComponentMeta(program: ts.Program, appDir: string, file: string) {
+  const filePath = join(appDir, file);
+  const props = extractPropsFromProgram(program, filePath);
+  const parsed = parsePath(file);
+
+  const content = await readFile(filePath, "utf-8");
+  const contentHash = hash(content);
+  const chunk = getChunkName(file, contentHash);
+
+  return { file, tag: parsed.tag, props, parsed, chunk, hash: contentHash };
+}
+
+export async function buildClient(options: BuildClientOptions) {
+  const { args, rootDir, appDir, distDir, distClient, publicDir, chunksPath } = options;
+  const distClientAssets = join(distClient, "assets");
+  const scanner = createScanner({ rootDir, appDir });
+
+  const cssAssetCache = new Map<string, string>();
+  const cssOutputsByBase = new Map<string, string>();
+
+  async function emitCssAsset(cssSourcePath: string) {
+    if (!(await exists(cssSourcePath))) return null;
+
+    const cached = cssAssetCache.get(cssSourcePath);
+    if (cached) return cached;
+
+    const cssRelativePath = cssSourcePath.replace(appDir + "/", "");
+    const cssContent = transform({
+      code: Buffer.from(await readFile(cssSourcePath, "utf-8")),
+      filename: cssSourcePath,
+      minify: args.production,
+    }).code.toString();
+
+    const cssHash = hash(cssContent);
+    const cssBase = normalizeAssetPath(cssRelativePath.replace(/\.css$/, ""));
+    const cssOutputName = `${cssBase}-${cssHash}.css`;
+
+    cssOutputsByBase.set(cssBase, cssOutputName);
+
+    await mkdir(distClientAssets, { recursive: true });
+    const destPath = join(distClientAssets, cssOutputName);
+    await writeFile(destPath, cssContent);
+
+    const outputPath = `/assets/${cssOutputName}`;
+    cssAssetCache.set(cssSourcePath, outputPath);
+    return outputPath;
+  }
+
+  async function resolveCssOutputs(cssImports: string[], baseDir: string) {
+    if (cssImports.length === 0) return [];
+
+    const cssOutputPaths: string[] = [];
+
+    for (const cssImport of cssImports) {
+      const cssSourcePath = cssImport.startsWith("./")
+        ? join(appDir, cssImport.replace("./", ""))
+        : join(appDir, baseDir, cssImport);
+
+      const outputPath = await emitCssAsset(cssSourcePath);
+      if (outputPath && !cssOutputPaths.includes(outputPath)) {
+        cssOutputPaths.push(outputPath);
+      }
+    }
+
+    return cssOutputPaths;
+  }
+
+  console.log("🔍 Scanning for client components...");
+  const clientFiles = await scanner.findClientComponents();
+  console.log(`   Found ${clientFiles.length} client component(s)`);
+
+  const filePaths = clientFiles.map((f) => join(appDir, f));
+  const program = createProgram(filePaths);
+
+  const metas = await Promise.all(
+    clientFiles.map((file) => getComponentMeta(program, appDir, file)),
+  );
+
+  const layoutFiles = await scanner.findLayouts();
+  const layoutCssMap: Record<string, string[]> = {};
+  const componentCssMap: Record<string, string[]> = {};
+
+  for (const layoutFile of layoutFiles) {
+    const layoutPath = join(appDir, layoutFile);
+    const allCssImports = await scanner.extractAllCssImports(layoutPath);
+
+    if (allCssImports.length > 0) {
+      const layoutDir = layoutFile.split("/").slice(0, -1).join("/");
+      const cssOutputPaths = await resolveCssOutputs(allCssImports, layoutDir);
+
+      if (cssOutputPaths.length > 0) {
+        const layoutPattern = layoutDir ? `/${layoutDir}` : "/";
+        if (!layoutCssMap[layoutPattern]) {
+          layoutCssMap[layoutPattern] = [];
+        }
+        for (const path of cssOutputPaths) {
+          if (!layoutCssMap[layoutPattern].includes(path)) {
+            layoutCssMap[layoutPattern].push(path);
+          }
+        }
+      }
+    }
+  }
+
+  if (await exists(publicDir)) {
+    const publicFiles = await scanner.scanFiles("**/*", publicDir);
+    for (const file of publicFiles) {
+      const src = join(publicDir, file);
+      const dest = join(distClient, file);
+
+      const destDir = dirname(dest);
+      await mkdir(destDir, { recursive: true });
+
+      const content = await readFile(src, "utf-8");
+      await writeFile(dest, content);
+    }
+  }
+
+  if (!args.production) {
+    await mkdir(distClientAssets, { recursive: true });
+    const consoleScript = generateClientScript();
+    const consoleScriptPath = join(distClientAssets, "console-forward.js");
+    await writeFile(consoleScriptPath, consoleScript);
+    console.log("   Generated console-forward.js (dev mode)");
+  }
+
+  const inlineRoutesManifest: RoutesManifest = {
+    routes: metas.map((meta) => ({
+      pattern: meta.parsed.pattern,
+      tag: meta.tag,
+      chunk: `/assets/${meta.chunk}`,
+      styles: undefined,
+      type: "client" as const,
+      params: meta.parsed.params,
+    })),
+  };
+
+  const entryPaths: string[] = [];
+  const entryToMeta: Record<string, ComponentMeta & { parsed: ReturnType<typeof parsePath> }> = {};
+
+  await mkdir(distDir, { recursive: true });
+
+  for (const meta of metas) {
+    const componentPath = join(appDir, meta.file);
+    const componentCssImports = await scanner.extractAllCssImports(componentPath);
+
+    const componentDir = meta.file.split("/").slice(0, -1).join("/");
+    const componentCssOutputPaths = await resolveCssOutputs(componentCssImports, componentDir);
+
+    if (componentCssOutputPaths.length > 0) {
+      const existing = componentCssMap[meta.parsed.pattern] ?? [];
+      componentCssMap[meta.parsed.pattern] = [
+        ...existing,
+        ...componentCssOutputPaths.filter((path) => !existing.includes(path)),
+      ];
+    }
+
+    const cssFiles: string[] = [];
+    for (const cssImport of componentCssImports) {
+      const cleanPath = cssImport.replace(/^\.\//, "");
+      cssFiles.push(`../src/${cleanPath}`);
+    }
+
+    const entryContent = generateChunkedClientEntry(meta, inlineRoutesManifest, cssFiles, args);
+    const entryPath = join(distDir, `.entry-${meta.chunk.replace(".js", "")}.generated.tsx`);
+    await writeFile(entryPath, entryContent);
+    entryPaths.push(entryPath);
+    entryToMeta[entryPath] = meta;
+  }
+
+  console.log("📦 Building client chunks...");
+
+  await mkdir(distClient, { recursive: true });
+
+  const input: Record<string, string> = {};
+  for (const entryPath of entryPaths) {
+    const meta = entryToMeta[entryPath];
+    input[meta.chunk.replace(/\.js$/, "")] = entryPath;
+  }
+
+  const packageImports = await scanner.getPackageImports();
+
+  const bundle = await rolldown({
+    input,
+    platform: "browser",
+    tsconfig: true,
+    moduleTypes,
+    plugins: [
+      replacePlugin({
+        "globalThis.__SF_DEV__": JSON.stringify(!args.production),
+      }),
+      {
+        name: "raw-css-loader",
+        resolveId(source: string, importer: string | undefined) {
+          if (source.endsWith("?raw") && source.includes(".css")) {
+            const realPath = source.replace(/\?raw$/, "");
+            if (importer) {
+              const importerDir = importer.split("/").slice(0, -1).join("/");
+              return {
+                id: join(importerDir, realPath) + "?raw",
+                external: false,
+              };
+            }
+            return { id: realPath + "?raw", external: false };
+          }
+          return null;
+        },
+        async load(id: string) {
+          if (id.endsWith("?raw")) {
+            const realPath = id.replace(/\?raw$/, "");
+            try {
+              const content = await readFile(realPath, "utf-8");
+              return {
+                code: /* tsx */ `export default ${JSON.stringify(content)};`,
+                moduleType: "js",
+              };
+            } catch {
+              console.warn(`[raw-css-loader] Could not load: ${realPath}`);
+              return { code: `export default "";`, moduleType: "js" };
+            }
+          }
+          return null;
+        },
+      },
+      assetUrlPrefixPlugin,
+    ],
+    resolve: {
+      alias: packageImports,
+    },
+    transform: {
+      target: "es2020",
+      jsx: {
+        runtime: "automatic",
+        development: !args.production,
+      },
+    },
+  });
+
+  await bundle.write({
+    dir: distClientAssets,
+    format: "esm",
+    entryFileNames: "[name].js",
+    minify: args.production,
+    chunkFileNames: "[name]-[hash].js",
+    assetFileNames: "[name]-[hash][extname]",
+    codeSplitting: {
+      minSize: 20000,
+      groups: [
+        {
+          name: "vendor",
+          test: /node_modules/,
+        },
+      ],
+    },
+    ...(args.sourcemap && { sourcemap: true }),
+  });
+
+  if (cssOutputsByBase.size > 0) {
+    const emittedCss = new Set(cssOutputsByBase.values());
+    const cssFiles = await scanner.scanFiles("**/*.css", distClientAssets);
+
+    for (const cssFile of cssFiles) {
+      const withoutExt = cssFile.replace(/\.css$/, "");
+      const lastDot = withoutExt.lastIndexOf(".");
+      if (lastDot === -1) continue;
+      const base = withoutExt.slice(0, lastDot);
+      const expected = cssOutputsByBase.get(base);
+      if (expected && cssFile !== expected && !emittedCss.has(cssFile)) {
+        await remove(join(distClientAssets, cssFile));
+      }
+    }
+  }
+
+  await bundle.close();
+
+  if (args.production) {
+    const cssFiles = await scanner.scanFiles("?(.)*.css", distClientAssets);
+    for (const cssFile of cssFiles) {
+      const cssPath = join(distClientAssets, cssFile);
+      let cssContent = await readFile(cssPath, "utf-8");
+      const result = transform({
+        code: Buffer.from(cssContent),
+        filename: cssPath,
+        minify: true,
+      });
+      const minified = result.code.toString();
+      if (minified !== cssContent) {
+        await writeFile(cssPath, minified);
+      }
+    }
+  }
+
+  const manifest: ChunkManifest = {
+    chunks: {},
+    tags: {},
+    styles: {},
+    devScripts: args.production ? undefined : ["/assets/console-forward.js"],
+  };
+
+  for (const meta of metas) {
+    manifest.chunks[meta.parsed.pattern] = `/assets/${meta.chunk}`;
+    manifest.tags[meta.tag] = `/assets/${meta.chunk}`;
+  }
+
+  for (const meta of metas) {
+    const routeStyles: string[] = [];
+
+    for (const [layoutPattern, cssFiles] of Object.entries(layoutCssMap)) {
+      if (layoutPattern === "/" || meta.parsed.pattern.startsWith(layoutPattern)) {
+        routeStyles.push(...cssFiles);
+      }
+    }
+
+    const componentStyles = componentCssMap[meta.parsed.pattern];
+    if (componentStyles?.length) {
+      routeStyles.push(...componentStyles);
+    }
+
+    if (routeStyles.length > 0) {
+      manifest.styles[meta.parsed.pattern] = [...new Set(routeStyles)];
+    }
+  }
+
+  await writeFile(chunksPath, JSON.stringify(manifest, null, 2));
+
+  console.log(`   Generated ${metas.length} chunk(s)`);
+
+  for (const entryPath of entryPaths) {
+    await remove(entryPath);
+  }
+
+  console.log("✅ Client build complete");
+}

package/src/build.bundle-server.ts

@@ -0,0 +1,131 @@
+import { mkdir, unlink, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { glob } from "node:fs/promises";
+import { rolldown } from "rolldown";
+import { createProgram } from "./ast.ts";
+import { assetUrlPrefixPlugin, type BuildArgs, moduleTypes } from "./build.bundle.ts";
+import { createScanner } from "./build.scan.ts";
+import { validateRoutes, generateRoutesTypeFile } from "./build.validate.ts";
+import { generateModulesFile } from "./build.emit-manifests.ts";
+
+export interface BuildServerOptions {
+  args: BuildArgs;
+  rootDir: string;
+  appDir: string;
+  distServer: string;
+  modulesPath: string;
+  chunksPath: string;
+  routesTypePath: string;
+}
+
+export async function buildServer(options: BuildServerOptions) {
+  const { args, rootDir, appDir, distServer, modulesPath, chunksPath, routesTypePath } = options;
+  const scanner = createScanner({ rootDir, appDir });
+
+  console.log("🔍 Scanning for route modules...");
+  const routeFiles = await scanner.findRouteModules();
+  const layoutFiles = await scanner.findLayouts();
+  const errorFile = await scanner.findErrorFile();
+  console.log(
+    `   Found ${routeFiles.length} route(s), ${layoutFiles.length} layout(s)${errorFile ? ", and error page" : ""}`,
+  );
+
+  console.log("🔎 Validating route types...");
+  const valid = await validateRoutes(routeFiles, layoutFiles, appDir);
+  if (!valid) {
+    console.error("❌ Route validation failed");
+    process.exit(1);
+  }
+
+  const routesTypeContent = generateRoutesTypeFile(routeFiles);
+  await writeFile(routesTypePath, routesTypeContent);
+  console.log("   Generated route types");
+
+  const allModuleFiles = [
+    ...routeFiles.map((f) => join(appDir, f)),
+    ...layoutFiles.map((f) => join(appDir, f)),
+    ...(errorFile ? [join(appDir, errorFile)] : []),
+  ];
+  const moduleProgram = createProgram(allModuleFiles);
+
+  console.log("🔬 Analyzing module exports via AST...");
+  const { content: modulesContent, errors: moduleErrors } = generateModulesFile(
+    moduleProgram,
+    routeFiles,
+    layoutFiles,
+    errorFile,
+    appDir,
+  );
+
+  for (const error of moduleErrors) {
+    console.error(`   ❌ ${error}`);
+  }
+  if (moduleErrors.length > 0) {
+    console.error("❌ Module analysis failed");
+    process.exit(1);
+  }
+
+  await writeFile(modulesPath, modulesContent);
+
+  console.log("📦 Building server bundle...");
+
+  await mkdir(distServer, { recursive: true });
+
+  const packageImports = await scanner.getPackageImports();
+
+  const bundle = await rolldown({
+    input: join(appDir, "index.ts"),
+    platform: "node",
+    tsconfig: true,
+    moduleTypes,
+    external: [
+      "cloudflare:workers",
+      "preact",
+      "preact/hooks",
+      "preact/compat",
+      "preact/jsx-runtime",
+      "preact/jsx-dev-runtime",
+      "preact/debug",
+      "@preact/signals",
+      "@preact/signals-core",
+      "@preact/signals-debug",
+      "preact-render-to-string",
+      "preact-render-to-string/stream",
+      "preact-custom-element",
+    ],
+    resolve: {
+      alias: {
+        ...packageImports,
+        ".modules.generated": modulesPath,
+        ".chunks.generated.json": chunksPath,
+      },
+    },
+    plugins: [assetUrlPrefixPlugin],
+    transform: {
+      jsx: {
+        runtime: "automatic",
+        development: false,
+      },
+    },
+  });
+
+  await bundle.write({
+    dir: distServer,
+    format: "esm",
+    codeSplitting: false,
+    entryFileNames: "index.js",
+    assetFileNames: "[name]-[hash][extname]",
+    minify: args.production,
+    ...(args.sourcemap && { sourcemap: true }),
+  });
+
+  await bundle.close();
+
+  // Remove emitted assets from server bundle - they're served from dist/client/assets
+  for await (const file of glob("*", { cwd: distServer, withFileTypes: false })) {
+    if (file === "index.js" || file === "index.js.map") continue;
+    await unlink(join(distServer, file as string));
+  }
+
+  console.log("✅ Server build complete");
+}

package/src/build.bundle.ts

@@ -0,0 +1,48 @@
+import type { ModuleTypes, NormalizedOutputOptions, OutputBundle } from "rolldown";
+
+export const assetUrlPrefixPlugin = {
+  name: "asset-url-prefix",
+  generateBundle(_options: NormalizedOutputOptions, bundle: OutputBundle) {
+    const assetFileNames = Object.values(bundle)
+      .filter((item) => item.type === "asset")
+      .map((asset) => asset.fileName);
+
+    if (assetFileNames.length === 0) return;
+
+    for (const item of Object.values(bundle)) {
+      if (item.type !== "chunk") continue;
+      let { code } = item;
+
+      for (const fileName of assetFileNames) {
+        const prefixed = `/assets/${fileName}`;
+        code = code
+          .replaceAll(`"${fileName}"`, `"${prefixed}"`)
+          .replaceAll(`'${fileName}'`, `'${prefixed}'`)
+          .replaceAll(`\`${fileName}\``, `\`${prefixed}\``);
+      }
+
+      item.code = code;
+    }
+  },
+};
+
+export interface BuildArgs {
+  production: boolean;
+  sourcemap: boolean;
+  debug: boolean;
+  clean?: boolean;
+  serve?: boolean;
+  watch?: boolean;
+  codemod?: boolean;
+  dry?: boolean;
+}
+
+export const moduleTypes: ModuleTypes = {
+  ".svg": "asset",
+  ".png": "asset",
+  ".jpg": "asset",
+  ".jpeg": "asset",
+  ".gif": "asset",
+  ".webp": "asset",
+  ".ico": "asset",
+};

package/src/build.emit-manifests.ts

@@ -0,0 +1,25 @@
+import ts from "typescript";
+import { parsePath } from "./paths.ts";
+import { generateTypedModulesFile, validateModule, type ModuleEntry } from "./ast.ts";
+
+export function generateModulesFile(
+  program: ts.Program,
+  routeFiles: string[],
+  layoutFiles: string[],
+  errorFile: string | null,
+  appDir: string,
+): { content: string; errors: string[] } {
+  const allFiles = [...layoutFiles, ...routeFiles];
+
+  if (errorFile) {
+    allFiles.push(errorFile);
+  }
+
+  const entries: ModuleEntry[] = allFiles.map((file) => ({
+    path: file,
+    parsed: parsePath(file),
+    validation: validateModule(program, file, appDir),
+  }));
+
+  return generateTypedModulesFile(entries);
+}

package/src/build.hmr-entry.ts

@@ -0,0 +1,88 @@
+import type { RoutesManifest } from "./manifest.ts";
+
+export interface HmrEntryArgs {
+  production: boolean;
+  debug: boolean;
+}
+
+export interface ComponentMeta {
+  file: string;
+  tag: string;
+  props: string[];
+  chunk: string;
+}
+
+function buildDebugImports(args: HmrEntryArgs) {
+  if (!args.debug) return "";
+  return /* tsx */ `
+      import 'preact/debug'
+      import '@preact/signals-debug'
+    `;
+}
+
+function buildRouterInit(routesManifest: RoutesManifest) {
+  return `const routesManifest = ${JSON.stringify(routesManifest)};`;
+}
+
+function buildStylesheetRegistration(meta: ComponentMeta, cssFiles: string[], args: HmrEntryArgs) {
+  if (!cssFiles.length || args.production) {
+    return { imports: "", setup: "" };
+  }
+
+  const cssImports = cssFiles.map((file, i) => `import css${i} from '${file}?raw';`).join("\n");
+  const inlineStyles = cssFiles.map((file, i) => `{ id: '${file}', css: css${i} }`).join(", ");
+
+  return {
+    imports: /* tsx */ `
+          import { registerInlineStyles } from '@chr33s/solarflare/client';
+          ${cssImports}
+        `,
+    setup: /* tsx */ `
+        registerInlineStyles('${meta.tag}', [${inlineStyles}]);
+      `,
+  };
+}
+
+function buildEntryInit(meta: ComponentMeta, cssFiles: string[]) {
+  return /* tsx */ `
+    initHmrEntry({
+      tag: '${meta.tag}',
+      props: ${JSON.stringify(meta.props)},
+      routesManifest,
+      BaseComponent,
+      hmr,
+      cssFiles: ${JSON.stringify(cssFiles)},
+      onCssUpdate: reloadAllStylesheets,
+    });
+  `;
+}
+
+export function generateChunkedClientEntry(
+  meta: ComponentMeta,
+  routesManifest: RoutesManifest,
+  cssFiles: string[] = [],
+  args: HmrEntryArgs,
+) {
+  const debugImports = buildDebugImports(args);
+  const { imports: stylesheetImports, setup: stylesheetSetup } = buildStylesheetRegistration(
+    meta,
+    cssFiles,
+    args,
+  );
+  const routesManifestInit = buildRouterInit(routesManifest);
+  const entryInit = buildEntryInit(meta, cssFiles);
+
+  return /* tsx */ `
+    /** Auto-generated: ${meta.chunk} */
+    ${debugImports}
+    import { initHmrEntry, hmr, reloadAllStylesheets } from '@chr33s/solarflare/client';
+    ${stylesheetImports}
+    import BaseComponent from '../src/${meta.file}';
+
+    ${stylesheetSetup}
+
+    ${routesManifestInit}
+
+    ${entryInit}
+  `;
+}