feat: Make UI library optional

cli/create-plasmo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmo",
-  "version": "0.54.5",
+  "version": "0.55.0-alpha.0",
   "description": "Create Plasmo Framework Browser Extension",
   "main": "dist/index.js",
   "bin": "dist/index.js",

cli/plasmo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plasmo",
-  "version": "0.54.5",
+  "version": "0.55.0-alpha.0",
   "description": "The Plasmo Platform CLI",
   "main": "dist/index.js",
   "types": "dist/type.d.ts",

cli/plasmo/src/commands/dev.ts

@@ -66,6 +66,10 @@ async function dev() {
       throw err
     }
 
+    if (event === undefined) {
+      return
+    }
+
     if (event.type === "buildSuccess") {
       iLog(`✨ Extension reloaded in ${event.buildTime}ms!`)
       await plasmoManifest.postBuild()

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

@@ -28,7 +28,6 @@ const getPrioritizedIconPaths = (iconNames = baseIconNames) =>
 // Use this to cache the path resolving result
 const iconState = {
   baseIconPaths: [] as string[],
-  baseIconHash: null as string,
   devProvidedIcons: {} as Record<string, string[]>
 }
 

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

@@ -8,7 +8,7 @@ import { join } from "path"
 
 import { eLog, iLog } from "@plasmo/utils"
 
-export type Env = Record<string, string>
+export type Env = Record<string, string | undefined>
 export type LoadedEnvFiles = Array<{
   path: string
   contents: string
@@ -27,7 +27,7 @@ export class PlasmoPublicEnv {
         },
         {
           NODE_ENV: process.env.NODE_ENV
-        }
+        } as Env
       )
   }
 
@@ -72,31 +72,31 @@ export async function loadEnvConfig(dir: string) {
     // Don't include `.env.local` for `test` environment
     // since normally you expect tests to produce the same
     // results for everyone
-    mode !== "test" && `.env.local`,
+    mode !== "test" ? `.env.local` : "",
     `.env.${mode}`,
     ".env"
   ]
-    .filter(Boolean)
+    .filter((s) => !!s)
     .map((envFile) => [envFile, join(dir, envFile)])
     .filter(
       ([, filePath]) => existsSync(filePath) && statSync(filePath).isFile()
     )
 
-  const envFiles = await Promise.all(
-    dotenvFilePaths.map(async ([envFile, filePath]) => {
-      try {
-        const contents = await readFile(filePath, "utf8")
-        return {
-          path: envFile,
-          contents
-        }
-      } catch (err: any) {
-        if (err.code !== "ENOENT") {
-          eLog(`Failed to load env from ${envFile}`, err)
-        }
+  const envFiles: LoadedEnvFiles = []
+
+  for await (const [envFile, filePath] of dotenvFilePaths) {
+    try {
+      const contents = await readFile(filePath, "utf8")
+      envFiles.push({
+        path: envFile,
+        contents
+      })
+    } catch (err: any) {
+      if (err.code !== "ENOENT") {
+        eLog(`Failed to load env from ${envFile}`, err)
       }
-    })
-  )
+    }
+  }
 
   const combinedEnv = processEnv(envFiles, dir)
 

cli/plasmo/src/features/extension-devtools/package-file.ts

@@ -1,6 +1,6 @@
 import { sentenceCase } from "change-case"
 import { userInfo } from "os"
-import getPackageJson from "package-json"
+import getPackageJson, { AbbreviatedVersion } from "package-json"
 
 import type { ExtensionManifestV3 } from "@plasmo/constants"
 
@@ -9,7 +9,7 @@ import type { PackageManagerInfo } from "~features/helpers/package-manager"
 export const generatePackage = ({
   name = "plasmo-extension",
   version = "0.0.0",
-  packageManager = null as PackageManagerInfo
+  packageManager = {} as PackageManagerInfo
 }) => {
   const baseData = {
     name,
@@ -18,7 +18,7 @@ export const generatePackage = ({
     description: "A basic Plasmo extension.",
     author: userInfo().username,
 
-    packageManager: "",
+    packageManager: undefined as string | undefined,
     scripts: {
       dev: "plasmo dev",
       build: "plasmo build"
@@ -60,14 +60,16 @@ export type PackageJSON = ReturnType<typeof generatePackage> & {
 export const resolveWorkspaceToLatestSemver = async (
   dependencies: Record<string, string>
 ) => {
-  const output = {}
+  const output = {} as Record<string, string>
 
   await Promise.all(
     Object.entries(dependencies).map(async ([key, value]) => {
       if (key === "plasmo") {
-        output[key] = process.env.APP_VERSION
+        output[key] = process.env.APP_VERSION as string
       } else if (value === "workspace:*") {
-        const remotePackageData = await getPackageJson(key)
+        const remotePackageData = (await getPackageJson(key, {
+          version: "latest"
+        })) as unknown as AbbreviatedVersion
         output[key] = remotePackageData.version
       } else {
         output[key] = value

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

@@ -34,12 +34,12 @@ const getWatchReasonMap = (paths: string[], reason: WatchReason) =>
   paths.reduce((output, path) => {
     output[path] = reason
     return output
-  }, {}) as Record<string, WatchReason>
+  }, {} as Record<string, WatchReason>)
 
 export const getProjectPath = (
   { sourceDirectory, packageFilePath, assetsDirectory }: CommonPath,
-  uiExt: SupportedUIExt,
-  browserTarget: string
+  browserTarget: string,
+  uiExt: SupportedUIExt
 ) => {
   const getIndexList = (moduleName: string, ext = ".ts") => [
     resolve(sourceDirectory, `${moduleName}.${browserTarget}${ext}`),
@@ -75,6 +75,8 @@ export const getProjectPath = (
   const backgroundIndexList = getIndexList("background")
 
   const watchPathReasonMap = {
+    [packageFilePath]: WatchReason.PackageJson,
+
     ...getWatchReasonMap(envFileList, WatchReason.EnvFile),
     ...getWatchReasonMap(contentIndexList, WatchReason.ContentsIndex),
     ...getWatchReasonMap(backgroundIndexList, WatchReason.BackgroundIndex),
@@ -87,9 +89,7 @@ export const getProjectPath = (
     ...getWatchReasonMap(popupHtmlList, WatchReason.PopupHtml),
     ...getWatchReasonMap(optionsHtmlList, WatchReason.OptionsHtml),
     ...getWatchReasonMap(devtoolsHtmlList, WatchReason.DevtoolsHtml),
-    ...getWatchReasonMap(newtabHtmlList, WatchReason.NewtabHtml),
-
-    [packageFilePath]: WatchReason.PackageJson
+    ...getWatchReasonMap(newtabHtmlList, WatchReason.NewtabHtml)
   }
 
   const contentsDirectory = resolve(sourceDirectory, "contents")

cli/plasmo/src/features/extra/next-new-tab.ts

@@ -9,7 +9,7 @@ import type { CommonPath } from "~features/extension-devtools/common-path"
 import type { PackageJSON } from "~features/extension-devtools/package-file"
 import { stripUnderscore } from "~features/extension-devtools/strip-underscore"
 
-export const generateNewTabManifest = (packageData = null as PackageJSON) => ({
+export const generateNewTabManifest = (packageData: PackageJSON) => ({
   name: sentenceCase(packageData.name),
   description: packageData.description,
   version: packageData.version,

cli/plasmo/src/features/helpers/package-manager.ts

@@ -13,7 +13,7 @@ export type PackageManagerInfo = {
 
 async function getPMInfo(name: PackageManager): Promise<PackageManagerInfo> {
   const data = await spawnAsync(name, ["--version"])
-  const version = semver.valid(data.stdout.trim())
+  const version = semver.valid(data.stdout.trim()) || undefined
   return { name, version }
 }
 

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

@@ -12,13 +12,13 @@ const defaultTransformer = (target: any) =>
 export const definedTraverse = (
   target: any,
   transformer = defaultTransformer
-) => {
+): any => {
   if (Array.isArray(target)) {
     return target
       .map((item) => definedTraverse(item, transformer))
       .filter((i) => typeof i !== "undefined")
   } else if (typeof target === "object") {
-    const result = {}
+    const result = {} as any
 
     for (const key in target) {
       if (target.hasOwnProperty(key)) {

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

@@ -19,7 +19,7 @@ import type {
   ManifestContentScript,
   ManifestPermission
 } from "@plasmo/constants"
-import { vLog } from "@plasmo/utils"
+import { assertUnreachable, vLog } from "@plasmo/utils"
 
 import type { CommonPath } from "~features/extension-devtools/common-path"
 import { extractContentScriptMetadata } from "~features/extension-devtools/content-script"
@@ -58,7 +58,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     return this.#browser
   }
 
-  envConfig: EnvConfig
+  envConfig!: EnvConfig
   public get publicEnv() {
     return this.envConfig.plasmoPublicEnv
   }
@@ -68,7 +68,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     return this.#commonPath
   }
 
-  #projectPath: ProjectPath
+  #projectPath!: ProjectPath
   public get projectPath(): ProjectPath {
     return this.#projectPath
   }
@@ -78,18 +78,18 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     return this.#templatePath
   }
 
-  #uiExt: SupportedUIExt
+  #uiExt: SupportedUIExt = ".ts"
   #extSet = new Set([".ts"])
 
   #hasher = createHasher({ trim: true, sort: true })
 
-  #hash: string
-  #prevHash: string
+  #hash = ""
+  #prevHash = ""
 
   protected data: Partial<T>
   protected overideManifest: Partial<T> = {}
 
-  protected packageData: PackageJSON
+  protected packageData!: PackageJSON
   protected contentScriptMap: Map<string, ManifestContentScript> = new Map()
 
   protected copyQueue: Array<[string, string]> = []
@@ -115,13 +115,13 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     return this.packageData.devDependencies
   }
 
-  #cachedUILibrary: UILibrary
+  #cachedUILibrary?: UILibrary
   get uiLibrary() {
     return this.#cachedUILibrary
   }
 
   get staticScaffoldPath() {
-    return resolve(this.templatePath.staticTemplatePath, this.uiLibrary.path)
+    return resolve(this.templatePath.staticTemplatePath, this.uiLibrary!.path)
   }
 
   protected constructor(commonPath: CommonPath, browser: string) {
@@ -143,6 +143,9 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
 
   async updatePackageData() {
     this.packageData = await readJson(this.commonPath.packageFilePath)
+    if (!this.packageData) {
+      throw new Error("Invalid package.json")
+    }
 
     this.data.version = this.packageData.version
     this.data.author = this.packageData.author
@@ -156,7 +159,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     }
 
     this.data.permissions = autoPermissionList.filter(
-      (p) => `@plasmohq/${p}` in this.packageData.dependencies
+      (p) => `@plasmohq/${p}` in (this.packageData?.dependencies || {})
     )
 
     if (this.data.permissions.length === 0) {
@@ -181,22 +184,28 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
         this.#scaffolder.mountExt = ".ts"
         break
       case "react":
-      default:
         this.#uiExt = ".tsx"
         this.#scaffolder.mountExt = ".tsx"
         break
+      case "vanilla":
+        this.#uiExt = ".ts"
+        this.#scaffolder.mountExt = ".ts"
+        break
+      default:
+        assertUnreachable(this.#cachedUILibrary.name)
     }
 
     this.#extSet.add(this.#uiExt)
+
     this.#projectPath = getProjectPath(
       this.commonPath,
-      this.#uiExt,
-      this.#browser
+      this.#browser,
+      this.#uiExt
     )
   }
 
   abstract togglePopup: (enable?: boolean) => this
-  abstract toggleBackground: (path: string, enable?: boolean) => boolean
+  abstract toggleBackground: (path?: string, enable?: boolean) => boolean
 
   toggleOptions = (enable = false) => {
     if (enable) {
@@ -236,7 +245,7 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
     return this
   }
 
-  toggleContentScript = async (path: string, enable = false) => {
+  toggleContentScript = async (path?: string, enable = false) => {
     if (path === undefined) {
       return false
     }
@@ -271,7 +280,10 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
         path
       )
 
-      if (extname(manifestScriptPath) === this.#uiExt) {
+      if (
+        this.uiLibrary?.name !== "vanilla" &&
+        extname(manifestScriptPath) === this.#uiExt
+      ) {
         // copy the contents and change the manifest path
         const modulePath = join("lab", manifestScriptPath).replace(
           /(^src)[\\/]/,
@@ -283,8 +295,6 @@ export abstract class BaseFactory<T extends ExtensionManifest = any> {
           this.commonPath.dotPlasmoDirectory,
           await this.#scaffolder.createContentScriptMount(parsedModulePath)
         )
-
-        // vLog(manifestScriptPath)
       }
 
       // Resolve css file paths