[externals]: Share React for all ESModule JS bundles (#36597)
This commit is contained in:
Jay Harris
@@ -62,6 +62,10 @@ brave_common_web_compile_inputs = [
|
||||
# - intended pak name, e.g. resourcename_generated.pak
|
||||
# - generated resource map, e.g. resourcename_generated_map.h
|
||||
# - resource ID (e.g. `IDR_RESOURCENAME_MYFILE_JS`)
|
||||
# no_externals
|
||||
# Set this if you're compiling a bundle with dependencies
|
||||
# which will otherwise be externalized (otherwise your
|
||||
# dependency will be excluded from its own bundle!).
|
||||
# output_dir
|
||||
# Optional custom path for compiled output
|
||||
# generate_grdp
|
||||
@@ -181,6 +185,10 @@ template("transpile_web_ui") {
|
||||
"--depfile_path=" + rebase_path(depfile),
|
||||
]
|
||||
|
||||
if (defined(invoker.no_externals) && invoker.no_externals) {
|
||||
args += [ "--no_externals" ]
|
||||
}
|
||||
|
||||
if (defined(invoker.webpack_aliases)) {
|
||||
# support multiple web pack aliases
|
||||
foreach(alias, invoker.webpack_aliases) {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="chrome://resources/brave/css/nala.css" blocking="render" >
|
||||
<script src="chrome://resources/js/load_time_data_deprecated.js"></script>
|
||||
<script src="/strings.js"></script>
|
||||
<script src="/brave_psst_dialog.bundle.js"></script>
|
||||
<script type="module" src="/brave_psst_dialog.bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -92,10 +92,18 @@ module.exports = async function (env, argv) {
|
||||
experiments.syncWebAssembly = true
|
||||
} else {
|
||||
experiments.asyncWebAssembly = true
|
||||
output.enabledWasmLoadingTypes = [ 'xhr' ]
|
||||
output.enabledWasmLoadingTypes = ['xhr']
|
||||
output.wasmLoading = 'xhr'
|
||||
}
|
||||
|
||||
const externals = env.output_module && !('no_externals' in env) ?
|
||||
{
|
||||
// React and ReactDOM ship in a single bundle (see
|
||||
// brave/ui/webui/resources/react/initialize_bundle.ts).
|
||||
'react': ['module //resources/brave/react.bundle.js', 'React'],
|
||||
'react-dom': ['module //resources/brave/react.bundle.js', 'ReactDOM'],
|
||||
} : {}
|
||||
|
||||
return {
|
||||
entry,
|
||||
devtool: isDevMode ? 'inline-source-map' : false,
|
||||
@@ -118,6 +126,7 @@ module.exports = async function (env, argv) {
|
||||
}
|
||||
callback();
|
||||
},
|
||||
externals,
|
||||
],
|
||||
plugins: [
|
||||
process.env.DEPFILE_SOURCE_NAME && new GenerateDepfilePlugin({
|
||||
@@ -222,7 +231,7 @@ module.exports = async function (env, argv) {
|
||||
{
|
||||
test: p => p.includes(path.join('@brave', 'brave-ui')) && p.endsWith('.js'),
|
||||
resolve: {
|
||||
fullySpecified: false,
|
||||
fullySpecified: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@@ -45,6 +45,7 @@ def main():
|
||||
depfile_sourcename=grd_path,
|
||||
webpack_aliases=args.webpack_alias,
|
||||
output_module=args.output_module,
|
||||
no_externals=args.no_externals,
|
||||
extra_modules=args.extra_modules,
|
||||
public_asset_path=args.public_asset_path,
|
||||
sync_wasm=args.sync_wasm,
|
||||
@@ -67,6 +68,7 @@ def parse_args():
|
||||
action='append',
|
||||
help='Entry points',
|
||||
required=True)
|
||||
parser.add_argument('--no_externals', action='store_true')
|
||||
parser.add_argument('--output_path', nargs=1)
|
||||
parser.add_argument('--root_gen_dir', nargs=1)
|
||||
parser.add_argument('--depfile_path', nargs=1)
|
||||
@@ -122,6 +124,9 @@ def transpile_web_uis(options):
|
||||
if options['public_asset_path'] is not None:
|
||||
args.append("--env=output_public_path=" + options['public_asset_path'])
|
||||
|
||||
if options['no_externals']:
|
||||
args.append("--env=no_externals")
|
||||
|
||||
# web pack aliases
|
||||
if options['webpack_aliases']:
|
||||
args.append("--env=webpack_aliases=" +
|
||||
|
||||
@@ -26,9 +26,9 @@ include_polymer = !is_android && !is_ios
|
||||
|
||||
group("grdp") {
|
||||
public_deps = [
|
||||
":external_js_bundles",
|
||||
":fonts_grdp",
|
||||
":icons_grdp",
|
||||
":leo_bundle",
|
||||
":static_grdp",
|
||||
"//brave/components/brave_account/resources/opaque_ke",
|
||||
]
|
||||
@@ -90,18 +90,28 @@ if (include_polymer) {
|
||||
]
|
||||
}
|
||||
|
||||
transpile_web_ui("leo_bundle") {
|
||||
transpile_web_ui("external_js_bundles") {
|
||||
generate_grdp = true
|
||||
resource_path_prefix = "brave"
|
||||
no_externals = true
|
||||
|
||||
imports_from = [ "//brave/ui/webui/resources/leo/" ]
|
||||
imports_from = [
|
||||
"//brave/ui/webui/resources/leo/",
|
||||
"//brave/ui/webui/resources/react/",
|
||||
]
|
||||
|
||||
entry_points = [ [
|
||||
"leo",
|
||||
rebase_path("leo/initialize_bundle.ts"),
|
||||
] ]
|
||||
entry_points = [
|
||||
[
|
||||
"leo",
|
||||
rebase_path("leo/initialize_bundle.ts"),
|
||||
],
|
||||
[
|
||||
"react",
|
||||
rebase_path("react/initialize_bundle.ts"),
|
||||
],
|
||||
]
|
||||
|
||||
resource_name = "leo"
|
||||
resource_name = "external_js"
|
||||
}
|
||||
|
||||
# Create a grdp that //ui/webui/resources can include in its main resources GRD
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
// Copyright (c) 2026 The Brave Authors. All rights reserved.
|
||||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
// You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
|
||||
// ESM facade for the combined React + ReactDOM bundle. The upstream packages
|
||||
// are CommonJS, so using them directly as webpack entries with
|
||||
// `output.library.type = 'module'` collapses each onto the bundle's `default`
|
||||
// export and breaks named imports from consumers. Bundling them together has
|
||||
// two further wins: react-dom's internal `require('react')` resolves directly
|
||||
// to React's CJS exports (no ESM boundary in the way), and consumers fetch a
|
||||
// single file.
|
||||
//
|
||||
// Externals in components/webpack/webpack.config.js map `react` and
|
||||
// `react-dom` to the `React` / `ReactDOM` namespace exports below.
|
||||
import * as React from 'react'
|
||||
import * as ReactDOM from 'react-dom'
|
||||
|
||||
export { React, ReactDOM }
|
||||
@@ -12,7 +12,7 @@ brave_resources_extra_grdps = [
|
||||
"$brave_resources_extra_grdps_path/brave_fonts_resources.grdp",
|
||||
"$brave_resources_extra_grdps_path/brave_icons_resources.grdp",
|
||||
"$brave_resources_extra_grdps_path/brave_static_resources.grdp",
|
||||
"$root_gen_dir/brave/web-ui-leo/leo.grdp",
|
||||
"$root_gen_dir/brave/web-ui-external_js/external_js.grdp",
|
||||
"$root_gen_dir/brave/web-ui-opaque_ke/opaque_ke.grdp",
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user