React 19 #3820
Open
React 19 #3820
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
* feat: deprecate React 17 support and require React 18+ - Update render-component.tsx to use React 18's createRoot API instead of deprecated ReactDOM.render - Update render-app.ts to use React 18 rendering via renderComponent - Update peerDependencies in all React packages to require React 18+ (^18.0.0) - Remove @equinor/fusion-framework-legacy-interopt package entirely - Update documentation to remove references to legacy-interopt - Create changesets for breaking changes (major version bumps) - Export RenderTeardown type from render-component Resolves #3504 * test: add test suite for renderApp function - Add Vitest configuration with vite-tsconfig-paths for workspace resolution - Add comprehensive test coverage for renderApp function - Add vitest, @testing-library/react, and happy-dom as dev dependencies - Update tsconfig to exclude test files from compilation - Add RenderTeardown type export Tests verify: - createComponent is called with correct arguments - renderComponent integration works correctly - Teardown function properly unmounts components - Works with and without configure callback Signed-off-by: Odin Thomas Rochmann <[email protected]> * fix: address Copilot review comments on React 18 migration - Update changeset to accurately reflect that renderComponent and renderApp were modernized, not removed - Fix test mock to match ComponentRenderer return type signature - Format codebase with biome --------- Signed-off-by: Odin Thomas Rochmann <[email protected]>
* feat: upgrade to React 19 compatible fusion-react-styles and context-selector - Upgrade @equinor/fusion-react-styles to 2.0.0 (Material-UI removed) - Upgrade @equinor/fusion-react-context-selector to 2.0.1 Related to: #3698 * feat: add React 19 styling cookbook Add new cookbook demonstrating React 19 compatible version of @equinor/fusion-react-styles. This cookbook showcases: - ThemeProvider setup and usage - makeStyles and createStyles patterns - Theme value access patterns (getVariable, .css, .attributes) - Dynamic styles with props - CSS-in-JS with classes instead of inline styles - Automatic stylesheet cleanup on component unmount The cookbook tests the React 19 compatible version of fusion-react-styles with Material-UI dependency removed. Related to: #3698 * chore: update lock file Signed-off-by: Odin Thomas Rochmann <[email protected]> * fix: make version reference generic in styling cookbook Remove specific version number from App.tsx to avoid needing updates when dependencies change --------- Signed-off-by: Odin Thomas Rochmann <[email protected]>
* feat(navigation): upgrade to React Router v7 and refactor architecture - Upgrade @remix-run/router from v1.8.0 to v1.23.0 for React Router v7 compatibility - Restructure history implementations (BrowserHistory, HashHistory, MemoryHistory) - Add state management with reducer pattern - Add NavigationProvider and INavigationProvider exports - Add enableNavigation helper function - Add navigation events (NavigateEvent, NavigatedEvent) - Improve type safety and organization - Add comprehensive test coverage - Update feature-flag URL plugin to use navigation module Path type BREAKING CHANGE: See navigation_refactor-architecture.md for migration details * feat(react-router): add DSL API for React Router v7 routes Add new @equinor/fusion-framework-react-router package that provides: - Router component integrating React Router v7 with Fusion Framework - DSL API (layout, index, route, prefix) for defining routes - Fusion context injection into loaders, actions, and components - Lazy loading support with automatic code splitting - Route schema generation for documentation and manifests - Type-safe route definitions with TypeScript support This package integrates with the Fusion navigation module for history and basename management, and provides a seamless developer experience for building Fusion applications with React Router v7. * refactor: update supporting packages for React Router v7 compatibility - react-app: Export Fusion type for better type reusability - react-module: Add type exports (Modules, ModulesInstanceType, etc.) - imports: Add createImportMetaResolvePlugin for Vite plugin support - cli: Add route schema type exports for app manifest generation - module-app: Add route schema support to app manifests - observable: Add actions export path for better tree-shaking - telemetry: Export TelemetryScope enum - dev-portal: Upgrade react-router-dom to v7.9.5 - vite-plugin-api-service: Fix pathname extraction for route matching - bookmark: Update navigation API usage * chore: update pnpm-lock.yaml for React Router v7 dependencies * chore(cookbooks): update cookbooks for React Router v7 compatibility - Update app-react-router cookbook with comprehensive React Router v7 example - Add route definitions, API integration, and navigation examples - Update package dependencies for React Router v7 - Update bookmark, charts, and people cookbooks dependencies * docs(router): improve React Router README and navigation documentation - Add comprehensive React Router README with quick start guide - Document DSL API (layout, index, route, prefix) - Add Fusion context usage examples - Document route schema generation - Update navigation module documentation * feat(navigation): deprecate createRouter Add deprecation notice for createRouter in NavigationProvider interface and implementation. This change is part of the migration away from Remix Router. * chore(cookbook): migrate bookmark-advanced to react-router Migrate app-react-bookmark-advanced cookbook from @remix-run/router to @equinor/fusion-framework-react-router: - Replace NavigationProvider.createRouter() with Router component - Update routes to use DSL API (layout, index, route) - Add Root.tsx component with layout pattern - Add enableBookmark configuration * chore(cookbook): migrate charts to react-router Migrate app-react-charts cookbook to @equinor/fusion-framework-react-router: - Replace useRouter() hook with Router component - Update routes to use DSL API (layout, index, route, prefix) - Move Root component to pages/Root.tsx - Simplify nested routes using prefix helper * chore(cookbook): migrate people to react-router Migrate app-react-people cookbook to @equinor/fusion-framework-react-router: - Remove @remix-run/router dependency - Replace useRouter() hook with Router component - Update routes to use DSL API (layout, index, route) - Update page components for new routing pattern * chore: regen lock Signed-off-by: Odin Thomas Rochmann <[email protected]> * docs: add React Router module documentation page to vue-press - Add React Router documentation page at modules/react/router/ - Update sidebar to include React Router under new React section - Create changeset for documentation updates * refactor: move `toRouteSchema` to a dedicated subpath export. Signed-off-by: Odin Thomas Rochmann <[email protected]> * refactor: Update router core, route definitions, and example app for consistency and cleanup. Signed-off-by: Odin Thomas Rochmann <[email protected]> * fix: resolve linting issues in affected files - Remove useless switch case clause in ProductApi - Remove useless catch clause in PeoplePage loader - Replace void with undefined in app-manifest type - Change @ts-ignore to @ts-expect-error in dev-portal config - Remove unused imports in history.flows - Add biome-ignore comments for intentional any types * refactor: nest `RouteSchemaEntry` params and search under an `options` object and remove a debug log. Signed-off-by: Odin Thomas Rochmann <[email protected]> * Update packages/vite-plugins/api-service/src/create-route-matcher.ts Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * feat(react-router): add vite plugin for route generation - Add vite plugin for automatic route generation from file system - Update Router and route handling to support vite plugin integration - Update cookbooks to use new router features - Add vite config loading support in CLI * feat: add raw imports support with markdown plugin - Add new vite plugin for raw imports (fusion-framework-vite-plugin-raw-imports) - Add markdown plugin support to imports utility - Update CLI to support raw imports configuration - Add changesets for versioning * refactor(router): simplify route creation and remove helper utilities - Remove create-lazy-loader.ts and create-routes.ts helper functions - Update route classes to handle lazy loading directly - Simplify route creation API across BaseRoute, Route, IndexRoute, LayoutRoute, PrefixRoute - Update Router and vite plugin to work with simplified route structure * fix(router): resolve linting issues - Replace string concatenation with template literal in vite plugin - Change @ts-ignore to @ts-expect-error for better type safety - Prefix unused loader parameter with underscore * docs(router): improve README with better structure and explanations - Add 'Why this package exists' and 'When should you use it' sections - Reorganize content with clearer sections and better flow - Add 'Best practices' and 'How it works' sections - Improve code examples and remove import.meta.resolve usage - Add troubleshooting section for common issues - Enhance documentation for DSL, Vite plugin, and route schemas * refactor(react-router): move workspace dependencies to dependencies Move workspace dependencies from peerDependencies/devDependencies to dependencies for better monorepo dependency resolution. * fix(react-router): use react-router-dom for hook imports Update import statement to use react-router-dom instead of react-router for useLoaderData, useActionData, and useRouteError hooks. * chore: regen lock Signed-off-by: Odin Thomas Rochmann <[email protected]> * refactor(react-router): remove method chaining support from route DSL Remove method chaining (.description(), .params(), .search()) from route DSL. Routes now use schema parameter passed to constructors instead. Updated documentation examples to reflect new API. * feat(cli): add app serve command for previewing built applications Add new 'app serve' command that serves built applications through the dev-portal, providing a production-like preview environment. The command automatically detects the build directory from Vite configuration and supports custom port, host, directory, manifest, and config options. - Add serve command implementation and bin entry point - Add serve command to app command group - Update CLI documentation with serve command details - Add changeset for minor version bump * chore(cookbook): update app-react-router for serve command - Add serve script with preserve hook to build before serving - Update HTTP client config to use window.location.origin instead of hardcoded port - Change tsconfig jsx mode from react-jsxdev to react-jsx for production builds * refactor(cli): streamline code formatting in serve command and config - Simplify conditional expressions in app-serve.ts for better readability - Ensure consistent formatting in log messages and configuration settings - Remove unnecessary whitespace in serve.ts for cleaner code Signed-off-by: Odin Thomas Rochmann <[email protected]> * refactor(): fix code review comments Improve NavigationProvider implementation: - Replace custom ID generation with uuid v7 for better uniqueness and RFC compliance - Enhance normalizePathname to remove trailing slashes consistently - Improve telemetry scope classification (Framework vs Application) - Fix deprecated navigator property usage in favor of history - Refactor _createToPath for better clarity and maintainability - Remove unused mock-window test helper Add navigation features: - Add new utility functions: encodeTrailingWhitespace, hasProtocol - Improve path resolution with better window.location.origin fallback - Enhance reducer to properly handle REPLACE action history cleanup - Add validation check in validateCurrentLocation flow - Improve JSDoc documentation throughout Update router cookbook and examples: - Simplify DSL API by removing import.meta.resolve() wrapper requirement - Update all route examples to use cleaner './Component.tsx' syntax - Fix Layout component to use destructured useNavigation state - Update React Router documentation with clearer TypeScript examples Add router infrastructure: - Add http/selectors export to @equinor/fusion-framework-react-app - Add vite-plugin tests for route transformation - Improve plugin regex patterns and export detection - Enhance markdown plugin with configurable filter options - Update raw-imports plugin with better JSDoc documentation Update types and documentation: - Add RouteSchemaEntry type to app module for route documentation - Rename Params type to UrlParameters for clarity - Clean up old ESLint comments in favor of Biome - Improve navigation README with better TypeScript examples - Update router README with clearer usage guidance * refactor(router): migrate pages to styled-components and EDS - Add styled-components dependency - Convert all pages to use styled-components with EDS tokens - Replace inline styles with styled-components - Use EDS Typography components for headings and text - Convert clientLoader and action functions to regular function declarations - Update handle exports to use 'as const satisfies RouterHandle' - Remove obsolete .styles.ts files - Add useCallback hooks to event handlers in UsersPage * refactor: convert components to use styled-components and EDS tokens - Replace inline styles with styled-components in all components - Use EDS design tokens for spacing, colors, and typography - Fix invalid token references (blue_100, code.fontFamily) - Remove UserDetail.styles.ts in favor of styled-components - Fix header font sizes in ProductList component * refactor(router): improve RouteObject type definition Refactor RouteObject type to use Omit instead of intersection type for proper handle and children property overrides. Export RouteObject type and update Router component to use ReactRouterRouteObject for internal router creation. Update useNavigationItems hook to use exported RouteObject type. * style: fix formatting in router types and exports * fix(imports): handle query parameters in import paths - Strip query parameters (e.g., ?raw) from paths in test setup - Update import utilities to properly handle query parameters - Improve loader detection for raw imports in test environment - Update router tests to reflect import handling changes * refactor: clean up documentation and plugin handling - Remove misleading statement about losing subsequent entries in navigation types - Simplify plugin handling in import-script by removing duplicate variable * refactor(validateCurrentLocation): simplify state validation logic * refactor(router): improve styling and remove redundant code - Convert Layout component to use styled-components with EDS tokens - Remove deprecated navigator property test from NavigationProvider - Clean up resolveFilePath extension checking logic in vite plugin --------- Signed-off-by: Odin Thomas Rochmann <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Move navigation properties (label, icon, path) from handle.navigation to handle.route to simplify the router handle structure. Update useNavigationItems hook to read from handle.route instead of handle.navigation.
* feat: upgrade to React 19 and remove support for React < 18 - Upgrade all React dependencies to 19.2.1 - Update @types/react to 19.2.7 - Update peer dependencies to support React 18 and 19 only (^18.0.0 || ^19.0.0) - Remove support for React 16 and 17 - Fix JSX namespace issues for React 19 compatibility - Update all React-related packages across the monorepo BREAKING CHANGE: React 16 and 17 are no longer supported. Users must upgrade to React 18 or 19 before upgrading these packages. * feat: extend JSX namespace for custom 'fwc-person-provider' element - Declare a new intrinsic element 'fwc-person-provider' in the JSX namespace to enhance type safety and integration with React components. - This change facilitates the use of the custom element within React applications, ensuring proper type definitions for attributes and props. Signed-off-by: Odin Thomas Rochmann <[email protected]> * test: enhance useObservableSelector tests for improved coverage - Added additional assertions to the useObservableSelector test cases to verify observable state updates. - Ensured that the expected values are correctly asserted after observable changes, improving test reliability and clarity. Signed-off-by: Odin Thomas Rochmann <[email protected]> --------- Signed-off-by: Odin Thomas Rochmann <[email protected]>
Signed-off-by: Odin Thomas Rochmann <[email protected]>
🦋 Changeset detectedLatest commit: a91f4bf The changes in this PR will be included in the next version bump. This PR includes no changesetsWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
github-actions
bot
added
👨🏻🍳 cookbooks
👾 React
💾 CLI
Contributor
There was a problem hiding this comment.
Pull request overview
This is a large PR primarily focused on upgrading React dependencies from v18 to v19 and introducing a new React Router integration package. The PR modernizes the codebase and removes deprecated legacy interoperability code.
Key changes:
- React version upgrade from 18.x to 19.x across all packages
- New
@equinor/fusion-framework-react-routerpackage with DSL for React Router v7 - New Vite plugin for raw file imports
- Complete navigation module rewrite with observable-based state management
- Removal of
@equinor/fusion-framework-legacy-interoptpackage - React 19 migration for render APIs (ReactDOM.render → createRoot)
Reviewed changes
Copilot reviewed 255 out of 268 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/vite-plugins/raw-imports/* | New Vite plugin for importing files as raw strings with ?raw query parameter |
| packages/vite-plugins/api-service/src/process-route.ts | Fixed route matching to exclude query parameters |
| packages/utils/query/package.json | React 19 dependency updates and peer dependency adjustments |
| packages/utils/observable/tests/react/* | Test updates for React 19 compatibility |
| packages/utils/observable/package.json | React 19 dependency updates and new "actions" export |
| packages/utils/imports/* | New markdown and import-meta-resolve plugins for esbuild |
| packages/react/router/* | New comprehensive React Router v7 integration with DSL and Vite plugin |
| packages/react/modules/*/package.json | React 19 peer dependency updates across all module packages |
| packages/react/modules/module/src/* | Enhanced TypeScript types and improved module instance handling |
| packages/react/modules/bookmark/src/portal/* | Navigation API updates for new navigation module |
| packages/react/legacy-interopt/* | Complete removal of legacy interoperability package |
| packages/react/app/* | React 19 migration (createRoot), new test coverage, and type improvements |
| packages/modules/navigation/* | Complete rewrite with observable state management and new History API |
| packages/modules/telemetry/src/index.ts | Export addition for TelemetryScope |
| navigator.push(to); | ||
| if (location.pathname !== pathname) { | ||
| const hash = location.hash; | ||
| const search = location.search ? removeBookmarkIdFromURL(location.search) : undefined; |
There was a problem hiding this comment.
Potential undefined search parameter. The navigate method expects a To type which requires search to be a string, not string | undefined. Either provide an empty string when search is falsy or ensure the navigate signature accepts undefined.
Suggested change
| const search = location.search ? removeBookmarkIdFromURL(location.search) : undefined; | |
| const search = location.search ? removeBookmarkIdFromURL(location.search) : ''; |
| export const useAppModules = < | ||
| T extends Array<AnyModule> | unknown = unknown, | ||
| >(): AppModulesInstance<T> => useModules<AppModulesInstance<T>>(); | ||
| >(): AppModulesInstance<T> => useModules<AppModules<T>>() as AppModulesInstance<T>; |
There was a problem hiding this comment.
Type assertion with as AppModulesInstance<T> suggests a type mismatch. Consider updating useModules to return the correct type or refactoring the types to eliminate the need for this cast.
Suggested change
| >(): AppModulesInstance<T> => useModules<AppModules<T>>() as AppModulesInstance<T>; | |
| >(): AppModulesInstance<T> => useModules<AppModulesInstance<T>>(); |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Modified the publish command in the next.yml workflow to use 'pnpm publish -r --no-git-checks --report-summary' for pre-release publishing, enhancing the publishing process. Signed-off-by: Odin Thomas Rochmann <[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.
Why
Why is this change needed?
What is the current behavior?
What is the new behavior?
Does this PR introduce a breaking change?
Additional context
Related issues
closes:
ref:
Checklist