Fix compilation for embedded query on query renderer (#177)

Fixed #173

.changeset/real-owls-kiss.md

@@ -0,0 +1,5 @@
+---
+"vite-plugin-relay-lite": patch
+---
+
+Fix compilation issue on QueryRenderer component

src/compile.test.ts

@@ -550,3 +550,61 @@ test('https://github.com/cometkim/vite-plugin-relay-lite/issues/72', () => {
     );"
   `);
 });
+
+test('https://github.com/cometkim/vite-plugin-relay-lite/issues/173', () => {
+  const basePath = '/project';
+  const id = '__MODULE__';
+
+  const source = dedent`
+    function Component () {
+      return (
+        <ErrorBoundary>
+          <QueryRenderer<AuthenticatedUserQuery>
+            query={graphql\`
+              query AuthenticatedUserQuery {
+                viewer {
+                  user {
+                    name
+                  }
+                }
+              }
+            \`}
+            render={({ props, error }) => {
+              if (error) throw error;
+              if (props) return <App {...cProps} {...props} loaded />;
+              return <App {...cProps} viewer={null} loaded={false} />;
+            }}
+          />
+        </ErrorBoundary>
+      )
+    }
+  `;
+
+  const result = compile(
+    path.join(basePath, id),
+    source,
+    {
+      module: 'esmodule',
+      isDevelopment: false,
+      codegenCommand: 'codegen',
+    },
+  );
+
+  expect(result.code).toMatchInlineSnapshot(`
+    "import graphql__2ee5243a7e1fe9751416af0fb9070ed8 from "./__generated__/AuthenticatedUserQuery.graphql";
+    function Component () {
+      return (
+        <ErrorBoundary>
+          <QueryRenderer<AuthenticatedUserQuery>
+            query={graphql__2ee5243a7e1fe9751416af0fb9070ed8}
+            render={({ props, error }) => {
+              if (error) throw error;
+              if (props) return <App {...cProps} {...props} loaded />;
+              return <App {...cProps} viewer={null} loaded={false} />;
+            }}
+          />
+        </ErrorBoundary>
+      )
+    }"
+  `);
+});

src/compile.ts

@@ -27,19 +27,19 @@ export function compile(
   const imports = new Set<string>();
 
   /**
-   * Tested on https://regex101.com/r/qfrOft/8
+   * Tested on https://regex101.com/r/qfrOft/9
    *
    * groups
    * - 1st `prefix`
    *   - `^` - Tag can appears at the beginning of the source
-   *   - `[\=\?\:\|\&\,\;\(\[\}\.\>]` - Or right after any of JS' exp/terminal token
+   *   - `[\=\?\:\|\&\,\;\(\[\{\}\.\>]` - Or right after any of JS' exp/terminal token
    *   - `\*\/` - Or right after /*...*\/ comment
    * - 2rd `blank`
    *   - `\s*` - blank characters (spaces, tabs, lf, etc) before the `graphql` tag
    * - 3rd `query`
    *   - `[\s\S]*?` - multiline text (lazy) inside of the `graphql` tag
    */
-  const pattern = /(?<prefix>^|[\=\?\:\|\&\,\;\(\[\}\.\>]|\*\/)(?<blank>\s*)graphql`(?<query>[\s\S]*?)`/gm;
+  const pattern = /(?<prefix>^|[\=\?\:\|\&\,\;\(\[\{\}\.\>]|\*\/)(?<blank>\s*)graphql`(?<query>[\s\S]*?)`/gm;
   content.replace(pattern, (match, prefix: string, blank: string, query: string) => {
     // Guess if it is in JS comment lines
     //
@@ -64,9 +64,9 @@ export function compile(
     ) {
       throw new Error(
         'Expected a fragment, mutation, query, or ' +
-          'subscription, got `' +
-          definition.kind +
-          '`.',
+        'subscription, got `' +
+        definition.kind +
+        '`.',
       );
     }
 
@@ -162,7 +162,7 @@ function getRelativeImportPath(
     relativePath.length === 0 || !relativePath.startsWith('.') ? './' : '';
 
   const joinedPath = relativeReference + path.join(relativePath, fileToRequire)
-  
+
   // replace all backslashes with forward slashes to fix issue with importing on windows
   return joinedPath.replaceAll("\\", "/");
-}
+}