Add forwardRef in reflect (#74)

Author: sergeysova

src/core/reflect.ts

@@ -31,15 +31,17 @@ export function reflectFactory(context: Context) {
   return function reflect<
     Props,
     Bind extends BindableProps<Props> = BindableProps<Props>,
-  >(config: ReflectConfig<Props, Bind>): React.FC<PartialBoundProps<Props, Bind>> {
+  >(
+    config: ReflectConfig<Props, Bind>,
+  ): React.ExoticComponent<PartialBoundProps<Props, Bind>> {
     const { stores, events, data } = sortProps(config);
 
-    return (props) => {
+    return React.forwardRef((props, ref) => {
       const storeProps = context.useUnit(stores);
       const eventsProps = context.useUnit(events);
 
       const elementProps: Props = Object.assign(
-        {},
+        { ref },
         storeProps,
         eventsProps,
         data,
@@ -58,7 +60,7 @@ export function reflectFactory(context: Context) {
       }, []);
 
       return React.createElement(config.view as any, elementProps as any);
-    };
+    });
   };
 }
 

src/core/types.ts

@@ -7,10 +7,14 @@ export interface Context {
   useList: typeof useList;
 }
 
+type UnbindableProps = 'key' | 'ref';
+
 type Storify<Prop> = Omit<Store<Prop>, 'updates' | 'reset' | 'on' | 'off' | 'thru'>;
 
 export type BindableProps<Props> = {
-  [Key in keyof Props]?: Props[Key] extends (_payload: any) => void
+  [Key in Exclude<keyof Props, UnbindableProps>]?: Props[Key] extends (
+    payload: any,
+  ) => void
     ? Storify<Props[Key]> | Props[Key] | Event<void>
     : Storify<Props[Key]> | Props[Key];
 };

src/no-ssr/reflect.test.tsx

@@ -145,6 +145,20 @@ test('component inside', async () => {
   expect(inputName.value).toBe('Bob');
 });
 
+test('forwardRef', async () => {
+  const Name = reflect({
+    view: React.forwardRef((props, ref: React.ForwardedRef<HTMLInputElement>) => {
+      return <input data-testid="name" ref={ref} />;
+    }),
+    bind: {},
+  });
+
+  const ref = React.createRef<HTMLInputElement>();
+
+  const container = render(<Name ref={ref} />);
+  expect(container.getByTestId('name')).toBe(ref.current);
+});
+
 describe('hooks', () => {
   describe('mounted', () => {
     test('callback', () => {

type-tests/types-reflect.tsx

@@ -122,3 +122,41 @@ import { reflect } from '../src';
 
   expectType<React.FC>(ReflectedButton);
 }
+
+// reflect should not allow binding ref
+{
+  const Text = React.forwardRef(
+    (_: { value: string }, ref: React.ForwardedRef<HTMLSpanElement>) => null,
+  );
+
+  const ReflectedText = reflect({
+    view: Text,
+    bind: {
+      // @ts-expect-error
+      ref: React.createRef<HTMLSpanElement>(),
+    },
+  });
+
+  expectType<React.VFC>(ReflectedText);
+}
+
+// reflect should pass ref through
+{
+  const $value = createStore<string>('');
+  const Text = React.forwardRef(
+    (_: { value: string }, ref: React.ForwardedRef<HTMLSpanElement>) => null,
+  );
+
+  const ReflectedText = reflect({
+    view: Text,
+    bind: { value: $value },
+  });
+
+  const App: React.FC = () => {
+    const ref = React.useRef(null);
+
+    return <ReflectedText ref={ref} />;
+  };
+
+  expectType<React.FC>(App);
+}