✨ improve(patch): build performance

examples/config-json/bud.config.json

@@ -1,13 +1,13 @@
 {
-  entry: ["app", ["app.js"]],
+  "entry": ["app", ["app.js"]],
 
   /**
    * Comments are okay
    */
-  babel: {
-    setPluginOptions: [
+  "babel": {
+    "setPluginOptions": [
       "@babel/plugin-transform-runtime",
-      {helpers: false, regenerator: false}
+      {"helpers": false, "regenerator": false}
     ]
   }
 }

examples/critical-css/bud.config.js

@@ -3,6 +3,6 @@
  */
 export default async bud => {
   bud.entry(`app`, [`app.css`]).entry(`app2`, [`app2.css`])
-  bud.html({template: bud.path(`public/index.html`)})
+  bud.html({ template: bud.path(`public/index.html`) })
   bud.critical.set(`src`, bud.path(`public/index.html`)).enable()
 }

examples/critical-css/src/app.js

@@ -10,5 +10,6 @@ const changeBg = () => {
  */
 changeBg()
 
-if (import.meta.webpackHot)
-  import.meta.webpackHot.accept(err => changeBg())
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(changeBg)
+}

examples/daisyui/tailwind.config.ts

@@ -1,9 +1,6 @@
 import type {Config} from 'tailwindcss'
-import daisyui from 'daisyui'
 
-const config: Config = {
+export default {
   content: ['src/**/*.js'],
-  plugins: [daisyui],
-}
-
-export default config
+  plugins: [await import('daisyui').then(m => m.default)],
+} satisfies Config

examples/esbuild/src/demo.ts

@@ -0,0 +1 @@
+;['fancy', 'ecma'].map(console.log)

examples/esbuild/tsconfig.json

@@ -3,5 +3,4 @@
   "compilerOptions": {
     "types": ["@roots/bud", "@roots/bud-esbuild"]
   },
-  "files": ["./bud.config.js"]
 }

examples/eslint-bud-config/bud.config.ts

@@ -0,0 +1,5 @@
+import {bud} from '@roots/bud'
+
+bud.eslint.setRules({
+  'no-console': 'error',
+})

examples/eslint-bud-config/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@examples/eslint-bud-config",
+  "$schema": "https://bud.js.org/bud.package.json",
+  "private": true,
+  "type": "module",
+  "browserslist": [
+    "extends @roots/browserslist-config"
+  ],
+  "devDependencies": {
+    "@roots/bud": "workspace:*",
+    "@roots/bud-eslint": "workspace:*",
+    "@roots/eslint-config": "workspace:*"
+  }
+}

examples/eslint-bud-config/src/index.js

@@ -0,0 +1 @@
+console.log('error')

examples/eslint/tsconfig.json → examples/eslint-bud-config/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": ["@roots/bud/config/tsconfig.json"],
   "compilerOptions": {
-
     "types": ["@roots/bud", "@roots/bud-eslint"]
-  }
+  },
+  "files": ["./bud.config.ts"]
 }

examples/eslint/.eslintrc.cjs

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ['@roots/eslint-config'],
+  rules: {
+    'no-console': 'error',
+  }
 }

examples/eslint/src/index.js

@@ -1,4 +1 @@
-const target = document.querySelector('body')
-
-target.innerHTML = `<div><h1>Hello</h1></div>`
-
+console.log('eslint should error')

examples/sage/bud.config.js

@@ -1,22 +1,17 @@
-// @ts-check
+import { bud } from '@roots/bud'
 
-/**
- * @param {import('@roots/bud').Bud} bud
- */
-export default async bud => {
-  bud
-    .entry({
-      app: ['@scripts/app', '@styles/app'],
-      editor: ['@scripts/editor', '@styles/editor'],
-    })
-    .copyDir('images')
-    .watch(['resources/views/*.blade.php'])
-    .serve(3000)
-    .proxy('http://example.test')
+bud
+  .entry({
+    app: ['@scripts/app', '@styles/app'],
+    editor: ['@scripts/editor', '@styles/editor'],
+  })
+  .copyDir('images')
+  .watch(['resources/views/*.blade.php'])
+  .serve(3000)
+  .proxy('http://example.test')
 
-  bud.wp.json
-    .useTailwindColors('extend')
-    .useTailwindFontFamily()
-    .useTailwindFontSize()
-    .useTailwindSpacing()
-}
+bud.wp.json
+  .useTailwindColors('extend')
+  .useTailwindFontFamily()
+  .useTailwindFontSize()
+  .useTailwindSpacing()

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

@@ -3,12 +3,12 @@ import type {Bud, Context} from '@roots/bud-framework'
 import {path} from '@repo/constants'
 import {factory} from '@roots/bud'
 
-export type Options = Omit<Partial<Context>, `extensions`> & {
+export type Options = {
   extensions?: Array<string>
-}
+} & Omit<Partial<Context>, `extensions`>
 
-const makeTestBud = async (options: Options = {}): Promise<Bud> => {
-  const bud = await factory({
+const makeTestBud = async (options: Options = {}): Promise<Bud> =>
+  await factory({
     basedir: options.basedir ?? path(`tests`, `util`, `project`),
     cache: false,
     dry: true,
@@ -19,8 +19,5 @@ const makeTestBud = async (options: Options = {}): Promise<Bud> => {
     ...options,
   })
 
-  return bud
-}
-
 export type {Bud}
 export {makeTestBud as factory, makeTestBud}

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

@@ -27,6 +27,11 @@ class Project {
    */
   public assets: Record<string, Record<string, unknown> | string> = {}
 
+  /**
+   * stdout from build command
+   */
+  public stdout: string
+
   /**
    * entrypoints.json contents
    */
@@ -54,39 +59,61 @@ class Project {
     let results: ExecaReturnValue
 
     if (this.options.buildCommand) {
-      results = await execa(...this.options.buildCommand, {
-        cwd: this.directory,
-      })
-    } else if (globalThis.__INTEGRATION__) {
       await execa(
         `node`,
         [this.getPath(`node_modules`, `.bin`, `bud`), `clean`],
-        {cwd: this.directory},
+        {
+          cwd: this.directory,
+          reject: false,
+        },
       )
+
+      results = await execa(...this.options.buildCommand, {
+        cwd: this.directory,
+        reject: false,
+      })
+    } else if (globalThis.__INTEGRATION__) {
       results = await execa(
         `node`,
         [
           this.getPath(`node_modules`, `.bin`, `bud`),
           `build`,
           `--no-cache`,
         ],
-        {cwd: this.directory},
+        {
+          cwd: this.directory,
+          reject: false,
+        },
       )
     } else {
-      await execa(`yarn`, [
-        `bud`,
-        `--basedir`,
-        this.options.label.replace(`@examples/`, `examples/`),
-        `clean`,
-      ])
-
-      results = await execa(`yarn`, [
-        `bud`,
-        `--basedir`,
-        this.options.label.replace(`@examples/`, `examples/`),
-        `build`,
-        `--no-cache`,
-      ])
+      await execa(
+        `yarn`,
+        [
+          `bud`,
+          `--basedir`,
+          this.options.label.replace(`@examples/`, `examples/`),
+          `clean`,
+        ],
+        {
+          cwd: this.directory,
+          reject: false,
+        },
+      )
+
+      results = await execa(
+        `yarn`,
+        [
+          `bud`,
+          `--basedir`,
+          this.options.label.replace(`@examples/`, `examples/`),
+          `build`,
+          `--no-cache`,
+        ],
+        {
+          cwd: this.directory,
+          reject: false,
+        },
+      )
     }
 
     results.stdout &&
@@ -109,6 +136,8 @@ class Project {
       this.getPath(this.getBaseUrl(), `manifest.json`),
     )
 
+    this.stdout = await fs.read(this.getPath(`build.stdout.log`))
+
     await Promise.all(
       Object.entries(this.manifest).map(
         async ([name, path]: [string, string]) => {
@@ -156,6 +185,11 @@ class Project {
     return this.getPath(this.manifest[name])
   }
 
+  @bind
+  public async read(...name: string[]) {
+    return await fs.read(this.getPath(...name))
+  }
+
   /**
    * Get base url
    */

sources/@repo/test-kit/tests/index.ts

@@ -1,4 +1,4 @@
-export {default as testThemeJson} from './theme.json.js'
 export {default as testIsCompiledCss} from './isCompiledCss.js'
-export {default as testIsMinimized} from './isMinimized.js'
 export {default as testIsCompiledJs} from './isCompiledJs.js'
+export {default as testIsMinimized} from './isMinimized.js'
+export {default as testThemeJson} from './theme.json.js'

sources/@repo/test-kit/tests/theme.json.ts

@@ -24,8 +24,8 @@ export default (json: Record<string, any>) => {
     expect(json.settings.color.gradients).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          name: expect.any(String),
           gradient: expect.any(String),
+          name: expect.any(String),
           slug: expect.any(String),
         }),
       ]),

sources/@roots/blade-loader/test/index.test.ts

@@ -1,39 +1,44 @@
 import path from 'node:path'
-import webpack from 'webpack'
+
+import BladeWebpackPlugin from '@roots/blade-loader/plugin'
 import {createFsFromVolume, Volume} from 'memfs'
-import {beforeEach, expect, describe, it} from 'vitest'
-import BladeWebpackPlugin from '../lib/plugin'
+import {beforeAll, describe, expect, it} from 'vitest'
+import webpack, {type Compiler, type StatsCompilation} from 'webpack'
 
-describe('@roots/blade-loader', () => {
-  let compiler
-  let compilationStats
+describe(`@roots/blade-loader`, () => {
+  let compiler: Compiler
+  let compilationStats: StatsCompilation | undefined
 
-  beforeEach(async () => {
+  beforeAll(async () => {
     compiler = webpack({
       context: __dirname,
       entry: [`./index.js`, `./index.blade.php`],
-      output: {
-        path: path.resolve(__dirname),
-      },
       module: {
         rules: [
           {
             test: /\.jpg$/,
-            type: 'asset/resource',
+            type: `asset/resource`,
           },
           {
             test: /\.js$/,
             use: [`babel-loader`],
           },
         ],
       },
+      output: {
+        path: path.resolve(__dirname),
+      },
       plugins: [new BladeWebpackPlugin()],
       resolve: {
         modules: [__dirname],
       },
     })
 
-    compiler.outputFileSystem = createFsFromVolume(new Volume())
+    compiler.outputFileSystem = createFsFromVolume(new Volume()) as any
+
+    if (!compiler.outputFileSystem)
+      throw new Error(`No output file system`)
+
     compiler.outputFileSystem.join = path.join.bind(path)
 
     await new Promise((resolve, reject) => {
@@ -42,19 +47,19 @@ describe('@roots/blade-loader', () => {
 
         compilationStats = stats?.toJson({
           assets: true,
-          modules: true,
           entrypoints: true,
+          modules: true,
         })
         return resolve(null)
       })
     })
   })
 
-  it('does not error', () => {
-    expect(compilationStats.errors).toStrictEqual([])
+  it(`does not error`, () => {
+    expect(compilationStats?.errors).toStrictEqual([])
   })
 
-  it('works good', () => {
+  it(`works good`, () => {
     expect(
       // @ts-ignore
       Object.values(compilationStats.entrypoints).pop(),
@@ -68,6 +73,6 @@ describe('@roots/blade-loader', () => {
         ],
       }),
     )
-    expect(compilationStats.assets).toHaveLength(2)
+    expect(compilationStats?.assets).toHaveLength(2)
   })
 })