feat: add packages/umi-plugin

README.md

@@ -109,7 +109,7 @@ export default defineConfig({
 })
 
 // other file to listener custom update event
-document.body.addEventListener('system_update_vite_plugin_web_update_notification', (options) => {
+document.body.addEventListener('system_update_plugin_web_update_notification', (options) => {
   console.log(options)
   alert('System update!')
 })

README.zh-CN.md

@@ -106,7 +106,7 @@ export default defineConfig({
 })
 
 // 在其他文件中监听自定义更新事件
-document.body.addEventListener('system_update_vite_plugin_web_update_notification', (options) => {
+document.body.addEventListener('system_update_plugin_web_update_notification', (options) => {
   console.log(options)
   alert('System update!')
 })

example/react-umi/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/.umi
+/.umi-production
+/.umi-test
+/dist
+/.mfsu

example/react-umi/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmmirror.com

example/react-umi/.umirc.ts

@@ -0,0 +1,13 @@
+import { defineConfig} from 'umi'
+import type { Options as WebUpdateNotificationOptions } from '@umijs/plugin-web-update-notification'
+
+export default {
+  npmClient: 'pnpm',
+  plugins: ['@umijs/plugin-web-update-notification'],
+  webUpdateNotification: {
+    logHash: true,
+    notificationProps: {
+      title: '更新了！！'
+    }
+  } as WebUpdateNotificationOptions
+}

example/react-umi/package.json

@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "start": "npm run dev",
+    "preview": "pnpm build && vite preview"
+  },
+  "dependencies": {
+    "umi": "^4.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/plugin-web-update-notification": "workspace:*",
+    "typescript": "^4.1.2"
+  }
+}

example/react-umi/src/layouts/index.less

@@ -0,0 +1,10 @@
+.navs {
+  ul {
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+  li {
+    margin-right: 1em;
+  }
+}

example/react-umi/src/layouts/index.tsx

@@ -0,0 +1,21 @@
+import { Link, Outlet } from 'umi';
+import styles from './index.less';
+
+export default function Layout() {
+  return (
+    <div className={styles.navs}>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/docs">Docs</Link>
+        </li>
+        <li>
+          <a href="https://github.com/umijs/umi">Github</a>
+        </li>
+      </ul>
+      <Outlet />
+    </div>
+  );
+}

example/react-umi/src/pages/docs.tsx

@@ -0,0 +1,9 @@
+const DocsPage = () => {
+  return (
+    <div>
+      <p>This is umi docs.</p>
+    </div>
+  );
+};
+
+export default DocsPage;

example/react-umi/src/pages/index.tsx

@@ -0,0 +1,15 @@
+import yayJpg from '../assets/yay.jpg';
+
+export default function HomePage() {
+  return (
+    <div>
+      <h2>Yay! Welcome to umi!</h2>
+      <p>
+        <img src={yayJpg} width="388" />
+      </p>
+      <p>
+        To get started, edit <code>pages/index.tsx</code> and save to reload.
+      </p>
+    </div>
+  );
+}

example/react-umi/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

example/react-umi/typings.d.ts

@@ -0,0 +1 @@
+import 'umi/typings';

package.json

@@ -42,7 +42,7 @@
   "scripts": {
     "build": "pnpm -r --filter=./packages/** build",
     "dev:vite": "pnpm --filter=vite-plugin-web-update-notification dev",
-    "dev:umi": "pnpm --filter=umi-plugin-web-update-notification dev",
+    "dev:umi": "pnpm --filter=@umijs/plugin-web-update-notification dev",
     "example:vue": "pnpm --filter=vue-example preview",
     "example:react": "pnpm --filter=react-example preview",
     "example:svelte": "pnpm --filter svelte-example preview",

packages/core/package.json

@@ -33,7 +33,8 @@
   ],
   "scripts": {
     "start": "esno src/index.ts",
-    "build": "tsup"
+    "build": "tsup",
+    "dev": "tsup --watch"
   },
   "devDependencies": {
   }

packages/core/public/webUpdateNoticeInjectStyle.css

@@ -1,4 +1,4 @@
-.vite-plugin-web-update-notice-anchor {
+.plugin-web-update-notice-anchor {
   cursor: pointer;
 }
 .vite-plugin-web-update-notice {

packages/core/src/constant.ts

@@ -4,6 +4,6 @@ export const INJECT_STYLE_FILE_NAME = 'webUpdateNoticeInjectStyle'
 
 export const INJECT_SCRIPT_FILE_NAME = 'webUpdateNoticeInjectScript'
 
-export const CUSTOM_UPDATE_EVENT_NAME = 'system_update_vite_plugin_web_update_notification'
+export const CUSTOM_UPDATE_EVENT_NAME = 'system_update_plugin_web_update_notification'
 
-export const NOTIFICATION_ANCHOR_CLASS_NAME = 'vite-plugin-web-update-notice-anchor'
+export const NOTIFICATION_ANCHOR_CLASS_NAME = 'plugin-web-update-notice-anchor'

packages/core/src/index.ts

@@ -1,10 +1,11 @@
 import { dirname } from 'path'
 import { fileURLToPath } from 'url'
 import { execSync } from 'child_process'
+import { name as pkgName_ } from '../package.json'
 
-export { name as pkgName } from '../package.json'
 export * from './constant'
 export type { Options } from './type'
+export const pkgName = pkgName_
 
 /**
  * It returns the directory name of the current file.
@@ -32,13 +33,14 @@ export function getGitCommitHash() {
 }
 
 /**
- * generate json file for git commit hash
+ * generate json file content for git commit hash
  * @param {string} hash - git commit hash
  * @returns A string
  */
-export function generateJSONFile(hash: string) {
+export function generateJSONFileContent(hash: string) {
   return `
 {
   "hash": "${hash}"
 }`.replace('\n', '')
 }
+

packages/core/src/script.ts

@@ -87,7 +87,7 @@ function webUpdateCheck_showNotification(options: Options) {
 
   notification.innerHTML = notificationInnerHTML
   document
-    .querySelector('.vite-plugin-web-update-notice-anchor')!
+    .querySelector('.plugin-web-update-notice-anchor')!
     .appendChild(notification)
 }
 

packages/umi-plugin/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@umijs/plugin-web-update-notification",
+  "version": "0.1.1",
+  "description": "Vite plugin for detect  web page updates and notify.",
+  "author": "Utopia",
+  "license": "MIT",
+  "homepage": "https://github.com/GreatAuk/vite-plugin-web-update-notification",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GreatAuk/vite-plugin-web-update-notification",
+    "directory": "packages/vite-plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/GreatAuk/vite-plugin-web-update-notification/issues"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "vite-plugin-web-update-notification",
+    "web-update-notification"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "esno src/index.ts",
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "umi": "*"
+  },
+  "dependencies": {
+    "@web-update-notification/core": "workspace:*"
+  },
+  "devDependencies": {
+    "umi": "^4.0.2"
+  }
+}

packages/umi-plugin/src/index.ts

@@ -0,0 +1,101 @@
+import { resolve } from 'path'
+import { copyFileSync, readFileSync, writeFileSync } from 'fs'
+import type { IApi } from 'umi'
+import type { Options } from '@web-update-notification/core'
+import { INJECT_SCRIPT_FILE_NAME, INJECT_STYLE_FILE_NAME, JSON_FILE_NAME, NOTIFICATION_ANCHOR_CLASS_NAME, generateJSONFileContent, getGitCommitHash } from '@web-update-notification/core'
+import { name as pkgName } from '../package.json'
+
+export type { Options } from '@web-update-notification/core'
+
+const logHashTpl = (commitHash: string) => {
+  return `
+(function() {
+  console.log('git-commit-hash: %c${commitHash}', 'color: #1890ff');
+})();`
+}
+
+export function generateScriptContent(options: Options, commitHash: string) {
+  const filePath = resolve('node_modules', pkgName, 'dist', `${INJECT_SCRIPT_FILE_NAME}.js`)
+  return `${readFileSync(filePath, 'utf8').toString()}
+  window.GIT_COMMIT_HASH = "${commitHash}";
+  webUpdateCheck_checkAndNotice(${JSON.stringify(options)});`
+}
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'webUpdateNotification',
+    config: {
+      schema(Joi) {
+        return Joi.object({
+          /** polling interval（ms）, default 10*60*1000 */
+          checkInterval: Joi.number(),
+          /** whether to output commit-hash in console */
+          logHash: Joi.boolean(),
+          customNotificationHTML: Joi.string(),
+          notificationProps: {
+            title: Joi.string(),
+            description: Joi.string(),
+            buttonText: Joi.string(),
+          },
+          hiddenDefaultNotification: Joi.boolean(),
+        })
+      },
+    },
+    enableBy({ userConfig }) {
+      return api.env === 'production' && userConfig.webUpdateNotification
+    },
+  })
+  const webUpdateNotificationOptions = (api.userConfig?.webUpdateNotification || {}) as Options
+  const { logHash, customNotificationHTML, hiddenDefaultNotification } = webUpdateNotificationOptions
+
+  const commitHash = getGitCommitHash()
+
+  // 插件只在生产环境且仓库是 git 仓库时生效
+  if (!commitHash || api.env !== 'production')
+    return
+
+  api.addHTMLLinks(() => {
+    if (customNotificationHTML || hiddenDefaultNotification)
+      return []
+
+    return [
+      {
+        rel: 'stylesheet',
+        href: `${INJECT_STYLE_FILE_NAME}.css`,
+      },
+    ]
+  })
+
+  api.addHTMLScripts(() => {
+    const scriptList = []
+    if (logHash) {
+      scriptList.push({
+        content: logHashTpl(commitHash),
+      })
+    }
+    return scriptList
+  })
+
+  api.onBuildHtmlComplete(() => {
+    // copy file from @web-update-notification/core/dist/??.css */ to dist/
+    const scriptFilePath = resolve('node_modules', pkgName, 'dist', `${INJECT_STYLE_FILE_NAME}.css`)
+    copyFileSync(scriptFilePath, `dist/${INJECT_STYLE_FILE_NAME}.css`)
+
+    // write js file to dist/
+    writeFileSync(`dist/${INJECT_SCRIPT_FILE_NAME}.js`, generateScriptContent(webUpdateNotificationOptions, commitHash))
+
+    // write version json file to dist/
+    writeFileSync(`dist/${JSON_FILE_NAME}.json`, generateJSONFileContent(commitHash))
+  })
+
+  api.modifyHTML(($) => {
+    if (!hiddenDefaultNotification || !customNotificationHTML)
+      $('head').append(`<link rel="stylesheet" href="${INJECT_STYLE_FILE_NAME}.css" />`)
+
+    if (!hiddenDefaultNotification)
+      $('body').append(`<div class="${NOTIFICATION_ANCHOR_CLASS_NAME}"></div></body>`)
+
+    $('body').append(`<script type="module" crossorigin src="${INJECT_SCRIPT_FILE_NAME}.js"></script>`)
+    return $
+  })
+}

packages/umi-plugin/tsup.config.ts

@@ -0,0 +1,18 @@
+import { resolve } from 'path'
+import { defineConfig } from 'tsup'
+import { pkgName } from '@web-update-notification/core'
+
+export default defineConfig((options) => { // The options here is derived from CLI flags.
+  return {
+    entry: {
+      index: 'src/index.ts',
+    },
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    dts: true,
+    format: ['cjs', 'esm'],
+    minify: !options.watch,
+    onSuccess: `node ${resolve('node_modules', pkgName, 'dist', 'pluginBuildScript.js')}`,
+  }
+})

packages/vite-plugin/package.json

@@ -36,7 +36,7 @@
   ],
   "scripts": {
     "start": "esno src/index.ts",
-    "dev:vite": "tsup --watch",
+    "dev": "tsup --watch",
     "build": "tsup"
   },
   "peerDependencies": {