Switched to using dtslint from just running tsc --noEmit for typescri…

…pt tests. A few related changes, some as a side-effect of doing so: * Renamed typings directory to types because this seems to be more standard. * Renamed emotion.d.ts, etc to index.d.ts because dtslint seems to require this. * Stopped "build" running before "test:typescript" as this is not actually necessary.
emotion-js · Oct 24, 2017 · 14543f7 · 14543f7
1 parent 8eb316b
commit 14543f7
Show file tree

Hide file tree

Showing 16 changed files with 221 additions and 89 deletions.
diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json
@@ -4,15 +4,14 @@
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
-  "types": "typings/emotion-theming.d.ts",
+  "types": "types/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "scripts": {
     "build": "npm-run-all clean rollup rollup:umd",
-    "test:typescript": "tsc --noEmit -p typescript_tests/tsconfig.json",
-    "pretest:typescript": "npm run build",
+    "test:typescript": "dtslint types",
     "clean": "rimraf dist",
     "rollup": "rollup -c ../../rollup.config.js",
     "watch": "rollup -c ../../rollup.config.js --watch",
@@ -39,10 +38,10 @@
   "devDependencies": {
     "@types/react": "16.0.16",
     "cross-env": "^5.0.1",
+    "dtslint": "^0.2.0",
     "prop-types": "^15.5.8",
     "rimraf": "^2.6.1",
-    "rollup": "^0.43.0",
-    "typescript": "^2.5.3"
+    "rollup": "^0.43.0"
   },
   "dependencies": {
     "hoist-non-react-statics": "^2.3.1"

diff --git a/...tion-theming/typings/emotion-theming.d.ts → packages/emotion-theming/types/index.d.ts b/...tion-theming/typings/emotion-theming.d.ts → packages/emotion-theming/types/index.d.ts
@@ -1,9 +1,10 @@
+// TypeScript Version: 2.3
 import { ComponentClass, SFC } from "react";
 
 export type OptionalThemeProps<Props, Theme> = Props & { theme?: Theme };
 
 export interface ThemeProviderProps<Theme> {
-    theme: Partial<Theme> | { (theme: Theme): Theme };
+    theme: Partial<Theme> | ((theme: Theme) => Theme);
 }
 
 export type ThemeProviderComponent<Theme> = ComponentClass<ThemeProviderProps<Theme>>;
@@ -12,9 +13,10 @@ export const ThemeProvider: ThemeProviderComponent<object>;
 /**
  * Inject theme into component
  */
+// tslint:disable-next-line:no-unnecessary-generics
 export function withTheme<Props, Theme = {}>(component: ComponentClass<Props> | SFC<Props>): ComponentClass<OptionalThemeProps<Props, Theme>>;
 
 export interface EmotionThemingModule<Theme> {
     ThemeProvider: ThemeProviderComponent<Theme>;
     withTheme<Props>(component: ComponentClass<Props> | SFC<Props>): ComponentClass<OptionalThemeProps<Props, Theme>>;
-}
+}
diff --git a/...ing/typescript_tests/typescript_tests.tsx → packages/emotion-theming/types/tests.tsx b/...ing/typescript_tests/typescript_tests.tsx → packages/emotion-theming/types/tests.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import * as emotionTheming from '../';
+// tslint:disable-next-line:no-duplicate-imports
 import { ThemeProvider, withTheme, EmotionThemingModule } from '../';
 
 const theme = { primary: "green", secondary: "white" };
@@ -9,7 +10,7 @@ declare class CompC extends React.Component<{ prop: boolean }> { }
 /**
  * Theme Provider with no type
  */
-<ThemeProvider theme={theme} />; 
+<ThemeProvider theme={theme} />;
 <ThemeProvider theme={() => theme} />;
 
 /**
@@ -21,7 +22,7 @@ const ThemedSFC = withTheme(CompSFC);
 
 const ThemedComp = withTheme(CompC);
 <ThemedComp theme={theme} prop />;
-<ThemedComp prop />
+<ThemedComp prop />;
 
 const { ThemeProvider: TypedThemeProvider, withTheme: typedWithTheme } = emotionTheming as EmotionThemingModule<typeof theme>;
 
@@ -31,8 +32,8 @@ const { ThemeProvider: TypedThemeProvider, withTheme: typedWithTheme } = emotion
 
 const TypedThemedSFC = typedWithTheme(ThemedSFC);
 <TypedThemedSFC prop />;
-<TypedThemedSFC theme={theme} prop/>
+<TypedThemedSFC theme={theme} prop/>;
 
 const TypedCompSFC = typedWithTheme(CompSFC);
 <TypedCompSFC prop />;
-<TypedCompSFC theme={theme} prop />;
+<TypedCompSFC theme={theme} prop />;
diff --git a/...on-theming/typescript_tests/tsconfig.json → packages/emotion-theming/types/tsconfig.json b/...on-theming/typescript_tests/tsconfig.json → packages/emotion-theming/types/tsconfig.json
@@ -6,7 +6,12 @@
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
-    "jsx": "react"
+    "jsx": "react",
+    "lib": ["es6"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true
   },
   "include": [
     "./*.ts",

diff --git a/packages/emotion-theming/types/tslint.json b/packages/emotion-theming/types/tslint.json
@@ -0,0 +1,6 @@
+{
+    "extends": "dtslint/dtslint.json",
+    "rules": {
+        "no-relative-import-in-test": false
+    }
+}
diff --git a/packages/emotion/package.json b/packages/emotion/package.json
@@ -4,7 +4,7 @@
   "description": "The Next Generation of CSS-in-JS.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
-  "types": "typings/emotion.d.ts",
+  "types": "types/index.d.ts",
   "files": [
     "src",
     "dist",
@@ -16,8 +16,7 @@
   ],
   "scripts": {
     "build": "npm-run-all clean rollup rollup:umd",
-    "test:typescript": "tsc --noEmit -p typescript_tests/tsconfig.json",
-    "pretest:typescript": "npm run build",
+    "test:typescript": "dtslint types",
     "clean": "rimraf dist",
     "rollup": "rollup -c ../../rollup.config.js",
     "watch": "rollup -c ../../rollup.config.js --watch",
@@ -34,10 +33,10 @@
     "babel-cli": "^6.24.1",
     "babel-plugin-transform-define": "^1.3.0",
     "cross-env": "^5.0.5",
+    "dtslint": "^0.2.0",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
-    "rollup": "^0.43.0",
-    "typescript": "^2.0.0"
+    "rollup": "^0.43.0"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://emotion.sh",

diff --git a/packages/emotion/typings/emotion.d.ts → packages/emotion/types/index.d.ts b/packages/emotion/typings/emotion.d.ts → packages/emotion/types/index.d.ts
@@ -1,19 +1,16 @@
-export type Interpolation = string | number | boolean | null | undefined | _Interpolation1 | _Interpolation2 | _Interpolation3;
+// TypeScript Version: 2.2
+export type Interpolation = string | number | boolean | null | undefined | _Interpolation1 | _Interpolation2 | (() => Interpolation);
 
 // HACK: See https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
-interface _Interpolation1 extends Record<string, Interpolation> {}
-interface _Interpolation2 extends Array<Interpolation> {}
-interface _Interpolation3 {
-  (): Interpolation;
-}
+export interface _Interpolation1 extends Record<string, Interpolation> {}
+export interface _Interpolation2 extends Array<Interpolation> {}
 
 export type CreateStyles<TRet> = ((...values: Interpolation[]) => TRet)
   & ((strings: TemplateStringsArray, ...vars: Interpolation[]) => TRet);
 
-export interface StylisUse {
-  // TODO: Make this more precise than just Function
-  (plugin: Function | Function[] | null): StylisUse;
-}
+// TODO: Make this more precise than just Function
+// tslint:disable-next-line:ban-types
+export type StylisUse = (plugin: Function | Function[] | null) => StylisUse;
 
 export interface StyleSheet {
   inject(): void;

diff --git a/...ion/typescript_tests/typescript_tests.tsx → packages/emotion/types/tests.tsx b/...ion/typescript_tests/typescript_tests.tsx → packages/emotion/types/tests.tsx
@@ -8,6 +8,7 @@ import {
   hydrate,
   cx
 } from '../';
+// tslint:disable-next-line:no-implicit-dependencies
 import React from 'react';
 
 sheet.speedy(true);
@@ -50,7 +51,7 @@ css([
     { position: false },
     { width: 100 }
   ]
-])
+]);
 
 css(
   { display: 'none' },

diff --git a/...es/emotion/typescript_tests/tsconfig.json → packages/emotion/types/tsconfig.json b/...es/emotion/typescript_tests/tsconfig.json → packages/emotion/types/tsconfig.json
@@ -5,7 +5,12 @@
     "strict": true,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
-    "jsx": "react"
+    "jsx": "react",
+    "lib": ["es6"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true
   },
   "include": [
     "./*.ts",

diff --git a/packages/emotion/types/tslint.json b/packages/emotion/types/tslint.json
@@ -0,0 +1,6 @@
+{
+    "extends": "dtslint/dtslint.json",
+    "rules": {
+        "no-relative-import-in-test": false
+    }
+}
diff --git a/packages/react-emotion/package.json b/packages/react-emotion/package.json
@@ -4,7 +4,7 @@
   "description": "The Next Generation of CSS-in-JS, for React projects.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
-  "types": "typings/react-emotion.d.ts",
+  "types": "types/index.d.ts",
   "files": [
     "src",
     "dist",
@@ -13,8 +13,7 @@
   ],
   "scripts": {
     "build": "npm-run-all clean rollup rollup:umd",
-    "test:typescript": "tsc --noEmit -p typescript_tests/tsconfig.json",
-    "pretest:typescript": "npm run build",
+    "test:typescript": "dtslint types",
     "clean": "rimraf dist",
     "rollup": "rollup -c ../../rollup.config.js",
     "watch": "rollup -c ../../rollup.config.js --watch",
@@ -30,11 +29,11 @@
   "devDependencies": {
     "@types/react": "16.0.16",
     "cross-env": "^5.0.5",
+    "dtslint": "^0.2.0",
     "emotion": "^8.0.9",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
-    "rollup": "^0.43.0",
-    "typescript": "^2.0.0"
+    "rollup": "^0.43.0"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://github.com/tkh44/emotion#readme",

diff --git a/.../react-emotion/typings/react-emotion.d.ts → packages/react-emotion/types/index.d.ts b/.../react-emotion/typings/react-emotion.d.ts → packages/react-emotion/types/index.d.ts
@@ -1,73 +1,74 @@
-import { StatelessComponent, ComponentClass, CSSProperties } from 'react'
-import { Interpolation as EmotionInterpolation } from 'emotion'
+// TypeScript Version: 2.3
+// tslint:disable-next-line:no-implicit-dependencies
+import { StatelessComponent, ComponentClass, CSSProperties } from 'react';
+import { Interpolation as EmotionInterpolation } from 'emotion';
 
-export * from 'emotion'
+export * from 'emotion';
 
 export type InterpolationFn<Props = {}> =
   (props: Props) =>
     | EmotionInterpolation
-    | InterpolationFn<Props>
+    | InterpolationFn<Props>;
 
 export type InterpolationTypes<Props = {}> =
   | InterpolationFn<Props>
-  | EmotionInterpolation
+  | EmotionInterpolation;
 
 export type Interpolation<Props = {}> =
   | InterpolationTypes<Props>
-  | InterpolationTypes<Props>[]
+  | Array<InterpolationTypes<Props>>;
 
 export interface Options {
-  string?: string,
+  string?: string;
 }
 
 type Component<Props> =
   | ComponentClass<Props>
-  | StatelessComponent<Props>
+  | StatelessComponent<Props>;
 
 export type ThemedProps<Props, Theme> = Props & {
   theme: Theme,
-}
+};
 
 type ElementProps<Tag extends keyof JSX.IntrinsicElements> =
   & JSX.IntrinsicElements[Tag]
-  & { innerRef?: JSX.IntrinsicElements[Tag]['ref'] }
+  & { innerRef?: JSX.IntrinsicElements[Tag]['ref'] };
 
 export interface StyledComponent<Props, Theme, IntrinsicProps>
   extends
     ComponentClass<Props & IntrinsicProps>,
-    StatelessComponent<Props & IntrinsicProps>
-{
+    StatelessComponent<Props & IntrinsicProps> {
   withComponent<Tag extends keyof JSX.IntrinsicElements>(tag: Tag):
-    StyledComponent<Props, Theme, ElementProps<Tag>>
+    StyledComponent<Props, Theme, ElementProps<Tag>>;
 
   withComponent(component: Component<Props>):
-    StyledComponent<Props, Theme, {}>
+    StyledComponent<Props, Theme, {}>;
 
-  displayName: string
+  displayName: string;
 
-  __emotion_styles: string[]
-  __emotion_base: string | Component<Props & IntrinsicProps>
-  __emotion_real: ThemedReactEmotionInterface<Theme>
+  __emotion_styles: string[];
+  __emotion_base: string | Component<Props & IntrinsicProps>;
+  __emotion_real: ThemedReactEmotionInterface<Theme>;
 }
 
 export type ObjectStyleAttributes =
   | CSSProperties
-  | { [key: string]: ObjectStyleAttributes }
+  | { [key: string]: ObjectStyleAttributes };
 
 export interface CreateStyled<Props, Theme, IntrinsicProps> {
   // overload for template string as styles
   (
     strings: TemplateStringsArray,
-    ...vars: Interpolation<ThemedProps<Props & IntrinsicProps, Theme>>[],
-  ): StyledComponent<Props, Theme, IntrinsicProps>
+    ...vars: Array<Interpolation<ThemedProps<Props & IntrinsicProps, Theme>>>,
+  ): StyledComponent<Props, Theme, IntrinsicProps>;
 
   // overload for object as styles
   (
-    ...styles: (
+    ...styles: Array<
       | ObjectStyleAttributes
       | ((props: ThemedProps<Props & IntrinsicProps, Theme>) => ObjectStyleAttributes)
-    )[]
-  ): StyledComponent<Props, Theme, IntrinsicProps>
+    >
+  ): StyledComponent<Props, Theme, IntrinsicProps>;
 }
 
 // TODO: find a way to reuse CreateStyled here
@@ -77,15 +78,15 @@ type ShorthandsFactories<Theme> = {
     // overload for template string as styles
     <Props = {}>(
       strings: TemplateStringsArray,
-      ...vars: Interpolation<ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>>[],
+      ...vars: Array<Interpolation<ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>>>,
     ): StyledComponent<Props, Theme, ElementProps<Tag>>
-  
+
     // overload for object as styles
     <Props = {}>(
-      ...styles: (
+      ...styles: Array<
         | ObjectStyleAttributes
         | ((props: ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>) => ObjectStyleAttributes)
-      )[]
+      >
     ): StyledComponent<Props, Theme, ElementProps<Tag>>
   };
 };
@@ -95,20 +96,19 @@ export interface ThemedReactEmotionInterface<Theme> extends ShorthandsFactories<
   <Props, Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag,
     options?: Options,
-  ): CreateStyled<Props, Theme, ElementProps<Tag>>
+    // tslint:disable-next-line:no-unnecessary-generics
+  ): CreateStyled<Props, Theme, ElementProps<Tag>>;
 
   // overload for component
   <Props>(
     component: Component<Props>,
     options?: Options,
-  ): CreateStyled<Props, Theme, {}>
+  ): CreateStyled<Props, Theme, {}>;
 }
 
 export interface ThemedReactEmotionModule<Theme> {
-  default: ThemedReactEmotionInterface<Theme>
+  default: ThemedReactEmotionInterface<Theme>;
 }
 
-declare const styled: ThemedReactEmotionInterface<any>
-export default styled
-
-
+declare const styled: ThemedReactEmotionInterface<any>;
+export default styled;