@heartlandone/vega-react 2.92.0 → 2.94.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heartlandone/vega-react",
-  "version": "2.91.0",
+  "version": "2.93.0",
   "description": "React specific wrapper for @heartlandone/vega",
   "license": "UNLICENSED",
   "sideEffects": false,
@@ -8,7 +8,7 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@heartlandone/vega": "2.91.0"
+    "@heartlandone/vega": "2.93.0"
   },
   "peerDependencies": {
     "react": ">=16.7.0",

package/dist/react-component-lib/utils/attachProps.js

@@ -24,6 +24,16 @@ export const attachProps = (node, newProps, oldProps = {}) => {
                     syncEvent(node, eventNameLc, newProps[name]);
                 }
             }
+            else if (
+            // Skip re-applying when the JSX value is referentially unchanged.
+            // This prevents attachProps from clobbering host-element properties
+            // mutated outside React (e.g. devtools, imperative refs) on every
+            // parent re-render. See VD-9458.
+            oldProps !== newProps &&
+                Object.prototype.hasOwnProperty.call(oldProps, name) &&
+                oldProps[name] === newProps[name]) {
+                return;
+            }
             else if (FeatureFlag.isEnabled('VEGA_REACT.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD')) {
                 attachProp(node, newProps, name);
             }

package/dist/react-component-lib/utils/attachProps.test.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tests for attachProps reference-equality guard (VD-9458).
+ *
+ * Regression: when a parent React component re-renders, attachProps used to
+ * re-assign every prop on the host element unconditionally. On Next.js the
+ * assignment is deferred via `componentOnReady().then(...)`, which means any
+ * imperative mutation a developer makes on the host element (e.g. from
+ * devtools, refs, or web-component watchers) gets clobbered by the next
+ * React render even when the JSX value did not change.
+ *
+ * The fix is a per-prop `oldProps[name] === newProps[name]` early-return.
+ */
+import "jest";

package/dist/react-component-lib/utils/attachProps.test.js

@@ -0,0 +1,136 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Tests for attachProps reference-equality guard (VD-9458).
+ *
+ * Regression: when a parent React component re-renders, attachProps used to
+ * re-assign every prop on the host element unconditionally. On Next.js the
+ * assignment is deferred via `componentOnReady().then(...)`, which means any
+ * imperative mutation a developer makes on the host element (e.g. from
+ * devtools, refs, or web-component watchers) gets clobbered by the next
+ * React render even when the JSX value did not change.
+ *
+ * The fix is a per-prop `oldProps[name] === newProps[name]` early-return.
+ */
+import "jest";
+jest.mock("@heartlandone/vega", () => ({
+    FeatureFlag: {
+        // Use the synchronous attach path so assertions are deterministic.
+        isEnabled: (flag) => flag === "VEGA_REACT.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD",
+    },
+}), { virtual: true });
+import { attachProps } from "./attachProps";
+describe("attachProps reference-equality guard (VD-9458)", () => {
+    let node;
+    const setSpy = jest.fn();
+    beforeEach(() => {
+        setSpy.mockClear();
+        node = document.createElement("div");
+        // Intercept every property set so we can assert which props were
+        // (re-)assigned without relying on Stencil internals.
+        Object.defineProperty(node, "vegaDropdownProps", {
+            configurable: true,
+            set: setSpy,
+            get: () => undefined,
+        });
+    });
+    it("does not re-assign a prop whose value is referentially equal across renders", () => {
+        const stableProps = { allowSelectAll: false };
+        attachProps(node, { vegaDropdownProps: stableProps }, {});
+        expect(setSpy).toHaveBeenCalledTimes(1);
+        // Simulate a parent re-render that passes the same object reference.
+        attachProps(node, { vegaDropdownProps: stableProps }, { vegaDropdownProps: stableProps });
+        // The guard should short-circuit — no second assignment, so any value
+        // mutated on the host element between renders is preserved.
+        expect(setSpy).toHaveBeenCalledTimes(1);
+    });
+    it("still assigns when the prop reference changes between renders", () => {
+        const firstProps = { allowSelectAll: false };
+        const nextProps = { allowSelectAll: true };
+        attachProps(node, { vegaDropdownProps: firstProps }, {});
+        attachProps(node, { vegaDropdownProps: nextProps }, { vegaDropdownProps: firstProps });
+        expect(setSpy).toHaveBeenCalledTimes(2);
+        expect(setSpy).toHaveBeenLastCalledWith(nextProps);
+    });
+    it("assigns on the first render even when oldProps is empty", () => {
+        attachProps(node, { vegaDropdownProps: { allowSelectAll: true } }, {});
+        expect(setSpy).toHaveBeenCalledTimes(1);
+    });
+    it("assigns on mount when oldProps and newProps are the same object reference", () => {
+        const mountProps = { vegaDropdownProps: { allowSelectAll: true } };
+        // createReactComponent calls attachProps(this.props, this.props) on mount.
+        attachProps(node, mountProps, mountProps);
+        // Mount should still attach properties to host element.
+        expect(setSpy).toHaveBeenCalledTimes(1);
+    });
+});
+/**
+ * VD-9458 async path coverage.
+ *
+ * When the `VEGA_REACT.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD` flag
+ * is OFF and the host element exposes `componentOnReady()`, attachProps
+ * defers the assignment via `node.componentOnReady().then(...)`. This is the
+ * exact Next.js code path where the regression was observed — React's deferred
+ * write landed in a microtask AFTER an imperative mutation, clobbering it.
+ *
+ * Re-import attachProps in isolation with the flag mocked to `false` so this
+ * suite exercises the async branch independently of the sync-path suite above.
+ */
+describe("attachProps reference-equality guard — async componentOnReady path (VD-9458)", () => {
+    let asyncAttachProps;
+    beforeAll(() => {
+        jest.resetModules();
+        jest.doMock("@heartlandone/vega", () => ({
+            FeatureFlag: {
+                // Force the async componentOnReady().then(...) path.
+                isEnabled: () => false,
+            },
+        }), { virtual: true });
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        asyncAttachProps = require("./attachProps").attachProps;
+    });
+    function createNodeWithOnReady(setSpy) {
+        const el = document.createElement("div");
+        Object.defineProperty(el, "vegaDropdownProps", {
+            configurable: true,
+            set: setSpy,
+            get: () => undefined,
+        });
+        el.componentOnReady =
+            () => Promise.resolve(el);
+        return el;
+    }
+    it("does not schedule a deferred re-assignment when the prop reference is stable across renders", () => __awaiter(void 0, void 0, void 0, function* () {
+        const setSpy = jest.fn();
+        const node = createNodeWithOnReady(setSpy);
+        const stableProps = { allowSelectAll: false };
+        asyncAttachProps(node, { vegaDropdownProps: stableProps }, {});
+        asyncAttachProps(node, { vegaDropdownProps: stableProps }, { vegaDropdownProps: stableProps });
+        // Flush any pending componentOnReady().then(...) microtasks.
+        yield Promise.resolve();
+        yield Promise.resolve();
+        // First call must still attach (mount), second call must be skipped by
+        // the guard — otherwise the deferred write would clobber any imperative
+        // mutation made between renders (the original VD-9458 Next.js bug).
+        expect(setSpy).toHaveBeenCalledTimes(1);
+    }));
+    it("still schedules a deferred re-assignment when the prop reference changes between renders", () => __awaiter(void 0, void 0, void 0, function* () {
+        const setSpy = jest.fn();
+        const node = createNodeWithOnReady(setSpy);
+        const firstProps = { allowSelectAll: false };
+        const nextProps = { allowSelectAll: true };
+        asyncAttachProps(node, { vegaDropdownProps: firstProps }, {});
+        asyncAttachProps(node, { vegaDropdownProps: nextProps }, { vegaDropdownProps: firstProps });
+        yield Promise.resolve();
+        yield Promise.resolve();
+        expect(setSpy).toHaveBeenCalledTimes(2);
+        expect(setSpy).toHaveBeenLastCalledWith(nextProps);
+    }));
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heartlandone/vega-react",
   "sideEffects": false,
-  "version": "2.92.0",
+  "version": "2.94.0",
   "description": "React specific wrapper for @heartlandone/vega",
   "license": "UNLICENSED",
   "scripts": {
@@ -44,7 +44,7 @@
     "typescript": "^4.0.0"
   },
   "dependencies": {
-    "@heartlandone/vega": "2.92.0"
+    "@heartlandone/vega": "2.94.0"
   },
   "peerDependencies": {
     "react": ">=16.7.0",