Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[5.x] Fix setting custom ASSET_URLs and support cache busting without integrity check #1427

Merged
merged 1 commit into from
Apr 29, 2024
Merged

[5.x] Fix setting custom ASSET_URLs and support cache busting without integrity check #1427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
"sass": "^1.74.1",
"sql-formatter": "^4.0.2",
"vite": "^5.2.8",
"vite-plugin-manifest-sri": "^0.2.0",
"vue": "^2.7.16",
"vue-json-pretty": "^1.9.5",
"vue-router": "^3.6.5"
Expand Down
20 changes: 8 additions & 12 deletions public/build/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
{
"resources/img/favicon.png": {
"file": "favicon.png",
"src": "resources/img/favicon.png",
"integrity": "sha384-tqnRilkeRgqFt3SUYaxuaQs14WOwuU8Gvk3sqRZmnyWZVhr1Kk19Ecr7dFMb4HZo"
"file": "favicon.png?id=1542bfe8a0010dcbee710da13cce367f",
"src": "resources/img/favicon.png"
},
"resources/js/app.js": {
"file": "app.js",
"file": "app.js?id=69a73e4fc0356dae6adf8cc33985b1d5",
"name": "app",
"src": "resources/js/app.js",
"isEntry": true,
"css": [
"app.css"
],
"integrity": "sha384-EV5vlraT2g7leIzueltC7I+UzR7uBT4ndQF5b1G9I+kUrQ4XL0DREuRw/XiU/U3P"
]
},
"resources/sass/styles-dark.scss": {
"file": "styles-dark.css",
"file": "styles-dark.css?id=4147954938fc149998024ad0251831e4",
"src": "resources/sass/styles-dark.scss",
"isEntry": true,
"integrity": "sha384-/sLOxh+NTFEdcZ8svIuVTv/lSL65X3QGIXhExXAhntQYWjiez1CQbv4ICbtwRfd8"
"isEntry": true
},
"resources/sass/styles.scss": {
"file": "styles.css",
"file": "styles.css?id=452cf65324025421cc414ccb7744885f",
"src": "resources/sass/styles.scss",
"isEntry": true,
"integrity": "sha384-4HOmv1E51xgqbUYzCYXaRXPRja5nEho6eq/L/CKs0LlidzTGNTk81VtCAHqLiYSC"
"isEntry": true
}
}
34 changes: 12 additions & 22 deletions resources/views/layout.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,8 @@
@php
use Illuminate\Support\Facades\Vite;
use Illuminate\Foundation\Vite as ViteFoundation;
$nonExistentFileName = public_path('/vendor/horizon/nonExistentFile');
$previousHotFile = Vite::hotFile();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We save the previously detected hotfile of the user so we can reset the hotfile at the end of the blade template and "restore" the previous state.


$nonExistentFileName = '/vendor/horizon/nonExistentFile';

$vite = new ViteFoundation();
$vite->useHotFile($nonExistentFileName);

$viteDataSchemeLight = new ViteFoundation();
$viteDataSchemeLight->useHotFile($nonExistentFileName);
$viteDataSchemeLight->useStyleTagAttributes([
'data-scheme' => 'light',
]);

$viteDataSchemeDark = new ViteFoundation();
$viteDataSchemeDark->useHotFile($nonExistentFileName);
$viteDataSchemeDark->useStyleTagAttributes([
'data-scheme' => 'dark',
]);
Vite::useHotFile($nonExistentFileName);
@endphp
<!DOCTYPE html>
<html lang="en">
Expand All @@ -26,16 +11,18 @@
<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="{{ Vite::asset('resources/img/favicon.png', 'vendor/horizon') }}">

<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" />

{{ $viteDataSchemeLight('resources/sass/styles.scss', 'vendor/horizon') }}
{{ $viteDataSchemeDark('resources/sass/styles-dark.scss', 'vendor/horizon') }}
<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" />
Comment on lines +22 to +25
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Vite Helper doesn't support rendering css files with parameters. they need to end with .css/.less etc. thats why we need to handcraft this.

https://github.com/laravel/framework/blob/c2668c7deeabb59c96181b8a6e2bb2c08b9425eb/src/Illuminate/Foundation/Vite.php#L595-598

</head>
<body>
<div id="horizon" v-cloak>
Expand Down Expand Up @@ -163,6 +150,9 @@
window.Horizon = @json($horizonScriptVariables);
</script>

{{ $vite('resources/js/app.js', 'vendor/horizon') }}
@vite('resources/js/app.js', 'vendor/horizon')
</body>
</html>
@php
Vite::useHotFile($previousHotFile);
@endphp
38 changes: 36 additions & 2 deletions vite.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,41 @@
import vue2 from "@vitejs/plugin-vue2";
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import manifestSRI from "vite-plugin-manifest-sri";
import { createHash } from "node:crypto";
import { resolve } from "node:path";
import { readFileSync, writeFileSync } from "node:fs";

function manifestQueryParam() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This vite plugin aims to provide the same functionality of cache busting (with md5 hash route parameter) as laravel mix did instead of using integrity checks on the tags and passing the integrity key in the manifest.

return {
name: "vite-horizon-manifest-query-param",
apply: "build",
enforce: "post",
writeBundle({ dir }) {
const manifestPath = resolve(dir, "manifest.json");
const manifest = readFileSync(manifestPath, "utf-8");

if (manifest) {
const parsedManifest = JSON.parse(manifest);

for (const property in parsedManifest) {
const fileContent = readFileSync(
resolve(dir, parsedManifest[property].file),
"utf-8"
);

parsedManifest[property].file += `?id=${createHash("md5")
.update(fileContent)
.digest("hex")}`;
}

writeFileSync(
manifestPath,
JSON.stringify(parsedManifest, null, 2)
);
}
},
};
}

const config = defineConfig({
plugins: [
Expand All @@ -11,7 +45,7 @@ const config = defineConfig({
"resources/js/app.js",
]),
vue2(),
manifestSRI(),
manifestQueryParam(),
],
resolve: {
alias: {
Expand Down