✨ improve: improved webpack internals visibility (#2284)

- improved visibility into webpack lifecycle via `@roots/bud-extensions/webpack-lifecycle-plugin`
- flatten `context` (provided to `@roots/bud/factory`)
- organize CLI flags using modules
- downgrade `import-meta-resolve` to 2.2.2 (from 3.0.0) for backwards compatibility
- disable `experiments.backCompat` for improved performance: see https://www.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack-5

## Type of change

**MINOR: feature**

package.json

@@ -34,7 +34,7 @@
  "eslint-plugin-react-hooks": "4.6.0",
  "eslint-plugin-simple-import-sort": "10.0.0",
  "execa": "7.1.1",
- "import-meta-resolve": "3.0.0",
+ "import-meta-resolve": "2.2.2",
  "lodash": "4.17.21",
  "playwright": "1.33.0",
  "pm2": "^5.3.0",

sources/@repo/test-kit/bud.ts

@@ -14,25 +14,19 @@ export const repoPath = (...path: Array<string>) =>
 export const basedir = repoPath(`tests`, `util`, `project`)
 
 export const factory = async (
- overrides?: Partial<Options.CommandContext>,
- run?: boolean,
+ overrides: Partial<Options.Context> = {},
 ): Promise<Bud> => {
  const bud = await makeInstance({
  basedir,
+ force: true,
+ dry: true,
+ log: false,
+ notify: false,
+ mode: `production`,
  ...overrides,
- args: {
- force: true,
- dry: true,
- log: false,
- notify: false,
- ...(overrides?.args ?? {}),
- },
  })
 
- if (!bud.isCLI())
- throw new Error(`test error: bud is not a CLI instance`)
-
- if (run) await bud.run()
+ await bud.run()
 
  return bud
 }

sources/@roots/bud-api/src/methods/html/helpers.ts

@@ -2,7 +2,6 @@ import {dirname, resolve} from 'node:path'
 import {fileURLToPath} from 'node:url'
 
 import type * as HTMLExtension from '@roots/bud-extensions/html-webpack-plugin'
-import type * as InterpolateHTMLExtension from '@roots/bud-extensions/interpolate-html-webpack-plugin'
 import type {Bud} from '@roots/bud-framework'
 import isObject from '@roots/bud-support/lodash/isObject'
 import isUndefined from '@roots/bud-support/lodash/isUndefined'
@@ -34,18 +33,3 @@ export const getHtmlPluginOptions = (
 
  return {template, ...omit(options, `replace`, `template`)}
 }
-
-export const getInterpolatePluginOptions = (
- bud: Bud,
- options: Parameters[0],
-): InterpolateHTMLExtension.Options => {
- if (
- !isObject(options) ||
- isUndefined(options) ||
- isUndefined(options.replace)
- ) {
- return bud.env.getPublicEnv()
- }
-
- return {...bud.env.getPublicEnv(), ...options.replace}
-}

sources/@roots/bud-api/src/methods/html/index.test.ts

@@ -31,9 +31,9 @@ describe(`bud.html`, () => {
  `@roots/bud-extensions/interpolate-html-webpack-plugin`,
  )
  htmlEnableSpy = vi.spyOn(htmlPlugin, `enable`)
- htmlSetOptionsSpy = vi.spyOn(htmlPlugin, `setOptions`)
+ htmlSetOptionsSpy = vi.spyOn(htmlPlugin, `set`)
  interpolateEnableSpy = vi.spyOn(interpolatePlugin, `enable`)
- interpolateSetOptionsSpy = vi.spyOn(interpolatePlugin, `setOptions`)
+ interpolateSetOptionsSpy = vi.spyOn(interpolatePlugin, `set`)
 
  html = source.html.bind(bud)
  })
@@ -50,14 +50,9 @@ describe(`bud.html`, () => {
  const returned = await html(false)
 
  expect(htmlEnableSpy).toHaveBeenCalledWith(false)
- expect(htmlSetOptionsSpy).toHaveBeenCalledWith(
- helpers.defaultHtmlPluginOptions,
+ Object.entries(helpers.defaultHtmlPluginOptions).forEach(v =>
+ expect(htmlSetOptionsSpy).toHaveBeenCalledWith(...v),
  )
- expect(interpolateEnableSpy).toHaveBeenCalledWith(false)
- expect(interpolateSetOptionsSpy).toHaveBeenCalledWith({
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- })
 
  expect(returned).toBe(bud)
  })
@@ -66,14 +61,9 @@ describe(`bud.html`, () => {
  const returned = await html(true)
 
  expect(htmlEnableSpy).toHaveBeenCalledWith(true)
- expect(htmlSetOptionsSpy).toHaveBeenCalledWith(
- helpers.defaultHtmlPluginOptions,
+ Object.entries(helpers.defaultHtmlPluginOptions).forEach(v =>
+ expect(htmlSetOptionsSpy).toHaveBeenCalledWith(...v),
  )
- expect(interpolateEnableSpy).toHaveBeenCalledWith(true)
- expect(interpolateSetOptionsSpy).toHaveBeenCalledWith({
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- })
 
  expect(returned).toBe(bud)
  })
@@ -82,14 +72,9 @@ describe(`bud.html`, () => {
  const returned = await html()
 
  expect(htmlEnableSpy).toHaveBeenCalledWith(true)
- expect(htmlSetOptionsSpy).toHaveBeenCalledWith(
- helpers.defaultHtmlPluginOptions,
+ Object.entries(helpers.defaultHtmlPluginOptions).forEach(v =>
+ expect(htmlSetOptionsSpy).toHaveBeenCalledWith(...v),
  )
- expect(interpolateEnableSpy).toHaveBeenCalledWith(true)
- expect(interpolateSetOptionsSpy).toHaveBeenCalledWith({
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- })
 
  expect(returned).toBe(bud)
  })
@@ -98,14 +83,9 @@ describe(`bud.html`, () => {
  const returned = await html({})
 
  expect(htmlEnableSpy).toHaveBeenCalledWith(true)
- expect(htmlSetOptionsSpy).toHaveBeenCalledWith(
- helpers.defaultHtmlPluginOptions,
+ Object.entries(helpers.defaultHtmlPluginOptions).forEach(v =>
+ expect(htmlSetOptionsSpy).toHaveBeenCalledWith(...v),
  )
- expect(interpolateEnableSpy).toHaveBeenCalledWith(true)
- expect(interpolateSetOptionsSpy).toHaveBeenCalledWith({
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- })
 
  expect(returned).toBe(bud)
  })
@@ -114,33 +94,20 @@ describe(`bud.html`, () => {
  await html({template: `test`, replace: {foo: `bar`}})
 
  expect(interpolateEnableSpy).toHaveBeenCalledWith(true)
- expect(interpolateSetOptionsSpy).toHaveBeenCalledWith({
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- foo: `bar`,
- })
+ expect(interpolateSetOptionsSpy).toHaveBeenCalledWith(`foo`, `bar`)
  expect(htmlEnableSpy).toHaveBeenCalledWith(true)
  expect(budPathSpy).toHaveBeenCalledWith(`test`)
  expect(htmlSetOptionsSpy).toHaveBeenCalledWith(
- expect.objectContaining({
- template: expect.stringMatching(/\/test$/),
- }),
+ `template`,
+ bud.path(`test`),
  )
  })
 
  it(`should leave absolute paths alone when passed as options.template`, async () => {
  await html({template: `/test`, replace: {foo: `bar`}})
 
- expect(interpolateSetOptionsSpy).toHaveBeenCalledWith({
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- foo: `bar`,
- })
- expect(htmlSetOptionsSpy).toHaveBeenCalledWith(
- expect.objectContaining({
- template: expect.stringMatching(/\/test$/),
- }),
- )
+ expect(interpolateSetOptionsSpy).toHaveBeenCalledWith(`foo`, `bar`)
+ expect(htmlSetOptionsSpy).toHaveBeenCalledWith(`template`, `/test`)
  })
 
  it(`getHtmlPluginOptions returns normalized options with \`template\` when it is not included`, async () => {
@@ -193,32 +160,4 @@ describe(`bud.html`, () => {
  helpers.getHtmlPluginOptions(bud, {template: `foo`})
  expect(budPathSpy).toHaveBeenCalledWith(`foo`)
  })
-
- it.each([true, false, undefined, {}])(
- `getInterpolatePluginOptions calls bud env`,
- async value => {
- const envSpy = vi.spyOn(bud.env, `getPublicEnv`)
- helpers.getInterpolatePluginOptions(bud, value)
- expect(envSpy).toHaveBeenCalledOnce()
- },
- )
-
- it(`appends options.replace values to publicEnv`, async () => {
- const envSpy = vi.spyOn(bud.env, `getPublicEnv`)
-
- const result = helpers.getInterpolatePluginOptions(bud, {
- replace: {
- foo: `bar`,
- },
- })
-
- expect(envSpy).toHaveBeenCalledOnce()
- expect(result).toEqual(
- expect.objectContaining({
- foo: `bar`,
- APP_DESCRIPTION: `test app description`,
- APP_TITLE: `bud.js test app`,
- }),
- )
- })
 }, 60000)

sources/@roots/bud-api/src/methods/html/index.ts

@@ -1,6 +1,7 @@
 import type * as HTMLExtension from '@roots/bud-extensions/html-webpack-plugin'
 import type * as InterpolateHTMLExtension from '@roots/bud-extensions/interpolate-html-webpack-plugin'
 import type {Bud} from '@roots/bud-framework'
+import isObject from '@roots/bud-support/lodash/isObject'
 
 type Options = HTMLExtension.Options & {
  replace?: InterpolateHTMLExtension.Options
@@ -16,21 +17,31 @@ export interface html {
  * Set HTML template
  */
 export const html: html = async function (this: Bud, options) {
- const {getHtmlPluginOptions, getInterpolatePluginOptions} = await import(
- `./helpers.js`
- )
+ const {getHtmlPluginOptions} = await import(`./helpers.js`)
 
  const enabled = options !== false
 
- this.extensions
- .get(`@roots/bud-extensions/html-webpack-plugin`)
- ?.setOptions(getHtmlPluginOptions(this, options))
- .enable(enabled)
+ const htmlExtension = this.extensions.get(
+ `@roots/bud-extensions/html-webpack-plugin`,
+ )
+ htmlExtension.enable(enabled)
+
+ const htmlOptions = getHtmlPluginOptions(this, options)
+ if (isObject(htmlOptions)) {
+ Object.entries(htmlOptions).forEach(v => htmlExtension.set(...v))
+ }
 
- this.extensions
- .get(`@roots/bud-extensions/interpolate-html-webpack-plugin`)
- ?.setOptions(getInterpolatePluginOptions(this, options))
- .enable(enabled)
+ const interpolateVariablesExtension = this.extensions.get(
+ `@roots/bud-extensions/interpolate-html-webpack-plugin`,
+ )
+ interpolateVariablesExtension.enable(enabled)
+
+ if (isObject(options) && isObject(options.replace)) {
+ Object.entries(options.replace).forEach(
+ (v: [string, string | RegExp]) =>
+ interpolateVariablesExtension.set(...v),
+ )
+ }
 
  return this
 }

sources/@roots/bud-api/vendor/template.html

@@ -4,12 +4,12 @@
 <head>
  <meta charset="utf-8" />
  <meta name=viewport content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
  <meta name="description" content="%APP_DESCRIPTION%" />
  <title>%APP_TITLE%</title>
 </head>
 
 <body>
+ <noscript>%NO_SCRIPT%</noscript>
  <div id="root"></div>
 </body>
 

sources/@roots/bud-babel/src/extension.ts

@@ -143,7 +143,7 @@ export default class BabelExtension extends Extension {
  )
 
  this.configFileOptions =
- this.configFile.module.default ?? this.configFile.module
+ this.configFile.module?.default ?? this.configFile.module
 
  hooks.on(`build.cache.buildDependencies`, paths => {
  if (isString(this.configFile)) {

sources/@roots/bud-build/src/config/experiments.ts

@@ -1,4 +1,6 @@
 import type {Factory} from './index.js'
 
 export const experiments: Factory<`experiments`> = async ({hooks}) =>
- hooks.filter(`build.experiments`, undefined)
+ hooks.filter(`build.experiments`, {
+ backCompat: false,
+ })

sources/@roots/bud-build/src/config/output/index.ts

@@ -18,7 +18,7 @@ export const output: Factory<`output`> = async ({
  filename: filename({filter, relPath}),
  module: filter(`build.output.module`, false),
  path: filter(`build.output.path`, path(`@dist`)),
- pathinfo: filter(`build.output.pathinfo`),
+ pathinfo: filter(`build.output.pathinfo`, false),
  publicPath: filter(`build.output.publicPath`, `auto`),
  scriptType: filter(
  `build.output.scriptType`,

sources/@roots/bud-build/src/config/profile.ts

@@ -1,7 +1,4 @@
 import type {Factory} from './index.js'
 
 export const profile: Factory<`profile`> = async bud =>
- bud.hooks.filter(
- `build.profile`,
- bud.isCLI() && bud.context.args[`debug`],
- )
+ bud.hooks.filter(`build.profile`, bud.context.debug)

sources/@roots/bud-build/src/handlers/items/items.ts

@@ -65,7 +65,7 @@ export const minicss: Factory<Item> = async ({makeItem}) =>
  .setLoader(`minicss`)
  .setIdent(`minicss`)
  .setOptions(app => ({
- publicPath: app.hooks.filter(`build.output.publicPath`),
+ publicPath: app.publicPath(),
  }))
 
 /**

sources/@roots/bud-build/src/handlers/rules/json.ts

@@ -7,4 +7,6 @@ export const json: Factory = async ({filter, makeRule, path}) =>
  .setType(`json`)
  .setInclude([() => path()])
  .setTest(filter(`pattern.json`))
- .setParser({parse: json5.parse})
+ .setParser({
+ parse: json5.parse,
+ })

sources/@roots/bud-build/src/handlers/rules/toml.ts

@@ -7,4 +7,6 @@ export const toml: Factory = async ({filter, makeRule, path}) =>
  .setType(`json`)
  .setInclude([() => path()])
  .setTest(() => filter(`pattern.toml`))
- .setParser({parse: tomlParser.parse})
+ .setParser({
+ parse: tomlParser.parse,
+ })

sources/@roots/bud-cache/src/invalidate-cache/index.ts

@@ -30,7 +30,7 @@ export default class InvalidateCacheExtension extends Extension {
  public override async register(bud: Bud) {
  const invalidate = await bud.fs?.exists(this.invalidationFile)
 
- if (invalidate || (bud.isCLI() && bud.context.args.force)) {
+ if (invalidate || bud.context.force) {
  await bud.fs.remove(this.invalidationFile)
  await bud.fs.remove(bud.cache.cacheDirectory)
  }

sources/@roots/bud-cache/src/service/index.ts

@@ -42,8 +42,8 @@ export default class Cache
  public get type(): 'memory' | 'filesystem' {
  return this.app.hooks.filter(
  `build.cache.type`,
- this.app.isCLI() && isString(this.app.context.args.cache)
- ? this.app.context.args.cache
+ isString(this.app.context.cache)
+ ? this.app.context.cache
  : `filesystem`,
  )
  }

sources/@roots/bud-client/src/hot/client.ts

@@ -111,12 +111,14 @@ export const client = async (
  }
 
  /* Instantiate indicator, overlay */
- await components.make(options)
+ try {
+ await components.make(options)
+ } catch (error) {}
 
  /* Instantiate eventSource */
  const events = injectEvents(EventSource).make(options)
 
- if (!window.bud.listeners[options.name]) {
+ if (!window.bud.listeners?.[options.name]) {
  window.bud.listeners[options.name] = async payload => {
  if (!payload) return
 

sources/@roots/bud-compiler/src/compiler.service.tsx

@@ -74,13 +74,8 @@ export class Compiler extends Service implements Contract.Service {
 
  await this.app.hooks.fire(`compiler.before`, this.app)
 
- if (this.app.isCLI() && this.app.context.args.dry) {
- this.logger.timeEnd(`initialize`)
- this.logger.log(`running in dry mode. exiting early.`)
- return
- }
-
  this.logger.timeEnd(`initialize`)
+
  this.logger.await(`compilation`)
 
  this.instance = this.implementation(this.config)