Bud v6.7.0 released

bud
1

bud v6.7.0 released

A healthy mix of features and fixes.

:warning: Possible breaking change

There are changes to the API of @roots/bud-imagemin to be aware of if you are using that extension and have customized generators or minimizers.

:sparkles: feat(@roots/sage): process blade templates with @roots/blade-loader #2035

This is a cool feature.

Makes it possible to write client code in blade files. This is different than existing solutions because the code is parsed with other loaders (you can write postcss, sass, typescript, etc.)

Supports: js, ts, css, scss, vue.

Code is specified using @js/@endjs syntax (with whatever extension).

Example:

index.blade.php:

@include('sections.header')

<main id="main" class="main">
  @yield('content')
</main>

<img src=@asset('images/404.png?as=webp') />
<img src=@asset('images/404.png?as=webp&width=200') />

@hasSection('sidebar')
  <aside class="sidebar">
    @yield('sidebar')
  </aside>
@endif

@include('sections.footer')

@js
import {render} from '@scripts/render'

render(
  <h1>Hello, world!</h1>,
  document.getElementById('target-el')
);
@endjs

@css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body {
  @apply bg-blue-500;
}
@endcss

bud.config.js:

bud.entry({
  index: ['views/index']
})

Included in this PR (sources/@roots/blade-loader/vendor) are directives that can be used to stop src from rendering (uses ob_start and ob_end_clean).

I imagine there will be first-party support added to Sage in the near future. For now, you could try out this feature using blade comments:

{{--
@js
console.log('not visible')
@endjs
--}}

If you use @roots/bud-imagemin you can now do image manipulation on-the-fly in blade templates:

<div class="test">
  <img src=@asset('images/foo.png?as=webp&width=100&height=100') alt="foo image" />
</div>

WordPress dependencies which are imported are not included in entrypoints.json. It’s unclear as of yet why. Workaround is to do the imports from a legitimate js module and then import that from the blade file:

@js
import {render} from '@scripts/render'
render(...)
@endjs

// @scripts/render.js
import React from 'react'
import {render} from 'react-dom'
export {React, render}

:adhesive_bandage: fix(@roots/wordpress-hmr): duplicative block registrations #2023

Fixes issues in some setups where blocks would be registered more than once.

:adhesive_bandage: fix(cli): --cwd flag #2008

Fixes two related issues which caused the --cwd/--basedir flag to not work properly

:package: deps: bump node to v18 lts #1962

node.js has updated LTS version and so have we. It’s fine to use Node 16 in your project for now, but you should upgrade sooner rather than later.

It’s tentative but we’ll likely drop support for older versions of Node in bud v7 (mainly so we can use the new built-in fetch). Previously we were blocked on this due to an issue in GoogleChromeLabs/squoosh but merging #2012 has gotten us back on track.

:package: deps(@roots/bud-imagemin): use sharp instead of squoosh #2012

squoosh was abandoned by google. we’re using sharp internally now. See the PR for details. API changes are documented on bud.js.org.

:sparkles: improve(@roots/bud-build): allow adding raw webpack rules #2010

Please don’t do this in an extension you plan on distributing.

Do you just want to add a rule in your project config and don’t need to worry about ecosystem compatibility? You can now add rules with standard webpack syntax. Example below but the loaders guide on bud.js.org has been updated to cover this in more detail:

bud.hooks.on(`build.module.rules.oneOf`, (rules = []) => {
  rules.push({
    test: /\.example$/,
    use: [
      {
        loader: `babel-loader`,
        options: {
          presets: [`@babel/preset-env`],
        },
      },
    ],
  })

  return rules
})

:adhesive_bandage: fix: ensure process exit code is set on compilation error #1985

Fixes #1986.

Reproduction incorporated into testing suite to prevent future regressions.

3 Likes