@designtools/next-plugin 0.1.7 → 0.1.9

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],
+      condition: {
+        not: "foreign"
+      }
+    };
+    const mountRule = {
+      loaders: [mountLoader],
+      condition: {
+        all: [
+          { not: "foreign" },
+          { path: /layout\.(tsx|jsx)$/ }
+        ]
+      }
+    };
+    const existingRules = nextConfig.turbopack?.rules ?? {};
+    const tsxRule = existingRules["*.tsx"] ?? [];
+    const jsxRule = existingRules["*.jsx"] ?? [];
+    result.turbopack = {
+      ...nextConfig.turbopack,
+      rules: {
+        ...existingRules,
+        "*.tsx": [
+          ...Array.isArray(tsxRule) ? tsxRule : [tsxRule],
+          sourceRule,
+          mountRule
+        ],
+        "*.jsx": [
+          ...Array.isArray(jsxRule) ? jsxRule : [jsxRule],
+          sourceRule,
+          mountRule
+        ]
+      }
+    };
+  }
+  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],
+      condition: {
+        not: "foreign"
+      }
+    };
+    const mountRule = {
+      loaders: [mountLoader],
+      condition: {
+        all: [
+          { not: "foreign" },
+          { path: /layout\.(tsx|jsx)$/ }
+        ]
+      }
+    };
+    const existingRules = nextConfig.turbopack?.rules ?? {};
+    const tsxRule = existingRules["*.tsx"] ?? [];
+    const jsxRule = existingRules["*.jsx"] ?? [];
+    result.turbopack = {
+      ...nextConfig.turbopack,
+      rules: {
+        ...existingRules,
+        "*.tsx": [
+          ...Array.isArray(tsxRule) ? tsxRule : [tsxRule],
+          sourceRule,
+          mountRule
+        ],
+        "*.jsx": [
+          ...Array.isArray(jsxRule) ? jsxRule : [jsxRule],
+          sourceRule,
+          mountRule
+        ]
+      }
+    };
+  }
+  return result;
 }
 export {
   withDesigntools

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/next-plugin",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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,69 @@ export function withDesigntools<T extends Record<string, any>>(nextConfig: T = {
       return config;
     },
   };
+
+  // Turbopack support — register the same loaders via turbopack.rules.
+  // Unlike @next/mdx (which converts .mdx → .tsx and needs `as: '*.tsx'`),
+  // our loaders transform .tsx → .tsx (same extension), so we must NOT use `as`
+  // — that would cause Turbopack to re-append the extension (.tsx.tsx).
+  // Instead, use glob patterns that match the file extensions directly.
+  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 loader for all .tsx/.jsx files (excluding node_modules)
+    const sourceRule = {
+      loaders: [sourceLoader],
+      condition: {
+        not: "foreign",
+      },
+    };
+
+    // Mount loader for layout files (the loader itself checks for <html to skip nested layouts)
+    const mountRule = {
+      loaders: [mountLoader],
+      condition: {
+        all: [
+          { not: "foreign" },
+          { path: /layout\.(tsx|jsx)$/ },
+        ],
+      },
+    };
+
+    // Use glob patterns that match tsx/jsx files.
+    // The source loader uses separate globs for .tsx and .jsx.
+    const existingRules = (nextConfig as any).turbopack?.rules ?? {};
+
+    const tsxRule = existingRules["*.tsx"] ?? [];
+    const jsxRule = existingRules["*.jsx"] ?? [];
+
+    result.turbopack = {
+      ...(nextConfig as any).turbopack,
+      rules: {
+        ...existingRules,
+        "*.tsx": [
+          ...(Array.isArray(tsxRule) ? tsxRule : [tsxRule]),
+          sourceRule,
+          mountRule,
+        ],
+        "*.jsx": [
+          ...(Array.isArray(jsxRule) ? jsxRule : [jsxRule]),
+          sourceRule,
+          mountRule,
+        ],
+      },
+    };
+  }
+
+  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)) {