fix: support React 16+ in @gram-ai/elements #1422
Open
+331
−8
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add compatibility shims that polyfill React 18 APIs (useSyncExternalStore, useId, useInsertionEffect) so elements can run on React 16.8+. These are used by transitive deps (zustand, assistant-ui, react-query). - Lower peer dependency range from >=18 to >=16.8 - Add compat.ts with inlined polyfills (no extra npm dep) - Import compat module first in index.ts entry point - Add unit tests for the compat module - Add integration test apps for React 16 and 17 with shared code Based on: https://www.assistant-ui.com/docs/react-compatibility Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 3ffed70 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
The bundler-level shim re-exports React with polyfilled hooks (useSyncExternalStore, useId, useInsertionEffect) and __SECRET_INTERNALS for react-dom compatibility. Vite resolve.alias redirects react to shim to real React package per test app. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Collaborator
🚀 Preview Environment (PR #1422)Preview URL: https://pr-1422.test.getgram.ai
Gram Preview Bot |
Session server now starts automatically with 'npm run dev' via a Vite plugin that spins up the server on a free port and proxies /chat/session requests to it. No separate server process needed. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Replace the proxy-based session server with direct Vite middleware that calls the Gram API. Force-read .env.local to override system env vars that Vite's loadEnv gives precedence to. Co-Authored-By: Claude Opus 4.5 <[email protected]>
The React 16/17 test apps brought @types/react@16 and @types/react@17 into the workspace, causing TS2786 JSX type errors in the client. These apps are standalone and should not be workspace members. Co-Authored-By: Claude Opus 4.5 <[email protected]>
These integration test apps for React 16/17 were causing issues in CI and need rethinking for local dev (CORS proxy, port handling). Removing for now to unblock the PR. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Export a self-contained Vite plugin at @gram-ai/elements/compat that shims React 18 APIs (useSyncExternalStore, useId, useInsertionEffect) via a virtual module, so consumers on older React versions only need to add one line to their Vite config. Co-Authored-By: Claude Opus 4.5 <[email protected]>
Extract polyfill factories into compat-shims.ts, used by both compat.ts (runtime patching) and react-shim.ts (bundler-level shim). The Vite plugin now points to the physical react-shim.js via resolve.alias instead of inlining a JS string. Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Wrap getSnapshot() calls in try-catch matching the official React shim - Add polyfills for startTransition, useTransition, useDeferredValue which are undefined on React 16/17 Co-Authored-By: Claude Opus 4.5 <[email protected]>
…atching Co-Authored-By: Claude Opus 4.5 <[email protected]>
…mpat sections Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
@gram-ai/elementsby polyfilling React 18 APIs (useSyncExternalStore,useId,useInsertionEffect,startTransition,useTransition,useDeferredValue)reactCompat()Vite plugin at@gram-ai/elements/compatthat handles bundler-level shimming for named imports in third-party dependencies (zustand, @assistant-ui/react, etc.)compat.tscovers the library's own code; the Vite plugin covers transitive dependencies that use named imports fromreactcompat-shims.ts) used by both the runtime patcher and the bundler shimReact 16 app test:
Usage (React 16/17)
Files
elements/src/compat-shims.tselements/src/compat.tselements/src/react-shim.tselements/src/compat-plugin.tselements/package.json./compatsubpath exportelements/README.mdelements/README.typedoc.mdTest plan
pnpm buildsucceeds,dist/compat-plugin.jsanddist/react-shim.jsproducedpnpm testpasses (15/15)pnpm lintpassescompat-plugin.jshas no runtime vite dependencyreact-shim.jsimports sharedcompat-shimschunk (no duplicated polyfill code)🤖 Generated with Claude Code