plugin-web-update-notification-rsbuild 1.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# plugin-web-update-notification-rsbuild
+
+基于项目：https://github.com/GreatAuk/plugin-web-update-notification
+
+用于Rsbuild检测网页更新并通知用户刷新。
+## 安装
+
+```bash
+pnpm add plugin-web-update-notification-rsbuild -D
+```
+## 使用
+基于plugin-web-update-notification，参数配置完全一致。
+```ts
+import { webUpdateNotice } from 'plugin-web-update-notification-rsbuild';
+
+export default defineConfig({
+  plugins: [
+    ...,
+    webUpdateNotice({
+      ...
+    })
+  ],
+  ...
+});
+```
+## License
+
+[MIT](./LICENSE)

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "plugin-web-update-notification-rsbuild",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Rsbuild plugin for detect web page updates and notify. based on @plugin-web-update-notification/core.",
+  "author": "Anlige",
+  "license": "MIT",
+  "homepage": "https://github.com/sometiny/plugin-web-update-notification-rsbuild",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sometiny/plugin-web-update-notification-rsbuild"
+  },
+  "bugs": {
+    "url": "https://github.com/sometiny/plugin-web-update-notification-rsbuild/issues"
+  },
+  "keywords": [
+    "rsbuild",
+    "rsbuild-plugin",
+    "plugin-web-update-notification-rsbuild",
+    "web-update-notification"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    }
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "dependencies": {
+    "@plugin-web-update-notification/core": "^2.0.2"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.4.13",
+    "@types/node": "^25.3.3",
+    "typescript": "^5.9.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,115 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import type { Options } from '@plugin-web-update-notification/core';
+type HTMLTags = {
+  headTags: HtmlBasicTag[];
+  bodyTags: HtmlBasicTag[];
+};
+import {
+  DIRECTORY_NAME,
+  INJECT_SCRIPT_FILE_NAME,
+  INJECT_SCRIPT_TAG_ID,
+  INJECT_STYLE_FILE_NAME,
+  JSON_FILE_NAME,
+  NOTIFICATION_ANCHOR_CLASS_NAME,
+  generateJSONFileContent,
+  generateJsFileContent,
+  getFileHash,
+  getVersion,
+  get__Dirname,
+} from '@plugin-web-update-notification/core';
+import { HtmlBasicTag, RsbuildPlugin, RsbuildPluginAPI } from '@rsbuild/core';
+
+// /**
+//  * Get the version of the current Vite
+//  *
+//  * if the viteVersion is undefined, we assume that vite is less than v3.0（after v3.0, vite export version）
+//  */
+// async function getViteVersion(): Promise<string | undefined> {
+//   return await import('vite').then(({ version }) => version)
+// }
+
+/**
+ * It injects the hash into the HTML, and injects the notification anchor and the stylesheet and the
+ * script into the HTML
+ * @param {string} html - The original HTML of the page
+ * @param {string} version - The hash of the current commit
+ * @param {Options} options - Options
+ * @param cssFileHash
+ * @param jsFileHash
+ * @returns The html of the page with the injected script and css.
+ */
+function injectPluginHtml(
+  html: string,
+  version: string,
+  options: Options,
+  { cssFileHash, jsFileHash }: { jsFileHash: string; cssFileHash: string }
+) {
+  const { customNotificationHTML, hiddenDefaultNotification, injectFileBase = '' } = options;
+
+  const cssLinkHtml =
+    customNotificationHTML || hiddenDefaultNotification
+      ? ''
+      : `<link rel="stylesheet" href="${injectFileBase}${DIRECTORY_NAME}/${INJECT_STYLE_FILE_NAME}.${cssFileHash}.css">`;
+  let res = html;
+
+  res = res.replace(
+    '<head>',
+    `<head>
+    ${cssLinkHtml}
+    <script data-id="${INJECT_SCRIPT_TAG_ID}" data-v="${version}" src="${injectFileBase}${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js"></script>`
+  );
+
+  if (!hiddenDefaultNotification) {
+    res = res.replace('</body>', `<div class="${NOTIFICATION_ANCHOR_CLASS_NAME}"></div></body>`);
+  }
+
+  return res;
+}
+
+export function webUpdateNotice(options: Options = {}): RsbuildPlugin {
+  const { versionType, customVersion, silence } = options;
+  let version = '';
+  if (versionType === 'custom') version = getVersion(versionType, customVersion!);
+  else version = getVersion(versionType!);
+
+  /** inject script file hash */
+  let jsFileHash = '';
+  /** inject css file hash */
+  let cssFileHash = '';
+
+  const cssFileSource = readFileSync(`${resolve(get__Dirname(), INJECT_STYLE_FILE_NAME)}.css`, 'utf8').toString();
+  cssFileHash = getFileHash(cssFileSource);
+
+  let jsFileSource = '';
+
+  return {
+    name: 'vue-rsbuild-web-update-notice',
+    apply: 'build',
+    setup(api: RsbuildPluginAPI) {
+      const config = api.getRsbuildConfig();
+      if (options.injectFileBase === undefined) options.injectFileBase = config.server?.base || '/';
+
+      jsFileSource = generateJsFileContent(
+        readFileSync(`${resolve(get__Dirname(), INJECT_SCRIPT_FILE_NAME)}.js`, 'utf8').toString(),
+        version,
+        options
+      );
+      jsFileHash = getFileHash(jsFileSource);
+
+      api.modifyHTML((html: string) => {
+        return injectPluginHtml(html, version, options, { jsFileHash, cssFileHash });
+      });
+      api.modifyHTMLTags(({ headTags, bodyTags }: HTMLTags) => {
+        return { headTags, bodyTags };
+      });
+      api.processAssets({ stage: 'additional' }, ({ sources, compilation }) => {
+        compilation.emitAsset(`${DIRECTORY_NAME}/${JSON_FILE_NAME}.json`, new sources.RawSource(generateJSONFileContent(version, silence)));
+
+        compilation.emitAsset(`${DIRECTORY_NAME}/${INJECT_STYLE_FILE_NAME}.${cssFileHash}.css`, new sources.RawSource(cssFileSource));
+
+        compilation.emitAsset(`${DIRECTORY_NAME}/${INJECT_SCRIPT_FILE_NAME}.${jsFileHash}.js`, new sources.RawSource(jsFileSource));
+      });
+    },
+  };
+}