Transpile ESM-only packages to CJS for compatibility with CJS environ…

…ments.
johnrom · Nov 18, 2021 · fd07b05 · fd07b05
1 parent 1615f69
commit fd07b05
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 79 deletions.
diff --git a/helpers/getBaseRollupConfig.js b/helpers/getBaseRollupConfig.js
@@ -1,12 +1,19 @@
+/**
+ * To edit the base rollup config, edit the TS file and enable Automatic Task Watching in VS Code to transpile the JS which is included in the rollup configs.
+ */
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
 import typescript from 'rollup-plugin-typescript2';
 import path from 'path';
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
-export const getBaseRollupConfig = (tsConfig, callback) => {
+const esmOnlyPackages = [/unist/];
+const esmExternal = (source) => !source.startsWith('.') && !path.isAbsolute(source);
+// we pack ESM-only packages for CJS users, just to be nice.
+const cjsExternal = (source) => esmExternal(source) &&
+    !esmOnlyPackages.find((esmOnlyPackage) => esmOnlyPackage.test(source));
+export const getBaseRollupConfig = (tsConfig, esmCallback, cjsCallback) => {
     const baseBuildConfig = {
-        external: (source) => !source.startsWith('.') && !path.isAbsolute(source),
         plugins: [
             // Allows node_modules resolution
             resolve({ extensions }),
@@ -33,5 +40,14 @@ export const getBaseRollupConfig = (tsConfig, callback) => {
             },
         ]
         : [];
-    return tsDefinitionsConfig.concat([callback(baseBuildConfig)]);
+    return tsDefinitionsConfig.concat([
+        esmCallback({
+            ...baseBuildConfig,
+            external: esmExternal,
+        }),
+        cjsCallback({
+            ...baseBuildConfig,
+            external: cjsExternal,
+        }),
+    ]);
 };
diff --git a/helpers/getBaseRollupConfig.ts b/helpers/getBaseRollupConfig.ts
@@ -1,22 +1,33 @@
+/**
+ * To edit the base rollup config, edit the TS file and enable Automatic Task Watching in VS Code to transpile the JS which is included in the rollup configs.
+ */
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
 import typescript from 'rollup-plugin-typescript2';
 import { RollupOptions } from 'rollup';
 import path from 'path';
 
+type RollupConfigCallback = (config: RollupOptions) => RollupOptions;
+
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
-type Callback = (config: RollupOptions) => RollupOptions;
+const esmOnlyPackages = [/unist/];
+
+const esmExternal = (source: string) =>
+  !source.startsWith('.') && !path.isAbsolute(source);
+
+// we pack ESM-only packages for CJS users, just to be nice.
+const cjsExternal = (source: string) =>
+  esmExternal(source) &&
+  !esmOnlyPackages.find((esmOnlyPackage) => esmOnlyPackage.test(source));
 
 export const getBaseRollupConfig = (
   tsConfig: string | false,
-  callback: Callback
+  esmCallback: RollupConfigCallback,
+  cjsCallback: RollupConfigCallback
 ): (RollupOptions | [])[] => {
   const baseBuildConfig: RollupOptions = {
-    external: (source: string) =>
-      !source.startsWith('.') && !path.isAbsolute(source),
-
     plugins: [
       // Allows node_modules resolution
       resolve({ extensions }),
@@ -47,5 +58,14 @@ export const getBaseRollupConfig = (
       ]
     : [];
 
-  return tsDefinitionsConfig.concat([callback(baseBuildConfig)]);
+  return tsDefinitionsConfig.concat([
+    esmCallback({
+      ...baseBuildConfig,
+      external: esmExternal,
+    }),
+    cjsCallback({
+      ...baseBuildConfig,
+      external: cjsExternal,
+    }),
+  ]);
 };
diff --git a/packages/code-snippets/rollup.config.js b/packages/code-snippets/rollup.config.js
@@ -1,17 +1,26 @@
 import { getBaseRollupConfig } from '../../helpers/getBaseRollupConfig';
 import pkg from './package.json';
 
-export default getBaseRollupConfig('./tsconfig.rollup.json', (options) => ({
-  ...options,
-  input: './src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-    },
-  ],
-}));
+export default getBaseRollupConfig(
+  './tsconfig.rollup.json',
+  (esmOptions) => ({
+    ...esmOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+      },
+    ],
+  }),
+  (cjsOptions) => ({
+    ...cjsOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+    ],
+  })
+);
diff --git a/packages/gatsby-remark-code-snippet-remover/rollup.config.js b/packages/gatsby-remark-code-snippet-remover/rollup.config.js
@@ -1,17 +1,26 @@
 import { getBaseRollupConfig } from '../../helpers/getBaseRollupConfig';
 import pkg from './package.json';
 
-export default getBaseRollupConfig('./tsconfig.rollup.json', (options) => ({
-  ...options,
-  input: './src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-    },
-  ],
-}));
+export default getBaseRollupConfig(
+  './tsconfig.rollup.json',
+  (esmOptions) => ({
+    ...esmOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+      },
+    ],
+  }),
+  (cjsOptions) => ({
+    ...cjsOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+    ],
+  })
+);
diff --git a/packages/gatsby-remark-code-snippets/rollup.config.js b/packages/gatsby-remark-code-snippets/rollup.config.js
@@ -1,17 +1,26 @@
 import { getBaseRollupConfig } from '../../helpers/getBaseRollupConfig';
 import pkg from './package.json';
 
-export default getBaseRollupConfig('./tsconfig.rollup.json', (options) => ({
-  ...options,
-  input: './src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-    },
-  ],
-}));
+export default getBaseRollupConfig(
+  './tsconfig.rollup.json',
+  (esmOptions) => ({
+    ...esmOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+      },
+    ],
+  }),
+  (cjsOptions) => ({
+    ...cjsOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+    ],
+  })
+);
diff --git a/packages/remark-code-snippet-remover/rollup.config.js b/packages/remark-code-snippet-remover/rollup.config.js
@@ -1,17 +1,26 @@
 import { getBaseRollupConfig } from '../../helpers/getBaseRollupConfig';
 import pkg from './package.json';
 
-export default getBaseRollupConfig('./tsconfig.rollup.json', (options) => ({
-  ...options,
-  input: './src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-    },
-  ],
-}));
+export default getBaseRollupConfig(
+  './tsconfig.rollup.json',
+  (esmOptions) => ({
+    ...esmOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+      },
+    ],
+  }),
+  (cjsOptions) => ({
+    ...cjsOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+    ],
+  })
+);
diff --git a/packages/remark-code-snippets/rollup.config.js b/packages/remark-code-snippets/rollup.config.js
@@ -1,17 +1,26 @@
 import { getBaseRollupConfig } from '../../helpers/getBaseRollupConfig';
 import pkg from './package.json';
 
-export default getBaseRollupConfig('./tsconfig.rollup.json', (options) => ({
-  ...options,
-  input: './src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-    },
-  ],
-}));
+export default getBaseRollupConfig(
+  './tsconfig.rollup.json',
+  (esmOptions) => ({
+    ...esmOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+      },
+    ],
+  }),
+  (cjsOptions) => ({
+    ...cjsOptions,
+    input: './src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+    ],
+  })
+);