Feature/react compiler migration #3857

stigus · 2025-04-30T13:10:39Z

No description provided.

Re-enabled `babel-plugin-react-compiler` now that it is stable. Updated various dependencies, including `babel-plugin-react-compiler` to version 19.1.0-rc.1 and other packages like `@esbuild` to address minor version updates and improve compatibility.

… nå vises den som låst med en gang dersom kallet gikk gjennom #deploy-test-frontend

# Conflicts: # apps/dolly-frontend/src/main/js/package-lock.json

- Updates

… not being shown - Playwright test refactor for less flakiness - Updates

#deploy-test-frontend

# Conflicts: # apps/dolly-frontend/src/main/js/__tests__/mocks/mockServiceWorker.js # apps/dolly-frontend/src/main/js/package-lock.json # apps/dolly-frontend/src/main/js/package.json # apps/dolly-frontend/src/main/js/playwright/mocks/Selectors.tsx # apps/dolly-frontend/src/main/js/playwright/tests/Identvisning.spec.ts

…yTextInput` in all usages. - Delete obsolete `ui-demo` page and related styles. - Convert `Form` to `form` tag in `RedigerGruppe` for React Hook Form v7 compatibility. - Refactor `Attributt` and `AttributtKategori` components with improved state and visibility handling. - Add utility typings for attributes and batch operations. - Enhance test `Identvisning.spec` with refined assertions and timeouts. - Update `Panel` component to address environment-dependent operations and batch actions. - Bump `mockServiceWorker` to v2.10.5 and update dependencies (`css-tools` -> v4.4.4). #deploy-test-frontend

… with `useCallback` and utility typings. - Update `Panel.tsx` for simplified structure, environment-aware error handling, and streamlined batch operation actions. - Bump version to `3.1.10` in `package.json` and related lock file updates. - Upgrade several dependencies, including `@babel` and `fdir`, for improved tooling compatibility. #deploy-test-frontend

…readability and enhance state handling. - Add `AttributtKategori.tsx` as a new file to streamline attribute categorization logic. - Optimize `Steg1Person`, `Steg1Organisasjon`, and panels for modularity with `useMemo` and improved type support. - Simplify and update `stateModifier` with cleaner typings and helper abstractions for better reusability. - Enhance components for user efficiency, resolving redundant operations and UI inconsistencies. #deploy-test-frontend

…ye gammel funksjonalitet, med lite hell)

…ed typing, visibility logic, and cleaner JSX structure. - Update `stateModifier` with streamlined field resetting, checked attributes handling, and better form value updates. - Add interfaces for props, ensure type safety, and skip compilation for specific memo hooks. #deploy-test-frontend

…nts for improved structure. - Add controlled input behavior with `useControlled` in `Personinformasjon` component. - Introduce `useEffect` with reset logic for auto-reset functionality in `Personinformasjon`. - Remove unnecessary use of `useFormContext` in `Identifikasjon`. - Update dependency versions, including `react-pdf` to `10.1.0`. - Bump project version to `3.2.0` in `package.json` and `package-lock.json`. #deploy-test-frontend

# Conflicts: # apps/dolly-frontend/src/main/js/package-lock.json # apps/dolly-frontend/src/main/js/package.json

….json`. - Update dependencies, including `react-pdf` to `10.1.0`, `@babel` packages to `7.28.4`, and other related libraries. - Remove obsolete `@ampproject/remapping` and `@bundled-es-modules/tough-cookie` dependencies. - Add optional dependency `@napi-rs/canvas` for enhanced canvas support. #deploy-test-frontend

Copilot

Pull Request Overview

This PR migrates the frontend to use the React Compiler by enabling the babel-plugin-react-compiler plugin and makes various code adjustments for compatibility. The main purpose is to enhance React performance through automatic memoization and optimization.

Enable React Compiler plugin in Vite configuration with target React 19
Update form components and input handling for React Compiler compatibility
Refactor import paths from SoekForm to SoekFormWrapper across multiple files

Reviewed Changes

Copilot reviewed 39 out of 41 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
vite.config.js	Enable React Compiler babel plugin with React 19 target
Multiple soekFormPartials files	Update import paths from SoekForm to SoekFormWrapper
Checkbox.tsx	Refactor checkbox components with proper TypeScript types and forwardRef
TextInput.tsx	Remove FormFieldInput component and consolidate to DollyTextInput
index.tsx	Add React.StrictMode wrapper for better development checks
Personinformasjon.tsx	Add type assertions and useControlled prop for form inputs
Various other files	Minor updates for React Compiler compatibility

Files not reviewed (1)

apps/dolly-frontend/src/main/js/package-lock.json: Language not supported

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

Copilot · 2025-09-09T11:45:51Z

apps/dolly-frontend/src/main/js/src/pages/dollySoek/soekFormPartials/Personinformasjon.tsx

 				size="small"
 				placeholder="Velg kjønn ..."
-				onChange={(val: SyntheticEvent) => handleChange(val?.value || null, 'kjoenn')}
+				onChange={(val: SyntheticEvent) => handleChange((val as any)?.value || null, 'kjoenn')}


Using 'as any' type assertion bypasses TypeScript's type safety. Consider defining a proper interface for the select value or using a more specific type assertion like 'as {value: string}'.

Copilot · 2025-09-09T11:45:51Z

apps/dolly-frontend/src/main/js/src/pages/dollySoek/soekFormPartials/Personinformasjon.tsx

 			/>
 			<FormTextInput
 				name={`${personPath}.alderFom`}
+				useControlled={true}


The 'useControlled={true}' prop suggests this component is switching between controlled and uncontrolled modes. This pattern can cause React warnings and unexpected behavior. Consider consistently using controlled components throughout the form.

Suggested change

useControlled={true}

Copilot · 2025-09-09T11:45:51Z

apps/dolly-frontend/src/main/js/src/components/bestillingsveileder/stateModifier.tsx

+import { BestillingsveilederContext, BestillingsveilederContextType } from './BestillingsveilederContext'
 import * as _ from 'lodash-es'

 export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: any) => {


The 'use no memo' directive and its purpose should be documented more clearly. Consider adding a comment explaining why React Compiler optimization is being skipped for this specific component.

Suggested change

export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: any) => {

export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: any) => {

// React Compiler optimization is skipped for this hook because it relies on dynamic form state,

// mutable context, and side effects that are not compatible with automatic memoization.

// Ensuring up-to-date values and correct behavior requires disabling memoization here.

…nges and add `requestInterceptedAt` timestamp for improved request tracking. - Remove unused `MOCK_DEACTIVATE` handler from `mockServiceWorker.js`. - Upgrade dependency versions, including: - `@navikt/aksel-icons`, `@navikt/ds-css`, `@navikt/ds-react`, `@navikt/ds-tokens` to `7.30.0`. - `@jridgewell/trace-mapping` to `0.3.31`. - `country-data-list` to `1.5.5`. - `electron-to-chromium` to `1.5.217`. - `rettime` (new dependency) to `0.7.0`. - `zimmerframe` to `1.1.4`. #deploy-test-frontend

# Conflicts: # apps/dolly-frontend/src/main/js/__tests__/mocks/mockServiceWorker.js # apps/dolly-frontend/src/main/js/package-lock.json # apps/dolly-frontend/src/main/js/package.json # apps/dolly-frontend/src/main/js/src/pages/dollySoek/SoekForm.tsx # apps/dolly-frontend/src/main/js/src/pages/dollySoek/soekFormPartials/Identifikasjon.tsx # apps/dolly-frontend/src/main/js/src/pages/dollySoek/soekFormPartials/Personinformasjon.tsx # apps/dolly-frontend/src/main/js/src/pages/tenorSoek/soekFormPartials/FolkeregisteretStatsborgerskap.tsx

#deploy-test-frontend

…r consistent controlled input behavior. - Remove redundant `useControlled` prop declarations from `DollyTextInput` components. - Clean up console log statement in `RedigerGruppe.tsx`. #deploy-test-frontend

…s and reset form state correctly. - Integrate `ToastContainer`, `ErrorToast`, and `SuccessToast` for improved user feedback on form submissions. - Update `ErrorToast` to display error messages using `useEffect`. - Modify `GruppeHeader` to handle optional chaining for `brukertype` and improve tag display logic. - Enhance `LaasButton` and `SlettButton` to support optional auto mutation after actions. #deploy-test-frontend

…tional parameter for fetching future messages. - Modify `InformasjonsmeldingRepository` to rename `findGyldigMeldinger` to `findGjeldendeMeldinger` and add a new method `findGjeldendeOgFremtidigeMeldinger`. #deploy-test-dolly-backend

…cluding future messages. - Modify data fetching logic to use a dynamic URL based on the new parameter. - Ensure revalidation of both current and future infostriper data after create, update, and delete operations. - Adjust `DollyInfostripePage` to pass the new parameter to `useDollyInfostriper`. - Add consistent styling to `ActionMenu.Divider` for better UI spacing. #deploy-test-frontend

…ed input behavior. #deploy-test-frontend

- Update `@eslint/config-helpers` to version 0.4.0 - Update `@eslint/core` to version 0.16.0 - Update `@eslint/js` to version 9.37.0 - Update `@eslint/plugin-kit` to version 0.4.0 - Update `@types/node` to version 24.7.0 - Update `baseline-browser-mapping` to version 2.8.12 - Update `caniuse-lite` to version 1.0.30001748 - Update `dot-prop` to version 10.1.0 - Update `electron-to-chromium` to version 1.5.230 - Update `eslint` to version 9.37.0 - Update `node-releases` to version 2.0.23 - Update `react-hook-form` to version 7.64.0 - Update `undici-types` to version 7.14.0 #deploy-test-frontend

… `@navikt/ds-tokens`, and other dependencies to version 7.32.0. - Upgrade `@playwright` packages to version 1.56.0. - Bump `@typescript-eslint` packages to version 8.46.0. - Update `electron-to-chromium` to version 1.5.232. - Upgrade `less` to version 4.4.2. #deploy-test-frontend

…Header`. - Remove unused `StyledErrorMessageWithFocus` component from `FlyttPersonForm`. - Add 'use no memo' directive to skip compilation in `RedigerGruppe` and `StegVelger`. - Change form mode to 'onChange' in `RedigerGruppe`. - Remove `useControlled` prop from `DollyTextInput` components in `RedigerGruppe`. #deploy-test-frontend

betsytraran

Feil funnet under testing:

Ny/rediger gruppe: Validering vises ikke på tomme felter.
Opprett person, steg 1: Om man endrer antall/identtype/gruppe blir de ikke oppdatert i heading.
En del inputfelter går ikke an å fylle i.
Tenor-søket: Når man setter verdier i feltene skal man få en teller i headingen på hver kategori, denne har forsvunnet.
Tenor-søket: Om man setter input-felter fra lagrede søk i toppen, blir ikke feltet oppdatert (men verdi settes i form).
Organisasjoner - visning av bestillinger: Når man åpner en bestilling feiler den (ofte men ikke alltid) med Minified React error #300. Skjer også når man prøver å opprette bestilling.

- Update `renderBestillingsDetaljer` to improve readability and performance. - Create `BestillingsDetaljerWrapper` for better component structure. - Simplify `Enhetstre` component logic and improve type definitions. - Modify initial values for date handling in `initialValues.tsx`. - Remove unnecessary null checks in `OrganisasjonKriterier`. - Add memoization skip comments in `SoekForm` and `TenorSoekPage`. #deploy-test-frontend

…mproved code reuse. - Introduce `useBestillingData` hook for better encapsulation of context and data handling. - Update `OrganisasjonKriterier` to use `useBestillingData` instead of `mapBestillingData`. - Ensure null checks for `data` in `OrganisasjonKriterier` for safer rendering. #deploy-test-frontend

betsytraran

Godkjent, med forbehold om at du har testet endringene dine 🤩

stigus added 21 commits April 25, 2025 11:11

Merge branch 'master' into feature/react-compiler-migration

16bca42

- Fikser lås funksjonalitet som ikke oppdaterte gruppe etter sending,…

b73b723

… nå vises den som låst med en gang dersom kallet gikk gjennom #deploy-test-frontend

Merge branch 'master' into feature/react-compiler-migration

692790f

# Conflicts: # apps/dolly-frontend/src/main/js/package-lock.json

- Testing for the Laas functionality in GruppeHeader, some refactorings

ebda102

- Updates

- Refactored enkelInntektsmeldingVisning to fix a bug with virksomhet…

244c681

… not being shown - Playwright test refactor for less flakiness - Updates

Merge branch 'master' into feature/react-compiler-migration

10b1e81

deploy

4e41acd

#deploy-test-frontend

Mindre endringer og fix for test

c49b2a1

#deploy-test-frontend

Fjernet en haug av AI generert tull (prøvde GPT-5 for å refaktorere m…

af9f586

…ye gammel funksjonalitet, med lite hell)

Merge branch 'master' into feature/react-compiler-migration

023768e

Merge branch 'master' into feature/react-compiler-migration

44cfcdf

# Conflicts: # apps/dolly-frontend/src/main/js/package-lock.json # apps/dolly-frontend/src/main/js/package.json

Merge branch 'master' into feature/react-compiler-migration

ebf93d7

Merge branch 'master' into feature/react-compiler-migration

0e6dea6

stigus marked this pull request as ready for review September 9, 2025 11:44

Copilot AI review requested due to automatic review settings September 9, 2025 11:44

stigus requested a review from a team as a code owner September 9, 2025 11:44

Copilot AI reviewed Sep 9, 2025

View reviewed changes

stigus added 5 commits September 11, 2025 09:47

- Merge master, update, fix conflicts

e619788

#deploy-test-frontend

Merge branch 'master' into feature/react-compiler-migration

7d07ab8

- Add useControlled prop to multiple DollyTextInput components fo…

ffa8a88

…r consistent controlled input behavior. - Remove redundant `useControlled` prop declarations from `DollyTextInput` components. - Clean up console log statement in `RedigerGruppe.tsx`. #deploy-test-frontend

stigus added 9 commits October 3, 2025 14:46

- Add useControlled prop to FormTextInput for consistent controll…

44688dc

…ed input behavior. #deploy-test-frontend

Merge branch 'master' into feature/react-compiler-migration

2effaf9

Merge branch 'master' into feature/react-compiler-migration

88cdd87

betsytraran reviewed Oct 7, 2025

View reviewed changes

stigus added 2 commits October 7, 2025 13:32

betsytraran approved these changes Oct 13, 2025

View reviewed changes

Merge branch 'master' into feature/react-compiler-migration

8e123bd

stigus merged commit 5d9b4ed into master Oct 13, 2025
35 checks passed

stigus deleted the feature/react-compiler-migration branch October 13, 2025 12:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/react compiler migration #3857

Feature/react compiler migration #3857

Uh oh!

stigus commented Apr 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

betsytraran left a comment

Uh oh!

betsytraran left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: any) => {
+export const useStateModifierFns = (formMethods: UseFormReturn, setFormMutate: any) => {
+	// React Compiler optimization is skipped for this hook because it relies on dynamic form state,
+	// mutable context, and side effects that are not compatible with automatic memoization.
+	// Ensuring up-to-date values and correct behavior requires disabling memoization here.

Feature/react compiler migration #3857

Feature/react compiler migration #3857

Uh oh!

Conversation

stigus commented Apr 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

betsytraran left a comment

Choose a reason for hiding this comment

Uh oh!

betsytraran left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants