react-fast-hoc
Advanced tools
# react-fast-hoc | ||
## 0.3.1 | ||
### Patch Changes | ||
- 32e18c1: Fixed wrapping into hoc in case of nested `React.memo` | ||
Resolves: [#17](https://github.com/XantreGodlike/react-fast-hoc/issues/17) | ||
```tsx | ||
const Component = transformProps( | ||
React.memo( | ||
React.memo((props) => { | ||
console.log(props); // prev: { c: 30 }, now: { a: 10, b: 20, c: 30 } | ||
return null; | ||
}) | ||
), | ||
(props) => ({ ...props, a: 10, b: 20 }) | ||
); | ||
root.render(<Component c={30} />); | ||
``` | ||
## 0.3.0 | ||
@@ -4,0 +25,0 @@ |
import { ComposeLeft, Objects, Booleans, Fn, Call, Identity } from 'hotscript'; | ||
import { Simplify } from 'type-fest'; | ||
import * as react from 'react'; | ||
import react__default, { ComponentPropsWithRef, ComponentType, MemoExoticComponent, ForwardRefExoticComponent, FunctionComponent, ElementType, ReactNode, Ref } from 'react'; | ||
import * as React$1 from 'react'; | ||
import React__default, { ComponentPropsWithRef, ComponentType, MemoExoticComponent, ForwardRefExoticComponent, FunctionComponent, ElementType, ReactNode } from 'react'; | ||
@@ -122,3 +122,3 @@ /** | ||
type ComponentArgs = [props: Record<any, unknown>, ref: react__default.Ref<unknown>]; | ||
type ComponentArgs = [props: Record<any, unknown>, ref: React__default.Ref<unknown>]; | ||
declare class RewriteCall implements ProxyHandler<Function> { | ||
@@ -128,8 +128,8 @@ private handler; | ||
args: ComponentArgs; | ||
renderComponent: (...args: ComponentArgs) => react__default.ReactNode; | ||
}) => react__default.ReactNode); | ||
apply(target: Function, self: Function, args: any[]): react__default.ReactNode; | ||
renderComponent: (...args: ComponentArgs) => React__default.ReactNode; | ||
}) => React__default.ReactNode); | ||
apply(target: Function, self: Function, args: any[]): React__default.ReactNode; | ||
} | ||
declare const isRef: <T = unknown>(maybeRef: unknown) => maybeRef is Ref<T>; | ||
declare const isRef: <T = unknown>(maybeRef: unknown) => maybeRef is React__default.Ref<T>; | ||
@@ -151,4 +151,4 @@ /** | ||
*/ | ||
declare const wrapIntoProxy: (proxy: ProxyHandler<Function>) => <T extends react.ComponentType<any>>(Component: T) => WrappedComponent<Identity, PropsBase, T>; | ||
declare const wrapIntoProxy: (proxy: ProxyHandler<Function>) => <T extends React$1.ComponentType<any>>(Component: T) => WrappedComponent<Identity, PropsBase, T>; | ||
export { ChangeComponentProps, CreateHocComponentOptions, CreateHocNameOption, CreateHocOptions, CreateHocReturn, CreateHocSharedOptions, CreateTransformPropsOptions, DisplayNameTransform, HocTransformer, HocTypeTransform, MimicToNewComponentHandler, PropsBase, PropsTransformer, RewriteCall, TransformProps, TransformPropsReturn, WrappedComponent, WrappedComponentCreator, createHoc, createTransformProps, isRef, transformProps, wrapIntoProxy }; |
{ | ||
"name": "react-fast-hoc", | ||
"license": "MIT", | ||
"version": "0.3.0", | ||
"version": "0.3.1", | ||
"sideEffects": false, | ||
@@ -6,0 +6,0 @@ "type": "module", |
@@ -1,2 +0,2 @@ | ||
import type { ReactNode, Ref } from "react"; | ||
import React, { isValidElement, type ReactNode, type Ref } from "react"; | ||
import type { HocTransformer, MimicToNewComponentHandler } from "./handlers"; | ||
@@ -46,3 +46,3 @@ import { isClassComponent, toFunctional, type Get } from "./toFunctional"; | ||
compare: null | ((a: TProps, b: TProps) => boolean); | ||
type: (props: TProps) => ReactNode; | ||
type: RealComponentType<TProps, IRef>; | ||
} | ||
@@ -69,14 +69,14 @@ | { | ||
const wrapFunctionalFROrDefault = <TProps extends object>( | ||
type ForwardRefComponent<TProps extends object> = Extract< | ||
ReactFunctionalComponentType<TProps>, | ||
{ $$typeof: typeof REACT_FORWARD_REF_TYPE } | ||
>; | ||
type RegularFunctionComponent<TProps extends object> = Exclude< | ||
ReactFunctionalComponentType<TProps>, | ||
ForwardRefComponent<TProps> | ||
>; | ||
const wrapFCWithForwardRefOrPlain = <TProps extends object>( | ||
Component: ReactFunctionalComponentType<TProps>, | ||
handler: HocTransformer | ||
) => { | ||
type ForwardRefComponent = Extract< | ||
ReactFunctionalComponentType<TProps>, | ||
{ $$typeof: typeof REACT_FORWARD_REF_TYPE } | ||
>; | ||
type RegularFunctionComponent = Exclude< | ||
ReactFunctionalComponentType<TProps>, | ||
ForwardRefComponent | ||
>; | ||
): ForwardRefComponent<TProps> | ReactFunctionalComponentType<TProps> => { | ||
if ( | ||
@@ -88,6 +88,12 @@ "$$typeof" in Component && | ||
$$typeof: REACT_FORWARD_REF_TYPE, | ||
render: new Proxy((Component as ForwardRefComponent).render, handler), | ||
}; | ||
render: new Proxy( | ||
(Component as ForwardRefComponent<TProps>).render, | ||
handler | ||
), | ||
} as ForwardRefComponent<TProps>; | ||
} | ||
return new Proxy(Component as RegularFunctionComponent, handler); | ||
return new Proxy( | ||
Component as Function, | ||
handler | ||
) as RegularFunctionComponent<TProps>; | ||
}; | ||
@@ -111,5 +117,10 @@ | ||
): unknown => { | ||
// should use isValidElementType | ||
// if (process.env.NODE_ENV === "development" && !isValidElement(Component)) { | ||
// console.warn("react-fast-hoc: passed incorrect component for transform"); | ||
// return Component; | ||
// } | ||
// this case assumes that it's ClassComponent | ||
if (isClassComponent(Component)) { | ||
return wrapFunctionalFROrDefault( | ||
return wrapFCWithForwardRefOrPlain( | ||
toFunctional(Component) as React.FC<TProps>, | ||
@@ -123,4 +134,3 @@ handler | ||
$$typeof: REACT_MEMO_TYPE, | ||
// @ts-expect-error | ||
type: wrapFunctionalFROrDefault(toFunctional(Component.type), handler), | ||
type: wrapComponentIntoHoc(Component.type, handler, null), | ||
compare: Component.compare, | ||
@@ -151,3 +161,3 @@ }; | ||
handler, | ||
mimicToNewComponentHandler | ||
null | ||
) as RealComponentType<any>; | ||
@@ -154,0 +164,0 @@ } |
@@ -49,5 +49,7 @@ import type { ComponentType } from "react"; | ||
export const isClassComponent = <T>( | ||
export const isClassComponent = isPrototypeOf.bind( | ||
isPrototypeOf, | ||
ReactComponent | ||
) as <T>( | ||
Component: T | ||
): Component is Extract<T, React.ComponentClass<any, any>> => | ||
isPrototypeOf(ReactComponent, Component); | ||
) => Component is Extract<T, React.ComponentClass<any, any>>; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
139674
5.67%73
4.29%2149
12.28%