@isograph/babel-plugin 0.3.0 → 0.4.0

package/BabelPluginIsograph.test.js

@@ -0,0 +1,97 @@
+import { transform } from '@babel/core';
+import { describe, expect, test, vi } from 'vitest';
+import plugin from './BabelPluginIsograph';
+
+// @ts-ignore
+async function mock(mockedUri, stub) {
+  const { Module } = await import('module');
+  const path = await import('path');
+  // @ts-ignore
+  Module._load_original = Module._load;
+  // @ts-ignore
+  Module._load = (uri, parent) => {
+    if (uri === mockedUri) return stub(path);
+    // @ts-ignore
+    return Module._load_original(uri, parent);
+  };
+}
+
+// In order to test `require`
+vi.hoisted(
+  () =>
+    // @ts-ignore
+    void mock('cosmiconfig', (path) => () => ({
+      searchSync: () => ({
+        config: {
+          project_root: './src/components',
+          schema: './backend/schema.graphql',
+          schema_extensions: ['./backend/schema-extension.graphql'],
+          options: {
+            module: 'esmodule',
+          },
+        },
+        filepath: `${path.resolve('.')}/isograph.config.json`,
+      }),
+    })),
+);
+
+describe('Babel plugin Isograph', () => {
+  const transformerOpts = {
+    babelrc: false,
+    filename: './src/components/Home/Header/File.ts',
+    plugins: [[plugin, {}]],
+  };
+
+  test('should return an identity for non called iso function', () => {
+    const code = `
+      export const HomeRoute = iso(\`
+          field Query.HomeRoute @component {
+            pets {
+              id
+            }
+          }
+        \`);
+      `;
+
+    const result = transform(code, transformerOpts) ?? { code: '' };
+
+    expect(result.code).toMatchInlineSnapshot(
+      `"export const HomeRoute = x => x;"`,
+    );
+  });
+
+  test('should preserve function call when iso applied', () => {
+    const code = `
+      export const HomeRoute = iso(\`
+          field Query.HomeRoute @component {
+            pets {
+              id
+            }
+          }
+        \`)(function HomeRouteComponent() {
+        return 'Render';
+      });
+      `;
+
+    const result = transform(code, transformerOpts) ?? { code: '' };
+
+    expect(result.code).toMatchInlineSnapshot(`
+        "export const HomeRoute = function HomeRouteComponent() {
+          return 'Render';
+        };"
+      `);
+  });
+
+  test('should transform the iso function to a require call', () => {
+    const code = `function test() { const a=iso(\`entrypoint Query.HomeRoute\`); }`;
+
+    const result = transform(code, transformerOpts) ?? { code: '' };
+
+    expect(result.code).toMatchInlineSnapshot(`
+      "import _HomeRoute from "../../__isograph/Query/HomeRoute/entrypoint.ts";
+      function test() {
+        const a = _HomeRoute;
+      }"
+    `);
+  });
+});

package/compileTag.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const { addDefault } = require('@babel/helper-module-imports');
 const pathModule = require('path');
 const os = require('os');
 
@@ -12,16 +13,28 @@ const os = require('os');
 function compileTag(t, path, config) {
   const callee = path.node.callee;
   if (t.isIdentifier(callee) && callee.name === 'iso' && path.node.arguments) {
-    const { keyword, type, field } = getTypeAndField(path);
+    const { keyword, parentObjectEntityName, selectableName } =
+      getParentObjectEntityNameAndSelectableName(path);
     if (keyword === 'entrypoint') {
       // This throws if the tag is invalid
-      compileImportStatement(t, path, type, field, 'entrypoint', config);
-    } else if (keyword === 'field') {
-      if (
-        t.isCallExpression(path.parentPath.node) &&
-        path.parentPath.node.arguments.length === 1
-      ) {
-        path.parentPath.replaceWith(path.parentPath.node.arguments[0]);
+      compileImportStatement(
+        t,
+        path,
+        parentObjectEntityName,
+        selectableName,
+        'entrypoint',
+        config,
+      );
+    } else if (keyword === 'field' || keyword === 'pointer') {
+      if (t.isCallExpression(path.parentPath.node)) {
+        const firstArg = path.parentPath.node.arguments[0];
+        if (path.parentPath.node.arguments.length === 1 && firstArg != null) {
+          path.parentPath.replaceWith(firstArg);
+        } else {
+          throw new Error(
+            'Invalid iso tag usage. The iso function should be passed at most one argument.',
+          );
+        }
       } else {
         path.replaceWith(
           t.arrowFunctionExpression([t.identifier('x')], t.identifier('x')),
@@ -29,54 +42,61 @@ function compileTag(t, path, config) {
       }
     } else {
       throw new Error(
-        "Invalid iso tag usage. Expected 'entrypoint' or 'field'.",
+        "Invalid iso tag usage. Expected 'entrypoint', 'field' or 'pointer'.",
       );
     }
   }
   return false;
 }
 
-const typeAndFieldRegex = new RegExp(
-  '\\s*(entrypoint|field)\\s*([^\\.\\s]+)\\.([^\\s\\(]+)',
+const parentObjectEntityNameAndSelectableNameRegex = new RegExp(
+  '\\s*(entrypoint|field|pointer)\\s*([^\\.\\s]+)\\.([^\\s\\(]+)',
   'm',
 );
 
 /**
  * @param {babel.NodePath<babel.types.CallExpression>} path
- *  */
-function getTypeAndField(path) {
-  if (path.node.arguments.length !== 1) {
+ **/
+function getParentObjectEntityNameAndSelectableName(path) {
+  const firstArg = path.node.arguments[0];
+  if (path.node.arguments.length !== 1 || firstArg == null) {
     throw new Error(
       `BabelPluginIsograph: Iso invocation require one parameter, found ${path.node.arguments.length}`,
     );
   }
 
-  if (path.node.arguments[0].type !== 'TemplateLiteral') {
+  if (firstArg.type !== 'TemplateLiteral') {
     throw new Error(
       'BabelPluginIsograph: Only template literals are allowed in iso fragments.',
     );
   }
 
-  const quasis = path.node.arguments[0].quasis;
-  if (quasis.length !== 1) {
+  const quasis = firstArg.quasis;
+  const firstQuasi = quasis[0];
+  if (quasis.length !== 1 || firstQuasi == null) {
     throw new Error(
       'BabelPluginIsograph: Substitutions are not allowed in iso fragments.',
     );
   }
 
-  const content = quasis[0].value.raw;
-  const typeAndField = typeAndFieldRegex.exec(content);
+  const content = firstQuasi.value.raw;
+  const typeAndField =
+    parentObjectEntityNameAndSelectableNameRegex.exec(content);
 
   const keyword = typeAndField?.[1];
-  const type = typeAndField?.[2];
-  const field = typeAndField?.[3];
+  const parentObjectEntityName = typeAndField?.[2];
+  const selectableName = typeAndField?.[3];
 
-  if (keyword == null || type == null || field == null) {
+  if (
+    keyword == null ||
+    parentObjectEntityName == null ||
+    selectableName == null
+  ) {
     throw new Error(
       'Malformed iso literal. I hope the iso compiler failed to accept this literal!',
     );
   }
-  return { keyword, type, field };
+  return { keyword, parentObjectEntityName, selectableName };
 }
 
 /**
@@ -95,6 +115,7 @@ function compileImportStatement(t, path, type, field, artifactType, config) {
     cwd,
     config.config['artifact_directory'] ?? config.config['project_root'],
   );
+  const module = config.config['options']?.['module'];
 
   const fileToArtifactDir = pathModule.relative(folder, artifactDirectory);
   const artifactDirToArtifact = `/__isograph/${type}/${field}/${artifactType}.ts`;
@@ -115,14 +136,29 @@ function compileImportStatement(t, path, type, field, artifactType, config) {
     fileToArtifact = '.' + fileToArtifact;
   }
 
-  path.replaceWith(
-    t.memberExpression(
-      t.callExpression(t.identifier('require'), [
-        t.stringLiteral(fileToArtifact),
-      ]),
-      t.identifier('default'),
-    ),
-  );
+  if (module === 'esmodule') {
+    const program = path.scope.getProgramParent();
+    const imports = /** @type {Map<string, string>} */ (
+      program.data['imports'] ??= new Map()
+    );
+
+    let id = imports.get(fileToArtifact);
+    if (id == null) {
+      id = addDefault(path, fileToArtifact, { nameHint: field }).name;
+      imports.set(fileToArtifact, id);
+    }
+
+    path.replaceWith(t.identifier(id));
+  } else {
+    path.replaceWith(
+      t.memberExpression(
+        t.callExpression(t.identifier('require'), [
+          t.stringLiteral(fileToArtifact),
+        ]),
+        t.identifier('default'),
+      ),
+    );
+  }
 }
 
 module.exports = compileTag;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@isograph/babel-plugin",
   "description": "A Babel plugin for use with Isograph applications.",
   "homepage": "https://isograph.dev",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "keywords": [
     "graphql",
     "isograph",
@@ -16,9 +16,12 @@
     "directory": "libs/isograph-babel-plugin"
   },
   "scripts": {
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "tsc-force": "tsc --build --clean && tsc --build --force",
+    "test": "vitest run"
   },
   "dependencies": {
+    "@babel/helper-module-imports": "^7.0.0",
     "babel-plugin-macros": "^2.0.0",
     "cosmiconfig": "^5.0.5",
     "graphql": "15.3.0"
@@ -27,6 +30,7 @@
     "@babel/core": "^7.20.0",
     "@babel/types": "^7.25.6",
     "@types/babel__core": "^7.20.5",
+    "@types/babel__helper-module-imports": "^7.18.3",
     "@types/cosmiconfig": "^5.0.3",
     "prettier": "2.8.8",
     "prettier-plugin-hermes-parser": "0.16.0"

package/stub.ts

@@ -1,4 +1,5 @@
 import type cosmiconfig from 'cosmiconfig';
+
 declare module 'cosmiconfig' {
   export const loadJson: cosmiconfig.LoaderEntry;
 }

package/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true,
-    "lib": ["es2017", "DOM"]
+    "noEmit": true
   },
   "include": ["./**/*.ts", "./**/*.js"]
 }