fix(babel): support code transpiled with esbuild (#1143)

* fix(babel): support code transpiled with esbuild

.changeset/shaggy-onions-deny.md

@@ -0,0 +1,7 @@
+---
+'@linaria/testkit': patch
+'@linaria/utils': patch
+'@linaria/babel-preset': patch
+---
+
+Support for code transpiled with esbuild.

packages/testkit/package.json

@@ -14,6 +14,7 @@
     "@linaria/tags": "workspace:^",
     "@swc/core": "^1.3.20",
     "dedent": "^0.7.0",
+    "esbuild": "^0.15.16",
     "strip-ansi": "^5.2.0",
     "typescript": "^4.7.4"
   },

packages/testkit/src/collectExportsAndImports.test.ts

@@ -6,6 +6,7 @@ import type { NodePath } from '@babel/core';
 import generator from '@babel/generator';
 import { transformSync as swcTransformSync } from '@swc/core';
 import dedent from 'dedent';
+import { transformSync as esbuildTransformSync } from 'esbuild';
 import * as ts from 'typescript';
 
 import type { MissedBabelCoreTypes } from '@linaria/babel-preset';
@@ -42,6 +43,17 @@ const swcCommonJS =
     return result.code;
   };
 
+const esbuildCommonJS = (source: string): string => {
+  const result = esbuildTransformSync(source, {
+    format: 'cjs',
+    loader: 'ts',
+    sourcefile: join(__dirname, 'source.ts'),
+    target: 'es2015',
+  });
+
+  return result.code;
+};
+
 function babelCommonJS(source: string): string {
   const result = babel.transformSync(source, {
     babelrc: false,
@@ -82,6 +94,7 @@ function babelNode16(source: string): string {
 const compilers: [name: string, compiler: (code: string) => string][] = [
   ['as is', babelNode16],
   ['babelCommonJS', babelCommonJS],
+  ['esbuildCommonJS', esbuildCommonJS],
   ['swcCommonJSes5', swcCommonJS('es5')],
   ['swcCommonJSes2015', swcCommonJS('es2015')],
   ['typescriptCommonJS', typescriptCommonJS],
@@ -548,7 +561,12 @@ describe.each(compilers)('collectExportsAndImports (%s)', (name, compiler) => {
         export const { a, ...rest } = obj;
       `;
 
-      expect(exports).toMatchObject([
+      expect(
+        exports.filter((i) => {
+          // Esbuild, why?
+          return i.exported !== '_a';
+        })
+      ).toMatchObject([
         {
           exported: 'a',
         },

packages/utils/src/collectExportsAndImports.ts

@@ -328,13 +328,15 @@ function getImportTypeByInteropFunction(
 
   if (
     name.startsWith('_interopRequireWildcard') ||
-    name.startsWith('__importStar')
+    name.startsWith('__importStar') ||
+    name.startsWith('__toESM')
   ) {
     return '*';
   }
 
   if (
     name.startsWith('__rest') ||
+    name.startsWith('__objRest') ||
     name.startsWith('_objectDestructuringEmpty')
   ) {
     return '*';
@@ -921,11 +923,7 @@ function collectFromExportStarCall(
   path.skip();
 }
 
-function collectFromExportCall(path: NodePath<CallExpression>, state: IState) {
-  const [exports, map] = path.get('arguments');
-  if (!isExports(exports)) return;
-  if (!map.isObjectExpression()) return;
-
+function collectFromMap(map: NodePath<ObjectExpression>, state: IState) {
   const properties = map.get('properties');
   properties.forEach((property) => {
     if (!property.isObjectProperty()) return;
@@ -945,6 +943,54 @@ function collectFromExportCall(path: NodePath<CallExpression>, state: IState) {
       local: returnValue,
     });
   });
+}
+
+function collectFromEsbuildExportCall(
+  path: NodePath<CallExpression>,
+  state: IState
+) {
+  const [sourceExports, map] = path.get('arguments');
+  if (!sourceExports.isIdentifier({ name: 'source_exports' })) return;
+  if (!map.isObjectExpression()) return;
+
+  collectFromMap(map, state);
+
+  path.skip();
+}
+
+function collectFromEsbuildReExportCall(
+  path: NodePath<CallExpression>,
+  state: IState
+) {
+  const [sourceExports, requireCall, exports] = path.get('arguments');
+  if (!sourceExports.isIdentifier({ name: 'source_exports' })) return;
+  if (!requireCall.isCallExpression()) return;
+  if (!isExports(exports)) return;
+
+  const callee = requireCall.get('callee');
+  if (!isRequire(callee)) return;
+  const sourcePath = requireCall.get('arguments')?.[0];
+  if (!sourcePath.isStringLiteral()) return;
+
+  state.reexports.push({
+    exported: '*',
+    imported: '*',
+    local: path,
+    source: sourcePath.node.value,
+  });
+
+  path.skip();
+}
+
+function collectFromSwcExportCall(
+  path: NodePath<CallExpression>,
+  state: IState
+) {
+  const [exports, map] = path.get('arguments');
+  if (!isExports(exports)) return;
+  if (!map.isObjectExpression()) return;
+
+  collectFromMap(map, state);
 
   path.skip();
 }
@@ -971,9 +1017,17 @@ function collectFromCallExpression(
     collectFromExportStarCall(path, state);
   }
 
-  // swc
   if (name === '_export') {
-    collectFromExportCall(path, state);
+    collectFromSwcExportCall(path, state);
+  }
+
+  // esbuild
+  if (name === '__export') {
+    collectFromEsbuildExportCall(path, state);
+  }
+
+  if (name === '__reExport') {
+    collectFromEsbuildReExportCall(path, state);
   }
 }
 

packages/utils/src/isExports.ts

@@ -1,19 +1,23 @@
 import type { NodePath } from '@babel/traverse';
 
-import { getScope } from './getScope';
+import { isGlobal } from './isGlobal';
 
 /**
- * Checks that specified Identifier is a global `exports`
- * @param id
+ * Checks that specified Identifier is a global `exports` or `module.exports`
+ * @param node
  */
-export default function isExports(id: NodePath | null | undefined) {
-  if (!id?.isIdentifier() || id.node.name !== 'exports') {
-    return false;
+export default function isExports(node: NodePath | null | undefined) {
+  if (node?.isIdentifier({ name: 'exports' })) {
+    return isGlobal(node, 'exports');
   }
 
-  const scope = getScope(id);
+  if (
+    node?.isMemberExpression() &&
+    node.get('object').isIdentifier({ name: 'module' }) &&
+    node.get('property').isIdentifier({ name: 'exports' })
+  ) {
+    return isGlobal(node, 'module');
+  }
 
-  return (
-    scope.getBinding('exports') === undefined && scope.hasGlobal('exports')
-  );
+  return false;
 }

packages/utils/src/isGlobal.ts

@@ -0,0 +1,9 @@
+import type { NodePath } from '@babel/traverse';
+
+import { getScope } from './getScope';
+
+export const isGlobal = (node: NodePath, name: string) => {
+  const scope = getScope(node);
+
+  return scope.getBinding(name) === undefined && scope.hasGlobal(name);
+};

packages/utils/src/isRequire.ts

@@ -1,6 +1,6 @@
 import type { NodePath } from '@babel/traverse';
 
-import { getScope } from './getScope';
+import { isGlobal } from './isGlobal';
 
 /**
  * Checks that specified Identifier is a global `require`
@@ -11,9 +11,5 @@ export default function isRequire(id: NodePath | null | undefined) {
     return false;
   }
 
-  const scope = getScope(id);
-
-  return (
-    scope.getBinding('require') === undefined && scope.hasGlobal('require')
-  );
+  return isGlobal(id, 'require');
 }