Add typescript declaration file (#6)

* #3 - Add typescript as dev dependencies

* #3 - Add typescript configuration file

* #3 - Add declaration and test based on @types/react-beautiful-dnd

* #3 - Setup eslint for typescript

* #3 - Add typescript typecheck in package.json script

* #3 - Make typescript declaration file publishable

* #3 - Update size snapshot

* #3 - Make sure typscript files pass through eslint and prettier

* #3 - Update types documentation

.eslintrc.js

@@ -235,5 +235,41 @@ module.exports = {
  ],
  },
  },
+
+ // Typescript files
+ {
+ parser: '@typescript-eslint/parser',
+ extends: [
+ 'plugin:import/typescript',
+ 'plugin:@typescript-eslint/recommended',
+ 'prettier/@typescript-eslint',
+ ],
+ plugins: [
+ '@typescript-eslint',
+ ],
+ files: [
+ 'src/index.d.ts',
+ 'test/test-typescript-types.tsx',
+ ],
+ rules: {
+ 'flowtype/no-types-missing-file-annotation': 'off',
+ 'flowtype/require-valid-file-annotation': 'off',
+
+ "import/extensions": [
+ "error",
+ "ignorePackages",
+ {
+ "js": "never",
+ "jsx": "never",
+ "ts": "never",
+ "tsx": "never"
+ }
+ ],
+
+ 'no-use-before-define': 'off',
+ '@typescript-eslint/no-use-before-define': ['error'],
+
+ },
+ },
  ],
 };

.size-snapshot.json

@@ -22,5 +22,10 @@
  "code": 24005
  }
  }
+ },
+ "dist/dnd.d.ts": {
+ "bundled": 15,
+ "minified": 13,
+ "gzipped": 33
  }
 }

docs/guides/types.md

@@ -1,11 +1,17 @@
 # Types
 
-⚠️ These following information are related to [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd).
+## Typescript
 
-`react-beautiful-dnd` is typed using [`flowtype`](https://flow.org). This greatly improves internal consistency within the codebase. We also expose a number of public types which will allow you to type your javascript if you would like to. If you are not using `flowtype` this will not inhibit you from using the library. It is just extra safety for those who want it.
+If you are using [TypeScript](https://www.typescriptlang.org/) you are covered! We are maintaining [the definitions](https://github.com/react-forked/dnd/blob/master/src/index.d.ts).
+
+Here is an [example written in typescript](https://github.com/react-forked/dnd/blob/master/test/test-typescript-types.tsx) from our typecheck test.
 
 ## Public flow types
 
+⚠️ These following information are related to [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd).
+
+`react-beautiful-dnd` is typed using [`flowtype`](https://flow.org). This greatly improves internal consistency within the codebase. We also expose a number of public types which will allow you to type your javascript if you would like to. If you are not using `flowtype` this will not inhibit you from using the library. It is just extra safety for those who want it.
+
 ### Ids
 
 ```js
@@ -218,14 +224,6 @@ The types are exported as part of the module so using them is as simple as:
 import type { DroppableProvided } from 'react-beautiful-dnd';
 ```
 
-## Typescript
-
-⚠️ We plan to add typescript declaration to this project ([#3](https://github.com/react-forked/dnd/issues/3))
-
-If you are using [TypeScript](https://www.typescriptlang.org/) you can use the community maintained [DefinitelyTyped type definitions](https://www.npmjs.com/package/@types/react-beautiful-dnd). [Installation instructions](http://definitelytyped.org/).
-
-Here is an [example written in typescript](https://github.com/abeaudoin2013/react-beautiful-dnd-multi-list-typescript-example).
-
 ## Sample application with flow types
 
 We have created a [sample application](https://github.com/alexreardon/react-beautiful-dnd-flow-example) which exercises the flowtypes. It is a super simple `React` project based on [`react-create-app`](https://github.com/facebookincubator/create-react-app). You can use this as a reference to see how to set things up correctly.

package.json

@@ -27,13 +27,14 @@
  },
  "main": "dist/dnd.cjs.js",
  "module": "dist/dnd.esm.js",
+ "types": "dist/dnd.d.ts",
  "sideEffects": false,
  "files": [
  "/dist",
  "/src"
  ],
  "config": {
- "prettier_target": "*.{js,jsx,md,json} src/**/*.{js,jsx,md,json} test/**/*.{js,jsx,md,json} docs/**/*.{js,jsx,md,json} stories/**/*.{js,jsx,md,json} cypress/**/*.{js,jsx,md,json} csp-server/**/*.{js,jsx,md,json}"
+ "prettier_target": "*.{js,jsx,ts,tsx,md,json} src/**/*.{js,jsx,ts,tsx,md,json} test/**/*.{js,jsx,ts,tsx,md,json} docs/**/*.{js,jsx,ts,tsx,md,json} stories/**/*.{js,jsx,ts,tsx,md,json} cypress/**/*.{js,jsx,ts,tsx,md,json} csp-server/**/*.{js,jsx,ts,tsx,md,json}"
  },
  "scripts": {
  "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=single-vertical-list--basic --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
@@ -45,9 +46,11 @@
  "validate": "yarn prettier:check && yarn lint:eslint && yarn lint:css && yarn typecheck",
  "prettier:check": "yarn prettier --debug-check $npm_package_config_prettier_target",
  "prettier:write": "yarn prettier --write $npm_package_config_prettier_target",
- "lint:eslint": "yarn eslint \"./**/*.{js,jsx}\"",
- "lint:css": "stylelint \"stories/**/*.{js,jsx}\"",
- "typecheck": "flow check --max-warnings=0",
+ "lint:eslint": "yarn eslint \"./**/*.{js,jsx,ts,tsx}\"",
+ "lint:css": "stylelint \"stories/**/*.{js,jsx,ts,tsx}\"",
+ "typecheck": "yarn typecheck:flow && yarn typecheck:flow",
+ "typecheck:flow": "flow check --max-warnings=0",
+ "typecheck:typescript": "yarn tsc --project ./tsconfig.json",
  "bundle-size:check": "cross-env SNAPSHOT=match yarn bundle-size:update",
  "bundle-size:update": "yarn build:clean && yarn build:dist && yarn build:clean",
  "build": "yarn build:clean && yarn build:dist && yarn build:flow",
@@ -84,6 +87,8 @@
  "@storybook/react": "^5.3.18",
  "@storybook/theming": "^5.3.18",
  "@testing-library/react": "^10.0.2",
+ "@typescript-eslint/eslint-plugin": "^4.10.0",
+ "@typescript-eslint/parser": "^4.10.0",
  "babel-core": "^7.0.0-bridge.0",
  "babel-eslint": "^10.1.0",
  "babel-jest": "^25.3.0",
@@ -143,6 +148,7 @@
  "stylelint-config-standard": "^20.0.0",
  "stylelint-config-styled-components": "^0.1.1",
  "stylelint-processor-styled-components": "^1.10.0",
+ "typescript": "^4.1.3",
  "wait-port": "^0.2.7",
  "webpack": "^4.42.1"
  },

rollup.config.js

@@ -1,5 +1,7 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 
+import fs from 'fs';
+import path from 'path';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
@@ -43,6 +45,22 @@ const commonjsArgs = {
  },
 };
 
+// Simple copy plugin
+// https://dev.to/lukap/creating-a-rollup-plugin-to-copy-and-watch-a-file-3hi2
+const copyTypesciptDeclarationFile = () => ({
+ name: 'copy-typescript-declaration-file',
+ async buildStart() {
+ this.addWatchFile(path.resolve('src/index.d.ts'));
+ },
+ async generateBundle() {
+ this.emitFile({
+ type: 'asset',
+ fileName: 'dnd.d.ts',
+ source: fs.readFileSync('src/index.d.ts'),
+ });
+ },
+});
+
 export default [
  // Universal module definition (UMD) build
  // - including console.* statements
@@ -63,6 +81,7 @@ export default [
  resolve({ extensions }),
  commonjs(commonjsArgs),
  replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+ copyTypesciptDeclarationFile(),
  sizeSnapshot(snapshotArgs),
  ],
  },