Replace Laravel Mix with Bud (#2643)

Co-authored-by: QWp6t <hi@qwp6t.me>
Co-authored-by: Ben Word <ben@benword.com>

resources/scripts/app.js

@@ -1,8 +1,17 @@
-/**
- * External Dependencies
- */
-import 'jquery';
+import {domReady} from '@scripts/components';
 
-$(() => {
-  // console.log('Hello world');
+/**
+ * Remove `.no-js` from document body
+ * when DOM has loaded.
+ */
+domReady(() => {
+  document.body.classList.contains('no-js') &&
+    document.body.classList.remove('no-js');
 });
+
+/**
+ * Accept module updates
+ *
+ * @see https://webpack.js.org/api/hot-module-replacement
+ */
+import.meta.webpackHot?.accept(console.error);

resources/scripts/components/index.js

@@ -0,0 +1,12 @@
+/**
+ * Calls a supplied function once
+ * document has loaded.
+ *
+ * @param  {CallableFunction} onReady
+ * @return {void}
+ */
+export const domReady = (onReady) => {
+  window.requestAnimationFrame(function check() {
+    document.body ? onReady() : window.requestAnimationFrame(check);
+  });
+};

resources/scripts/customizer.js

@@ -2,14 +2,12 @@
  * This file allows you to add functionality to the Theme Customizer
  * live preview. jQuery is readily available.
  *
- * {@link https://codex.wordpress.org/Theme_Customization_API}
+ * @see https://codex.wordpress.org/Theme_Customization_API
  */
 
 /**
  * Change the blog name value.
- *
- * @param {string} value
  */
-wp.customize('blogname', value => {
-  value.bind(to => $('.brand').text(to));
+wp.customize('blogname', (value) => {
+  value.bind((to) => $('.brand').text(to));
 });

resources/scripts/editor.js

@@ -1,7 +1,11 @@
 import '@wordpress/edit-post';
-import domReady from '@wordpress/dom-ready';
-import { unregisterBlockStyle, registerBlockStyle } from '@wordpress/blocks';
+import {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks';
 
+import {domReady} from '@scripts/components';
+
+/**
+ * Customize block styles
+ */
 domReady(() => {
   unregisterBlockStyle('core/button', 'outline');
 
@@ -10,3 +14,10 @@ domReady(() => {
     label: 'Outline',
   });
 });
+
+/**
+ * Accept module updates
+ *
+ * @see https://webpack.js.org/api/hot-module-replacement
+ */
+import.meta.webpackHot?.accept(console.error);

resources/styles/editor.css

@@ -6,6 +6,6 @@
   @apply max-w-screen-md;
 
   &.editor-post-title__block .editor-post-title__input {
-    @apply font-sans #{!important};
+    @apply font-sans;
   }
 }