chore: Add React 19 support + Update major package versions

.github/workflows/test-examples.yml

@@ -1,10 +1,9 @@
 name: Test examples
 on:
   push:
-    branches: [main]
+    branches: ["main"]
   pull_request:
-    branches: [main]
-  workflow_dispatch:
+    types: [opened, synchronize]
 
 jobs:
   build:

api/messaging/package.json

@@ -111,7 +111,7 @@
     "chrome-extension"
   ],
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18"
+    "react": "^16.8.6 || ^17 || ^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -121,18 +121,18 @@
   "devDependencies": {
     "@jest/globals": "29.7.0",
     "@jest/types": "29.6.3",
-    "@testing-library/react": "14.1.0",
+    "@testing-library/react": "16.2.0",
     "@types/chrome": "0.0.251",
     "@types/node": "20.9.0",
-    "@types/react": "18.2.37",
+    "@types/react": "19.0.8",
     "cross-env": "7.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "5.0.5",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "rimraf": "6.0.1",
     "ts-jest": "29.1.1",
-    "tsup": "7.2.0",
+    "tsup": "8.3.6",
     "typescript": "5.2.2"
   },
   "dependencies": {

api/messaging/src/hook.ts

@@ -28,7 +28,7 @@ export const useMessage = <RequestBody, ResponseBody>(
 }
 
 export const usePort: PlasmoMessaging.PortHook = (name) => {
-  const portRef = useRef<chrome.runtime.Port>()
+  const portRef = useRef<chrome.runtime.Port>(undefined)
   const reconnectRef = useRef(0)
   const [data, setData] = useState()
 
@@ -76,7 +76,7 @@ export function useMessageRelay<RequestBody = any>(
 }
 
 export const useRelay: PlasmoMessaging.RelayFx = (req, onMessage) => {
-  const relayRef = useRef<() => void>()
+  const relayRef = useRef<() => void>(undefined)
 
   useEffect(() => {
     relayRef.current = relay(req, onMessage)

api/persistent/package.json

@@ -70,7 +70,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "ts-jest": "29.1.1",
-    "tsup": "7.2.0",
+    "tsup": "8.3.6",
     "typescript": "5.2.2"
   }
 }

api/selector/package.json

@@ -68,7 +68,7 @@
     "chrome-extension"
   ],
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18"
+    "react": "^16.8.6 || ^17 || ^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -78,18 +78,18 @@
   "devDependencies": {
     "@jest/globals": "29.7.0",
     "@jest/types": "29.6.3",
-    "@testing-library/react": "14.1.0",
+    "@testing-library/react": "16.2.0",
     "@types/chrome": "0.0.251",
     "@types/node": "20.9.0",
-    "@types/react": "18.2.37",
+    "@types/react": "19.0.8",
     "cross-env": "7.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "5.0.5",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "rimraf": "6.0.1",
     "ts-jest": "29.1.1",
-    "tsup": "7.2.0",
+    "tsup": "8.3.6",
     "typescript": "5.2.2"
   }
 }

cli/plasmo/package.json

@@ -50,19 +50,19 @@
     "chalk": "5.3.0",
     "change-case": "5.1.2",
     "dotenv": "16.3.1",
-    "dotenv-expand": "10.0.0",
+    "dotenv-expand": "12.0.1",
     "events": "3.3.0",
     "fast-glob": "3.3.2",
     "fflate": "0.8.1",
     "get-port": "7.0.0",
-    "got": "13.0.0",
-    "ignore": "5.2.4",
-    "inquirer": "9.2.12",
+    "got": "14.4.5",
+    "ignore": "7.0.3",
+    "inquirer": "12.4.1",
     "is-path-inside": "4.0.0",
     "json5": "2.2.3",
     "mnemonic-id": "3.2.7",
     "node-object-hash": "3.0.0",
-    "package-json": "8.1.1",
+    "package-json": "10.0.1",
     "process": "0.11.10",
     "semver": "7.5.4",
     "sharp": "0.32.6",

cli/plasmo/templates/static/react19/content-script-ui-mount.tsx

@@ -0,0 +1,91 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+
+import { createAnchorObserver, createRender } from "@plasmo-static-common/csui"
+import {
+  InlineCSUIContainer,
+  OverlayCSUIContainer
+} from "@plasmo-static-common/csui-container-react"
+import { getLayout } from "@plasmo-static-common/react"
+
+import type {
+  PlasmoCSUI,
+  PlasmoCSUIAnchor,
+  PlasmoCSUIJSXContainer
+} from "~type"
+
+// @ts-ignore
+import * as RawMount from "__plasmo_mount_content_script__"
+
+// Escape parcel's static analyzer
+const Mount = RawMount as PlasmoCSUI<PlasmoCSUIJSXContainer>
+
+const observer = createAnchorObserver(Mount)
+
+const render = createRender(
+  Mount,
+  [InlineCSUIContainer, OverlayCSUIContainer],
+  observer?.mountState,
+  async (anchor, rootContainer) => {
+    const root = createRoot(rootContainer)
+    anchor.root = root
+
+    const Layout = getLayout(RawMount)
+
+    switch (anchor.type) {
+      case "inline": {
+        root.render(
+          <Layout>
+            <InlineCSUIContainer anchor={anchor}>
+              <RawMount.default anchor={anchor} />
+            </InlineCSUIContainer>
+          </Layout>
+        )
+        break
+      }
+      case "overlay": {
+        const targetList = observer?.mountState.overlayTargetList || [
+          anchor.element
+        ]
+
+        root.render(
+          <Layout>
+            {targetList.map((target, i) => {
+              const id = `plasmo-overlay-${i}`
+              const innerAnchor: PlasmoCSUIAnchor = {
+                element: target,
+                type: "overlay"
+              }
+              return (
+                <OverlayCSUIContainer
+                  key={id}
+                  id={id}
+                  anchor={innerAnchor}
+                  watchOverlayAnchor={Mount.watchOverlayAnchor}>
+                  <RawMount.default anchor={innerAnchor} />
+                </OverlayCSUIContainer>
+              )
+            })}
+          </Layout>
+        )
+        break
+      }
+    }
+  }
+)
+
+if (!!observer) {
+  observer.start(render)
+} else {
+  render({
+    element: document.documentElement,
+    type: "overlay"
+  })
+}
+
+if (typeof Mount.watch === "function") {
+  Mount.watch({
+    observer,
+    render
+  })
+}

cli/plasmo/templates/static/react19/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>__plasmo_static_index_title__</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div id="__plasmo"></div>
+    <script src="__plasmo_static_script__" type="module"></script>
+  </body>
+</html>

cli/plasmo/templates/static/react19/index.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+
+import { getLayout } from "@plasmo-static-common/react"
+
+// @ts-ignore
+import * as Component from "__plasmo_import_module__"
+
+let __plasmoRoot: HTMLElement = null
+
+document.addEventListener("DOMContentLoaded", () => {
+  if (!!__plasmoRoot) {
+    return
+  }
+
+  __plasmoRoot = document.getElementById("__plasmo")
+
+  const root = createRoot(__plasmoRoot)
+
+  const Layout = getLayout(Component)
+
+  root.render(
+    <Layout>
+      <Component.default />
+    </Layout>
+  )
+})

core/parcel-bundler/package.json

@@ -30,6 +30,6 @@
     "@parcel/types": "2.9.3",
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   }
 }

core/parcel-compressor-utf8/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/plugin": "2.9.3"

core/parcel-core/package.json

@@ -26,7 +26,7 @@
     "@parcel/types": "2.8.3",
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/cache": "2.9.3",

core/parcel-namer-manifest/package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@plasmo/config": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",

core/parcel-optimizer-encapsulate/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",

core/parcel-optimizer-es/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",

core/parcel-packager/package.json

@@ -25,7 +25,7 @@
     "@plasmo/config": "workspace:*",
     "@plasmo/constants": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",

core/parcel-resolver-post/package.json

@@ -31,7 +31,7 @@
     "@parcel/plugin": "2.9.3",
     "@parcel/types": "2.9.3",
     "@parcel/utils": "2.9.3",
-    "tsup": "7.2.0",
+    "tsup": "8.3.6",
     "typescript": "5.2.2"
   }
 }

core/parcel-resolver/package.json

@@ -35,7 +35,7 @@
     "constants-browserify": "1.0.0",
     "crc-32": "1.2.2",
     "crypto-browserify": "3.12.0",
-    "domain-browser": "4.23.0",
+    "domain-browser": "5.7.0",
     "esbuild": "0.19.5",
     "events": "3.3.0",
     "https-browserify": "1.0.0",
@@ -49,7 +49,7 @@
     "stream-http": "3.2.0",
     "string_decoder": "1.3.0",
     "timers-browserify": "2.0.12",
-    "tsup": "7.2.0",
+    "tsup": "8.3.6",
     "tty-browserify": "0.0.1",
     "url": "0.11.3",
     "util": "0.12.5",
@@ -62,6 +62,6 @@
     "@parcel/types": "2.9.3",
     "fast-glob": "3.3.2",
     "fs-extra": "11.1.1",
-    "got": "13.0.0"
+    "got": "14.4.5"
   }
 }

core/parcel-runtime/package.json

@@ -27,7 +27,7 @@
     "@plasmo/utils": "workspace:*",
     "@plasmohq/persistent": "workspace:*",
     "@types/chrome": "0.0.251",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@types/trusted-types": "2.0.7",

core/parcel-transformer-inject-env/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",

core/parcel-transformer-inline-css/package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@plasmo/config": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",

core/parcel-transformer-lab/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@plasmo/config": "workspace:*",
     "@plasmo/utils": "workspace:*",
-    "tsup": "7.2.0"
+    "tsup": "8.3.6"
   },
   "dependencies": {
     "@parcel/core": "2.9.3",