Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve typings to add safety for props #51

Closed
wants to merge 6 commits into from
Closed

Improve typings to add safety for props #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f577c48
Improve typings to add safety for props
monodop Apr 30, 2020
edcce48
Add support for Intrinsic Elements from TagProps
monodop Apr 30, 2020
693ec40
Upgrade to TypeScript 3.9.1-rc
monodop Apr 30, 2020
79cc371
Add typechecking test cases
monodop Apr 30, 2020
b6ba714
wip: remove prop typing from node's parent attribute
monodop Apr 30, 2020
69e6662
Merge branch 'master' into feature/type-safe-props
brainkim May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"rollup-plugin-typescript2": "^0.27.0",
"shx": "^0.3.2",
"ts-jest": "^25.3.1",
"typescript": "^3.8.3",
"typescript": "3.9.1-rc"
"husky": "^3.1.0",
brainkim marked this conversation as resolved.
Show resolved Hide resolved
"lint-staged": "^10.0.8"
},
Expand Down
284 changes: 284 additions & 0 deletions src/__tests__/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
/** @jsx createElement */
/* eslint @typescript-eslint/no-unused-vars: "off", jest/expect-expect: "off" */
import {
createElement,
Component,
FunctionComponent,
Context,
GeneratorComponent,
} from "..";

describe("types", () => {
type MyProps = {
message: string;
};
let elem: any;

test("Not Components", () => {
// @ts-expect-error
const MyString: Component = "Hello";

// @ts-expect-error
const MyNumber: Component = 10;

// @ts-expect-error
const MyBoolean: Component = true;

// @ts-expect-error
const MyNull: Component = null;

// @ts-expect-error
const MyUndefined: Component = undefined;

// Not entirely sure why this one doesn't error anymore. seems that <a></a> returns
// any, while createElement('a') returns Element<any>.
// skip @ts-expect-error
// const MyElement: Component = <a></a>;

// @ts-expect-error
const NotComponent: Component = {};
});

test("Components", () => {
const MyFunctionComponent: Component<MyProps> = function (this, props) {
const ctx: Context<MyProps> = this;
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

return <div></div>;
};
// @ts-expect-error
elem = <MyFunctionComponent />;
elem = <MyFunctionComponent message={"message"} />;

const MyAsyncFunctionComponent: Component<MyProps> = async function (
this,
props,
) {
const ctx: Context<MyProps> = this;
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

return <div></div>;
};
// @ts-expect-error
elem = <MyAsyncFunctionComponent />;
elem = <MyAsyncFunctionComponent message={"message"} />;

const MyGeneratorComponent: Component<MyProps> = function* (
this,
initialProps,
) {
const ctx: Context<MyProps> = this;
let message: string = initialProps.message;
// @ts-expect-error
let unexpected = initialProps.unexpected;

for (const newProps of this) {
let newMessage: string = initialProps.message;
// @ts-expect-error
let newUnexpected = newProps.unexpected;
yield <div></div>;
}

return <div></div>;
};
// @ts-expect-error
elem = <MyGeneratorComponent />;
elem = <MyGeneratorComponent message={"message"} />;

const MyAsyncGeneratorComponent: Component<MyProps> = async function* (
this,
initialProps,
) {
const ctx: Context<MyProps> = this;
let message: string = initialProps.message;
// @ts-expect-error
let unexpected = initialProps.unexpected;

for await (const newProps of this) {
let newMessage: string = initialProps.message;
// @ts-expect-error
let newUnexpected = newProps.unexpected;
yield <div></div>;
}

return <div></div>;
};
// @ts-expect-error
elem = <MyAsyncGeneratorComponent />;
elem = <MyAsyncGeneratorComponent message={"message"} />;
});

test("Function Components", () => {
const MyFunctionComponent: FunctionComponent<MyProps> = function (
this,
props,
) {
const ctx: Context<MyProps> = this;
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

return <div></div>;
};
// @ts-expect-error
elem = <MyFunctionComponent />;
elem = <MyFunctionComponent message={"message"} />;

const MyAsyncFunctionComponent: FunctionComponent<MyProps> = async function (
this,
props,
) {
const ctx: Context<MyProps> = this;
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

return <div></div>;
};
// @ts-expect-error
elem = <MyAsyncFunctionComponent />;
elem = <MyAsyncFunctionComponent message={"message"} />;

// @ts-expect-error
const MyGeneratorComponent: FunctionComponent<MyProps> = function* (
this,
props,
) {
yield <div></div>;
};
// @ts-expect-error
const MyAsyncGeneratorComponent: FunctionComponent<MyProps> = async function* (
this,
props,
) {
yield <div></div>;
};
});

test("Generator Components", () => {
const MyGeneratorComponent: GeneratorComponent<MyProps> = function* (
this,
initialProps,
) {
const ctx: Context<MyProps> = this;
let message: string = initialProps.message;
// @ts-expect-error
let unexpected = initialProps.unexpected;

for (const newProps of this) {
let newMessage: string = initialProps.message;
// @ts-expect-error
let newUnexpected = newProps.unexpected;
yield <div></div>;
}

return <div></div>;
};
// @ts-expect-error
elem = <MyGeneratorComponent />;
elem = <MyGeneratorComponent message={"message"} />;

const MyAsyncGeneratorComponent: GeneratorComponent<MyProps> = async function* (
this,
initialProps,
) {
const ctx: Context<MyProps> = this;
let message: string = initialProps.message;
// @ts-expect-error
let unexpected = initialProps.unexpected;

for await (const newProps of this) {
let newMessage: string = initialProps.message;
// @ts-expect-error
let newUnexpected = newProps.unexpected;
yield <div></div>;
}

return <div></div>;
};
// @ts-expect-error
elem = <MyAsyncGeneratorComponent />;
elem = <MyAsyncGeneratorComponent message={"message"} />;

// TODO: add ts-expect-error at some point in the future, I guess?
// This will not pass because the function is infered as any, and any matches Iterator<any, any, any>.
// Hopefully a later typescript version fixes this :(
const MyFunctionComponent: GeneratorComponent<MyProps> = function (
this,
props,
) {
return <div></div>;
};
// @ts-expect-error
const MyAsyncFunctionComponent: GeneratorComponent<MyProps> = async function (
this,
props,
) {
return <div></div>;
};
});

test("Loose Typings", () => {
function MyFunctionComponent(props: MyProps) {
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

return <div></div>;
}
// @ts-expect-error
elem = <MyFunctionComponent />;
elem = <MyFunctionComponent message={"message"} />;

async function MyAsyncFunctionComponent(props: MyProps) {
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

return <div></div>;
}
// @ts-expect-error
elem = <MyAsyncFunctionComponent />;
elem = <MyAsyncFunctionComponent message={"message"} />;

function* MyGeneratorComponent(this: Context, props: MyProps) {
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

for (props of this) {
let newMessage: string = props.message;
// @ts-expect-error
let newUnexpected = props.unexpected;
yield <div></div>;
}

return <div></div>;
}
// @ts-expect-error
elem = <MyGeneratorComponent />;
elem = <MyGeneratorComponent message={"message"} />;

async function* MyAsyncGeneratorComponent(this: Context, props: MyProps) {
let message: string = props.message;
// @ts-expect-error
let unexpected = props.unexpected;

for await (props of this) {
let newMessage: string = props.message;
// @ts-expect-error
let newUnexpected = props.unexpected;
yield <div></div>;
}

return <div></div>;
}
// @ts-expect-error
elem = <MyAsyncGeneratorComponent />;
elem = <MyAsyncGeneratorComponent message={"message"} />;
});
});
5 changes: 4 additions & 1 deletion src/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ declare module "./index" {
}

// TODO: create an allowlist/blocklist of props
function updateProps(el: Element, props: Props, newProps: Props): void {
type AnyProps = Props & {
[name: string]: any;
};
function updateProps(el: Element, props: AnyProps, newProps: AnyProps): void {
for (const name in {...props, ...newProps}) {
const value = props[name];
const newValue = newProps[name];
Expand Down
Loading