feat: cs config reload (#634)

* feat: improve CSUI overlay repositioning

* feat: add cs reload on config change

* keep backend code from frontend runtime

* chore: default minifier to es2016 for backward compat

* fix build broadcast

cli/plasmo/package.json

@@ -67,10 +67,10 @@
     "semver": "7.5.1",
     "sharp": "0.32.1",
     "tempy": "3.0.0",
-    "typescript": "5.1.3",
-    "ws": "8.13.0"
+    "typescript": "5.1.3"
   },
   "devDependencies": {
+    "@plasmo/framework-shared": "workspace:*",
     "@plasmo/config": "workspace:*",
     "@plasmo/constants": "workspace:*",
     "@plasmo/utils": "workspace:*"

cli/plasmo/src/commands/dev.ts

@@ -1,7 +1,10 @@
+import {
+  BuildSocketEvent,
+  getBuildSocket
+} from "@plasmo/framework-shared/build-socket"
 import { getFlag, isVerbose } from "@plasmo/utils/flags"
 import { eLog, iLog, sLog, vLog } from "@plasmo/utils/logging"
 
-import { createBuildSocket } from "~features/extension-devtools/build-socket"
 import { getBundleConfig } from "~features/extension-devtools/get-bundle-config"
 import { createProjectWatcher } from "~features/extension-devtools/project-watcher"
 import { checkNewVersion } from "~features/framework-update/version-tracker"
@@ -20,21 +23,22 @@ async function dev() {
 
   iLog("Starting the extension development server...")
 
-  const bundleConfig = getBundleConfig()
-
-  const plasmoManifest = await createManifest(bundleConfig)
-
-  const projectWatcher = await createProjectWatcher(plasmoManifest)
-
   const { default: getPort } = await import("get-port")
 
   const [servePort, hmrPort] = await Promise.all([
     getPort({ port: parseInt(rawServePort) }),
     getPort({ port: parseInt(rawHmrPort) })
   ])
+  const buildWatcher = getBuildSocket(hmrPort)
 
   vLog(`Starting dev server on ${servePort}, HMR on ${hmrPort}...`)
 
+  const bundleConfig = getBundleConfig()
+
+  const plasmoManifest = await createManifest(bundleConfig)
+
+  const projectWatcher = await createProjectWatcher(plasmoManifest)
+
   const bundler = await createParcelBuilder(plasmoManifest, {
     logLevel: "verbose",
     shouldBundleIncrementally: true,
@@ -50,7 +54,6 @@ async function dev() {
 
   const { default: chalk } = await import("chalk")
 
-  const buildWatcher = await createBuildSocket(hmrPort)
   const bundlerWatcher = await bundler.watch(async (err, event) => {
     if (err) {
       throw err
@@ -65,7 +68,7 @@ async function dev() {
 
       await plasmoManifest.postBuild()
 
-      buildWatcher.triggerReload()
+      buildWatcher.broadcast(BuildSocketEvent.BuildReady)
     } else if (event.type === "buildFailure") {
       if (!isVerbose()) {
         eLog(

cli/plasmo/src/features/helpers/create-parcel-bundler.ts

@@ -49,7 +49,7 @@ export const createParcelBuilder = async (
     : "false"
 
   process.env.__PLASMO_FRAMEWORK_INTERNAL_ES_TARGET =
-    (getFlag("--es-target") as any) || "es2022"
+    (getFlag("--es-target") as any) || "es2016"
 
   const pmInfo = await getPackageManager()
 

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

@@ -29,6 +29,10 @@ import type {
   ManifestContentScript,
   ManifestPermission
 } from "@plasmo/constants"
+import {
+  BuildSocketEvent,
+  buildBroadcast
+} from "@plasmo/framework-shared/build-socket"
 import { assertTruthy } from "@plasmo/utils/assert"
 import { injectEnv } from "@plasmo/utils/env"
 import { isReadable } from "@plasmo/utils/fs"
@@ -397,6 +401,9 @@ export abstract class PlasmoManifest<T extends ExtensionManifest = any> {
     } else {
       this.contentScriptMap.delete(path)
     }
+
+    buildBroadcast(BuildSocketEvent.CsChanged)
+
     return enable
   }
 

cli/plasmo/templates/plasmo.d.ts

@@ -2,7 +2,7 @@ declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV: "development" | "production"
 
-    PLASMO_BROWSER:
+    PLASMO_BROWSER?:
       | "arc"
       | "brave"
       | "chrome"
@@ -20,12 +20,12 @@ declare namespace NodeJS {
       | "waterfox"
       | "yandex"
 
-    PLASMO_MANIFEST_VERSION: "mv2" | "mv3"
+    PLASMO_MANIFEST_VERSION?: "mv2" | "mv3"
 
-    PLASMO_TARGET:
+    PLASMO_TARGET?:
       | `${ProcessEnv["PLASMO_BROWSER"]}-${ProcessEnv["PLASMO_MANIFEST_VERSION"]}`
 
-    PLASMO_TAG: string
+    PLASMO_TAG?: string
   }
 }
 

packages/framework-shared/build-socket/event.ts

@@ -0,0 +1,4 @@
+export enum BuildSocketEvent {
+  BuildReady = "build_ready",
+  CsChanged = "cs_changed"
+}

packages/framework-shared/build-socket/index.ts

@@ -0,0 +1,51 @@
+import { WebSocket, WebSocketServer } from "ws"
+
+import { BuildSocketEvent } from "./event"
+
+export { BuildSocketEvent }
+
+const createBuildSocket = (hmrPort: number) => {
+  const wss = new WebSocketServer({ port: hmrPort + 1 })
+
+  const broadcast = (type: BuildSocketEvent) => {
+    for (const client of wss.clients) {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(JSON.stringify({ type }))
+      }
+    }
+  }
+
+  return {
+    broadcast
+  }
+}
+
+let _buildSocket: Awaited<ReturnType<typeof createBuildSocket>>
+
+export const getBuildSocket = (hmrPort?: number) => {
+  if (process.env.NODE_ENV === "production") {
+    return null
+  }
+
+  if (!!_buildSocket) {
+    return _buildSocket
+  }
+
+  if (!hmrPort) {
+    throw new Error("HMR port is not provided")
+  }
+
+  _buildSocket = createBuildSocket(hmrPort)
+  return _buildSocket
+}
+
+export const buildBroadcast = (type: BuildSocketEvent) => {
+  if (process.env.NODE_ENV === "production") {
+    return
+  }
+
+  const buildSocket = getBuildSocket()
+  if (buildSocket) {
+    buildSocket.broadcast(type)
+  }
+}

packages/framework-shared/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@plasmo/framework-shared",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "ws": "8.13.0"
+  },
+  "devDependencies": {
+    "@plasmo/config": "workspace:*",
+    "@plasmo/utils": "workspace:*"
+  }
+}

packages/framework-shared/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@plasmo/config/ts/utils",
+  "include": ["./**/*.ts"],
+  "exclude": ["node_modules"]
+}

packages/parcel-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-config",
-  "version": "0.37.3",
+  "version": "0.37.4",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/parcel-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-runtime",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "description": "Plasmo Parcel Runtime",
   "files": [
     "dist"
@@ -29,6 +29,7 @@
     "tsup": "6.7.0"
   },
   "dependencies": {
+    "@plasmo/framework-shared": "workspace:*",
     "@parcel/core": "2.9.1",
     "@parcel/plugin": "2.9.1",
     "react-refresh": "0.14.0"

packages/parcel-runtime/src/runtimes/background-service-runtime.ts

@@ -1,6 +1,8 @@
 /**
  * This runtime is injected into the background service worker
  */
+
+import { BuildSocketEvent } from "@plasmo/framework-shared/build-socket/event"
 import { vLog } from "@plasmo/utils/logging"
 
 import { keepAlive } from "@plasmohq/persistent/background"
@@ -89,12 +91,21 @@ if (!parent || !parent.isParcelRequire) {
   })
 }
 
-injectBuilderSocket(async () => {
+injectBuilderSocket(async (event) => {
   vLog("BGSW Runtime - On Build Repackaged")
   // maybe we should wait for a bit until we determine if the build is truly ready
-  state.buildReady ||= true
-
-  consolidateUpdate()
+  switch (event.type) {
+    case BuildSocketEvent.BuildReady: {
+      state.buildReady ||= true
+      consolidateUpdate()
+      break
+    }
+    case BuildSocketEvent.CsChanged: {
+      state.csChanged ||= true
+      consolidateUpdate()
+      break
+    }
+  }
 })
 
 extCtx.runtime.onConnect.addListener(function (port) {

packages/parcel-runtime/src/types.ts

@@ -90,9 +90,6 @@ export type HmrMessage =
         }>
       }
     }
-  | {
-      type: "build_ready"
-    }
 
 export type BackgroundMessage = {
   __plasmo_full_reload__?: boolean

packages/parcel-runtime/src/utils/inject-socket.ts

@@ -1,3 +1,4 @@
+import { type BuildSocketEvent } from "@plasmo/framework-shared/build-socket/event"
 import { eLog, iLog, wLog } from "@plasmo/utils/logging"
 
 import type { HmrAsset, HmrMessage } from "../types"
@@ -21,19 +22,18 @@ function wsErrorHandler(e: ErrorEvent) {
   }
 }
 
-export function injectBuilderSocket(onUpdate?: () => Promise<void>) {
+export function injectBuilderSocket(
+  onData?: (data: { type: BuildSocketEvent }) => Promise<void>
+) {
   if (typeof globalThis.WebSocket === "undefined") {
     return
   }
 
   const builderWs = new WebSocket(getBaseSocketUri(Number(getPort()) + 1))
 
   builderWs.addEventListener("message", async function (event) {
-    const data = JSON.parse(event.data) as HmrMessage
-    if (data.type === "build_ready") {
-      await onUpdate()
-      return
-    }
+    const data = JSON.parse(event.data)
+    await onData(data)
   })
 
   builderWs.addEventListener("error", wsErrorHandler)

packages/parcel-transformer-manifest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmohq/parcel-transformer-manifest",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Plasmo Parcel Transformer for Web Extension Manifest",
   "files": [
     "dist",

packages/parcel-transformer-manifest/src/csp-patch-hmr.ts

@@ -10,8 +10,6 @@ export function cspPatchHMR(
     insert === DEFAULT_INSERT ? "'self' blob: filesystem:" : "'self'"
 
   if (policy) {
-    console.log(policy)
-
     const csp = parseCSP(policy)
     policy = ""