Bud v6.13.1 released

bud
1

bud v6.13.1 released

A feature rich (and mostly backwards compatible) set of improvements and fixes for bud.js.

:warning: Potentially breaking changes

  • single runtimeChunk now enabled by default.
  • @roots/bud-eslint: warnings are not treated as errors by default.
  • @roots/bud-eslint: errors will cause files to not emit in production.
  • @roots/bud-stylelint: warnings are not treated as errors by default.
  • @roots/bud-stylelint: errors will not emit in production.
  • @roots/wordpress-theme-json-webpack-plugin: exported type Theme renamed to Schema.
  • @roots/bud-terser: is replaced by @roots/bud-minify.
    • you do not need to include this in your project; it is a transitive dependency of @roots/bud.
    • bud.terser deprecated in favor of bud.minify.js
    • bud.minimizeCss deprecated in favor of bud.minify.css

Core features

Enhanced support for tsconfig.json

You can now configure @src, @dist, compilation paths and aliases directly in tsconfig.json. Also works with jsconfig.json. This is nice for compatibility with the typescript compiler.

This feature is opt-in for now but will likely become a default in bud v7. To opt in set bud.useCompilerOptions to true in the config.

tsconfig key value
compilerOptions.baseUrl Set @src directory
compilerOptions.outDir Set @dist directory
compilerOptions.paths Set bud path handles and aliases
include Directories containing modules which should be treated as source. Same as calling bud.compilePaths
Example annotated tsconfig.json 
{
  "extends": ["@roots/bud/config/tsconfig.json"],
  "compilerOptions": {
    /**
     * Source directory
     *
     * @remarks
     * This is the same as calling `bud.setPath(`@src`, `sources`)
     */
    "baseUrl": “sources",

    /**
     * Output directory
     *
     * @remarks
     * This is the same as calling `bud.setPath(`@dist`, `build`)
     */
    "outDir": “build",

    /**
     * Path aliases
     *
     * @remarks
     * This is the same as calling `bud.setPath()` and `bud.alias()`
     * Only the first path in each value will be used.
     */
    "paths": {
      "@fonts": ["fonts"],
      "@images": ["images"],
      "@scripts": ["scripts"],
      "@styles": ["styles"]
    },

    /**
     * Include type definitions
     */
    "types": [
      "@roots/bud",
      "@roots/bud-react",
      "@roots/bud-postcss",
      "webpack/module" // defines import.meta.webpackHot
    ]
  },

  /**
   * Configuration files
   */
  "files": ["bud.config.ts"],

  /**
   * Compiler paths
   *
   * @remarks
   * This is the same as calling bud.compilePaths()
   */
  "include": ["resources"],

  /**
   * Allow bud to reference tsconfig/jsconfig values
   */
  "bud": {
    "useCompilerOptions": true
  }
}

TSC compatible module imports

With the TypeScript Compiler you can ensure your outputted code is compliant with esmodules by mapping extensions in your import statements. For example, if you want to import a module from ./some-module.ts, you would likely want to import it like this:

import someModule from './some-module.js'

bud.js works the same way now, in practice. Now, if you want to write your import statements in a way that is compliant with TSC, you can.

bud.setPath now automatically sets aliased paths

If you set a path handle with bud.setPath it now sets up a path alias as well.

JSON schema available

JSON schema available at https://bud.js.org/bud.package.json. You can optionally add it to package.json for validation of package.json fields (including bud specific ones):

{
  "$schema": "https://bud.js.org/bud.package.json"
}

Improved extension options API

Every registered extension option now has a dedicated getter and setter. The getter prefixes the option key with get and the setter prefixes it with set.

Option Getter Setter
bud.extension.optionName bud.extension.getOptionName() bud.extension.setOptionName(value)

Lastly, know that the setOptionName always accepts a callback:

bud.extension.setOptionName(value => value)

Example

Let’s say @roots/bud-eslint has a new option defined (since it does):

lintDirtyModulesOnly: EslintPluginOptions['lintDirtyModulesOnly']

Previously you could get this value like so:

bud.eslint.get(`lintDirtyModulesOnly`)

That still works, but now you have some additional options:

/** Get the value of it via a property */
bud.eslint.lintDirtyModulesOnly
/** Get the value of it with a function */
bud.eslint.getLintDirtyModulesOnly()

Similarly, in addition to bud.eslint.set:

bud.eslint.set(`lintDirtyModulesOnly`, true)

You can now set it with a dedicated setter method:

bud.eslint.setLintDirtyModulesOnly(true)

All such setter methods accept a callback:

bud.eslint.setLintDirtyModulesOnly(value => !value)

@roots/bud-postcss

  • The postcss configuration API has gotten a rework.

Refer to the updated documentation for more information.

@roots/bud-eslint

  • New options and methods exposed by bud.eslint
  • Configure eslint in your bud config

Refer to the updated documentation for more information.

@roots/bud-sass

  • New options and methods exposed by bud.sass

Refer to the updated documentation for more information.

@roots/bud-stylelint

  • New options and methods exposed by bud.stylelint
  • Configure stylelint in your bud config

Refer to the updated documentation for more information.

@roots/bud-swc

  • New options and methods exposed by bud.swc
  • Override base configuration for js and ts separately

Refer to the updated documentation for more information.

@roots/bud-tailwindcss

  • New options and methods exposed by bud.tailwind
  • Supports configuring tailwindcss directly in bud config

Refer to the updated documentation for more information.

@roots/bud-wordpress-theme-json

  • New options and methods exposed by bud.wpjson

Other changes

  • experiments.backCompat now set to false. bud doesn’t need backwards compatibility with webpack 4 and the compatibility fixes come with performance penalties related to Array objects.
  • snapshot.buildDependencies uses a hash if bud.env.get('CI') is true; uses a timestamp otherwise.
  • snapshot.module uses a hash if bud.env.get('CI') is true; uses a timestamp otherwise.
  • snapshot.resolve uses a hash if bud.env.get('CI') is true; uses a timestamp otherwise.
  • snapshot.resolveBuildDependencies uses a hash if bud.env.get('CI') is true; uses a timestamp otherwise.
  • resolveLoader.alias defined for all registered loaders.
  • resolve.unsafeCache set to undefined (was false). default behavior is for unsafeCache to be used in development, and not used in production.
  • profile now set to true if --debug flag is true.
  • performance now set to false (was {hints: false}).
  • externalsType set to undefined (was var).
  • bud.context.logger is removed.
  • APP_TITLE fallback set for projects which use bud.html.
  • NO_SCRIPT fallback set for projects which use bud.html.
  • Typings for WordPress theme.json updated using current schema.
  • Build script now in place to help with future updates to WordPress theme.json.
  • Default css minimizer is now lightningcss (css parser used by parcel).
  • If using @roots/bud-swc css minification is handled by swc.
  • If using @roots/bud-esbuild css minification is handled by esbuild.
  • New documentation for bud.minify.
3 Likes