Make the dist bundle use consistent and cache-aware uris (#7911)

This commit is contained in:
Andrey Antukh
2025-12-09 08:05:28 +01:00
committed by GitHub
parent 81e0e4f222
commit d04fdb5fbd
18 changed files with 112 additions and 104 deletions

View File

@@ -73,7 +73,7 @@ export class BasePage {
}
static async mockConfigFlags(page, flags) {
const url = "**/js/config.js";
const url = "**/js/config.js*";
return await page.route(url, (route) =>
route.fulfill({
status: 200,

View File

@@ -17,22 +17,25 @@
<meta name="twitter:site" content="@penpotapp">
<meta name="twitter:creator" content="@penpotapp">
<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
<link id="theme" href="css/main.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link id="theme" href="css/main.css?version={{& version}}" rel="stylesheet" type="text/css" />
{{#isDebug}}
<link href="css/debug.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link href="css/debug.css?version={{& version}}" rel="stylesheet" type="text/css" />
{{/isDebug}}
<link rel="icon" href="images/favicon.png" />
{{# manifest}}
<script>window.penpotWorkerURI="{{& worker_main}}"</script>
<script src="{{& config}}"></script>
<script src="{{& polyfills}}"></script>
{{/manifest}}
<script type="module">
globalThis.penpotVersion = "%version%";
globalThis.penpotBuildDate = "%buildDate%";
globalThis.penpotVersion = "{{& version}}";
globalThis.penpotBuildDate = "{{& build_date}}";
globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
</script>
{{# manifest}}
<script src="{{& config}}"></script>
<script src="{{& polyfills}}"></script>
<script type="importmap">{{& importmap }}</script>
{{/manifest}}
<!--cookie-consent-->
</head>
<body>
@@ -45,7 +48,7 @@
{{# manifest}}
<script type="module" src="{{& libs}}"></script>
<script type="module">
import { init } from "{{& main}}";
import { init } from "{{& app_main}}";
init();
</script>
{{/manifest}}

View File

@@ -1,4 +1,4 @@
<link href="./css/ds.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
<link href="./css/ds.css?version={{& version}}" rel="stylesheet" type="text/css" />
<style>
body {

View File

@@ -6,22 +6,22 @@
<link rel="icon" href="images/favicon.png" />
<script>
window.penpotVersion = "%version%";
window.penpotBuildDate = "%buildDate%";
globalThis.penpotVersion = "{{& version}}";
globalThis.penpotBuildDate = "{{& build_date}}";
globalThis.penpotWorkerURI = "{{& manifest.worker_main}}";
</script>
{{# manifest}}
<script>window.penpotWorkerURI="{{& worker_main}}"</script>
<script src="{{& config}}"></script>
<script src="{{& polyfills}}"></script>
<script type="importmap">{{& importmap }}</script>
{{/manifest}}
</head>
<body>
{{# manifest}}
<script type="module" src="{{& libs}}"></script>
<script type="module">
import { init } from "{{& rasterizer}}";
import { init } from "{{& rasterizer_main}}";
init();
</script>
{{/manifest}}

View File

@@ -7,12 +7,14 @@
<link rel="icon" href="images/favicon.png" />
<script>
window.penpotVersion = "%version%";
globalThis.penpotVersion = "{{& version}}";
globalThis.penpotBuildDate = "{{& build_date}}";
</script>
{{# manifest}}
<script src="{{& config}}"></script>
<script src="{{& polyfills}}"></script>
<script type="importmap">{{& importmap }}</script>
{{/manifest}}
</head>
<body>
@@ -20,7 +22,7 @@
{{# manifest}}
<script type="module" src="{{& libs}}"></script>
<script type="module">
import { init } from "{{& render}}";
import { init } from "{{& render_main}}";
init();
</script>
{{/manifest}}

View File

@@ -28,6 +28,8 @@ export function startWorker() {
}
export const isDebug = process.env.NODE_ENV !== "production";
export const CURRENT_VERSION = process.env.CURRENT_VERSION || "develop";
export const BUILD_DATE = process.env.BUILD_DATE || "" + new Date();
async function findFiles(basePath, predicate, options = {}) {
predicate =
@@ -47,8 +49,7 @@ async function findFiles(basePath, predicate, options = {}) {
function syncDirs(originPath, destPath) {
const command = `rsync -ar --delete ${originPath} ${destPath}`;
return new Promise((resolve, reject) => {
proc.exec(command, (cause, stdout) => {
return new Promise((resolve, reject) => {proc.exec(command, (cause, stdout) => {
if (cause) {
reject(cause);
} else {
@@ -187,18 +188,31 @@ async function readManifestFile() {
}
async function readShadowManifest() {
const ts = Date.now();
const index = {
ts: ts,
config: "./js/config.js",
polyfills: "./js/polyfills.js",
main: "./js/main.js",
shared: "./js/shared.js",
render: "./js/render.js",
worker_main: "./js/worker/main.js",
rasterizer: "./js/rasterizer.js",
libs: "./js/libs.js",
app_main: "./js/main.js",
render_main: "./js/render.js",
rasterizer_main: "./js/rasterizer.js",
config: "./js/config.js?version=" + CURRENT_VERSION,
polyfills: "./js/polyfills.js?version=" + CURRENT_VERSION,
libs: "./js/libs.js?version=" + CURRENT_VERSION,
worker_main: "./js/worker/main.js?version=" + CURRENT_VERSION,
importmap: JSON.stringify({
"imports": {
"./js/shared.js": "./js/shared.js?version=" + CURRENT_VERSION,
"./js/main.js": "./js/main.js?version=" + CURRENT_VERSION,
"./js/render.js": "./js/render.js?version=" + CURRENT_VERSION,
"./js/render-wasm.js": "./js/render-wasm.js?version=" + CURRENT_VERSION,
"./js/rasterizer.js": "./js/rasterizer.js?version=" + CURRENT_VERSION,
"./js/main-dashboard.js": "./js/main-dashboard.js?version=" + CURRENT_VERSION,
"./js/main-auth.js": "./js/main-auth.js?version=" + CURRENT_VERSION,
"./js/main-viewer.js": "./js/main-viewer.js?version=" + CURRENT_VERSION,
"./js/main-settings.js": "./js/main-settings.js?version=" + CURRENT_VERSION,
"./js/main-workspace.js": "./js/main-workspace.js?version=" + CURRENT_VERSION,
"./js/util-highlight.js": "./js/util-highlight.js?version=" + CURRENT_VERSION
}
})
};
return index;
@@ -398,12 +412,16 @@ async function generateTemplates() {
"../public/images/sprites/assets.svg": assetsSprite,
};
const context = {
manifest: manifest,
version: CURRENT_VERSION,
build_date: BUILD_DATE,
isDebug,
};
content = await renderTemplate(
"resources/templates/index.mustache",
{
manifest: manifest,
isDebug,
},
context,
partials,
);
@@ -411,38 +429,30 @@ async function generateTemplates() {
content = await renderTemplate(
"resources/templates/challenge.mustache",
{},
context,
partials,
);
await fs.writeFile("./resources/public/challenge.html", content);
content = await renderTemplate(
"resources/templates/preview-body.mustache",
{
manifest: manifest,
},
context,
partials,
);
await fs.writeFile("./.storybook/preview-body.html", content);
content = await renderTemplate(
"resources/templates/preview-head.mustache",
{
manifest: manifest,
},
context,
partials,
);
await fs.writeFile("./.storybook/preview-head.html", content);
content = await renderTemplate("resources/templates/render.mustache", {
manifest: manifest,
});
content = await renderTemplate("resources/templates/render.mustache", context);
await fs.writeFile("./resources/public/render.html", content);
content = await renderTemplate("resources/templates/rasterizer.mustache", {
manifest: manifest,
});
content = await renderTemplate("resources/templates/rasterizer.mustache", context);
await fs.writeFile("./resources/public/rasterizer.html", content);
}

View File

@@ -38,15 +38,7 @@ fi
yarn run build:app:libs || exit 1;
yarn run build:app:assets || exit 1;
sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/index.html;
sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/render.html;
sed -i -re "s/\%version\%/$CURRENT_VERSION/g" ./resources/public/rasterizer.html;
sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./resources/public/index.html;
sed -i -re "s/\%buildDate\%/$BUILD_DATE/g" ./resources/public/rasterizer.html;
if [ "$INCLUDE_WASM" = "yes" ]; then
sed -i "s/version=develop/version=$CURRENT_VERSION/g" ./resources/public/js/render_wasm.js;
fi
sed -i "s/render-wasm.js/render-wasm.js?version=$CURRENT_VERSION/g" ./resources/public/js/worker/main.js;
rsync -avr resources/public/ target/dist/;

View File

@@ -23,28 +23,28 @@
:util-highlight
{:entries [app.util.code-highlight]
:depends-on #{:main}}
:depends-on #{:shared}}
:main-auth
{:entries [app.main.ui.auth
app.main.ui.auth.verify-token]
:depends-on #{:main}}
:depends-on #{:shared}}
:main-viewer
{:entries [app.main.ui.viewer]
:depends-on #{:main :main-auth}}
:depends-on #{:shared :main-auth}}
:main-workspace
{:entries [app.main.ui.workspace]
:depends-on #{:main}}
:depends-on #{:shared}}
:main-dashboard
{:entries [app.main.ui.dashboard]
:depends-on #{:main}}
:depends-on #{:shared}}
:main-settings
{:entries [app.main.ui.settings]
:depends-on #{:main}}
:depends-on #{:shared}}
:render
{:entries [app.render]

View File

@@ -190,5 +190,4 @@
(defn resolve-static-asset
[path]
(let [uri (u/join public-uri path)]
(assoc uri :query (dm/str "version=" (:full version)))))
(u/join public-uri path))

View File

@@ -1361,7 +1361,7 @@
(defonce module
(delay
(if (exists? js/dynamicImport)
(let [uri (cf/resolve-static-asset "js/render_wasm.js")]
(let [uri (cf/resolve-static-asset "js/render-wasm.js")]
(->> (mod/import uri)
(p/mcat init-wasm-module)
(p/fmap

View File

@@ -116,7 +116,7 @@
(defn- load
[locale]
(let [path (str "./translation." locale ".js")]
(let [path (str "./translation." locale ".js?version=" (:full cf/version))]
(->> (mod/import path)
(p/fmap (fn [result] (unchecked-get result "default")))
(p/fnly (fn [data cause]

View File

@@ -100,7 +100,7 @@
(def init-wasm
(delay
(let [uri (cf/resolve-static-asset "js/render_wasm.js")]
(let [uri (cf/resolve-static-asset "js/render-wasm.js")]
(-> (mod/import (str uri))
(p/then #(wasm.api/init-wasm-module %))
(p/then #(set! wasm/internal-module %))))))