@graphox/babel-plugin-plugin 0.1.13

package/README.md

@@ -0,0 +1,129 @@
+# @graphox/babel-plugin
+
+## Overview
+
+Ensures GraphQL AST files are properly codesplit, preventing them from all ending up in the initial chunk.
+
+## Why Use This Plugin?
+
+Codegen already generates AST files at compile time. The problem is bundler behavior:
+
+**Without plugin:**
+```
+Initial chunk: ALL generated AST files (~50KB+)
+Lazy chunks: empty or minimal
+```
+
+**With plugin:**
+```
+Initial chunk: ~1KB (just imports)
+Lazy chunks: each operation in its chunk
+```
+
+## Installation
+
+```bash
+pnpm add --save-dev @graphox/babel-plugin
+```
+
+## Quick Start
+
+### 1. Configure graphox
+
+```yaml
+# graphox.yaml
+output_dir: "__generated__"
+projects:
+  - schema: "schema.graphql"
+    include: "src/**/*.{ts,tsx}"
+```
+
+### 2. Run Codegen
+
+```bash
+pnpm graphox codegen
+```
+
+### 3. Configure Babel
+
+```javascript
+// babel.config.js
+const path = require('path');
+
+module.exports = {
+  presets: ['@babel/preset-typescript'],
+  plugins: [
+    ['@graphox/babel-plugin', {
+      manifestPath: path.resolve(__dirname, '__generated__/manifest.json'),
+      outputDir: path.resolve(__dirname, '__generated__'),
+      graphqlImportPaths: ['@/graphql']
+    }]
+  ]
+};
+```
+
+## Metro (React Native)
+
+Metro uses Babel transformers under the hood. Configure in `metro.config.js`:
+
+```javascript
+// metro.config.js
+module.exports = {
+  transformer: {
+    babelTransformerPath: require.resolve('@graphox/babel-plugin'),
+  },
+};
+```
+
+For full compatibility, also configure in `babel.config.js`.
+
+## Codesplitting Impact
+
+| Configuration | Initial Chunk | Per-Lazy-Chunk |
+|--------------|--------------|----------------|
+| Without plugin | ~50KB+ (all AST) | ~1KB |
+| With plugin | ~1KB | ~1KB |
+
+## Configuration Options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `manifestPath` | `string` | Yes* | Path to `manifest.json` generated by codegen |
+| `manifestData` | `object[]` | Yes* | Inline manifest data (alternative to `manifestPath`) |
+| `outputDir` | `string` | Yes | Directory containing generated files |
+| `graphqlImportPaths` | `string[]` | No | Explicit import paths to treat as GraphQL entrypoints |
+| `emitExtensions` | `string` | No | File extension for generated imports: `"none"` (default), `"ts"`, `"js"`, `"dts"` |
+
+*Either `manifestPath` or `manifestData` is required.
+
+### emitExtensions
+
+Controls the file extension appended to generated import paths. Should match the `emit_extensions` setting in your `graphox.yaml`:
+
+| Value | Result |
+|-------|--------|
+| `"none"` (default) | `import { X } from "./file.codegen"` |
+| `"ts"` | `import { X } from "./file.codegen.ts"` |
+| `"js"` | `import { X } from "./file.codegen.js"` |
+| `"dts"` | `import { X } from "./file.codegen.d.ts"` |
+
+## Fragment Documents
+
+When `generate_ast_for_fragments: true` is enabled in your config, fragment documents are also included in the manifest and will be properly rewritten by the plugin.
+
+## When to Use
+
+| Build Tool | Recommended Plugin |
+|------------|-------------------|
+| React Native (Metro) | Babel |
+| Webpack | Babel |
+| Create React App | Babel |
+| Storybook | Babel |
+| rsbuild | Use SWC plugin |
+| Turbopack/Next.js | Use SWC plugin |
+
+## See Also
+
+- [SWC Plugin](../swc/README.md)
+- [graphox CLI](../../README.md)
+- [Configuration Guide](../../docs/configurations.md)

package/index.js

@@ -0,0 +1,227 @@
+const path = require('path');
+const fs = require('fs');
+
+function normalize(s) {
+  return s.replace(/\s+/g, '');
+}
+
+/**
+ * Convert emitExtensions config to file extension string
+ * @param {string|undefined} emitExtensions - One of: "none", "ts", "dts", "js"
+ * @returns {string} The file extension to append (e.g., ".ts", ".js", or "")
+ */
+function getExtension(emitExtensions) {
+  switch (emitExtensions) {
+    case 'ts':
+      return '.ts';
+    case 'dts':
+      return '.d.ts';
+    case 'js':
+      return '.js';
+    case 'none':
+    case undefined:
+    case null:
+    default:
+      return '';
+  }
+}
+
+module.exports = function (babel) {
+  const { types: t } = babel;
+
+  return {
+    name: '@graphox/babel-plugin',
+    visitor: {
+      Program: {
+        enter(programPath, state) {
+          const {
+            manifestPath,
+            manifestData,
+            outputDir,
+            graphqlImportPaths = [],
+            emitExtensions,
+          } = state.opts;
+
+          if (!outputDir) {
+            throw new Error('outputDir is required for @graphox/babel-plugin');
+          }
+
+          const extension = getExtension(emitExtensions);
+
+          let entries = [];
+          if (manifestData) {
+            entries = manifestData;
+          } else if (manifestPath) {
+            try {
+              const content = fs.readFileSync(manifestPath, 'utf8');
+              entries = JSON.parse(content);
+            } catch (e) {
+              // Ignore missing manifest during build if necessary
+            }
+          }
+
+          const manifest = new Map();
+          const documentNameToEntry = new Map();
+          for (const entry of entries) {
+            manifest.set(normalize(entry.source), entry);
+            if (entry.name) {
+              documentNameToEntry.set(entry.name, entry);
+            }
+          }
+
+          const currentFile = state.file.opts.filename;
+          const absoluteOutputDir = path.resolve(outputDir);
+          const absoluteIndexPath = path.join(absoluteOutputDir, 'index');
+          const absoluteEntrypointPath = path.join(absoluteOutputDir, 'graphql');
+
+          // If processing the entrypoint itself, clear it
+          if (currentFile) {
+            const currentFileNoExt = currentFile.replace(/\.(js|ts)x?$/, '');
+            if (currentFileNoExt === absoluteEntrypointPath) {
+              programPath.node.body = [
+                t.exportNamedDeclaration(
+                  t.variableDeclaration('const', [
+                    t.variableDeclarator(
+                      t.identifier('graphql'),
+                      t.arrowFunctionExpression([], t.nullLiteral())
+                    ),
+                  ])
+                ),
+                t.exportNamedDeclaration(
+                  t.variableDeclaration('const', [
+                    t.variableDeclarator(t.identifier('gql'), t.identifier('graphql')),
+                  ])
+                ),
+              ];
+              return;
+            }
+          }
+
+          const isOurGraphqlPath = (src) => {
+            if (graphqlImportPaths.includes(src)) return true;
+            const srcNoExt = src.replace(/\.(js|ts)x?$/, '');
+            if (graphqlImportPaths.includes(srcNoExt)) return true;
+
+            if (src.startsWith('#') && src.includes('graphql')) return true;
+
+            if (currentFile && (src.startsWith('.') || src.startsWith('/'))) {
+              const absoluteSrc = path.resolve(path.dirname(currentFile), srcNoExt);
+              if (absoluteSrc === absoluteEntrypointPath || absoluteSrc === absoluteIndexPath) {
+
+                return true;
+              }
+              // Handle directory import resolving to index
+              const absoluteSrcIndex = path.join(absoluteSrc, 'index');
+              if (absoluteSrcIndex === absoluteIndexPath) {
+                return true;
+              }
+            }
+
+            return false;
+          };
+
+          const graphqlIds = new Set();
+          // newImports stores: localName -> { sourcePath, importedName }
+          // importedName is needed for aliased imports like { GetUserDocument as MyDoc }
+          const newImports = new Map();
+
+          // First pass: identify imports from our graphql.ts or index.ts
+          programPath.traverse({
+            ImportDeclaration(importPath) {
+              const src = importPath.node.source.value;
+              if (isOurGraphqlPath(src)) {
+                const importIsTypeOnly = importPath.node.importKind === 'type';
+                importPath.get('specifiers').forEach((specifier) => {
+                  if (specifier.isImportSpecifier()) {
+                    // Handle both Identifier and StringLiteral for imported name
+                    const importedName = t.isIdentifier(specifier.node.imported) 
+                      ? specifier.node.imported.name 
+                      : specifier.node.imported.value;
+                    const localName = specifier.node.local.name;
+                    const specifierIsTypeOnly = specifier.node.importKind === 'type' || importIsTypeOnly;
+                    
+                    if (importedName === 'graphql' || importedName === 'gql') {
+                      graphqlIds.add(specifier.scope.getBinding(localName));
+                    } else if (documentNameToEntry.has(importedName) && !specifierIsTypeOnly) {
+                      // Only rewrite non-type-only imports of document names
+                      const entry = documentNameToEntry.get(importedName);
+                      const codegenAbsPath = path.join(absoluteOutputDir, entry.path);
+                      let relPath = path.relative(path.dirname(currentFile), codegenAbsPath);
+                      if (!relPath.startsWith('.') && !relPath.startsWith('/')) {
+                        relPath = './' + relPath;
+                      }
+                      // Append the emit extension
+                      relPath += extension;
+                      newImports.set(localName, { sourcePath: relPath, importedName });
+                    }
+                  }
+                });
+              }
+            },
+          });
+
+          // Second pass: transform graphql() calls
+          programPath.traverse({
+            CallExpression(callPath) {
+              const callee = callPath.get('callee');
+              if (callee.isIdentifier()) {
+                const binding = callPath.scope.getBinding(callee.node.name);
+                if (graphqlIds.has(binding)) {
+                  const arg = callPath.node.arguments[0];
+                  let source = null;
+
+                  if (t.isTemplateLiteral(arg)) {
+                    if (arg.quasis.length === 1) {
+                      source = arg.quasis[0].value.cooked || arg.quasis[0].value.raw;
+                    }
+                  } else if (t.isStringLiteral(arg)) {
+                    source = arg.value;
+                  }
+
+                  if (source) {
+                    const normalizedSource = normalize(source);
+                    const entry = manifest.get(normalizedSource);
+                    if (entry) {
+                      const codegenAbsPath = path.join(absoluteOutputDir, entry.path);
+                      let relPath = path.relative(path.dirname(currentFile), codegenAbsPath);
+                      if (!relPath.startsWith('.') && !relPath.startsWith('/')) {
+                        relPath = './' + relPath;
+                      }
+                      // Append the emit extension
+                      relPath += extension;
+
+                      newImports.set(entry.name, { sourcePath: relPath, importedName: entry.name });
+                      callPath.replaceWith(t.identifier(entry.name));
+                    }
+                  }
+                }
+              }
+            },
+          });
+
+          // Third pass: remove ALL imports from graphql.ts/index.ts
+          programPath.traverse({
+            ImportDeclaration(importPath) {
+              const src = importPath.node.source.value;
+              if (isOurGraphqlPath(src)) {
+                importPath.remove();
+              }
+            },
+          });
+
+          // Add new imports at the top (sorted alphabetically by local name)
+          const sortedNewImports = Array.from(newImports.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+          for (const [localName, { sourcePath, importedName }] of sortedNewImports) {
+            const specifier = t.importSpecifier(
+              t.identifier(localName),
+              t.identifier(importedName)
+            );
+            programPath.node.body.unshift(
+              t.importDeclaration([specifier], t.stringLiteral(sourcePath))
+            );
+          }
+        },
+      },
+    },
+  };
+};

package/index.test.js

@@ -0,0 +1,337 @@
+import { describe, it, expect } from 'vitest';
+import * as babel from '@babel/core';
+import path from 'path';
+import plugin from './index.js';
+
+function transform(code, options, filename = 'test.ts') {
+  const result = babel.transformSync(code, {
+    plugins: [[plugin, options]],
+    presets: ['@babel/preset-typescript'],
+    filename: path.resolve(filename),
+    babelrc: false,
+    configFile: false,
+  });
+  return result.code;
+}
+
+describe('@graphox/babel-plugin', () => {
+  const defaultManifest = [
+    {
+      source: 'query { me { id } }',
+      path: './query.codegen',
+      name: 'MyQueryDocument',
+    },
+  ];
+
+  const defaultOptions = {
+    manifestData: defaultManifest,
+    outputDir: './gen',
+  };
+
+  it('transforms basic graphql call and removes import', () => {
+    const code = "import { graphql } from './gen/graphql'; const q = graphql(`query { me { id } }`);";
+    const output = transform(code, defaultOptions);
+
+    expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+    expect(output).toContain('const q = MyQueryDocument;');
+    expect(output).not.toContain('from "./gen/graphql"');
+  });
+
+  it('transforms multiple calls', () => {
+    const manifest = [
+      {
+        source: 'query GetMe { me { id } }',
+        path: './me.codegen',
+        name: 'GetMeDocument',
+      },
+      {
+        source: 'query GetOther { other { id } }',
+        path: './other.codegen',
+        name: 'GetOtherDocument',
+      },
+    ];
+    const options = { manifestData: manifest, outputDir: './gen' };
+    const code = `
+      import { graphql } from './gen/graphql';
+      const q1 = graphql(\`query GetMe { me { id } }\`);
+      const q2 = graphql(\`query GetOther { other { id } }\`);
+    `;
+    const output = transform(code, options);
+
+    expect(output).toContain('import { GetMeDocument } from "./gen/me.codegen";');
+    expect(output).toContain('import { GetOtherDocument } from "./gen/other.codegen";');
+    expect(output).toContain('const q1 = GetMeDocument;');
+    expect(output).toContain('const q2 = GetOtherDocument;');
+  });
+
+  it('removes all imports from graphql.ts including unknown specifiers', () => {
+    const code = "import { graphql, other } from './gen/graphql'; const q = graphql(`query { me { id } }`);";
+    const output = transform(code, defaultOptions);
+
+    expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+    expect(output).not.toContain('from "./gen/graphql"');
+    expect(output).not.toContain('graphql,');
+    expect(output).not.toContain(', graphql');
+    expect(output).not.toContain('other');
+  });
+
+  it('resolves relative paths correctly', () => {
+    const manifest = [
+      {
+        source: 'query { me { id } }',
+        path: './src/query.codegen',
+        name: 'MyQueryDocument',
+      },
+    ];
+    const outputDir = path.resolve('/root/gen');
+    const options = { manifestData: manifest, outputDir };
+    const filename = '/root/app/test.ts';
+
+    const code = "import { graphql } from '../gen/graphql'; const q = graphql(`query { me { id } }`);";
+    const output = transform(code, options, filename);
+
+    expect(output).toContain('import { MyQueryDocument } from "../gen/src/query.codegen";');
+  });
+
+  it('supports gql tag', () => {
+    const code = "import { gql } from './gen/graphql'; const q = gql(`query { me { id } }`);";
+    const output = transform(code, defaultOptions);
+
+    expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+    expect(output).toContain('const q = MyQueryDocument;');
+    expect(output).not.toContain('from "./gen/graphql"');
+  });
+
+  it('is whitespace insensitive (normalization)', () => {
+    const code = `
+      import { graphql } from './gen/graphql';
+      const q = graphql(\`query {
+        me {
+          id
+        }
+      }\`);
+    `;
+    const output = transform(code, defaultOptions);
+    expect(output).toContain('const q = MyQueryDocument;');
+  });
+
+  it('does not transform identifiers from other libraries', () => {
+    const code = "import { graphql } from 'other-lib'; const q = graphql(`query { me { id } }`);";
+    const output = transform(code, defaultOptions);
+
+    expect(output).toContain("import { graphql } from 'other-lib';");
+    expect(output).toContain('graphql(');
+    expect(output).not.toContain('MyQueryDocument');
+  });
+
+  it('supports subpath imports (#graphql)', () => {
+    const code = "import { graphql } from '#graphql/graphql'; const q = graphql(`query { me { id } }`);";
+    const output = transform(code, defaultOptions);
+
+    expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+    expect(output).toContain('const q = MyQueryDocument;');
+  });
+
+  it('supports explicit import paths', () => {
+    const options = {
+      ...defaultOptions,
+      graphqlImportPaths: ['@app/gql-entrypoint'],
+    };
+    const code = "import { graphql } from '@app/gql-entrypoint'; const q = graphql(`query { me { id } }`);";
+    const output = transform(code, options);
+
+    expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+    expect(output).toContain('const q = MyQueryDocument;');
+  });
+
+  it('clears the entrypoint file', () => {
+    const outputDir = path.resolve('./gen');
+    const filename = path.join(outputDir, 'graphql.ts');
+    const code = "export const graphql = () => { /* big map */ }; export const gql = graphql;";
+    const output = transform(code, { outputDir }, filename);
+
+    expect(output).toContain('export const graphql = () => null;');
+    expect(output).toContain('export const gql = graphql;');
+    expect(output).not.toContain('big map');
+  });
+
+  describe('emit extensions', () => {
+    it('appends .ts extension when emitExtensions is "ts"', () => {
+      const code = "import { graphql } from './gen/graphql'; const q = graphql(`query { me { id } }`);";
+      const output = transform(code, { ...defaultOptions, emitExtensions: 'ts' });
+
+      expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen.ts";');
+    });
+
+    it('appends .js extension when emitExtensions is "js"', () => {
+      const code = "import { graphql } from './gen/graphql'; const q = graphql(`query { me { id } }`);";
+      const output = transform(code, { ...defaultOptions, emitExtensions: 'js' });
+
+      expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen.js";');
+    });
+
+    it('appends .d.ts extension when emitExtensions is "dts"', () => {
+      const code = "import { graphql } from './gen/graphql'; const q = graphql(`query { me { id } }`);";
+      const output = transform(code, { ...defaultOptions, emitExtensions: 'dts' });
+
+      expect(output).toContain('import { MyQueryDocument } from "./gen/query.codegen.d.ts";');
+    });
+
+    it('does not append extension when emitExtensions is "none" or omitted', () => {
+      const code = "import { graphql } from './gen/graphql'; const q = graphql(`query { me { id } }`);";
+      const output1 = transform(code, { ...defaultOptions, emitExtensions: 'none' });
+      const output2 = transform(code, defaultOptions);
+
+      expect(output1).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+      expect(output2).toContain('import { MyQueryDocument } from "./gen/query.codegen";');
+    });
+
+    it('appends extension to relative paths correctly', () => {
+      const manifest = [
+        {
+          source: 'query { me { id } }',
+          path: './src/query.codegen',
+          name: 'MyQueryDocument',
+        },
+      ];
+      const outputDir = path.resolve('/root/gen');
+      const options = { manifestData: manifest, outputDir, emitExtensions: 'js' };
+      const filename = '/root/app/test.ts';
+
+      const code = "import { graphql } from '../gen/graphql'; const q = graphql(`query { me { id } }`);";
+      const output = transform(code, options, filename);
+
+      expect(output).toContain('import { MyQueryDocument } from "../gen/src/query.codegen.js";');
+    });
+  });
+
+  describe('re-exported document imports', () => {
+    const reExportManifest = [
+      {
+        source: 'query GetUser { user { id } }',
+        path: './user.codegen',
+        name: 'GetUserDocument',
+      },
+      {
+        source: 'query GetPost { post { id } }',
+        path: './post.codegen',
+        name: 'GetPostDocument',
+      },
+    ];
+
+    const reExportOptions = {
+      manifestData: reExportManifest,
+      outputDir: './gen',
+    };
+
+    it('rewrites single document name import from graphql entrypoint', () => {
+      const code = "import { GetUserDocument } from './gen/graphql'; console.log(GetUserDocument);";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).not.toContain("from './gen/graphql'");
+      expect(output).toContain('console.log(GetUserDocument);');
+    });
+
+    it('rewrites multiple document name imports to correct codegen files', () => {
+      const code = "import { GetUserDocument, GetPostDocument } from './gen/graphql';";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).toContain("import { GetPostDocument } from \"./gen/post.codegen\";");
+      expect(output).not.toContain("from './gen/graphql'");
+    });
+
+    it('removes graphql import alongside document imports', () => {
+      const code = "import { GetUserDocument, graphql } from './gen/graphql';";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).not.toContain("from './gen/graphql'");
+      expect(output).not.toContain('graphql');
+    });
+
+    it('removes non-document imports while rewriting document imports', () => {
+      const code = "import { GetUserDocument, SomeOtherType } from './gen/graphql';";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).not.toContain("from './gen/graphql'");
+      expect(output).not.toContain('SomeOtherType');
+    });
+
+    it('removes type-only imports (they dont exist in minified JS)', () => {
+      const code = "import type { GetUserDocument } from './gen/graphql';";
+      const output = transform(code, reExportOptions);
+
+      // Type-only imports are removed entirely since they don't exist in minified JS
+      expect(output).not.toContain("from './gen/graphql'");
+      expect(output).not.toContain('GetUserDocument');
+    });
+
+    it('removes inline type specifiers from mixed imports', () => {
+      const code = "import { GetUserDocument, type GetPostDocument } from './gen/graphql';";
+      const output = transform(code, reExportOptions);
+
+      // Only GetUserDocument (non-type) is kept and rewritten
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      // GetPostDocument with inline type is removed
+      expect(output).not.toContain("GetPostDocument");
+      expect(output).not.toContain("from './gen/graphql'");
+    });
+
+    it('rewrites imports from index.ts barrel file', () => {
+      const code = "import { GetUserDocument } from './gen/index';";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).not.toContain("from './gen/index'");
+    });
+
+    it('rewrites imports from index.ts with extension', () => {
+      const code = "import { GetUserDocument } from './gen/index.ts';";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).not.toContain("from './gen/index");
+    });
+
+    it('handles aliased document imports', () => {
+      const code = "import { GetUserDocument as MyUserDoc } from './gen/graphql'; console.log(MyUserDoc);";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument as MyUserDoc } from \"./gen/user.codegen\";");
+      expect(output).toContain('console.log(MyUserDoc);');
+    });
+
+    it('rewrites fragment document imports when generate_ast_for_fragments is enabled', () => {
+      const manifest = [
+        {
+          source: 'query GetUser { user { id } }',
+          path: './user.codegen',
+          name: 'GetUserDocument',
+        },
+        {
+          source: 'fragment UserFields on User { id name }',
+          path: './userFields.codegen',
+          name: 'UserFieldsFragmentDocument',
+        },
+      ];
+      const options = { manifestData: manifest, outputDir: './gen' };
+      const code = "import { GetUserDocument, UserFieldsFragmentDocument } from './gen/graphql';";
+      const output = transform(code, options);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).toContain("import { UserFieldsFragmentDocument } from \"./gen/userFields.codegen\";");
+      expect(output).not.toContain("from './gen/graphql'");
+    });
+
+    it('rewrites imports from directory resolving to index', () => {
+      const code = "import { GetUserDocument } from './gen';";
+      const output = transform(code, reExportOptions);
+
+      expect(output).toContain("import { GetUserDocument } from \"./gen/user.codegen\";");
+      expect(output).not.toContain("from './gen'");
+    });
+  });
+});

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@graphox/babel-plugin-plugin",
+  "version": "0.1.13",
+  "description": "Babel plugin for Graphox codesplitting",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/soundtrackyourbrand/graphox",
+    "directory": "plugins/babel"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-typescript": "^7.28.5",
+    "vitest": "^1.0.0"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/test-fixtures/basic/expected/app.transformed.tsx

@@ -0,0 +1,3 @@
+import { GetUserDocument } from './graphql';
+
+export const query = GetUserDocument;

package/test-fixtures/basic/graphql.yaml

@@ -0,0 +1,4 @@
+output_dir: "__generated__"
+projects:
+  - schema: "schema.graphql"
+    include: "src/**/*.{ts,tsx}"

package/test-fixtures/basic/schema.graphql

@@ -0,0 +1,8 @@
+type User {
+  id: ID!
+  name: String!
+}
+
+type Query {
+  user(id: ID!): User
+}

package/test-fixtures/basic/src/app.tsx

@@ -0,0 +1,8 @@
+import { graphql } from './graphql';
+
+export const query = graphql(`query GetUser {
+  user(id: "1") {
+    id
+    name
+  }
+}`);

package/test-fixtures/gql-tag/expected/app.transformed.tsx

@@ -0,0 +1,3 @@
+import { GetMeDocument } from './graphql';
+
+export const query = GetMeDocument;

package/test-fixtures/gql-tag/graphql.yaml

@@ -0,0 +1,4 @@
+output_dir: "__generated__"
+projects:
+  - schema: "schema.graphql"
+    include: "src/**/*.{ts,tsx}"

package/test-fixtures/gql-tag/schema.graphql

@@ -0,0 +1,8 @@
+type User {
+  id: ID!
+  name: String!
+}
+
+type Query {
+  me: User
+}

package/test-fixtures/gql-tag/src/app.tsx

@@ -0,0 +1,8 @@
+import { gql } from './graphql';
+
+export const query = gql(`query GetMe {
+  me {
+    id
+    name
+  }
+}`);

package/test-fixtures/multiple-queries/expected/query1.transformed.ts

@@ -0,0 +1,3 @@
+import { GetMeDocument } from './graphql';
+
+export const meQuery = GetMeDocument;

package/test-fixtures/multiple-queries/expected/query2.transformed.ts

@@ -0,0 +1,3 @@
+import { GetSettingsDocument } from './graphql';
+
+export const settingsQuery = GetSettingsDocument;

package/test-fixtures/multiple-queries/graphql.yaml

@@ -0,0 +1,4 @@
+output_dir: "__generated__"
+projects:
+  - schema: "schema.graphql"
+    include: "src/**/*.{ts,tsx}"

package/test-fixtures/multiple-queries/schema.graphql

@@ -0,0 +1,10 @@
+type User {
+  id: ID!
+  name: String!
+  email: String!
+}
+
+type Query {
+  me: User
+  user(id: ID!): User
+}

package/test-fixtures/multiple-queries/src/query1.ts

@@ -0,0 +1,16 @@
+import { graphql } from './graphql';
+
+export const meQuery = graphql(`query GetMe {
+  me {
+    id
+    name
+  }
+}`);
+
+export const userQuery = graphql(`query GetUser($id: ID!) {
+  user(id: $id) {
+    id
+    name
+    email
+  }
+}`);

package/test-fixtures/multiple-queries/src/query2.ts

@@ -0,0 +1,8 @@
+import { graphql } from './graphql';
+
+export const settingsQuery = graphql(`query GetSettings {
+  settings {
+    theme
+    notifications
+  }
+}`);