diff --git a/bin/packages/build-vendors.mjs b/bin/packages/build-vendors.mjs index cb80bcfd9d9290..8a71c2e1a2af5e 100755 --- a/bin/packages/build-vendors.mjs +++ b/bin/packages/build-vendors.mjs @@ -22,6 +22,10 @@ const VENDOR_SCRIPTS = [ global: 'ReactDOM', handle: 'react-dom', dependencies: [ 'react' ], + contents: [ + 'export * from "react-dom";', + 'export { createRoot, hydrateRoot } from "react-dom/client";', + ].join( '\n' ), }, { name: 'react/jsx-runtime', @@ -87,7 +91,7 @@ async function generateAssetFile( config ) { * @return {Promise} Promise that resolves when all builds are finished. */ async function bundleVendorScript( config ) { - const { name, global, handle } = config; + const { name, global, handle, contents } = config; // Plugin that externalizes the `react` package. const reactExternalPlugin = { @@ -114,7 +118,6 @@ async function bundleVendorScript( config ) { }; const esbuildOptions = { - entryPoints: [ name ], bundle: true, format: 'iife', globalName: global, @@ -123,6 +126,16 @@ async function bundleVendorScript( config ) { plugins: [ reactExternalPlugin ], }; + if ( contents ) { + esbuildOptions.stdin = { + contents, + resolveDir: ROOT_DIR, + loader: 'js', + }; + } else { + esbuildOptions.entryPoints = [ name ]; + } + await Promise.all( [ esbuild.build( { ...esbuildOptions, @@ -150,11 +163,11 @@ async function buildVendors() { await bundleVendorScript( vendorConfig ); const buildTime = Date.now() - startTime; console.log( - ` ✔ Bundled vendor ${ vendorConfig.name } (${ buildTime }ms)` + ` ✔ Bundled vendor ${ vendorConfig.handle } (${ buildTime }ms)` ); } catch ( error ) { console.error( - ` ✘ Failed to bundle vendor ${ vendorConfig.name }: ${ error.message }` + ` ✘ Failed to bundle vendor ${ vendorConfig.handle }: ${ error.message }` ); } }