Skip to content

Commit

Permalink
feat: add typescript definitions
Browse files Browse the repository at this point in the history
fixes #197
  • Loading branch information
satya164 committed Oct 18, 2018
1 parent b1d1490 commit f0a7375
Show file tree
Hide file tree
Showing 9 changed files with 181 additions and 7 deletions.
3 changes: 0 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ build/Release
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

Expand Down
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
"version": "1.0.0-alpha.13",
"description": "Blazing fast zero-runtime CSS in JS library",
"main": "lib/index.js",
"types": "typings/index.d.ts",
"files": [
"lib/",
"typings/",
"react.js",
"server.js",
"babel.js",
Expand Down Expand Up @@ -49,6 +51,7 @@
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@callstack/eslint-config": "^2.0.0",
"@types/react": "^16.4.18",
"all-contributors-cli": "^5.4.0",
"babel-core": "^7.0.0-bridge.0",
"codecov": "^3.1.0",
Expand All @@ -63,7 +66,8 @@
"prettier": "^1.14.2",
"puppeteer": "^1.8.0",
"react": "^16.5.1",
"release-it": "^7.6.1"
"release-it": "^7.6.1",
"typescript": "^3.1.3"
},
"dependencies": {
"@babel/core": "^7.0.1",
Expand Down
7 changes: 4 additions & 3 deletions src/react/styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,13 @@ if (process.env.NODE_ENV !== 'production') {
}

/* ::
type StyledComponent<T> = React.ComponentType<T & { as?: React$ElementType }>;
type StyledComponent<T> = React.ComponentType<{ ...T, as?: React$ElementType, className?: string }>;
type StyledTag<T> = (strings: string[], ...exprs: Array<string | number | {} | (T => string | number)>) => StyledComponent<T>;
declare module.exports: {|
type StyledJSXIntrinsics = $ObjMap<$JSXIntrinsics, <T>({ props: T }) => StyledTag<T>>;
declare module.exports: StyledJSXIntrinsics & {|
<T>(T): StyledTag<React.ElementConfig<T>>,
[string]: StyledTag<{ children?: React.Node, [key: string]: any }>,
|};
*/
13 changes: 13 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": ["es6", "dom"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
}
}
30 changes: 30 additions & 0 deletions typings/__fixtures__/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/// <reference path="../index.d.ts" />

import * as React from 'react';
import { css, cx } from 'linaria';

const tomato = 'tomato';
const border = 1;

const absoluteFill = {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
};

const title = css`
color: ${tomato};
border-width: ${border}px;
&.abs {
${absoluteFill};
}
`;

const heading = css`
font-family: sans-serif;
`;

<h1 className={cx(title, heading, false, undefined, null, 0)}>Hello world</h1>;
46 changes: 46 additions & 0 deletions typings/__fixtures__/react.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/// <reference path="../index.d.ts" />

import * as React from 'react';
import { styled } from 'linaria/react';

const white = 'white';
const tomato = 'tomato';
const border = 1;

const absoluteFill = {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
};

const Button = styled.button`
color: ${white};
background-color: ${props => props.background};
border-width: ${border}px;
&.abs {
${absoluteFill};
}
`;

const CustomButton = styled(Button)`
&:hover {
background-color: ${tomato};
}
`;

class Title extends React.Component<{ label: string; className: string }> {
render() {
return <h1 className={this.props.className}>{this.props.label}</h1>;
}
}

const CustomTitle = styled(Title)`
font-family: sans-serif;
`;

<Button as="a">Hello world</Button>;
<CustomButton onClick={() => alert('Clicked')}>Hello world</CustomButton>;
<CustomTitle label="Hello world" />;
11 changes: 11 additions & 0 deletions typings/__fixtures__/server.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/// <reference path="../index.d.ts" />

import { collect } from 'linaria/server';

const { critical, other } = collect(
'<div class="foo">Hello</div>',
'.foo { color: blue; }'
);

critical.toLowerCase();
other.toLowerCase();
49 changes: 49 additions & 0 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
declare module 'linaria' {
export const css: (
strings: TemplateStringsArray,
...exprs: Array<string | number | object>
) => string;

export const cx: (
...classNames: Array<string | false | undefined | null | 0>
) => string;
}

declare module 'linaria/react' {
import * as React from 'react';

type Overwrite<T1, T2> = { [P in Exclude<keyof T1, keyof T2>]: T1[P] } & T2;

type InterpolationFunction<T> = (props: T) => string | number;

type StyledComponent<T> = React.ComponentType<
Overwrite<T, { as?: React.ReactType<any>; className?: string }>
>;

type StyledTag<T> = (
strings: TemplateStringsArray,
...exprs: Array<string | number | object | InterpolationFunction<T>>
) => StyledComponent<T>;

type StyledJSXIntrinsics = {
[P in keyof JSX.IntrinsicElements]: StyledTag<
JSX.IntrinsicElements[P] & { [key: string]: any }
>
};

export const styled: StyledJSXIntrinsics & {
<T>(component: React.ReactType<T>): StyledTag<T>;

[key: string]: StyledTag<{
children?: React.ReactNode;
[key: string]: any;
}>;
};
}

declare module 'linaria/server' {
export const collect: (
html: string,
css: string
) => { critical: string; other: string };
}
23 changes: 23 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -949,6 +949,19 @@
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==

"@types/prop-types@*":
version "15.5.6"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==

"@types/react@^16.4.18":
version "16.4.18"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.18.tgz#2e28a2e7f92d3fa7d6a65f2b73275c3e3138a13d"
integrity sha512-eFzJKEg6pdeaukVLVZ8Xb79CTl/ysX+ExmOfAAqcFlCCK5TgFDD9kWR0S18sglQ3EmM8U+80enjUqbfnUyqpdA==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"

JSONStream@^1.0.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.4.tgz#615bb2adb0cd34c8f4c447b5f6512fa1d8f16a2e"
Expand Down Expand Up @@ -2676,6 +2689,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"

csstype@^2.2.0:
version "2.5.7"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
integrity sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==

currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
Expand Down Expand Up @@ -7826,6 +7844,11 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

typescript@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.3.tgz#01b70247a6d3c2467f70c45795ef5ea18ce191d5"
integrity sha512-+81MUSyX+BaSo+u2RbozuQk/UWx6hfG0a5gHu4ANEM4sU96XbuIyAB+rWBW1u70c6a5QuZfuYICn3s2UjuHUpA==

uglify-js@^2.6:
version "2.8.29"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
Expand Down

0 comments on commit f0a7375

Please sign in to comment.