Skip to content

Fetch Devtools from a CDN in react-lang #1007

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.

Sign up for GitHub

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
AbhinRustagi wants to merge 5 commits into from
+27 −16
Open

Fetch Devtools from a CDN in react-lang #1007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2fc52fe
Serve Devtools from a CDN instead of bundling it into react-lang.
AbhinRustagi Aug 20, 2026
092cf17
Update devtoolsBootstrap.ts
AbhinRustagi Aug 20, 2026
987aacf
Pass host ReactDOM modules into the CDN mount from react-lang.
AbhinRustagi Aug 20, 2026
a06c0f8
fix: version bump
AbhinRustagi Aug 21, 2026
4e65ff3
fix: regenerate lockfile after dropping react-lang's devtools dep
AbhinRustagi Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/react-lang/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@openuidev/react-lang",
"version": "0.2.14",
"version": "0.2.15",
"description": "Define component libraries, generate LLM system prompts, and render streaming OpenUI Lang output in React — the core runtime for OpenUI generative UI",
"license": "MIT",
"type": "module",
Expand Down Expand Up @@ -82,7 +82,6 @@
},
"author": "engineering@thesys.dev",
"dependencies": {
"@openuidev/devtools": "workspace:^",
"@openuidev/lang-core": "workspace:^",
"@openuidev/observability": "workspace:^"
},
Expand Down
37 changes: 26 additions & 11 deletions packages/react-lang/src/devtoolsBootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
*
* This module runs as a top-level side effect when the web entry is loaded in
* a browser. In production builds the whole block is dead-code-eliminated by
* the consumer's bundler (the NODE_ENV condition folds to false), so neither
* `@openuidev/devtools` nor `react-dom/client` enters the production graph.
* The React Native entry (index.native.ts) never imports this module.
* the consumer's bundler (the NODE_ENV condition folds to false), so
* `react-dom` / `react-dom/client` never enter the production graph, and
* nothing is fetched. The React Native entry (index.native.ts) never imports
* this module.
*
* This module is inlined into the web entry (dist/index.*), which is listed
* in package.json's `sideEffects` so bundlers preserve the side effect while
Expand All @@ -21,15 +22,29 @@ if (process.env.NODE_ENV === "development" && typeof document !== "undefined") {
// (ESM/CJS dual build, multiple package versions).
if (!flags[AUTO_MOUNT_FLAG]) {
flags[AUTO_MOUNT_FLAG] = true;
Promise.all([import("@openuidev/devtools"), import("react"), import("react-dom/client")])
.then(([devtools, react, reactDomClient]) => {

// Pinned to the protocol major, not @latest: cached for days, and a
// protocol-breaking release (mount() args, Symbol keys, event kinds)
// would otherwise take down every app that hasn't bumped.
const url = "https://cdn.jsdelivr.net/npm/@openuidev/devtools@0/dist/devtools.browser.js";

Promise.all([
import(/* webpackIgnore: true */ /* @vite-ignore */ url),
import("react"),
import("react-dom"),
import("react-dom/client"),
])
.then(([devtools, react, reactDom, reactDomClient]) => {
const mount = () => {
const host = document.createElement("div");
host.setAttribute("data-openui-devtools-root", "");
document.body.appendChild(host);
reactDomClient
.createRoot(host)
.render(react.createElement(devtools.OpenUIDevtools, { __autoMounted: true }));
devtools.mountOpenUIDevtools({
React: react,
ReactDOM: reactDom,
ReactDOMClient: reactDomClient,
// Closed over this module's graph so the bundler resolves it —
// the CDN file never imports "@openuidev/react-lang" itself.
loadReactLang: () => import("@openuidev/react-lang"),
__autoMounted: true,
});
};
// Module evaluation can happen before <body> exists (script in <head>).
if (document.body) mount();
Expand Down
3 changes: 0 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading