react-fast-hoc - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

CHANGELOG.md

 # 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 @@

lib/index.d.ts

 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 };

package.json

 {
   "name": "react-fast-hoc",
   "license": "MIT",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "sideEffects": false,
@@ -6,0 +6,0 @@ "type": "module",

src/internals.ts

@@ -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 @@ }

src/toFunctional.ts

@@ -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>>;

No alert changes

Improved metrics

Total package byte prevSize

139674

5.67%

Number of package files

73

4.29%

Lines of code

2149

12.28%

No dependency changes