[WIP] Migration to TS.

Author: nosferatu500

.eslintrc.json

@@ -18,27 +18,60 @@
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    },
-    "rules": {
-      "curly": ["warn", "multi-line", "consistent"],
-      "no-console": "off",
-      "no-empty-pattern": "warn",
-      "no-duplicate-imports": "error",
-      "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
-      "import/export": "error",
-      "import/named": "off",
-      "import/namespace": "off",
-      "import/default": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-      "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-      "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/no-empty-interface": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "jest/consistent-test-it": ["error", { "fn": "it", "withinDescribe": "it" }]
     }
   },
+  "rules": {
+    "curly": ["warn", "multi-line", "consistent"],
+    "no-console": "off",
+    "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
+    "import/export": "error",
+    "@typescript-eslint/no-duplicate-imports": ["error"],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "jest/consistent-test-it": [
+      "error",
+      { "fn": "it", "withinDescribe": "it" }
+    ],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": { "order": "asc", "caseInsensitive": true },
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "newlines-between": "never",
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"]
+      }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ]
+  },
   "settings": {
     "react": {
       "version": "detect"

.size-snapshot.json

@@ -1,15 +1,15 @@
 {
   "index.js": {
-    "bundled": 65833,
-    "minified": 37726,
-    "gzipped": 9677,
+    "bundled": 65954,
+    "minified": 37732,
+    "gzipped": 9679,
     "treeshaked": {
       "rollup": {
-        "code": 30079,
+        "code": 30085,
         "import_statements": 535
       },
       "webpack": {
-        "code": 31582
+        "code": 31592
       }
     }
   }

.travis.yml

@@ -15,6 +15,13 @@ module.exports = (api, targets) => {
         },
       ],
     ],
-    plugins: ['@babel/plugin-transform-react-jsx'],
+    plugins: [
+      [
+        '@babel/plugin-transform-react-jsx',
+        {
+          runtime: 'automatic',
+        },
+      ],
+    ],
   }
 }

babel.config.js

@@ -73,7 +73,7 @@
       "ts-jest": {
         "tsconfig": {
           "target": "es2015",
-          "jsx": "react"
+          "jsx": "react-jsx"
         }
       }
     },
@@ -123,8 +123,8 @@
     "@nosferatu500/react-dnd-scrollzone": "^2.0.0",
     "lodash.isequal": "^4.5.0",
     "prop-types": "^15.7.2",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
+    "react-dnd": "^14.0.3",
+    "react-dnd-html5-backend": "^14.0.1",
     "react-lifecycles-compat": "^3.0.4",
     "react-virtualized": "^9.22.3"
   },
@@ -139,31 +139,31 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.2.5",
-    "@storybook/addon-storyshots": "^6.3.6",
-    "@storybook/addons": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@storybook/theming": "^6.3.6",
+    "@storybook/addon-storyshots": "^6.3.7",
+    "@storybook/addons": "^6.3.7",
+    "@storybook/react": "^6.3.7",
+    "@storybook/theming": "^6.3.7",
     "@testing-library/react": "^12.0.0",
     "@types/babel-plugin-macros": "^2.8.5",
     "@types/enzyme": "^3.10.9",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.0.1",
     "@types/lodash.isequal": "^4.5.5",
-    "@types/react": "^17.0.16",
+    "@types/react": "^17.0.18",
     "@types/react-dom": "^17.0.9",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-virtualized": "^9.21.13",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.29.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "acorn-jsx": "^5.3.2",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-tester": "^10.1.0",
     "enzyme": "^3.11.0",
-    "esbuild": "^0.12.19",
+    "esbuild": "^0.12.20",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
@@ -174,22 +174,22 @@
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dnd-test-backend": "^14.0.0",
-    "react-dnd-touch-backend": "^14.0.0",
+    "react-dnd-touch-backend": "^14.1.0",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.56.0",
+    "rollup": "^2.56.2",
     "rollup-plugin-esbuild": "^4.5.0",
-    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "shx": "^0.3.3",
-    "ts-jest": "^27.0.4",
-    "tslib": "^2.3.0",
+    "ts-jest": "^27.0.5",
+    "tslib": "^2.3.1",
     "typescript": "^4.3.5"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dnd": ">=11.0.0",
+    "react-dnd": ">=14.0.0",
     "react-dom": ">=17.0.0"
   },
   "browserslist": {

package.json

@@ -1,9 +1,11 @@
 import React from 'react'
-import { isDescendant } from './utils/tree-data-utils'
+// eslint-disable-next-line import/named
+import { ConnectDragPreview, ConnectDragSource } from 'react-dnd'
 import { classnames } from './utils/classnames'
+import { isDescendant } from './utils/tree-data-utils'
 import './node-renderer-default.css'
-import { NodeData, TreeItem, NumberOrStringArray } from '.'
-import { ConnectDragPreview, ConnectDragSource } from 'react-dnd'
+import { NodeData, NumberOrStringArray, TreeItem } from '.'
+// eslint-disable-next-line import/named
 
 const defaultProps = {
   isSearchMatch: false,
@@ -79,9 +81,9 @@ const NodeRendererDefault: React.FC<NodeRendererProps> = (props) => {
     className,
     style,
     didDrop,
-    treeId,
-    isOver, // Not needed, but preserved for other renderers
-    parentNode, // Needed for dndManager
+    treeId: _treeId,
+    isOver: _isOver, // Not needed, but preserved for other renderers
+    parentNode: _parentNode, // Needed for dndManager
     rowDirection,
     ...otherProps
   } = props

src/node-renderer-default.tsx

@@ -2,19 +2,20 @@
 // @ts-nocheck
 
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import renderer from 'react-test-renderer'
 import { mount } from 'enzyme'
-import { List } from 'react-virtualized'
-import { DndProvider, DndContext } from 'react-dnd'
-import { TestBackend } from 'react-dnd-test-backend'
+import PropTypes from 'prop-types'
+import { DndContext, DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
+import { TestBackend } from 'react-dnd-test-backend'
 import { TouchBackend } from 'react-dnd-touch-backend'
+import renderer from 'react-test-renderer'
+import { List } from 'react-virtualized'
+import DefaultNodeRenderer from './node-renderer-default'
 import SortableTree, {
   SortableTreeWithoutDndContext,
 } from './react-sortable-tree'
+// eslint-disable-next-line import/no-named-as-default
 import TreeNode from './tree-node'
-import DefaultNodeRenderer from './node-renderer-default'
 
 describe('<SortableTree />', () => {
   it('should render tree correctly', () => {

src/react-sortable-tree.test.tsx

@@ -1,21 +1,22 @@
 // @ts-nocheck
 
-import isEqual from 'lodash.isequal'
-import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { DndContext, DndProvider } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
-import { polyfill } from 'react-lifecycles-compat'
-import { AutoSizer, List } from 'react-virtualized'
 import withScrolling, {
   createHorizontalStrength,
   createScrollingComponent,
   createVerticalStrength,
 } from '@nosferatu500/react-dnd-scrollzone'
+import isEqual from 'lodash.isequal'
+import PropTypes from 'prop-types'
+import { DndContext, DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { polyfill } from 'react-lifecycles-compat'
+import { AutoSizer, List } from 'react-virtualized'
 import 'react-virtualized/styles.css'
 import NodeRendererDefault from './node-renderer-default'
 import PlaceholderRendererDefault from './placeholder-renderer-default'
 import './react-sortable-tree.css'
+// eslint-disable-next-line import/no-named-as-default
 import TreeNode from './tree-node'
 import TreePlaceholder from './tree-placeholder'
 import { classnames } from './utils/classnames'

src/react-sortable-tree.tsx

@@ -1,7 +1,9 @@
 import React, { Children, cloneElement } from 'react'
+// eslint-disable-next-line import/named
+import { ConnectDropTarget } from 'react-dnd'
 import { classnames } from './utils/classnames'
 import './tree-node.css'
-import { ConnectDropTarget } from 'react-dnd'
+// eslint-disable-next-line import/named
 import { NumberOrStringArray, TreeItem, TreePath } from '.'
 
 export interface TreeNode {
@@ -63,10 +65,10 @@ const TreeNode: React.FC<TreeRendererProps> = (props) => {
     draggedNode,
     canDrop,
     treeIndex,
-    treeId, // Delete from otherProps
-    getPrevRow, // Delete from otherProps
-    node, // Delete from otherProps
-    path, // Delete from otherProps
+    treeId: _treeId, // Delete from otherProps
+    getPrevRow: _getPrevRow, // Delete from otherProps
+    node: _node, // Delete from otherProps
+    path: _path, // Delete from otherProps
     rowDirection,
     ...otherProps
   } = props

src/tree-node.tsx

@@ -1,6 +1,8 @@
 import React, { Children, cloneElement } from 'react'
-import { TreeItem } from '.'
+// eslint-disable-next-line import/named
 import { ConnectDropTarget } from 'react-dnd'
+import { TreeItem } from '.'
+// eslint-disable-next-line import/named
 
 const defaultProps = {
   canDrop: false,
@@ -20,7 +22,13 @@ type TreePlaceholderProps = {
 
 const TreePlaceholder = (props: TreePlaceholderProps) => {
   props = { ...defaultProps, ...props }
-  const { children, connectDropTarget, treeId, drop, ...otherProps } = props
+  const {
+    children,
+    connectDropTarget,
+    treeId: _treeId,
+    drop: _drop,
+    ...otherProps
+  } = props
 
   return connectDropTarget(
     <div>

src/tree-placeholder.tsx

@@ -2,8 +2,8 @@
 
 import { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd'
 import { findDOMNode } from 'react-dom'
-import { getDepth } from './tree-data-utils'
 import { memoizedInsertNode } from './memoized-tree-data-utils'
+import { getDepth } from './tree-data-utils'
 
 export default class DndManager {
   constructor(treeRef) {

src/utils/dnd-manager.ts

@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 export const slideRows = (
   rows: any[],
   fromIndex: number,

src/utils/generic-utils.ts

@@ -1,7 +1,6 @@
-import { insertNode } from './tree-data-utils'
-
-import { memoizedInsertNode } from './memoized-tree-data-utils'
 import { TreeIndex } from '..'
+import { memoizedInsertNode } from './memoized-tree-data-utils'
+import { insertNode } from './tree-data-utils'
 
 describe('insertNode', () => {
   it('should handle empty data', () => {

src/utils/memoized-tree-data-utils.test.ts

@@ -1,7 +1,7 @@
 import {
-  insertNode,
   getDescendantCount,
   getFlatDataFromTree,
+  insertNode,
 } from './tree-data-utils'
 
 const memoize = (f: (...args: any) => void) => {