Fix Preact component updating

lemonmade · Sep 16, 2024 · c41c4d1 · c41c4d1
1 parent ad139f7
commit c41c4d1
Show file tree

Hide file tree

Showing 21 changed files with 102 additions and 46 deletions.
diff --git a/.changeset/weak-dancers-relax.md b/.changeset/weak-dancers-relax.md
@@ -0,0 +1,5 @@
+---
+'@watching/clips-react': patch
+---
+
+Fix Preact component updating
diff --git a/packages/clips-react/source/components/Action.tsx b/packages/clips-react/source/components/Action.tsx
@@ -35,14 +35,15 @@ export const Action = forwardRef<ActionElement, ActionProps>(function Action(
   {overlay, children, onPress, ...props},
   ref,
 ) {
-  useCustomElementProperties(props, ref);
+  const allProps: ActionProps = {
+    onpress: onPress ? (event) => event.respondWith(onPress()) : undefined,
+    ...props,
+  };
+
+  const wrapperRef = useCustomElementProperties(allProps, ref);
 
   return (
-    <ui-action
-      ref={ref}
-      {...props}
-      onpress={onPress ? (event) => event.respondWith(onPress()) : undefined}
-    >
+    <ui-action {...allProps} ref={wrapperRef}>
       {children}
       {overlay && isValidElement(overlay)
         ? cloneElement<any>(overlay, {slot: 'overlay'})

diff --git a/packages/clips-react/source/components/BlockGrid.tsx b/packages/clips-react/source/components/BlockGrid.tsx
@@ -26,7 +26,7 @@ declare module 'react' {
 
 export const BlockGrid = forwardRef<BlockGridElement, BlockGridProps>(
   function BlockGrid(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-block-grid {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-block-grid {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/BlockStack.tsx b/packages/clips-react/source/components/BlockStack.tsx
@@ -26,7 +26,7 @@ declare module 'react' {
 
 export const BlockStack = forwardRef<BlockStackElement, BlockStackProps>(
   function BlockStack(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-block-stack {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-block-stack {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Disclosure.tsx b/packages/clips-react/source/components/Disclosure.tsx
@@ -41,10 +41,10 @@ export const Disclosure = forwardRef<DisclosureElement, DisclosureProps>(
       }
     }
 
-    useCustomElementProperties(allProps, ref);
+    const wrapperRef = useCustomElementProperties(allProps, ref);
 
     return (
-      <ui-disclosure {...props} ref={ref}>
+      <ui-disclosure {...props} ref={wrapperRef}>
         {children}
         {labelElement}
       </ui-disclosure>

diff --git a/packages/clips-react/source/components/Footer.tsx b/packages/clips-react/source/components/Footer.tsx
@@ -24,7 +24,7 @@ declare module 'react' {
 
 export const Footer = forwardRef<FooterElement, FooterProps>(
   function Footer(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-footer {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-footer {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Grid.tsx b/packages/clips-react/source/components/Grid.tsx
@@ -27,7 +27,7 @@ declare module 'react' {
 
 export const Grid = forwardRef<GridElement, GridProps>(
   function Grid(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-grid {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-grid {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Header.tsx b/packages/clips-react/source/components/Header.tsx
@@ -21,7 +21,7 @@ declare module 'react' {
 
 export const Header = forwardRef<HeaderElement, HeaderProps>(
   function Header(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-header {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-header {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Heading.tsx b/packages/clips-react/source/components/Heading.tsx
@@ -26,7 +26,7 @@ declare module 'react' {
 
 export const Heading = forwardRef<HeadingElement, HeadingProps>(
   function Heading(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-heading {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-heading {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Image.tsx b/packages/clips-react/source/components/Image.tsx
@@ -23,7 +23,7 @@ declare module 'react' {
 
 export const Image = forwardRef<ImageElement, ImageProps>(
   function Image(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-image {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-image {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/InlineGrid.tsx b/packages/clips-react/source/components/InlineGrid.tsx
@@ -26,7 +26,7 @@ declare module 'react' {
 
 export const InlineGrid = forwardRef<InlineGridElement, InlineGridProps>(
   function InlineGrid(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-inline-grid {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-inline-grid {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/InlineStack.tsx b/packages/clips-react/source/components/InlineStack.tsx
@@ -26,7 +26,7 @@ declare module 'react' {
 
 export const InlineStack = forwardRef<InlineStackElement, InlineStackProps>(
   function InlineStack(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-inline-stack {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-inline-stack {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Modal.tsx b/packages/clips-react/source/components/Modal.tsx
@@ -23,7 +23,7 @@ declare module 'react' {
 
 export const Modal = forwardRef<ModalElement, ModalProps>(
   function Modal(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-modal {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-modal {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Popover.tsx b/packages/clips-react/source/components/Popover.tsx
@@ -22,7 +22,7 @@ declare module 'react' {
 
 export const Popover = forwardRef<PopoverElement, PopoverProps>(
   function Popover(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-popover {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-popover {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Section.tsx b/packages/clips-react/source/components/Section.tsx
@@ -21,7 +21,7 @@ declare module 'react' {
 
 export const Section = forwardRef<SectionElement, SectionProps>(
   function Section(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-section {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-section {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Stack.tsx b/packages/clips-react/source/components/Stack.tsx
@@ -27,7 +27,7 @@ declare module 'react' {
 
 export const Stack = forwardRef<StackElement, StackProps>(
   function Stack(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-stack {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-stack {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/Text.tsx b/packages/clips-react/source/components/Text.tsx
@@ -23,7 +23,7 @@ declare module 'react' {
 
 export const Text = forwardRef<TextElement, TextProps>(
   function Text(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-text {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-text {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/TextBlock.tsx b/packages/clips-react/source/components/TextBlock.tsx
@@ -22,7 +22,7 @@ declare module 'react' {
 
 export const TextBlock = forwardRef<TextBlockElement, TextBlockProps>(
   function TextBlock(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-text-block {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-text-block {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/TextField.tsx b/packages/clips-react/source/components/TextField.tsx
@@ -51,10 +51,10 @@ export const TextField = forwardRef<TextFieldElement, TextFieldProps>(
       }
     }
 
-    useCustomElementProperties(allProps, ref);
+    const wrapperRef = useCustomElementProperties(allProps, ref);
 
     return (
-      <ui-text-field {...allProps} ref={ref}>
+      <ui-text-field {...allProps} ref={wrapperRef}>
         {labelChild}
       </ui-text-field>
     );

diff --git a/packages/clips-react/source/components/View.tsx b/packages/clips-react/source/components/View.tsx
@@ -36,7 +36,7 @@ declare module 'react' {
 
 export const View = forwardRef<ViewElement, ViewProps>(
   function View(props, ref) {
-    useCustomElementProperties(props, ref);
-    return <ui-view {...props} ref={ref} />;
+    const wrapperRef = useCustomElementProperties(props, ref);
+    return <ui-view {...props} ref={wrapperRef} />;
   },
 );
diff --git a/packages/clips-react/source/components/shared.ts b/packages/clips-react/source/components/shared.ts
@@ -1,4 +1,10 @@
-import {useLayoutEffect, useRef, type ForwardedRef} from 'react';
+import {
+  useLayoutEffect,
+  useRef,
+  type ForwardedRef,
+  type RefObject,
+  type RefCallback,
+} from 'react';
 
 export function useCustomElementProperties<T extends Element>(
   props: Record<string, any>,
@@ -7,15 +13,22 @@ export function useCustomElementProperties<T extends Element>(
   const internalsRef = useRef<{
     names: Set<string>;
     values: Record<string, any>;
+    ref: WrapperRef<T>;
   }>();
-  internalsRef.current ??= {names: new Set(), values: {}};
+  internalsRef.current ??= {
+    names: new Set(),
+    values: {},
+    ref: new WrapperRef(ref),
+  };
+
+  const internals = internalsRef.current;
+  internals.ref.wrapped = ref;
 
   useLayoutEffect(() => {
-    const internals = internalsRef.current!;
     const oldNames = new Set(internals.names);
     const newNames = new Set(Object.keys(props));
 
-    const element = typeof ref === 'function' ? undefined : ref?.current;
+    const element = internals.ref.current;
 
     for (const name of newNames) {
       const newValue = props[name];
@@ -50,4 +63,41 @@ export function useCustomElementProperties<T extends Element>(
 
     internals.names = newNames;
   });
+
+  return internals.ref.callback;
+}
+
+class WrapperRef<T> implements RefObject<T> {
+  #wrapped: ForwardedRef<T>;
+  #current: T | null = null;
+
+  get wrapped() {
+    return this.#wrapped;
+  }
+
+  set wrapped(wrapped: ForwardedRef<T>) {
+    this.#wrapped = wrapped;
+  }
+
+  get current() {
+    return this.#current;
+  }
+
+  set current(value: T | null) {
+    this.#current = value;
+
+    if (typeof this.#wrapped === 'function') {
+      this.#wrapped(value);
+    } else if (this.#wrapped) {
+      this.#wrapped.current = value;
+    }
+  }
+
+  callback: RefCallback<T> = (value) => {
+    this.current = value;
+  };
+
+  constructor(wrapped: ForwardedRef<T>) {
+    this.#wrapped = wrapped;
+  }
 }