Replace Laravel Mix with Bud

.eslintrc.js

@@ -1,30 +1,39 @@
 module.exports = {
   root: true,
-  extends: 'eslint:recommended',
-  parser: 'babel-eslint',
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
   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
-        run: yarn test
+      - name: Lint scripts and styles
+        run: yarn lint
 
-      - name: Verify that assets are built successfully
+      - name: Build and compile assets
         run: |
-          yarn build:production
-          cat public/mix-manifest.json
+          yarn build
+          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 @@
 
 use WP_Customize_Manager;
 
-use function Roots\asset;
+use function Roots\bundle;
 
 /**
  * Register the `.brand` selector to the blogname.
@@ -32,5 +32,5 @@
  * @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,24 +6,15 @@
 
 namespace App;
 
-use function Roots\asset;
+use function Roots\bundle;
 
 /**
  * Register the theme assets.
  *
  * @return void
  */
 add_action('wp_enqueue_scripts', function () {
-    wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
-    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);
+    bundle('app')->enqueue();
 }, 100);
 
 /**
@@ -32,14 +23,7 @@
  * @return void
  */
 add_action('enqueue_block_editor_assets', function () {
-    if ($manifest = asset('scripts/manifest.asset.php')->load()) {
-        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);
+    bundle('editor')->enqueue();
 }, 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 @@
     |
     */
 
-    'debug' => WP_DEBUG,
+    'debug' => WP_DEBUG && WP_DEBUG_DISPLAY,
 
     /*
     |--------------------------------------------------------------------------
@@ -56,19 +56,6 @@
 
     '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 @@
         '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\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'); ?>