feat: TypeScript definitions

package.json

@@ -5,6 +5,7 @@
   "repository": "[email protected]:smooth-code/loadable-components.git",
   "main": "dist/loadable-components.cjs.js",
   "jsnext:main": "dist/loadable-components.es.js",
+  "types": "types/index.d.ts",
   "module": "dist/loadable-components.es.js",
   "author": "Greg Bergé <[email protected]>",
   "keywords": [
@@ -24,13 +25,15 @@
     "ci": "yarn build && yarn lint && bundlesize && yarn test --coverage && codecov",
     "format": "prettier --write \"src/**/*.js\" \"*.md\"",
     "lint": "eslint .",
+    "typecheck:ts": "dtslint types",
     "release": "yarn build && standard-version && conventional-github-releaser --preset angular",
     "test": "jest"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@types/react": "^16.3.14",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
@@ -44,6 +47,7 @@
     "bundlesize": "^0.17.0",
     "codecov": "^3.0.1",
     "conventional-github-releaser": "^2.0.2",
+    "dtslint": "^0.3.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",

types/TestComponent.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default class Test extends React.Component<{prop1: string, prop2: number}> {}

types/index.d.ts

@@ -0,0 +1,56 @@
+// TypeScript Version: 2.4
+// export as namespace LoadableComponents;
+
+declare module 'loadable-components' {
+  import * as React from 'react';
+
+  interface DefaultImportedComponent<P> {
+    default: React.ComponentType<P>;
+  }
+
+  type DefaultComponent<P> = React.ComponentType<P> | DefaultImportedComponent<P>;
+
+  export interface ComponentTracker {
+    track: (component: React.Component, modules: any, index?: number) => number;
+
+    get: (id: number) => React.ComponentType;
+    getAll: () => { [key: number]: React.ComponentType };
+    reset: () => void;
+  }
+
+  export interface LoadableOptions<T> {
+    ErrorComponent?: React.ComponentType;
+    LoadingComponent?: React.ComponentType;
+    render?: (options: { loading: boolean, error: boolean, ownProps: T, Component: React.ComponentType<T> }) => React.ReactElement<T>;
+    modules?: any;
+  }
+
+  interface Loadable<T> extends React.ComponentClass<T> {
+    Component: React.ComponentClass;
+    loadingPromise: Promise<any>;
+    load(): Promise<any>;
+  }
+
+  export const componentTracker: ComponentTracker;
+  export const LOADABLE: string;
+
+  export function loadComponents(): Promise<any>;
+
+  export function getState(): { __LOADABLE_STATE__: { children: Array<{ id: number }> } };
+
+  export default function loadable<T>(
+    getComponent: () => Promise<DefaultComponent<T>>,
+    options?: LoadableOptions<T>
+  ): Loadable<T>;
+}
+
+declare module 'loadable-components/server' {
+  import * as React from 'react';
+
+  export function getLoadableState(
+    rootElement: React.ReactElement<{}>,
+    rootContext?: any,
+    fetchRoot?: boolean,
+    tree?: any,
+  ): Promise<any>;
+}

types/test.tsx

@@ -0,0 +1,27 @@
+/* tslint-disable */
+// TypeScript Version: 2.7
+
+import * as React from 'react';
+import loadableComponent, { loadComponents } from 'loadable-components';
+import { getLoadableState } from 'loadable-components/server';
+
+const App = loadableComponent(() => import('./TestComponent'));
+
+App.load();
+
+const app = (
+  <App prop1={"1"} prop2={2}/>
+);
+
+getLoadableState(app).then(() => {
+// Load all components needed before starting rendering
+  loadComponents().then(() => {
+    // $ExpectError
+    const a1 = <App prop1={4} prop2="4"/>;
+
+    // $ExpectError
+    const a2 = <App/>;
+
+    const a3 = <App prop1={"4"} prop2={4}/>;
+  });
+});

types/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": ["es5", "es2015", "dom"],
+    "jsx": "react",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "noEmit": true,
+    "strictFunctionTypes": false
+  }
+}

types/tslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "semicolon": [true, "always"],
+  "indent": [
+    true,
+    "tabs"
+  ]
+}