npm - @keak/sdk - Versions diffs - 1.0.8 → 2.0.0 - Mend

@keak/sdk 1.0.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/Conversion.d.ts.map +1 -1
package/dist/KeakToolbarShadow.d.ts +21 -0
package/dist/KeakToolbarShadow.d.ts.map +1 -0
package/dist/index.cjs.js +199 -187
package/dist/index.cjs.js.map +1 -1
package/dist/index.d.ts +54 -21
package/dist/index.d.ts.map +1 -1
package/dist/index.js +201 -187
package/dist/index.js.map +1 -1
package/dist/services/telemetry/index.d.ts +20 -0
package/dist/services/telemetry/index.d.ts.map +1 -0
package/dist/services/telemetry/telemetryService.d.ts +66 -0
package/dist/services/telemetry/telemetryService.d.ts.map +1 -0
package/dist/services/telemetry/types.d.ts +64 -0
package/dist/services/telemetry/types.d.ts.map +1 -0
package/dist/toolbar/KeakToolbar.d.ts.map +1 -1
package/dist/toolbar/components/ui/Badge.d.ts +1 -1
package/dist/toolbar/components/ui/Button.d.ts +2 -2
package/dist/toolbar.js +41 -0
package/dist/toolbar.js.map +1 -1
package/package.json +3 -13
package/src/cli/install.js +8 -8
package/src/plugins/babel-source-inject.cjs +55 -131
package/src/plugins/next.cjs +48 -221
package/src/plugins/webpack-loader-babel/index.js +43 -117

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@keak/sdk",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "description": "Production-ready A/B testing and experimentation SDK for React applications with visual editing, source mapping, and real-time variant testing",
   "author": "Keak Team",
   "homepage": "https://www.keak.com/",
@@ -27,11 +27,6 @@
       "import": "./dist/toolbar.js",
       "default": "./dist/toolbar.js"
     },
-    "./toolbar/KeakToolbarNew": {
-      "types": "./dist/toolbar/KeakToolbarNew.d.ts",
-      "import": "./dist/toolbar/KeakToolbarNew.js",
-      "default": "./dist/toolbar/KeakToolbarNew.js"
-    },
     "./toolbar.css": "./dist/toolbar.css",
     "./keak-toolbar.css": "./dist/keak-toolbar.css",
     "./plugins/next": "./src/plugins/next.cjs",
@@ -80,14 +75,9 @@
     }
   },
   "dependencies": {
-    "@jsx-tool/jsx-tool": "^0.0.21",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@supabase/supabase-js": "^2.86.0",
-    "class-variance-authority": "^0.7.1",
+    "@babel/parser": "^7.26.3",
+    "@babel/traverse": "^7.26.5",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.23.12",
     "lucide-react": "^0.542.0",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.8"

package/src/cli/install.js CHANGED Viewed

@@ -342,7 +342,7 @@ class KeakInstaller {
         if (bodyMatch) {
           const bodyContent = bodyMatch[2].trim();
           const wrapped = `${bodyMatch[1]}
-        <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+        <KeakProvider>
 ${bodyContent}
           <KeakToolbar />
         </KeakProvider>
@@ -371,7 +371,7 @@ ${bodyContent}
         const componentMatch = modified.match(/(return\s*\(?\s*)([\s\S]*?)(\s*\)?;?\s*})/);
         if (componentMatch) {
           const wrapped = `${componentMatch[1]}
-    <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+    <KeakProvider>
       ${componentMatch[2]}
       <KeakToolbar />
     </KeakProvider>
@@ -408,7 +408,7 @@ ${bodyContent}
       const renderMatch = modified.match(/(ReactDOM\.render\s*\(\s*)([\s\S]*?)(\s*,\s*document\.getElementById)/);
       if (renderMatch) {
         const wrapped = `${renderMatch[1]}
-  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+  <KeakProvider>
     ${renderMatch[2]}
     <KeakToolbar />
   </KeakProvider>
@@ -420,7 +420,7 @@ ${bodyContent}
       const renderMatch = modified.match(/(root\.render\s*\(\s*)([\s\S]*?)(\s*\))/);
       if (renderMatch) {
         const wrapped = `${renderMatch[1]}
-  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+  <KeakProvider>
     ${renderMatch[2]}
     <KeakToolbar />
   </KeakProvider>
@@ -513,7 +513,7 @@ Please add Keak to your app manually:
    ${colors.green}import { KeakProvider } from '@keak/sdk';${colors.reset}
 3. Wrap your main component:
-   ${colors.green}<KeakProvider config={{ apiKey: 'demo', debug: true }}><YourApp /></KeakProvider>${colors.reset}
+   ${colors.green}<KeakProvider><YourApp /></KeakProvider>${colors.reset}
 Example for ${this.framework}:
 ${this.getFrameworkExample()}
@@ -529,7 +529,7 @@ import { KeakProvider } from '@keak/sdk';
 export default function RootLayout({ children }) {
   return (
     <html><body>
-      <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+      <KeakProvider>
         {children}
       </KeakProvider>
     </body></html>);
@@ -539,7 +539,7 @@ export default function RootLayout({ children }) {
 import { KeakProvider } from '@keak/sdk';
 root.render(
-  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+  <KeakProvider>
     <App />
   </KeakProvider>
 );`,
@@ -548,7 +548,7 @@ root.render(
 import { KeakProvider } from '@keak/sdk';
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <KeakProvider config={{ apiKey: 'demo', debug: true }}>
+  <KeakProvider>
     <App />
   </KeakProvider>
 );`

package/src/plugins/babel-source-inject.cjs CHANGED Viewed

@@ -1,170 +1,94 @@
 /**
- * Babel plugin to inject source location metadata into JSX elements
- * This enables precise DOM element to source code mapping
+ * Keak Babel Plugin - Source Location Injector
+ * Simplified version inspired by react-source-lens
+ * Injects data-keak-file and data-keak-line attributes into JSX elements
  */
-console.log('[Keak Babel Plugin] MODULE LOADED - This means Babel is requiring this file');
 const path = require('path');
-let processedCount = 0;
 function keakSourceInjectorPlugin({ types: t }) {
-  console.log('[Keak Babel Plugin] Plugin function called - Plugin loaded and initialized');
   return {
     name: 'keak-source-injector',
     visitor: {
       Program: {
-        enter(path, state) {
-          // Check if this file imports from next/font
-          // If so, skip the entire file to avoid Babel/SWC conflict
-          state.skipFile = false;
+        enter(programPath, state) {
+          // Skip in production builds
+          if (process.env.NODE_ENV === 'production' && !state.opts.forceProduction) {
+            state.skipFile = true;
+            return;
+          }
-          path.traverse({
+          // Skip next/font files (Babel/SWC conflict)
+          state.skipFile = false;
+          programPath.traverse({
             ImportDeclaration(importPath) {
               const source = importPath.node.source.value;
               if (source.includes('next/font') || source.includes('@next/font')) {
                 state.skipFile = true;
-                importPath.stop(); // Stop traversing
+                importPath.stop();
               }
             }
           });
-        },
-        exit() {
-          if (processedCount > 0) {
-            console.log(`[Keak Babel Plugin] Processed ${processedCount} JSX elements`);
-            processedCount = 0;
-          }
         }
       },
-      JSXOpeningElement(nodePath, state) {
-        // Skip entire file if it uses next/font (Babel/SWC conflict)
-        if (state.skipFile) {
-          return;
-        }
-        // Skip if we're not in development or if disabled
-        if (process.env.NODE_ENV === 'production' && !state.opts.forceProduction) {
+      JSXOpeningElement(nodePath, state) {
+        // Skip if file should be skipped or no location info
+        if (state.skipFile || !nodePath.node.loc) {
           return;
         }
-        // Skip if element already has keak source attribute
-        const existingAttr = nodePath.node.attributes.find((attr) =>
+        // Skip if already has keak attributes
+        const hasKeakAttr = nodePath.node.attributes.some((attr) =>
           t.isJSXAttribute(attr) &&
           t.isJSXIdentifier(attr.name) &&
-          attr.name.name === 'data-keak-src'
+          (attr.name.name === 'data-keak-file' || attr.name.name === 'data-keak-src')
         );
-        if (existingAttr) {
-          return;
-        }
-        // Get source location info
-        const loc = nodePath.node.loc;
-        if (!loc) return;
+        if (hasKeakAttr) return;
         const filename = state.file.opts.filename;
-        // Skip if filename is not available or not a valid string
-        if (!filename || typeof filename !== 'string') {
-          return;
-        }
-        // Skip next/font loader files to avoid Babel/SWC conflict
-        // next/font requires SWC and cannot be processed by Babel
-        if (filename.includes('next/font') || filename.includes('@next/font')) {
-          return;
-        }
-        // Create relative path from project root
-        const relativePath = path.relative(process.cwd(), filename);
-        // Create source location string: "file:line:column"
-        const sourceLocation = `${relativePath}:${loc.start.line}:${loc.start.column}`;
-        // Get element name for filtering
-        const elementName = nodePath.node.name;
-        let tagName = '';
-        if (t.isJSXIdentifier(elementName)) {
-          tagName = elementName.name;
-        } else if (t.isJSXMemberExpression(elementName)) {
-          // Handle cases like <motion.div>
-          tagName = elementName.property.name;
-        }
-        // Only instrument elements we care about
-        const targetElements = new Set([
-          'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-          'button', 'a', 'input', 'textarea', 'select', 'form',
-          'img', 'svg', 'canvas', 'video', 'audio',
-          'section', 'article', 'header', 'footer', 'nav', 'main',
-          'ul', 'ol', 'li', 'table', 'tr', 'td', 'th'
-        ]);
-        // Also instrument custom components (capitalized names)
-        const isCustomComponent = tagName && tagName[0] === tagName[0].toUpperCase();
-        const isTargetElement = targetElements.has(tagName.toLowerCase());
-        if (!isTargetElement && !isCustomComponent) {
-          return;
-        }
-        // Create the data attribute
-        const sourceAttr = t.jsxAttribute(
-          t.jsxIdentifier('data-keak-src'),
-          t.stringLiteral(sourceLocation)
-        );
-        // Add component context if available
-        let componentName = '';
-        let currentPath = nodePath;
-        // Walk up to find the containing component
-        while (currentPath) {
-          if (currentPath.isFunctionDeclaration() && currentPath.node.id) {
-            componentName = currentPath.node.id.name;
-            break;
-          }
-          if (currentPath.isVariableDeclarator() && t.isIdentifier(currentPath.node.id)) {
-            const init = currentPath.node.init;
-            if (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init)) {
-              componentName = currentPath.node.id.name;
-              break;
+        if (!filename || typeof filename !== 'string') return;
+        // Smart relative path detection (like react-source-lens)
+        let sourceFile;
+        // Try src/ directory first
+        const srcParts = filename.split('/src/');
+        if (srcParts.length > 1) {
+          sourceFile = 'src/' + srcParts[srcParts.length - 1];
+        } else {
+          // Try app/ directory (Next.js App Router)
+          const appParts = filename.split('/app/');
+          if (appParts.length > 1) {
+            sourceFile = 'app/' + appParts[appParts.length - 1];
+          } else {
+            // Try components/ directory
+            const compParts = filename.split('/components/');
+            if (compParts.length > 1) {
+              sourceFile = 'components/' + compParts[compParts.length - 1];
+            } else {
+              // Fallback: relative from cwd
+              sourceFile = path.relative(process.cwd(), filename);
             }
           }
-          currentPath = currentPath.parentPath;
-        }
-        // Add component context attribute if found
-        if (componentName) {
-          const componentAttr = t.jsxAttribute(
-            t.jsxIdentifier('data-keak-component'),
-            t.stringLiteral(componentName)
-          );
-          nodePath.node.attributes.push(componentAttr);
         }
-        // Add the source location attribute
-        nodePath.node.attributes.push(sourceAttr);
-        processedCount++;
-        // Optional: Add element index within component for disambiguation
-        if (state.opts.includeElementIndex) {
-          const elementIndex = state.elementIndex || 0;
-          state.elementIndex = elementIndex + 1;
-          const indexAttr = t.jsxAttribute(
-            t.jsxIdentifier('data-keak-idx'),
-            t.stringLiteral(String(elementIndex))
-          );
-          nodePath.node.attributes.push(indexAttr);
-        }
+        const { line } = nodePath.node.loc.start;
+        // Add data-keak-file and data-keak-line attributes
+        nodePath.node.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier('data-keak-file'),
+            t.stringLiteral(sourceFile)
+          ),
+          t.jsxAttribute(
+            t.jsxIdentifier('data-keak-line'),
+            t.stringLiteral(String(line))
+          )
+        );
       }
     }
   };
 }
 module.exports = keakSourceInjectorPlugin;

package/src/plugins/next.cjs CHANGED Viewed

@@ -1,245 +1,73 @@
 /**
  * Keak Next.js Plugin
- *
- * Automatically injects source location attributes into JSX elements
- * for use with Keak IDE element selection.
- *
+ * Simplified version - injects source location attributes in development only
+ *
  * Usage in next.config.js:
- *
- * const { withKeak } = require('@keak/sdk/plugins/next');
- *
- * module.exports = withKeak({
- *   // your existing Next.js config
- * });
- *
- * Or for ESM (next.config.mjs):
- *
- * import { withKeak } from '@keak/sdk/plugins/next';
- * export default withKeak({ ... });
+ * const { withKeak } = require('@keak/sdk/next');
+ * module.exports = withKeak({ ... });
  */
 const path = require('path');
+const fs = require('fs');
 function withKeak(nextConfig = {}) {
-  console.log('[Keak] withKeak() called - plugin loaded successfully');
   return {
     ...nextConfig,
     webpack(config, options) {
-      console.log('[Keak] webpack() called with options:', { dev: options.dev, isServer: options.isServer });
-      const { dev, isServer } = options;
+      const { dev } = options;
-      // Only inject in development mode (both client and server)
-      // Server components also need attributes for source mapping
-      if (dev) {
-        console.log('[Keak] Configuring Keak webpack loader for source injection...');
-        console.log('[Keak] DEBUG: dev=', dev, 'isServer=', isServer, 'processing:', isServer ? 'server build' : 'client build');
+      // Only inject loader in development mode
+      if (!dev) {
+        // Call original webpack config if it exists
+        if (typeof nextConfig.webpack === 'function') {
+          return nextConfig.webpack(config, options);
+        }
+        return config;
+      }
-        // Helper function to resolve modules from the project's node_modules
-        const resolveFromProject = (moduleName) => {
-          try {
-            // Try to resolve from the project's context (where next.config.js is)
-            return require.resolve(moduleName, {
-              paths: [process.cwd()]
-            });
-          } catch (e) {
-            // Fallback to resolving from @keak/sdk's context
-            console.warn(`[Keak] Could not resolve ${moduleName} from project, falling back to @keak/sdk`);
-            return require.resolve(moduleName);
-          }
-        };
+      // Resolve loader path from project .keak directory or fallback
+      const projectKeakLoader = path.resolve(process.cwd(), '.keak/webpack-loader-babel/index.js');
+      const keakLoaderPath = fs.existsSync(projectKeakLoader)
+        ? projectKeakLoader
+        : path.resolve(__dirname, 'webpack-loader-babel/index.js');
-        // Ensure module.rules exists
+      // Ensure config.module.rules exists
+      if (!config.module || !config.module.rules) {
         config.module = config.module || {};
         config.module.rules = config.module.rules || [];
+      }
-        // Add Keak loader to run pre-SWC for client code
-        // The loader resolves from .keak/webpack-loader-babel which is copied by keak-code during project setup.
-        const fs = require('fs');
-        const pathModule = require('path');
-        console.log('[Keak] About to resolve loader path...');
-        console.log('[Keak] Current working directory:', process.cwd());
-        // Try to find the loader in the project's .keak directory (copied by keak-code setup)
-        // Using the Babel-based loader that runs BEFORE SWC (pre-compilation)
-        const projectKeakLoader = pathModule.resolve(process.cwd(), '.keak/webpack-loader-babel/index.js');
-        let keakLoaderPath;
-        let loaderSource = 'unknown';
-        // Check if loader exists in project .keak directory
-        try {
-          if (fs.existsSync(projectKeakLoader)) {
-            console.log('[Keak] Found loader in project .keak directory');
-            keakLoaderPath = projectKeakLoader;
-            loaderSource = 'project';
-          } else {
-            // Fallback to project loader path even if it doesn't exist yet
-            console.warn('[Keak] Loader not found, using fallback path:', projectKeakLoader);
-            keakLoaderPath = projectKeakLoader;
-            loaderSource = 'fallback';
-          }
-        } catch (pathError) {
-          console.error('[Keak] Error resolving loader path:', pathError.message);
-          keakLoaderPath = projectKeakLoader;
-          loaderSource = 'error';
-        }
-        console.log('[Keak] ✅ Loader path resolved:', keakLoaderPath, '(source:', loaderSource, ')');
-        console.log('[Keak] About to inspect webpack rules...');
-        console.log('[Keak] DEBUG: config exists?', !!config);
-        console.log('[Keak] DEBUG: config.module exists?', !!config.module);
-        console.log('[Keak] DEBUG: config.module.rules exists?', !!(config.module && config.module.rules));
-        console.log('[Keak] DEBUG: config.module.rules is array?', Array.isArray(config.module && config.module.rules));
-        // Wrap everything in try-catch to catch any errors
-        try {
-          console.log('[Keak] DEBUG: Entering try block');
-          console.log('[Keak] DEBUG: config.module exists?', !!config.module);
-          console.log('[Keak] DEBUG: config.module.rules exists?', !!(config.module && config.module.rules));
-          console.log('[Keak] Total webpack rules:', config.module && config.module.rules ? config.module.rules.length : 'undefined');
-          if (!config.module || !config.module.rules) {
-            console.error('[Keak] ❌ ERROR: config.module.rules is undefined!');
-            return config;
-          }
-          // Log first few rules to understand structure
-          try {
-            console.log('[Keak] First few rules structure:');
-            config.module.rules.slice(0, 5).forEach((r, i) => {
-              console.log(`[Keak]   Rule ${i}:`, {
-                hasOneOf: Array.isArray(r.oneOf),
-                oneOfLength: Array.isArray(r.oneOf) ? r.oneOf.length : 'N/A',
-                test: r.test ? r.test.toString().substring(0, 50) : 'no test',
-                hasUse: !!r.use,
-                useType: r.use ? (Array.isArray(r.use) ? 'array' : typeof r.use) : 'none'
-              });
-            });
-          } catch (e) {
-            console.log('[Keak] Error logging rules:', e.message);
-          }
-          // Based on Next.js webpack structure: Find the oneOf array and add our loader
-          // Next.js uses oneOf arrays to process files - we need to add our loader there
-          let loaderAdded = false;
-          console.log('[Keak] Attempting Strategy 1: Finding oneOf rule...');
-          // Strategy 1: Find the oneOf rule (recommended approach from web search)
-          const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
-          console.log('[Keak] Strategy 1 result:', oneOfRule ? 'Found oneOf rule' : 'No oneOf rule found');
-          if (oneOfRule && oneOfRule.oneOf) {
-            console.log(`[Keak] ✅ Found oneOf array with ${oneOfRule.oneOf.length} entries`);
-            // Add our loader to the BEGINNING of oneOf array so it runs BEFORE SWC
-            // This transforms raw JSX to inject attributes before compilation
-            const preRule = {
-              test: /\.[jt]sx?$/,
-              exclude: [
-                /node_modules/,
-                /\.next\//,
-                /webpack/,
-                /next\/dist/
-                // NOTE: Removed /\.server\.[jt]sx?$/ exclusion to process server components
-              ],
-              enforce: 'pre', // Run BEFORE SWC (pre-compilation)
-              use: [
-                {
-                  loader: keakLoaderPath,
-                  options: {
-                    projectRoot: process.cwd(),
-                    includeElementIndex: true,
-                    devWarnings: dev,
-                    skipPatterns: [
-                      // NOTE: Removed /(\.server\.[jt]sx?$)/ to process server components
-                      /webpack/,
-                      /\.next\//,
-                      /next\/dist/
-                    ]
-                  }
-                }
-              ]
-            };
-            // Add to the BEGINNING of oneOf array (runs before SWC processes files)
-            oneOfRule.oneOf.unshift(preRule);
-            console.log(`[Keak] ✅ Added pre-compilation loader to oneOf array (now ${oneOfRule.oneOf.length} entries, runs before SWC)`);
-            loaderAdded = true;
-          } else {
-            console.log('[Keak] No oneOf array found, trying alternative approaches...');
-            // Strategy 2: Look for rules with oneOf property (nested)
-            for (let i = 0; i < config.module.rules.length; i++) {
-              const rule = config.module.rules[i];
-              if (rule.oneOf && Array.isArray(rule.oneOf)) {
-                console.log(`[Keak] Found oneOf in rule ${i} with ${rule.oneOf.length} entries`);
-                // Add pre-compilation loader to the BEGINNING of this oneOf array
-                rule.oneOf.unshift({
-                  test: /\.[jt]sx?$/,
-                  exclude: [/node_modules/, /\.next\//, /webpack/, /next\/dist/],
-                  enforce: 'pre', // Run BEFORE SWC
-                  use: [
-                    {
-                      loader: keakLoaderPath,
-                      options: {
-                        projectRoot: process.cwd(),
-                        includeElementIndex: true,
-                        devWarnings: dev,
-                        skipPatterns: [] // Process all files including server components
-                      }
-                    }
-                  ]
-                });
-                console.log(`[Keak] ✅ Added pre-compilation loader to oneOf array (now ${rule.oneOf.length} entries)`);
-                loaderAdded = true;
-                break;
-              }
+      // Create the loader rule
+      const keakRule = {
+        test: /\.[jt]sx?$/,
+        exclude: [
+          /node_modules/,
+          /\.next\//,
+          /webpack/,
+          /next\/dist/
+        ],
+        enforce: 'pre', // Run BEFORE SWC compilation
+        use: [
+          {
+            loader: keakLoaderPath,
+            options: {
+              projectRoot: process.cwd()
             }
           }
-          // Strategy 3: Fallback - Add as new rule with enforce: 'pre' at top level
-          // This is less ideal but should still work
-          if (!loaderAdded) {
-            console.log('[Keak] Fallback: Adding pre-compilation loader rule to top-level rules');
-            config.module.rules.unshift({
-              test: /\.[jt]sx?$/,
-              exclude: [/node_modules/, /\.next\//, /webpack/, /next\/dist/],
-              enforce: 'pre', // Run BEFORE SWC
-              use: [
-                {
-                  loader: keakLoaderPath,
-                  options: {
-                    projectRoot: process.cwd(),
-                    includeElementIndex: true,
-                    devWarnings: dev,
-                    skipPatterns: [] // Process all files including server components
-                  }
-                }
-              ]
-            });
-            console.log('[Keak] ✅ Added pre-compilation loader rule with enforce:pre (fallback)');
-            loaderAdded = true;
-          }
-          if (!loaderAdded) {
-            console.error('[Keak] ❌ ERROR: Failed to add loader using any strategy!');
-          } else {
-            console.log('[Keak] ✅ Loader successfully added to webpack config');
-          }
-        } catch (error) {
-          console.error('[Keak] ❌ ERROR in loader injection block:', error);
-          console.error('[Keak] Error message:', error.message);
-          console.error('[Keak] Error stack:', error.stack);
-          // Don't throw - let webpack continue even if loader injection fails
-        }
+        ]
+      };
+      // Try to inject into oneOf array (Next.js standard structure)
+      const oneOfRule = config.module.rules.find((rule) => Array.isArray(rule.oneOf));
+      if (oneOfRule && oneOfRule.oneOf) {
+        // Add to beginning so it runs before SWC
+        oneOfRule.oneOf.unshift(keakRule);
       } else {
-        console.log('[Keak] Skipping loader injection - dev:', dev, 'isServer:', isServer);
+        // Fallback: Add as top-level rule with enforce: 'pre'
+        config.module.rules.unshift(keakRule);
       }
-      // Call the original webpack config function if it exists
+      // Call original webpack config if it exists
       if (typeof nextConfig.webpack === 'function') {
         return nextConfig.webpack(config, options);
       }
@@ -250,4 +78,3 @@ function withKeak(nextConfig = {}) {
 }
 module.exports = { withKeak };