add an experimental feature omitTagImport

.changeset/metal-masks-allow.md

@@ -0,0 +1,5 @@
+---
+"vite-plugin-relay-lite": patch
+---
+
+Add experimental feature to omit `graphql` tag imports

README.md

@@ -96,6 +96,22 @@ Or you can set the `codegen` option to `false` to disable it.
 
 Plugin respects the `codegenCommand` option in the Relay config, it uses `relay-compiler` if not set.
 
+### (Experimental) Omit `graphql` tag imports
+
+You can set `omitTagImport: true` to omit import/require statements for the `graphql` tag.
+
+```js
+{
+  plugins: [
+    relay({
+      omitTagImport: true
+    })
+  ]
+}
+```
+
+This might causes the Vite build to fail, allowing early detection of potential transform errors.
+
 ## Acknowledgements
 
 The compilation has ported from [esbuild-plugin-relay](https://github.com/smartvokat/esbuild-plugin-relay), which was originally introduced from [a gist by Samuel Cormier-Iijima](https://gist.github.com/sciyoshi/34e5865f2523848f0d60b4cdd49382ee)

src/compile.test.ts

@@ -116,6 +116,85 @@ test('compile esmodule in-development', () => {
   `);
 });
 
+test('compile with omitTagImport', () => {
+  const basePath = '/project';
+  const id = '__MODULE__';
+
+  const source = dedent`
+    import {graphql} from 'react-relay';
+
+    import { graphql } from 'react-relay';
+
+    import {another1,graphql} from 'react-relay';
+
+    import {graphql,another2} from 'react-relay';
+
+    import {another1,graphql,another2} from 'react-relay';
+
+    import {
+      other,
+      graphql,
+      asdfdsaf
+    } from 'react-relay';
+
+    const {
+      other,
+      graphql,
+      asdfdsaf
+    } = require('react-relay');
+
+    let {graphql} = await import('react-relay');
+
+    var {graphql} = require('react-relay');
+
+    const query = graphql\`
+      query Test {
+        __typename
+      }
+    \`;
+  `;
+
+  const result = compile(
+    path.join(basePath, id),
+    source,
+    {
+      module: 'esmodule',
+      isDevelopment: false,
+      codegenCommand: 'codegen',
+      omitTagImport: true,
+    },
+  );
+
+  expect(result.code).toMatchInlineSnapshot(`
+    "import graphql__f4ce3be5b8e81a99157cd3e378f936b6 from "./__generated__/Test.graphql";
+    import {} from 'react-relay';
+
+    import {} from 'react-relay';
+
+    import {another1} from 'react-relay';
+
+    import {another2} from 'react-relay';
+
+    import {another1,another2} from 'react-relay';
+
+    import {
+      other,
+      asdfdsaf
+    } from 'react-relay';
+
+    const {
+      other,
+      asdfdsaf
+    } = require('react-relay');
+
+    let {} = await import('react-relay');
+
+    var {} = require('react-relay');
+
+    const query = graphql__f4ce3be5b8e81a99157cd3e378f936b6;"
+  `);
+});
+
 test('mixed case', () => {
   const basePath = '/project';
   const id = '__MODULE__';

src/compile.ts

@@ -9,6 +9,7 @@ export type CompileOptions = {
   module: 'esmodule' | 'commonjs';
   codegenCommand: string;
   isDevelopment: boolean;
+  omitTagImport?: boolean;
   artifactDirectory?: string;
 };
 
@@ -123,12 +124,23 @@ export function compile(
     [...new Set(imports), ''].join('\n'),
   );
 
+  if (options.omitTagImport) {
+    omitImports(content);
+  }
+
   return {
     code: content.toString(),
     map: content.generateMap({ hires: true }),
   };
 }
 
+function omitImports(content: MagicString) {
+  const pattern = /(^[ \t]*(import|const|let|var)\s*{([^}]*?\s*)??)(\s*graphql,\s*|\s*,?\s*graphql\s*)([^}]*\s*?})/gm;
+  content.replace(pattern, (_match, $1: string, _$2, _$3, _omit: string, $5: string) => {
+    return $1 + $5;
+  });
+}
+
 function getErrorMessage(name: string, codegenCommand: string) {
   return (
     `The definition of '${name}' appears to have changed. Run \`${codegenCommand}\` to ` +

src/plugin.ts

@@ -13,6 +13,11 @@ export type Config = {
   codegen?: boolean,
   relayConfig?: string | AnyObject,
   module?: 'esmodule' | 'commonjs',
+
+  /**
+   * (Experimental) omit import statement of `graphql` tag
+   */
+  omitTagImport?: boolean,
 };
 
 const configExplorer = cosmiconfigSync('relay', {
@@ -55,6 +60,7 @@ export default function makePlugin(config: Config = {}): Plugin {
   const artifactDirectory = relayConfig['artifactDirectory'];
   const codegenCommand = (relayConfig['codegenCommand'] as string) || 'relay-compiler';
   const module = config.module || ((relayConfig['eagerESModules'] || relayConfig['eagerEsModules']) ? 'esmodule' : 'commonjs');
+  const omitTagImport = config.omitTagImport ?? false;
 
   if (module !== 'esmodule') {
     console.warn(
@@ -105,6 +111,7 @@ export default function makePlugin(config: Config = {}): Plugin {
       const result = compile(id, src, {
         module,
         codegenCommand,
+        omitTagImport,
         isDevelopment: env.NODE_ENV !== 'production',
         ...typeof artifactDirectory === 'string' && { artifactDirectory },
       });