Replace Laravel Mix with Bud (#2643)

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

.eslintrc.js

@@ -1,30 +1,39 @@
 module.exports = {
   root: true,
-  extends: 'eslint:recommended',
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
-  parser: 'babel-eslint',
   globals: {
-    wp: true
+    wp: true,
   },
   env: {
     node: true,
     es6: true,
     amd: true,
     browser: true,
-    jquery: true
+    jquery: true,
   },
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaFeatures: {
+      experimentalObjectRestSpread: true,
       globalReturn: true,
       generators: false,
-      objectLiteralDuplicateProperties: false
+      impliedStrict: true,
+      objectLiteralDuplicateProperties: false,
+      jsx: true,
     },
     ecmaVersion: 2017,
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: ['import'],
+  plugins: ['import', 'react-hooks'],
   settings: {
+    react: {
+      version: 'detect',
+    },
     'import/core-modules': [],
-    'import/ignore': ['node_modules', '\\.(coffee|scss|css|less|hbs|svg|json)$']
+    'import/ignore': [
+      'node_modules',
+      '\\.(coffee|scss|css|less|hbs|svg|json)$',
+    ],
   },
   rules: {
     'no-console': 0,
@@ -35,8 +44,8 @@ module.exports = {
         objects: 'always-multiline',
         imports: 'always-multiline',
         exports: 'always-multiline',
-        functions: 'ignore'
+        functions: 'ignore',
-      }
+      },
-    ]
+    ],
-  }
+  },
 };

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     strategy:
       matrix:
-        node: ['12.14.0', '14']
+        node: ['16']
 
     steps:
       - name: Checkout the project
@@ -35,19 +35,20 @@ jobs:
       - uses: actions/cache@v2
         with:
           path: ${{ steps.yarncache.outputs.dir }}
-          key: ${{ runner.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/package.json') }}
+          key: ${{ runner.os }}-${{ matrix.node }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-${{ matrix.node }}-yarn-
 
       - name: Install dependencies using Yarn
         run: yarn install --frozen-lockfile
 
-      - name: Execute the Node test scripts
+      - name: Lint scripts and styles
-        run: yarn test
+        run: yarn lint
 
-      - name: Verify that assets are built successfully
+      - name: Build and compile assets
         run: |
-          yarn build:production
+          yarn build
-          cat public/mix-manifest.json
+          cat public/entrypoints.json
+          cat public/manifest.json
 
   php:
     name: PHP ${{ matrix.php }}

.gitignore

@@ -1,5 +1,7 @@
 /node_modules
 /vendor
 /public
+.env
+.budfiles
 npm-debug.log
 yarn-error.log

.prettierrc

@@ -1,5 +1,9 @@
 {
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
 }

.stylelintrc

@@ -1,6 +1,8 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
+    "string-quotes": null,
+    "selector-class-pattern": null,
     "declaration-colon-newline-after": null,
     "value-list-comma-newline-after": null,
     "no-empty-source": null,

app/admin.php

@@ -8,7 +8,7 @@ namespace App;
 
 use WP_Customize_Manager;
 
-use function Roots\asset;
+use function Roots\bundle;
 
 /**
  * Register the `.brand` selector to the blogname.
@@ -32,5 +32,5 @@ add_action('customize_register', function (WP_Customize_Manager $wp_customize) {
  * @return void
  */
 add_action('customize_preview_init', function () {
-    wp_enqueue_script('sage/customizer.js', asset('scripts/customizer.js')->uri(), ['customize-preview'], null, true);
+    bundle('customizer')->enqueueJs(true, ['customize-preview']);
 });

app/setup.php

@@ -6,7 +6,7 @@
 
 namespace App;
 
-use function Roots\asset;
+use function Roots\bundle;
 
 /**
  * Register the theme assets.
@@ -14,16 +14,7 @@ use function Roots\asset;
  * @return void
  */
 add_action('wp_enqueue_scripts', function () {
-    wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
+    bundle('app')->enqueue();
-    wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['sage/vendor.js'], null, true);
-
-    wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
-
-    if (is_single() && comments_open() && get_option('thread_comments')) {
-        wp_enqueue_script('comment-reply');
-    }
-
-    wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
 }, 100);
 
 /**
@@ -32,14 +23,7 @@ add_action('wp_enqueue_scripts', function () {
  * @return void
  */
 add_action('enqueue_block_editor_assets', function () {
-    if ($manifest = asset('scripts/manifest.asset.php')->load()) {
+    bundle('editor')->enqueue();
-        wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ...array_values($manifest));
-        wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), ['sage/vendor.js'], null, true);
-
-        wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
-    }
-
-    wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);
 }, 100);
 
 /**

bud.config.js

@@ -0,0 +1,41 @@
+/**
+ * @typedef {import('@roots/bud').Bud} Bud
+ *
+ * @param {Bud} config
+ */
+
+module.exports = async (config) =>
+  config
+    /**
+     * Application entrypoints
+     *
+     * Paths are relative to your resources directory
+     */
+    .entry({
+      app: ['scripts/app.js', 'styles/app.css'],
+      editor: ['scripts/editor.js', 'styles/editor.css'],
+      customizer: 'scripts/customizer.js',
+    })
+
+    /**
+     * These files should be processed as part of the build
+     * even if they are not explicitly imported in application assets.
+     */
+    .assets(['assets/images'])
+
+    /**
+     * These files will trigger a full page reload
+     * when modified.
+     */
+    .watch([
+      'tailwind.config.js',
+      'resources/views/*.blade.php',
+      'app/View/**/*.php',
+    ])
+
+    /**
+     * Target URL to be proxied by the dev server.
+     *
+     * This is your local dev server.
+     */
+    .proxy({target: 'http://example.test'});

config/app.php

@@ -41,7 +41,7 @@ return [
     |
     */
 
-    'debug' => WP_DEBUG,
+    'debug' => WP_DEBUG && WP_DEBUG_DISPLAY,
 
     /*
     |--------------------------------------------------------------------------
@@ -56,19 +56,6 @@ return [
 
     'timezone' => get_option('timezone_string', 'UTC'),
 
-    /*
-    |--------------------------------------------------------------------------
-    | Global Helpers
-    |--------------------------------------------------------------------------
-    |
-    | This value enables the usage of various Acorn helpers without the need
-    | to specify a namespace. This defaults to false as to not pollute the
-    | global namespace.
-    |
-    */
-
-    'globals' => false,
-
     /*
     |--------------------------------------------------------------------------
     | Application Locale Configuration

config/assets.php

@@ -1,7 +1,5 @@
 <?php
 
-use function Roots\public_path;
-
 return [
 
     /*
@@ -36,7 +34,8 @@ return [
         'theme' => [
             'path' => get_theme_file_path('public'),
             'url' => get_theme_file_uri('public'),
-            'assets' => public_path('mix-manifest.json'),
+            'assets' => public_path('manifest.json'),
+            'bundles' => public_path('entrypoints.json'),
         ]
     ]
 ];

config/logging.php

@@ -5,7 +5,6 @@ use Monolog\Handler\StreamHandler;
 use Monolog\Handler\SyslogUdpHandler;
 
 use function Roots\env;
-use function Roots\storage_path;
 
 return [
 

config/view.php

@@ -1,7 +1,5 @@
 <?php
 
-use function Roots\resource_path;
-
 return [
 
     /*

docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3'
+
+services:
+  db:
+    image: mysql:5.7
+    volumes:
+      - db_data:/var/lib/mysql
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: wordpress
+      MYSQL_DATABASE: wordpress
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: wordpress
+
+  wordpress:
+    depends_on:
+      - db
+    image: wordpress:latest
+    ports:
+      - '8000:80'
+    restart: always
+    environment:
+      WORDPRESS_DB_HOST: db:3306
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_PASSWORD: wordpress
+    working_dir: /var/www/html
+    volumes:
+      - ./:/var/www/html/wp-content/themes/sage
+
+volumes:
+  db_data:

index.php

@@ -6,12 +6,12 @@
     <?php wp_head(); ?>
   </head>
 
-  <body <?php body_class(); ?>>
+  <body <?php body_class('no-js'); ?>>
     <?php wp_body_open(); ?>
     <?php do_action('get_header'); ?>
 
     <div id="app">
-      <?php echo \Roots\view(\Roots\app('sage.view'), \Roots\app('sage.data'))->render(); ?>
+      <?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
     </div>
 
     <?php do_action('get_footer'); ?>

package.json

@@ -1,46 +1,39 @@
 {
   "name": "sage",
   "private": true,
+  "bud": {
+    "location": {
+      "src": "resources",
+      "dist": "public"
+    }
+  },
   "browserslist": [
     "extends @wordpress/browserslist-config"
   ],
   "engines": {
-    "node": ">=12.14.0"
+    "node": ">=16.0.0"
   },
   "scripts": {
-    "build": "mix",
+    "dev": "bud dev",
-    "build:production": "mix --production",
+    "build": "bud build",
-    "start": "mix watch",
-    "hot": "mix watch --hot",
-    "clear": "wp acorn optimize:clear",
-    "test": "npm run lint",
     "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint resources/scripts",
     "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
-    "translate": "npm run translate:pot && npm run translate:js",
+    "test": "npm run lint"
-    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
-    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
   },
   "devDependencies": {
+    "@roots/bud": "5.0.0-next.14",
+    "@roots/sage": "5.0.0-next.14",
     "@tailwindcss/typography": "^0.4.1",
-    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
+    "@wordpress/browserslist-config": "4.1.0",
-    "@wordpress/babel-preset-default": "^6.1.0",
+    "eslint": "7.32.0",
-    "@wordpress/browserslist-config": "^4.0.0",
+    "postcss": "8.3.11",
-    "@wordpress/dependency-extraction-webpack-plugin": "^3.1.3",
+    "postcss-import": "14.0.2",
-    "babel-eslint": "^10.1.0",
+    "postcss-nested": "5.0.6",
-    "browser-sync": "^2.26.14",
+    "postcss-preset-env": "7.0.0",
-    "browser-sync-webpack-plugin": "^2.3.0",
+    "prettier": "2.4.1",
-    "eslint": "^7.27.0",
+    "react": "17.0.2",
-    "eslint-plugin-import": "^2.23.3",
+    "react-dom": "17.0.2",
-    "laravel-mix": "^6.0.19",
+    "tailwindcss": "2.2.19"
-    "postcss": "^8.3.0",
-    "sass": "^1.34.0",
-    "sass-loader": "11.1.1",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "tailwindcss": "^2.1.2"
-  },
-  "peerDependencies": {
-    "jquery": "^3.5.1"
   }
 }

resources/scripts/app.js

@@ -1,8 +1,17 @@
-/**
+import {domReady} from '@scripts/components';
- * External Dependencies
- */
-import 'jquery';
 
-$(() => {
+/**
-  // 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 => {
+wp.customize('blogname', (value) => {
-  value.bind(to => $('.brand').text(to));
+  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 {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks';
-import { unregisterBlockStyle, registerBlockStyle } 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;
   }
 }

tailwind.config.js

@@ -1,11 +1,9 @@
 module.exports = {
   purge: {
-    content: [
+    content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
-      './app/**/*.php',
-      './resources/**/*.{php,vue,js}',
-    ],
   },
-  darkMode: false, // or 'media' or 'class'
+  jit: true,
+  darkMode: false,
   theme: {
     extend: {
       colors: {},

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./resources",
+    "paths": {
+      "@scripts/*": ["scripts/*"],
+      "@styles/*": ["styles/*"]
+    },
+    "outDir": "./public",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "strict": false,
+    "checkJs": false,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": ["resources/**/*"],
+  "exclude": ["node_modules"]
+}

webpack.mix.js

@@ -1,40 +0,0 @@
-const mix = require('laravel-mix');
-require('@tinypixelco/laravel-mix-wp-blocks');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Sage application. By default, we are compiling the Sass file
- | for your application, as well as bundling up your JS files.
- |
- */
-
-mix
-  .setPublicPath('./public')
-  .browserSync('sage.test');
-
-mix
-  .sass('resources/styles/app.scss', 'styles')
-  .sass('resources/styles/editor.scss', 'styles')
-  .options({
-    processCssUrls: false,
-    postCss: [require('tailwindcss')],
-  });
-
-mix
-  .js('resources/scripts/app.js', 'scripts')
-  .js('resources/scripts/customizer.js', 'scripts')
-  .blocks('resources/scripts/editor.js', 'scripts')
-  .autoload({ jquery: ['$', 'window.jQuery'] })
-  .extract();
-
-mix
-  .copyDirectory('resources/images', 'public/images')
-  .copyDirectory('resources/fonts', 'public/fonts');
-
-mix
-  .sourceMaps()
-  .version();