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

package/README.md

@@ -389,10 +389,13 @@ import { clearUrlCache } from 'vite-plugin-build-version-file/client'
 
 await clearUrlCache({
   urls: ['/vue-app/', '/vue-app/index.html'],
-  redirectUrl: '/vue-app/'
+  redirectUrl: '/vue-app/',
+  time: 5
 })
 ```
 
+调用后会显示全屏 loading 和刷新倒计时。`time` 单位为秒，默认值为 `5`；缓存处理提前完成时会立即刷新，到达时限后则无论调用结果如何都会刷新。
+
 参数对象可省略。无参时按顺序检测以下两组 URL：
 
 1. `location.origin + location.pathname`
@@ -863,10 +866,13 @@ import { clearUrlCache } from 'vite-plugin-build-version-file/client'
 
 await clearUrlCache({
   urls: ['/vue-app/', '/vue-app/index.html'],
-  redirectUrl: '/vue-app/'
+  redirectUrl: '/vue-app/',
+  time: 5
 })
 ```
 
+The method displays a full-screen loading mask and refresh countdown after it is called. `time` is measured in seconds and defaults to `5`. It refreshes immediately if cache processing finishes early; once the limit is reached, it refreshes regardless of the processing result.
+
 The options object is optional. Without arguments, the following URL groups are checked in order:
 
 1. `location.origin + location.pathname`

package/dist/client.cjs

@@ -25,7 +25,32 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 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();
+  };
+}
 function createCacheBustedUrl(url) {
   const targetUrl = new URL(url, window.location.href);
   const hash = targetUrl.hash;
@@ -83,18 +108,31 @@ async function clearTargetUrlCache(url) {
 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 {
-    for (const url of urls) {
-      try {
-        await clearTargetUrlCache(url);
-      } catch {
-      }
-    }
+    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));
   }
 }

package/dist/client.d.cts

@@ -1,6 +1,7 @@
 interface ClearUrlCacheOptions {
     urls?: string[];
     redirectUrl?: string;
+    time?: number;
 }
 declare function clearUrlCache(options?: ClearUrlCacheOptions): Promise<void>;
 

package/dist/client.d.ts

@@ -1,6 +1,7 @@
 interface ClearUrlCacheOptions {
     urls?: string[];
     redirectUrl?: string;
+    time?: number;
 }
 declare function clearUrlCache(options?: ClearUrlCacheOptions): Promise<void>;
 

package/dist/client.mjs

@@ -1,7 +1,32 @@
 // 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();
+  };
+}
 function createCacheBustedUrl(url) {
   const targetUrl = new URL(url, window.location.href);
   const hash = targetUrl.hash;
@@ -59,18 +84,31 @@ async function clearTargetUrlCache(url) {
 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 {
-    for (const url of urls) {
-      try {
-        await clearTargetUrlCache(url);
-      } catch {
-      }
-    }
+    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));
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-build-version-file",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "A Vite plugin that emits version.json and injects version metadata into HTML.",
   "license": "MIT",
   "type": "module",