@codedesignai/nextjs-live-edit-plugin 1.0.4 → 1.0.6

package/index.js

@@ -2,8 +2,11 @@ const path = require('path');
 
 /**
  * Next.js config wrapper that enables the live edit plugin.
- * Configures both Turbopack (turbopack.rules) and webpack loaders
- * so the source mapper works regardless of which bundler is active.
+ * Uses Turbopack's built-in webpack loader support via turbopack.rules.
+ *
+ * NOTE: Only Turbopack is supported. Adding a `webpack` key to the config
+ * causes hydration mismatches in Next.js 16 because the loader would only
+ * run on client-side builds, while server-rendered HTML has no data attributes.
  *
  * Usage in next.config.js (CommonJS):
  *
@@ -28,73 +31,34 @@ function withLiveEdit(nextConfig = {}, pluginOptions = {}) {
   const sourceDirs = pluginOptions.sourceDirs || ['app', 'components', 'src'];
   const projectRoot = pluginOptions.projectRoot || process.cwd();
 
-  // Only add source mapping in development mode
-  if (process.env.NODE_ENV === 'production') {
-    return nextConfig;
-  }
-
   const loaderPath = path.resolve(__dirname, 'source-mapper-loader.js');
-  const loaderOptions = {
-    sourceDirs,
-    projectRoot,
+  const loaderConfig = {
+    loader: loaderPath,
+    options: {
+      sourceDirs,
+      projectRoot,
+    },
   };
 
-  // Preserve the user's existing webpack function if they have one
-  const existingWebpack = nextConfig.webpack;
-
   // Merge with existing turbopack config
   const existingTurbopack = nextConfig.turbopack || {};
   const existingRules = existingTurbopack.rules || {};
 
-  const turbopackLoaderConfig = {
-    loader: loaderPath,
-    options: loaderOptions,
-  };
-
   return {
     ...nextConfig,
-
-    // ── Turbopack (next dev --turbopack) ──────────────────────────────
     turbopack: {
       ...existingTurbopack,
       rules: {
         ...existingRules,
+        // Apply our source mapper loader to JSX and TSX files
         '*.jsx': {
-          loaders: [turbopackLoaderConfig],
+          loaders: [loaderConfig],
         },
         '*.tsx': {
-          loaders: [turbopackLoaderConfig],
+          loaders: [loaderConfig],
         },
       },
     },
-
-    // ── Webpack (next dev without --turbopack) ───────────────────────
-    webpack: (config, webpackOptions) => {
-      // Only add to client-side builds (server components don't render in browser)
-      if (!webpackOptions.isServer) {
-        // Resolve source directories to absolute paths for the webpack include filter
-        const includePaths = sourceDirs.map(dir => path.resolve(projectRoot, dir));
-
-        config.module.rules.push({
-          test: /\.(jsx|tsx)$/,
-          include: includePaths,
-          enforce: 'pre',
-          use: [
-            {
-              loader: loaderPath,
-              options: loaderOptions,
-            },
-          ],
-        });
-      }
-
-      // Chain with the user's existing webpack config if present
-      if (typeof existingWebpack === 'function') {
-        return existingWebpack(config, webpackOptions);
-      }
-
-      return config;
-    },
   };
 }
 

package/live-edit-handler.js

@@ -538,16 +538,6 @@ function createLiveEditHandler(options = {}) {
   };
 
   async function POST(request) {
-    // Only allow in development
-    if (process.env.NODE_ENV === 'production') {
-      return new Response(
-        JSON.stringify({
-          success: false,
-          error: 'Live editing is only available in development mode',
-        }),
-        { status: 403, headers: { 'Content-Type': 'application/json', ...corsHeaders } }
-      );
-    }
 
     try {
       const data = await request.json();
@@ -614,12 +604,6 @@ function createPagesApiHandler(options = {}) {
       return;
     }
 
-    if (process.env.NODE_ENV === 'production') {
-      res
-        .status(403)
-        .json({ success: false, error: 'Live editing is only available in development mode' });
-      return;
-    }
 
     try {
       const data = req.body;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codedesignai/nextjs-live-edit-plugin",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Next.js plugin for live editing React components with AST-powered source mapping",
   "main": "index.js",
   "exports": {

package/source-mapper-loader.js

@@ -146,11 +146,6 @@ function extractStringFromAttrValue(valueNode) {
  *   - Inline backgroundImage styles
  */
 module.exports = function sourceMapperLoader(source) {
-  // Only run in development mode
-  if (process.env.NODE_ENV === 'production') {
-    return source;
-  }
-
   const resourcePath = this.resourcePath;
   const options = this.getOptions() || {};