Add react remapping to import resolver plugin (ampproject#37859)

* Add react remapping to import resolver plugin

* Add comment

* Simplify react/index exports

* Add small change to trigger CI build

* remap react to preact using babel when bundling for preact

Co-authored-by: William H.G. Johnson <[email protected]>

build-system/babel-config/import-resolver.js

@@ -41,14 +41,33 @@ function readJsconfigPaths() {
   return tsConfigPaths;
 }
 
+/**
+ * Remap external modules that rely on React if building for Preact.
+ * @param {'preact' | 'react'} buildFor
+ * @return {Object}
+ */
+function moduleAliases(buildFor) {
+  if (buildFor === 'react') {
+    return {};
+  }
+  return {
+    'react': './src/react',
+    'react-dom': './src/react/dom',
+  };
+}
+
 /**
  * Import map configuration.
+ * @param {'preact' | 'react'} buildFor
  * @return {Object}
  */
-function getImportResolver() {
+function getImportResolver(buildFor = 'preact') {
   return {
     root: ['.'],
-    alias: readJsconfigPaths(),
+    alias: {
+      ...readJsconfigPaths(),
+      ...moduleAliases(buildFor),
+    },
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
     stripExtensions: [],
     babelOptions: {
@@ -62,23 +81,24 @@ function getImportResolver() {
 /**
  * Produces an alias map with paths relative to the provided root.
  * @param {string} rootDir
+ * @param {'preact' | 'react'} buildFor
  * @return {!Object<string, string>}
  */
-function getRelativeAliasMap(rootDir) {
+function getRelativeAliasMap(rootDir, buildFor = 'preact') {
   return Object.fromEntries(
-    Object.entries(getImportResolver().alias).map(([alias, destPath]) => [
-      alias,
-      path.join(rootDir, destPath),
-    ])
+    Object.entries(getImportResolver(buildFor).alias).map(
+      ([alias, destPath]) => [alias, path.join(rootDir, destPath)]
+    )
   );
 }
 
 /**
  * Import resolver Babel plugin configuration.
+ * @param {'preact' | 'react'} buildFor
  * @return {!Array}
  */
-function getImportResolverPlugin() {
-  return ['module-resolver', getImportResolver()];
+function getImportResolverPlugin(buildFor = 'preact') {
+  return ['module-resolver', getImportResolver(buildFor)];
 }
 
 /**

build-system/babel-config/minified-config.js

@@ -8,9 +8,10 @@ const {getReplacePlugin} = require('./helpers');
 /**
  * Gets the config for minified babel transforms run, used by 3p vendors.
  *
+ * @param {'preact' | 'react'} buildFor
  * @return {!Object}
  */
-function getMinifiedConfig() {
+function getMinifiedConfig(buildFor = 'preact') {
   const isProd = argv._.includes('dist') && !argv.fortesting;
 
   const reactJsxPlugin = [
@@ -27,7 +28,7 @@ function getMinifiedConfig() {
     'optimize-objstr',
     './build-system/babel-plugins/babel-plugin-mangle-object-values',
     './build-system/babel-plugins/babel-plugin-jsx-style-object',
-    getImportResolverPlugin(),
+    getImportResolverPlugin(buildFor),
     argv.coverage ? 'babel-plugin-istanbul' : null,
     './build-system/babel-plugins/babel-plugin-imported-helpers',
     './build-system/babel-plugins/babel-plugin-transform-inline-isenumvalue',

build-system/babel-config/react-config.js

@@ -26,14 +26,14 @@ function mergeReactBabelConfig(config) {
  * @return {!Object}
  */
 function getReactUnminifiedConfig() {
-  return mergeReactBabelConfig(getUnminifiedConfig());
+  return mergeReactBabelConfig(getUnminifiedConfig('react'));
 }
 
 /**
  * @return {!Object}
  */
 function getReactMinifiedConfig() {
-  return mergeReactBabelConfig(getMinifiedConfig());
+  return mergeReactBabelConfig(getMinifiedConfig('react'));
 }
 
 module.exports = {

build-system/babel-config/unminified-config.js

@@ -7,9 +7,10 @@ const {getReplacePlugin} = require('./helpers');
 /**
  * Gets the config for babel transforms run during `amp build`.
  *
+ * @param {'preact' | 'react'} buildFor
  * @return {!Object}
  */
-function getUnminifiedConfig() {
+function getUnminifiedConfig(buildFor = 'preact') {
   const reactJsxPlugin = [
     '@babel/plugin-transform-react-jsx',
     {
@@ -38,7 +39,7 @@ function getUnminifiedConfig() {
   const replacePlugin = getReplacePlugin();
   const unminifiedPlugins = [
     './build-system/babel-plugins/babel-plugin-jsx-style-object',
-    getImportResolverPlugin(),
+    getImportResolverPlugin(buildFor),
     argv.coverage ? 'babel-plugin-istanbul' : null,
     replacePlugin,
     './build-system/babel-plugins/babel-plugin-transform-json-import',

build-system/tasks/storybook/env/preact/webpack.config.js

@@ -21,9 +21,9 @@ module.exports = ({config}) => {
     modules,
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     alias: {
+      ...getRelativeAliasMap(rootDir),
       'react': 'preact/compat',
       'react-dom': 'preact/compat',
-      ...getRelativeAliasMap(rootDir),
     },
   };
   config.module = {

build-system/tasks/storybook/env/react/webpack.config.js

@@ -72,7 +72,7 @@ module.exports = ({config}) => {
     plugins: [new ReactBuildImportResolver()],
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     alias: {
-      ...getRelativeAliasMap(rootDir),
+      ...getRelativeAliasMap(rootDir, 'react'),
       // Alias preact to react
       'preact/dom': 'react-dom',
       'preact/hooks': 'react',

src/react/dom.js

@@ -0,0 +1,5 @@
+import {hydrate, render} from '#preact';
+
+export {hydrate, render};
+
+export default {hydrate, render};

src/react/index.js

@@ -0,0 +1,11 @@
+import * as Preact from '#preact';
+import * as PreactCompat from '#preact/compat';
+
+export * from '#preact';
+export * from '#preact/compat';
+
+// This file allows us to remap react imports from external libraries to
+// our internal preact exports. This file uses a default export in order to
+// be compatible with libraries that use react default import syntax.
+
+export default {...Preact, ...PreactCompat};