fix: easier and more precise polymorphic typing

Author: michalkvasnicak

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
   },
   extends: ['airbnb-typescript-prettier'],
   rules: {
+    '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',

packages/visage-core/src/__tests__/typeTest.tsx

@@ -6,7 +6,10 @@
 import React from 'react';
 import { createComponent } from '../createComponent';
 import { VisageComponent } from '../types';
-import { StyleSheet } from '../styleSheet';
+
+const Div = createComponent('div');
+
+<Div />;
 
 declare function FC(p: { test: boolean }): JSX.Element;
 
@@ -191,8 +194,8 @@ const AssignComplexMemoAndForward: VisageComponent<
 > = React.memo(
   React.forwardRef(
     (
-      props: JSX.IntrinsicElements['h1'] & { test: boolean },
-      ref: React.Ref<HTMLHeadingElement>,
+      props: JSX.IntrinsicElements['div'] & { test: boolean },
+      ref: React.Ref<HTMLDivElement>,
     ) => null,
   ),
 );

packages/visage-core/src/createComponent.ts

@@ -24,17 +24,11 @@ const DEFAULT_STYLE_SHEET = {};
  */
 export function createComponent<
   TDefaultComponent extends ComponentConstraint,
-  TVariants extends Record<string, any>[] = Record<string, any>[],
-  TVariantIntersection = UnionToIntersection<TVariants[number]>,
-  TProps extends Omit<
-    ExtractVisageComponentProps<TDefaultComponent>,
-    keyof TVariantIntersection
-  > &
-    TVariantIntersection = Omit<
-    ExtractVisageComponentProps<TDefaultComponent>,
-    keyof TVariantIntersection
-  > &
-    TVariantIntersection,
+  TVariants extends undefined | Record<string, unknown>[] = undefined,
+  TProps = TVariants extends Record<string, unknown>[]
+    ? ExtractVisageComponentProps<TDefaultComponent> &
+        UnionToIntersection<TVariants[number]>
+    : ExtractVisageComponentProps<TDefaultComponent>,
   TDefaultProps extends Partial<TProps> = any
 >(
   defaultAs: TDefaultComponent,

packages/visage-core/src/types.ts

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { ExtractArgs, ExtractReturn } from './types';
 
 /**
  * Uses statically declared function in useMemo
@@ -8,8 +7,8 @@ import { ExtractArgs, ExtractReturn } from './types';
  */
 export function useStaticMemo<TFunction extends (...args: any[]) => any>(
   fn: TFunction,
-  deps: ExtractArgs<TFunction>,
-): ExtractReturn<TFunction> {
+  deps: Parameters<TFunction>,
+): ReturnType<TFunction> {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return useMemo(() => fn(...deps), deps);
 }

packages/visage-core/src/useStaticMemo.ts

@@ -103,43 +103,38 @@ export interface HeadingProps extends H1Props {
 
 export const Heading = markAsVisageComponent(
   memo(
-    forwardRef(
-      (
-        { level = 1, ...restProps }: JSX.IntrinsicElements['h1'] & HeadingProps,
-        ref: any,
-      ) => {
-        let as = h1;
-
-        switch (level) {
-          case 2:
-            as = h2;
-            break;
-          case 3:
-            as = h3;
-            break;
-          case 4:
-            as = h4;
-            break;
-          case 5:
-            as = h5;
-            break;
-          case 6:
-            as = h6;
-        }
-
-        return createElement(as, {
-          ref,
-          // @ts-ignore
-          'data-level': level,
-          ...restProps,
-        });
-      },
-    ),
+    forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(
+      { level = 1, ...restProps }: HeadingProps,
+      ref,
+    ) {
+      let as = h1;
+
+      switch (level) {
+        case 2:
+          as = h2;
+          break;
+        case 3:
+          as = h3;
+          break;
+        case 4:
+          as = h4;
+          break;
+        case 5:
+          as = h5;
+          break;
+        case 6:
+          as = h6;
+      }
+
+      return createElement(as, {
+        ref,
+        'data-level': level,
+        ...restProps,
+      });
+    }),
   ),
 );
 
-Heading.displayName = 'Heading';
-
 const defaultMask = [6];
 
 interface HeadingSkeletonProps {
@@ -151,20 +146,13 @@ interface HeadingSkeletonProps {
 
 export const HeadingSkeleton = markAsVisageComponent(
   memo(
-    forwardRef(
-      (
-        {
-          mask = defaultMask,
-          ...restProps
-        }: JSX.IntrinsicElements['h1'] & HeadingProps & HeadingSkeletonProps,
-        ref: any,
-      ) => {
-        return (
-          <Heading as={SkeletonSentence} mask={mask} ref={ref} {...restProps} />
-        );
-      },
-    ),
+    forwardRef<
+      HTMLDivElement,
+      Omit<HeadingProps & HeadingSkeletonProps, 'ref'>
+    >(function HeadingSkeleton({ mask = defaultMask, ...restProps }, ref) {
+      return (
+        <Heading as={SkeletonSentence} mask={mask} ref={ref} {...restProps} />
+      );
+    }),
   ),
 );
-
-HeadingSkeleton.displayName = 'HeadingSkeleton';

packages/visage/src/components/Heading.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo } from 'react';
-import { ExtractArgs } from '@byteclaw/visage-core';
 
 /**
  * Works similarly as useEffect except it runs effect before children are rendered
@@ -27,7 +26,7 @@ export function useOnRenderEffect(
  */
 export function useStaticOnRenderEffect<
   T extends (...effectArgs: any[]) => void | (() => void)
->(effect: T, ...args: ExtractArgs<T>): void {
+>(effect: T, ...args: Parameters<T>): void {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const unregister = useMemo(() => effect(...args), [effect, ...args]);
 

packages/visage/src/hooks/useOnRenderEffect.ts

@@ -1,12 +1,11 @@
-import { ExtractArgs } from '@byteclaw/visage-core';
 import { useEffect } from 'react';
 
 /**
  * Creates a static effect that is called with provided args
  */
 export function useStaticEffect<T extends (...effectArgs: any[]) => void>(
   effectFn: T,
-  ...args: ExtractArgs<T>
+  ...args: Parameters<T>
 ): void {
   useEffect(() => {
     return effectFn(...args);