build: add support to the rollup builid for building typescript packages

This change adds support to the rollup build script for building packages with typescript source. In order for a bundle to be picked up by the new flow, the bundle definition should have a `tsconfig` property with a path to the project's tsconfig. There's also two new bundle types that such packages can request to be built: `ESM_DTS` and `CJS_DTS`, which will create the corresponding `.d.ts` bundle.
facebook · Feb 15, 2025 · 8c52146 · 8c52146
1 parent 062fb31
commit 8c52146
Show file tree

Hide file tree

Showing 6 changed files with 241 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@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 +91,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 +100,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"

diff --git a/scripts/rollup/build.js b/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
+        ? 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.
@@ -842,7 +861,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]
     );
   }
 

diff --git a/scripts/rollup/bundles.js b/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`;
   }
 }
 

diff --git a/scripts/rollup/packaging.js b/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:

diff --git a/scripts/rollup/wrappers.js b/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}`;
   },
 };