CLOUDP-352308 Developer experience improvements and webpack HMR support #2

nima-taheri-mongodb · 2025-10-20T04:19:42Z

📝 Description

Firstly, thank you so much for this useful and nice chrome extension! I had some issue with react HMR so I decided to contribute.

✨ New Features

🔥 HMR Support: Add redirect rules for webpack hot-update files (.hot-update.*)
🔧 Resource Type Fix: Include "other" content type in JS redirects (some browser requests misidentify JS as "xml")
🎨 MongoCDN Presets: Quick setup buttons for MongoDB Atlas in development, QA, and production environments
✅ Checkbox UI: Convert boolean fields (WDS, compressed) to proper checkboxes

🏗️ Technical Improvements

~~Create reusable regex utility with webpack-style patterns ([segment], [hash], [name], etc.) to define redirect rules in a more readable way.~~
~~Rewrite redirect rules using webpack-style patterns in a separate rules.js module with decent test coverage.~~

🛠️ Configuration Improvements

Add .prettierrc for consistent code formatting
Add package.json to pull in type hints for Chrome APIs and Node.js
Pin node.js version to 24.10.0 via .tool-versions to ensure unit tests pass.
Ignore IDE files (.vscode, .idea) and package-lock.json.

🧪 Testing

Added unit tests for regex utilities
Added tests for redirect rules
Manually tested HMR with webpack dev server
Manually tested MongoCDN presets

conf: ignore package-lock.json

…tead of regex

sometimes browser recognizes these js files as "xml" for some reason

feat: use checkbox for compressed and wds checkbox

jetpacmonkey

You're hitting the ground running, this is great! Just had a few thoughts. I'm also not 100% sold on the whole PlaceholderRegistry approach, but I'm coming around on the idea the more I look at it.

jetpacmonkey · 2025-10-22T17:59:28Z

options.html

-    <main>
-        <label><span>Match URL prefix</span><input name="match"></label>
-        <label><span>Replace URL prefix</span><input name="replace"></label>
-        <label><span>Webpack Dev Server?</span><input name="wds"></label>


In retrospect, it's ridiculous that we left this as a text input for as long as we did

jetpacmonkey · 2025-10-22T18:02:07Z

options.html

+    <span>MongoCDN Presets:</span>
+    <input type="button" name="preset" value="Development"/>
+    <input type="button" name="preset" value="QA"/>
+    <input type="button" name="preset" value="Production"/>


I think the initial idea for the plugin when Justin Moses made it way back in... 2017 or whatever... was that it'd be more general-use, but since Eric moved it into mongodb-labs... having presets is a fantastic idea!

Thinking a bit more about your comment Jeremy, what do you think of simplifying config even further? Like:

removing the configurable source base-url and only having the presets.

removing the compressed and wds options and only letting users specify their webpack-dev-server local assets url.

The real question to me, the more I think about this PR, is whether we want to continue supporting Redwood at all, or if we just want to maintain config that can be imported into that tool you demonstrated at Web Chapter (which I've already forgotten the name of). It seems like that tool is already a clear massive step up for the more "generic" approach, and might also be a simpler DX in general, since it'd avoid the kind of hacky installation process we have with this tool right now.

Unfortunately there are not many browser extensions that do rule-based http(s) interception, I found these two in my search:

https://github.com/vvmgev/Inssman It's a bit janky, export/import has small issue, http-response interception has small issue, a maintainer removed regex matching support for no good reason recently.. that is what I found out in a day there should be more.

https://github.com/requestly/requestly Although open-source it's commercial and only allows defining 4 rules or so.

Me personally I'm pretty happy with using https://www.mitmproxy.org/ and writing interception rules. I've developed one for myself, that redirects assets to webpack-dev-server, overrides feature-flags, forces delay to test loading shimmers. It's easier to test/develop/maintain in general than a browser extension.

jetpacmonkey · 2025-10-22T18:02:59Z

options.html

+    <input type="button" name="preset" value="Production"/>
+  </div>
+  <br/>
+  <label for="match">


Do <label> elements actually need a for attribute when they're wrapping the input?

good point, removed it

jetpacmonkey · 2025-10-22T18:07:13Z

service_worker.js

+    // Uncomment for seeing matches (not a lot of info).
+    chrome.declarativeNetRequest.onRuleMatchedDebug.addListener((info) => {
+      console.log(JSON.stringify(info));
+    });


Looks like we'd had this commented out before, should we leave that as the better default? Or if not, we should at least update the comment.

better default, I like that, the performance penalty should be negligible too.

jetpacmonkey · 2025-10-22T18:19:07Z

service_worker.js

-    }
-    const cssAssetRegexSub = `${replace}/static/assets/css/\\1${addMin('css')}.css`
-
+    const newRules = createRules(config);


well now I have Dua Lipa stuck in my head

jetpacmonkey · 2025-10-22T18:22:50Z

rules.js

+    const isWDS = wds === 'true';
+    const isCompressed = compressed === 'true';


Is this still accurate? It looked like you'd made some changes to store booleans instead of strings, is Chrome translating that internally?

I wonder if there's any merit in keeping support of non webpack-dev-server redirects?
what do you think of removing all these extra configs 🤔

jetpacmonkey · 2025-10-22T18:27:53Z

rules.js

+    // JS chunks
+    createRedirectRule(
+      '[orig_url]/static/[segment]/[name].[hash].js',
+      '[repl_url]/static/[segment]/[name][min].js',


I'm a little bit skeptical of using a custom syntax parser tool, but I can't deny that this is really nice and readable

very valid point, I have been thinking about this comment for days.
I think named capture regex groups is a great alternative, one caveat though that chrome dynamic rules don't support it.

I can write a small helper function to replace named capture regex groups to numbered ones. That way we are not inventing a brand new syntax here, and just using a known regex feature (but feeding it to chrome rule engine with a trick)

nima-taheri-mongodb · 2025-10-27T05:05:24Z

Changed "Options" to this, let me know what you think 🤔

nima-taheri-mongodb added 9 commits October 19, 2025 21:10

conf: ignore vscode & idea IDE files

a413635

conf: ignore package-lock.json

conf: ensure nodejs 24.x

fbc1d4d

conf: add package.json for type-hints and prettier

966dc28

conf: basic prettier config

ea4066d

feat: add a regex util to be able to write webpack-style patterns ins…

c37b4f6

…tead of regex

refactor: move rules to a separate file with tests

784551e

feat: add redirect rule for webpack hot-updates

dde11da

feat: include "other" to js redirects

c1336eb

sometimes browser recognizes these js files as "xml" for some reason

feat: add mongo-cdn presets to options dialog

e0b6798

feat: use checkbox for compressed and wds checkbox

nima-taheri-mongodb changed the title ~~Some improvements~~ Developer experience improvements and webpack HMR support Oct 20, 2025

nima-taheri-mongodb marked this pull request as ready for review October 20, 2025 05:34

jetpacmonkey reviewed Oct 22, 2025

View reviewed changes

processed review feedbacks

b39ad05

nima-taheri-mongodb requested a review from jetpacmonkey October 27, 2025 05:06

nima-taheri-mongodb changed the title ~~Developer experience improvements and webpack HMR support~~ CLOUDP-352308 Developer experience improvements and webpack HMR support Oct 27, 2025

docs: remove the old comment

da4ad9e

		const isWDS = wds === 'true';
		const isCompressed = compressed === 'true';

CLOUDP-352308 Developer experience improvements and webpack HMR support #2

Are you sure you want to change the base?

CLOUDP-352308 Developer experience improvements and webpack HMR support #2

Uh oh!

Conversation

nima-taheri-mongodb commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

✨ New Features

🏗️ Technical Improvements

🛠️ Configuration Improvements

🧪 Testing

Uh oh!

jetpacmonkey left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nima-taheri-mongodb Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nima-taheri-mongodb Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nima-taheri-mongodb commented Oct 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nima-taheri-mongodb commented Oct 20, 2025 •

edited

Loading

nima-taheri-mongodb Oct 27, 2025 •

edited

Loading

nima-taheri-mongodb Oct 30, 2025 •

edited

Loading