feat: --tag parameter #196 (#282)

* --tag implementation

* revert utils

* use app-specific flag map

* remove unused import

Co-authored-by: Louis <[email protected]>

cli/plasmo/src/commands/dev.ts

@@ -63,7 +63,7 @@ async function dev() {
     }
 
     if (event.type === "buildSuccess") {
-      iLog(`✨ Extension reloaded in ${event.buildTime}ms!`)
+      aLog(`✨ Extension re-packaged in ${event.buildTime}ms!`)
       await plasmoManifest.postBuild()
     } else if (event.type === "buildFailure") {
       event.diagnostics.forEach((diagnostic) => {

cli/plasmo/src/features/extension-devtools/common-path.ts

@@ -2,40 +2,28 @@ import { existsSync } from "fs"
 import { basename, resolve } from "path"
 import { cwd } from "process"
 
-import { getFlag } from "@plasmo/utils"
+import { flagMap } from "~features/helpers/flag"
 
-import { getBundleConfig } from "./get-bundle-config"
-
-export const getCommonPath = (
-  projectDirectory = cwd(),
-  { target } = getBundleConfig()
-) => {
+export const getCommonPath = (projectDirectory = cwd()) => {
   process.env.PLASMO_PROJECT_DIR = projectDirectory
 
   const packageName = basename(projectDirectory)
 
-  process.env.PLASMO_SRC_PATH =
-    getFlag("--src-path") || process.env.PLASMO_SRC_PATH || "src"
+  process.env.PLASMO_SRC_PATH = flagMap.srcPath
 
-  const srcDirectory = resolve(projectDirectory, process.env.PLASMO_SRC_PATH)
+  const srcDirectory = resolve(projectDirectory, flagMap.srcPath)
 
   process.env.PLASMO_SRC_DIR = existsSync(srcDirectory)
     ? srcDirectory
     : projectDirectory
 
-  process.env.PLASMO_BUILD_PATH =
-    getFlag("--build-path") || process.env.PLASMO_BUILD_PATH || "build"
+  process.env.PLASMO_BUILD_PATH = flagMap.buildPath
 
-  const buildDirectory = resolve(
-    projectDirectory,
-    process.env.PLASMO_BUILD_PATH
-  )
+  const buildDirectory = resolve(projectDirectory, flagMap.buildPath)
 
   process.env.PLASMO_BUILD_DIR = buildDirectory
 
-  const distDirectoryName = `${target}-${
-    process.env.NODE_ENV === "production" ? "prod" : "dev"
-  }`
+  const distDirectoryName = `${flagMap.target}-${flagMap.tag}`
 
   const distDirectory = resolve(buildDirectory, distDirectoryName)
 
@@ -65,7 +53,7 @@ export const getCommonPath = (
     genAssetsDirectory: resolve(dotPlasmoDirectory, "gen-assets"),
     entryManifestPath: resolve(
       dotPlasmoDirectory,
-      `${target}.plasmo.manifest.json`
+      `${flagMap.target}.plasmo.manifest.json`
     )
   }
 }

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

@@ -4,6 +4,8 @@ import sharp from "sharp"
 
 import { vLog, wLog } from "@plasmo/utils"
 
+import { flagMap } from "~features/helpers/flag"
+
 import type { CommonPath } from "./common-path"
 
 const getIconNameVariants = (size = 512 as string | number, name = "icon") => [
@@ -19,10 +21,21 @@ const baseIconNames = [
   ...getIconNameVariants(1024)
 ]
 
-// We pick env based icon first, then plain icon
+/**
+ * We pick icon in this order
+ * 1. tag based icon
+ * 2. env and tag based icon
+ * 3. plain icon
+ *
+ * */
 const getPrioritizedIconPaths = (iconNames = baseIconNames) =>
   iconNames
-    .map((name) => [`${name}.${process.env.NODE_ENV}.png`, `${name}.png`])
+    .map((name) => [
+      `${name}.${flagMap.tag}.${process.env.NODE_ENV}.png`,
+      `${name}.${process.env.NODE_ENV}.png`,
+      `${name}.${flagMap.tag}.png`,
+      `${name}.png`
+    ])
     .flat()
 
 // Use this to cache the path resolving result
@@ -73,7 +86,6 @@ export async function generateIcons({
       }
 
       const devProvidedIcon = iconState.devProvidedIcons[width].find(existsSync)
-
       const generatedIconPath = resolve(
         genAssetsDirectory,
         `icon${width}.plasmo.png`

cli/plasmo/src/features/extension-devtools/get-bundle-config.ts

@@ -1,13 +1,14 @@
-import { paramCase } from "change-case"
-
-import { getFlag } from "@plasmo/utils"
+import { flagMap } from "~features/helpers/flag"
 
 export const getBundleConfig = () => {
-  const target = paramCase(getFlag("--target") || "chrome-mv3")
+  const target = flagMap.target
 
   const [browser, manifestVersion] = target.split("-")
 
+  const tag = flagMap.tag
+
   return {
+    tag,
     target,
     browser,
     manifestVersion

cli/plasmo/src/features/extension-devtools/load-env-config.ts

@@ -8,6 +8,8 @@ import { join } from "path"
 
 import { eLog, iLog } from "@plasmo/utils"
 
+import { flagMap } from "~features/helpers/flag"
+
 export type Env = Record<string, string | undefined>
 export type LoadedEnvFiles = Array<{
   path: string
@@ -73,11 +75,13 @@ function processEnv(loadedEnvFiles: LoadedEnvFiles, dir?: string) {
 export async function loadEnvConfig(dir: string) {
   const mode = process.env.NODE_ENV
   const dotenvFilePaths = [
+    `.env.${flagMap.tag}.local`,
     `.env.${mode}.local`,
     // Don't include `.env.local` for `test` environment
     // since normally you expect tests to produce the same
     // results for everyone
     mode !== "test" ? `.env.local` : "",
+    `.env.${flagMap.tag}`,
     `.env.${mode}`,
     ".env"
   ]

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

@@ -0,0 +1,45 @@
+import { paramCase } from "change-case"
+
+import { flagsHelp as baseFlagHelp, getFlag } from "@plasmo/utils"
+
+const srcPath = getFlag("--src-path") || process.env.PLASMO_SRC_PATH || "src"
+
+const buildPath =
+  getFlag("--build-path") || process.env.PLASMO_BUILD_PATH || "build"
+
+const tag =
+  getFlag("--tag") ||
+  process.env.PLASMO_TAG ||
+  process.env.NODE_ENV === "production"
+    ? "prod"
+    : "dev"
+
+const target = paramCase(
+  getFlag("--target") || process.env.PLASMO_TARGET || "chrome-mv3"
+)
+
+const entry = getFlag("--entry") || "popup"
+
+export const flagMap = {
+  tag,
+  srcPath,
+  buildPath,
+  target,
+  entry
+}
+
+export const flagHelp = `
+    
+    init
+
+      --entry                     entry files (default: popup)
+      --with-<name>               use an example template
+
+    dev/build     
+
+      --target [string]           set the target (default: chrome-mv3)
+      --tag [string]              set the build tag (default: dev or prod depending on NODE_ENV)
+      --src-path [path]           set the source path relative to project root (default: src)
+      --build-path [path]         set the build path relative to project root (default: build)
+      --entry                     entry point name (default: popup)
+`

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

@@ -1,11 +1,16 @@
 import { cLog } from "@plasmo/utils"
 
 import { validCommandList } from "~commands"
+import { flagHelp } from "~features/helpers/flag"
 
 export const printHeader = () => {
   console.log(`🟣 Plasmo v${process.env.APP_VERSION}`)
 
-  console.log("🟠 The browser extension development framework.")
+  console.log("🔴 The Browser Extension Framework")
 }
 
-export const printHelp = () => cLog("🟡 MODES", validCommandList.join(" | "))
+export const printHelp = () => {
+  cLog("🟠 CMDS", validCommandList.join(" | "))
+
+  cLog("🟡 OPTS", flagHelp)
+}

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

@@ -69,25 +69,21 @@ export const iconMap = {
 export const autoPermissionList: ManifestPermission[] = ["storage"]
 
 export abstract class BaseFactory<T extends ExtensionManifest = any> {
-  #bundleConfig: PlasmoBundleConfig
   get browser() {
-    return this.#bundleConfig.browser
+    return this.bundleConfig.browser
   }
 
   #commonPath?: CommonPath
-  public get commonPath(): CommonPath {
+  public get commonPath() {
     return assertTruthy(this.#commonPath)
   }
 
   #projectPath?: ProjectPath
-  public get projectPath(): ProjectPath {
+  public get projectPath() {
     return assertTruthy(this.#projectPath)
   }
 
-  #templatePath: TemplatePath
-  public get templatePath(): TemplatePath {
-    return this.#templatePath
-  }
+  readonly templatePath = getTemplatePath()
 
   #envConfig?: EnvConfig
 
@@ -135,10 +131,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
   protected copyQueue: Array<[string, string]> = []
 
-  #scaffolder: Scaffolder
-  get scaffolder() {
-    return this.#scaffolder
-  }
+  readonly scaffolder = new Scaffolder(this)
 
   get changed() {
     return this.#hash !== this.#prevHash
@@ -164,11 +157,8 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     return resolve(this.templatePath.staticTemplatePath, this.uiLibrary.path)
   }
 
-  protected constructor(bundleConfig: PlasmoBundleConfig) {
+  protected constructor(private bundleConfig: PlasmoBundleConfig) {
     this.data.icons = iconMap
-    this.#bundleConfig = bundleConfig
-    this.#templatePath = getTemplatePath()
-    this.#scaffolder = new Scaffolder(this)
   }
 
   async startup() {
@@ -188,7 +178,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
   async updateEnv(envRootDirectory = this.commonPath.projectDirectory) {
     this.#envConfig = await loadEnvConfig(envRootDirectory)
-    this.#commonPath = getCommonPath(envRootDirectory, this.#bundleConfig)
+    this.#commonPath = getCommonPath(envRootDirectory)
   }
 
   // https://github.com/PlasmoHQ/plasmo/issues/195
@@ -328,7 +318,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
         const parsedModulePath = parse(modulePath)
         scriptPath = relative(
           this.commonPath.dotPlasmoDirectory,
-          await this.#scaffolder.createContentScriptMount(parsedModulePath)
+          await this.scaffolder.createContentScriptMount(parsedModulePath)
         )
       }
 
@@ -391,7 +381,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
       const parsedModulePath = parse(modulePath)
 
-      await this.#scaffolder.createPageMount(parsedModulePath)
+      await this.scaffolder.createPageMount(parsedModulePath)
     }
 
     this.#hash = ""