@designtools/next-plugin 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -6,27 +6,30 @@ import path2 from "path";
 // src/preview-route.ts
 import fs from "fs";
 import path from "path";
-var PREVIEW_DIR = "designtools-preview";
-function generatePreviewRoute(appDir) {
+var REGISTRY_FILE = "designtools-registry.ts";
+function generateComponentRegistry(appDir) {
   const projectRoot = path.dirname(appDir);
-  const previewDir = path.join(appDir, PREVIEW_DIR);
   const componentPaths = discoverComponentFiles(projectRoot);
-  fs.mkdirSync(previewDir, { recursive: true });
-  fs.writeFileSync(
-    path.join(previewDir, "layout.tsx"),
-    getLayoutTemplate(),
-    "utf-8"
-  );
-  fs.writeFileSync(
-    path.join(previewDir, "page.tsx"),
-    getPageTemplate(componentPaths),
-    "utf-8"
-  );
+  const registryEntries = componentPaths.map((p) => `  "${p}": () => import("@/${p}"),`).join("\n");
+  const content = `"use client";
+// Auto-generated by @designtools/next-plugin \u2014 do not edit
+
+const COMPONENT_REGISTRY: Record<string, () => Promise<any>> = {
+${registryEntries}
+};
+
+// 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;
+}
+`;
+  fs.writeFileSync(path.join(appDir, REGISTRY_FILE), content, "utf-8");
   ensureGitignore(projectRoot);
 }
 function ensureGitignore(projectRoot) {
   const gitignorePath = path.join(projectRoot, ".gitignore");
-  const entry = "app/designtools-preview";
+  const entry = "app/designtools-registry.ts";
   try {
     const existing = fs.existsSync(gitignorePath) ? fs.readFileSync(gitignorePath, "utf-8") : "";
     if (!existing.includes(entry)) {
@@ -38,8 +41,8 @@ ${entry}
   } catch {
   }
 }
-function discoverComponentFiles(projectRoot) {
-  const dirs = ["components/ui", "src/components/ui"];
+function discoverComponentFiles(projectRoot, overrideDir) {
+  const dirs = overrideDir ? [overrideDir] : ["components/ui", "src/components/ui"];
   for (const dir of dirs) {
     const fullDir = path.join(projectRoot, dir);
     if (fs.existsSync(fullDir)) {
@@ -49,149 +52,16 @@ function discoverComponentFiles(projectRoot) {
   }
   return [];
 }
-function getLayoutTemplate() {
-  return `// Auto-generated by @designtools/next-plugin \u2014 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) {
-  const registryEntries = componentPaths.map((p) => `  "${p}": () => import("@/${p}"),`).join("\n");
-  return `// Auto-generated by @designtools/next-plugin \u2014 do not edit
-"use client";
-
-import { useState, useEffect, useCallback, createElement } from "react";
-
-/* Static import registry \u2014 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\u2026
-      </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>
-  );
-}
-`;
-}
 
 // src/index.ts
 function withDesigntools(nextConfig = {}) {
-  return {
+  const projectRoot = process.cwd();
+  const appDir = path2.resolve(projectRoot, "app");
+  try {
+    generateComponentRegistry(appDir);
+  } catch {
+  }
+  const result = {
     ...nextConfig,
     webpack(config, context) {
       if (context.dev) {
@@ -219,11 +89,6 @@ function withDesigntools(nextConfig = {}) {
             }
           ]
         });
-        const appDir = path2.resolve(context.dir, "app");
-        try {
-          generatePreviewRoute(appDir);
-        } catch {
-        }
       }
       if (typeof nextConfig.webpack === "function") {
         return nextConfig.webpack(config, context);
@@ -231,6 +96,54 @@ function withDesigntools(nextConfig = {}) {
       return config;
     }
   };
+  if (process.env.TURBOPACK) {
+    const sourceLoader = {
+      loader: path2.resolve(__dirname, "loader.js"),
+      options: {
+        // In webpack, context.dir provides this. In turbopack config time,
+        // process.cwd() is equivalent since next.config runs from the project root.
+        cwd: projectRoot
+      }
+    };
+    const mountLoader = {
+      loader: path2.resolve(__dirname, "codesurface-mount-loader.js")
+    };
+    const sourceRule = {
+      loaders: [sourceLoader],
+      as: "*.tsx",
+      condition: {
+        path: /\.(tsx|jsx)$/
+      }
+    };
+    const wildcardGlob = "{*,designtools-source}";
+    let wildcardRule = nextConfig.turbopack?.rules?.[wildcardGlob] ?? [];
+    wildcardRule = [
+      ...Array.isArray(wildcardRule) ? wildcardRule : [wildcardRule],
+      sourceRule
+    ];
+    const mountRule = {
+      loaders: [mountLoader],
+      as: "*.tsx",
+      condition: {
+        path: /layout\.(tsx|jsx)$/
+      }
+    };
+    const mountGlob = "{*,designtools-mount}";
+    let mountGlobRule = nextConfig.turbopack?.rules?.[mountGlob] ?? [];
+    mountGlobRule = [
+      ...Array.isArray(mountGlobRule) ? mountGlobRule : [mountGlobRule],
+      mountRule
+    ];
+    result.turbopack = {
+      ...nextConfig.turbopack,
+      rules: {
+        ...nextConfig.turbopack?.rules,
+        [wildcardGlob]: wildcardRule,
+        [mountGlob]: mountGlobRule
+      }
+    };
+  }
+  return result;
 }
 export {
   withDesigntools

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/next-plugin",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "dist/index.js",
   "exports": {
     ".": {
@@ -13,7 +13,7 @@
     }
   },
   "scripts": {
-    "build": "tsup src/index.ts src/loader.ts src/codesurface.tsx src/codesurface-mount-loader.ts --format cjs,esm --dts --external @babel/core --external react --external react/jsx-runtime"
+    "build": "tsup src/index.ts src/loader.ts src/codesurface.tsx src/codesurface-mount-loader.ts --format cjs,esm --dts --external @babel/core --external react --external react/jsx-runtime --external react-dom"
   },
   "peerDependencies": {
     "next": ">=14.0.0",

package/src/codesurface-mount-loader.ts

@@ -28,17 +28,21 @@ export default function codesurfaceMountLoader(this: LoaderContext, source: stri
     return;
   }
 
-  // Add import at the top (after "use client" or first import)
-  // CodeSurface is a "use client" component — importing it from an RSC is fine in Next.js
-  const importStatement = `import { CodeSurface } from "@designtools/next-plugin/codesurface";\n`;
+  // Add imports at the top (after "use client" or first import)
+  // The registry import is a side-effect — it self-registers on window.
+  const importStatements = [
+    `import { CodeSurface } from "@designtools/next-plugin/codesurface";`,
+    `import "./designtools-registry";`,
+  ].join("\n") + "\n";
+
   let modified = source;
 
-  // Find a good insertion point for the import
+  // Find a good insertion point for the imports
   const firstImportIndex = source.indexOf("import ");
   if (firstImportIndex !== -1) {
-    modified = source.slice(0, firstImportIndex) + importStatement + source.slice(firstImportIndex);
+    modified = source.slice(0, firstImportIndex) + importStatements + source.slice(firstImportIndex);
   } else {
-    modified = importStatement + source;
+    modified = importStatements + source;
   }
 
   // Add <CodeSurface /> just before {children}