build: add support to the rollup build for building typescript packages (#32393)

Author: michaelfaith

babel.config-ts.js

@@ -0,0 +1,15 @@
+/**
+ * This file is purely being used for local jest runs, and doesn't participate in the build process.
+ */
+'use strict';
+
+module.exports = {
+  plugins: [
+    '@babel/plugin-syntax-jsx',
+    '@babel/plugin-transform-flow-strip-types',
+  ],
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};

package.json

@@ -35,11 +35,13 @@
     "@babel/plugin-transform-template-literals": "^7.10.5",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@babel/traverse": "^7.11.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^12.1.2",
     "abortcontroller-polyfill": "^1.7.5",
     "art": "0.10.1",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
@@ -90,6 +92,7 @@
     "react-lifecycles-compat": "^3.0.4",
     "rimraf": "^3.0.0",
     "rollup": "^3.29.5",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-prettier": "^4.1.1",
     "rollup-plugin-strip-banner": "^3.0.0",
     "semver": "^7.1.1",
@@ -98,7 +101,7 @@
     "targz": "^1.0.1",
     "through2": "^3.0.1",
     "tmp": "^0.1.0",
-    "typescript": "^3.7.5",
+    "typescript": "^5.4.3",
     "undici": "^5.28.4",
     "web-streams-polyfill": "^3.1.1",
     "yargs": "^15.3.1"

packages/react/src/__tests__/ReactTypeScriptClass-test.ts

@@ -529,7 +529,7 @@ describe('ReactTypeScriptClass', function () {
         'StateBasedOnContext uses the legacy contextTypes API which will soon be removed. ' +
           'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
           (ReactFeatureFlags.enableOwnerStacks
-            ? '    in ProvideChildContextTypes.Object.<anonymous>.ProvideChildContextTypes (at **)'
+            ? '    in ProvideChildContextTypes.createElement (at **)'
             : '    in StateBasedOnContext (at **)\n') +
           '    in ProvideChildContextTypes (at **)',
       ]);
@@ -725,7 +725,7 @@ describe('ReactTypeScriptClass', function () {
         'ReadContext uses the legacy contextTypes API which will soon be removed. ' +
           'Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)\n' +
           (ReactFeatureFlags.enableOwnerStacks
-            ? '    in ProvideContext.Object.<anonymous>.ProvideContext (at **)'
+            ? '    in ProvideContext.createElement (at **)'
             : '    in ReadContext (at **)\n') +
           '    in ProvideContext (at **)',
       ]);

scripts/jest/config.base.js

@@ -7,7 +7,11 @@ module.exports = {
     '<rootDir>/scripts/bench/',
   ],
   transform: {
-    '.*': require.resolve('./preprocessor.js'),
+    '^.+\\.ts$': [
+      'babel-jest',
+      {configFile: require.resolve('../../babel.config-ts.js')},
+    ],
+    '.(?!ts$)': require.resolve('./preprocessor.js'),
   },
   prettierPath: require.resolve('prettier-2'),
   setupFiles: [require.resolve('./setupEnvironment.js')],

scripts/rollup/build.js

@@ -4,8 +4,10 @@ const rollup = require('rollup');
 const babel = require('@rollup/plugin-babel').babel;
 const closure = require('./plugins/closure-plugin');
 const flowRemoveTypes = require('flow-remove-types');
+const {dts} = require('rollup-plugin-dts');
 const prettier = require('rollup-plugin-prettier');
 const replace = require('@rollup/plugin-replace');
+const typescript = require('@rollup/plugin-typescript');
 const stripBanner = require('rollup-plugin-strip-banner');
 const chalk = require('chalk');
 const resolve = require('@rollup/plugin-node-resolve').nodeResolve;
@@ -61,6 +63,8 @@ const {
   RN_FB_PROD,
   RN_FB_PROFILING,
   BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
 } = Bundles.bundleTypes;
 
 const {getFilename} = Bundles;
@@ -250,9 +254,11 @@ function getFormat(bundleType) {
     case RN_FB_DEV:
     case RN_FB_PROD:
     case RN_FB_PROFILING:
+    case CJS_DTS:
       return `cjs`;
     case ESM_DEV:
     case ESM_PROD:
+    case ESM_DTS:
       return `es`;
     case BROWSER_SCRIPT:
       return `iife`;
@@ -281,6 +287,8 @@ function isProductionBundleType(bundleType) {
     case RN_FB_PROD:
     case RN_FB_PROFILING:
     case BROWSER_SCRIPT:
+    case CJS_DTS:
+    case ESM_DTS:
       return true;
     default:
       throw new Error(`Unknown type: ${bundleType}`);
@@ -303,6 +311,8 @@ function isProfilingBundleType(bundleType) {
     case ESM_DEV:
     case ESM_PROD:
     case BROWSER_SCRIPT:
+    case CJS_DTS:
+    case ESM_DTS:
       return false;
     case FB_WWW_PROFILING:
     case NODE_PROFILING:
@@ -368,27 +378,36 @@ function getPlugins(
   pureExternalModules,
   bundle
 ) {
+  // Short-circuit if we're only building a .d.ts bundle
+  if (bundleType === CJS_DTS || bundleType === ESM_DTS) {
+    return [dts({tsconfig: bundle.tsconfig})];
+  }
   try {
     const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
     const isProduction = isProductionBundleType(bundleType);
     const isProfiling = isProfilingBundleType(bundleType);
 
     const needsMinifiedByClosure =
-      bundleType !== ESM_PROD && bundleType !== ESM_DEV;
+      bundleType !== ESM_PROD &&
+      bundleType !== ESM_DEV &&
+      // TODO(@poteto) figure out ICE in closure compiler for eslint-plugin-react-hooks (ts)
+      bundle.tsconfig == null;
 
     return [
       // Keep dynamic imports as externals
       dynamicImports(),
-      {
-        name: 'rollup-plugin-flow-remove-types',
-        transform(code) {
-          const transformed = flowRemoveTypes(code);
-          return {
-            code: transformed.toString(),
-            map: null,
-          };
-        },
-      },
+      bundle.tsconfig != null
+        ? typescript({tsconfig: bundle.tsconfig})
+        : {
+            name: 'rollup-plugin-flow-remove-types',
+            transform(code) {
+              const transformed = flowRemoveTypes(code);
+              return {
+                code: transformed.toString(),
+                map: null,
+              };
+            },
+          },
       // Shim any modules that need forking in this environment.
       useForks(forks),
       // Ensure we don't try to bundle any fbjs modules.
@@ -839,7 +858,9 @@ async function buildEverything() {
       [bundle, RN_FB_DEV],
       [bundle, RN_FB_PROD],
       [bundle, RN_FB_PROFILING],
-      [bundle, BROWSER_SCRIPT]
+      [bundle, BROWSER_SCRIPT],
+      [bundle, CJS_DTS],
+      [bundle, ESM_DTS]
     );
   }
 

scripts/rollup/bundles.js

@@ -26,6 +26,8 @@ const bundleTypes = {
   RN_FB_PROD: 'RN_FB_PROD',
   RN_FB_PROFILING: 'RN_FB_PROFILING',
   BROWSER_SCRIPT: 'BROWSER_SCRIPT',
+  CJS_DTS: 'CJS_DTS',
+  ESM_DTS: 'ESM_DTS',
 };
 
 const {
@@ -47,6 +49,8 @@ const {
   RN_FB_PROD,
   RN_FB_PROFILING,
   BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
 } = bundleTypes;
 
 const moduleTypes = {
@@ -1270,6 +1274,9 @@ function getFilename(bundle, bundleType) {
       return `${globalName}-profiling.js`;
     case BROWSER_SCRIPT:
       return `${name}.js`;
+    case CJS_DTS:
+    case ESM_DTS:
+      return `${name}.d.ts`;
   }
 }
 

scripts/rollup/packaging.js

@@ -34,6 +34,8 @@ const {
   RN_FB_PROD,
   RN_FB_PROFILING,
   BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
 } = Bundles.bundleTypes;
 
 function getPackageName(name) {
@@ -49,13 +51,15 @@ function getBundleOutputPath(bundle, bundleType, filename, packageName) {
       return `build/node_modules/${packageName}/cjs/${filename}`;
     case ESM_DEV:
     case ESM_PROD:
+    case ESM_DTS:
       return `build/node_modules/${packageName}/esm/${filename}`;
     case BUN_DEV:
     case BUN_PROD:
       return `build/node_modules/${packageName}/cjs/${filename}`;
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:
+    case CJS_DTS:
       return `build/node_modules/${packageName}/cjs/${filename}`;
     case FB_WWW_DEV:
     case FB_WWW_PROD:

scripts/rollup/wrappers.js

@@ -21,6 +21,8 @@ const {
   RN_FB_PROD,
   RN_FB_PROFILING,
   BROWSER_SCRIPT,
+  CJS_DTS,
+  ESM_DTS,
 } = bundleTypes;
 
 const {RECONCILER} = moduleTypes;
@@ -248,6 +250,16 @@ ${source}
   Object.defineProperty(module.exports, "__esModule", { value: true });
   `;
   },
+
+  /***************** CJS_DTS *****************/
+  [CJS_DTS](source, globalName, filename, moduleType) {
+    return source;
+  },
+
+  /***************** ESM_DTS *****************/
+  [ESM_DTS](source, globalName, filename, moduleType) {
+    return source;
+  },
 };
 
 const licenseHeaderWrappers = {
@@ -464,6 +476,30 @@ ${license}
  * @preventMunge
  */
 
+${source}`;
+  },
+
+  /***************** CJS_DTS *****************/
+  [CJS_DTS](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
+${source}`;
+  },
+
+  /***************** ESM_DTS *****************/
+  [ESM_DTS](source, globalName, filename, moduleType) {
+    return `/**
+ * @license React
+ * ${filename}
+ *
+${license}
+ */
+
 ${source}`;
   },
 };