feat(joint-react): sync with @joint/react-plus + general updates #3077

samuelgja · 2025-10-15T07:01:18Z

Description

This PR refactors joint-react (and related packages) to simplify the architecture and prepare for @joint/plus-react integration.
The main changes include the removal of PaperProvider, the introduction of controlled mode in GraphProvider, and multiple performance optimizations.

🚩 Major Changes

1. Controlled Mode in `GraphProvider`

Added support for controlled and uncontrolled operation:
- Uncontrolled (default): behaves as before — dia.Graph remains the source of truth.
- Controlled: when onElementsChange / onLinksChange props are provided, React state becomes the source of truth.
  Enables integration with Redux, Zustand, or useState.

2. `PaperProvider` Removal

The PaperProvider layer has been completely removed.
All paper-related methods and refs are now accessible via the new imperative API exposed on the component ref.
This simplifies the render tree and eliminates redundant provider nesting.

3. API Changes

Renamed:
- initialElements → elements
- initialLinks → links
Removed internal Map-based caching; now uses plain arrays for better iteration performance.
Introduced new useImperativeApi hook for managing refs and access to paper/graph internals.

4. Store & Performance

Simplified internal store representation (no deep proxy layers).
Optimized use-element-views and render paths.
Reduced re-renders caused by context dependency changes.

5. Developer Experience

Improved integration with Storybook examples (controlled graph stories).
Adjusted tests for controlled mode and ref-based API.
Updated dependencies (eslint, @types/react, typescript, etc.) and peer dependency ranges.

Motivation and Context

This refactor simplifies both the runtime and mental model:

Less boilerplate: No extra providers for Paper or Graph access.
More flexible control: Graphs can now be managed by React state or remain internal.
Better performance: Leaner store and direct ref access reduce indirection.
Future-ready: Enables seamless migration toward the new @joint/plus-react ecosystem.

Screenshots

N/A — internal behavioral changes only.

samuelgja · 2025-10-15T07:04:25Z

packages/joint-core/types/joint.d.ts

 export namespace highlighters {

-    import HighlighterView = dia.HighlighterView;
+    type HighlighterView = dia.HighlighterView; 


This typing should be the same, but I had to change from that legacy Import to type because of a bundling issue.

samuelgja · 2025-10-15T07:05:05Z

packages/joint-core/types/joint.d.ts

-        sourceMarker?: dia.SVGMarkerJSON;
-        targetMarker?: dia.SVGMarkerJSON;
+        sourceMarker?: dia.SVGMarkerJSON | null;
+        targetMarker?: dia.SVGMarkerJSON | null;


I added this type, because it return null in some cases.

samuelgja · 2025-10-15T07:05:30Z

packages/joint-react-eslint/package.json

-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-jsdoc": "^50.6.9",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "5.1.0",


update to latest versions.

samuelgja · 2025-10-15T07:06:39Z

packages/joint-vitest-plugin-mock-svg/package.json

-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",


also we have to keep this in sync, otherwise we will have issues with resolutions. So I Updated react, react-dom and react types versions accross monorepo.

Copilot

Pull Request Overview

This PR refactors the joint-react package to align with @joint/react-plus by simplifying the architecture and introducing controlled mode. The main changes include removing PaperProvider, adding controlled/uncontrolled modes to GraphProvider, and implementing performance optimizations.

Key changes:

Removed PaperProvider in favor of imperative API exposed on component refs
Added controlled mode support with onElementsChange/onLinksChange props
Renamed initialElements/initialLinks to elements/links for consistency

Reviewed Changes

Copilot reviewed 209 out of 211 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/joint-vitest-plugin-mock-svg/package.json	Updated React/TypeScript dependencies to exact versions
packages/joint-react/vite.config.ts	Removed eslint disable comment, added @ts-expect-error
packages/joint-react/tsconfig.json	Modernized TypeScript config with bundler resolution
packages/joint-react/src/utils/*	Major refactoring of utilities including new scheduler, object utilities
packages/joint-react/src/hooks/*	Replaced `useUpdateElement` with `useCellActions`, updated store hooks
packages/joint-react/src/components/*	Updated to use new prop names and imperative API

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/joint-react/vite.config.ts

packages/joint-react/src/utils/object-utilities.ts

packages/joint-react/src/stories/utils/make-story.tsx

packages/joint-react/src/utils/create-element-size-observer.ts

…perProvider

… for managing elements and links

…implifying logic in various components

…plus-sync-and-updates

…t jitter for safari

…ndling and add useRefValue hook

…plus-sync-and-updates

…d new utility functions - Updated Storybook and Redux Toolkit versions in package.json and yarn.lock. - Refactored GraphProvider to accept elements and links as props directly. - Introduced new utility functions for improved link handling and object manipulation. - Added comprehensive tests for new functionalities and existing hooks. - Enhanced documentation with examples and best practices for using highlighters and SVG nodes.

…comprehensive tests - Refactored GraphProvider to support controlled mode with direct synchronization of elements and links from React state. - Introduced new methods for updating the store from external data, improving state management. - Added extensive tests for controlled mode functionality, including handling rapid updates and user interactions. - Enhanced documentation with examples for using GraphProvider in controlled mode with Redux and React state.

…nce performance - Updated dependencies in yarn.lock, including Babel and added unplugin. - Refactored GraphProvider and Paper components for improved performance and clarity. - Removed unused files and hooks to streamline the codebase. - Enhanced the Storybook setup with a new script for loading react-scan. - Improved element rendering logic and optimized hooks for better state management. - Added tests for new functionalities and ensured existing tests are up to date.

- Added empty lines at the end of multiple test files to ensure consistency across the codebase.

…link from supported types in graphProvider. - graphProvider elements and links are source of truth - dia.graph do not change elements and links defined by the user - BY DeFAULT MAPPING - graph elements and links should be flat - remove measure node - useNodeSize | useNodeSize - custom mapper + default mappers from links and elements (???)

…tency - Added empty lines at the end of various test files to maintain uniformity across the codebase.

- Updated the useNodeSize hook to support a custom transform function for size measurement, allowing for more flexible size adjustments. - Refactored related types and interfaces to accommodate the new transform feature. - Improved documentation with examples demonstrating the use of the transform function for custom size handling. - Adjusted tests to reflect changes in the useNodeSize implementation.

- Updated the EPSILON value to reduce sub-pixel rendering jitter. - Introduced new functions to read entry sizes and snap to device pixels for better measurement accuracy. - Enhanced the ResizeObserver implementation to batch updates and prevent re-entrancy issues. - Improved documentation to clarify the observer's behavior and usage examples.

- Adjusted the EPSILON value to 0.5 to better handle sub-pixel rendering issues. - Simplified the ResizeObserver implementation by removing unnecessary functions and improving size comparison logic. - Enhanced documentation to clarify the observer's functionality and usage. - Added console logging for debugging purposes in the introduction demo.

…erver logic - Adjusted the opacity of the paper component based on element measurement status. - Refactored size observer logic to improve clarity and performance, including renaming interfaces for better understanding. - Enhanced the handling of size changes in the ResizeObserver to ensure accurate updates and prevent unnecessary re-renders. - Updated transform functions in flowchart and card components for improved size calculations.

samuelgja mentioned this pull request Oct 15, 2025

feat(joint-react): sync with new @joint/plus-react #3037

Closed

samuelgja requested a review from kumilingus October 15, 2025 07:02

samuelgja assigned samuelgja and kumilingus Oct 15, 2025

samuelgja commented Oct 15, 2025

View reviewed changes

samuelgja requested a review from Copilot October 15, 2025 07:46

Copilot AI reviewed Oct 15, 2025

View reviewed changes

samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 9c4386a to 1086542 Compare October 15, 2025 08:01

feat(joint-react): sync with react plus and general fixes + remove pa…

5311d16

…perProvider

samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 1086542 to 5311d16 Compare October 15, 2025 08:01

samuelgja added 9 commits October 15, 2025 17:03

chore(joint-react): enhance graph provider and store with new methods…

fdfff64

… for managing elements and links

refactor(joint-react): clean up code by removing unused methods and s…

273e570

…implifying logic in various components

Merge remote-tracking branch 'upstream/master' into feat/joint-react-…

751a252

…plus-sync-and-updates

chore(joint-react): sync yarn lock + update tests snapshots

8896f66

feat(joint-react): add use-combined-ref hook export

ce40cbb

feat(joint-react): improve size measurement accuracy and prevent floa…

5ef0956

…t jitter for safari

feat(joint-react): enhance Paper component with improved dimension ha…

29d9a17

…ndling and add useRefValue hook

Merge remote-tracking branch 'upstream/master' into feat/joint-react-…

8b035ed

…plus-sync-and-updates

samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 9dae139 to 0321376 Compare November 26, 2025 03:20

samuelgja added 2 commits November 26, 2025 11:22

samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 212b78d to 8d9dbc0 Compare December 9, 2025 06:20

samuelgja added 4 commits December 15, 2025 18:58

chore(joint-react): add empty lines to test files for consistency

32c1254

- Added empty lines at the end of multiple test files to ensure consistency across the codebase.

chore(joint-react): add empty lines to multiple test files for consis…

efb9988

…tency - Added empty lines at the end of various test files to maintain uniformity across the codebase.

samuelgja added 3 commits January 9, 2026 17:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(joint-react): sync with @joint/react-plus + general updates #3077

feat(joint-react): sync with @joint/react-plus + general updates #3077

Uh oh!

samuelgja commented Oct 15, 2025

Uh oh!

samuelgja Oct 15, 2025

Uh oh!

samuelgja Oct 15, 2025

Uh oh!

samuelgja Oct 15, 2025

Uh oh!

samuelgja Oct 15, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(joint-react): sync with @joint/react-plus + general updates #3077

Are you sure you want to change the base?

feat(joint-react): sync with @joint/react-plus + general updates #3077

Uh oh!

Conversation

samuelgja commented Oct 15, 2025

Description

🚩 Major Changes

1. Controlled Mode in GraphProvider

2. PaperProvider Removal

3. API Changes

4. Store & Performance

5. Developer Experience

Motivation and Context

Screenshots

Uh oh!

samuelgja Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

samuelgja Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

samuelgja Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

samuelgja Oct 15, 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

1. Controlled Mode in `GraphProvider`

2. `PaperProvider` Removal

samuelgja Oct 15, 2025 •

edited

Loading