fix: use replace options method for improved hmr support

Author: danielwaltz

packages/react/src/hooks/useAdhesive.ts

@@ -76,6 +76,6 @@ export function useAdhesive(
   }, [target]);
 
   useEffect(() => {
-    adhesive.current?.updateOptions(getValidatedOptions());
+    adhesive.current?.replaceOptions(getValidatedOptions());
   }, [options]);
 }

packages/vue/src/composables/useAdhesive.ts

@@ -106,6 +106,6 @@ export function useAdhesive(
 
   watch(
     () => toValue(options),
-    () => adhesive?.updateOptions(getValidatedOptions()),
+    () => adhesive?.replaceOptions(getValidatedOptions()),
   );
 }

packages/vue/src/directives/vAdhesive.ts

@@ -73,6 +73,6 @@ export const vAdhesive: AdhesiveDirective = {
     const options = binding.value;
     const position = binding.arg || options?.position;
 
-    el.__adhesive__?.updateOptions({ ...options, position });
+    el.__adhesive__?.replaceOptions({ ...options, position });
   },
 };

test/unit/react.test.tsx

@@ -172,7 +172,7 @@ describe("React Integration", () => {
         ).toBeInTheDocument();
       });
 
-      it("calls updateOptions when options change", async () => {
+      it("calls replaceOptions when options change", async () => {
         const user = userEvent.setup();
         renderTestComponent();
         const {
@@ -181,24 +181,24 @@ describe("React Integration", () => {
           toggleOffsetButton,
         } = getTestElements();
 
-        mockAdhesiveInstance.updateOptions.mockClear();
+        mockAdhesiveInstance.replaceOptions.mockClear();
 
         await user.click(toggleEnabledButton);
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             enabled: false,
           }),
         );
 
         await user.click(togglePositionButton);
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             position: "bottom",
           }),
         );
 
         await user.click(toggleOffsetButton);
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             offset: TEST_OFFSETS[2],
           }),

test/unit/vue.test.ts

@@ -169,30 +169,30 @@ describe("Vue Integration", () => {
         expect(offsetButton).toHaveTextContent("10");
       });
 
-      it("calls updateOptions when options change", async () => {
+      it("calls replaceOptions when options change", async () => {
         const { getByTestId } = renderTestComponent();
         const toggleEnabledButton = getByTestId("toggle-enabled");
         const togglePositionButton = getByTestId("toggle-position");
         const toggleOffsetButton = getByTestId("toggle-offset");
 
-        mockAdhesiveInstance.updateOptions.mockClear();
+        mockAdhesiveInstance.replaceOptions.mockClear();
 
         await fireEvent.click(toggleEnabledButton);
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             enabled: false,
           }),
         );
 
         await fireEvent.click(togglePositionButton);
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             position: "bottom",
           }),
         );
 
         await fireEvent.click(toggleOffsetButton);
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             offset: TEST_OFFSETS[2],
           }),
@@ -496,26 +496,26 @@ describe("Vue Integration", () => {
         expect(getByTestId("toggle-enabled")).toHaveTextContent("Disable");
         expect(getByTestId("change-offset")).toHaveTextContent("Offset: 10");
 
-        mockAdhesiveInstance.updateOptions.mockClear();
+        mockAdhesiveInstance.replaceOptions.mockClear();
 
         await fireEvent.click(getByTestId("toggle-enabled"));
         expect(getByTestId("toggle-enabled")).toHaveTextContent("Enable");
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             enabled: false,
           }),
         );
 
         await fireEvent.click(getByTestId("change-offset"));
         expect(getByTestId("change-offset")).toHaveTextContent("Offset: 30");
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             offset: 30,
           }),
         );
       });
 
-      it("calls updateOptions when directive value changes", async () => {
+      it("calls replaceOptions when directive value changes", async () => {
         const TestComponent = createTestApp(
           `
           <div>
@@ -547,11 +547,11 @@ describe("Vue Integration", () => {
           },
         });
 
-        mockAdhesiveInstance.updateOptions.mockClear();
+        mockAdhesiveInstance.replaceOptions.mockClear();
 
         await fireEvent.click(getByTestId("increment-offset"));
 
-        expect(mockAdhesiveInstance.updateOptions).toHaveBeenCalledWith(
+        expect(mockAdhesiveInstance.replaceOptions).toHaveBeenCalledWith(
           expect.objectContaining({
             offset: 20,
           }),