Support more edge-cases

Author: AlexandrHoroshih

public-types/reflect.d.ts

@@ -184,6 +184,22 @@ export function list<
 
 // variant types
 
+/**
+ * Computes final props type based on Props of the view component and Bind object for variant operator specifically
+ *
+ * Difference is important since in variant case Props is a union
+ *
+ * Props that are "taken" by Bind object are made **optional** in the final type,
+ * so it is possible to overwrite them in the component usage anyway
+ */
+type FinalPropsVariant<Props, Bind extends BindFromProps<Props>> = Show<
+  Props extends any
+    ? Omit<Props, keyof Bind> & {
+        [K in Extract<keyof Bind, keyof Props>]?: Props[K];
+      }
+    : never
+>;
+
 /**
  * Operator to conditionally render a component based on the reactive `source` store value.
  *
@@ -237,7 +253,7 @@ export function variant<
          */
         useUnitConfig?: UseUnitConfig;
       },
-): FC<FinalProps<Props, Bind>>;
+): FC<FinalPropsVariant<Props, Bind>>;
 
 // fromTag types
 /**

type-tests/types-variant.tsx

@@ -31,7 +31,7 @@ import { expectType } from 'tsd';
     },
   });
 
-  expectType<React.FC>(VariableInput);
+  <VariableInput />;
 }
 
 // variant allows to pass incompatible props between cases - resulting component will have union of all props from all cases
@@ -60,7 +60,7 @@ import { expectType } from 'tsd';
     },
   });
 
-  expectType<React.FC>(VariableInput);
+  <VariableInput />;
 }
 
 // variant allows not to set every possble case
@@ -88,7 +88,7 @@ import { expectType } from 'tsd';
     default: NotFoundPage,
   });
 
-  expectType<React.FC>(CurrentPage);
+  <CurrentPage />;
 }
 
 // variant warns about wrong cases
@@ -116,7 +116,7 @@ import { expectType } from 'tsd';
     default: NotFoundPage,
   });
 
-  expectType<React.FC>(CurrentPage);
+  <CurrentPage />;
 }
 
 // overload for boolean source
@@ -139,14 +139,15 @@ import { expectType } from 'tsd';
     else: FallbackPage,
     bind: { context: $ctx },
   });
-  expectType<React.FC>(CurrentPageThenElse);
+
+  <CurrentPageThenElse />;
 
   const CurrentPageOnlyThen = variant({
     if: $enabled,
     then: HomePage,
     bind: { context: $ctx },
   });
-  expectType<React.FC>(CurrentPageOnlyThen);
+  <CurrentPageOnlyThen />;
 }
 
 // supports nesting
@@ -286,3 +287,46 @@ import { expectType } from 'tsd';
     else: Button<'a'>,
   });
 }
+
+// variant should allow not-to pass required props - as they can be added later in react
+{
+  const Input: React.FC<{
+    value: string;
+    onChange: (newValue: string) => void;
+    color: 'red';
+  }> = () => null;
+  const $variants = createStore<'input' | 'fallback'>('input');
+  const Fallback: React.FC<{ kek?: string }> = () => null;
+  const $value = createStore<string>('');
+  const changed = createEvent<string>();
+
+  const InputBase = reflect({
+    view: Input,
+    bind: {
+      value: $value,
+      onChange: changed,
+    },
+  });
+
+  const ReflectedInput = variant({
+    source: $variants,
+    cases: {
+      input: InputBase,
+      fallback: Fallback,
+    },
+  });
+
+  const App: React.FC = () => {
+    // missing prop must still be required in react
+    // but in this case it is not required, as props are conditional union
+    return <ReflectedInput />;
+  };
+
+  <ReflectedInput kek="kek" />;
+
+  const AppFixed: React.FC = () => {
+    return <ReflectedInput color="red" />;
+  };
+  expectType<React.FC>(App);
+  expectType<React.FC>(AppFixed);
+}