vite-plugin-build-version-file 0.1.17 → 0.2.0

package/dist/index.d.cts

@@ -11,6 +11,7 @@ interface BuildVersionPayload {
 }
 interface BuildVersionPluginOptions {
     filename?: string;
+    loadingPage?: string | false;
     globalName?: string;
     defineName?: string | false;
     injectToHtml?: boolean;
@@ -22,6 +23,7 @@ interface BuildVersionPluginOptions {
 }
 type BuildVersionPlugin = Plugin & {
     transformHtml: (code: string, ...args: unknown[]) => string | undefined;
+    headScript: () => string;
 };
 declare function buildVersionPlugin(options?: BuildVersionPluginOptions): BuildVersionPlugin;
 

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface BuildVersionPayload {
 }
 interface BuildVersionPluginOptions {
     filename?: string;
+    loadingPage?: string | false;
     globalName?: string;
     defineName?: string | false;
     injectToHtml?: boolean;
@@ -22,6 +23,7 @@ interface BuildVersionPluginOptions {
 }
 type BuildVersionPlugin = Plugin & {
     transformHtml: (code: string, ...args: unknown[]) => string | undefined;
+    headScript: () => string;
 };
 declare function buildVersionPlugin(options?: BuildVersionPluginOptions): BuildVersionPlugin;
 

package/dist/index.mjs

@@ -1,8 +1,216 @@
 // src/index.ts
 import { existsSync, readFileSync } from "fs";
 import { dirname, join, resolve } from "path";
+
+// src/loading.html
+var loading_default = `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Loading</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+      }
+
+      #vite-build-version-loading {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483647;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        color: #333333;
+        font: 14px/1.5 sans-serif;
+      }
+
+      #vite-build-version-loading .spinner {
+        width: 36px;
+        height: 36px;
+        border: 3px solid rgba(0, 0, 0, 0.15);
+        border-top-color: rgba(0, 0, 0, 0.6);
+        border-radius: 50%;
+        animation: vite-build-version-loading 0.8s linear infinite;
+      }
+
+      @keyframes vite-build-version-loading {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="vite-build-version-loading">
+      <div class="spinner"></div>
+    </div>
+    <script>
+      ;(function () {
+        var IFRAME_ID = 'vite-plugin-build-version-file-cache-iframe'
+        var IFRAME_TIMEOUT = 5000
+        var DEFAULT_REFRESH_TIME = 5
+        var DEFAULT_CLEAR_TIMES = 2
+
+        var params = new URLSearchParams(window.location.search)
+        // \u53C2\u6570\u540D\u968F\u673A\u751F\u6210\uFF0Cloading \u9875\u6309\u503C\u89E3\u6790\uFF1A\u4EFB\u4F55\u503C\u662F JSON \u7684\u53C2\u6570\u90FD\u89C6\u4E3A\u6E05\u7406\u914D\u7F6E\u3002
+        var config = (function () {
+          var entries = Array.from(params.entries())
+
+          for (var i = 0; i < entries.length; i++) {
+            try {
+              var value = JSON.parse(entries[i][1])
+
+              if (value && typeof value === 'object' && Array.isArray(value.urls)) {
+                return value
+              }
+            } catch (error) {
+              // \u975E JSON \u53C2\u6570\uFF08\u4F8B\u5982\u81EA\u5B9A\u4E49 query\uFF09\u76F4\u63A5\u8DF3\u8FC7\u3002
+            }
+          }
+
+          return {}
+        })()
+        // \u9ED8\u8BA4\u628A\u672C\u9875\u9762\u6240\u5728\u76EE\u5F55\u5F53\u4F5C\u5E94\u7528\u6839\u8DEF\u5F84\u3002
+        var directoryUrl = new URL('.', window.location.href).href
+        var urls = Array.isArray(config.urls)
+          ? config.urls.filter(Boolean)
+          : []
+        var time = Number(config.time)
+        var times = Math.floor(Number(config.times))
+        var redirectUrl = config.redirectUrl || directoryUrl
+        var title = config.title
+
+        if (urls.length === 0) {
+          urls = [directoryUrl, new URL('index.html', directoryUrl).href]
+        }
+
+        if (!Number.isFinite(time) || time <= 0) {
+          time = DEFAULT_REFRESH_TIME
+        }
+
+        if (!Number.isFinite(times) || times < 1) {
+          times = DEFAULT_CLEAR_TIMES
+        }
+
+        if (title) {
+          var titleElement = document.createElement('div')
+          titleElement.textContent = title
+          document.getElementById('vite-build-version-loading').appendChild(titleElement)
+        }
+
+        function createCacheBustKey() {
+          // \u53C2\u6570\u540D\u968F\u673A\uFF0C\u907F\u514D\u670D\u52A1\u5668\u6216 CDN \u9488\u5BF9\u56FA\u5B9A\u53C2\u6570\u540D\uFF08\u5982 _\u3001t\uFF09\u505A\u7F13\u5B58\u5904\u7406\u3002
+          return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+        }
+
+        function createCacheBustedUrl(url) {
+          var targetUrl = new URL(url, window.location.href)
+          var hash = targetUrl.hash
+
+          // hash \u4E0D\u53C2\u4E0E HTTP \u8BF7\u6C42\uFF0C\u5148\u4FDD\u7559\u4E1A\u52A1\u8DEF\u7531\uFF0C\u518D\u5411\u771F\u5B9E\u8BF7\u6C42 URL \u5199\u5165\u7F13\u5B58\u6233\u3002
+          targetUrl.hash = ''
+          targetUrl.searchParams.set(
+            createCacheBustKey(),
+            Date.now() + '-' + Math.random().toString(36).slice(2)
+          )
+          targetUrl.hash = hash
+
+          return targetUrl.href
+        }
+
+        function loadIframe(url) {
+          return new Promise(function (resolve) {
+            // \u540C\u4E00\u9875\u9762\u53EA\u4FDD\u7559\u4E00\u4E2A\u7F13\u5B58\u5237\u65B0 iframe\uFF0C\u521B\u5EFA\u524D\u5148\u9500\u6BC1\u65E7\u5B9E\u4F8B\u3002
+            var existing = document.getElementById(IFRAME_ID)
+
+            if (existing) {
+              existing.remove()
+            }
+
+            var iframe = document.createElement('iframe')
+            var frameTimeout = 0
+            var completed = false
+
+            function complete() {
+              if (completed) {
+                return
+              }
+
+              completed = true
+              window.clearTimeout(frameTimeout)
+              resolve()
+            }
+
+            frameTimeout = window.setTimeout(complete, IFRAME_TIMEOUT)
+
+            iframe.hidden = true
+            iframe.id = IFRAME_ID
+            iframe.addEventListener('load', complete, { once: true })
+            iframe.addEventListener('error', complete, { once: true })
+            iframe.src = url
+            document.documentElement.appendChild(iframe)
+          })
+        }
+
+        function clearTargetUrlCache(url) {
+          var targetUrl = new URL(url, window.location.href).href
+          console.info('[vite-plugin-build-version] Clear cache for ' + targetUrl)
+
+          // \u968F\u673A URL \u7ED5\u8FC7\u65E7\u7F13\u5B58\uFF0C\u539F URL \u4F7F\u7528 reload \u6A21\u5F0F\u5237\u65B0\u5BF9\u5E94\u7F13\u5B58\u6761\u76EE\u3002
+          // \u7B49\u5F85\u54CD\u5E94\u4F53\u5B8C\u6574\u8BFB\u53D6\uFF0C\u907F\u514D\u540E\u7EED\u8DF3\u8F6C\u63D0\u524D\u53D6\u6D88\u7F13\u5B58\u5237\u65B0\u8BF7\u6C42\u3002
+          return Promise.allSettled([
+            fetch(createCacheBustedUrl(targetUrl), { cache: 'no-store' }).then(
+              function (response) {
+                return response.arrayBuffer()
+              }
+            ),
+            fetch(targetUrl, { cache: 'reload' }).then(function (response) {
+              return response.arrayBuffer()
+            })
+          ]).then(function () {
+            // iframe \u518D\u89E6\u53D1\u4E00\u6B21\u9875\u9762\u8D44\u6E90\u52A0\u8F7D\uFF0C\u8D85\u65F6\u6216\u5931\u8D25\u7531\u5916\u5C42\u7EE7\u7EED\u5904\u7406\u540E\u7EED URL\u3002
+            return loadIframe(createCacheBustedUrl(targetUrl))
+          })
+        }
+
+        var refreshTimeoutId = 0
+        var clearAllDone = (async function () {
+          // \u6574\u5957\u6E05\u7406\u64CD\u4F5C\u6309 times \u91CD\u590D\u6267\u884C\uFF0C\u9ED8\u8BA4 2 \u6B21\u3002
+          for (var round = 0; round < times; round++) {
+            for (var i = 0; i < urls.length; i++) {
+              try {
+                await clearTargetUrlCache(urls[i])
+              } catch (error) {
+                // \u5355\u7EC4\u5931\u8D25\u4E0D\u963B\u65AD\u540E\u7EED URL\uFF0C\u4FDD\u8BC1\u914D\u7F6E\u7684\u68C0\u6D4B\u7EC4\u90FD\u80FD\u6267\u884C\u3002
+              }
+            }
+          }
+        })()
+        var limitReached = new Promise(function (resolve) {
+          // \u5230\u8FBE\u603B\u7B49\u5F85\u65F6\u9650\u540E\u76F4\u63A5\u8DF3\u8F6C\uFF0C\u4E0D\u53D7\u7F13\u5B58\u8BF7\u6C42\u72B6\u6001\u5F71\u54CD\u3002
+          refreshTimeoutId = window.setTimeout(resolve, time * 1000)
+        })
+
+        Promise.race([clearAllDone, limitReached]).then(function () {
+          window.clearTimeout(refreshTimeoutId)
+          // \u6700\u7EC8\u8DF3\u8F6C\u539F\u6837\u4F7F\u7528\u76EE\u6807\u5730\u5740\uFF0C\u4E0D\u9644\u52A0\u7F13\u5B58\u6233\u3002
+          window.location.replace(redirectUrl)
+        })
+      })()
+    </script>
+  </body>
+</html>
+`;
+
+// src/index.ts
 var PLUGIN_NAME = "vite-plugin-build-version-file";
 var DEFAULT_FILENAME = "version.json";
+var DEFAULT_LOADING_PAGE = "loading";
 var DEFAULT_GLOBAL_NAME = "__VERSION__";
 var DEFAULT_DEFINE_NAME = "__VERSION__";
 var DEFAULT_TIME_ZONE = "Asia/Shanghai";
@@ -40,6 +248,16 @@ function normalizeFileName(filename) {
   }
   return normalized;
 }
+function normalizeLoadingPage(loadingPage) {
+  if (loadingPage === false) {
+    return false;
+  }
+  const normalized = (loadingPage ?? DEFAULT_LOADING_PAGE).trim().replace(/^\/+/, "");
+  if (!normalized) {
+    throw new Error(`[${PLUGIN_NAME}] "loadingPage" cannot be empty.`);
+  }
+  return normalized.endsWith(".html") ? normalized : `${normalized}.html`;
+}
 function normalizeGlobalName(globalName) {
   if (!globalName.trim()) {
     throw new Error(`[${PLUGIN_NAME}] "globalName" cannot be empty.`);
@@ -117,6 +335,9 @@ function serializePayload(payload) {
 function createInjectScript(globalName, payload) {
   return `window[${JSON.stringify(globalName)}] = ${JSON.stringify(payload)};`;
 }
+function createInjectScriptTag(globalName, payload) {
+  return `<script>${createInjectScript(globalName, payload)}</script>`;
+}
 function injectScriptToHead(code, script) {
   const scriptTag = `<script>${script}</script>`;
   if (code.includes(script)) {
@@ -139,6 +360,13 @@ function toRequestPath(base, fileName) {
   const baseWithoutTrailingSlash = withLeadingSlash.endsWith("/") ? withLeadingSlash.slice(0, -1) : withLeadingSlash;
   return `${baseWithoutTrailingSlash}/${fileName}`.replace(/\/{2,}/g, "/");
 }
+function resolveNuxtFileName(config, fileName) {
+  if (config.appType !== "custom" || config.build.copyPublicDir !== false) {
+    return fileName;
+  }
+  const assetDir = normalizeFileName(config.build.assetsDir);
+  return assetDir === "." || fileName.startsWith(`${assetDir}/`) ? fileName : `${assetDir}/${fileName}`;
+}
 function resolveProjectRoot(root) {
   return root ? resolve(process.cwd(), root) : process.cwd();
 }
@@ -165,6 +393,7 @@ function createPayload(options, context, data, timeZone, packageInfo = {}) {
 }
 function buildVersionPlugin(options = {}) {
   const fileName = normalizeFileName(options.filename ?? DEFAULT_FILENAME);
+  const loadingPage = normalizeLoadingPage(options.loadingPage);
   const globalName = normalizeGlobalName(
     options.globalName ?? DEFAULT_GLOBAL_NAME
   );
@@ -176,12 +405,20 @@ function buildVersionPlugin(options = {}) {
   const data = normalizeData(options.data);
   let payload;
   let skipBundleEmit = false;
+  let bundleFileName = fileName;
+  let bundleLoadingFileName = loadingPage;
   const transformHtml = (code, ..._args) => {
     if (!injectToHtml || !payload) {
       return void 0;
     }
     return injectScriptToHead(code, createInjectScript(globalName, payload));
   };
+  const headScript = () => {
+    if (!injectToHtml || !payload) {
+      return "";
+    }
+    return createInjectScriptTag(globalName, payload);
+  };
   const plugin = {
     name: PLUGIN_NAME,
     config(userConfig, env) {
@@ -204,6 +441,10 @@ function buildVersionPlugin(options = {}) {
     },
     configResolved(config) {
       skipBundleEmit = Boolean(config.build.ssr) && !config.build.ssrEmitAssets;
+      bundleFileName = resolveNuxtFileName(config, fileName);
+      if (loadingPage) {
+        bundleLoadingFileName = resolveNuxtFileName(config, loadingPage);
+      }
       if (payload) {
         return;
       }
@@ -216,11 +457,21 @@ function buildVersionPlugin(options = {}) {
     },
     configureServer(server) {
       const requestPath = toRequestPath(server.config.base, fileName);
+      const loadingRequestPath = loadingPage ? toRequestPath(server.config.base, loadingPage) : void 0;
       server.middlewares.use((request, response, next) => {
         if (request.method !== "GET" && request.method !== "HEAD") {
           next();
           return;
         }
+        if (loadingRequestPath && parsePathname(request.url) === loadingRequestPath) {
+          response.statusCode = 200;
+          response.setHeader("Content-Type", "text/html; charset=utf-8");
+          response.setHeader("Cache-Control", "no-cache");
+          response.end(
+            request.method === "HEAD" ? void 0 : loading_default
+          );
+          return;
+        }
         if (parsePathname(request.url) !== requestPath || !payload) {
           next();
           return;
@@ -251,9 +502,16 @@ function buildVersionPlugin(options = {}) {
       }
       this.emitFile({
         type: "asset",
-        fileName,
+        fileName: bundleFileName,
         source: serializePayload(payload)
       });
+      if (bundleLoadingFileName) {
+        this.emitFile({
+          type: "asset",
+          fileName: bundleLoadingFileName,
+          source: loading_default
+        });
+      }
       if (options.log) {
         console.log(options.log(payload));
       } else {
@@ -265,6 +523,9 @@ function buildVersionPlugin(options = {}) {
   Object.defineProperty(plugin, "transformHtml", {
     value: transformHtml
   });
+  Object.defineProperty(plugin, "headScript", {
+    value: headScript
+  });
   return plugin;
 }
 var index_default = buildVersionPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-build-version-file",
-  "version": "0.1.17",
+  "version": "0.2.0",
   "description": "A Vite plugin that emits version.json and injects version metadata into HTML.",
   "license": "MIT",
   "type": "module",
@@ -25,14 +25,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "tsup --config tsup.config.ts",
-    "build:fixture": "pnpm build && vite build --config debug/fixture-app/vite.config.ts",
-    "build:vitepress": "pnpm build && vitepress build debug/vitepress-app",
-    "dev:fixture": "pnpm build && vite --config debug/fixture-app/vite.config.ts",
-    "dev:vitepress": "pnpm build && vitepress dev debug/vitepress-app",
-    "prepublishOnly": "pnpm build:fixture"
-  },
   "keywords": [
     "vite",
     "vite-plugin",
@@ -58,5 +50,12 @@
     "vite": "^5.0.0",
     "vitepress": "^1.6.4",
     "vue": "^3.4.0"
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "build:fixture": "pnpm build && vite build --config debug/fixture-app/vite.config.ts",
+    "build:vitepress": "pnpm build && vitepress build debug/vitepress-app",
+    "dev:fixture": "pnpm build && vite --config debug/fixture-app/vite.config.ts",
+    "dev:vitepress": "pnpm build && vitepress dev debug/vitepress-app"
   }
-}
+}