✨ Bud to ViteJS and Acorn v5 (#33)

Author: akiletour

.env

@@ -13,6 +13,7 @@ DB_ROOT_PASSWORD='root_password'
 
 WP_ENV='development'
 WP_HOME='http://127.0.0.1:8000'
+APP_URL==${WP_HOME}
 WP_SITEURL="${WP_HOME}/wp"
 
 # Generate your keys here: https://roots.io/salts.html

.github/workflows/ci.yml

@@ -74,6 +74,4 @@ jobs:
       - name: Build and compile assets
         run: |
           pnpm build
-          cat public/dist/entrypoints.json
-          cat public/dist/manifest.json
-          cat public/dist/theme.json
+          cat public/build/manifest.json

.gitignore

@@ -23,5 +23,6 @@ npm-debug.log
 yarn-error.log
 
 # Build
-public/dist/*
+public/build/*
+public/hot
 

README.md

@@ -13,7 +13,8 @@
 1. Install Node dependencies:
 
 ```bash
-yarn
+pnpm install
+
 ```
 
 2. Install Composer dependencies:
@@ -60,5 +61,5 @@ DB_PASSWORD='database_password'
 ### Start the development server
 
 ```bash
-wp server --port=8000
+docker compose up -d
 ```

app/Providers/AssetsServiceProvider.php

@@ -2,41 +2,53 @@
 
 namespace App\Providers;
 
+use Illuminate\Support\Facades\Vite;
 use Roots\Acorn\Sage\SageServiceProvider;
 
-use function Roots\bundle;
-
 class AssetsServiceProvider extends SageServiceProvider
 {
     public function register(): void
     {
         add_action('wp_enqueue_scripts', function (): void {
-            bundle('app')->enqueue();
-
             remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');
         }, 100);
 
-        add_action('enqueue_block_editor_assets', function (): void {
-            bundle('editor')->enqueue();
-        }, 100);
+        add_filter('block_editor_settings_all', function ($settings) {
+            $style = Vite::asset('resources/css/editor.css');
+
+            $settings['styles'][] = [
+                'css' => "@import url('{$style}')",
+            ];
+
+            return $settings;
+        });
 
-        /**
-         * 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() . '/dist/theme.json';
+        add_filter('admin_head', function () {
+            if (! get_current_screen()?->is_block_editor()) {
+                return;
             }
 
-            return $path;
+            $dependencies = json_decode(Vite::content('editor.deps.json'));
+
+            foreach ($dependencies as $dependency) {
+                if (! wp_script_is($dependency)) {
+                    wp_enqueue_script($dependency);
+                }
+            }
+
+            echo Vite::withEntryPoints([
+                'resources/js/editor.ts',
+            ])->toHtml();
+        });
+
+        add_filter('theme_file_path', function ($path, $file) {
+            return $file === 'theme.json'
+                ? public_path('build/assets/theme.json')
+                : $path;
         }, 10, 2);
 
         add_filter('wp_theme_json_data_default', function (\WP_Theme_JSON_Data $themeJson): \WP_Theme_JSON_Data {
-            $themeJsonFile = public_path('/dist/theme.json');
+            $themeJsonFile = public_path('/build/assets/theme.json');
             if (!file_exists($themeJsonFile)) {
                 return $themeJson;
             }
@@ -46,8 +58,7 @@ public function register(): void
                 return $themeJson;
             }
 
-            $mergedData = array_merge($themeJson->get_data(), $decodedData);
-            return new \WP_Theme_JSON_Data($mergedData, 'default');
+            return new \WP_Theme_JSON_Data($decodedData, 'default');
         }, 100);
     }
 }

app/Providers/BlockAssetsServiceProvider.php

@@ -4,12 +4,10 @@
 
 namespace App\Providers;
 
-use Illuminate\Support\ServiceProvider;
+use Roots\Acorn\Sage\SageServiceProvider;
 use Symfony\Component\Finder\Finder;
 
-use function Roots\bundle;
-
-class BlockAssetsServiceProvider extends ServiceProvider
+class BlockAssetsServiceProvider extends SageServiceProvider
 {
     public function register(): void
     {
@@ -26,7 +24,7 @@ public function register(): void
                         continue;
                     }
                     if (has_block($block, $postContent)) {
-                        bundle("blocks/{$block}")->enqueue();
+                        //bundle("blocks/{$block}")->enqueue();
                     }
                 }
 
@@ -36,7 +34,7 @@ public function register(): void
 
         add_action('wpcf7_enqueue_styles', function () {
             if (has_block('inr/wpcf7')) {
-                bundle('components/wpcf7')->enqueue();
+                //bundle('components/wpcf7')->enqueue();
             }
         });
 
@@ -57,7 +55,7 @@ private function getAvailableBlocks(): array
     {
         $typesBlocks = (new Finder())->directories()->in(
             ABSPATH . '../../resources/',
-        )->path('/scripts|styles/')->depth('== 1')->name('blocks');
+        )->path('/js|css/')->depth('== 1')->name('blocks');
         $typesBlocks = (new Finder())->directories()->in(
             iterator_to_array($typesBlocks->getIterator())
         )->depth('0');
@@ -85,7 +83,7 @@ private function findCustomClass(string $haystackBlock, array $parsedBlocks): vo
 
             foreach ($block['attrs'] as $attr) {
                 if ($attr === $haystackBlock && isset($block['attrs']['className'])) {
-                    bundle('blocks/custom-class/' . $block['attrs']['className'])->enqueue();
+                    //bundle('blocks/custom-class/' . $block['attrs']['className'])->enqueue();
                 }
             }
 

bud.config.ts

@@ -42,29 +42,28 @@
     "minimum-stability": "dev",
     "require": {
         "php": ">=8.3",
-        "blade-ui-kit/blade-heroicons": "^2.5",
-        "blade-ui-kit/blade-icons": "^1.7",
+        "blade-ui-kit/blade-heroicons": "^2.6",
+        "blade-ui-kit/blade-icons": "^1.8",
         "composer/installers": "^2.2",
         "inrage/acorn-mail": "^1.0",
         "log1x/acorn-disable-media-pages": "^1.0",
         "oscarotero/env": "^2.1",
-        "roots/acorn": "^4.3",
+        "roots/acorn": "^5.0",
         "roots/acorn-prettify": "^1.0",
         "roots/bedrock-autoloader": "^1.0",
         "roots/bedrock-disallow-indexing": "^2.0",
-        "roots/wordpress": "6.7.2",
+        "roots/wordpress": "6.8.1",
         "roots/wp-config": "1.0.0",
-        "roots/wp-password-bcrypt": "1.2.0",
         "vlucas/phpdotenv": "^5.5",
         "wpackagist-plugin/redis-cache": "^2.5",
-        "wpackagist-plugin/safe-svg": "^2.2"
+        "wpackagist-plugin/safe-svg": "^2.3"
     },
     "require-dev": {
-        "johnbillion/query-monitor": "^3.16",
-        "laravel/pint": "^1.18",
+        "johnbillion/query-monitor": "^3.17",
+        "laravel/pint": "^1.21",
         "phpcompatibility/php-compatibility": "^9.3",
         "roave/security-advisories": "dev-latest",
-        "spatie/laravel-ignition": "^2.8",
+        "spatie/laravel-ignition": "^2.9",
         "squizlabs/php_codesniffer": "^3.7.1"
     },
     "config": {