feat: automatically detected injectFileBase

README.md

@@ -247,12 +247,15 @@ export interface Options {
    */
   hiddenDismissButton?: boolean
   /**
+   * After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
+   *
    * Base public path for inject file, Valid values include:
    * * Absolute URL pathname, e.g. /foo/
    * * Full URL, e.g. https://foo.com/
    * * Empty string(default) or ./
+   *
    * !!! Don't forget / at the end of the path
-   */
+  */
   injectFileBase?: string
 }
 
@@ -301,7 +304,7 @@ export type LocaleData = Record<string, NotificationProps>
 
 ## Q&A
 
-1. `TypeScript` 的智能提示, 如果你想使用 `window.pluginWebUpdateNotice_.`。
+1. `TypeScript` intellisense, if you use `window.pluginWebUpdateNotice_.`。
 
    ```ts
    // src/shim.d.ts
@@ -351,6 +354,7 @@ export type LocaleData = Record<string, NotificationProps>
    })
    ```
 
+   > After version 1.2.0, in most case, you not need to set injectFileBase, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
 3. Custom notification button event.
 
    ```ts

README.zh-CN.md

@@ -245,12 +245,15 @@ export interface Options {
    */
   hiddenDismissButton?: boolean
   /**
+   * After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
+   *
    * Base public path for inject file, Valid values include:
    * * Absolute URL pathname, e.g. /foo/
    * * Full URL, e.g. https://foo.com/
    * * Empty string(default) or ./
+   *
    * !!! Don't forget / at the end of the path
-   */
+  */
   injectFileBase?: string
 }
 
@@ -303,11 +306,11 @@ export type LocaleData = Record<string, NotificationProps>
 
    ```ts
    // vite.config.ts
-
+   
    const prod = process.env.NODE_ENV === 'production'
-
+   
    const cdnServerUrl = 'https://foo.com/'
-
+   
    export default defineConfig({
      base: prod ? cdnServerUrl : '/',
      plugins: [
@@ -323,11 +326,11 @@ export type LocaleData = Record<string, NotificationProps>
 
    ```ts
    // vite.config.ts
-
+   
    const prod = process.env.NODE_ENV === 'production'
-
+   
    const base = '/folder/' // https://example.com/folder/
-
+   
    export default defineConfig({
      base,
      plugins: [
@@ -339,6 +342,8 @@ export type LocaleData = Record<string, NotificationProps>
    })
    ```
 
+   > After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
+
 3. 自定义 `notification` 的刷新和忽略按钮事件。
 
    ```ts
@@ -355,7 +360,7 @@ export type LocaleData = Record<string, NotificationProps>
 
    ```html
    <!-- notification html content -->
-
+   
    <div class="plugin-web-update-notice-anchor">
      <div class="plugin-web-update-notice">
        <div class="plugin-web-update-notice-content" data-cy="notification-content">

example/vue-cli/vue.config.js

@@ -2,12 +2,12 @@ const { WebUpdateNotificationPlugin } = require('@plugin-web-update-notification
 const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
+  publicPath: '/test/',
   transpileDependencies: true,
   configureWebpack: {
     plugins: [
       new WebUpdateNotificationPlugin({
         logVersion: true,
-        injectFileBase: './',
         locale: 'en_US',
       }),
     ],

packages/core/src/type.ts

@@ -49,12 +49,15 @@ export interface Options {
    */
   hiddenDismissButton?: boolean
   /**
+   * After version 1.2.0, you not need to set this option, it will be automatically detected from the base of vite config、publicPath of webpack config or publicPath of umi config
+   *
    * Base public path for inject file, Valid values include:
    * * Absolute URL pathname, e.g. /foo/
    * * Full URL, e.g. https://foo.com/
    * * Empty string(default) or ./
+   *
    * !!! Don't forget / at the end of the path
-   */
+  */
   injectFileBase?: string
 }
 

packages/umi-plugin/src/index.ts

@@ -52,6 +52,9 @@ export default (api: IApi) => {
     },
   })
   const webUpdateNotificationOptions = (api.userConfig?.webUpdateNotification || {}) as Options
+  if (webUpdateNotificationOptions.injectFileBase === undefined)
+    webUpdateNotificationOptions.injectFileBase = api.userConfig.publicPath || '/'
+
   const { versionType, logVersion, customNotificationHTML, hiddenDefaultNotification, injectFileBase = '', customVersion } = webUpdateNotificationOptions
 
   let version = ''

packages/vite-plugin/src/index.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from 'fs'
 import { resolve } from 'path'
-import type { Plugin } from 'vite'
+import type { Plugin, ResolvedConfig } from 'vite'
 import type { Options } from '@plugin-web-update-notification/core'
 import {
   DIRECTORY_NAME,
@@ -49,7 +49,7 @@ function injectPluginHtml(html: string, version: string, options: Options) {
 }
 
 export function webUpdateNotice(options: Options = {}): Plugin {
-  // let viteConfig: ResolvedConfig;
+  let viteConfig: ResolvedConfig
 
   const { versionType, customVersion } = options
   let version = ''
@@ -62,10 +62,12 @@ export function webUpdateNotice(options: Options = {}): Plugin {
     name: 'vue-vite-web-update-notice',
     apply: 'build',
     enforce: 'post',
-    // configResolved(resolvedConfig: ResolvedConfig) {
-    //   // 存储最终解析的配置
-    //   viteConfig = resolvedConfig;
-    // },
+    configResolved(resolvedConfig: ResolvedConfig) {
+      // 存储最终解析的配置
+      viteConfig = resolvedConfig
+      if (options.injectFileBase === undefined)
+        options.injectFileBase = viteConfig.base
+    },
     generateBundle(_, bundle = {}) {
       if (!version)
         return

packages/webpack-plugin/src/index.ts

@@ -21,7 +21,7 @@ type PluginOptions = Options & {
  * @returns The html of the page with the injected script and css.
  */
 function injectPluginHtml(html: string, version: string, options: Options) {
-  const { logVersion, customNotificationHTML, hiddenDefaultNotification, injectFileBase = '' } = options
+  const { logVersion, customNotificationHTML, hiddenDefaultNotification, injectFileBase = '/' } = options
 
   const logHtml = logVersion ? `<script>console.log('version: %c${version}', 'color: #1890ff');</script>` : ''
   const versionScript = `<script>window.pluginWebUpdateNotice_version = '${version}';</script>`
@@ -60,6 +60,10 @@ class WebUpdateNotificationPlugin {
   }
 
   apply(compiler: Compiler) {
+    const { publicPath } = compiler.options.output
+    if (this.options.injectFileBase === undefined)
+      this.options.injectFileBase = typeof publicPath === 'string' ? publicPath : '/'
+
     const { hiddenDefaultNotification, versionType, indexHtmlFilePath, customVersion } = this.options
     let version = ''
     if (versionType === 'custom')
@@ -69,7 +73,6 @@ class WebUpdateNotificationPlugin {
 
     compiler.hooks.emit.tap(pluginName, (compilation: Compilation) => {
       // const outputPath = compiler.outputPath
-
       const jsonFileContent = generateJSONFileContent(version)
       // @ts-expect-error
       compilation.assets[`${DIRECTORY_NAME}/${JSON_FILE_NAME}.json`] = {