🔧 Use Vite for build (#3199)

Co-authored-by: Brandon Nifong <[email protected]>

Author: retlehs

.github/workflows/main.yml

@@ -25,18 +25,17 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
+          cache: 'npm'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install dependencies using Yarn
-        run: yarn install --frozen-lockfile
+      - name: Install dependencies using npm
+        run: npm ci
 
       - name: Build and compile assets
         run: |
-          yarn build
-          cat public/entrypoints.json
-          cat public/manifest.json
+          npm run build
+          cat public/build/manifest.json
 
   php:
     name: PHP ${{ matrix.php }}

app/setup.php

@@ -6,25 +6,62 @@
 
 namespace App;
 
-use function Roots\bundle;
+use Illuminate\Support\Facades\File;
+use Illuminate\Support\Facades\Vite;
+use Illuminate\Support\Str;
 
 /**
- * Register the theme assets.
+ * Inject the Vite assets into the head.
  *
  * @return void
  */
-add_action('wp_enqueue_scripts', function () {
-    bundle('app')->enqueue();
-}, 100);
+add_filter('wp_head', function () {
+    echo Str::wrap(app('assets.vite')([
+        'resources/css/app.css',
+        'resources/js/app.js',
+    ]), "\n");
+});
 
 /**
- * Register the theme assets with the block editor.
+ * Inject assets into the block editor.
  *
  * @return void
  */
-add_action('enqueue_block_editor_assets', function () {
-    bundle('editor')->enqueue();
-}, 100);
+add_filter('admin_head', function () {
+    $screen = get_current_screen();
+
+    if (! $screen?->is_block_editor()) {
+        return;
+    }
+
+    $dependencies = File::json(public_path('build/editor.deps.json')) ?? [];
+
+    foreach ($dependencies as $dependency) {
+        if (! wp_script_is($dependency)) {
+            wp_enqueue_script($dependency);
+        }
+    }
+
+    echo Str::wrap(app('assets.vite')([
+        'resources/css/editor.css',
+        'resources/js/editor.js',
+    ]), "\n");
+});
+
+/**
+ * Use theme.json from the build directory
+ *
+ * @param  string  $path
+ * @param  string  $file
+ * @return string
+ */
+add_filter('theme_file_path', function (string $path, string $file): string {
+    if ($file === 'theme.json') {
+        return public_path().'/build/assets/theme.json';
+    }
+
+    return $path;
+}, 10, 2);
 
 /**
  * Register the initial theme setup.

bud.config.js

@@ -0,0 +1,40 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Assets Manifest
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default asset manifest that should be used.
+    | The "theme" manifest is recommended as the default as it cedes ultimate
+    | authority of your application's assets to the theme.
+    |
+    */
+
+    'default' => 'theme',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Assets Manifests
+    |--------------------------------------------------------------------------
+    |
+    | Manifests contain lists of assets that are referenced by static keys that
+    | point to dynamic locations, such as a cache-busted location. We currently
+    | support two types of manifest:
+    |
+    | assets: key-value pairs to match assets to their revved counterparts
+    |
+    | bundles: a series of entrypoints for loading bundles
+    |
+    */
+
+    'manifests' => [
+        'theme' => [
+            'path' => get_theme_file_path('public'),
+            'url' => get_theme_file_uri('public'),
+            'bundles' => get_theme_file_path('public/build/manifest.json'),
+        ],
+    ],
+];