fix!: use nuxt plugin template for pwa icons plugin (#147)

src/utils/module.ts

@@ -9,6 +9,7 @@ import type { PwaModuleOptions } from '../types'
 import { configurePWAOptions } from './config'
 import { regeneratePWA, writeWebManifest } from './utils'
 import { registerPwaIconsTypes } from './pwa-icons-types'
+import { addPWAIconsPluginTemplate } from './pwa-icons-helper'
 
 export async function doSetup(options: PwaModuleOptions, nuxt: Nuxt) {
   const resolver = createResolver(import.meta.url)
@@ -52,9 +53,7 @@ export async function doSetup(options: PwaModuleOptions, nuxt: Nuxt) {
     })
   }
 
-  addPlugin({
-    src: resolver.resolve(runtimeDir, 'plugins/pwa-icons.mjs'),
-  })
+  addPWAIconsPluginTemplate()
 
   await Promise.all([
     addComponent({

src/utils/pwa-icons-helper.ts

@@ -1,4 +1,4 @@
-import { addTypeTemplate } from '@nuxt/kit'
+import { addPluginTemplate, addTypeTemplate } from '@nuxt/kit'
 
 export interface DtsInfo {
   dts?: string
@@ -104,3 +104,54 @@ export default _default
 function generateTypes(types?: string[]) {
   return types?.length ? types.map(name => `'${name}'`).join(' | ') : 'string'
 }
+
+export function addPWAIconsPluginTemplate() {
+  addPluginTemplate({
+    filename: 'pwa-icons-plugin.ts',
+    name: 'vite-pwa:nuxt:pwa-icons-plugin',
+    write: true,
+    getContents: () => `// Generated by @vite-pwa/nuxt
+import { defineNuxtPlugin } from '#imports'
+import { pwaAssetsIcons } from 'virtual:pwa-assets/icons'
+import type { PWAAssetIcon, PWAIcons } from '#build/pwa-icons/pwa-icons'
+
+export default defineNuxtPlugin(() => {
+  const pwaIcons = {
+    transparent: {},
+    maskable: {},
+    favicon: {},
+    apple: {},
+    appleSplashScreen: {}
+  } satisfies PWAIcons
+  configureEntries(pwaIcons, 'transparent')
+  configureEntries(pwaIcons, 'maskable')
+  configureEntries(pwaIcons, 'favicon')
+  configureEntries(pwaIcons, 'apple')
+  configureEntries(pwaIcons, 'appleSplashScreen')
+  return {
+    provide: {
+      pwaIcons
+    }
+  }
+})
+
+function configureEntries(pwaIcons: PWAIcons, key: keyof PWAIcons) {
+  pwaIcons[key] = Object.values(pwaAssetsIcons[key] ?? {}).reduce((acc, icon) => {
+    const entry: PWAAssetIcon<any> = {
+      ...icon,
+      asImage: {
+        src: icon.url,
+        key: \`\${key}-\${icon.name}\`
+      }
+    }
+    if (icon.width && icon.height) {
+      entry.asImage.width = icon.width
+      entry.asImage.height = icon.height
+    }
+    acc[icon.name] = entry
+    return acc
+  }, {})
+}
+`,
+  })
+}