@soda-gql/metro-plugin 0.2.0

package/README.md

@@ -0,0 +1,165 @@
+# @soda-gql/metro-plugin
+
+Metro bundler plugin for soda-gql with support for Expo and React Native projects.
+
+## Installation
+
+```bash
+npm install @soda-gql/metro-plugin
+# or
+yarn add @soda-gql/metro-plugin
+# or
+bun add @soda-gql/metro-plugin
+```
+
+## Usage
+
+### Expo Projects
+
+```javascript
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { withSodaGql } = require("@soda-gql/metro-plugin");
+
+const config = getDefaultConfig(__dirname);
+module.exports = withSodaGql(config);
+```
+
+### React Native (bare) Projects
+
+```javascript
+// metro.config.js
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const { withSodaGql } = require("@soda-gql/metro-plugin");
+
+const config = getDefaultConfig(__dirname);
+module.exports = withSodaGql(config);
+```
+
+### With Options
+
+```javascript
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { withSodaGql } = require("@soda-gql/metro-plugin");
+
+const config = getDefaultConfig(__dirname);
+module.exports = withSodaGql(config, {
+  // Optional: Path to soda-gql config file
+  configPath: "./soda-gql.config.ts",
+
+  // Optional: Enable/disable the plugin (default: true)
+  enabled: process.env.NODE_ENV !== "test",
+
+  // Optional: Enable debug logging (default: false)
+  debug: process.env.DEBUG === "true",
+});
+```
+
+## How It Works
+
+1. **Transformer Wrapping**: The plugin wraps Metro's default Babel transformer.
+
+2. **Build-Time Transformation**: When Metro processes a file:
+   - Checks if the file contains soda-gql elements
+   - If yes, applies the soda-gql Babel transformation
+   - Passes the result to the upstream transformer for final processing
+
+3. **Cache Invalidation**: The transformer includes a `getCacheKey()` function that:
+   - Incorporates the artifact generation number
+   - Ensures Metro invalidates cache when soda-gql models change
+
+## Upstream Transformer Detection
+
+The plugin automatically detects and uses the appropriate upstream transformer:
+
+1. **Expo**: `@expo/metro-config/babel-transformer`
+2. **React Native 0.73+**: `@react-native/metro-babel-transformer`
+3. **Legacy React Native**: `metro-react-native-babel-transformer`
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `configPath` | `string` | `undefined` | Path to soda-gql config file |
+| `enabled` | `boolean` | `true` | Enable/disable the plugin |
+| `debug` | `boolean` | `false` | Enable verbose logging |
+
+## Watch Mode Considerations
+
+Metro's watch mode behavior differs from webpack:
+
+- **Cache Key Based**: When soda-gql files change, the transformer's cache key changes, triggering re-transformation of affected files.
+
+- **Development Server**: During active development, if you modify model files and don't see changes reflected:
+  1. Save the file again to trigger a rebuild
+  2. If needed, restart Metro with `--reset-cache` flag
+
+```bash
+# Expo
+npx expo start --clear
+
+# React Native
+npx react-native start --reset-cache
+```
+
+## Chaining with Other Transformers
+
+If you need to chain with other transformers (e.g., react-native-svg-transformer), ensure soda-gql's transformer is applied first:
+
+```javascript
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { withSodaGql } = require("@soda-gql/metro-plugin");
+
+const config = getDefaultConfig(__dirname);
+
+// Apply soda-gql first
+const sodaGqlConfig = withSodaGql(config);
+
+// Then chain other transformers
+module.exports = {
+  ...sodaGqlConfig,
+  transformer: {
+    ...sodaGqlConfig.transformer,
+    // Additional transformer customizations
+  },
+};
+```
+
+## Troubleshooting
+
+### "No compatible Metro Babel transformer found"
+
+This error occurs when none of the supported upstream transformers are installed. Ensure you have one of:
+
+- `@expo/metro-config` (Expo projects)
+- `@react-native/metro-babel-transformer` (React Native 0.73+)
+- `metro-react-native-babel-transformer` (Legacy React Native)
+
+### Changes not reflected in development
+
+1. Try saving the file again
+2. Restart Metro with cache clearing:
+   ```bash
+   npx expo start --clear
+   # or
+   npx react-native start --reset-cache
+   ```
+
+### Type errors in metro.config.js
+
+If using TypeScript for your Metro config, you may need to add type annotations:
+
+```typescript
+// metro.config.ts
+import { getDefaultConfig } from "expo/metro-config";
+import { withSodaGql } from "@soda-gql/metro-plugin";
+
+const config = getDefaultConfig(__dirname);
+export default withSodaGql(config);
+```
+
+## License
+
+MIT

package/dist/chunk--GtjC1aJ.mjs

@@ -0,0 +1,7 @@
+import { createRequire } from "node:module";
+
+//#region rolldown:runtime
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+//#endregion
+export { __require as t };

package/dist/index.cjs

@@ -0,0 +1,78 @@
+const require_transformer = require('./transformer.cjs');
+let __soda_gql_plugin_common = require("@soda-gql/plugin-common");
+
+//#region packages/metro-plugin/src/index.ts
+/**
+* Wrap Metro configuration with soda-gql support.
+*
+* This function modifies the Metro configuration to use the soda-gql
+* transformer, which applies GraphQL code transformations at build time.
+*
+* @example
+* ```typescript
+* // Expo project (metro.config.js)
+* const { getDefaultConfig } = require("expo/metro-config");
+* const { withSodaGql } = require("@soda-gql/metro-plugin");
+*
+* const config = getDefaultConfig(__dirname);
+* module.exports = withSodaGql(config);
+* ```
+*
+* @example
+* ```typescript
+* // React Native bare project (metro.config.js)
+* const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+* const { withSodaGql } = require("@soda-gql/metro-plugin");
+*
+* const config = getDefaultConfig(__dirname);
+* module.exports = withSodaGql(config);
+* ```
+*
+* @example
+* ```typescript
+* // With options
+* const config = getDefaultConfig(__dirname);
+* module.exports = withSodaGql(config, {
+*   configPath: "./soda-gql.config.ts",
+*   debug: true,
+* });
+* ```
+*
+* @param config - The Metro configuration to wrap
+* @param options - Optional plugin configuration
+* @returns Modified Metro configuration with soda-gql transformer
+*/
+function withSodaGql(config, options = {}) {
+	const transformerPath = require.resolve("@soda-gql/metro-plugin/transformer");
+	const stateKey = (0, __soda_gql_plugin_common.getStateKey)(options.configPath);
+	if (options.transformer) (0, __soda_gql_plugin_common.setSharedTransformerType)(stateKey, options.transformer);
+	return {
+		...config,
+		transformer: {
+			...config.transformer,
+			babelTransformerPath: transformerPath
+		}
+	};
+}
+
+//#endregion
+Object.defineProperty(exports, 'getSharedArtifact', {
+  enumerable: true,
+  get: function () {
+    return __soda_gql_plugin_common.getSharedArtifact;
+  }
+});
+Object.defineProperty(exports, 'getSharedState', {
+  enumerable: true,
+  get: function () {
+    return __soda_gql_plugin_common.getSharedState;
+  }
+});
+Object.defineProperty(exports, 'getStateKey', {
+  enumerable: true,
+  get: function () {
+    return __soda_gql_plugin_common.getStateKey;
+  }
+});
+exports.withSodaGql = withSodaGql;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import { getStateKey, setSharedTransformerType } from \"@soda-gql/plugin-common\";\nimport type { MetroConfig, MetroPluginOptions } from \"./types\";\n\n// Re-export shared state utilities for advanced usage\nexport { getSharedArtifact, getSharedState, getStateKey } from \"@soda-gql/plugin-common\";\nexport type {\n  MetroConfig,\n  MetroPluginOptions,\n  MetroTransformer,\n  MetroTransformParams,\n  MetroTransformResult,\n  TransformerType,\n} from \"./types\";\n\n/**\n * Wrap Metro configuration with soda-gql support.\n *\n * This function modifies the Metro configuration to use the soda-gql\n * transformer, which applies GraphQL code transformations at build time.\n *\n * @example\n * ```typescript\n * // Expo project (metro.config.js)\n * const { getDefaultConfig } = require(\"expo/metro-config\");\n * const { withSodaGql } = require(\"@soda-gql/metro-plugin\");\n *\n * const config = getDefaultConfig(__dirname);\n * module.exports = withSodaGql(config);\n * ```\n *\n * @example\n * ```typescript\n * // React Native bare project (metro.config.js)\n * const { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n * const { withSodaGql } = require(\"@soda-gql/metro-plugin\");\n *\n * const config = getDefaultConfig(__dirname);\n * module.exports = withSodaGql(config);\n * ```\n *\n * @example\n * ```typescript\n * // With options\n * const config = getDefaultConfig(__dirname);\n * module.exports = withSodaGql(config, {\n *   configPath: \"./soda-gql.config.ts\",\n *   debug: true,\n * });\n * ```\n *\n * @param config - The Metro configuration to wrap\n * @param options - Optional plugin configuration\n * @returns Modified Metro configuration with soda-gql transformer\n */\nexport function withSodaGql<T extends MetroConfig>(config: T, options: MetroPluginOptions = {}): T {\n  // Use package export path to ensure correct resolution from any location\n  const transformerPath = require.resolve(\"@soda-gql/metro-plugin/transformer\");\n\n  // Store transformer type in shared state for the transformer module to read\n  const stateKey = getStateKey(options.configPath);\n  if (options.transformer) {\n    setSharedTransformerType(stateKey, options.transformer);\n  }\n\n  return {\n    ...config,\n    transformer: {\n      ...config.transformer,\n      babelTransformerPath: transformerPath,\n    },\n  } as T;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,YAAmC,QAAW,UAA8B,EAAE,EAAK;CAEjG,MAAM,kBAAkB,QAAQ,QAAQ,qCAAqC;CAG7E,MAAM,qDAAuB,QAAQ,WAAW;AAChD,KAAI,QAAQ,YACV,wDAAyB,UAAU,QAAQ,YAAY;AAGzD,QAAO;EACL,GAAG;EACH,aAAa;GACX,GAAG,OAAO;GACV,sBAAsB;GACvB;EACF"}

package/dist/index.d.cts

@@ -0,0 +1,49 @@
+import { a as MetroTransformer, i as MetroTransformResult, n as MetroPluginOptions, o as TransformerType, r as MetroTransformParams, t as MetroConfig } from "./types-DrVbRHyR.cjs";
+import { getSharedArtifact, getSharedState, getStateKey } from "@soda-gql/plugin-common";
+
+//#region packages/metro-plugin/src/index.d.ts
+
+/**
+ * Wrap Metro configuration with soda-gql support.
+ *
+ * This function modifies the Metro configuration to use the soda-gql
+ * transformer, which applies GraphQL code transformations at build time.
+ *
+ * @example
+ * ```typescript
+ * // Expo project (metro.config.js)
+ * const { getDefaultConfig } = require("expo/metro-config");
+ * const { withSodaGql } = require("@soda-gql/metro-plugin");
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withSodaGql(config);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // React Native bare project (metro.config.js)
+ * const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+ * const { withSodaGql } = require("@soda-gql/metro-plugin");
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withSodaGql(config);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With options
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withSodaGql(config, {
+ *   configPath: "./soda-gql.config.ts",
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param config - The Metro configuration to wrap
+ * @param options - Optional plugin configuration
+ * @returns Modified Metro configuration with soda-gql transformer
+ */
+declare function withSodaGql<T extends MetroConfig>(config: T, options?: MetroPluginOptions): T;
+//#endregion
+export { type MetroConfig, type MetroPluginOptions, type MetroTransformParams, type MetroTransformResult, type MetroTransformer, type TransformerType, getSharedArtifact, getSharedState, getStateKey, withSodaGql };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;;;;AAsDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,sBAAsB,qBAAqB,aAAY,qBAA0B"}

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import { a as MetroTransformer, i as MetroTransformResult, n as MetroPluginOptions, o as TransformerType, r as MetroTransformParams, t as MetroConfig } from "./types-DvXBqw4W.mjs";
+import { getSharedArtifact, getSharedState, getStateKey } from "@soda-gql/plugin-common";
+
+//#region packages/metro-plugin/src/index.d.ts
+
+/**
+ * Wrap Metro configuration with soda-gql support.
+ *
+ * This function modifies the Metro configuration to use the soda-gql
+ * transformer, which applies GraphQL code transformations at build time.
+ *
+ * @example
+ * ```typescript
+ * // Expo project (metro.config.js)
+ * const { getDefaultConfig } = require("expo/metro-config");
+ * const { withSodaGql } = require("@soda-gql/metro-plugin");
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withSodaGql(config);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // React Native bare project (metro.config.js)
+ * const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+ * const { withSodaGql } = require("@soda-gql/metro-plugin");
+ *
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withSodaGql(config);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With options
+ * const config = getDefaultConfig(__dirname);
+ * module.exports = withSodaGql(config, {
+ *   configPath: "./soda-gql.config.ts",
+ *   debug: true,
+ * });
+ * ```
+ *
+ * @param config - The Metro configuration to wrap
+ * @param options - Optional plugin configuration
+ * @returns Modified Metro configuration with soda-gql transformer
+ */
+declare function withSodaGql<T extends MetroConfig>(config: T, options?: MetroPluginOptions): T;
+//#endregion
+export { type MetroConfig, type MetroPluginOptions, type MetroTransformParams, type MetroTransformResult, type MetroTransformer, type TransformerType, getSharedArtifact, getSharedState, getStateKey, withSodaGql };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;;;;;AAsDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,sBAAsB,qBAAqB,aAAY,qBAA0B"}

package/dist/index.mjs

@@ -0,0 +1,60 @@
+import { t as __require } from "./chunk--GtjC1aJ.mjs";
+import { getSharedArtifact, getSharedState, getStateKey, getStateKey as getStateKey$1, setSharedTransformerType } from "@soda-gql/plugin-common";
+
+//#region packages/metro-plugin/src/index.ts
+/**
+* Wrap Metro configuration with soda-gql support.
+*
+* This function modifies the Metro configuration to use the soda-gql
+* transformer, which applies GraphQL code transformations at build time.
+*
+* @example
+* ```typescript
+* // Expo project (metro.config.js)
+* const { getDefaultConfig } = require("expo/metro-config");
+* const { withSodaGql } = require("@soda-gql/metro-plugin");
+*
+* const config = getDefaultConfig(__dirname);
+* module.exports = withSodaGql(config);
+* ```
+*
+* @example
+* ```typescript
+* // React Native bare project (metro.config.js)
+* const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+* const { withSodaGql } = require("@soda-gql/metro-plugin");
+*
+* const config = getDefaultConfig(__dirname);
+* module.exports = withSodaGql(config);
+* ```
+*
+* @example
+* ```typescript
+* // With options
+* const config = getDefaultConfig(__dirname);
+* module.exports = withSodaGql(config, {
+*   configPath: "./soda-gql.config.ts",
+*   debug: true,
+* });
+* ```
+*
+* @param config - The Metro configuration to wrap
+* @param options - Optional plugin configuration
+* @returns Modified Metro configuration with soda-gql transformer
+*/
+function withSodaGql(config, options = {}) {
+	const transformerPath = __require.resolve("@soda-gql/metro-plugin/transformer");
+	const stateKey = getStateKey$1(options.configPath);
+	if (options.transformer) setSharedTransformerType(stateKey, options.transformer);
+	return {
+		...config,
+		transformer: {
+			...config.transformer,
+			babelTransformerPath: transformerPath
+		}
+	};
+}
+
+//#endregion
+export { getSharedArtifact, getSharedState, getStateKey, withSodaGql };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["getStateKey"],"sources":["../src/index.ts"],"sourcesContent":["import { getStateKey, setSharedTransformerType } from \"@soda-gql/plugin-common\";\nimport type { MetroConfig, MetroPluginOptions } from \"./types\";\n\n// Re-export shared state utilities for advanced usage\nexport { getSharedArtifact, getSharedState, getStateKey } from \"@soda-gql/plugin-common\";\nexport type {\n  MetroConfig,\n  MetroPluginOptions,\n  MetroTransformer,\n  MetroTransformParams,\n  MetroTransformResult,\n  TransformerType,\n} from \"./types\";\n\n/**\n * Wrap Metro configuration with soda-gql support.\n *\n * This function modifies the Metro configuration to use the soda-gql\n * transformer, which applies GraphQL code transformations at build time.\n *\n * @example\n * ```typescript\n * // Expo project (metro.config.js)\n * const { getDefaultConfig } = require(\"expo/metro-config\");\n * const { withSodaGql } = require(\"@soda-gql/metro-plugin\");\n *\n * const config = getDefaultConfig(__dirname);\n * module.exports = withSodaGql(config);\n * ```\n *\n * @example\n * ```typescript\n * // React Native bare project (metro.config.js)\n * const { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n * const { withSodaGql } = require(\"@soda-gql/metro-plugin\");\n *\n * const config = getDefaultConfig(__dirname);\n * module.exports = withSodaGql(config);\n * ```\n *\n * @example\n * ```typescript\n * // With options\n * const config = getDefaultConfig(__dirname);\n * module.exports = withSodaGql(config, {\n *   configPath: \"./soda-gql.config.ts\",\n *   debug: true,\n * });\n * ```\n *\n * @param config - The Metro configuration to wrap\n * @param options - Optional plugin configuration\n * @returns Modified Metro configuration with soda-gql transformer\n */\nexport function withSodaGql<T extends MetroConfig>(config: T, options: MetroPluginOptions = {}): T {\n  // Use package export path to ensure correct resolution from any location\n  const transformerPath = require.resolve(\"@soda-gql/metro-plugin/transformer\");\n\n  // Store transformer type in shared state for the transformer module to read\n  const stateKey = getStateKey(options.configPath);\n  if (options.transformer) {\n    setSharedTransformerType(stateKey, options.transformer);\n  }\n\n  return {\n    ...config,\n    transformer: {\n      ...config.transformer,\n      babelTransformerPath: transformerPath,\n    },\n  } as T;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,YAAmC,QAAW,UAA8B,EAAE,EAAK;CAEjG,MAAM,4BAA0B,QAAQ,qCAAqC;CAG7E,MAAM,WAAWA,cAAY,QAAQ,WAAW;AAChD,KAAI,QAAQ,YACV,0BAAyB,UAAU,QAAQ,YAAY;AAGzD,QAAO;EACL,GAAG;EACH,aAAa;GACX,GAAG,OAAO;GACV,sBAAsB;GACvB;EACF"}