Skip to content

Commit

Permalink
Merge pull request styled-components#837 from patrick91/feature/typin…
Browse files Browse the repository at this point in the history
…gs-2

Add missing TS typings for V2
  • Loading branch information
kitten authored Jun 6, 2017
2 parents 8103e32 + 5bcde2e commit 6ba3c7d
Show file tree
Hide file tree
Showing 16 changed files with 412 additions and 176 deletions.
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"flow:watch": "flow-watch",
"lint": "eslint src",
"tslint": "tslint typings/*.ts native/*.ts",
"typescript": "tsc ./typings/styled-components-test.tsx ./typings/styled-components-native-test.tsx ./typings/themed-tests/mytheme-styled-components-test.tsx --noEmit --jsx react --target es6 --module es2015 --moduleResolution node",
"typescript": "tsc --project ./typings/tests",
"prepublish": "npm run build",
"lint-staged": "lint-staged",
"dev": "babel-node example/devServer.js"
Expand Down Expand Up @@ -69,8 +69,9 @@
"supports-color": "^3.2.3"
},
"devDependencies": {
"@types/react": "^0.14.55",
"@types/react-native": "^0.37.5",
"@types/react": "^15.0.25",
"@types/react-dom": "^15.5.0",
"@types/react-native": "^0.44.4",
"babel-cli": "^6.22.2",
"babel-core": "^6.17.0",
"babel-eslint": "^7.1.1",
Expand Down Expand Up @@ -119,7 +120,7 @@
"rollup-plugin-uglify": "^1.0.1",
"rollup-plugin-visualizer": "^0.1.5",
"tslint": "^4.3.1",
"typescript": "^2.1.5"
"typescript": "^2.3.3"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0"
Expand Down
192 changes: 46 additions & 146 deletions typings/styled-components.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import * as React from "react";
import { StatelessComponent, ComponentClass, PureComponent, ReactElement } from "react";

import { HTMLTags, SVGTags } from "./tags";

type Component<P> = ComponentClass<P> | StatelessComponent<P>;

export interface ThemeProps<T> {
Expand All @@ -24,10 +26,24 @@ export interface InterpolationFunction<P> {
(props: P): Interpolation<P>;
}

export interface ThemedStyledFunction<P, T> {
(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): ComponentClass<ThemedOuterStyledProps<P, T>>;
<U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): ComponentClass<ThemedOuterStyledProps<P & U, T>>;
type Attrs<P, A extends Partial<P>, T> = {
[K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K];
};

export interface StyledComponentClass<P, T, O = P> extends ComponentClass<ThemedOuterStyledProps<O, T>> {
extend: ThemedStyledFunction<P, T, O>;

withComponent<K extends keyof HTMLTags>(tag: K): StyledComponentClass<React.HTMLProps<HTMLTags[K]>, T, O>;
withComponent<K extends keyof SVGTags>(tag: K): StyledComponentClass<React.SVGAttributes<SVGTags[K]>, T, O>;
withComponent(element: ComponentClass<P>): StyledComponentClass<P, T, O>;
}

export interface ThemedStyledFunction<P, T, O = P> {
(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]): StyledComponentClass<P, T, O>;
<U>(strings: TemplateStringsArray, ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]): StyledComponentClass<P & U, T, O & U>;
attrs<U, A extends Partial<P & U> = {}>(attrs: Attrs<P & U, A, T>): ThemedStyledFunction<P & A & U, T, O & U>;
}

export type StyledFunction<P> = ThemedStyledFunction<P, any>;

export type ThemedHtmlStyledFunction<E, T> = ThemedStyledFunction<React.HTMLProps<E>, T>;
Expand All @@ -36,150 +52,28 @@ export type HtmlStyledFunction<E> = ThemedHtmlStyledFunction<E, any>;
export type ThemedSvgStyledFunction<E extends SVGElement, T> = ThemedStyledFunction<React.SVGAttributes<E>, T>;
export type SvgStyledFunction<E extends SVGElement> = ThemedSvgStyledFunction<E, any>;

export interface ThemedBaseStyledInterface<T> {
type ThemedStyledComponentFactoriesHTML<T> = {
[K in keyof HTMLTags]: ThemedHtmlStyledFunction<HTMLTags[K], T>;
};

type ThemedStyledComponentFactoriesSVG<T> = {
[K in keyof SVGTags]: ThemedSvgStyledFunction<SVGTags[K], T>;
};

type ThemedStyledComponentFactories<T> = ThemedStyledComponentFactoriesHTML<T> & ThemedStyledComponentFactoriesHTML<T>;

export interface ThemedBaseStyledInterface<T> extends ThemedStyledComponentFactories<T> {
<P>(component: Component<P>): ThemedStyledFunction<P, T>;
}
export type BaseStyledInterface = ThemedBaseStyledInterface<any>;

export type ThemedStyledInterface<T> = ThemedBaseStyledInterface<T>;
export type StyledInterface = ThemedStyledInterface<any>;
export interface ThemedStyledInterface<T> extends ThemedBaseStyledInterface<T> {
a: ThemedHtmlStyledFunction<HTMLAnchorElement, T>;
abbr: ThemedHtmlStyledFunction<HTMLElement, T>;
address: ThemedHtmlStyledFunction<HTMLElement, T>;
area: ThemedHtmlStyledFunction<HTMLAreaElement, T>;
article: ThemedHtmlStyledFunction<HTMLElement, T>;
aside: ThemedHtmlStyledFunction<HTMLElement, T>;
audio: ThemedHtmlStyledFunction<HTMLAudioElement, T>;
b: ThemedHtmlStyledFunction<HTMLElement, T>;
base: ThemedHtmlStyledFunction<HTMLBaseElement, T>;
bdi: ThemedHtmlStyledFunction<HTMLElement, T>;
bdo: ThemedHtmlStyledFunction<HTMLElement, T>;
big: ThemedHtmlStyledFunction<HTMLElement, T>;
blockquote: ThemedHtmlStyledFunction<HTMLElement, T>;
body: ThemedHtmlStyledFunction<HTMLBodyElement, T>;
br: ThemedHtmlStyledFunction<HTMLBRElement, T>;
button: ThemedHtmlStyledFunction<HTMLButtonElement, T>;
canvas: ThemedHtmlStyledFunction<HTMLCanvasElement, T>;
caption: ThemedHtmlStyledFunction<HTMLElement, T>;
cite: ThemedHtmlStyledFunction<HTMLElement, T>;
code: ThemedHtmlStyledFunction<HTMLElement, T>;
col: ThemedHtmlStyledFunction<HTMLTableColElement, T>;
colgroup: ThemedHtmlStyledFunction<HTMLTableColElement, T>;
data: ThemedHtmlStyledFunction<HTMLElement, T>;
datalist: ThemedHtmlStyledFunction<HTMLDataListElement, T>;
dd: ThemedHtmlStyledFunction<HTMLElement, T>;
del: ThemedHtmlStyledFunction<HTMLElement, T>;
details: ThemedHtmlStyledFunction<HTMLElement, T>;
dfn: ThemedHtmlStyledFunction<HTMLElement, T>;
dialog: ThemedHtmlStyledFunction<HTMLElement, T>;
div: ThemedHtmlStyledFunction<HTMLDivElement, T>;
dl: ThemedHtmlStyledFunction<HTMLDListElement, T>;
dt: ThemedHtmlStyledFunction<HTMLElement, T>;
em: ThemedHtmlStyledFunction<HTMLElement, T>;
embed: ThemedHtmlStyledFunction<HTMLEmbedElement, T>;
fieldset: ThemedHtmlStyledFunction<HTMLFieldSetElement, T>;
figcaption: ThemedHtmlStyledFunction<HTMLElement, T>;
figure: ThemedHtmlStyledFunction<HTMLElement, T>;
footer: ThemedHtmlStyledFunction<HTMLElement, T>;
form: ThemedHtmlStyledFunction<HTMLFormElement, T>;
h1: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
h2: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
h3: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
h4: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
h5: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
h6: ThemedHtmlStyledFunction<HTMLHeadingElement, T>;
head: ThemedHtmlStyledFunction<HTMLHeadElement, T>;
header: ThemedHtmlStyledFunction<HTMLElement, T>;
hgroup: ThemedHtmlStyledFunction<HTMLElement, T>;
hr: ThemedHtmlStyledFunction<HTMLHRElement, T>;
html: ThemedHtmlStyledFunction<HTMLHtmlElement, T>;
i: ThemedHtmlStyledFunction<HTMLElement, T>;
iframe: ThemedHtmlStyledFunction<HTMLIFrameElement, T>;
img: ThemedHtmlStyledFunction<HTMLImageElement, T>;
input: ThemedHtmlStyledFunction<HTMLInputElement, T>;
ins: ThemedHtmlStyledFunction<HTMLModElement, T>;
kbd: ThemedHtmlStyledFunction<HTMLElement, T>;
keygen: ThemedHtmlStyledFunction<HTMLElement, T>;
label: ThemedHtmlStyledFunction<HTMLLabelElement, T>;
legend: ThemedHtmlStyledFunction<HTMLLegendElement, T>;
li: ThemedHtmlStyledFunction<HTMLLIElement, T>;
link: ThemedHtmlStyledFunction<HTMLLinkElement, T>;
main: ThemedHtmlStyledFunction<HTMLElement, T>;
map: ThemedHtmlStyledFunction<HTMLMapElement, T>;
mark: ThemedHtmlStyledFunction<HTMLElement, T>;
menu: ThemedHtmlStyledFunction<HTMLElement, T>;
menuitem: ThemedHtmlStyledFunction<HTMLElement, T>;
meta: ThemedHtmlStyledFunction<HTMLMetaElement, T>;
meter: ThemedHtmlStyledFunction<HTMLElement, T>;
nav: ThemedHtmlStyledFunction<HTMLElement, T>;
noscript: ThemedHtmlStyledFunction<HTMLElement, T>;
object: ThemedHtmlStyledFunction<HTMLObjectElement, T>;
ol: ThemedHtmlStyledFunction<HTMLOListElement, T>;
optgroup: ThemedHtmlStyledFunction<HTMLOptGroupElement, T>;
option: ThemedHtmlStyledFunction<HTMLOptionElement, T>;
output: ThemedHtmlStyledFunction<HTMLElement, T>;
p: ThemedHtmlStyledFunction<HTMLParagraphElement, T>;
param: ThemedHtmlStyledFunction<HTMLParamElement, T>;
picture: ThemedHtmlStyledFunction<HTMLElement, T>;
pre: ThemedHtmlStyledFunction<HTMLPreElement, T>;
progress: ThemedHtmlStyledFunction<HTMLProgressElement, T>;
q: ThemedHtmlStyledFunction<HTMLQuoteElement, T>;
rp: ThemedHtmlStyledFunction<HTMLElement, T>;
rt: ThemedHtmlStyledFunction<HTMLElement, T>;
ruby: ThemedHtmlStyledFunction<HTMLElement, T>;
s: ThemedHtmlStyledFunction<HTMLElement, T>;
samp: ThemedHtmlStyledFunction<HTMLElement, T>;
script: ThemedHtmlStyledFunction<HTMLElement, T>;
section: ThemedHtmlStyledFunction<HTMLElement, T>;
select: ThemedHtmlStyledFunction<HTMLSelectElement, T>;
small: ThemedHtmlStyledFunction<HTMLElement, T>;
source: ThemedHtmlStyledFunction<HTMLSourceElement, T>;
span: ThemedHtmlStyledFunction<HTMLSpanElement, T>;
strong: ThemedHtmlStyledFunction<HTMLElement, T>;
style: ThemedHtmlStyledFunction<HTMLStyleElement, T>;
sub: ThemedHtmlStyledFunction<HTMLElement, T>;
summary: ThemedHtmlStyledFunction<HTMLElement, T>;
sup: ThemedHtmlStyledFunction<HTMLElement, T>;
table: ThemedHtmlStyledFunction<HTMLTableElement, T>;
tbody: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>;
td: ThemedHtmlStyledFunction<HTMLTableDataCellElement, T>;
textarea: ThemedHtmlStyledFunction<HTMLTextAreaElement, T>;
tfoot: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>;
th: ThemedHtmlStyledFunction<HTMLTableHeaderCellElement, T>;
thead: ThemedHtmlStyledFunction<HTMLTableSectionElement, T>;
time: ThemedHtmlStyledFunction<HTMLElement, T>;
title: ThemedHtmlStyledFunction<HTMLTitleElement, T>;
tr: ThemedHtmlStyledFunction<HTMLTableRowElement, T>;
track: ThemedHtmlStyledFunction<HTMLTrackElement, T>;
u: ThemedHtmlStyledFunction<HTMLElement, T>;
ul: ThemedHtmlStyledFunction<HTMLUListElement, T>;
"var": ThemedHtmlStyledFunction<HTMLElement, T>;
video: ThemedHtmlStyledFunction<HTMLVideoElement, T>;
wbr: ThemedHtmlStyledFunction<HTMLElement, T>;

// SVG
circle: ThemedSvgStyledFunction<SVGCircleElement, T>;
clipPath: ThemedSvgStyledFunction<SVGClipPathElement, T>;
defs: ThemedSvgStyledFunction<SVGDefsElement, T>;
ellipse: ThemedSvgStyledFunction<SVGEllipseElement, T>;
g: ThemedSvgStyledFunction<SVGGElement, T>;
image: ThemedSvgStyledFunction<SVGImageElement, T>;
line: ThemedSvgStyledFunction<SVGLineElement, T>;
linearGradient: ThemedSvgStyledFunction<SVGLinearGradientElement, T>;
mask: ThemedSvgStyledFunction<SVGMaskElement, T>;
path: ThemedSvgStyledFunction<SVGPathElement, T>;
pattern: ThemedSvgStyledFunction<SVGPatternElement, T>;
polygon: ThemedSvgStyledFunction<SVGPolygonElement, T>;
polyline: ThemedSvgStyledFunction<SVGPolylineElement, T>;
radialGradient: ThemedSvgStyledFunction<SVGRadialGradientElement, T>;
rect: ThemedSvgStyledFunction<SVGRectElement, T>;
stop: ThemedSvgStyledFunction<SVGStopElement, T>;
svg: ThemedSvgStyledFunction<SVGSVGElement, T>;
text: ThemedSvgStyledFunction<SVGTextElement, T>;
tspan: ThemedSvgStyledFunction<SVGTSpanElement, T>;
}

export type ThemeProviderComponent<T> = ComponentClass<ThemeProps<T>>;
export interface ThemeProviderProps<T> {
theme?: T | ((theme: T) => T);
}
export type ThemeProviderComponent<T> = ComponentClass<ThemeProviderProps<T>>;

export interface ThemedCssFunction<T> {
(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): InterpolationValue[];
Expand All @@ -205,13 +99,19 @@ export function withTheme<P extends { theme?: T; }, T>(component: Component<P>):
export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;

export const ThemeProvider: ThemeProviderComponent<any>;
export const ThemeProvider: ThemeProviderComponent<object>;

interface StylesheetComponentProps {
sheet: ServerStyleSheet;
}

export class StyleSheetManager extends React.Component<StylesheetComponentProps, any> { }

export class ServerStyleSheet {
collectStyles(children: ReactElement<any>): ReactElement<any>
getStyleTags(): string
getStyleElement(): ReactElement<any>[]
static create(): StyleSheet
collectStyles(tree: React.ReactNode): ReactElement<StylesheetComponentProps>;

getStyleTags(): string;
getStyleElement(): ReactElement<any>[];
}

export default styled;
137 changes: 137 additions & 0 deletions typings/tags.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
export interface HTMLTags {
a: HTMLAnchorElement;
abbr: HTMLElement;
address: HTMLElement;
area: HTMLAreaElement;
article: HTMLElement;
aside: HTMLElement;
audio: HTMLAudioElement;
b: HTMLElement;
base: HTMLBaseElement;
bdi: HTMLElement;
bdo: HTMLElement;
big: HTMLElement;
blockquote: HTMLElement;
body: HTMLBodyElement;
br: HTMLBRElement;
button: HTMLButtonElement;
canvas: HTMLCanvasElement;
caption: HTMLElement;
cite: HTMLElement;
code: HTMLElement;
col: HTMLTableColElement;
colgroup: HTMLTableColElement;
data: HTMLElement;
datalist: HTMLDataListElement;
dd: HTMLElement;
del: HTMLElement;
details: HTMLElement;
dfn: HTMLElement;
dialog: HTMLElement;
div: HTMLDivElement;
dl: HTMLDListElement;
dt: HTMLElement;
em: HTMLElement;
embed: HTMLEmbedElement;
fieldset: HTMLFieldSetElement;
figcaption: HTMLElement;
figure: HTMLElement;
footer: HTMLElement;
form: HTMLFormElement;
h1: HTMLHeadingElement;
h2: HTMLHeadingElement;
h3: HTMLHeadingElement;
h4: HTMLHeadingElement;
h5: HTMLHeadingElement;
h6: HTMLHeadingElement;
head: HTMLHeadElement;
header: HTMLElement;
hgroup: HTMLElement;
hr: HTMLHRElement;
html: HTMLHtmlElement;
i: HTMLElement;
iframe: HTMLIFrameElement;
img: HTMLImageElement;
input: HTMLInputElement;
ins: HTMLModElement;
kbd: HTMLElement;
keygen: HTMLElement;
label: HTMLLabelElement;
legend: HTMLLegendElement;
li: HTMLLIElement;
link: HTMLLinkElement;
main: HTMLElement;
map: HTMLMapElement;
mark: HTMLElement;
menu: HTMLElement;
menuitem: HTMLElement;
meta: HTMLMetaElement;
meter: HTMLElement;
nav: HTMLElement;
noscript: HTMLElement;
object: HTMLObjectElement;
ol: HTMLOListElement;
optgroup: HTMLOptGroupElement;
option: HTMLOptionElement;
output: HTMLElement;
p: HTMLParagraphElement;
param: HTMLParamElement;
picture: HTMLElement;
pre: HTMLPreElement;
progress: HTMLProgressElement;
q: HTMLQuoteElement;
rp: HTMLElement;
rt: HTMLElement;
ruby: HTMLElement;
s: HTMLElement;
samp: HTMLElement;
script: HTMLElement;
section: HTMLElement;
select: HTMLSelectElement;
small: HTMLElement;
source: HTMLSourceElement;
span: HTMLSpanElement;
strong: HTMLElement;
style: HTMLStyleElement;
sub: HTMLElement;
summary: HTMLElement;
sup: HTMLElement;
table: HTMLTableElement;
tbody: HTMLTableSectionElement;
td: HTMLTableDataCellElement;
textarea: HTMLTextAreaElement;
tfoot: HTMLTableSectionElement;
th: HTMLTableHeaderCellElement;
thead: HTMLTableSectionElement;
time: HTMLElement;
title: HTMLTitleElement;
tr: HTMLTableRowElement;
track: HTMLTrackElement;
u: HTMLElement;
ul: HTMLUListElement;
"var": HTMLElement;
video: HTMLVideoElement;
wbr: HTMLElement;
}

export interface SVGTags {
circle: SVGCircleElement;
clipPath: SVGClipPathElement;
defs: SVGDefsElement;
ellipse: SVGEllipseElement;
g: SVGGElement;
image: SVGImageElement;
line: SVGLineElement;
linearGradient: SVGLinearGradientElement;
mask: SVGMaskElement;
path: SVGPathElement;
pattern: SVGPatternElement;
polygon: SVGPolygonElement;
polyline: SVGPolylineElement;
radialGradient: SVGRadialGradientElement;
rect: SVGRectElement;
stop: SVGStopElement;
svg: SVGSVGElement;
text: SVGTextElement;
tspan: SVGTSpanElement;
}
Loading

0 comments on commit 6ba3c7d

Please sign in to comment.