Merge pull request #20 from typed-ember/more-robust-component-keyword

Get `{{component}}` working more robustly

Author: dfreeman

packages/template/-private/keywords/component.d.ts

@@ -1,27 +1,25 @@
-import { AcceptsBlocks } from '../signature';
+import { AcceptsBlocks, AnyBlocks } from '../signature';
 import { HasSignature } from '../resolution';
 
-type SignatureFor<T> = T extends HasSignature<infer Signature> ? Signature : T;
-
-type ArgsFor<T> = SignatureFor<T> extends (args: infer Args) => unknown ? Args : {};
-
-type PositionalFor<T> = SignatureFor<T> extends (
-  args: never,
-  ...positional: infer Positional
-) => unknown
-  ? Positional
-  : never[];
-
-type BlocksFor<T> = SignatureFor<T> extends (...params: never) => AcceptsBlocks<infer Blocks>
-  ? Blocks
-  : {};
-
 export default interface ComponentKeyword {
-  <Component, GivenArgs extends keyof ArgsFor<Component>>(
-    args: { [Arg in GivenArgs]: ArgsFor<Component>[Arg] },
-    component: Component
+  // Invoking with a component class
+  <
+    Args,
+    GivenArgs extends Partial<Args>,
+    Blocks extends AnyBlocks,
+    ConstructorArgs extends unknown[]
+  >(
+    args: GivenArgs,
+    component: new (...args: ConstructorArgs) => HasSignature<(args: Args) => AcceptsBlocks<Blocks>>
+  ): (
+    args: Omit<Args, keyof GivenArgs> & Partial<Pick<Args, keyof GivenArgs & keyof Args>>
+  ) => AcceptsBlocks<Blocks>;
+
+  // Invoking with the result of another `{{component}}` expression
+  <Args, GivenArgs extends Partial<Args>, Blocks extends AnyBlocks>(
+    args: GivenArgs,
+    component: (args: Args) => AcceptsBlocks<Blocks>
   ): (
-    args: Omit<ArgsFor<Component>, GivenArgs> & Partial<Pick<ArgsFor<Component>, GivenArgs>>,
-    ...positional: PositionalFor<Component>
-  ) => AcceptsBlocks<BlocksFor<Component>>;
+    args: Omit<Args, keyof GivenArgs> & Partial<Pick<Args, keyof GivenArgs & keyof Args>>
+  ) => AcceptsBlocks<Blocks>;
 }

packages/template/__tests__/keywords/component.test.ts

@@ -1,38 +1,33 @@
 import { expectTypeOf } from 'expect-type';
 import { resolve, invokeBlock } from '@glint/template';
-import { AcceptsBlocks } from '@glint/template/-private';
 import { ComponentKeyword } from '@glint/template/-private/keywords';
+import TestComponent from '../test-component';
 
 const componentKeyword = resolve({} as ComponentKeyword);
 
-declare const TestComponent: (args: {
-  value: string;
-}) => AcceptsBlocks<{
-  default?: [string];
-  inverse?: [];
-}>;
+class StringComponent extends TestComponent<{ value: string }, { default?: [string] }> {}
 
-const NoopCurriedTestComponent = componentKeyword({}, TestComponent);
-const ValueCurriedTestComponent = componentKeyword({ value: 'hello' }, TestComponent);
+const NoopCurriedStringComponent = componentKeyword({}, StringComponent);
+const ValueCurriedStringComponent = componentKeyword({ value: 'hello' }, StringComponent);
 
 // Invoking the noop-curried component
-invokeBlock(resolve(NoopCurriedTestComponent)({ value: 'hello' }), {});
+invokeBlock(resolve(NoopCurriedStringComponent)({ value: 'hello' }), {});
 
 // @ts-expect-error: Invoking the curried component but forgetting `value`
-resolve(NoopCurriedTestComponent)({});
+resolve(NoopCurriedStringComponent)({});
 
 // @ts-expect-error: Invoking the curried component with an invalid value
-resolve(NoopCurriedTestComponent)({ value: 123 });
+resolve(NoopCurriedStringComponent)({ value: 123 });
 
 // Invoking the noop-curried component with a valid block
-invokeBlock(resolve(NoopCurriedTestComponent)({ value: 'hello' }), {
+invokeBlock(resolve(NoopCurriedStringComponent)({ value: 'hello' }), {
   default(...args) {
     expectTypeOf(args).toEqualTypeOf<[string]>();
   },
 });
 
 // Invoking the noop-curried component with an invalid block
-invokeBlock(resolve(NoopCurriedTestComponent)({ value: 'hello' }), {
+invokeBlock(resolve(NoopCurriedStringComponent)({ value: 'hello' }), {
   default() {
     /* nothing */
   },
@@ -43,16 +38,153 @@ invokeBlock(resolve(NoopCurriedTestComponent)({ value: 'hello' }), {
 });
 
 // Invoking the curried-with-value component with no value
-invokeBlock(resolve(ValueCurriedTestComponent)({}), {});
+invokeBlock(resolve(ValueCurriedStringComponent)({}), {});
 
 // Invoking the curried-with-value component with a valid value
-invokeBlock(resolve(ValueCurriedTestComponent)({ value: 'hi' }), {});
+invokeBlock(resolve(ValueCurriedStringComponent)({ value: 'hi' }), {});
 
 // @ts-expect-error: Invoking the curred-with-value component with an invalid value
-invokeBlock(resolve(ValueCurriedTestComponent)({ value: 123 }), {});
+invokeBlock(resolve(ValueCurriedStringComponent)({ value: 123 }), {});
 
 // @ts-expect-error: Attempting to curry a nonexistent arg
-componentKeyword({ foo: true }, TestComponent);
+componentKeyword({ foo: true }, StringComponent);
 
 // @ts-expect-error: Attempting to curry an arg with the wrong type
-componentKeyword({ value: 123 }, TestComponent);
+componentKeyword({ value: 123 }, StringComponent);
+
+class ParametricComponent<T> extends TestComponent<
+  { values: Array<T>; optional?: string },
+  { default?: [T, number] }
+> {}
+
+const NoopCurriedParametricComponent = componentKeyword({}, ParametricComponent);
+
+// The only way to fix a type parameter as part of using the component keyword is to
+// say ahead of time the type you're trying to bind it as.
+const BoundParametricComponent = ParametricComponent as new () => ParametricComponent<string>;
+
+const RequiredValueCurriedParametricComponent = componentKeyword(
+  { values: ['hello'] },
+  BoundParametricComponent
+);
+
+const OptionalValueCurriedParametricComponent = componentKeyword(
+  { optional: 'hi' },
+  ParametricComponent
+);
+
+// Invoking the noop-curried component with number values
+invokeBlock(resolve(NoopCurriedParametricComponent)({ values: [1, 2, 3] }), {
+  default(value) {
+    expectTypeOf(value).toEqualTypeOf<number>();
+  },
+});
+
+// Invoking the noop-curried component with string values
+invokeBlock(resolve(NoopCurriedParametricComponent)({ values: ['hello'] }), {
+  default(value) {
+    expectTypeOf(value).toEqualTypeOf<string>();
+  },
+});
+
+invokeBlock(
+  resolve(NoopCurriedParametricComponent)(
+    // @ts-expect-error: missing required arg `values`
+    {}
+  ),
+  {}
+);
+
+invokeBlock(
+  resolve(NoopCurriedParametricComponent)(
+    // @ts-expect-error: wrong type for `values`
+    { values: 'hello' }
+  ),
+  {}
+);
+
+invokeBlock(
+  resolve(NoopCurriedParametricComponent)({
+    values: [1, 2, 3],
+    // @ts-expect-error: extra arg
+    extra: 'uh oh',
+  }),
+  {}
+);
+
+// Invoking the curred component with no additional args
+invokeBlock(resolve(RequiredValueCurriedParametricComponent)({}), {
+  default(value) {
+    expectTypeOf(value).toEqualTypeOf<string>();
+  },
+});
+
+// Invoking the curred component and overriding the given arg
+invokeBlock(resolve(RequiredValueCurriedParametricComponent)({ values: ['ok'] }), {
+  default(value) {
+    expectTypeOf(value).toEqualTypeOf<string>();
+  },
+});
+
+invokeBlock(
+  resolve(RequiredValueCurriedParametricComponent)({
+    // @ts-expect-error: wrong type for arg override
+    values: [1, 2, 3],
+  }),
+  {}
+);
+
+invokeBlock(
+  resolve(RequiredValueCurriedParametricComponent)({
+    // @ts-expect-error: extra arg
+    extra: 'bad',
+  }),
+  {}
+);
+
+// Invoking the curried component, supplying missing required args
+invokeBlock(resolve(OptionalValueCurriedParametricComponent)({ values: [1, 2, 3] }), {
+  default(value) {
+    expectTypeOf(value).toEqualTypeOf<number>();
+  },
+});
+
+invokeBlock(
+  resolve(OptionalValueCurriedParametricComponent)(
+    // @ts-expect-error: missing required arg `values`
+    {}
+  ),
+  {}
+);
+
+// {{component (component BoundParametricComponent values=(array "hello")) optional="hi"}}
+const DoubleCurriedComponent = componentKeyword(
+  { optional: 'hi' },
+  RequiredValueCurriedParametricComponent
+);
+
+// Invoking the component with no args
+invokeBlock(resolve(DoubleCurriedComponent)({}), {
+  default(value) {
+    expectTypeOf(value).toEqualTypeOf<string>();
+  },
+});
+
+// Invoking the component overriding an arg correctly
+invokeBlock(resolve(DoubleCurriedComponent)({ values: ['a', 'b'] }), {});
+
+invokeBlock(
+  resolve(DoubleCurriedComponent)({
+    // @ts-expect-error: invalid arg override
+    values: [1, 2, 3],
+  }),
+  {}
+);
+
+invokeBlock(
+  resolve(DoubleCurriedComponent)({
+    // @ts-expect-error: unexpected args
+    foo: 'bar',
+  }),
+  {}
+);