@n6k.io/build 0.0.1

package/src/pipeline/imports.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, test } from "bun:test";
+import {
+  extractTags,
+  extractExistingImports,
+  extractImportedNames,
+} from "./imports";
+
+describe("extractTags", () => {
+  test("finds component tags", () => {
+    expect(extractTags("<Button>click</Button>")).toEqual(new Set(["Button"]));
+  });
+
+  test("finds multiple distinct tags", () => {
+    const snippet = "<Card><Button>ok</Button><Input /></Card>";
+    expect(extractTags(snippet)).toEqual(new Set(["Card", "Button", "Input"]));
+  });
+
+  test("deduplicates repeated tags", () => {
+    const snippet = "<Button /><Button /><Button />";
+    expect(extractTags(snippet)).toEqual(new Set(["Button"]));
+  });
+
+  test("ignores lowercase html tags", () => {
+    expect(extractTags("<div><span>hi</span></div>")).toEqual(new Set());
+  });
+
+  test("returns empty set for plain text", () => {
+    expect(extractTags("no tags here")).toEqual(new Set());
+  });
+
+  test("finds self-closing tags", () => {
+    expect(extractTags("<Separator />")).toEqual(new Set(["Separator"]));
+  });
+
+  test("finds tags with attributes", () => {
+    expect(extractTags('<Input type="text" className="w-full" />')).toEqual(
+      new Set(["Input"]),
+    );
+  });
+});
+
+describe("extractExistingImports", () => {
+  test("separates import lines from body", () => {
+    const source = `import Foo from 'foo';
+import { Bar } from 'bar';
+
+# Hello
+
+<Foo />`;
+    const result = extractExistingImports(source);
+    expect(result.importLines).toEqual([
+      "import Foo from 'foo';",
+      "import { Bar } from 'bar';",
+    ]);
+    expect(result.body).toStartWith("# Hello");
+  });
+
+  test("handles source with no imports", () => {
+    const source = "# Just markdown\n\n<Button />";
+    const result = extractExistingImports(source);
+    expect(result.importLines).toEqual([]);
+    expect(result.body).toBe("# Just markdown\n\n<Button />");
+  });
+
+  test("handles empty source", () => {
+    const result = extractExistingImports("");
+    expect(result.importLines).toEqual([]);
+    expect(result.body).toBe("");
+  });
+});
+
+describe("extractImportedNames", () => {
+  test("extracts named imports", () => {
+    const names = extractImportedNames([
+      "import { Button, Card } from '@/components/ui/button';",
+    ]);
+    expect(names).toEqual(new Set(["Button", "Card"]));
+  });
+
+  test("extracts default imports starting with uppercase", () => {
+    const names = extractImportedNames([
+      "import MyComponent from './my-component';",
+    ]);
+    expect(names).toEqual(new Set(["MyComponent"]));
+  });
+
+  test("handles aliased imports", () => {
+    const names = extractImportedNames(["import { Foo as Bar } from 'baz';"]);
+    expect(names).toEqual(new Set(["Bar"]));
+  });
+
+  test("returns empty set for no imports", () => {
+    expect(extractImportedNames([])).toEqual(new Set());
+  });
+});

package/src/pipeline/imports.ts

@@ -0,0 +1,129 @@
+import { readFileSync, readdirSync } from "node:fs";
+import path from "node:path";
+
+const EXPORT_DECL_RE =
+  /export\s+(?:function|const|class)\s+([A-Z][a-zA-Z0-9]*)/g;
+const EXPORT_BLOCK_RE = /export\s*\{([^}]+)\}/g;
+const JSX_TAG_RE = /<([A-Z][a-zA-Z0-9]*)/g;
+
+function buildExportMap(componentsDir: string): Map<string, string> {
+  const exportMap = new Map<string, string>();
+
+  let files: string[];
+  try {
+    files = readdirSync(componentsDir).filter((f) => f.endsWith(".tsx"));
+  } catch {
+    return exportMap;
+  }
+
+  for (const file of files) {
+    const src = readFileSync(path.resolve(componentsDir, file), "utf8");
+    const stem = file.replace(/\.tsx$/, "");
+    const importPath = `@/components/ui/${stem}`;
+
+    let m;
+
+    EXPORT_DECL_RE.lastIndex = 0;
+    while ((m = EXPORT_DECL_RE.exec(src)) !== null) {
+      exportMap.set(m[1], importPath);
+    }
+
+    EXPORT_BLOCK_RE.lastIndex = 0;
+    while ((m = EXPORT_BLOCK_RE.exec(src)) !== null) {
+      for (const name of m[1].split(",")) {
+        const parts = name.trim().split(/\s+as\s+/);
+        const trimmed = parts.at(-1)?.trim();
+        if (trimmed && /^[A-Z]/.test(trimmed)) {
+          exportMap.set(trimmed, importPath);
+        }
+      }
+    }
+  }
+
+  return exportMap;
+}
+
+const IMPORT_RE = /^\s*import\s+.*$/gm;
+
+export function extractExistingImports(source: string): {
+  importLines: string[];
+  body: string;
+} {
+  const importLines: string[] = [];
+  const body = source.replaceAll(IMPORT_RE, (match) => {
+    importLines.push(match.trim());
+    return "";
+  });
+  return { importLines, body: body.trimStart() };
+}
+
+export function extractImportedNames(importLines: string[]): Set<string> {
+  const names = new Set<string>();
+  const namedRe = /\{\s*([^}]+)\s*\}/;
+  const defaultRe = /import\s+([A-Z][a-zA-Z0-9]*)/;
+  for (const line of importLines) {
+    const namedMatch = line.match(namedRe);
+    if (namedMatch) {
+      for (const name of namedMatch[1].split(",")) {
+        const parts = name.trim().split(/\s+as\s+/);
+        const final = parts.at(-1)?.trim();
+        if (final) names.add(final);
+      }
+    }
+    const defMatch = line.match(defaultRe);
+    if (defMatch) names.add(defMatch[1]);
+  }
+  return names;
+}
+
+export function extractTags(snippet: string): Set<string> {
+  const tags = new Set<string>();
+  let m;
+  JSX_TAG_RE.lastIndex = 0;
+  while ((m = JSX_TAG_RE.exec(snippet)) !== null) {
+    tags.add(m[1]);
+  }
+  return tags;
+}
+
+export function resolveImports(
+  snippetsByFile: Map<string, string>,
+  componentsDir: string,
+) {
+  const exportMap = buildExportMap(componentsDir);
+  const resolved = new Map<string, string>();
+  const missing: { file: string; components: string[] }[] = [];
+
+  for (const [file, snippet] of snippetsByFile) {
+    const tags = extractTags(snippet);
+    const grouped = new Map<string, string[]>();
+    const fileMissing: string[] = [];
+
+    for (const tag of tags) {
+      const importPath = exportMap.get(tag);
+      if (importPath) {
+        let tags = grouped.get(importPath);
+        if (!tags) {
+          tags = [];
+          grouped.set(importPath, tags);
+        }
+        tags.push(tag);
+      } else {
+        fileMissing.push(tag);
+      }
+    }
+
+    const lines: string[] = [];
+    for (const [specifier, names] of grouped) {
+      lines.push(`import { ${names.join(", ")} } from '${specifier}';`);
+    }
+
+    resolved.set(file, lines.join("\n"));
+
+    if (fileMissing.length > 0) {
+      missing.push({ file, components: fileMissing });
+    }
+  }
+
+  return { resolved, missing };
+}

package/src/pipeline/layouts.ts

@@ -0,0 +1,39 @@
+import { existsSync } from "node:fs";
+import path from "node:path";
+
+/**
+ * Discover layout.tsx files for each .mdx entry point by walking
+ * from the page's directory up to appDir.
+ *
+ * Returns { slug: [absPath, ...] } ordered outermost-first.
+ * ts/tsx/js/jsx pass-through entries are skipped (they are not wrapped).
+ */
+export function discoverLayouts(
+  entryPoints: Record<string, string>,
+  appDir: string,
+): Record<string, string[]> {
+  const root = path.resolve(appDir);
+  const layouts: Record<string, string[]> = {};
+
+  for (const [slug, sourcePath] of Object.entries(entryPoints)) {
+    if (!sourcePath.endsWith(".mdx")) continue;
+
+    const chain: string[] = [];
+    let dir = path.dirname(path.resolve(sourcePath));
+
+    while (dir.startsWith(root) || dir === root) {
+      const candidate = path.join(dir, "layout.tsx");
+      if (existsSync(candidate)) {
+        chain.unshift(candidate);
+      }
+      if (dir === root) break;
+      dir = path.dirname(dir);
+    }
+
+    if (chain.length > 0) {
+      layouts[slug] = chain;
+    }
+  }
+
+  return layouts;
+}

package/src/pipeline/preprocess.test.ts

@@ -0,0 +1,137 @@
+import { describe, expect, test } from "bun:test";
+import { mkdirSync, writeFileSync, rmSync } from "node:fs";
+import path from "node:path";
+import { buildPropsString, preprocess } from "./preprocess";
+
+describe("buildPropsString", () => {
+  test("returns empty string for undefined", () => {
+    expect(buildPropsString()).toBe("");
+  });
+
+  test("returns empty string for empty object", () => {
+    expect(buildPropsString({})).toBe("");
+  });
+
+  test("converts string value", () => {
+    expect(buildPropsString({ name: "hello" })).toBe(' name={ "hello" }');
+  });
+
+  test("converts number value", () => {
+    expect(buildPropsString({ count: 42 })).toBe(" count={ 42 }");
+  });
+
+  test("converts boolean value", () => {
+    expect(buildPropsString({ open: true })).toBe(" open={ true }");
+  });
+
+  test("converts multiple props", () => {
+    const result = buildPropsString({ a: 1, b: "two" });
+    expect(result).toBe(' a={ 1 } b={ "two" }');
+  });
+
+  test("converts nested object", () => {
+    const result = buildPropsString({ style: { color: "red" } });
+    expect(result).toBe(' style={ {"color":"red"} }');
+  });
+});
+
+describe("preprocess MDX", () => {
+  const tmpBase = path.join(process.cwd(), "scratch", "tmp", "mdx-test");
+  const componentsDir = path.join(tmpBase, "components");
+  const mdxDir = path.join(tmpBase, "pages");
+
+  function setup() {
+    rmSync(tmpBase, { recursive: true, force: true });
+    mkdirSync(componentsDir, { recursive: true });
+    mkdirSync(mdxDir, { recursive: true });
+
+    // Create a fake component file so resolveImports can find it
+    writeFileSync(
+      path.join(componentsDir, "button.tsx"),
+      "export function Button() { return null; }\n",
+    );
+    writeFileSync(
+      path.join(componentsDir, "card.tsx"),
+      "export function Card() { return null; }\n",
+    );
+  }
+
+  function cleanup() {
+    rmSync(tmpBase, { recursive: true, force: true });
+  }
+
+  test("produces client + app + mdx virtual modules for .mdx entry", async () => {
+    setup();
+    try {
+      const mdxFile = path.join(mdxDir, "hello.mdx");
+      writeFileSync(mdxFile, "# Hello\n\n<Button>click</Button>\n");
+
+      const { entries, serverEntries, modules } = await preprocess(
+        { hello: mdxFile },
+        componentsDir,
+      );
+
+      // Client entry → hydration module.
+      expect(entries.hello).toBe("n6k:client:hello");
+      const clientMod = modules.get("n6k:client:hello")!;
+      expect(clientMod.contents).toContain("createRoot");
+      expect(clientMod.contents).toContain("hydrateRoot");
+      expect(clientMod.contents).toContain("n6k:app:hello");
+
+      // Server entry → SSR wrapper importing the compiled MDX.
+      expect(serverEntries.hello).toBe("n6k:app:hello");
+      const appMod = modules.get("n6k:app:hello")!;
+      expect(appMod.contents).toContain("import Content from 'n6k:mdx:hello'");
+      expect(appMod.contents).toContain("export default function App");
+
+      // Compiled MDX module exists.
+      expect(modules.has("n6k:mdx:hello")).toBe(true);
+    } finally {
+      cleanup();
+    }
+  });
+
+  test("auto-imports appear in the compiled MDX module", async () => {
+    setup();
+    try {
+      const mdxFile = path.join(mdxDir, "page.mdx");
+      writeFileSync(mdxFile, "# Page\n\n<Button />\n<Card />\n");
+
+      const { modules } = await preprocess({ page: mdxFile }, componentsDir);
+
+      const mdx = modules.get("n6k:mdx:page")!.contents;
+      expect(mdx).toContain("@/components/ui/button");
+      expect(mdx).toContain("@/components/ui/card");
+    } finally {
+      cleanup();
+    }
+  });
+
+  test("existing MDX imports are not duplicated", async () => {
+    setup();
+    try {
+      const mdxFile = path.join(mdxDir, "existing.mdx");
+      writeFileSync(
+        mdxFile,
+        `import { Button } from '@/components/ui/button';
+
+# Existing
+
+<Button />\n<Card />\n`,
+      );
+
+      const { modules } = await preprocess(
+        { existing: mdxFile },
+        componentsDir,
+      );
+
+      const mdx = modules.get("n6k:mdx:existing")!.contents;
+      // The button path should appear once (the original import); Card auto-imported.
+      const buttonMatches = mdx.match(/@\/components\/ui\/button/g) || [];
+      expect(buttonMatches).toHaveLength(1);
+      expect(mdx).toContain("@/components/ui/card");
+    } finally {
+      cleanup();
+    }
+  });
+});

package/src/pipeline/preprocess.ts

@@ -0,0 +1,212 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  resolveImports,
+  extractExistingImports,
+  extractImportedNames,
+} from "./imports";
+import Handlebars from "handlebars";
+import { compile } from "@mdx-js/mdx";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const templatesDir = path.resolve(__dirname, "..", "templates");
+const mdxTemplate = Handlebars.compile(
+  readFileSync(path.resolve(templatesDir, "contents-mdx.hbs"), "utf8"),
+);
+const entryTemplate = Handlebars.compile(
+  readFileSync(path.resolve(templatesDir, "entry.hbs"), "utf8"),
+);
+
+export type VirtualModule = { contents: string; loader: "js" | "jsx" };
+
+type Wrapper = {
+  component: string;
+  import: string;
+  props?: Record<string, unknown>;
+};
+
+type PreprocessOptions = {
+  wrappers?: Wrapper[];
+  layouts?: Record<string, string[]>;
+  mdxComponents?: string;
+};
+
+export type PreprocessResult = {
+  // Virtual modules served to esbuild (no temp dir): sentinel id -> source.
+  modules: Map<string, VirtualModule>;
+  // Client esbuild entry points: slug -> sentinel id (mdx) or absolute path (pass-through).
+  entries: Record<string, string>;
+  // SSR esbuild entry points: slug -> sentinel id (mdx pages only).
+  serverEntries: Record<string, string>;
+  missing: ReturnType<typeof resolveImports>["missing"];
+  meta: Map<string, Record<string, string>>;
+};
+
+// Virtual-module sentinel ids (resolved/loaded by build.ts's esbuild plugin).
+const clientId = (slug: string) => `n6k:client:${slug}`;
+const appId = (slug: string) => `n6k:app:${slug}`;
+const mdxId = (slug: string) => `n6k:mdx:${slug}`;
+
+export function buildPropsString(props?: Record<string, unknown>): string {
+  if (!props) return "";
+  return Object.entries(props)
+    .map(([key, value]) => ` ${key}={ ${JSON.stringify(value)} }`)
+    .join("");
+}
+
+export function parseMdxFrontmatter(raw: string): {
+  meta: Record<string, string>;
+  body: string;
+} {
+  const fenceRe = /^---\s*\n([\s\S]*?)---\s*\n([\s\S]*)$/;
+  const match = raw.match(fenceRe);
+  if (!match) return { meta: {}, body: raw };
+
+  const meta: Record<string, string> = {};
+  for (const line of match[1].split("\n")) {
+    const kvMatch = line.match(/^(\w+)\s*:\s*(.+)$/);
+    if (kvMatch) {
+      meta[kvMatch[1]] = kvMatch[2].trim();
+    }
+  }
+  return { meta, body: match[2] };
+}
+
+export async function preprocess(
+  entryPoints: Record<string, string>,
+  componentsDir: string,
+  { wrappers = [], layouts = {}, mdxComponents }: PreprocessOptions = {},
+): Promise<PreprocessResult> {
+  const modules = new Map<string, VirtualModule>();
+  const entries: Record<string, string> = {};
+  const serverEntries: Record<string, string> = {};
+  const meta = new Map<string, Record<string, string>>();
+  const missing: ReturnType<typeof resolveImports>["missing"] = [];
+
+  // Separate .mdx (needs transform) from ts/tsx/js/jsx (pass through).
+  const mdxSources = new Map<string, string>();
+  for (const [slug, sourcePath] of Object.entries(entryPoints)) {
+    const absPath = path.resolve(sourcePath);
+    if (absPath.endsWith(".mdx")) {
+      mdxSources.set(slug, readFileSync(absPath, "utf8"));
+    } else {
+      entries[slug] = absPath;
+    }
+  }
+
+  if (mdxSources.size === 0) {
+    return { modules, entries, serverEntries, missing, meta };
+  }
+
+  // Wrapper JSX (same for all pages)
+  const wrapperImports = wrappers.map((w) => w.import).join("\n");
+  const wrapperOpen = wrappers
+    .map((w) => `<${w.component}${buildPropsString(w.props)}>`)
+    .join("\n    ");
+  const wrapperClose = wrappers
+    .toReversed()
+    .map((w) => `</${w.component}>`)
+    .join("\n    ");
+
+  // Parse frontmatter + split out existing imports per page.
+  const mdxBodies = new Map<string, string>();
+  const mdxExistingImports = new Map<string, string[]>();
+  for (const [slug, raw] of mdxSources) {
+    const { meta: pageMeta, body: bodyWithoutFrontmatter } =
+      parseMdxFrontmatter(raw);
+    if (Object.keys(pageMeta).length > 0) {
+      meta.set(slug, pageMeta);
+    }
+    const { importLines, body } = extractExistingImports(
+      bodyWithoutFrontmatter,
+    );
+    mdxBodies.set(slug, body);
+    mdxExistingImports.set(slug, importLines);
+  }
+
+  const { resolved: mdxResolved, missing: mdxMissing } = resolveImports(
+    mdxBodies,
+    componentsDir,
+  );
+  missing.push(...mdxMissing);
+
+  for (const [slug] of mdxSources) {
+    const existingImports = mdxExistingImports.get(slug) || [];
+    const alreadyImported = extractImportedNames(existingImports);
+
+    // Filter auto-imports to skip already-imported names.
+    const autoImportBlock = mdxResolved.get(slug) || "";
+    const filteredAutoImports = autoImportBlock
+      .split("\n")
+      .filter((line) => {
+        if (!line.trim()) return false;
+        const namedMatch = line.match(/\{\s*([^}]+)\s*\}/);
+        if (!namedMatch) return true;
+        const names = namedMatch[1]
+          .split(",")
+          .map((n) => n.trim())
+          .filter((n) => !alreadyImported.has(n));
+        return names.length > 0;
+      })
+      .join("\n");
+
+    const processedMdx = [
+      ...existingImports,
+      filteredAutoImports,
+      "",
+      mdxBodies.get(slug),
+    ]
+      .filter((part) => part !== undefined)
+      .join("\n");
+
+    // Compile MDX → JS in memory (no temp file, no esbuild MDX plugin).
+    const compiled = await compile(processedMdx, {
+      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
+      ...(mdxComponents ? { providerImportSource: mdxComponents } : {}),
+    });
+    modules.set(mdxId(slug), { contents: String(compiled), loader: "jsx" });
+
+    // Per-page layout chain (imported by absolute path so it resolves with no
+    // base dir).
+    const layoutChain = layouts[slug] || [];
+    const layoutImports = layoutChain
+      .map(
+        (absPath: string, i: number) =>
+          `import Layout${i} from ${JSON.stringify(absPath)};`,
+      )
+      .join("\n");
+    const layoutOpen = layoutChain
+      .map((_: string, i: number) => `<Layout${i}>`)
+      .join("\n      ");
+    const layoutClose = layoutChain
+      .toReversed()
+      .map(
+        (_: string, i: number, arr: string[]) =>
+          `</Layout${arr.length - 1 - i}>`,
+      )
+      .join("\n      ");
+
+    // SSR wrapper module: imports the compiled MDX + wraps it.
+    const appContents = mdxTemplate({
+      mdxPath: mdxId(slug),
+      wrapperImports,
+      wrapperOpen,
+      wrapperClose,
+      layoutImports,
+      layoutOpen,
+      layoutClose,
+    });
+    modules.set(appId(slug), { contents: appContents, loader: "jsx" });
+    serverEntries[slug] = appId(slug);
+
+    // Client hydration entry module.
+    const entryContents = entryTemplate({ appModule: appId(slug) });
+    modules.set(clientId(slug), { contents: entryContents, loader: "jsx" });
+    entries[slug] = clientId(slug);
+  }
+
+  return { modules, entries, serverEntries, missing, meta };
+}