@designtools/next-plugin 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -1,7 +1,195 @@
 import "./chunk-Y6FXYEAI.mjs";
 
 // src/index.ts
+import path2 from "path";
+
+// src/preview-route.ts
+import fs from "fs";
 import path from "path";
+var PREVIEW_DIR = "designtools-preview";
+function generatePreviewRoute(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"
+  );
+  ensureGitignore(projectRoot);
+}
+function ensureGitignore(projectRoot) {
+  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, `
+# Generated by @designtools/next-plugin
+${entry}
+`);
+    }
+  } catch {
+  }
+}
+function discoverComponentFiles(projectRoot) {
+  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() {
+  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 {
     ...nextConfig,
@@ -12,7 +200,7 @@ function withDesigntools(nextConfig = {}) {
           exclude: /node_modules/,
           use: [
             {
-              loader: path.resolve(__dirname, "loader.js"),
+              loader: path2.resolve(__dirname, "loader.js"),
               options: {
                 cwd: context.dir
               }
@@ -22,15 +210,20 @@ function withDesigntools(nextConfig = {}) {
         config.module.rules.push({
           test: /layout\.(tsx|jsx)$/,
           include: [
-            path.resolve(context.dir, "app"),
-            path.resolve(context.dir, "src/app")
+            path2.resolve(context.dir, "app"),
+            path2.resolve(context.dir, "src/app")
           ],
           use: [
             {
-              loader: path.resolve(__dirname, "codesurface-mount-loader.js")
+              loader: path2.resolve(__dirname, "codesurface-mount-loader.js")
             }
           ]
         });
+        const appDir = path2.resolve(context.dir, "app");
+        try {
+          generatePreviewRoute(appDir);
+        } catch {
+        }
       }
       if (typeof nextConfig.webpack === "function") {
         return nextConfig.webpack(config, context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/next-plugin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/index.js",
   "exports": {
     ".": {