Bud v5.6.0 released

kellymears · March 16, 2022, 1:11am

Performance

bud is now about 30% faster .

There is a new CLI flag --flush which will force a full recompilation if you feel like something is goofy. It’s also recommended to run bud clean after installing an update.

Notifier

MacOS notification center notices are fixed. If you don’t want them run the cli command with the --no-notify flag.

bud.path and bud.setPath

TLDR: Way less clunky to work with.

bud.path() can be called with no parameters will now resolve to the project root.
bud.path('relative/path') now returns an absolute path from a project relative one.
bud.path('/absolute/path') is recognized as an absolute path and will not be interpolated.
There are several reserved strings referencing key directories: @src, @dist, @storage, @modules. The @ prefix is now being used to make it clearer that this is not a normal path.
You can use bud.setPath to define additional directory aliases:

bud.setPath({'@config': 'app/config/directory'})

bud.path('@config/config-file.json')
// => [root]/app/config/directory/config-file.json

This only applies to the first segment and only when the @ symbol is prefixed. app/@alias/example will not work.
This does not automatically make webpack aliases from a path. To use the same convention in your client scripts you still need to use bud.alias.

Upgrade guide

Any calls which referenced 'project' as the first parameter should have that parameter removed. Examples:
- bud.path('project') becomes bud.path().
- bud.path('project', 'directory') becomes bud.path('directory').
Any calls which used src, dist, storage or modules as the first parameter should be updated to use the @ prefix. Examples:
- bud.path('src', 'some-file.js') becomes bud.path('@src', 'some-file.js').
- Or, just bud.path('@src/some-file.js').
Any calls to bud.setPath which referenced those magic strings also needs to be updated. Example:
- bud.setPath('src', 'js') becomes bud.setPath('@src', 'js')

Defining modules is a lot easier

Want to add support to bud for some arcane syntax? Great news, the API for loaders, items and rules just got a nice upgrade.

Here’s typescript.

app.build
  .setLoader('ts', 'ts-loader')
  .setItem('ts', {loader: 'ts', options: {}})
  .setRule('ts', {test: /\.tsx?/, use: [`babel`, `ts`]})

If you just want to modify an existing rule, there is lots for you in this update:

app.build.rule.ts.setUse([`babel`, `ts`])
app.build.loaders.ts.setSrc(`alternate-ts-loader`)
app.build.items.ts.setOptions({...options})

Extension authors should take advantage of how all properties for loader, item, and rule definitions can be expressed with a callback. This means if someone changes their source path later your rule will still be pointed in the right direction.

More information

Changelog

docs: update by @kellymears in docs: update by kellymears · Pull Request #1221 · roots/bud · GitHub
docs header: add discourse link by @retlehs in 🔧 docs header: add discourse link by retlehs · Pull Request #1223 · roots/bud · GitHub
fix: docs fouc by @kellymears in fix: docs fouc by kellymears · Pull Request #1222 · roots/bud · GitHub
add discourse topic release workflow by @retlehs in ✨ add discourse topic release workflow by retlehs · Pull Request #1234 · roots/bud · GitHub
improve: build, cache, compiler by @kellymears in improve: build, cache, compiler by kellymears · Pull Request #1229 · roots/bud · GitHub
fix: macos notifier by @kellymears in fix: macos notifier by kellymears · Pull Request #1236 · roots/bud · GitHub

Full Changelog: Comparing v5.5.0...v5.6.0 · roots/bud · GitHub

BSBjorn · March 16, 2022, 7:07am

I get this Error when ugradingto 5.6, running on 5.5 works fine?

[webpack-dev-middleware] Error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at /Users/bjorn/Projects/Sites/kyrkjebygd.test/web/app/themes/kyrkjebygdheia/node_modules/@roots/sage/lib/cjs/theme/plugin.js:18:23

My bud config.

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      banner: ['@scripts/banner'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/**/*.blade.php',
      'app/View/**/*.php',
    ])

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://kyrkjebygdheia.test')

    /**
     * Development URL
     */
    .serve('http://kyrkjebygdheia.test:3000')
    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
     .themeJson({
      color: {
        custom: false,
        customGradient: false,
        defaultPalette: false,
        defaultGradients: false
      },
      custom: {
        spacing: {},
        typography: {
          fontSize: {},
          lineHeight: {}
        }
      },
      spacing: {
        padding: true,
        units: ["px", "%", "em", "rem", "vw", "vh"]
      },
      typography: {
        customFontSize: false
      }
     })

     /**
      * Set `theme.json` colors from `tailwind.config.js` values
      */
     .useTailwindColors();
};

Gydo_Verbeek · March 16, 2022, 9:03am

I get an error, also got it at version 5.5

 TypeError: mod.require is not a function 
    at dynamicRequire ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:4683:14)
    at Object.exports.install ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:5307:16)
    at installSourceMapSupport ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:127001:26)
    at create ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:126999:5)
    at register ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:126862:19)
    at Bud.read ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:133020:9)
    at [secure]/node_modules/@roots/bud/lib/cjs/services/Project/project.service.js:169:45
    at Array.map (<anonymous>)
    at Project.searchConfigs ([secure]/node_modules/@roots/bud/lib/cjs/services/Project/project.service.js:151:72)
    at Project.boot ([secure]/node_modules/@roots/bud/lib/cjs/services/Project/project.service.js:88:20)

Am I missing something? Cleared yarn cache, re-install but no success…

kellymears · March 16, 2022, 11:57am

@BSBjorn i pushed a fix for this in 5.6.1. it’s available on npm now.

thanks for the heads up.

BSBjorn · March 16, 2022, 12:42pm

@kellymears works like a dream now

kellymears · March 16, 2022, 1:07pm

@Gydo_Verbeek i’m guessing based on context you are configuring bud with typescript.

I can reproduce and have a patch in process:

github.com/roots/bud

fix: typescript config

roots:main ← roots:5.6.2-fix-ts-config

opened 01:04PM - 16 Mar 22 UTC

kellymears

+35 -71

## Overview - fix ts config files refers: none closes: none ## Type of… change - PATCH: Backwards compatible bug fix  This PR includes breaking changes to the following core packages: - none This PR includes breaking changes to the follow extensions: - none ## Dependencies  ### Adds - none ### Removes - none

It’ll be available later today.

Until then if you want to revert to using .js config (with commonjs syntax) you’ll be back in action.

Gydo_Verbeek · March 16, 2022, 1:10pm

Yes we’re using Typescript.

Looking forward for the fix!

Thanks!

kellymears · March 16, 2022, 6:52pm

bud v5.6.1 released

This small update is recommended for all users of 5.6.x.

fix: theme.json generator in fix: theme.json generator by kellymears · Pull Request #1240 · roots/bud · GitHub

Gydo_Verbeek · March 17, 2022, 9:08pm

Hi Kelly,

I’ve got a problem now for compiling scss. It gives an error: Unexpected character ‘@’.
When I try to set a custom loader with your example it gives me the following error:

 TypeError: Cannot read properties of undefined (reading 'toWebpack') 
    at [secure]/node_modules/@roots/bud-build/lib/cjs/Rule/index.js:186:75
    at Array.map (<anonymous>)
    at Rule.toWebpack ([secure]/node_modules/@roots/bud-build/lib/cjs/Rule/index.js:186:36)
    at [secure]/node_modules/@roots/bud-build/lib/cjs/Build/config/builder.js:39:101
    at Array.map (<anonymous>)
    at [secure]/node_modules/@roots/bud-build/lib/cjs/Build/config/builder.js:39:84
    at [secure]/node_modules/@roots/bud-hooks/lib/cjs/Hooks/index.js:169:42
    at Array.reduce (<anonymous>)
    at Hooks.filter ([secure]/node_modules/@roots/bud-hooks/lib/cjs/Hooks/index.js:168:23)
    at [secure]/node_modules/@roots/bud-build/lib/cjs/Build/config/builder.js:35:30

How to fix this? Scss compiled fine before the update.

kellymears · March 19, 2022, 6:41am

Make sure all your versions are in sync. SCSS compiles fine in 5.6.2.

Gydo_Verbeek · March 19, 2022, 11:49am

I can’t get it working. I have latest versions of bud dependencies…
Tried everything, fresh install, bud clean. Nothing seems to fix this problem.

My dependencies:

 "@roots/bud": "5.6.2",
    "@roots/bud-babel": "5.6.2",
    "@roots/bud-eslint": "5.6.2",
    "@roots/bud-postcss": "5.6.2",
    "@roots/bud-sass": "5.6.2",
    "@roots/bud-typescript": "5.6.2",
    "@roots/sage": "5.6.2",

Error:

Module parse failed: Unexpected character '@' (2:0)                                                                                                                                                                                                 
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders                                                                                   // Import default style                                                                                                                                                                                                                             @import 'default';

alwaysblank · March 19, 2022, 2:50pm

Have you checked out this post about a similar error? Fontsource Error - Unexpected character '@'

Gydo_Verbeek · March 21, 2022, 8:13am

Thanks, this post fixed my issue.

Now I run into the following problem. I enabled sourcemap by setting devtool(‘eval’).
When this setting is enabled the builder gives me an error about sourcemap option has to be a boolean. So setting something different than false or devtool() is not working.

How do i fix this, because the eval option is great for developing.

alwaysblank · March 21, 2022, 2:07pm

@Gydo_Verbeek Please post your code, and the text of the error you’re seeing.

Gydo_Verbeek · March 21, 2022, 2:15pm

Error:

Module build failed (from ./node_modules/css-loader/dist/cjs.js):                                                                                                                                                                                                │
│ ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.                                                                                                                             │
│  - options.sourceMap should be a boolean.                                                                                                                                                                                                                        │
│    -> Allows to enable/disable source maps.                                                                                                                                                                                                                      │
│    -> Read more at https://github.com/webpack-contrib/css-loader#sourcemap                                                                                                                                                                                       │
│     at validate (/Users/gydoverbeek/Documents/Projects/brilonline-website/node_modules/schema-utils/dist/validate.js:105:11)                                                                                                                                     │
│     at Object.getOptions (/Users/gydoverbeek/Documents/Projects/brilonline-website/node_modules/webpack/lib/NormalModule.js:580:19)                                                                                                                              │
│     at Object.loader (/Users/gydoverbeek/Documents/Projects/brilonline-website/node_modules/css-loader/dist/index.js:31:27)

My config (typescript):

import type {Bud} from '@roots/bud';

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

export default (app: Bud) => {
	app
		.setPath({
			'@src': 'web/app/themes/apex/resources',
			'@dist': 'web/app/themes/apex/public',
			'@plugin': 'plugins/brilonline-resources/resources',
		})

		.tap((config) => {
			config.build.rules.sass.setInclude([
				app.path("@src"),
				app.path("@plugin"),
			]);
		})

		.when(app.isProduction, (config) => {
			config.devtool(false).splitChunks().minimize().runtime('single');
		})

		.when(app.isDevelopment, (config) => {
			config.devtool('eval');
			config.use(new BrowserSyncPlugin({
				proxy: config.env.get('WP_HOME'),
			}))
		})

		.alias({
			'@fonts': app.path('@plugin', 'fonts'),
			'@icons': app.path('@plugin','fonts/brilonline-icons'),
			'@styles_resources': app.path('@plugin','styles'),
			'@scripts_resources': app.path('@plugin', 'scripts'),
			'@images': app.path('@src', 'images'),
			'@scripts': app.path('@src', 'scripts'),
			'@component': app.path('@src', 'scripts/component'),
			'@styles': app.path('@src', 'styles'),
		})

		.entry({
			app: ['@scripts/app.ts', '@styles/app.scss'],
			styleguide: ['@styles_resources/styleguide.scss'],
		})

		.watch([
			app.path('@src', 'views/**/*.blade.php'),
			'web/app/themes/apex/app/View/**/*.php',
		])

		.proxy(app.env.get('WP_HOME'));
};

Gydo_Verbeek · March 28, 2022, 6:20am

@alwaysblank You have an update on my latest post? I installed the latest version but the error still remains.

webspilka · March 31, 2022, 8:09pm

hm…
I have same problem in sage theme 10.1.6
I just add to config

.devtool(‘eval’)
my env:
mode development
bud 5.7.6
webpack 5.70.0
node v17.5.0

Module build failed (from ./node_modules/css-loader/dist/cjs.js):                                                                                                         │
│ ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.                                      │
│  - options.sourceMap should be a boolean.                                                                                                                                 │
│    -> Allows to enable/disable source maps.                                                                                                                               │
│    -> Read more at https://github.com/webpack-contrib/css-loader#sourcemap                                                                                                │
│     at validate (/Users/bit/containers/newformat/src/public/wp-content/themes/newformat/node_modules/schema-utils/dist/validate.js:105:11)                                │
│     at Object.getOptions (/Users/bit/containers/newformat/src/public/wp-content/themes/newformat/node_modules/webpack/lib/NormalModule.js:585:19)                         │
│     at Object.loader (/Users/bit/containers/newformat/src/public/wp-content/themes/newformat/node_modules/css-loader/dist/index.js:31:27)

kellymears · April 1, 2022, 9:39am

@Gydo_Verbeek @webspilka I noticed this over the weekend but hadn’t seen this thread until this evening.

Couple updates:

First, I submitted the fix for it a couple days ago:

github.com/roots/bud

improve: bud.devtool

roots:main ← roots:improve-devtool

opened 10:03PM - 27 Mar 22 UTC

kellymears

+9 -9

## Overview - improve: bud.devtool - feat: bud.devtool default `cheap-module-so…urce-map` - fix: `sourceMap` prop for css loaders  refers: none closes: none ## Type of change - PATCH: Backwards compatible bug fix  This PR includes breaking changes to the following core packages: - none This PR includes breaking changes to the follow extensions: - none ## Dependencies  ### Adds - none ### Removes - none

Second, tonightI added a test spec for bud.devtool in honor of the time lost on this:

github.com/roots/bud

test: add `bud.devtool` spec

roots:main ← roots:test-devtool

opened 09:26AM - 01 Apr 22 UTC

kellymears

+43 -0

## Overview - Simple test spec for `bud.devtool`. refers: none closes: no…ne ## Type of change - NONE: internal change  This PR includes breaking changes to the following core packages: - none This PR includes breaking changes to the follow extensions: - none ## Dependencies  ### Adds - none ### Removes - none

This will be included in the next release. In the meantime this is an easy fix –

The bud.devtool function is an extremely thin wrapper around a simple hook:

bud.hooks.on('build.devtool', 'source-map')

Or, using a callback. Will be passed the current value, if it is exists:

bud.hooks.on('build.devtool', v => 'source-map')

You can pass whatever options webpack accepts as the second param. Heads up that false is not an acceptable devtool value and will cause webpack to throw. You’ll want to pass undefined to disable:

bud.hooks.on('build.devtool', undefined)

Since you’re using TS you should get type hinting for the value. bud.hooks.on returns the Bud instance, so you’re good to just add it to the fn chain.

Gydo_Verbeek · April 1, 2022, 10:48am

Thanks for the reply!

Looking forward for the release.

When I’m using your easy fix it still gives me the same error. When the release is live I will update the source and hopefully I can use it again.

webspilka · April 1, 2022, 11:32am

cool
I change only sources/@roots/bud-build/src/Build/items.ts and it’s work for me ))
Grateful for the quick solution