From 6736d8ab6828443d60b2c8286976f0d33a847e94 Mon Sep 17 00:00:00 2001 From: "M. George Hansen" Date: Wed, 3 Jun 2020 17:27:12 -0700 Subject: [PATCH] fix: type signature of Component too narrow --- .eslintrc | 3 ++- src/component.ts | 4 +--- src/create-element.ts | 6 +++--- test/test-suites/rendering.tsx | 17 +++++++++++++++++ 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/.eslintrc b/.eslintrc index c6e03ed..b0775a6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -14,6 +14,7 @@ "plugin:prettier/recommended" ], "rules": { - "@typescript-eslint/no-namespace": "off" + "@typescript-eslint/no-namespace": "off", + "@typescript-eslint/ban-types": "off" } } diff --git a/src/component.ts b/src/component.ts index c45834e..848eea3 100644 --- a/src/component.ts +++ b/src/component.ts @@ -37,9 +37,7 @@ export type Element = /** * Custom HTMLElement factory that can be parameterized by props. */ -export interface Component< - P extends Record = Record -> { +export interface Component

{ ( props: P & { children?: Element[]; diff --git a/src/create-element.ts b/src/create-element.ts index 5927d75..be1d393 100644 --- a/src/create-element.ts +++ b/src/create-element.ts @@ -17,7 +17,7 @@ import { flatDeep } from "./utils"; * * @return Fully-realized HTMLElement, ready for rendering. */ -export function createElement

>( +export function createElement

( comp: Component

, props: P, ...children: Element[] @@ -38,8 +38,8 @@ export function createElement( ...children: Element[] ): HTMLElement; export function createElement( - type: string | Component>, - props: HTMLAttributes | Record | null, + type: string | Component, + props: object | null, ...children: Element[] ): HTMLElement { // Flatten the children array so we can accept arrays as children. diff --git a/test/test-suites/rendering.tsx b/test/test-suites/rendering.tsx index 4e32416..b4cb3b2 100644 --- a/test/test-suites/rendering.tsx +++ b/test/test-suites/rendering.tsx @@ -86,4 +86,21 @@ testSuite("renderPage", ({ test, expect }) => { "There are

1
2
3
lights!" ); }); + + test("renders components w/ custom properties", () => { + interface LightProps { + nLights: number; + } + const Light: Component = ({ nLights }) => ( +
{nLights} lights
+ ); + const html = renderPage( + + There are ! + + ); + expect(html).toEqual( + "There are
3 lights
!" + ); + }); });