@designtools/next-plugin 0.1.7 → 0.1.8

package/dist/index.js

@@ -73,8 +73,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 = import_path.default.join(projectRoot, dir);
     if (import_fs.default.existsSync(fullDir)) {
@@ -87,7 +87,13 @@ function discoverComponentFiles(projectRoot) {
 
 // src/index.ts
 function withDesigntools(nextConfig = {}) {
-  return {
+  const projectRoot = process.cwd();
+  const appDir = import_path2.default.resolve(projectRoot, "app");
+  try {
+    generateComponentRegistry(appDir);
+  } catch {
+  }
+  const result = {
     ...nextConfig,
     webpack(config, context) {
       if (context.dev) {
@@ -115,11 +121,6 @@ function withDesigntools(nextConfig = {}) {
             }
           ]
         });
-        const appDir = import_path2.default.resolve(context.dir, "app");
-        try {
-          generateComponentRegistry(appDir);
-        } catch {
-        }
       }
       if (typeof nextConfig.webpack === "function") {
         return nextConfig.webpack(config, context);
@@ -127,6 +128,54 @@ function withDesigntools(nextConfig = {}) {
       return config;
     }
   };
+  if (process.env.TURBOPACK) {
+    const sourceLoader = {
+      loader: import_path2.default.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: import_path2.default.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;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -41,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)) {
@@ -55,7 +55,13 @@ function discoverComponentFiles(projectRoot) {
 
 // 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) {
@@ -83,11 +89,6 @@ function withDesigntools(nextConfig = {}) {
             }
           ]
         });
-        const appDir = path2.resolve(context.dir, "app");
-        try {
-          generateComponentRegistry(appDir);
-        } catch {
-        }
       }
       if (typeof nextConfig.webpack === "function") {
         return nextConfig.webpack(config, context);
@@ -95,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.7",
+  "version": "0.1.8",
   "main": "dist/index.js",
   "exports": {
     ".": {

package/src/index.ts

@@ -11,7 +11,17 @@ import path from "path";
 import { generateComponentRegistry } from "./preview-route.js";
 
 export function withDesigntools<T extends Record<string, any>>(nextConfig: T = {} as T): T {
-  return {
+  // Generate the component registry unconditionally (filesystem operation, not loader-specific).
+  // Use process.cwd() since withDesigntools() is called at config time from the project root.
+  const projectRoot = process.cwd();
+  const appDir = path.resolve(projectRoot, "app");
+  try {
+    generateComponentRegistry(appDir);
+  } catch {
+    // Non-fatal — isolation feature just won't work
+  }
+
+  const result: any = {
     ...nextConfig,
     webpack(config: any, context: any) {
       // Only add the loader in development
@@ -42,14 +52,6 @@ export function withDesigntools<T extends Record<string, any>>(nextConfig: T = {
             },
           ],
         });
-
-        // Generate the component registry for isolation overlay
-        const appDir = path.resolve(context.dir, "app");
-        try {
-          generateComponentRegistry(appDir);
-        } catch {
-          // Non-fatal — isolation feature just won't work
-        }
       }
 
       // Call the user's webpack config if provided
@@ -60,4 +62,64 @@ export function withDesigntools<T extends Record<string, any>>(nextConfig: T = {
       return config;
     },
   };
+
+  // Turbopack support — register the same loaders via turbopack.rules
+  // following the exact pattern used by @next/mdx.
+  if (process.env.TURBOPACK) {
+    const sourceLoader = {
+      loader: path.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: path.resolve(__dirname, "codesurface-mount-loader.js"),
+    };
+
+    // Source annotation rule — uses a unique glob like @next/mdx does
+    const sourceRule = {
+      loaders: [sourceLoader],
+      as: "*.tsx",
+      condition: {
+        path: /\.(tsx|jsx)$/,
+      },
+    };
+
+    const wildcardGlob = "{*,designtools-source}";
+    let wildcardRule = (nextConfig as any).turbopack?.rules?.[wildcardGlob] ?? [];
+    wildcardRule = [
+      ...(Array.isArray(wildcardRule) ? wildcardRule : [wildcardRule]),
+      sourceRule,
+    ];
+
+    // Mount loader rule for root layout files
+    const mountRule = {
+      loaders: [mountLoader],
+      as: "*.tsx",
+      condition: {
+        path: /layout\.(tsx|jsx)$/,
+      },
+    };
+
+    const mountGlob = "{*,designtools-mount}";
+    let mountGlobRule = (nextConfig as any).turbopack?.rules?.[mountGlob] ?? [];
+    mountGlobRule = [
+      ...(Array.isArray(mountGlobRule) ? mountGlobRule : [mountGlobRule]),
+      mountRule,
+    ];
+
+    result.turbopack = {
+      ...(nextConfig as any).turbopack,
+      rules: {
+        ...(nextConfig as any).turbopack?.rules,
+        [wildcardGlob]: wildcardRule,
+        [mountGlob]: mountGlobRule,
+      },
+    };
+  }
+
+  return result as T;
 }

package/src/preview-route.ts

@@ -71,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)) {