feat: improve icon generator, use icon*.NODE_ENV.png

cli/plasmo/src/features/extension-devtools/generate-icons.ts

@@ -2,38 +2,98 @@ import { copy, ensureDir, existsSync } from "fs-extra"
 import { resolve } from "path"
 import sharp from "sharp"
 
-import { vLog } from "@plasmo/utils"
+import { vLog, wLog } from "@plasmo/utils"
+
+import { getMd5RevHash } from "~features/helpers/crypto"
 
 import type { CommonPath } from "./common-path"
 
-export async function generateIcons(
-  { assetsDirectory, genAssetsDirectory }: CommonPath,
-  iconName = "icon512.png"
-) {
-  const image512Path = resolve(assetsDirectory, iconName)
-
-  if (existsSync(image512Path)) {
-    vLog("Make sure generated assets directory exists")
-    await ensureDir(genAssetsDirectory)
-
-    // TODO: hash check the image512 to skip this routine
-    vLog(`${iconName} found, create resized icons in gen-assets`)
-
-    const image512 = sharp(image512Path)
-    await Promise.all(
-      [128, 48, 16].map((width) => {
-        const iconFileName = `icon${width}.png`
-        const developerProvidedImagePath = resolve(
-          assetsDirectory,
-          iconFileName
-        )
+const getIconNameVariants = (size = 512 as string | number, name = "icon") => [
+  `${name}${size}`,
+  `${name}-${size}`,
+  `${name}-${size}x${size}`
+]
+
+// Prefer icon -> medium -> large icon
+const baseIconNames = [
+  "icon",
+  ...getIconNameVariants(),
+  ...getIconNameVariants(1024)
+]
+
+// We pick env based icon first, then plain icon
+const getPrioritizedIconPaths = (iconNames = baseIconNames) =>
+  iconNames
+    .map((name) => [`${name}.${process.env.NODE_ENV}.png`, `${name}.png`])
+    .flat()
+
+const iconNameList = getPrioritizedIconPaths()
 
-        const generatedIconPath = resolve(genAssetsDirectory, iconFileName)
+// Use this to cache the path resolving result
+const iconState = {
+  baseIconPaths: [] as string[],
+  baseIconHash: null as string,
+  devProvidedIcons: {} as Record<string, string[]>
+}
 
-        return existsSync(developerProvidedImagePath)
-          ? copy(developerProvidedImagePath, generatedIconPath)
-          : image512.resize({ width, height: width }).toFile(generatedIconPath)
-      })
+/**
+ * optionally handle other icon name variant too like icon-512 or icon-512x512
+ * optionally, handle larger icon such as icon-1024 or just icon
+ * optionally resolve icon512.${process.env.NODE_ENV}.png as well
+  // process.env.NODE_ENV === "development"
+ * We stick to png for now
+ */
+export async function generateIcons({
+  assetsDirectory,
+  genAssetsDirectory
+}: CommonPath) {
+  // Precalculate the base icon paths
+  if (iconState.baseIconPaths.length === 0) {
+    iconState.baseIconPaths = iconNameList.map((name) =>
+      resolve(assetsDirectory, name)
     )
   }
+
+  const baseIconPath = iconState.baseIconPaths.find(existsSync)
+
+  if (baseIconPath === undefined) {
+    wLog("No icon found in assets directory")
+    return
+  }
+
+  vLog("Make sure generated assets directory exists")
+  await ensureDir(genAssetsDirectory)
+
+  // TODO: hash check the baseIcon to skip this routine?
+  vLog(`${baseIconPath} found, create resized icons in gen-assets`)
+
+  const baseIcon = sharp(baseIconPath)
+  const baseIconHash = getMd5RevHash(await baseIcon.toBuffer())
+
+  if (iconState.baseIconHash === baseIconHash) {
+    vLog("Icon hash matched, skip icon generation")
+    return
+  }
+
+  iconState.baseIconHash = baseIconHash
+
+  await Promise.all(
+    [128, 48, 32, 16].map((width) => {
+      // Cache the dev provided icon paths for each width
+      if (iconState.devProvidedIcons[width] === undefined) {
+        const devIconPath = getPrioritizedIconPaths(getIconNameVariants(width))
+        iconState.devProvidedIcons[width] = devIconPath.map((name) =>
+          resolve(assetsDirectory, name)
+        )
+      }
+
+      const devProvidedIcon = iconState.devProvidedIcons[width].find(existsSync)
+
+      const generatedIconPath = resolve(genAssetsDirectory, `icon${width}.png`)
+
+      return devProvidedIcon !== undefined
+        ? copy(devProvidedIcon, generatedIconPath)
+        : baseIcon.resize({ width, height: width }).toFile(generatedIconPath)
+    })
+  )
 }

cli/plasmo/src/features/extension-devtools/project-watcher.ts

@@ -82,7 +82,9 @@ export const handleProjectFile = async (
       return
     }
     case WatchReason.PackageJson: {
-      iLog("package.json changed, update manifest overides")
+      iLog(
+        "package.json changed, update manifest overides. You might need to restart the dev server."
+      )
       await plasmoManifest.updatePackageData()
       return
     }

cli/plasmo/src/features/helpers/crypto.ts

@@ -0,0 +1,9 @@
+import { createHash } from "crypto"
+
+/**
+ * Fast hash for local file revving
+ * DO NOT USE FOR SENSITIVE PURPOSES
+ * md5 is good enough for file-revving: https://github.com/sindresorhus/rev-hash
+ */
+export const getMd5RevHash = (buff: Buffer) =>
+  createHash("md5").update(buff).digest("hex").slice(0, 18)

cli/plasmo/src/features/manifest-factory/base.ts

@@ -125,6 +125,7 @@ export abstract class BaseFactory<
     this.data = {}
     this.data.icons = {
       "16": "./gen-assets/icon16.png",
+      "32": "./gen-assets/icon32.png",
       "48": "./gen-assets/icon48.png",
       "128": "./gen-assets/icon128.png"
     }

cli/plasmo/src/features/manifest-factory/mv2.ts

@@ -14,6 +14,7 @@ export class PlasmoExtensionManifestMV2 extends BaseFactory<ExtensionManifestV2>
     this.data.browser_action = {
       default_icon: {
         "16": "./gen-assets/icon16.png",
+        "32": "./gen-assets/icon32.png",
         "48": "./gen-assets/icon48.png"
       }
     }

cli/plasmo/src/features/manifest-factory/mv3.ts

@@ -13,6 +13,7 @@ export class PlasmoExtensionManifestMV3 extends BaseFactory<ExtensionManifest> {
     this.data.action = {
       default_icon: {
         "16": "./gen-assets/icon16.png",
+        "32": "./gen-assets/icon32.png",
         "48": "./gen-assets/icon48.png"
       }
     }