react-rx 2.0.4 → 2.1.1

package/dist/esm/reactiveComponent.js

@@ -9,6 +9,7 @@ function fromComponent(component) {
     wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent');
     return wrappedComponent;
 }
+// eslint-disable-next-line @typescript-eslint/ban-types
 function fromObservable(input$) {
     return function ReactiveComponent() {
         return createElement(Fragment, null, useObservable(input$));
@@ -19,6 +20,7 @@ export function reactiveComponent(observableOrComponent) {
         ? fromComponent(observableOrComponent)
         : fromObservable(observableOrComponent);
 }
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 export function forwardRef(component) {
     var wrappedComponent = reactForwardRef(function (props, ref) {
         return createElement(Fragment, null, useObservable(useRef(component(useAsObservable(props), ref)).current));

package/dist/esm/useAsObservable.js

@@ -1,6 +1,5 @@
 import { BehaviorSubject } from 'rxjs';
-import { useCallback, useRef } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { useCallback, useEffect, useRef } from 'react';
 import { distinctUntilChanged } from 'rxjs/operators';
 export function useAsObservable(value, operator) {
     var setup = useCallback(function () {
@@ -13,18 +12,28 @@ export function useAsObservable(value, operator) {
         ref.current = setup();
     }
     var observable = ref.current[0];
-    useIsomorphicEffect(function () {
+    useEffect(function () {
         if (!ref.current) {
             return;
         }
         var _a = ref.current, subject = _a[1];
         subject.next(value);
     }, [value, ref]);
-    useIsomorphicEffect(function () {
+    var shouldRestoreSubscriptionRef = useRef(false);
+    useEffect(function () {
+        if (shouldRestoreSubscriptionRef.current) {
+            if (!ref.current) {
+                ref.current = setup();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
         return function () {
             if (!ref.current) {
                 return;
             }
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = true;
             var _a = ref.current, subject = _a[1];
             subject.complete();
             ref.current = undefined;

package/dist/esm/useIsomorphicEffect.d.ts

@@ -1,2 +1,2 @@
-import { useLayoutEffect } from 'react';
-export declare const useIsomorphicEffect: typeof useLayoutEffect;
+import { useEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useEffect;

package/dist/esm/useObservable.js

@@ -1,7 +1,6 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { shareReplay, tap } from 'rxjs/operators';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
@@ -10,6 +9,7 @@ function getOrCreateStore(inputObservable, initialValue) {
     if (!cache.has(inputObservable)) {
         var entry_1 = { currentValue: initialValue };
         entry_1.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.currentValue = value); }));
+        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
         entry_1.subscription = entry_1.observable.subscribe();
         cache.set(inputObservable, entry_1);
     }
@@ -17,22 +17,38 @@ function getOrCreateStore(inputObservable, initialValue) {
 }
 export function useObservable(observable, initialValue) {
     var _a = useMemo(function () {
-        var record = getOrCreateStore(observable, getValue(initialValue));
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (store.subscription.closed) {
+            store.subscription = store.observable.subscribe();
+        }
         return [
             function getSnapshot() {
-                return record.currentValue;
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
+                return store.currentValue;
             },
             function subscribe(callback) {
-                var sub = record.observable.subscribe(function (next) { return callback(next); });
+                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
+                var sub = store.observable.subscribe(callback);
                 return function () {
                     sub.unsubscribe();
                 };
             },
         ];
     }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    useIsomorphicEffect(function () {
+    var shouldRestoreSubscriptionRef = useRef(false);
+    useEffect(function () {
+        var store = getOrCreateStore(observable, getValue(initialValue));
+        if (shouldRestoreSubscriptionRef.current) {
+            if (store.subscription.closed) {
+                store.subscription = store.observable.subscribe();
+            }
+            shouldRestoreSubscriptionRef.current = false;
+        }
         return function () {
-            getOrCreateStore(observable, getValue(initialValue)).subscription.unsubscribe();
+            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
+            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
+            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
+            store.subscription.unsubscribe();
         };
     }, [observable]);
     return useSyncExternalStore(subscribe, getSnapshot);

package/dist/esm/utils.js

@@ -4,10 +4,13 @@ import { startWith } from 'rxjs/operators';
 import { useContext, useRef, useState } from 'react';
 var createState = function (initialState) { return observableCallback(startWith(initialState)); };
 export function observeState(initial) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var _a = useState(initial), value = _a[0], update = _a[1];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return [useAsObservable(value), update];
 }
 export function observeCallback(operator) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var ref = useRef();
     if (!ref.current) {
         ref.current = operator ? observableCallback(operator) : observableCallback();
@@ -15,9 +18,11 @@ export function observeCallback(operator) {
     return ref.current;
 }
 export function observeContext(context) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     return useAsObservable(useContext(context));
 }
 export function observeElement() {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     var ref = useRef();
     if (!ref.current) {
         ref.current = createState(null);

package/package.json

@@ -1,11 +1,61 @@
 {
   "name": "react-rx",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "description": "React + RxJS = <3",
+  "keywords": [
+    "action",
+    "behavior",
+    "concurrent",
+    "es6",
+    "events",
+    "external",
+    "hooks",
+    "observables",
+    "observe",
+    "pipe",
+    "react",
+    "react18",
+    "reactive",
+    "realtime",
+    "rx",
+    "rxjs",
+    "sanity",
+    "sanity-io",
+    "store",
+    "streams",
+    "subject",
+    "suspense",
+    "sync",
+    "typesafe",
+    "typescript",
+    "use-sync-external-store",
+    "use"
+  ],
+  "homepage": "https://react-rx.dev",
+  "bugs": {
+    "url": "https://github.com/sanity-io/react-rx/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/react-rx.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "contributors": [
+    "Bjørge Næss <bjoerge@gmail.com>",
+    "Cody Olsen <stipsan@gmail.com> (https://github.com/stipsan)"
+  ],
   "main": "dist/cjs/index.js",
-  "types": "dist/cjs/index.d.ts",
   "module": "dist/esm/index.js",
-  "es2015": "dist/es2015/index.js",
+  "types": "dist/cjs/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "workspaces": [
+    "website",
+    "."
+  ],
   "scripts": {
     "build": "npm run build:es2015 && npm run build:esm && npm run build:cjs",
     "build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
@@ -14,25 +64,20 @@
     "clean": "rimraf dist",
     "dev": "cd website && npm run dev",
     "prepublishOnly": "npm run clean && npm run build",
-    "postpublish": "npm run clean",
     "watch": "run-p \"build:* -- --watch\"",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint --cache ."
   },
-  "keywords": [],
-  "author": "Bjørge Næss <bjoerge@gmail.com>",
-  "license": "MIT",
   "dependencies": {
     "observable-callback": "^1.0.1",
     "use-sync-external-store": "^1.2.0"
   },
-  "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "rxjs": "^6.5 || ^7"
-  },
   "devDependencies": {
+    "@sanity/semantic-release-preset": "^2.0.1",
     "@testing-library/dom": "^8.14.0",
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^28.1.4",
+    "@types/node": "^18.8.2",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "@types/use-sync-external-store": "^0.0.3",
@@ -42,29 +87,66 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
     "jsdom": "^20.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.2.1",
+    "prettier": "^2.7.1",
+    "prettier-plugin-packagejson": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.5",
     "ts-jest": "^28.0.5",
-    "typescript": "^4.2.2"
+    "typescript": "4.7.4"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bjoerge/react-rx.git"
+  "overrides": {
+    "@babel/plugin-proposal-class-properties": "7.10.1",
+    "@babel/plugin-proposal-optional-chaining": "7.10.3",
+    "@babel/plugin-transform-typescript": "7.10.3",
+    "@babel/preset-env": "7.10.3",
+    "@babel/preset-react": "7.10.1",
+    "@babel/preset-typescript": "7.10.1",
+    "@babel/standalone": "7.10.3",
+    "@mdx-js/loader": "1.6.22",
+    "@mdx-js/mdx": "1.6.22",
+    "@mdx-js/react": "1.6.22",
+    "@types/codemirror": "0.0.96",
+    "@types/history": "4.7.6",
+    "@types/mdx-js__react": "1.5.5",
+    "@webhotelier/webpack-fast-refresh": "5.0.1",
+    "babel-loader": "8.1.0",
+    "babel-plugin-static-fs": "3.0.0",
+    "babel-plugin-styled-components": "1.10.7",
+    "bezier-easing": "2.1.0",
+    "clean-webpack-plugin": "3.0.0",
+    "codemirror": "5.55.0",
+    "copy-webpack-plugin": "6.0.2",
+    "css-loader": "3.6.0",
+    "date-fns": "2.14.0",
+    "github-slugger": "1.3.0",
+    "history": "5.0.0",
+    "html-loader": "1.1.0",
+    "html-webpack-plugin": "4.3.0",
+    "markdown-toc": "1.2.0",
+    "react-codemirror2": "7.2.1",
+    "react-css-burger": "0.2.0",
+    "react-refresh": "0.8.3",
+    "remark-emoji": "2.1.0",
+    "remark-slug": "6.0.0",
+    "style-loader": "1.2.1",
+    "ts-loader": "7.0.5",
+    "ts-node": "8.10.2",
+    "tsconfig-paths": "3.11.0",
+    "webpack": "4.64.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.2"
   },
-  "bugs": {
-    "url": "https://github.com/bjoerge/react-rx/issues"
+  "peerDependencies": {
+    "react": "^16.8 || ^17 || ^18",
+    "rxjs": "^6.5 || ^7"
   },
-  "homepage": "https://react-rx.dev",
-  "workspaces": [
-    "website",
-    "."
-  ]
+  "es2015": "dist/es2015/index.js"
 }

package/src/__tests__/strictmode.test.ts

@@ -0,0 +1,79 @@
+import {BehaviorSubject, Observable, of} from 'rxjs'
+import {useObservable} from '../useObservable'
+import {createElement, Fragment, StrictMode, useEffect} from 'react'
+import {act, render} from '@testing-library/react'
+import {useAsObservable} from '../useAsObservable'
+
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+// NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
+
+test('Strict mode should trigger double mount effects and re-renders', async () => {
+  const subject = new BehaviorSubject(0)
+  const observable = subject.asObservable()
+
+  const returnedValues: unknown[] = []
+  let mountCount = 0
+  function ObservableComponent() {
+    useEffect(() => {
+      mountCount++
+    }, [])
+    const observedValue = useObservable(observable)
+    returnedValues.push(observedValue)
+    return createElement(Fragment, null, observedValue)
+  }
+
+  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  expect(mountCount).toEqual(2)
+
+  expect(returnedValues).toEqual([0, 0])
+
+  await wait(10)
+  act(() => subject.next(1))
+  expect(returnedValues).toEqual([0, 0, 1, 1])
+
+  act(() => subject.next(2))
+  expect(returnedValues).toEqual([0, 0, 1, 1, 2, 2])
+
+  expect(mountCount).toEqual(2)
+})
+
+test('Strict mode should unsubscribe the source observable on unmount', () => {
+  let subscribed = false
+  const observable = new Observable(() => {
+    subscribed = true
+    return () => {
+      subscribed = false
+    }
+  })
+
+  function ObservableComponent() {
+    useObservable(observable)
+    return createElement(Fragment, null)
+  }
+
+  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  expect(subscribed).toBe(true)
+  rerender(createElement(StrictMode, null, createElement('div')))
+  expect(subscribed).toBe(false)
+})
+
+test('useAsObservable should work in strict mode', async () => {
+  const returnedValues: unknown[] = []
+  function ObservableComponent(props: {count: number}) {
+    const count$ = useAsObservable(props.count)
+    const count = useObservable(count$)
+    returnedValues.push(count)
+    return createElement(Fragment, null, 'ok')
+  }
+
+  const {rerender} = render(
+    createElement(StrictMode, null, createElement(ObservableComponent, {count: 0})),
+  )
+
+  expect(returnedValues).toEqual([0, 0])
+
+  rerender(createElement(StrictMode, null, createElement(ObservableComponent, {count: 1})))
+
+  expect(returnedValues).toEqual([0, 0, 0, 0, 1, 1])
+})

package/src/__tests__/useAsObservable.test.tsx

@@ -0,0 +1,94 @@
+import {useAsObservable} from '../useAsObservable'
+import React from 'react'
+import {renderHook} from '@testing-library/react'
+import {Observable} from 'rxjs'
+
+test('the returned observable should receive a new value when component is rendered with a new value', () => {
+  const receivedValues: string[] = []
+  const {unmount, rerender} = renderHook(
+    (props: {value: string}) => {
+      const observable = useAsObservable(props.value)
+
+      React.useEffect(() => {
+        const subscription = observable.subscribe(v => {
+          receivedValues.push(v)
+        })
+        return () => {
+          subscription.unsubscribe()
+        }
+      }, [])
+    },
+    {initialProps: {value: 'initial'}},
+  )
+
+  rerender({value: 'rerender'})
+  rerender({value: 'rerender again'})
+
+  expect(receivedValues).toEqual(['initial', 'rerender', 'rerender again'])
+
+  unmount()
+})
+
+test('the returned observable should *not* receive a new value when component is rendered with an unchanged value', () => {
+  const receivedValues: string[] = []
+  const {unmount, rerender} = renderHook(
+    (props: {value: string}) => {
+      const observable = useAsObservable(props.value)
+
+      React.useEffect(() => {
+        const subscription = observable.subscribe(v => {
+          receivedValues.push(v)
+        })
+        return () => {
+          subscription.unsubscribe()
+        }
+      }, [])
+    },
+    {initialProps: {value: 'some value'}},
+  )
+
+  rerender({value: 'some value'})
+  rerender({value: 'some value'})
+
+  expect(receivedValues).toEqual(['some value'])
+
+  unmount()
+})
+
+test('the returned observable should have the same identity across multiple re-renders/hook calls', () => {
+  const returnValues: Observable<unknown>[] = []
+  const {unmount, rerender} = renderHook(() => {
+    returnValues.push(useAsObservable('render'))
+  })
+
+  rerender()
+  rerender()
+
+  const [initial, firstRerender, secondRerender] = returnValues
+  expect(initial).toBe(firstRerender)
+  expect(firstRerender).toBe(secondRerender)
+  unmount()
+})
+
+test('the returned observable should complete on unmount', () => {
+  let didComplete = false
+  const {unmount, rerender} = renderHook(() => {
+    const observable = useAsObservable('render')
+
+    React.useEffect(() => {
+      const subscription = observable.subscribe({
+        complete: () => {
+          didComplete = true
+        },
+      })
+      return () => {
+        subscription.unsubscribe()
+      }
+    }, [])
+  })
+  expect(didComplete).toBe(false)
+  rerender()
+  expect(didComplete).toBe(false)
+  unmount()
+  expect(didComplete).toBe(true)
+})

package/src/__tests__/useObservable.test.tsx

@@ -0,0 +1,145 @@
+import {act, render, renderHook} from '@testing-library/react'
+import {useObservable} from '../useObservable'
+import {asyncScheduler, Observable, of, scheduled, Subject, timer} from 'rxjs'
+import {mapTo} from 'rxjs/operators'
+import {createElement, Fragment} from 'react'
+
+test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
+  let subscribed = false
+  const observable = new Observable(() => {
+    subscribed = true
+    return () => {
+      subscribed = false
+    }
+  })
+
+  expect(subscribed).toBe(false)
+
+  const {unmount} = renderHook(() => useObservable(observable))
+  expect(subscribed).toBe(true)
+
+  unmount()
+  expect(subscribed).toBe(false)
+})
+
+test('should only subscribe once when given same observable on re-renders', () => {
+  let subscriptionCount = 0
+  const observable = new Observable(() => {
+    subscriptionCount++
+  })
+
+  expect(subscriptionCount).toBe(0)
+
+  const {unmount, rerender} = renderHook(() => useObservable(observable))
+  expect(subscriptionCount).toBe(1)
+  rerender()
+  expect(subscriptionCount).toBe(1)
+  unmount()
+
+  renderHook(() => useObservable(observable))
+  expect(subscriptionCount).toBe(2)
+})
+
+test('should not return undefined during render if initial value is given', () => {
+  const observable = timer(100).pipe(mapTo('emitted value'))
+
+  const returnedValues: unknown[] = []
+  function ObservableComponent() {
+    const observedValue = useObservable(observable, 'initial value')
+    returnedValues.push(observedValue)
+    return createElement(Fragment, null, observedValue)
+  }
+  render(createElement(ObservableComponent))
+  expect(returnedValues).toEqual(expect.arrayContaining(['initial value']))
+})
+
+test('should not return undefined during render if observable is sync', () => {
+  const observable = of('initial value')
+
+  const returnedValues: unknown[] = []
+  function ObservableComponent() {
+    const observedValue = useObservable(observable)
+    returnedValues.push(observedValue)
+    return createElement(Fragment, null, observedValue)
+  }
+  render(createElement(ObservableComponent))
+  expect(returnedValues).toEqual(expect.arrayContaining(['initial value']))
+})
+
+test('should return undefined during first render if observable is async', () => {
+  const observable = scheduled('async value', asyncScheduler)
+
+  const returnedValues: unknown[] = []
+  function ObservableComponent() {
+    const observedValue = useObservable(observable)
+    returnedValues.push(observedValue)
+    return createElement(Fragment, null, observedValue)
+  }
+  render(createElement(ObservableComponent))
+  expect(returnedValues).toEqual(expect.arrayContaining([undefined]))
+})
+
+test('should have sync values from an observable as initial value', () => {
+  const observable = of('something sync')
+  const {result} = renderHook(() => useObservable(observable))
+  expect(result.current).toBe('something sync')
+})
+
+test('should have undefined as initial value from delayed observables', () => {
+  const {result, unmount} = renderHook(() =>
+    useObservable(scheduled('something async', asyncScheduler)),
+  )
+  expect(result.current).toBeUndefined()
+  unmount()
+})
+
+test('should have passed initialValue as initial value from delayed observables', () => {
+  const {result, unmount} = renderHook(() =>
+    useObservable(scheduled('something async', asyncScheduler), 'initial'),
+  )
+  expect(result.current).toBe('initial')
+  unmount()
+})
+
+test('should update with values from observables', () => {
+  const values$ = new Subject<string>()
+  const {result, unmount} = renderHook(() => useObservable(values$))
+
+  expect(result.current).toBe(undefined)
+
+  act(() => values$.next('something'))
+  expect(result.current).toBe('something')
+
+  act(() => values$.next('otherthing'))
+  expect(result.current).toBe('otherthing')
+  unmount()
+})
+
+test('should re-subscribe when receiving a new observable', () => {
+  const first$ = new Subject<string>()
+  const second$ = new Subject<string>()
+
+  let current$ = first$
+
+  const {result, rerender, unmount} = renderHook(() => useObservable(current$, '!!initial!!'))
+
+  act(() => first$.next('first 1'))
+  expect(result.current).toBe('first 1')
+
+  current$ = second$
+
+  rerender()
+
+  // since observable #2 hasn't emitted a value yet, we should use the initial value
+  expect(result.current).toBe('!!initial!!')
+
+  // Now we should be subscribed to second$ and it's emission should be returned
+  act(() => second$.next('second 1'))
+  expect(result.current).toBe('second 1')
+
+  // we should no longer be subscribed to the first and ignore any emissions
+  act(() => first$.next('first 2'))
+  expect(result.current).toBe('second 1')
+
+  unmount()
+})

package/src/displayName.ts

@@ -6,5 +6,6 @@ const getDisplayName = (Component: any) => {
   return (Component && (Component.displayName || Component.name)) || 'Unknown'
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 export const wrapDisplayName = (BaseComponent: Function, wrapperName: string) =>
   `${wrapperName}(${getDisplayName(BaseComponent)})`

package/src/reactiveComponent.ts

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import {Observable} from 'rxjs'
 import {wrapDisplayName} from './displayName'
 import {useAsObservable} from './useAsObservable'
@@ -26,6 +27,7 @@ function fromComponent<Props>(component: Component<Props>): FunctionComponent<Pr
   return wrappedComponent
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 function fromObservable<Props>(input$: Observable<ReactNode>): FunctionComponent<{}> {
   return function ReactiveComponent() {
     return createElement(Fragment, null, useObservable<ReactNode>(input$))
@@ -47,6 +49,7 @@ type ForwardRefComponent<RefType, Props> = (
   ref: Ref<RefType>,
 ) => Observable<ReactNode>
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
 export function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>) {
   const wrappedComponent = reactForwardRef((props: Props, ref: Ref<RefType>) => {
     return createElement(