Skip to content

Conversation

@samuelgja
Copy link
Contributor

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:
    • initialElementselements
    • initialLinkslinks
  • 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.

export namespace highlighters {

import HighlighterView = dia.HighlighterView;
type HighlighterView = dia.HighlighterView;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

sourceMarker?: dia.SVGMarkerJSON;
targetMarker?: dia.SVGMarkerJSON;
sourceMarker?: dia.SVGMarkerJSON | null;
targetMarker?: dia.SVGMarkerJSON | null;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

"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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

update to latest versions.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "19.1.1",
"react-dom": "19.1.1",
Copy link
Contributor Author

@samuelgja samuelgja Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 9c4386a to 1086542 Compare October 15, 2025 08:01
@samuelgja samuelgja force-pushed the feat/joint-react-plus-sync-and-updates branch from 1086542 to 5311d16 Compare October 15, 2025 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants