Simplify asset story (#1438)

* Simplify assets story * Update Horizon.php --------- Co-authored-by: Taylor Otwell <taylor@laravel.com>
laravel · May 2, 2024 · b867421 · b867421
1 parent 1b5a027
commit b867421
Show file tree

Hide file tree

Showing 22 changed files with 265 additions and 1,554 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -6,9 +6,6 @@
 *.md diff=markdown
 *.php diff=php
 
-public/*.css binary
-public/*.js binary
-
 /.github export-ignore
 /tests export-ignore
 .gitattributes export-ignore

diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,6 @@
 /vendor
 /laravel
 /node_modules
-/public/app.js.LICENSE.txt
 /phpunit.xml
 composer.lock
 .phpunit.result.cache
diff --git a/.styleci.yml b/.styleci.yml
@@ -1,4 +1,34 @@
 php:
   preset: laravel
-js: true
-css: true
+js:
+  tab-width: 4
+  use-tabs: false
+  print-width: 120
+  double-quotes: false
+  trailing-commas: es5
+  semicolons: true
+  arrow-parens: always
+  bracket-same-line: false
+  bracket-spacing: true
+  finder:
+    exclude:
+      - "dist"
+      - "node_modules"
+      - "vendor"
+    name:
+      - "*.js"
+      - "*.jsx"
+css:
+  tab-width: 4
+  use-tabs: false
+  print-width: 120
+  double-quotes: false
+  finder:
+    exclude:
+      - "dist"
+      - "node_modules"
+      - "vendor"
+    name:
+      - "*.css"
+      - "*.scss"
+      - "*.less"
diff --git a/public/build/app.css → dist/app.css b/public/build/app.css → dist/app.css
diff --git a/public/build/app.js → dist/app.js b/public/build/app.js → dist/app.js
diff --git a/public/build/styles-dark.css → dist/styles-dark.css b/public/build/styles-dark.css → dist/styles-dark.css
diff --git a/public/build/styles.css → dist/styles.css b/public/build/styles.css → dist/styles.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,25 +1,21 @@
 {
     "name": "laravel-horizon",
     "private": true,
+    "type": "module",
     "scripts": {
-        "dev": "npm run development",
-        "development": "NODE_ENV=development vite build --mode=development",
-        "watch": "NODE_ENV=development vite build --mode=development --watch",
-        "prod": "npm run production",
-        "production": "NODE_ENV=production vite build"
+        "build": "vite build",
+        "watch": "vite build --watch"
     },
     "devDependencies": {
         "@vitejs/plugin-vue2": "^2.3.1",
         "axios": "^1.6.8",
         "bootstrap": "~5.1.3",
         "chart.js": "^2.9.4",
         "highlight.js": "^10.7.3",
-        "laravel-vite-plugin": "^1.0.2",
         "md5": "^2.3.0",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.45",
         "phpunserialize": "^1.3.0",
-        "resolve-url-loader": "^5.0.0",
         "sass": "^1.74.1",
         "sql-formatter": "^4.0.2",
         "vite": "^5.2.8",

diff --git a/public/build/favicon.png b/public/build/favicon.png
diff --git a/public/build/manifest.json b/public/build/manifest.json
diff --git a/resources/img/favicon.png b/resources/img/favicon.png
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import Vue from 'vue';
+import Vue from 'vue/dist/vue.esm.js';
 import VueRouter from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
@@ -8,8 +8,6 @@ import Routes from './routes';
 import Alert from './components/Alert.vue';
 import SchemeToggler from './components/SchemeToggler.vue';
 
-import.meta.glob(['../img/**']);
-
 let token = document.head.querySelector("meta[name='csrf-token']");
 
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

diff --git a/resources/js/components/SchemeToggler.vue b/resources/js/components/SchemeToggler.vue
@@ -36,14 +36,14 @@
             },
 
             calculateScheme () {
-                const dark = document.querySelector('link[data-scheme="dark"]');
+                const dark = document.querySelector('style[data-scheme="dark"]');
 
                 if (this.scheme == 'system') {
                     const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
 
-                    dark.disabled = ! prefersDarkMode.matches;
+                    dark.media = prefersDarkMode.matches ? "" : "max-width: 1px";
                 } else {
-                    dark.disabled = this.scheme != 'dark';
+                    dark.media = this.scheme == 'dark' ? "" : "max-width: 1px";
                 }
             }
         }

diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
@@ -1,28 +1,19 @@
-@php
-$nonExistentFileName = public_path('/vendor/horizon/nonExistentFile');
-$previousHotFile = Vite::hotFile();
-
-Vite::useHotFile($nonExistentFileName);
-@endphp
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <!-- Meta Information -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <link rel="shortcut icon" href="{{ Vite::asset('resources/img/favicon.png', 'vendor/horizon') }}">
+    <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAipJREFUeNrEV8txwjAQtQ2HHCmB3JKbSQOYCoA0gD0pgFBBwpEToQAGKmDglpwgFdg5kZtNB1BBsuusZ4RY2ZZjYGd2jGWh97Q/rUwjpziPT3V4dECboDZoXZoSka5Al5vFNMqzrpkD2IFHn8B1ZAM6BCKbQgQAuAaPWQFgjoinsoipAEcTr0FrRjmyJxLLTAI5wXFXAehBGMPYcDKIIIm5kkAGOJpwAjqHRfYpbkOXvTBBypIwpT+HCvA3Cqi9Rta8EhHOHS1YCy1oWMKHmQIcGQ90wGMfLaZIoEGAoiDGOHmxhFTr5PGZJgncZYszEGC6ogX6nNn/Ay6RGDCfYveYVOFCJuAaumbPiIk1kyUNS2H6SZngyZrMWM+i/JVlXjK4QUVI3pRTpYPlaG6yeyGvm0Jef1ItiArwQBKu8G5bTMEIhKLkU3q65D+HgieE7+MCBHbygMVMOlCK+CnVDOUZ5s00ghCt2T45C+DDD2MBW/O066YFLYGvuXU5C9i6GYaLUzqr+olQtS5aIMwwtW6QfQnv7awNVanolEWgo9nABBb1cNeSmMDyigRWZkqdPrdEkDm3SRYMr7D7odwRXdIK8e7lOuAxh8W5pHtSiOhw8S4A7iX9IErlyC5b/7t+/7Ar4TKiEuyyRuJA5cQ5Wz8gEhgPNyXvfCQPVtgI+SPxAT/vSqiSEbXh70Uvp27GRSMNeJjV2Jp5V6MGpUeuUR0wAemKuwdy8ivAAJcc0R2NFxWtAAAAAElFTkSuQmCC">
 
     <title>Horizon{{ config('app.name') ? ' - ' . config('app.name') : '' }}</title>
 
     <!-- Style sheets-->
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=figtree:300,400,500,600" rel="stylesheet" />
-
-    <link rel="preload" as="style" href="{{ Vite::asset('resources/sass/styles.scss', 'vendor/horizon') }}" />
-    <link rel="stylesheet" href="{{ Vite::asset('resources/sass/styles.scss', 'vendor/horizon') }}" data-scheme="light" />
-    <link rel="preload" as="style" href="{{ Vite::asset('resources/sass/styles-dark.scss', 'vendor/horizon') }}" />
-    <link rel="stylesheet" href="{{ Vite::asset('resources/sass/styles-dark.scss', 'vendor/horizon') }}" data-scheme="dark" />
+    {{ Laravel\Horizon\Horizon::css() }}
+    {{ Laravel\Horizon\Horizon::js() }}
 </head>
 <body>
 <div id="horizon" v-cloak>
@@ -127,12 +118,6 @@
             </div>
 
             <div class="col-10">
-                @if (! $assetsAreCurrent)
-                    <div class="alert alert-warning">
-                        The published Horizon assets are not up-to-date with the installed version. To update, run:<br/><code>php artisan horizon:publish</code>
-                    </div>
-                @endif
-
                 @if ($isDownForMaintenance)
                     <div class="alert alert-warning">
                         This application is in "maintenance mode". Queued jobs may not be processed unless your worker is using the "force" flag.
@@ -144,15 +129,5 @@
         </div>
     </div>
 </div>
-
-<!-- Global Horizon Object -->
-<script>
-    window.Horizon = @json($horizonScriptVariables);
-</script>
-
-@vite('resources/js/app.js', 'vendor/horizon')
 </body>
 </html>
-@php
-Vite::useHotFile($previousHotFile);
-@endphp
diff --git a/src/Console/PublishCommand.php b/src/Console/PublishCommand.php
@@ -29,9 +29,6 @@ class PublishCommand extends Command
      */
     public function handle()
     {
-        $this->call('vendor:publish', [
-            '--tag' => 'horizon-assets',
-            '--force' => true,
-        ]);
+        $this->components->warn('Horizon no longer publishes its assets. You may stop calling the `horizon:publish` command.');
     }
 }
diff --git a/src/Horizon.php b/src/Horizon.php
@@ -4,7 +4,9 @@
 
 use Closure;
 use Exception;
-use Illuminate\Support\Facades\File;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\HtmlString;
+use Illuminate\Support\Js;
 use RuntimeException;
 
 class Horizon
@@ -110,6 +112,53 @@ public static function use($connection)
         config(['database.redis.horizon' => $config]);
     }
 
+    /**
+     * Get the CSS for the Horizon dashboard.
+     *
+     * @return Illuminate\Contracts\Support\Htmlable
+     */
+    public static function css()
+    {
+        if (($light = @file_get_contents(__DIR__.'/../dist/styles.css')) === false) {
+            throw new RuntimeException('Unable to load the Horizon dashboard light CSS.');
+        }
+
+        if (($dark = @file_get_contents(__DIR__.'/../dist/styles-dark.css')) === false) {
+            throw new RuntimeException('Unable to load the Horizon dashboard dark CSS.');
+        }
+
+        if (($app = @file_get_contents(__DIR__.'/../dist/app.css')) === false) {
+            throw new RuntimeException('Unable to load the Horizon dashboard CSS.');
+        }
+
+        return new HtmlString(<<<HTML
+            <style data-scheme="light">{$light}</style>
+            <style data-scheme="dark">{$dark}</style>
+            <style>{$app}</style>
+            HTML);
+    }
+
+    /**
+     * Get the JS for the Horizon dashboard.
+     *
+     * @return \Illuminate\Contracts\Support\Htmlable
+     */
+    public static function js()
+    {
+        if (($js = @file_get_contents(__DIR__.'/../dist/app.js')) === false) {
+            throw new RuntimeException('Unable to load the Horizon dashboard JavaScript.');
+        }
+
+        $horizon = Js::from(static::scriptVariables());
+
+        return new HtmlString(<<<HTML
+            <script type="module">
+                window.Horizon = {$horizon};
+                {$js}
+            </script>
+            HTML);
+    }
+
     /**
      * Specifies that Horizon should use the dark theme.
      *
@@ -176,22 +225,4 @@ public static function routeSmsNotificationsTo($number)
 
         return new static;
     }
-
-    /**
-     * Determine if Horizon's published assets are up-to-date.
-     *
-     * @return bool
-     *
-     * @throws \RuntimeException
-     */
-    public static function assetsAreCurrent()
-    {
-        $publishedPath = public_path('vendor/horizon/manifest.json');
-
-        if (! File::exists($publishedPath)) {
-            throw new RuntimeException('Horizon assets are not published. Please run: php artisan horizon:publish');
-        }
-
-        return File::get($publishedPath) === File::get(__DIR__.'/../public/build/manifest.json');
-    }
 }
diff --git a/src/HorizonServiceProvider.php b/src/HorizonServiceProvider.php
@@ -23,7 +23,6 @@ public function boot()
         $this->registerEvents();
         $this->registerRoutes();
         $this->registerResources();
-        $this->defineAssetPublishing();
         $this->offerPublishing();
         $this->registerCommands();
     }
@@ -75,18 +74,6 @@ protected function registerResources()
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'horizon');
     }
 
-    /**
-     * Define the asset publishing configuration.
-     *
-     * @return void
-     */
-    public function defineAssetPublishing()
-    {
-        $this->publishes([
-            HORIZON_PATH.'/public/build' => public_path('vendor/horizon'),
-        ], ['horizon-assets', 'laravel-assets']);
-    }
-
     /**
      * Setup the resource publishing groups for Horizon.
      *

diff --git a/src/Http/Controllers/HomeController.php b/src/Http/Controllers/HomeController.php
@@ -3,7 +3,6 @@
 namespace Laravel\Horizon\Http\Controllers;
 
 use Illuminate\Support\Facades\App;
-use Laravel\Horizon\Horizon;
 
 class HomeController extends Controller
 {
@@ -15,8 +14,6 @@ class HomeController extends Controller
     public function index()
     {
         return view('horizon::layout', [
-            'assetsAreCurrent' => Horizon::assetsAreCurrent(),
-            'horizonScriptVariables' => Horizon::scriptVariables(),
             'isDownForMaintenance' => App::isDownForMaintenance(),
         ]);
     }

diff --git a/testbench.yaml b/testbench.yaml
@@ -20,6 +20,3 @@ workbench:
     - db-wipe
     - migrate-fresh
   assets: []
-  sync:
-    - from: ./public
-      to: public/vendor/horizon
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,22 @@
+import vue2 from '@vitejs/plugin-vue2';
+
+/** @type {import('vite').UserConfig} */
+export default {
+    plugins: [vue2()],
+    build: {
+        assetsDir: '',
+        rollupOptions: {
+            input: ['resources/js/app.js', 'resources/sass/styles.scss', 'resources/sass/styles-dark.scss'],
+            output: {
+                entryFileNames: '[name].js',
+                chunkFileNames: '[name].js',
+                assetFileNames: '[name].[ext]',
+            },
+        },
+    },
+    resolve: {
+        alias: {
+            '@': '/resources/js',
+        },
+    },
+};