unplugin-detect-update
Detect web app version update for Vite, Webpack and Rollup. Powered by unplugin.
Install
npm i unplugin-detect-update -DVite
// 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>
}