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

package/dist/client.mjs

@@ -1,117 +1,39 @@
 // src/client.ts
-var CACHE_BUST_PARAM = "_";
-var IFRAME_ID = "vite-plugin-build-version-file-cache-iframe";
-var LOADING_ID = "vite-plugin-build-version-file-loading";
-var IFRAME_TIMEOUT = 5e3;
-var DEFAULT_REFRESH_TIME = 5;
-function showLoading(time) {
-  document.getElementById(LOADING_ID)?.remove();
-  const loading = document.createElement("div");
-  const spinner = document.createElement("div");
-  const text = document.createElement("div");
-  const deadline = Date.now() + time * 1e3;
-  loading.id = LOADING_ID;
-  loading.style.cssText = "position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.65);color:#fff;font:14px/1.5 sans-serif;";
-  spinner.style.cssText = "width:36px;height:36px;margin-bottom:16px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:vite-build-version-loading .8s linear infinite;";
-  text.textContent = `\u8BF7\u7A0D\u7B49\uFF0C\u6B63\u5728\u68C0\u6D4B\u66F4\u65B0...\uFF08${Math.ceil(time)}\u79D2\uFF09`;
-  const style = document.createElement("style");
-  style.textContent = "@keyframes vite-build-version-loading{to{transform:rotate(360deg)}}";
-  loading.append(style, spinner, text);
-  document.documentElement.appendChild(loading);
-  const countdown = window.setInterval(() => {
-    const seconds = Math.max(0, Math.ceil((deadline - Date.now()) / 1e3));
-    text.textContent = `\u8BF7\u7A0D\u7B49\uFF0C\u6B63\u5728\u68C0\u6D4B\u66F4\u65B0...\uFF08${seconds}\u79D2\uFF09`;
-  }, 1e3);
-  return () => {
-    window.clearInterval(countdown);
-    loading.remove();
-  };
+var DEFAULT_LOADING_FILENAME = "loading.html";
+function createRandomParamKey() {
+  return Math.random().toString(36).slice(2);
 }
-function createCacheBustedUrl(url) {
-  const targetUrl = new URL(url, window.location.href);
-  const hash = targetUrl.hash;
-  targetUrl.hash = "";
-  targetUrl.searchParams.set(
-    CACHE_BUST_PARAM,
-    `${Date.now()}-${Math.random().toString(36).slice(2)}`
+function createLoadingUrl(options) {
+  const loadingUrl = new URL(
+    options.filename ?? DEFAULT_LOADING_FILENAME,
+    window.location.href
   );
-  targetUrl.hash = hash;
-  return targetUrl.href;
-}
-function createIndexUrl(url) {
-  const targetUrl = new URL(url);
-  if (!targetUrl.pathname.endsWith("/")) {
-    targetUrl.pathname += "/";
+  const defaultUrl = window.location.origin + window.location.pathname;
+  const indexUrl = defaultUrl.endsWith("/") ? `${defaultUrl}index.html` : `${defaultUrl}/index.html`;
+  const urls = options.urls && options.urls.length > 0 ? options.urls : [defaultUrl, indexUrl];
+  const payload = {
+    urls,
+    redirectUrl: options.redirectUrl ?? window.location.href
+  };
+  if (options.time !== void 0) {
+    payload.time = options.time;
   }
-  targetUrl.pathname += "index.html";
-  return targetUrl.href;
-}
-function loadIframe(url) {
-  return new Promise((resolve) => {
-    document.getElementById(IFRAME_ID)?.remove();
-    const iframe = document.createElement("iframe");
-    let completed = false;
-    const complete = () => {
-      if (completed) {
-        return;
-      }
-      completed = true;
-      window.clearTimeout(timeout);
-      resolve();
-    };
-    const timeout = 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);
-  });
+  if (options.times !== void 0) {
+    payload.times = options.times;
+  }
+  if (options.title) {
+    payload.title = options.title;
+  }
+  loadingUrl.searchParams.set(createRandomParamKey(), JSON.stringify(payload));
+  return loadingUrl.href;
 }
-async function clearTargetUrlCache(url) {
-  const targetUrl = new URL(url, window.location.href).href;
-  console.info(`[vite-plugin-build-version] Clear cache for ${targetUrl}`);
-  await Promise.allSettled([
-    fetch(createCacheBustedUrl(targetUrl), { cache: "no-store" }).then(
-      (response) => response.arrayBuffer()
-    ),
-    fetch(targetUrl, { cache: "reload" }).then(
-      (response) => response.arrayBuffer()
-    )
-  ]);
-  await loadIframe(createCacheBustedUrl(targetUrl));
+function redirectToLoading(options = {}) {
+  window.location.href = createLoadingUrl(options);
 }
-async function clearUrlCache(options = {}) {
-  const defaultUrl = window.location.origin + window.location.pathname;
-  const urls = options.urls ?? [defaultUrl, createIndexUrl(defaultUrl)];
-  const configuredTime = options.time;
-  const time = typeof configuredTime === "number" && Number.isFinite(configuredTime) && configuredTime > 0 ? configuredTime : DEFAULT_REFRESH_TIME;
-  const redirectUrl = new URL(
-    options.redirectUrl ?? urls[0] ?? defaultUrl,
-    window.location.href
-  ).href;
-  const hideLoading = showLoading(time);
-  let refreshTimeout = 0;
-  try {
-    await Promise.race([
-      (async () => {
-        for (const url of urls) {
-          try {
-            await clearTargetUrlCache(url);
-          } catch {
-          }
-        }
-      })(),
-      new Promise((resolve) => {
-        refreshTimeout = window.setTimeout(resolve, time * 1e3);
-      })
-    ]);
-  } finally {
-    window.clearTimeout(refreshTimeout);
-    hideLoading();
-    window.location.replace(createCacheBustedUrl(redirectUrl));
-  }
+function clearUrlCache(options = {}) {
+  redirectToLoading(options);
 }
 export {
-  clearUrlCache
+  clearUrlCache,
+  redirectToLoading
 };

package/dist/index.cjs

@@ -26,8 +26,216 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_node_fs = require("fs");
 var import_node_path = require("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";
@@ -65,6 +273,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.`);
@@ -167,6 +385,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 ? (0, import_node_path.resolve)(process.cwd(), root) : process.cwd();
 }
@@ -193,6 +418,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
   );
@@ -204,6 +430,8 @@ 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;
@@ -238,6 +466,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;
       }
@@ -250,11 +482,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;
@@ -285,9 +527,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 {

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;

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;