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" "plugin:prettier/recommended"
], ],
"rules": { "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. * Custom HTMLElement factory that can be parameterized by props.
*/ */
export interface Component< export interface Component<P extends object = {}> {
P extends Record<string, unknown> = Record<string, never>
> {
( (
props: P & { props: P & {
children?: Element[]; children?: Element[];

6
src/create-element.ts
View file

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