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

Fix typing for create-emotion-styled #671

Merged
merged 5 commits into from
May 25, 2018
Merged

Fix typing for create-emotion-styled #671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c3e0521
Divide typings into two files
Ailrun May 24, 2018
ecec757
Fix types to make exposed type simpler and clearer
Ailrun May 24, 2018
b05cb98
Add testcases and fix typing for it
Ailrun May 24, 2018
1915489
Add shorthand typing for create-emotion-styled
Ailrun May 25, 2018
09eb62f
Update package.json
emmatown May 25, 2018
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
3 changes: 2 additions & 1 deletion packages/create-emotion-styled/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"types": "types/index.d.ts",
"files": [
"src",
"dist"
"dist",
"types"
],
"scripts": {
"build": "npm-run-all clean rollup",
Expand Down
31 changes: 31 additions & 0 deletions packages/create-emotion-styled/types/common.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.3

import { Emotion, Interpolation as BaseInterpolation } from 'create-emotion';

export interface ArrayInterpolation<Props> extends Array<Interpolation<Props>> {}
export type FunctionInterpolation<Props> = (props: Props, context: any) => Interpolation<Props>;

export type Interpolation<Props> =
| BaseInterpolation
| ArrayInterpolation<Props>
| FunctionInterpolation<Props>
;

export interface StyledOptions {
e?: string;
label?: string;
target?: string;
shouldForwardProp?: (name: string) => boolean;
}

export type Themed<P extends object, T extends object> = P & { theme: T };

export type StyledStatelessProps<P extends object, T extends object> =
& P
& { theme?: T }
;
export type StyledOtherProps<P extends object, T extends object, R> =
& StyledStatelessProps<P, T>
& { innerRef?: R }
;
126 changes: 33 additions & 93 deletions packages/create-emotion-styled/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,98 +4,38 @@
import { Emotion, Interpolation as BaseInterpolation } from 'create-emotion';
import React, { ComponentClass, ReactHTML, ReactSVG, Ref, SFC } from 'react';

export interface ArrayInterpolation<Props> extends Array<Interpolation<Props>> {}
export type FunctionInterpolation<Props> = (props: Props, context: any) => Interpolation<Props>;

export type Interpolation<Props> =
| BaseInterpolation
| ArrayInterpolation<Props>
| FunctionInterpolation<Props>
;

export interface StyledOptions {
e?: string;
label?: string;
target?: string;
shouldForwardProp?: (name: string) => boolean;
}

export type Themed<P extends object, T extends object> = P & { theme: T };

export type StyledStatelessComponentProps<P extends object, T extends object> =
& P
& { theme?: T }
;
export type StyledOtherComponentProps<P extends object, T extends object> =
& StyledStatelessComponentProps<P, T>
& { innerRef?: Ref<any> }
;

export interface StyledComponentMethods<Props extends object, InnerProps extends object, Theme extends object> {
withComponent<T extends keyof ReactHTML>(
tag: T,
options?: StyledOptions,
): StyledOtherComponent<Props, ReactHTML[T], Theme>;

withComponent<T extends keyof ReactSVG>(
tag: T,
options?: StyledOptions,
): StyledOtherComponent<Props, ReactSVG[T], Theme>;

withComponent<IP extends object>(
component: SFC<IP>,
options?: StyledOptions,
): StyledStatelessComponent<Props, IP, Theme>;

withComponent<IP extends object>(
component: ComponentClass<IP>,
options?: StyledOptions,
): StyledOtherComponent<Props, IP, Theme>;
}

export interface StyledStatelessComponent<Props extends object, InnerProps extends object, Theme extends object>
extends ComponentClass<StyledStatelessComponentProps<Props & InnerProps, Theme>>,
StyledComponentMethods<Props, InnerProps, Theme> {}

export interface StyledOtherComponent<Props extends object, InnerProps extends object, Theme extends object>
extends ComponentClass<StyledOtherComponentProps<Props & InnerProps, Theme>>,
StyledComponentMethods<Props, InnerProps, Theme> {}

export type StyledComponent<Props extends object, InnerProps extends object, Theme extends object> =
| StyledStatelessComponent<Props, InnerProps, Theme>
| StyledOtherComponent<Props, InnerProps, Theme>
;

export type CreateStyledStatelessComponent<InnerProps extends object, Theme extends object> =
<Props extends object, OverridedTheme extends object = Theme>(
...args: Array<Interpolation<Themed<Props, OverridedTheme>>>
) => StyledStatelessComponent<Props, InnerProps, OverridedTheme>;

export type CreateStyledOtherComponent<InnerProps extends object, Theme extends object> =
<Props extends object, OverridedTheme extends object = Theme>(
...args: Array<Interpolation<Themed<Props, OverridedTheme>>>
) => StyledOtherComponent<Props, InnerProps, OverridedTheme>;

export interface CreateStyled<Theme extends object = any> {
<T extends keyof ReactHTML>(
tag: T,
options?: StyledOptions,
): CreateStyledOtherComponent<ReactHTML[T], Theme>;

<T extends keyof ReactSVG>(
tag: T,
options?: StyledOptions,
): CreateStyledOtherComponent<ReactSVG[T], Theme>;

<IP extends object>(
component: SFC<IP>,
options?: StyledOptions,
): CreateStyledStatelessComponent<IP, Theme>;

<IP extends object>(
component: ComponentClass<IP>,
options?: StyledOptions,
): CreateStyledOtherComponent<IP, Theme>;
}
import {
CreateStyled,
CreateStyledOtherComponent,
CreateStyledStatelessComponent,
StyledComponent,
StyledComponentMethods,
StyledOtherComponent,
StyledStatelessComponent,
} from './react';

import {
ArrayInterpolation,
FunctionInterpolation,
Interpolation,
StyledOptions,
Themed,
} from './common';

export {
ArrayInterpolation,
FunctionInterpolation,
Interpolation,
StyledOptions,
Themed,

CreateStyled,
CreateStyledOtherComponent,
CreateStyledStatelessComponent,
StyledComponent,
StyledComponentMethods,
StyledOtherComponent,
StyledStatelessComponent,
};

export default function createEmotionStyled(emotion: Emotion, view: typeof React): CreateStyled;
79 changes: 79 additions & 0 deletions packages/create-emotion-styled/types/react.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.3

import React, { ComponentClass, Ref, SFC } from 'react';

import {
Interpolation,
StyledOptions,
StyledOtherProps,
StyledStatelessProps,
Themed,
} from './common';

export interface StyledComponentMethods<Props extends object, InnerProps extends object, Theme extends object> {
withComponent<T extends keyof JSX.IntrinsicElements>(
tag: T,
options?: StyledOptions,
): StyledOtherComponent<Props, JSX.IntrinsicElements[T], Theme>;

withComponent<IP extends object>(
component: SFC<IP>,
options?: StyledOptions,
): StyledStatelessComponent<Props, IP, Theme>;

withComponent<IP extends object>(
component: ComponentClass<IP>,
options?: StyledOptions,
): StyledOtherComponent<Props, IP, Theme>;
}

export interface StyledStatelessComponent<Props extends object, InnerProps extends object, Theme extends object>
extends ComponentClass<StyledStatelessProps<Props & InnerProps, Theme>>,
StyledComponentMethods<Props, InnerProps, Theme> {}

export interface StyledOtherComponent<Props extends object, InnerProps extends object, Theme extends object>
extends ComponentClass<StyledOtherProps<Props & InnerProps, Theme, Ref<any>>>,
StyledComponentMethods<Props, InnerProps, Theme> {}

export type StyledComponent<Props extends object, InnerProps extends object, Theme extends object> =
| StyledStatelessComponent<Props, InnerProps, Theme>
| StyledOtherComponent<Props, InnerProps, Theme>
;

export interface CreateStyledStatelessComponent<InnerProps extends object, Theme extends object> {
<Props extends object, OverridedTheme extends object = Theme>(
...args: Array<Interpolation<Themed<Props, OverridedTheme>>>
): StyledStatelessComponent<Props, InnerProps, OverridedTheme>;
}

export interface CreateStyledOtherComponent<InnerProps extends object, Theme extends object> {
<Props extends object, OverridedTheme extends object = Theme>(
...args: Array<Interpolation<Themed<Props, OverridedTheme>>>
): StyledOtherComponent<Props, InnerProps, OverridedTheme>;
}

export interface CreateStyledFunction<Theme extends object> {
<T extends keyof JSX.IntrinsicElements>(
tag: T,
options?: StyledOptions,
): CreateStyledOtherComponent<JSX.IntrinsicElements[T], Theme>;

<IP extends object>(
component: SFC<IP>,
options?: StyledOptions,
): CreateStyledStatelessComponent<IP, Theme>;

<IP extends object>(
component: ComponentClass<IP>,
options?: StyledOptions,
): CreateStyledOtherComponent<IP, Theme>;
}

export type CreateStyledShorthands<Theme extends object> = {
[T in keyof JSX.IntrinsicElements]: CreateStyledOtherComponent<JSX.IntrinsicElements[T], Theme>;
};

export interface CreateStyled<Theme extends object = any>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason this needs Theme extends object = any whereas the shorthand one doesn't need = any?

Copy link
Member Author

@Ailrun Ailrun May 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mitchellhamilton CreateStyled is access point of all API, where CreateStyledShorthands is just a base interface (well, it's not really interface, but in some way, it's similar to interface) of CreateStyled.
Therefore, CreateStyled is one used by user, so I put the default type on this interface only.

extends CreateStyledFunction<Theme>,
CreateStyledShorthands<Theme> {}
98 changes: 96 additions & 2 deletions packages/create-emotion-styled/types/test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,18 @@ const StyledClassComp0 = createStyled(TestClassComp)({
height: props.theme.long ? '200px' : '100px',
}));

const StyledClassComp1 = createStyled(TestClassComp)`
const StyledClassComp1 = createStyled(TestClassComp) `
width: 200px;
height: ${(props) => props.theme ? '200px' : '100px'};
`;

<StyledClassComp0 some={5} />;
<StyledClassComp0 some={2} innerRef={(x: TestClassComp) => { }} />;

<StyledClassComp1 some={5} />;
<StyledClassComp1 some={2} innerRef={(x: TestClassComp) => { }} />;
<StyledClassComp1 some={2} theme={{ x: 5 }} innerRef={(x: TestClassComp) => { }} />;

interface StyledFunProps {
color: string;
}
Expand All @@ -76,7 +83,7 @@ const StyledFunComp0 = createStyled(TestFunComp0)<StyledFunProps>([{
color: props.color,
}));

const StyledFunComp1 = createStyled(TestFunComp0)`
const StyledFunComp1 = createStyled(TestFunComp0) `
display: inline;
position: fixed;
flexGrow: 20;
Expand All @@ -87,7 +94,94 @@ const StyledFunComp1 = createStyled(TestFunComp0)`
`}
`;

<StyledFunComp0 color='123' complex={{ id: 4, name: 'abc', friends: [] }} />;
// $ExpectError
<StyledFunComp0 color='123' complex={{ id: 4, name: 'abc', friends: [] }} innerRef={undefined as any} />;

interface StyledTagProps {
typing: number;
}

const StyledTag0 = createStyled('div')<StyledTagProps>({
margin: 20,
marginBottom: '30px',
}, (props) => ({
display: Number.isFinite(props.typing) ? 'flex' : 'block',
}));

const StyledTag1 = createStyled('label')`
width: 20px;
height: 50px;

background-color: green;

display: ${(props: StyledTagProps) => {
return Number.isFinite(props.typing) ? 'flex' : 'block';
}};
`;

<StyledTag0 typing={NaN} />;
<StyledTag0 typing={Infinity} innerRef={(ref: HTMLDivElement) => { ref = ref; }} />;
<StyledTag0 typing={5} onClick={() => ''} />;

<StyledTag1 typing={NaN} />;
<StyledTag1 typing={Infinity} innerRef={(ref: HTMLDivElement) => { ref = ref; }} />;
<StyledTag1 typing={5} onClick={() => ''} />;

const StyledCompWithButton = StyledClassComp0.withComponent('button');
const StyledCompWithFunComp2 = StyledFunComp0.withComponent(TestFunComp1);

<StyledCompWithButton />;
<StyledCompWithButton onClick={() => ''} />;
<StyledCompWithButton onClick={() => ''} innerRef={(ref: HTMLButtonElement) => { }} />;

<StyledCompWithFunComp2 color='#ffff00' complex={{ id: 42, name: 'truth', friends: [69] }} world={1} />;
// $ExpectError
<StyledCompWithFunComp2 color='#ffff00' complex={{ id: 42, name: 'truth', friends: [69] }} world={1} innerRef={() => ''} />;

const StyledCompShorthand0 = createStyled.a({
textAlign: 'center',
})
const StyledCompShorthand1 = createStyled.label`
display: block;

width: 200px;
height: 130px;
`;

<StyledCompShorthand0 />;
<StyledCompShorthand1 />;
<StyledCompShorthand1 theme={{}} />;
// $ExpectError
<StyledCompShorthand1 theme={{}} asdfasdf={undefined as any} />;

interface ShorthandProps {
editor: 'vscode' | 'emacs' | 'sublime';
}

const getEditorLogoColor = (editor: 'vscode' | 'emacs' | 'sublime') => {
switch (editor) {
case 'vscode':
return '007bcd';
case 'emacs':
return '5e5ba8';
case 'sublime':
return 'ff9800';
}
}

const StyledCompShorthandWithProps0 = createStyled.div<ShorthandProps>(props => ({
backgroundColor: getEditorLogoColor(props.editor),
}));
const StyledCompShorthandWithProps1 = createStyled.section<ShorthandProps>`
backgroundColor: ${props => getEditorLogoColor(props.editor)};
`;

<StyledCompShorthandWithProps0 editor='emacs' />;
<StyledCompShorthandWithProps0 editor='vscode' innerRef={() => {}} />;
<StyledCompShorthandWithProps1 editor={'sublime'} theme={{}} />;
// $ExpectError
<StyledCompShorthandWithProps0 editor='emacs' other={'thing' as any} />;

// $ExpectError
createStyled.asdf;
1 change: 1 addition & 0 deletions packages/create-emotion-styled/types/tslint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"extends": "dtslint/dtslint.json",
"rules": {
"array-type": [true, "generic"],
"callable-types": false,
"no-import-default-of-export-equals": false,
"no-relative-import-in-test": false
}
Expand Down