Skip to content

WX-DongXing/unplugin-detect-update

Repository files navigation

unplugin-detect-update

NPM version

Detect web app version update for Vite, Webpack and Rollup. Powered by unplugin.


Install

npm i unplugin-detect-update -D
Vite
// vite.config.ts
import DetectUpdate from 'unplugin-detect-update/vite'

export default defineConfig({
  plugins: [
    DetectUpdate({
      /* options */
    }),
  ],
})


Rollup
// rollup.config.js
import DetectUpdate from 'unplugin-detect-update/rollup'

export default {
  plugins: [
    DetectUpdate({
      /* options */
    }),
  ],
}


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-detect-update/webpack')({
      /* options */
    }),
  ],
}

This module works for Webpack >= 3


Nuxt
// nuxt.config.js
export default {
  buildModules: [
    [
      'unplugin-detect-update/nuxt',
      {
        /* options */
      },
    ],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-detect-update/webpack')({
        /* options */
      }),
    ],
  },
}


Usage

import { useDetectUpdate } from 'unplugin-detect-update/hooks'

const { start, cancel, detect, onUpdate } = useDetectUpdate({
  immediate: true,
  worker: false,
  ms: 5 * 60000,
  trigger: ['visibility', 'focus'],
})

onUpdate(val => {
  console.log('update: ', val)
})

The version will be added to the body in each html file after build, and also stored in session, key was detect-update-store

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body version="0.1.0">
    <div id="app"></div>
    ...
  </body>
</html>

Configuration

// plugin config
DetectUpdate({
  // the name of generated version record file
  fileName: 'version.json',
  // the type of generated version
  type: 'commit',
  worker: {
    // whether to generate worker file
    enable: true,
    // worker file name
    fileName: 'worker.js',
  },
  // extra data in version.json
  extra: {},
})

Types

Plugin types

/**
 * As type as version, package.json file version field or last commit id or current timestamp
 */
export type VersionType = 'package' | 'commit' | 'timestamp'

export interface WorkerOption {
  /**
   * Whether to generate worker file
   *
   * @default true
   */
  enable?: boolean
  /**
   * The name of generated worker file
   *
   * @default worker.js
   */
  fileName?: string
}

export interface Options {
  /**
   * The name of generated version record file
   *
   * @default version.json
   */
  fileName?: string
  /**
   * The type of generated version, will be set to 'package' in development mode, and set the 'version' field in package.json under the current directory to the version
   *
   * @default commit
   */
  type?: VersionType
  /**
   * Worker Options
   *
   * @default true
   */
  worker?: boolean | WorkerOption
  /**
   * extra data in version.json
   *
   * @default {}
   */
  extra?: Record<string, any>
}

UseDetectUpdate types

/**
 * Extra detect trigger type, trigger detection when window focused or visible
 */
export type Trigger = 'focus' | 'visibility'

export interface UseDetectUpdateOptions {
  /**
   * Execute the detect immediately on calling
   * @default true
   */
  immediate?: boolean
  /**
   * Whether use worker, not work in development mode
   * @default false
   */
  worker?: boolean
  /**
   * cycle time, ms
   * @default 5 * 60000
   */
  ms?: number
  /**
   * Extra detect trigger types
   * @default []
   */
  trigger?: Trigger[]
}

export interface UseDetectUpdateReturn {
  /**
   * Cancel detect on calling
   */
  cancel: () => void
  /**
   * Start detect on calling
   */
  start: () => void
  /**
   * Active trigger version detection
   */
  detect: () => void
  /**
   * Called when version changed
   */
  onUpdate: EventHookOn<any>
}

License

MIT License © 2023 Dong Xing