Bud v5.6.0 released

bud v5.6.0 released

Performance

bud is now about 30% faster :tada:.

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.

:warning: 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

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

5 Likes

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();
};

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…

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

thanks for the heads up.

2 Likes

@kellymears works like a dream now :slight_smile: :smiling_face_with_three_hearts:

1 Like

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

I can reproduce and have a patch in process:

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.

Yes we’re using Typescript.

Looking forward for the fix!

Thanks!

bud v5.6.1 released

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

1 Like

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.

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

1 Like

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'; 

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

2 Likes

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.

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

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'));
};

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

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)

@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:

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

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.

2 Likes

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.

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