@designtools/next-plugin 0.1.6 → 0.1.8

package/src/preview-route.ts

@@ -1,51 +1,52 @@
 /**
- * Preview route generator for component isolation.
+ * Component registry generator for component isolation.
  *
- * Writes a catch-all preview page into the target app's app directory
- * that can render any component with arbitrary props via postMessage.
- * Uses Next.js file-system routing — no custom server needed.
+ * Writes a static import map file into the target app's app directory.
+ * The <CodeSurface /> component uses this registry to dynamically load
+ * components for the isolation overlay — no route change needed.
  */
 
 import fs from "fs";
 import path from "path";
 
-const PREVIEW_DIR = "designtools-preview";
+const REGISTRY_FILE = "designtools-registry.ts";
 
-/** Generate the preview route files in the target app's app directory. */
-export function generatePreviewRoute(appDir: string): void {
+/** Generate the component registry file in the target app's app directory. */
+export function generateComponentRegistry(appDir: string): void {
   const projectRoot = path.dirname(appDir);
-  const previewDir = path.join(appDir, PREVIEW_DIR);
 
   // Discover component files so we can generate static imports
   const componentPaths = discoverComponentFiles(projectRoot);
 
-  // Create directory
-  fs.mkdirSync(previewDir, { recursive: true });
+  const registryEntries = componentPaths
+    .map((p) => `  "${p}": () => import("@/${p}"),`)
+    .join("\n");
+
+  const content = `"use client";
+// Auto-generated by @designtools/next-plugin — do not edit
+
+const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
+${registryEntries}
+};
 
-  // Write layout — minimal shell, no app chrome
-  fs.writeFileSync(
-    path.join(previewDir, "layout.tsx"),
-    getLayoutTemplate(),
-    "utf-8"
-  );
+// Self-register on window so CodeSurface can access it without
+// passing functions through the RSC serialization boundary.
+if (typeof window !== "undefined") {
+  (window as any).__DESIGNTOOLS_REGISTRY__ = COMPONENT_REGISTRY;
+}
+`;
 
-  // Write page — client component that renders previews via postMessage
-  fs.writeFileSync(
-    path.join(previewDir, "page.tsx"),
-    getPageTemplate(componentPaths),
-    "utf-8"
-  );
+  fs.writeFileSync(path.join(appDir, REGISTRY_FILE), content, "utf-8");
 
-  // Ensure designtools-preview is gitignored
+  // Ensure registry file is gitignored
   ensureGitignore(projectRoot);
 }
 
-/** Clean up generated preview files. */
-export function cleanupPreviewRoute(appDir: string): void {
-  const previewDir = path.join(appDir, PREVIEW_DIR);
+/** Clean up generated registry file. */
+export function cleanupComponentRegistry(appDir: string): void {
+  const registryPath = path.join(appDir, REGISTRY_FILE);
   try {
-    fs.rmSync(previewDir, { recursive: true, force: true });
-    // Directory itself is removed by rmSync above
+    fs.unlinkSync(registryPath);
   } catch {
     // ignore
   }
@@ -53,7 +54,7 @@ export function cleanupPreviewRoute(appDir: string): void {
 
 function ensureGitignore(projectRoot: string): void {
   const gitignorePath = path.join(projectRoot, ".gitignore");
-  const entry = "app/designtools-preview";
+  const entry = "app/designtools-registry.ts";
 
   try {
     const existing = fs.existsSync(gitignorePath)
@@ -70,9 +71,10 @@ function ensureGitignore(projectRoot: string): void {
 /**
  * Scan the project for component .tsx files in known directories.
  * Returns paths like "components/ui/button" (no extension).
+ * Accepts an optional override directory to skip hardcoded candidates.
  */
-function discoverComponentFiles(projectRoot: string): string[] {
-  const dirs = ["components/ui", "src/components/ui"];
+function discoverComponentFiles(projectRoot: string, overrideDir?: string): string[] {
+  const dirs = overrideDir ? [overrideDir] : ["components/ui", "src/components/ui"];
   for (const dir of dirs) {
     const fullDir = path.join(projectRoot, dir);
     if (fs.existsSync(fullDir)) {
@@ -84,148 +86,3 @@ function discoverComponentFiles(projectRoot: string): string[] {
   }
   return [];
 }
-
-function getLayoutTemplate(): string {
-  return `// Auto-generated by @designtools/next-plugin — do not edit
-export default function PreviewLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div style={{ padding: 32, background: "var(--background, #fff)", minHeight: "100vh" }}>
-      {children}
-    </div>
-  );
-}
-`;
-}
-
-function getPageTemplate(componentPaths: string[]): string {
-  // Generate static import map entries — webpack can analyze these
-  const registryEntries = componentPaths
-    .map((p) => `  "${p}": () => import("@/${p}"),`)
-    .join("\n");
-
-  return `// Auto-generated by @designtools/next-plugin — do not edit
-"use client";
-
-import { useState, useEffect, useCallback, createElement } from "react";
-
-/* Static import registry — webpack can analyze these imports */
-const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
-${registryEntries}
-};
-
-interface Combination {
-  label: string;
-  props: Record<string, string>;
-}
-
-interface RenderMsg {
-  type: "tool:renderPreview";
-  componentPath: string;
-  exportName: string;
-  combinations: Combination[];
-  defaultChildren: string;
-}
-
-export default function PreviewPage() {
-  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
-  const [combinations, setCombinations] = useState<Combination[]>([]);
-  const [defaultChildren, setDefaultChildren] = useState("");
-  const [error, setError] = useState<string | null>(null);
-
-  const handleMessage = useCallback(async (e: MessageEvent) => {
-    const msg = e.data;
-    if (msg?.type !== "tool:renderPreview") return;
-
-    const { componentPath, exportName, combinations: combos, defaultChildren: children } = msg as RenderMsg;
-
-    try {
-      setError(null);
-      setCombinations(combos);
-      setDefaultChildren(children || exportName);
-
-      const loader = COMPONENT_REGISTRY[componentPath];
-      if (!loader) {
-        setError(\`Component "\${componentPath}" not found in registry. Available: \${Object.keys(COMPONENT_REGISTRY).join(", ")}\`);
-        return;
-      }
-
-      const mod = await loader();
-      const Comp = mod[exportName] || mod.default;
-      if (!Comp) {
-        setError(\`Export "\${exportName}" not found in \${componentPath}\`);
-        return;
-      }
-
-      setComponent(() => Comp);
-
-      // Notify editor that preview is ready
-      window.parent.postMessage(
-        { type: "tool:previewReady", cellCount: combos.length },
-        "*"
-      );
-    } catch (err: any) {
-      setError(\`Failed to load component: \${err.message}\`);
-    }
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("message", handleMessage);
-    // Signal readiness to the editor
-    window.parent.postMessage({ type: "tool:injectedReady" }, "*");
-    return () => window.removeEventListener("message", handleMessage);
-  }, [handleMessage]);
-
-  if (error) {
-    return (
-      <div style={{ padding: 32, color: "#ef4444", fontFamily: "monospace", fontSize: 14 }}>
-        {error}
-      </div>
-    );
-  }
-
-  if (!Component) {
-    return (
-      <div style={{ padding: 32, color: "#888", fontFamily: "system-ui", fontSize: 14 }}>
-        Waiting for component…
-      </div>
-    );
-  }
-
-  return (
-    <div style={{ fontFamily: "system-ui" }}>
-      <div style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
-        gap: 24,
-      }}>
-        {combinations.map((combo, i) => (
-          <div key={i} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            <div style={{
-              fontSize: 11,
-              fontWeight: 600,
-              color: "#888",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-            }}>
-              {combo.label}
-            </div>
-            <div style={{
-              padding: 16,
-              border: "1px solid #e5e7eb",
-              borderRadius: 8,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              minHeight: 64,
-              background: "#fff",
-            }}>
-              {createElement(Component, combo.props, defaultChildren)}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-`;
-}