bud 5.4.0 (#2983)

Co-authored-by: Ben Word <ben@benword.com>

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: [require.resolve('@roots/sage/eslint-config')],
+  extends: ['@roots/eslint-config/sage'],
 };

bud.config.js

@@ -3,7 +3,7 @@
  *
  * @param {bud} app
  */
-module.exports = (app) =>
+module.exports = async (app) => {
   app
     /**
      * Application entrypoints
@@ -11,15 +11,15 @@ module.exports = (app) =>
      * Paths are relative to your resources directory
      */
     .entry({
-      app: ['scripts/app.js', 'styles/app.css'],
-      editor: ['scripts/editor.js', 'styles/editor.css'],
+      app: ['@scripts/app', '@styles/app'],
+      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'])
+    .assets('images')
 
     /**
      * These files will trigger a full page reload
@@ -36,4 +36,10 @@ module.exports = (app) =>
      *
      * This is your local dev server.
      */
-    .proxy('http://example.test');
+    .proxy('http://example.test')
+
+    /**
+     * Development URL
+     */
+    .serve('http://example.test:3000');
+};

jsconfig.json

@@ -1,15 +1,14 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
+    "jsx": "preserve",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "commonjs",
     "moduleResolution": "node",
     "paths": {
       "@scripts/*": ["./resources/scripts/*"],
       "@styles/*": ["./resources/styles/*"]
-    },
-    "target": "es5"
+    }
   },
-  "exclude": ["./public"]
+  "exclude": ["./public", "./node_modules"]
 }

package.json

@@ -1,12 +1,6 @@
 {
   "name": "sage",
   "private": true,
-  "bud": {
-    "location": {
-      "src": "resources",
-      "dist": "public"
-    }
-  },
   "browserslist": [
     "extends @wordpress/browserslist-config"
   ],
@@ -25,12 +19,12 @@
     "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
   },
   "devDependencies": {
-    "@roots/bud": "5.3.2",
-    "@roots/bud-eslint": "5.3.2",
-    "@roots/bud-postcss": "5.3.2",
-    "@roots/bud-prettier": "5.3.2",
-    "@roots/bud-stylelint": "5.3.2",
-    "@roots/bud-tailwindcss": "5.3.2",
-    "@roots/sage": "5.3.2"
+    "@roots/bud": "5.4.0",
+    "@roots/bud-eslint": "5.4.0",
+    "@roots/bud-prettier": "5.4.0",
+    "@roots/bud-stylelint": "5.4.0",
+    "@roots/bud-tailwindcss": "5.4.0",
+    "@roots/eslint-config": "5.4.0",
+    "@roots/sage": "5.4.0"
   }
 }

resources/scripts/app.js

@@ -1,15 +1,21 @@
 import {domReady} from '@roots/sage/client';
 
 /**
- * Run the application when the DOM is ready.
+ * app.main
  */
-domReady(() => {
-  // Application code.
-});
+const main = async (err) => {
+  if (err) {
+    // handle hmr errors
+    console.error(err);
+  }
+
+  // application code
+};
 
 /**
- * Accept module updates
+ * Initialize
  *
  * @see https://webpack.js.org/api/hot-module-replacement
  */
-import.meta.webpackHot?.accept(console.error);
+domReady(main);
+import.meta.webpackHot?.accept(main);

resources/scripts/editor.js

@@ -1,22 +1,27 @@
+import {domReady} from '@roots/sage/client';
 import {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks';
 
-import {domReady} from '@roots/sage/client';
-
 /**
- * Customize block styles
+ * editor.main
  */
-domReady(() => {
+const main = (err) => {
+  if (err) {
+    // handle hmr errors
+    console.error(err);
+  }
+
   unregisterBlockStyle('core/button', 'outline');
 
   registerBlockStyle('core/button', {
     name: 'outline',
     label: 'Outline',
   });
-});
+};
 
 /**
- * Accept module updates
+ * Initialize
  *
  * @see https://webpack.js.org/api/hot-module-replacement
  */
-import.meta.webpackHot?.accept(console.error);
+domReady(main);
+import.meta.webpackHot?.accept(main);

theme.json

@@ -22,14 +22,7 @@
     },
     "spacing": {
       "padding": true,
-      "units": [
-        "px",
-        "%",
-        "em",
-        "rem",
-        "vw",
-        "vh"
-      ]
+      "units": ["px", "%", "em", "rem", "vw", "vh"]
     },
     "typography": {
       "customFontSize": false