Storybook - better determine correct brave-core output path allowing …

…specification via param or fallback to most recently built

Plus, generate tsconfig file for even more specific path mapping

Ensure rewards mojom is built before storybook

.storybook/BUILD.gn

@@ -17,6 +17,7 @@ group("storybook") {
   deps = [
     "//brave/components/brave_new_tab_ui:mojom_js",
     "//brave/components/brave_news/common:mojom_js",
+    "//brave/components/brave_rewards/common/mojom:mojom_js",
     "//brave/components/brave_shields/core/common:mojom_js",
     "//brave/components/brave_vpn/common/mojom:mojom_js",
     "//brave/components/brave_wallet/common:mojom_js",

.storybook/webpack.config.js

@@ -6,34 +6,64 @@
 const path = require('path')
 const webpack = require('webpack')
 const fs = require('fs')
+const config = require('../build/commands/lib/config')
+const genTsConfig = require('../build/commands/lib/genTsConfig')
 const {
   fallback,
   provideNodeGlobals
 } = require('../components/webpack/polyfill')
+const generatePathMap = require('../components/webpack/path-map')
 
 const buildConfigs = ['Component', 'Static', 'Debug', 'Release']
 const extraArchitectures = ['arm64', 'x86']
 
-function getBuildOuptutPathList(buildOutputRelativePath) {
+// Choose which brave-core build directory to look for pre-compiled
+// resource dependencies:
+// 1. Default for local builds for the actual platform / architecture
+// 2. platform / architecture overriden by environment variables
+// 3. most recently built - this caters to the common scenario when a
+// non-standard target has been built but no arguments are provided to storybook
+config.update({
+  target_arch: process.env.TARGET_ARCH,
+  target_os: process.env.TARGET_OS,
+  target_environment: process.env.TARGET_ENVIRONMENT,
+  target: process.env.TARGET
+})
+
+let outputPath = config.outputDir
+
+function getBuildOutputPathList() {
   return buildConfigs.flatMap((config) => [
-    path.resolve(__dirname, `../../out/${config}/${buildOutputRelativePath}`),
+    path.resolve(__dirname, `../../out/${config}`),
     ...extraArchitectures.map((arch) =>
       path.resolve(
         __dirname,
-        `../../out/${config}_${arch}/${buildOutputRelativePath}`
+        `../../out/${config}_${arch}`
       )
     )
   ])
 }
 
-const genFolder = getBuildOuptutPathList('gen')
-  .filter((a) => fs.existsSync(a))
-  .sort((a, b) => fs.statSync(b).mtime - fs.statSync(a).mtime)[0]
-if (!genFolder) {
-  throw new Error('Failed to find build output folder!')
+if (fs.existsSync(outputPath)) {
+  console.log('Assuming precompiled dependencies can be found at the existing path found from brave-core configuration: ' + outputPath)
+} else {
+  const outDirectories = getBuildOutputPathList()
+    .filter(a => fs.existsSync(a))
+    .sort((a, b) => fs.statSync(b).mtime - fs.statSync(a).mtime)
+  if (!outDirectories.length) {
+    throw new Error('Cannot find any brave-core build output directories. Have you run a brave-core build yet with the specified (or default) configuration?')
+  }
+  outputPath = outDirectories[0]
 }
 
-const basePathMap = require('../components/webpack/path-map')(genFolder)
+const genPath = path.join(outputPath, 'gen')
+
+if (!fs.existsSync(genPath)) {
+  throw new Error("Failed to find build output 'gen' folder! Have you run a brave-core build yet with the specified (or default) configuration?")
+}
+console.log(`Using brave-core generated dependency path of '${genPath}'`)
+
+const basePathMap = generatePathMap(genPath)
 
 // Override the path map we use in the browser with some additional mock
 // directories, so that we can replace things in Storybook.
@@ -52,12 +82,8 @@ const pathMap = {
  * support for scheme prefixes (like chrome://)
  *
  * Note: This prefixReplacer is slightly different from the one we use in proper
- * builds, as it takes the first match from any build folder, rather than
- * specifying one - we don't know what the user built last, so we just see what
- * we can find.
+ * builds, as some path maps have multiple possible locations (e.g. for mocks).
  *
- * This isn't perfect, and in future it'd be good to pass the build folder in
- * via an environment variable. For now though, this works well.
  * @param {string} prefix The prefix
  * @param {string[] | string} replacements The real path options
  */
@@ -116,6 +142,9 @@ function useMockedModules(moduleNames) {
 
 // Export a function. Accept the base config as the only param.
 module.exports = async ({ config, mode }) => {
+  const tsConfigPath = await genTsConfig(genPath, 'tsconfig-storybook.json', genPath, path.resolve(__dirname, '../tsconfig-storybook.json'))
+  console.log(`Using generated tsconfig path of '${tsConfigPath}'`)
+
   const isDevMode = mode === 'development'
   // Make whatever fine-grained changes you need
   config.module.rules.push(
@@ -148,11 +177,7 @@ module.exports = async ({ config, mode }) => {
       test: /\.(ts|tsx)$/,
       loader: 'ts-loader',
       options: {
-        // TODO(petemill): point to the tsconfig in gen/[target] that
-        // is made during build-time, or generate a new one. For both those
-        // options, use a cli arg or environment variable to obtain the correct
-        // build target.
-        configFile: path.resolve(__dirname, '..', 'tsconfig-storybook.json'),
+        configFile: tsConfigPath,
         getCustomTransformers: path.join(
           __dirname,
           '../components/webpack/webpack-ts-transformers.js'

components/webpack/gen-tsconfig.js → build/commands/lib/genTsConfig.js

@@ -1,24 +1,30 @@
+// Copyright (c) 2023 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/.
+
 const fs = require('fs-extra')
 const path = require('path')
-const pathMap = require('./path-map')(process.env.ROOT_GEN_DIR)
-
-const srcPath = path.resolve(__dirname, '../../../')
-const braveSrcPath = path.join(srcPath, 'brave')
+const Config = require('./config')
 
 /**
  * Generates a tsconfig.json file in the gen/ directory
  * so that typescript can import files from cthe current build's
  * gen/ directory (e.g. mojom-generated JS).
  *
- * @param {*} [atPath=process.env.ROOT_GEN_DIR]
- * @returns void
+ * @param {*} genPath precompiled brave-core gen dir full path
+ * @param {*} name name of tsconfig file, e.g. tsconfig-webpack.json
+ * @param {*} atPath where to generate the file
+ * @param {*} extendsFrom full path of tsconfig to extend
+ * @returns full path to created tsconfig file
  */
- async function createGenTsConfig (atPath = process.env.ROOT_GEN_DIR) {
+module.exports = async function createGenTsConfig (genPath = process.env.ROOT_GEN_DIR, name = 'tsconfig-webpack.json', atPath = genPath, extendsFrom = path.join(Config.braveCoreDir, 'tsconfig-webpack.json')) {
+  const pathMap = require('../../../components/webpack/path-map')(genPath)
   const configExtendsFrom = path.relative(
     atPath,
-    path.join(braveSrcPath, 'tsconfig-webpack.json')
+    extendsFrom
   )
-  const tsConfigPath = path.join(atPath, 'tsconfig-webpack.json')
+  const tsConfigPath = path.join(atPath, name)
   // Even though ts-loader will get the paths from webpack for module resolution
   // that does not help some issues where chromium both generates ts definitions
   // and has JSDoc comments for the .m.js file. Sometimes the JSDoc is incorrect
@@ -41,16 +47,10 @@ const braveSrcPath = path.join(srcPath, 'brave')
     references: [
       {
         // This ts project is generated by //ui/webui/resources:library
-        path: path.join(atPath, 'ui/webui/resources/tsconfig.json')
+        path: path.join(genPath, 'ui/webui/resources/tsconfig.json')
       }
     ]
   }
   await fs.writeFile(tsConfigPath, JSON.stringify(config))
   return tsConfigPath
 }
-
-createGenTsConfig()
-.catch(err => {
-  console.error(err)
-  process.exit(1)
-})

build/commands/scripts/genTsConfig.js

@@ -0,0 +1,12 @@
+// Copyright (c) 2023 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/.
+
+const genTsConfig = require('../lib/genTsConfig')
+
+genTsConfig()
+.catch(err => {
+  console.error(err)
+  process.exit(1)
+})

components/webpack/BUILD.gn

@@ -11,7 +11,10 @@ action("generate_tsconfig") {
     "//ui/webui/resources/js:build_ts",
   ]
   inputs = [
-    "gen-tsconfig.js",
+    "//brave/package.json",
+    "//brave/build/commands/lib/config.js",
+    "//brave/build/commands/lib/genTsConfig.js",
+    "//brave/build/commands/scripts/genTsConfig.js",
     "path-map.js",
   ]
   outputs = [ "$root_gen_dir/tsconfig-webpack.json" ]

package.json

@@ -34,7 +34,7 @@
     "eslint": "eslint ./components",
     "pep8": "pycodestyle --max-line-length 120 -r script",
     "web-ui-gen-grd": "node components/webpack/gen-webpack-grd",
-    "web-ui-gen-tsconfig": "node components/webpack/gen-tsconfig",
+    "web-ui-gen-tsconfig": "node build/commands/scripts/genTsConfig",
     "web-ui": "webpack --config components/webpack/webpack.config.js",
     "build-storybook": "npm run build -- --target=brave:storybook && storybook build -c .storybook -o .storybook-out",
     "storybook": "storybook dev",