Skip to main content

6.7.0

· 3 min read
kellymears
kellymears
Developer

A healthy mix of features and fixes.

Updates available

There are patches available for this release. Please update to 6.7.3.

⚠️ 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.

✨ 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}

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

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

🩹 fix(cli): --cwd flag #2008​

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

📦 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.

📦 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.

✨ 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
})

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

Fixes #1986.

Reproduction incorporated into testing suite to prevent future regressions.