viewgate-wrapper 1.11.27 → 1.11.29

package/README.md

@@ -11,15 +11,26 @@ npm install viewgate-wrapper
 
 ---
 
-## 🚀 Precision Mapping (New)
+## 🚀 Quick Setup (Automatic)
 
-ViewGate features a **Hybrid Precision Strategy** to ensure AI-driven code changes are 100% accurate.
+The easiest way to configure ViewGate for **High-Precision Mapping** and **AI Automation** is using our CLI tool:
 
-### ⚡ Vite (Recommended)
-Add it to `vite.config.ts`. Injects stable `data-vg-id` attributes.
+```bash
+npx viewgate-wrapper setup
+```
+This command automatically detects your framework (Next.js, Vite, Webpack, etc.) and injects the necessary plugins/loaders into your configuration files.
+
+---
+
+## 🛠️ Manual Configuration
+
+If the automatic setup doesn't fit your needs, you can configure the build-time plugins manually to achieve **Surgical Precision**.
+
+### ⚡ Vite (Vite, Remix, Astro)
+Add the plugin to your `vite.config.ts`. Works with React, Remix, and Astro.
 
 ```typescript
-import { viewgatePlugin } from 'viewgate-wrapper';
+import { viewgatePlugin } from 'viewgate-wrapper/vite';
 
 export default defineConfig({
   plugins: [
@@ -29,40 +40,63 @@ export default defineConfig({
 });
 ```
 
-### 📦 Webpack (Next.js, CRA, Custom)
-Add the loader to your `webpack.config.js` or `next.config.js`:
+### 📦 Next.js
+Add the loader to your `next.config.js` or `next.config.mjs`:
 
 ```javascript
-// next.config.js or webpack.config.js
-module.exports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   webpack: (config) => {
     config.module.rules.push({
-      test: /\.(tsx|jsx)$/,
+      test: /\.(js|jsx|ts|tsx)$/,
       exclude: /node_modules/,
-      use: [{ loader: 'viewgate-wrapper/dist/plugin/webpack-loader' }],
+      use: ['viewgate-wrapper/next-loader'],
     });
     return config;
   },
 };
+
+module.exports = nextConfig;
+```
+
+### 📦 Webpack (CRA Ejected, Craco, Custom)
+Add the loader to your `webpack.config.js`:
+
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|jsx|ts|js)$/,
+        exclude: /node_modules/,
+        use: [{ loader: 'viewgate-wrapper/webpack-loader' }],
+      },
+    ],
+  },
+};
 ```
 
-### 🍄 Babel (Universal)
-If you are using a custom Babel setup (e.g., with `@babel/preset-react`), add the plugin to your `.babelrc` or `babel.config.js`:
+### 🍄 Babel (Universal Fallback)
+Add the plugin to your `.babelrc`, `babel.config.js`, or the `babel` key in `package.json`:
 
 ```json
 {
-  "plugins": ["viewgate-wrapper/dist/plugin/babel-plugin-viewgate"]
+  "plugins": ["viewgate-wrapper/babel"]
 }
 ```
 
-### ⚛️ Zero-Config React (Fiber Fallback)
-If you can't use a build-time plugin, ViewGate automatically uses **React Fiber Detection** in development.
-- **Precision**: High (Line/Column level).
-- **Setup**: None. Works out of the box by inspecting the React tree.
-- **Heuristics**: Uses **Semantic Fingerprinting** (Tag + ARIA + Roles + Hierarchy) as a safety net.
+---
+
+## ⚛️ Zero-Config React (Fiber Fallback)
+
+If you can't use a build-time plugin (e.g., non-ejected Create React App), ViewGate automatically uses **React Fiber Detection** in development.
+
+- **Precision**: High (inspects the live React tree).
+- **Setup**: **None**. Works out of the box.
+- **Heuristics**: Uses **Semantic Fingerprinting** as a safety net.
 
 > [!IMPORTANT]
-> To achieve "Surgical Precision", we recommend using a build-time plugin (Vite, Webpack, or Babel) whenever possible.
+> For the best experience with AI automation (Surgical Precision), we recommend using one of the build-time plugins mentioned above.
 
 ---
 
@@ -100,15 +134,8 @@ function Root() {
 
 ViewGate includes a **Model Context Protocol (MCP)** server that allows AI assistants (like Claude Desktop, Cursor, or Antigravity) to read your UI feedback and apply requested code changes automatically.
 
-### Easy Setup
-Run the automatic configuration tool in your project root:
-
-```bash
-npx viewgate-wrapper setup
-```
-
-### Manual Configuration
-Add this to your `claude_desktop_config.json` or Cursor MCP settings:
+### Configuration
+The `npx viewgate-wrapper setup` command handles this for you. Manually, you can add this to your MCP settings:
 
 ```json
 {
@@ -117,7 +144,8 @@ Add this to your `claude_desktop_config.json` or Cursor MCP settings:
       "command": "npx",
       "args": ["-y", "viewgate-mcp@latest"],
       "env": {
-        "VIEWGATE_API_KEY": "VG-YOUR-PROJECT-KEY"
+        "VIEWGATE_API_KEY": "VG-YOUR-PROJECT-KEY",
+        "VIEWGATE_PERSONAL_KEY": "YOUR-PERSONAL-KEY"
       }
     }
   }
@@ -127,21 +155,7 @@ Add this to your `claude_desktop_config.json` or Cursor MCP settings:
 ### ⚡ Example Commands
 Once configured, you can simply ask your AI assistant:
 - *"Read ViewGate annotations and apply the changes"*
-- *"Review UI feedback and resolve pending tasks"*
-- *"Apply ViewGate changes"*
-
----
-
-
-## 💡 Troubleshooting
-
-### Layering Issues (Z-Index)
-ViewGate's background elements (pins and selection highlights) are configured with a low `z-index` to avoid overlapping with your application's primary UI. 
-- **Pins**: `50`
-- **Selection Highlights**: `100`
-- **Modals**: `2,000,000`
-
-If pins are appearing over your headers, ensure your app's headers have a `z-index` higher than `100`.
+- *"Resolve UI feedback in this project"*
 
 ---
 

package/dist/cli.js

@@ -3,7 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import os from 'os';
 import { fileURLToPath } from 'url';
-import { detectFramework, injectVitePlugin, injectNextPlugin } from './plugin/config-injectors.js';
+import { detectFramework, injectVitePlugin, injectNextPlugin, injectWebpackPlugin, injectBabelPlugin } from './plugin/config-injectors.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 async function setup() {
@@ -16,8 +16,6 @@ async function setup() {
         process.exit(1);
     }
     // 2. Determine the path or URL
-    // Since we now have a standalone server, we can point to its URL or local path.
-    // The user wants it to be scalable, so we'll prioritize a server URL.
     const mcpServerUrl = process.env.MCP_SERVER_URL || 'https://view-gate-mcp.vercel.app/sse';
     // 3. Read and update mcp_config.json
     try {
@@ -27,8 +25,6 @@ async function setup() {
         }
         const currentServer = config.mcpServers.viewgate || {};
         const env = currentServer.env || {};
-        // Default values if not present
-        const backendUrl = env.BACKEND_URL || 'http://localhost:5000';
         const apiKey = env.API_KEY || '';
         config.mcpServers["viewgate"] = {
             command: "npx",
@@ -40,7 +36,6 @@ async function setup() {
         };
         fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
         console.log(`✅ Updated mcp_config.json successfully!`);
-        console.log(`📍 MCP Server URL: ${mcpServerUrl}`);
         if (!apiKey || !env.VIEWGATE_PERSONAL_KEY) {
             console.log('\n⚠️  Recuerda configurar tus credenciales en:');
             console.log(`   ${configPath}`);
@@ -55,7 +50,7 @@ async function setup() {
         const cwd = process.cwd();
         const result = detectFramework(cwd);
         if (result.framework === 'vite' && result.configPath) {
-            console.log(`✨ Vite detected! Attempting to apply viewgatePlugin to: ${path.basename(result.configPath)}`);
+            console.log(`✨ Vite detected! Attempting to apply plugin to: ${path.basename(result.configPath)}`);
             if (injectVitePlugin(result.configPath)) {
                 console.log('✅ viewgatePlugin applied successfully!');
             }
@@ -72,13 +67,53 @@ async function setup() {
                 console.log('⚠️  Could not auto-apply plugin. Please follow manual setup in README.');
             }
         }
+        else if (result.framework === 'webpack' && result.configPath) {
+            console.log(`✨ Webpack/Craco detected! Attempting to apply loader to: ${path.basename(result.configPath)}`);
+            if (injectWebpackPlugin(result.configPath)) {
+                console.log('✅ webpack-loader applied successfully!');
+            }
+            else {
+                console.log('⚠️  Could not auto-apply loader. Please follow manual setup in README.');
+            }
+        }
+        else if (result.framework === 'babel' && result.configPath) {
+            console.log(`✨ Babel detected in: ${path.basename(result.configPath)}`);
+            if (injectBabelPlugin(result.configPath)) {
+                console.log('✅ babel-plugin applied successfully!');
+            }
+            else {
+                console.log('⚠️  Could not auto-apply plugin. Please follow manual setup in README.');
+            }
+        }
+        else if (result.framework === 'react-scripts') {
+            console.log('✨ Create React App (CRA) detected!');
+            console.log('👉 CRA doesn\'t allow easy config changes. ViewGate will use "Zero-Config" Fiber fallback.');
+            console.log('💡 For High-Precision mapping, consider using Craco: https://craco.js.org/');
+        }
+        else if (result.framework === 'astro' || result.framework === 'remix') {
+            console.log(`✨ ${result.framework.toUpperCase()} detected!`);
+            if (result.configPath) {
+                console.log(`Attempting to apply Vite-based plugin to: ${path.basename(result.configPath)}`);
+                if (injectVitePlugin(result.configPath)) {
+                    console.log('✅ viewgatePlugin applied successfully!');
+                }
+                else {
+                    console.log('⚠️  Could not auto-apply. Please see README for manual setup.');
+                }
+            }
+            else {
+                console.log('👉 Please follow manual setup in README to enable High-Precision mapping.');
+            }
+        }
         else if (result.framework !== 'unknown') {
             console.log(`✨ ${result.framework.toUpperCase()} detected!`);
-            console.log(`👉 Please follow the manual setup for ${result.framework} in the README to enable High-Precision mapping.`);
+            console.log(`👉 Please follow the manual setup for ${result.framework} in the README.`);
         }
         else {
             console.log('❓ Could not determine framework. High-Precision mapping might require manual setup.');
+            console.log('💡 ViewGate will still work using the "Zero-Config" Fiber fallback in development.');
         }
+        console.log('\n🎉 Setup complete! You can now start using ViewGate in your project.');
     }
     catch (error) {
         console.error(`❌ Error updating configuration: ${error.message}`);

package/dist/components/ViewGateOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewGateOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ViewGateOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA2BnF,OAAO,wBAAwB,CAAC;AA21BhC,eAAO,MAAM,eAAe,EAAE,EA6tF7B,CAAC"}
+{"version":3,"file":"ViewGateOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ViewGateOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA2BnF,OAAO,wBAAwB,CAAC;AAw2BhC,eAAO,MAAM,eAAe,EAAE,EA6tF7B,CAAC"}

package/dist/plugin/config-injectors.d.ts

@@ -1,8 +1,11 @@
 export interface DetectionResult {
-    framework: 'vite' | 'next' | 'webpack' | 'babel' | 'unknown';
+    framework: 'vite' | 'next' | 'webpack' | 'babel' | 'astro' | 'remix' | 'react-scripts' | 'unknown';
     configPath: string | undefined;
 }
 export declare function detectFramework(cwd: string): DetectionResult;
 export declare function injectVitePlugin(configPath: string): boolean;
 export declare function injectNextPlugin(configPath: string): boolean;
+export declare function injectWebpackPlugin(configPath: string): boolean;
+export declare function injectBabelPlugin(configPath: string): boolean;
+export declare function injectBabelToPackageJson(pkgPath: string): boolean;
 //# sourceMappingURL=config-injectors.d.ts.map

package/dist/plugin/config-injectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-injectors.d.ts","sourceRoot":"","sources":["../../src/plugin/config-injectors.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC7D,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAwB5D;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAmC5D;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAiD5D"}
+{"version":3,"file":"config-injectors.d.ts","sourceRoot":"","sources":["../../src/plugin/config-injectors.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;IACnG,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAmD5D;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAqC5D;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CA2C5D;AAED,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAqB/D;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAkC7D;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAgBjE"}

package/dist/plugin/config-injectors.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 export function detectFramework(cwd) {
     const files = fs.readdirSync(cwd);
+    // 1. Check for specific config files
     if (files.includes('vite.config.ts') || files.includes('vite.config.js') || files.includes('vite.config.mjs')) {
         const configPath = files.find(f => f.startsWith('vite.config.'));
         return { framework: 'vite', configPath: configPath ? path.join(cwd, configPath) : undefined };
@@ -10,6 +11,14 @@ export function detectFramework(cwd) {
         const configPath = files.find(f => f.startsWith('next.config.'));
         return { framework: 'next', configPath: configPath ? path.join(cwd, configPath) : undefined };
     }
+    if (files.includes('astro.config.mjs') || files.includes('astro.config.ts')) {
+        const configPath = files.find(f => f.startsWith('astro.config.'));
+        return { framework: 'astro', configPath: configPath ? path.join(cwd, configPath) : undefined };
+    }
+    if (files.includes('remix.config.js') || files.includes('remix.config.ts')) {
+        const configPath = files.find(f => f.startsWith('remix.config.'));
+        return { framework: 'remix', configPath: configPath ? path.join(cwd, configPath) : undefined };
+    }
     if (files.includes('webpack.config.js') || files.includes('craco.config.js')) {
         const configPath = files.find(f => f.startsWith('webpack.config.') || f.startsWith('craco.config.'));
         return { framework: 'webpack', configPath: configPath ? path.join(cwd, configPath) : undefined };
@@ -18,6 +27,26 @@ export function detectFramework(cwd) {
         const configPath = files.find(f => f.includes('babel'));
         return { framework: 'babel', configPath: configPath ? path.join(cwd, configPath) : undefined };
     }
+    // 2. Fallback to package.json analysis
+    if (files.includes('package.json')) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf8'));
+            const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+            if (deps['react-scripts'])
+                return { framework: 'react-scripts', configPath: path.join(cwd, 'package.json') };
+            if (pkg.babel)
+                return { framework: 'babel', configPath: path.join(cwd, 'package.json') };
+            if (deps['next'])
+                return { framework: 'next', configPath: undefined };
+            if (deps['vite'])
+                return { framework: 'vite', configPath: undefined };
+            if (deps['astro'])
+                return { framework: 'astro', configPath: undefined };
+        }
+        catch (e) {
+            // Ignore JSON errors
+        }
+    }
     return { framework: 'unknown', configPath: undefined };
 }
 export function injectVitePlugin(configPath) {
@@ -30,21 +59,24 @@ export function injectVitePlugin(configPath) {
         const isTS = configPath.endsWith('.ts');
         const isMJS = configPath.endsWith('.mjs');
         const importStatement = (isTS || isMJS || content.includes('import '))
-            ? "\nimport viewgatePlugin from 'viewgate-wrapper/vite';\n"
-            : "\nconst viewgatePlugin = require('viewgate-wrapper/vite');\n";
-        content = importStatement + content;
+            ? "import viewgatePlugin from 'viewgate-wrapper/vite';\n"
+            : "const viewgatePlugin = require('viewgate-wrapper/vite');\n";
+        if (!content.includes('viewgate-wrapper/vite')) {
+            content = importStatement + content;
+        }
         // 3. Inject into plugins array
-        // Matches: plugins: [ ... ] or plugins: [...]
-        const pluginsRegex = /plugins\s*:\s*\[([^\]]*)\]/;
+        const pluginsRegex = /plugins\s*:\s*\[/;
         if (pluginsRegex.test(content)) {
-            content = content.replace(pluginsRegex, (match, p1) => {
-                const trailingComma = p1.trim() && !p1.trim().endsWith(',') ? ',' : '';
-                return `plugins: [\n    viewgatePlugin(),${p1}${trailingComma}\n  ]`;
-            });
+            content = content.replace(pluginsRegex, `plugins: [\n    viewgatePlugin(),`);
         }
         else {
-            // If no plugins array found, we skip auto-injection to avoid breaking complex configs
-            return false;
+            const configObjectRegex = /(defineConfig\s*\(\s*(?:{[^}]*}|(?:\([^)]*\)\s*=>\s*\(?))?\s*{)/;
+            if (configObjectRegex.test(content)) {
+                content = content.replace(configObjectRegex, `$1\n  plugins: [viewgatePlugin()],`);
+            }
+            else {
+                return false;
+            }
         }
         fs.writeFileSync(configPath, content);
         return true;
@@ -55,47 +87,116 @@ export function injectVitePlugin(configPath) {
 }
 export function injectNextPlugin(configPath) {
     try {
+        // If no configPath, we might want to create a default one, but for now we bail
+        if (!configPath)
+            return false;
         let content = fs.readFileSync(configPath, 'utf8');
-        // 1. Check if already injected
         if (content.includes('viewgate-wrapper/next-loader'))
             return true;
-        // 2. Find nextConfig object and add webpack property
-        // This is a bit more complex, we'll suggest manual setup if it's too nested
-        // Simple detection: check if NEXT_PUBLIC_VIEWGATE_API_KEY is mentioned
-        const webpackSnippet = `
-  webpack: (config) => {
-    config.module.rules.push({
+        const loaderConfig = `{
       test: /\\.(js|jsx|ts|tsx)$/,
+      exclude: /node_modules/,
       use: ['viewgate-wrapper/next-loader'],
-    });
+    }`;
+        const webpackSnippet = `\n  webpack: (config) => {
+    config.module.rules.push(${loaderConfig});
     return config;
   },`;
-        // Try to find the export default or module.exports nextConfig
-        if (content.includes('export default nextConfig')) {
-            content = content.replace('export default nextConfig', `nextConfig.webpack = (config) => {
-  config.module.rules.push({
-    test: /\\.(js|jsx|ts|tsx)$/,
-    use: ['viewgate-wrapper/next-loader'],
-  });
-  return config;
-};
-export default nextConfig;`);
+        const anonymousExportRegex = /(module\.exports\s*=\s*|export\s*default\s*)\{/;
+        const nextConfigVarRegex = /(const|let|var)\s+(\w+)\s*=\s*\{/;
+        const nextConfigMatch = content.match(nextConfigVarRegex);
+        if (nextConfigMatch) {
+            const varName = nextConfigMatch[2];
+            const exportRegex = new RegExp(`(?:module\\.exports\\s*=\\s*|export\\s*default\\s*)${varName}`, 'm');
+            if (exportRegex.test(content)) {
+                content = content.replace(nextConfigVarRegex, `$1 $2 = {${webpackSnippet}`);
+                fs.writeFileSync(configPath, content);
+                return true;
+            }
+        }
+        if (anonymousExportRegex.test(content)) {
+            content = content.replace(anonymousExportRegex, `$1 {${webpackSnippet}`);
+            fs.writeFileSync(configPath, content);
+            return true;
         }
-        else if (content.includes('module.exports = nextConfig')) {
-            content = content.replace('module.exports = nextConfig', `nextConfig.webpack = (config) => {
-  config.module.rules.push({
-    test: /\\.(js|jsx|ts|tsx)$/,
-    use: ['viewgate-wrapper/next-loader'],
-  });
-  return config;
-};
-module.exports = nextConfig;`);
+        return false;
+    }
+    catch (e) {
+        return false;
+    }
+}
+export function injectWebpackPlugin(configPath) {
+    try {
+        let content = fs.readFileSync(configPath, 'utf8');
+        if (content.includes('viewgate-wrapper/webpack-loader'))
+            return true;
+        const loaderConfig = `{
+        test: /\\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: ['viewgate-wrapper/webpack-loader'],
+      }`;
+        const rulesRegex = /rules\s*:\s*\[/;
+        if (rulesRegex.test(content)) {
+            content = content.replace(rulesRegex, `rules: [\n        ${loaderConfig},`);
+            fs.writeFileSync(configPath, content);
+            return true;
+        }
+        return false;
+    }
+    catch (e) {
+        return false;
+    }
+}
+export function injectBabelPlugin(configPath) {
+    try {
+        const isPackageJson = configPath.endsWith('package.json');
+        if (isPackageJson)
+            return injectBabelToPackageJson(configPath);
+        const isJson = configPath.endsWith('.json') || configPath.includes('.babelrc');
+        let content = fs.readFileSync(configPath, 'utf8');
+        if (content.includes('viewgate-wrapper/babel'))
+            return true;
+        if (isJson) {
+            try {
+                const config = JSON.parse(content);
+                if (!config.plugins)
+                    config.plugins = [];
+                if (!config.plugins.includes('viewgate-wrapper/babel')) {
+                    config.plugins.push('viewgate-wrapper/babel');
+                }
+                fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+                return true;
+            }
+            catch {
+                return false;
+            }
         }
         else {
-            // Too complex to auto-inject reliably
-            return false;
+            const pluginsRegex = /plugins\s*:\s*\[/;
+            if (pluginsRegex.test(content)) {
+                content = content.replace(pluginsRegex, `plugins: [\n    'viewgate-wrapper/babel',`);
+                fs.writeFileSync(configPath, content);
+                return true;
+            }
+        }
+        return false;
+    }
+    catch (e) {
+        return false;
+    }
+}
+export function injectBabelToPackageJson(pkgPath) {
+    try {
+        const content = fs.readFileSync(pkgPath, 'utf8');
+        const pkg = JSON.parse(content);
+        if (!pkg.babel)
+            pkg.babel = {};
+        if (!pkg.babel.plugins)
+            pkg.babel.plugins = [];
+        if (!pkg.babel.plugins.includes('viewgate-wrapper/babel')) {
+            pkg.babel.plugins.push('viewgate-wrapper/babel');
+            fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
         }
-        fs.writeFileSync(configPath, content);
         return true;
     }
     catch (e) {