feat: add configurable dev-dist folder and buildBase option (#461)

* feat: add configurable `dev-dist` folder and `buildBase` option

* chore: update `buildBase` type jsdoc

* chore: .

Author: userquin

info.d.ts

@@ -2,15 +2,15 @@ declare module 'virtual:pwa-info' {
     export interface PwaInfo {
         pwaInDevEnvironment: boolean
         /**
-         * The webmanifest will be always here.
+         * The web manifest will be always here.
          */
         webManifest: {
             href: string
             useCredentials: boolean
             /**
              * The link tag with or without `crossorigin`:
              * - `<link rel="manifest" href="<webManifestUrl>" />`.
-             * - `<link rel="manifest" href="<webManifestUrl>" crossorigin=use-credentials" />`.
+             * - `<link rel="manifest" href="<webManifestUrl>" crossorigin="use-credentials" />`.
              */
             linkTag: string
         }

src/api.ts

@@ -29,6 +29,7 @@ export function _generateBundle({ options, viteConfig, useImportRegister }: PWAP
 
   if (options.manifest) {
     bundle[options.manifestFilename] = {
+      // @ts-expect-error: for Vite 3 support, Vite 4 has removed `isAsset` property
       isAsset: true,
       type: 'asset',
       name: undefined,
@@ -43,6 +44,7 @@ export function _generateBundle({ options, viteConfig, useImportRegister }: PWAP
 
   if (options.injectRegister === 'script' && !existsSync(resolve(viteConfig.publicDir, FILE_SW_REGISTER))) {
     bundle[FILE_SW_REGISTER] = {
+      // @ts-expect-error: for Vite 3 support, Vite 4 has removed `isAsset` property
       isAsset: true,
       type: 'asset',
       name: undefined,
@@ -77,7 +79,7 @@ export function createAPI(ctx: PWAPluginContext): VitePluginPWAAPI {
       }
 
       return {
-        href: `${options.base}${url}`,
+        href: `${ctx.devEnvironment ? options.base : options.buildBase}${url}`,
         useCredentials: ctx.options.useCredentials,
         toLinkTag() {
           return manifest
@@ -109,13 +111,15 @@ export function createAPI(ctx: PWAPluginContext): VitePluginPWAAPI {
         script = generateRegisterSW(options, false)
       }
 
+      const base = ctx.devEnvironment ? options.base : options.buildBase
+
       return {
         // hint when required
         shouldRegisterSW,
         inline: options.injectRegister === 'inline',
         scope: options.scope,
-        inlinePath: `${options.base}${ctx.devEnvironment ? DEV_SW_NAME : options.filename}`,
-        registerPath: `${options.base}${FILE_SW_REGISTER}`,
+        inlinePath: `${base}${ctx.devEnvironment ? DEV_SW_NAME : options.filename}`,
+        registerPath: `${base}${FILE_SW_REGISTER}`,
         type,
         toScriptTag() {
           return script

src/html.ts

@@ -8,7 +8,7 @@ import {
 import type { ResolvedVitePWAOptions } from './types'
 
 export function generateSimpleSWRegister(options: ResolvedVitePWAOptions, dev: boolean) {
-  const path = dev ? `${options.base}${DEV_SW_NAME}` : `${options.base}${options.filename}`
+  const path = dev ? `${options.base}${DEV_SW_NAME}` : `${options.buildBase}${options.filename}`
 
   // we are using HMR to load this script: DO NOT ADD window::load event listener
   if (dev) {
@@ -50,15 +50,15 @@ export function generateWebManifest(options: ResolvedVitePWAOptions, dev: boolea
     return options.manifest ? `<link rel="manifest" href="${name}"${crossorigin}>` : ''
   }
   else {
-    return options.manifest ? `<link rel="manifest" href="${options.base}${options.manifestFilename}"${crossorigin}>` : ''
+    return options.manifest ? `<link rel="manifest" href="${options.buildBase}${options.manifestFilename}"${crossorigin}>` : ''
   }
 }
 
 export function generateRegisterSW(options: ResolvedVitePWAOptions, dev: boolean) {
   if (options.injectRegister === 'inline')
     return `<script id="vite-plugin-pwa:inline-sw">${generateSimpleSWRegister(options, dev)}</script>`
   else if (options.injectRegister === 'script')
-    return `<script id="vite-plugin-pwa:register-sw" src="${options.base}${FILE_SW_REGISTER}"></script>`
+    return `<script id="vite-plugin-pwa:register-sw" src="${dev ? options.base : options.buildBase}${FILE_SW_REGISTER}"></script>`
 
   return undefined
 }

src/options.ts

@@ -4,7 +4,7 @@ import type { ResolvedConfig } from 'vite'
 import type { GenerateSWOptions, InjectManifestOptions } from 'workbox-build'
 import type { ManifestOptions, ResolvedVitePWAOptions, VitePWAOptions } from './types'
 import { configureStaticAssets } from './assets'
-import { resolveBathPath } from './utils'
+import { resolveBasePath } from './utils'
 import { defaultInjectManifestVitePlugins } from './constants'
 
 function resolveSwPaths(injectManifest: boolean, root: string, srcDir: string, outDir: string, filename: string): {
@@ -57,9 +57,10 @@ export async function resolveOptions(options: Partial<VitePWAOptions>, viteConfi
     devOptions = { enabled: false, type: 'classic' },
     selfDestroying = false,
     integration = {},
+    buildBase,
   } = options
 
-  const basePath = resolveBathPath(base)
+  const basePath = resolveBasePath(base)
   // check typescript service worker for injectManifest strategy
   const { swSrc, swDest, useFilename } = resolveSwPaths(
     strategies === 'injectManifest',
@@ -157,6 +158,7 @@ export async function resolveOptions(options: Partial<VitePWAOptions>, viteConfi
     rollupFormat,
     vitePlugins,
     selfDestroying,
+    buildBase: buildBase ?? basePath,
   }
 
   await configureStaticAssets(resolvedVitePWAOptions, viteConfig)

src/plugins/dev.ts

@@ -114,9 +114,9 @@ export function DevPlugin(ctx: PWAPluginContext): Plugin {
           return undefined
         }
         if (id.endsWith(swDevOptions.swUrl)) {
-          const globDirectory = resolve(viteConfig.root, 'dev-dist')
+          const globDirectory = await resolveDevDistFolder(options, viteConfig)
           if (!existsSync(globDirectory))
-            mkdirSync(globDirectory)
+            mkdirSync(globDirectory, { recursive: true })
 
           const swDest = resolve(globDirectory, 'sw.js')
           if (!swDevOptions.swDevGenerated || !existsSync(swDest)) {
@@ -155,7 +155,7 @@ export function DevPlugin(ctx: PWAPluginContext): Plugin {
           }
           return await fs.readFile(swDest, 'utf-8')
         }
-        
+
         const key = normalizePath(`${options.base}${id.startsWith('/') ? id.slice(1) : id}`)
 
         if (swDevOptions.workboxPaths.has(key))
@@ -165,9 +165,15 @@ export function DevPlugin(ctx: PWAPluginContext): Plugin {
   }
 }
 
+async function resolveDevDistFolder(options: ResolvedVitePWAOptions, viteConfig: ResolvedConfig) {
+  return options.devOptions.resolveTempFolder
+    ? await options.devOptions.resolveTempFolder()
+    : resolve(viteConfig.root, 'dev-dist')
+}
+
 async function createDevRegisterSW(options: ResolvedVitePWAOptions, viteConfig: ResolvedConfig) {
   if (options.injectRegister === 'script') {
-    const devDist = resolve(viteConfig.root, 'dev-dist')
+    const devDist = await resolveDevDistFolder(options, viteConfig)
     if (!existsSync(devDist))
       mkdirSync(devDist)
 

src/types.ts

@@ -155,6 +155,18 @@ export interface VitePWAOptions {
    * @default false
    */
   selfDestroying?: boolean
+  /**
+   * When Vite's build folder is not the same as your base root folder, configure it here.
+   *
+   * This option will be useful for integrations like `vite-plugin-laravel` where Vite's build folder is `public/build` but Laravel's base path is `public`.
+   *
+   * This option will be used to configure the path for the `service worker`, `registerSW.js` and the web manifest assets.
+   *
+   * For example, if your base path is `/`, then, in your Laravel PWA configuration use `buildPath: '/build/'`.
+   *
+   * By default: `vite.base`.
+   */
+  buildBase?: string
 }
 
 export interface ResolvedVitePWAOptions extends Required<VitePWAOptions> {
@@ -426,4 +438,10 @@ export interface DevOptions {
    * @see navigateFallbackAllowlist
    */
   webManifestUrl?: string
+  /**
+   * Where to store generated service worker in development when using `generateSW` strategy.
+   *
+   * Use it with caution, it should be used only by framework integrations.
+   */
+  resolveTempFolder?: () => string | Promise<string>
 }

src/utils.ts

@@ -2,7 +2,7 @@ export function slash(str: string) {
   return str.replace(/\\/g, '/')
 }
 
-export function resolveBathPath(base: string) {
+export function resolveBasePath(base: string) {
   if (isAbsolute(base))
     return base
   return !base.startsWith('/') && !base.startsWith('./')