@rahul_ur/devlink-vite-plugin 1.0.0

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@rahul_ur/devlink-vite-plugin",
+  "version": "1.0.0",
+  "description": "Vite plugin that wires devlink-babel-plugin into Vite+React automatically",
+  "type": "module",
+  "main": "src/index.mjs",
+  "module": "src/index.mjs",
+  "types": "src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.mjs",
+      "types": "./src/index.d.ts"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm pack --dry-run"
+  },
+  "keywords": ["vite", "plugin", "devlink", "babel", "devtools"],
+  "license": "MIT",
+  "peerDependencies": {
+    "vite": ">=4.0.0",
+    "devlink-babel-plugin": ">=1.0.0"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,23 @@
+export interface DevlinkPluginOptions {
+  /** Project root for data-source paths. Defaults to process.cwd() */
+  root?: string;
+  /** Attribute name injected onto JSX elements. Defaults to 'data-source' */
+  attribute?: string;
+  /** NODE_ENV values to activate in. Defaults to ['development'] */
+  envs?: string[];
+  /** Path patterns to exclude. Defaults to ['node_modules', '.test.', '.spec.', '__tests__'] */
+  exclude?: string[];
+}
+
+/** Vite plugin — add to plugins array in vite.config.ts */
+export declare function devlinkVitePlugin(options?: DevlinkPluginOptions): import('vite').Plugin;
+
+/**
+ * Returns the babel plugin config tuple for use inside @vitejs/plugin-react babel options.
+ *
+ * @example
+ * react({ babel: { plugins: [devlinkBabelConfig({ root: process.cwd() })] } })
+ */
+export declare function devlinkBabelConfig(options?: DevlinkPluginOptions): [string, DevlinkPluginOptions] | null;
+
+export default devlinkVitePlugin;

package/src/index.mjs

@@ -0,0 +1,106 @@
+import { createRequire } from 'module';
+
+const _require = createRequire(import.meta.url);
+
+/**
+ * devlinkVitePlugin()
+ *
+ * Adds devlink-babel-plugin to Vite's React Babel transform automatically.
+ * Drop into vite.config.ts plugins array — no other config needed.
+ *
+ * @param {object} options
+ * @param {string} [options.root]          - Project root for data-source paths. Defaults to process.cwd()
+ * @param {string} [options.attribute]     - Attribute name. Defaults to 'data-source'
+ * @param {string[]} [options.envs]        - Environments to run in. Defaults to ['development']
+ * @param {string[]} [options.exclude]     - Path patterns to skip
+ */
+export function devlinkVitePlugin(options = {}) {
+  const {
+    root = process.cwd(),
+    attribute = 'data-source',
+    envs = ['development'],
+    exclude = ['node_modules', '.test.', '.spec.', '__tests__'],
+  } = options;
+
+  // Resolve the babel plugin path at config time
+  let pluginPath;
+  try {
+    pluginPath = _require.resolve('devlink-babel-plugin');
+  } catch {
+    // If not installed yet, warn and skip gracefully
+    console.warn(
+      '[devlink-vite-plugin] devlink-babel-plugin not found. ' +
+      'Run: npm install -D devlink-babel-plugin'
+    );
+    return { name: 'devlink-vite-plugin-noop' };
+  }
+
+  return {
+    name: 'devlink-vite-plugin',
+
+    // Only apply in development
+    apply: 'serve',
+
+    config(cfg, { mode }) {
+      // Only activate in allowed envs
+      if (!envs.includes(mode) && !envs.includes(process.env.NODE_ENV ?? 'development')) {
+        return;
+      }
+
+      // Ensure optimizeDeps doesn't try to pre-bundle source files
+      cfg.optimizeDeps = cfg.optimizeDeps ?? {};
+      cfg.optimizeDeps.exclude = [
+        ...(cfg.optimizeDeps.exclude ?? []),
+        'devlink-studio',
+        'devlink-bridge',
+        'devlink-inspector',
+        'devlink-editor',
+      ];
+    },
+
+    // Hook into @vitejs/plugin-react's babel options
+    // This is the officially supported way to add babel plugins to Vite+React
+    options(opts) {
+      return opts;
+    },
+  };
+}
+
+/**
+ * Returns the babel plugin config tuple for use inside @vitejs/plugin-react.
+ *
+ * Usage in vite.config.ts:
+ *
+ *   import react from '@vitejs/plugin-react'
+ *   import { devlinkBabelConfig } from 'devlink-vite-plugin'
+ *
+ *   export default defineConfig({
+ *     plugins: [
+ *       react({
+ *         babel: {
+ *           plugins: [devlinkBabelConfig({ root: process.cwd() })]
+ *         }
+ *       })
+ *     ]
+ *   })
+ */
+export function devlinkBabelConfig(options = {}) {
+  const {
+    root = process.cwd(),
+    attribute = 'data-source',
+    envs = ['development'],
+    exclude = ['node_modules', '.test.', '.spec.', '__tests__'],
+  } = options;
+
+  let pluginPath;
+  try {
+    pluginPath = _require.resolve('devlink-babel-plugin');
+  } catch {
+    console.warn('[devlink-vite-plugin] devlink-babel-plugin not found.');
+    return null;
+  }
+
+  return [pluginPath, { root, attribute, envs, exclude }];
+}
+
+export default devlinkVitePlugin;