feat(joint-react): SSR support for GraphProvider + release hardening#3338
Open
samuelgja wants to merge 2 commits into
Open
feat(joint-react): SSR support for GraphProvider + release hardening#3338samuelgja wants to merge 2 commits into
samuelgja wants to merge 2 commits into
Conversation
…g across various examples - Updated Paper component style properties to use single quotes for consistency. - Replaced usePaperEvents with direct event handlers for onLinkMouseEnter, onLinkMouseLeave, onElementMouseEnter, and onElementMouseLeave in multiple examples. - Added eslint-disable comments for performance-related rules in several files. - Cleaned up unused imports and improved code readability in various components.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Description
Adds server-side rendering support to
@joint/reactand hardens the package for a stable release. Builds on the normalized paper-events work.SSR
GraphProvidernow renders on the server: it provides a synchronous, per-requestGraphStoreso children and data hooks (useCells,useGraph, …) render to HTML. The client path is unchanged (still created in a layout effect → StrictMode-safe).GraphStoreis SSR-safe: the element-sizeResizeObserverfalls back to a no-op whenResizeObserveris undefined (server), and uses the real one on the client.useAreElementsMeasuredprovides a server snapshot (getServerSnapshot) so itsuseSyncExternalStoreworks during SSR.useIsomorphicLayoutEffect(usesuseEffecton the server) to avoid layout-effect SSR warnings.<Paper>degrades gracefully to its host element on the server (the canvas is client-only) and mounts fully on the client.Packaging / release hardening
package.json:sideEffects: ["**/*.css"](keeps JS tree-shakeable while protecting the stylesheet), scopedfiles, removed the publish-blockingprepublishOnly, widened the React peer range to^18 || ^19.StrictModedecorator (it was a no-op).CHANGELOG.md.Tests
ssr.test.tsx— runs in a real Node (no-DOM) environment and verifiesGraphProviderrenders children +useCellsdata on the server, andPaperdegrades without crashing.ssr-client-handoff.test.tsx— hydrates a server-authored tree on the client and verifies the full interactive surface works after handoff: Paper mounts its real canvas, JointJS events fire, normalized event props invoke handlers, and React state updates re-render.Motivation and Context
GraphProviderpreviously returnednulluntil a layout effect ran, so the whole subtree was blank on the server — SSR/SSG produced no output for it. This makesGraphProvider(and any non-canvas UI that reads graph data) server-renderable, while keeping<Paper>correctly client-only. The packaging changes remove a publish blocker and prevent the stylesheet from being tree-shaken away.Screenshots (if appropriate):