websnacksjs/websnacks
1
0
Fork 0
Code Issues Pull requests Projects Releases 7 Packages Wiki Activity Actions

fix: type signature of Component too narrow

Browse source
This commit is contained in:
M. George Hansen 2020-06-03 17:27:12 -07:00
parent dd300d6fb0
commit 6736d8ab68
Signed by: mgeorgehansen
SSH key fingerprint: SHA256:JlIGiQLPyQ2RHTH3a2oVlb20Xkh9Glr8DUF4YTXHJxM
4 changed files with 23 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.eslintrc
View file

@ -14,6 +14,7 @@
"plugin:prettier/recommended"
],
"rules": {
"@typescript-eslint/no-namespace": "off"
"@typescript-eslint/no-namespace": "off",
"@typescript-eslint/ban-types": "off"
}
}

4
src/component.ts
View file

@ -37,9 +37,7 @@ export type Element =
/**
* Custom HTMLElement factory that can be parameterized by props.
*/
export interface Component<
P extends Record<string, unknown> = Record<string, never>
> {
export interface Component<P extends object = {}> {
(
props: P & {
children?: Element[];

6
src/create-element.ts
View file

@ -17,7 +17,7 @@ import { flatDeep } from "./utils";
*
* @return Fully-realized HTMLElement, ready for rendering.
*/
export function createElement<P extends Record<string, unknown>>(
export function createElement<P extends object>(
comp: Component<P>,
props: P,
...children: Element[]
@ -38,8 +38,8 @@ export function createElement(
...children: Element[]
): HTMLElement;
export function createElement(
type: string | Component<Record<string, unknown>>,
props: HTMLAttributes | Record<string, unknown> | null,
type: string | Component<any>,
props: object | null,
...children: Element[]
): HTMLElement {
// Flatten the children array so we can accept arrays as children.

17
test/test-suites/rendering.tsx
View file

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