Skip to content

feat: Convert CRXJS HMR from filesystem-based to WebSocket-based #993 #1012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

jhubbardsf
Copy link
Contributor

@jhubbardsf jhubbardsf commented Jun 2, 2025

related to #993

The original fileWriter system wasn't outdated or unnecessary - it's the ONLY
way to achieve HMR for content scripts. The chrome-extension-boilerplate-react-vite project
confirms this by using the exact same approach.

The task of "converting to WebSocket-only" is fundamentally impossible for
content scripts. The fileWriter must be restored or reimplemented.
WEBSOCKET_HMR_SOLUTION_FOUND.md

reference:
https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

raven finished: 51510

opus initial implementation

sort of working

almost working

moving forward
Copy link

changeset-bot bot commented Jun 2, 2025

⚠️ No Changeset found

Latest commit: 159b7b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Jun 2, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
vite-plugin-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 2, 2025 10:06pm

Copy link
Contributor

github-actions bot commented Jun 2, 2025

⚠️ Important Notice: CRXJS is seeking new maintainers.

  • New issues and PRs may not receive immediate attention
  • A new maintenance team must establish itself by March 31, 2025 or this repository will be archived on June 1, 2025
  • Learn more about the transition

This is an automated message. Please do not reply to this comment.

@Toumash Toumash changed the title Feat/websocket hmr 2 Convert CRXJS HMR from filesystem-based to WebSocket-based #993 Jun 4, 2025
@Toumash Toumash changed the title Convert CRXJS HMR from filesystem-based to WebSocket-based #993 feat: Convert CRXJS HMR from filesystem-based to WebSocket-based #993 Jun 4, 2025
Copy link
Member

@Toumash Toumash left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

project is not running. Ghost deps, missing devDeps.
Below patch fixes the deps, but i couldnt make it run

diff --git forkSrcPrefix/packages/vite-plugin/hmr-code/package.json forkDstPrefix/packages/vite-plugin/hmr-code/package.json
index c9789d9f00af6a6ac60ff72aab92706bf8fb6b26..44063a4e1b2f482fe131f5ebc3e5facd3374bf16 100644
--- forkSrcPrefix/packages/vite-plugin/hmr-code/package.json
+++ forkDstPrefix/packages/vite-plugin/hmr-code/package.json
@@ -23,8 +23,6 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@extension/env": "workspace:*",
-    "@extension/tsconfig": "workspace:*",
     "@rollup/plugin-sucrase": "^5.0.2",
     "@types/ws": "^8.18.1",
     "esbuild": "^0.25.4",
@@ -32,5 +30,8 @@
     "rollup": "^4.41.0",
     "ts-node": "^10.9.2",
     "ws": "^8.18.2"
+  },
+  "dependencies": {
+    "tsx": "^4.19.4"
   }
 }
diff --git forkSrcPrefix/packages/vite-plugin/hmr-code/lib/consts.ts forkDstPrefix/packages/vite-plugin/hmr-code/lib/consts.ts
index 8166866e90e79c9388671dea6b95ec83ffe2a131..64f92604fd6822fa3ccacc4b189df2ffd0556e11 100644
--- forkSrcPrefix/packages/vite-plugin/hmr-code/lib/consts.ts
+++ forkDstPrefix/packages/vite-plugin/hmr-code/lib/consts.ts
@@ -1,4 +1,4 @@
-export const LOCAL_RELOAD_SOCKET_PORT = 8081;
+export const LOCAL_RELOAD_SOCKET_PORT = 5173;
 export const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
 
 export const DO_UPDATE = 'do_update';

image

"type-check": "tsc --noEmit"
},
"devDependencies": {
"@extension/env": "workspace:*",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

monorepo does not have such a project. Build fails
cd packages/vite-plugin/hmr-code; pnpm i

].flat()
}

export const chromeExtension = crx

export { defineDynamicResource, defineManifest } from './defineManifest'
export { allFilesReady, fileReady as filesReady } from './fileWriter'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now the packages/vite-plugin/tests/runners.ts does not work because there is no export anymore

}

private handleOpen = () => {
console.log('[vite] connected to HMR server')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

swap console logs with import debug from 'src/debug' so that the logs are visible when running DEBUG=* vite --clearScreen=false`

@Toumash
Copy link
Member

Toumash commented Jun 5, 2025

e2e tests blew up - 2 hours execution : D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants