@designtools/next-plugin 0.1.2 → 0.1.3

package/src/preview-route.ts

@@ -0,0 +1,231 @@
+/**
+ * Preview route 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.
+ */
+
+import fs from "fs";
+import path from "path";
+
+const PREVIEW_DIR = "designtools-preview";
+
+/** Generate the preview route files in the target app's app directory. */
+export function generatePreviewRoute(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 });
+
+  // Write layout — minimal shell, no app chrome
+  fs.writeFileSync(
+    path.join(previewDir, "layout.tsx"),
+    getLayoutTemplate(),
+    "utf-8"
+  );
+
+  // Write page — client component that renders previews via postMessage
+  fs.writeFileSync(
+    path.join(previewDir, "page.tsx"),
+    getPageTemplate(componentPaths),
+    "utf-8"
+  );
+
+  // Ensure designtools-preview is gitignored
+  ensureGitignore(projectRoot);
+}
+
+/** Clean up generated preview files. */
+export function cleanupPreviewRoute(appDir: string): void {
+  const previewDir = path.join(appDir, PREVIEW_DIR);
+  try {
+    fs.rmSync(previewDir, { recursive: true, force: true });
+    // Directory itself is removed by rmSync above
+  } catch {
+    // ignore
+  }
+}
+
+function ensureGitignore(projectRoot: string): void {
+  const gitignorePath = path.join(projectRoot, ".gitignore");
+  const entry = "app/designtools-preview";
+
+  try {
+    const existing = fs.existsSync(gitignorePath)
+      ? fs.readFileSync(gitignorePath, "utf-8")
+      : "";
+    if (!existing.includes(entry)) {
+      fs.appendFileSync(gitignorePath, `\n# Generated by @designtools/next-plugin\n${entry}\n`);
+    }
+  } catch {
+    // ignore if we can't write gitignore
+  }
+}
+
+/**
+ * Scan the project for component .tsx files in known directories.
+ * Returns paths like "components/ui/button" (no extension).
+ */
+function discoverComponentFiles(projectRoot: string): string[] {
+  const dirs = ["components/ui", "src/components/ui"];
+  for (const dir of dirs) {
+    const fullDir = path.join(projectRoot, dir);
+    if (fs.existsSync(fullDir)) {
+      const files = fs.readdirSync(fullDir);
+      return files
+        .filter((f) => f.endsWith(".tsx") || f.endsWith(".ts") || f.endsWith(".jsx"))
+        .map((f) => `${dir}/${f.replace(/\.(tsx|ts|jsx|js)$/, "")}`);
+    }
+  }
+  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>
+  );
+}
+`;
+}