feat(plugin-pwa-popup): extract pwa popup plugin

packages/@vuepress/plugin-pwa-popup/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@vuepress/plugin-pwa-popup",
+  "version": "2.0.0-alpha.7",
+  "description": "VuePress plugin - PWA popup",
+  "keywords": [
+    "vuepress",
+    "plugin",
+    "pwa",
+    "popup"
+  ],
+  "homepage": "https://github.com/vuepress",
+  "bugs": {
+    "url": "https://github.com/vuepress/vuepress-next/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress/vuepress-next.git"
+  },
+  "license": "MIT",
+  "author": "meteorlxy",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "clean": "rimraf lib *.tsbuildinfo",
+    "copy": "cpx \"src/**/*.css\" lib"
+  },
+  "dependencies": {
+    "@vuepress/client": "2.0.0-alpha.7",
+    "@vuepress/core": "2.0.0-alpha.7",
+    "@vuepress/plugin-pwa": "2.0.0-alpha.7",
+    "@vuepress/shared": "2.0.0-alpha.7",
+    "@vuepress/utils": "2.0.0-alpha.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@vuepress/plugin-pwa-popup/src/components/PwaPopup.css

@@ -0,0 +1,32 @@
+:root {
+  --pwa-popup-color: #3eaf7c;
+}
+
+.pwa-popup {
+  position: fixed;
+  right: 1em;
+  bottom: 1em;
+  padding: 1em;
+  border: 1px solid #3eaf7c;
+  border-radius: 3px;
+  background: #fff;
+  box-shadow: 0 4px 16px var(--pwa-popup-color);
+  text-align: center;
+  z-index: 3;
+}
+
+.pwa-popup > button {
+  margin-top: 0.5em;
+  padding: 0.25em 2em;
+}
+
+.pwa-popup-enter-active,
+.pwa-popup-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.pwa-popup-enter-from,
+.pwa-popup-leave-to {
+  opacity: 0;
+  transform: translate(0, 50%) scale(0.5);
+}

packages/@vuepress/plugin-pwa-popup/src/components/PwaPopup.ts

@@ -0,0 +1,89 @@
+import { computed, defineComponent, h, ref, Transition } from 'vue'
+import type { PropType } from 'vue'
+import { useRouteLocale } from '@vuepress/client'
+import {
+  usePwaEvent,
+  useSkipWaiting,
+} from '@vuepress/plugin-pwa/lib/composables'
+import type { LocaleConfig } from '@vuepress/shared'
+
+import './PwaPopup.css'
+
+export type PwaPopupLocales = LocaleConfig<{
+  message: string
+  buttonText: string
+}>
+
+export const PwaPopup = defineComponent({
+  name: 'PwaPopup',
+
+  props: {
+    locales: {
+      type: Object as PropType<PwaPopupLocales>,
+      required: true,
+      default: () => ({}),
+    },
+  },
+
+  setup(props) {
+    const event = usePwaEvent()
+    const routeLocale = useRouteLocale()
+
+    const locale = computed(
+      () =>
+        props.locales[routeLocale.value] ?? {
+          message: 'New content is available.',
+          buttonText: 'Refresh',
+        }
+    )
+
+    const show = ref(false)
+    const registration = ref<ServiceWorkerRegistration | null>(null)
+    const onClick = () => {
+      show.value = false
+      if (registration.value) {
+        useSkipWaiting(registration.value)
+        location.reload(true)
+      }
+    }
+
+    event.on('updated', (reg) => {
+      if (reg) {
+        registration.value = reg
+        show.value = true
+      }
+    })
+
+    return () =>
+      h(
+        Transition,
+        {
+          name: 'pwa-popup',
+        },
+        {
+          default: () =>
+            show.value
+              ? h(
+                  'div',
+                  {
+                    class: 'pwa-popup',
+                  },
+                  [
+                    locale.value.message,
+                    h('br'),
+                    h(
+                      'button',
+                      {
+                        onClick,
+                      },
+                      locale.value.buttonText
+                    ),
+                  ]
+                )
+              : null,
+        }
+      )
+  },
+})
+
+export default PwaPopup

packages/@vuepress/plugin-pwa-popup/src/components/PwaPopupWrapper.ts

@@ -0,0 +1,22 @@
+import { h } from 'vue'
+import type { FunctionalComponent } from 'vue'
+import { PwaPopup } from './PwaPopup'
+import type { PwaPopupLocales } from './PwaPopup'
+
+declare const __DEV__: boolean
+declare const __SSR__: boolean
+declare const __PWA_POPUP_LOCALES__: PwaPopupLocales
+
+const locales = __PWA_POPUP_LOCALES__
+
+export const PwaPopupWrapper: FunctionalComponent = () => {
+  if (__DEV__ || __SSR__) return null
+
+  return h(PwaPopup, {
+    locales,
+  })
+}
+
+PwaPopupWrapper.displayName = 'PwaPopupWrapper'
+
+export default PwaPopupWrapper

packages/@vuepress/plugin-pwa-popup/src/index.ts

@@ -0,0 +1,28 @@
+import type { Plugin } from '@vuepress/core'
+import type { LocaleConfig } from '@vuepress/shared'
+import { path } from '@vuepress/utils'
+
+/**
+ * Options for @vuepress/plugin-pwa-popup
+ */
+export interface PwaPopupPluginOptions {
+  locales?: LocaleConfig<{
+    message: string
+    buttonText: string
+  }>
+}
+
+export const pwaPopupPlugin: Plugin<PwaPopupPluginOptions> = ({ locales }) => ({
+  name: '@vuepress/plugin-pwa-popup',
+
+  clientAppRootComponentFiles: path.resolve(
+    __dirname,
+    './components/PwaPopupWrapper.js'
+  ),
+
+  define: {
+    __PWA_POPUP_LOCALES__: locales,
+  },
+})
+
+export default pwaPopupPlugin

packages/@vuepress/plugin-pwa-popup/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "references": [
+    { "path": "../client/tsconfig.build.json" },
+    { "path": "../core/tsconfig.build.json" },
+    { "path": "../plugin-pwa/tsconfig.build.json" },
+    { "path": "../shared/tsconfig.build.json" },
+    { "path": "../utils/tsconfig.build.json" },
+    { "path": "./tsconfig.esm.json" },
+    { "path": "./tsconfig.cjs.json" }
+  ],
+  "files": []
+}

packages/@vuepress/plugin-pwa-popup/tsconfig.cjs.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src/index.ts"]
+}

packages/@vuepress/plugin-pwa-popup/tsconfig.esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2020",
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src"],
+  "exclude": ["./src/index.ts"]
+}

packages/@vuepress/plugin-pwa-popup/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["./src", "./__tests__"]
+}

tsconfig.json

@@ -23,6 +23,7 @@
       "path": "./packages/@vuepress/plugin-palette-stylus/tsconfig.build.json"
     },
     { "path": "./packages/@vuepress/plugin-pwa/tsconfig.build.json" },
+    { "path": "./packages/@vuepress/plugin-pwa-popup/tsconfig.build.json" },
     { "path": "./packages/@vuepress/shared/tsconfig.build.json" },
     { "path": "./packages/@vuepress/theme-default/tsconfig.build.json" },
     { "path": "./packages/@vuepress/theme-vue/tsconfig.build.json" },