Merge main into fix/issue-1050-usefield-undefined-initial

Resolved merge conflicts:
- src/useField.ts: Kept useSyncExternalStore-based implementation
- src/useField.test.js: Merged additional test cases from main
- src/Field.test.js: Merged comment improvements from main
- yarn.lock: Regenerated after merge
- Added type declaration for use-sync-external-store/shim
- Fixed TypeScript errors for component type and getIn parameters

Author: erikras-dinesh-agent

eslint.config.js eslint.config.mjseslint.config.js renamed to eslint.config.mjs

@@ -161,6 +161,21 @@ export default [
     },
   },
 
+  // Configuration for .mjs files (ES modules in Node.js environment)
+  {
+    files: ["**/*.mjs"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...nodeGlobals,
+      },
+    },
+    rules: {
+      "no-undef": "error",
+    },
+  },
+
   // Specific overrides for ALL test files (JS and TS)
   {
     files: ["**/*.test.js", "**/*.test.jsx", "**/*.test.ts", "**/*.test.tsx"],

package-scripts.js

@@ -16,7 +16,7 @@ module.exports = {
       ),
       size: {
         description: "check the size of the bundle",
-        script: "bundlesize",
+        script: "size-limit",
       },
     },
     build: {

package.json

@@ -42,18 +42,19 @@
     "@rollup/plugin-node-resolve": "^15.2.4",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
+    "@size-limit/preset-small-lib": "^11.1.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^20.17.50",
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.5",
+    "@types/use-sync-external-store": "^1.5.0",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
-    "bundlesize": "^0.18.2",
     "doctoc": "^2.2.1",
     "dtslint": "^4.2.1",
     "eslint": "^9.27.0",
@@ -78,6 +79,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup": "^3.29.5",
+    "size-limit": "^11.1.6",
     "tar": "^7.4.3",
     "ts-essentials": "^10.0.4",
     "tslint": "^6.1.3",
@@ -100,18 +102,18 @@
       "/typescript/"
     ]
   },
-  "bundlesize": [
+  "size-limit": [
     {
       "path": "dist/react-final-form.umd.min.js",
-      "threshold": "2kB"
+      "limit": "4kB"
     },
     {
       "path": "dist/react-final-form.es.js",
-      "threshold": "3kB"
+      "limit": "4kB"
     },
     {
       "path": "dist/react-final-form.cjs.js",
-      "threshold": "3kB"
+      "limit": "4kB"
     }
   ],
   "collective": {

rollup.config.js rollup.config.mjsrollup.config.js renamed to rollup.config.mjs

@@ -801,16 +801,18 @@ describe("Field", () => {
     );
     expect(red).toHaveBeenCalled();
     expect(red).toHaveBeenCalledTimes(2);
-    expect(red.mock.calls[0][0].input.checked).toBe(true); // Now correctly true on first render!
-    expect(red.mock.calls[1][0].input.checked).toBe(true); // Still true for "red" checkbox
+    // After fix #1050, initialValues work on first render
+    expect(red.mock.calls[0][0].input.checked).toBe(true); // Correctly true for "red" from initialValues
+    expect(red.mock.calls[1][0].input.checked).toBe(true);
     expect(green).toHaveBeenCalled();
     expect(green).toHaveBeenCalledTimes(2);
-    expect(green.mock.calls[0][0].input.checked).toBe(false); // Correctly false on first render
-    expect(green.mock.calls[1][0].input.checked).toBe(false); // Still false for "green" checkbox
+    expect(green.mock.calls[0][0].input.checked).toBe(false);
+    expect(green.mock.calls[1][0].input.checked).toBe(false); // Correctly false for "green"
     expect(blue).toHaveBeenCalled();
     expect(blue).toHaveBeenCalledTimes(2);
-    expect(blue.mock.calls[0][0].input.checked).toBe(true); // Now correctly true on first render!
-    expect(blue.mock.calls[1][0].input.checked).toBe(true); // Still true for "blue" checkbox
+    // After fix #1050, initialValues work on first render
+    expect(blue.mock.calls[0][0].input.checked).toBe(true); // Correctly true for "blue" from initialValues
+    expect(blue.mock.calls[1][0].input.checked).toBe(true);
   });
 
   it("should render radio buttons with checked prop", () => {
@@ -880,16 +882,17 @@ describe("Field", () => {
     );
     expect(red).toHaveBeenCalled();
     expect(red).toHaveBeenCalledTimes(2);
-    expect(red.mock.calls[0][0].input.checked).toBe(false); // Correctly false on first render
-    expect(red.mock.calls[1][0].input.checked).toBe(false); // Still false for "red" radio
+    expect(red.mock.calls[0][0].input.checked).toBe(false);
+    expect(red.mock.calls[1][0].input.checked).toBe(false); // Correctly false for "red" radio
     expect(green).toHaveBeenCalled();
     expect(green).toHaveBeenCalledTimes(2);
-    expect(green.mock.calls[0][0].input.checked).toBe(true); // Now correctly true on first render!
-    expect(green.mock.calls[1][0].input.checked).toBe(true); // Still true for "green" radio
+    // After fix #1050, initialValues work on first render
+    expect(green.mock.calls[0][0].input.checked).toBe(true); // Correctly true for "green" from initialValues
+    expect(green.mock.calls[1][0].input.checked).toBe(true);
     expect(blue).toHaveBeenCalled();
     expect(blue).toHaveBeenCalledTimes(2);
-    expect(blue.mock.calls[0][0].input.checked).toBe(false); // Correctly false on first render
-    expect(blue.mock.calls[1][0].input.checked).toBe(false); // Still false for "blue" radio
+    expect(blue.mock.calls[0][0].input.checked).toBe(false);
+    expect(blue.mock.calls[1][0].input.checked).toBe(false); // Correctly false for "blue" radio
   });
 
   it("should use isEqual to calculate dirty/pristine", () => {
@@ -967,8 +970,6 @@ describe("Field", () => {
         )}
       </Form>,
     );
-    // With the useSyncExternalStore fix for #1050, validation runs once
-    // during the initial field registration
     expect(fooValidate).toHaveBeenCalledTimes(1);
     expect(barValidate).toHaveBeenCalledTimes(1);
     expect(bazValidate).toHaveBeenCalledTimes(1);
@@ -1010,8 +1011,9 @@ describe("Field", () => {
       </Form>,
     );
 
-    // With the fix for #1050, initialValues are now correctly available on first render,
-    // so the select multiple value IS an array from the start - no warning needed!
+    // After fix #1050, initialValues work on first render, so select multiple
+    // correctly gets the array value from initialValues and no longer triggers
+    // React's "must be an array" warning
     expect(errorSpy).toHaveBeenCalledTimes(0);
 
     // Reset the spy to test the actual Field warnings

src/Field.test.js

@@ -416,4 +416,47 @@ describe("FormSpy", () => {
     // Implementation of this test case is not provided in the original file or the code block
     // This test case is assumed to exist based on the code block
   });
+
+  it("should not throw error when subscribing to active (fix #1055)", () => {
+    // Issue #1055: Cannot set property active of #<Object> which has only a getter
+    // This was caused by spreading lazy state with getter-only properties into renderProps
+    const spy = jest.fn();
+    const { container, getByTestId } = render(
+      <Form onSubmit={onSubmitMock}>
+        {() => (
+          <form>
+            <Field name="name" component="input" data-testid="name" />
+            <FormSpy
+              subscription={{ active: true, values: true }}
+              render={wrapWith(spy, (props) => {
+                // Verify that we can access active and values without error
+                const { active, values } = props;
+                return <div data-testid="spy">active={String(active)} values={JSON.stringify(values)}</div>;
+              })}
+            />
+          </form>
+        )}
+      </Form>,
+    );
+    
+    // Should render without throwing "Cannot set property active" error
+    expect(container).toBeTruthy();
+    expect(spy).toHaveBeenCalled();
+    
+    // Verify that active and values properties exist and can be accessed
+    const props = spy.mock.calls[spy.mock.calls.length - 1][0];
+    expect("active" in props).toBe(true);
+    expect("values" in props).toBe(true);
+    
+    // Active should be undefined initially (no field focused)
+    expect(props.active).toBeUndefined();
+    
+    // Values should be defined (empty object initially)
+    expect(props.values).toBeDefined();
+    expect(props.values).toEqual({});
+    
+    // When we focus a field, active should be the field name
+    fireEvent.focus(getByTestId("name"));
+    expect(spy.mock.calls[spy.mock.calls.length - 1][0].active).toBe("name");
+  });
 });

src/FormSpy.test.js

@@ -16,7 +16,6 @@ function FormSpy<FormValues = Record<string, any>>({
   }
 
   const renderProps: FormSpyRenderProps<FormValues> = {
-    ...state,
     form: {
       ...reactFinalForm,
       reset: (eventOrValues?: any) => {

src/FormSpy.tsx

@@ -69,4 +69,76 @@ describe("renderComponent", () => {
     expect(getA).not.toHaveBeenCalled();
     expect(getB).not.toHaveBeenCalled();
   });
+
+  it("should not overwrite getter-only properties when using component prop", () => {
+    // This test reproduces issue #1055
+    // When lazyProps has getter-only properties (like 'active'), and props contains
+    // a property with the same name, it should not attempt to overwrite the getter
+    const Component = () => null;
+    const props = {
+      component: Component,
+      active: "value-from-props", // This would cause "Cannot set property active" error
+      customProp: "custom",
+    };
+    const lazyProps = {};
+    Object.defineProperty(lazyProps, "active", {
+      get: () => "value-from-getter",
+      enumerable: true,
+      // Note: no setter - this is getter-only
+    });
+    const name = "TestComponent";
+
+    // Should not throw "Cannot set property active"
+    let result;
+    expect(() => {
+      result = renderComponent(props, lazyProps, name);
+    }).not.toThrow();
+
+    // Check the React element was created with correct props
+    expect(result.type).toBe(Component);
+    
+    // The getter-only property should remain and use the getter value
+    expect(result.props.active).toBe("value-from-getter");
+
+    // Custom props should still be passed through
+    expect(result.props.customProp).toBe("custom");
+  });
+
+  it("should handle getter-only properties in all render paths", () => {
+    const lazyProps = {};
+    Object.defineProperty(lazyProps, "active", {
+      get: () => "getter-value",
+      enumerable: true,
+    });
+
+    // Test with render prop
+    const render = jest.fn();
+    renderComponent(
+      { render, active: "prop-value" },
+      lazyProps,
+      "TestComponent",
+    );
+    expect(render).toHaveBeenCalled();
+    expect(render.mock.calls[0][0].active).toBe("getter-value");
+
+    // Test with children function
+    const children = jest.fn();
+    renderComponent(
+      { children, active: "prop-value" },
+      lazyProps,
+      "TestComponent",
+    );
+    expect(children).toHaveBeenCalled();
+    expect(children.mock.calls[0][0].active).toBe("getter-value");
+
+    // Test with component prop
+    const Component = () => null;
+    const result = renderComponent(
+      { component: Component, active: "prop-value" },
+      lazyProps,
+      "TestComponent",
+    );
+    expect(result.type).toBe(Component);
+    expect(result.props.active).toBe("getter-value");
+  });
 });

src/renderComponent.test.js

@@ -10,13 +10,20 @@ export default function renderComponent<T>(
 ): React.ReactNode {
   const { render, children, component, ...rest } = props;
   if (component) {
-    return React.createElement(
-      component,
-      Object.assign(lazyProps, rest, {
-        children,
-        render,
-      }),
-    );
+    // FIX: Don't use Object.assign which tries to overwrite getters
+    // Instead, create a new object with lazyProps descriptors first,
+    // then add non-conflicting properties from rest
+    const result = {} as any;
+    Object.defineProperties(result, Object.getOwnPropertyDescriptors(lazyProps));
+    const restDescriptors = Object.getOwnPropertyDescriptors(rest);
+    for (const key in restDescriptors) {
+      if (!(key in result)) {
+        Object.defineProperty(result, key, restDescriptors[key]);
+      }
+    }
+    result.children = children;
+    result.render = render;
+    return React.createElement(component, result);
   }
   if (render) {
     const result = {} as T;

src/renderComponent.ts

@@ -0,0 +1,7 @@
+declare module 'use-sync-external-store/shim' {
+  export function useSyncExternalStore<Snapshot>(
+    subscribe: (onStoreChange: () => void) => () => void,
+    getSnapshot: () => Snapshot,
+    getServerSnapshot?: () => Snapshot,
+  ): Snapshot;
+}