Upgrade to TS 2.1

circle.yml

@@ -9,6 +9,7 @@ general:
     # code coverage reports
     - packages/core/coverage
     - packages/datetime/coverage
+    - packages/table/coverage
     # preview pages
     - packages/table/preview
     # GH Pages content

gulp/karma.js

@@ -44,8 +44,8 @@ module.exports = (gulp, plugins, blueprint) => {
             coverageReporter: {
                 check: {
                     each: {
-                        lines: 80,
-                        statements: 80,
+                        lines: 79,
+                        statements: 79,
                     },
                 },
                 includeAllSources: true,
@@ -58,8 +58,8 @@ module.exports = (gulp, plugins, blueprint) => {
                     { type: "text" },
                 ],
                 watermarks: {
-                    lines: [80, 90],
-                    statements: [80, 90],
+                    lines: [79, 90],
+                    statements: [79, 90],
                 },
             },
             files: filesToInclude,

package.json

@@ -50,7 +50,7 @@
     "gulp-strip-css-comments": "1.2.0",
     "gulp-stylelint": "3.4.0",
     "gulp-tslint": "7.0.1",
-    "gulp-typescript": "3.0.2",
+    "gulp-typescript": "3.1.4",
     "gulp-util": "3.0.7",
     "highlights": "1.4.1",
     "http-server": "0.9.0",
@@ -97,7 +97,7 @@
     "ts-quick-docs": "0.4.0",
     "tslint": "4.0.1",
     "tslint-react": "2.0.0",
-    "typescript": "2.0.10",
+    "typescript": "2.1.5",
     "vinyl-source-stream": "1.1.0",
     "webpack": "1.13.2"
   },

packages/core/package.json

@@ -12,7 +12,8 @@
     "dom4": "^1.8",
     "normalize.css": "4.1.1",
     "pure-render-decorator": "^1.1",
-    "tether": "^1.4"
+    "tether": "^1.4",
+    "tslib": "^1.5.0"
   },
   "peerDependencies": {
     "react": "^15.0.1 || ^0.14",

packages/core/src/common/props.ts

@@ -8,7 +8,6 @@
 import * as React from "react";
 
 import { Intent } from "./intent";
-import { shallowClone } from "./utils";
 
 export type HTMLInputProps = React.HTMLProps<HTMLInputElement>;
 
@@ -104,7 +103,12 @@ const INVALID_PROPS = [
  * @param {string[]} invalidProps If supplied, overwrites the default blacklist.
  * @param {boolean} shouldMerge If true, will merge supplied invalidProps and blacklist together.
  */
-export function removeNonHTMLProps<T extends U, U>(props: T, invalidProps = INVALID_PROPS, shouldMerge = false): U {
+export function removeNonHTMLProps(
+    props: { [key: string]: any },
+    invalidProps = INVALID_PROPS,
+    shouldMerge = false,
+): { [key: string]: any } {
+
     if (shouldMerge) {
         invalidProps = invalidProps.concat(INVALID_PROPS);
     }
@@ -114,5 +118,5 @@ export function removeNonHTMLProps<T extends U, U>(props: T, invalidProps = INVA
             delete (prev as any)[curr];
         }
         return prev;
-    }, shallowClone(props));
+    }, { ...props });
 }

packages/core/src/common/utils.ts

@@ -50,17 +50,6 @@ export function clamp(val: number, min: number, max: number) {
     return Math.min(Math.max(val, min), max);
 }
 
-/** Return a new object with the same keys as the given object (values are copied, not cloned). */
-export function shallowClone<T>(object: T): T {
-    const clonedObject: any = {};
-    for (const key in object) {
-        if (object.hasOwnProperty(key)) {
-            clonedObject[key] = (<any> object)[key];
-        }
-    }
-    return clonedObject as T;
-}
-
 /**
  * Throttle an event on an EventTarget by wrapping it in `requestAnimationFrame` call.
  * Returns the event handler that was bound to given eventName so you can clean up after yourself.

packages/core/src/components/button/buttons.tsx

@@ -16,6 +16,8 @@ import { removeNonHTMLProps } from "../../common/props";
 import { Spinner } from "../spinner/spinner";
 import { AbstractButton, IButtonProps } from "./abstractButton";
 
+export { IButtonProps } from "./abstractButton";
+
 export class Button extends AbstractButton<HTMLButtonElement> {
     public static displayName = "Blueprint.Button";
 

packages/core/src/components/toast/toaster.tsx

@@ -16,7 +16,7 @@ import { TOASTER_INLINE_WARNING } from "../../common/errors";
 import { ESCAPE } from "../../common/keys";
 import { Position } from "../../common/position";
 import { IProps } from "../../common/props";
-import { safeInvoke, shallowClone } from "../../common/utils";
+import { safeInvoke } from "../../common/utils";
 import { Overlay } from "../overlay/overlay";
 import { IToastProps, Toast } from "./toast";
 
@@ -178,9 +178,7 @@ export class Toaster extends AbstractComponent<IToasterProps, IToasterState> imp
 
     private createToastOptions(props: IToastProps, key = `toast-${this.toastId++}`) {
         // clone the object before adding the key prop to avoid leaking the mutation
-        const options = shallowClone<IToastOptions>(props);
-        options.key = key;
-        return options;
+        return { ...props, key };
     }
 
     private getPositionClasses() {

packages/core/test/collapsible-list/collapsibleListTests.tsx

@@ -9,7 +9,15 @@ import { assert } from "chai";
 import { mount, ReactWrapper } from "enzyme";
 import * as React from "react";
 
-import { CollapseFrom, CollapsibleList, IMenuItemProps, MenuItem, Popover, Position } from "../../src/index";
+import {
+    CollapseFrom,
+    CollapsibleList,
+    ICollapsibleListProps,
+    IMenuItemProps,
+    MenuItem,
+    Popover,
+    Position,
+} from "../../src/index";
 
 describe("<CollapsibleList>", () => {
     it("adds className to itself", () => {
@@ -99,7 +107,7 @@ describe("<CollapsibleList>", () => {
     });
 
     function renderItem(props: IMenuItemProps, index: number) {
-        return React.createElement("label", {key: index}, props.text);
+        return React.createElement("label", { key: index }, props.text);
     }
 
     function withItems(length: number) {
@@ -110,7 +118,7 @@ describe("<CollapsibleList>", () => {
         return list;
     }
 
-    function renderCollapsibleList(broodSize: number, props?: any) {
+    function renderCollapsibleList(broodSize: number, props?: Partial<ICollapsibleListProps>) {
         return mount(
             <CollapsibleList dropdownTarget={<button />} renderVisibleItem={renderItem} {...props}>
                 {withItems(broodSize)}

packages/core/test/hotkeys/hotkeysTests.tsx

@@ -204,7 +204,7 @@ describe("Hotkeys", () => {
 
         it("matches lowercase alphabet chars", () => {
             const alpha = 65;
-            verifyCombos(Array.apply(null, Array(26)).map((o: any, i: number) => {
+            verifyCombos(Array.apply(null, Array(26)).map((_: any, i: number) => {
                 const combo = String.fromCharCode(alpha + i).toLowerCase();
                 const event = { which: alpha + i } as KeyboardEvent;
                 return makeComboTest(combo, event);
@@ -213,7 +213,7 @@ describe("Hotkeys", () => {
 
         it("bare alphabet chars ignore case", () => {
             const alpha = 65;
-            verifyCombos(Array.apply(null, Array(26)).map((o: any, i: number) => {
+            verifyCombos(Array.apply(null, Array(26)).map((_: any, i: number) => {
                 const combo = String.fromCharCode(alpha + i).toUpperCase();
                 const event = { which: alpha + i } as KeyboardEvent;
                 return makeComboTest(combo, event);
@@ -222,7 +222,7 @@ describe("Hotkeys", () => {
 
         it("matches uppercase alphabet chars using shift", () => {
             const alpha = 65;
-            verifyCombos(Array.apply(null, Array(26)).map((o: any, i: number) => {
+            verifyCombos(Array.apply(null, Array(26)).map((_: any, i: number) => {
                 const combo = "shift + " + String.fromCharCode(alpha + i).toLowerCase();
                 const event = { shiftKey: true, which: alpha + i } as KeyboardEvent;
                 return makeComboTest(combo, event);

packages/core/test/popover/popoverTests.tsx

@@ -14,6 +14,7 @@ import * as Errors from "../../src/common/errors";
 import * as Keys from "../../src/common/keys";
 import {
     Classes,
+    IPopoverProps,
     Popover,
     PopoverInteractionKind,
     SVGPopover,
@@ -406,7 +407,7 @@ describe("<Popover>", () => {
         sendEscapeKey(): this;
     }
 
-    function renderPopover(props: any = {}, content?: any) {
+    function renderPopover(props: Partial<IPopoverProps> = {}, content?: any) {
         wrapper = mount(
             <Popover inline {...props} content={<p>Text {content}</p>} hoverOpenDelay={0} hoverCloseDelay={0}>
                 <button>Target</button>

packages/core/test/tabs/tabsTests.tsx

@@ -71,8 +71,9 @@ describe("<Tabs>", () => {
             { attachTo: testsContainerElement },
         );
 
-        // tslint:disable-next-line:no-unused-variable
-        const [tab0, tab1, tab2, tab3] = testsContainerElement.queryAll(".pt-tab");
+        const tabs = testsContainerElement.queryAll(".pt-tab");
+        const tab0 = tabs[0];
+        const tab2 = tabs[2];
         (tab0 as HTMLElement).focus();
         wrapper.simulate("keydown", { target: tab0, which: Keys.ARROW_RIGHT });
         assert.equal(tab2, document.activeElement);

packages/core/test/tooltip/tooltipTests.tsx

@@ -9,7 +9,7 @@ import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
 
-import { Classes, Popover, SVGTooltip, Tooltip } from "../../src/index";
+import { Classes, ITooltipProps, Popover, SVGTooltip, Tooltip } from "../../src/index";
 
 const TOOLTIP_SELECTOR = `.${Classes.TOOLTIP}`;
 
@@ -95,7 +95,7 @@ describe("<Tooltip>", () => {
         svgTooltip.unmount();
     });
 
-    function renderTooltip(props?: any) {
+    function renderTooltip(props?: Partial<ITooltipProps>) {
         return mount(
             <Tooltip {...props} content={<p>Text</p>} hoverOpenDelay={0} inline>
                 <button>Target</button>

packages/core/test/tree/treeTests.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import * as TestUtils from "react-addons-test-utils";
 import * as ReactDOM from "react-dom";
 
-import { Classes, ITreeNode, Tree } from "../../src/index";
+import { Classes, ITreeNode, ITreeProps, Tree } from "../../src/index";
 
 /* tslint:disable:object-literal-sort-keys */
 describe("<Tree>", () => {
@@ -99,7 +99,7 @@ describe("<Tree>", () => {
         TestUtils.Simulate.click(document.query(`.c1 > .${Classes.TREE_NODE_CONTENT} .${Classes.TREE_NODE_CARET}`));
         assert.isTrue(onNodeExpand.calledOnce);
         assert.deepEqual(onNodeExpand.args[0][1], [1]);
-        // make sure that onNodeClick isn't fired again, only onNodeExpand should be 
+        // make sure that onNodeClick isn't fired again, only onNodeExpand should be
         assert.isTrue(onNodeClick.calledOnce);
 
         TestUtils.Simulate.doubleClick(document.query(`.c6 > .${Classes.TREE_NODE_CONTENT}`));
@@ -167,7 +167,7 @@ describe("<Tree>", () => {
         assert.strictEqual(label.innerText, "Paragraph");
     });
 
-    function renderTree(props?: any) {
+    function renderTree(props?: Partial<ITreeProps>) {
         tree = ReactDOM.render(
             <Tree contents={createDefaultContents()} {...props}/>,
             testsContainerElement,

packages/core/test/tsconfig.json

@@ -1,22 +1,9 @@
 {
-    "version": "2.0.0",
-    "compilerOptions": {
-        "declaration": false,
-        "jsx": "react",
-        "module": "commonjs",
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "removeComments": false,
-        "sourceMap": true,
-        "target": "es5",
-        "experimentalDecorators": true
-    },
+    "extends": "../tsconfig",
     "include": [
         "../typings/tsd.d.ts",
         "../../../test/typings/tsd.d.ts",
         "**/*"
     ],
-    "exclude": [],
-    "compileOnSave": false
+    "exclude": []
 }

packages/core/tsconfig.json

@@ -3,6 +3,7 @@
     "compilerOptions": {
         "declaration": true,
         "experimentalDecorators": true,
+        "importHelpers": true,
         "jsx": "react",
         "module": "commonjs",
         "moduleResolution": "node",

packages/datetime/package.json

@@ -9,7 +9,8 @@
     "@blueprintjs/core": "^1.3.0",
     "classnames": "^2.2",
     "moment": "^2.14.1",
-    "react-day-picker": "^3.1.1"
+    "react-day-picker": "^3.1.1",
+    "tslib": "^1.5.0"
   },
   "devDependencies": {
     "bourbon": "4.2.6",

packages/datetime/src/timePicker.tsx

@@ -266,9 +266,7 @@ export class TimePicker extends React.Component<ITimePickerProps, ITimePickerSta
                 // no new value, this means only text has changed (from user typing)
                 // we want inputs to change, so update state with new text for the inputs
                 // but don't change actual value
-                const clonedNewState = BlueprintUtils.shallowClone(newState);
-                clonedNewState.value = DateUtils.clone(this.state.value);
-                this.setState(clonedNewState);
+                this.setState({ ...newState, value: DateUtils.clone(this.state.value) });
             }
         }
 

packages/datetime/test/datePickerCaptionTests.tsx

@@ -9,7 +9,7 @@ import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
 
-import { DatePickerCaption } from "../src/datePickerCaption";
+import { DatePickerCaption, IDatePickerCaptionProps } from "../src/datePickerCaption";
 import { Classes, IDatePickerLocaleUtils } from "../src/index";
 
 describe("<DatePickerCaption>", () => {
@@ -58,7 +58,7 @@ describe("<DatePickerCaption>", () => {
         assert.isTrue(options.last().prop("disabled"), "2017 is not disabled");
     });
 
-    function renderDatePickerCaption(props?: any) {
+    function renderDatePickerCaption(props?: Partial<IDatePickerCaptionProps>) {
         const wrapper = mount(
             <DatePickerCaption
                 date={new Date(2015, 0)}

packages/datetime/test/dateTimePickerTests.tsx

@@ -47,7 +47,7 @@ describe("<DateTimePicker>", () => {
     it("onChange fired when the time is changed", () => {
         const defaultValue = new Date(2012, 2, 5, 6, 5, 40);
         const onChangeSpy = sinon.spy();
-        const { getDay, root } = wrap(
+        const { root } = wrap(
             <DateTimePicker
                 defaultValue={defaultValue}
                 onChange={onChangeSpy}

packages/datetime/test/timePickerTests.tsx

@@ -11,7 +11,7 @@ import * as React from "react";
 import * as TestUtils from "react-addons-test-utils";
 import * as ReactDOM from "react-dom";
 
-import { Classes, TimePicker, TimePickerPrecision } from "../src/index";
+import { Classes, ITimePickerProps, TimePicker, TimePickerPrecision } from "../src/index";
 
 describe("<TimePicker>", () => {
     let testsContainerElement: Element;
@@ -360,7 +360,7 @@ describe("<TimePicker>", () => {
         return document.querySelector(`.${Classes.TIMEPICKER_INPUT}.${className}`) as HTMLInputElement;
     }
 
-    function renderTimePicker(props?: any) {
+    function renderTimePicker(props?: Partial<ITimePickerProps>) {
         timePicker = ReactDOM.render(
             <TimePicker onChange={onTimePickerChange} {...props}/>,
             testsContainerElement,

packages/datetime/test/tsconfig.json

@@ -1,22 +1,9 @@
 {
-    "version": "2.0.0",
-    "compilerOptions": {
-        "declaration": false,
-        "jsx": "react",
-        "module": "commonjs",
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "removeComments": false,
-        "sourceMap": true,
-        "target": "es5",
-        "experimentalDecorators": true
-    },
+    "extends": "../tsconfig",
     "include": [
         "../typings/tsd.d.ts",
         "../../../test/typings/tsd.d.ts",
         "**/*"
     ],
-    "exclude": [],
-    "compileOnSave": false
+    "exclude": []
 }