fix: update to use esModuleInterop in the TypeScript configuration fi…

…les (microsoft#1211)

BREAKING CHANGE: This will affect how imports will be handled by
consumers

build/convert-readme.js

@@ -15,7 +15,7 @@ const srcDir = argv.src || "./src/**/README.md";
  */
 const startFile = `// Generated file from ../../build
 /* tslint:disable */
-import * as React from "react";
+import React from "react";
 export default class Documentation extends React.Component<{}, {}> {
     public render(): JSX.Element {
         return (

build/helpers/file-includes-all-subdirectories-as-named-exports.spec.ts

@@ -1,4 +1,4 @@
-import * as path from "path";
+import path from "path";
 import { includesAllSubdirectoriesAsNamedExports } from "./file-includes-all-subdirectories-as-named-exports";
 
 describe("file-includes-all-subdirectories-as-named-exports.ts", (): void => {

build/helpers/file-includes-all-subdirectories-as-named-exports.ts

@@ -1,5 +1,5 @@
-import * as path from "path";
-import * as fs from "fs";
+import path from "path";
+import fs from "fs";
 import { pascalCase } from "../../packages/fast-web-utilities";
 
 /**

packages/fast-animation/client/examples/app/app.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import TestPage from "./components/TestPage";
 
 /**

packages/fast-animation/client/examples/app/components/TestPage.tsx

@@ -1,5 +1,5 @@
 /* tslint:disable:no-var-requires */
-import * as React from "react";
+import React from "react";
 const doSvg1: string = require("../assets/images/do-check.svg");
 const easingCurve: string = require("../assets/images/easing-curve.svg");
 const sass: string = require("../assets/styles/test-page.css");

packages/fast-animation/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
     "experimentalDecorators": true,
     "jsx": "react",
     "target": "es5",

packages/fast-application-utilities/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "ES6",
         "target": "ES6",

packages/fast-breakpoint-tracker-react/README.md

@@ -26,7 +26,7 @@ BreakpointTracker.breakpoints = [0, 800, 1024, 1559];
 ## Usage
 
 ```jsx
-import * as React from "react";
+import React from "react";
 import BreakpointTracker from "@microsoft/fast-breakpoint-tracker-react";
 
 export interface AppProps {}

packages/fast-breakpoint-tracker-react/src/breakpoint-tracker.spec.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
 import { configure, mount } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
+import Adapter from "enzyme-adapter-react-16";
 import { Breakpoints, defaultBreakpoints } from "./breakpoints";
 import BreakpointTracker from "./breakpoint-tracker";
 

packages/fast-breakpoint-tracker-react/src/breakpoint-tracker.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { canUseDOM } from "exenv-es6";
 import { throttle } from "lodash-es";
 import { Breakpoints, defaultBreakpoints, identifyBreakpoint } from "./breakpoints";

packages/fast-breakpoint-tracker-react/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "ES6",
         "target": "ES6",

packages/fast-browser-extensions/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "compilerOptions": {
       "emitDecoratorMetadata": true,
+      "esModuleInterop": true,
       "experimentalDecorators": true,
       "jsx": "react",
       "target": "es5",

packages/fast-colors/src/contrast.spec.ts

@@ -1,5 +1,5 @@
 import { adjustContrast, contrast, ensureContrast } from "./contrast";
-import * as Chroma from "chroma-js";
+import Chroma from "chroma-js";
 
 const white: string = "#FFF";
 const black: string = "#000";

packages/fast-colors/src/luminosity.spec.ts

@@ -1,5 +1,5 @@
 import { luminance, luminanceSwitch } from "./luminosity";
-import * as Chroma from "chroma-js";
+import Chroma from "chroma-js";
 
 describe("luminance", (): void => {
     test("should adjust a color to an approximate luminance value", (): void => {

packages/fast-colors/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "ES6",
         "target": "ES6",

packages/fast-components-class-name-contracts-base/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "ES6",
         "target": "ES6",

packages/fast-components-class-name-contracts-msft/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "ES6",
         "target": "ES6",

packages/fast-components-foundation-react/README.md

@@ -11,8 +11,8 @@ The foundation component for FAST component packages in React. The default expor
 ### Basic implementation
 
 ```jsx
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import Foundation from "@microsoft/fast-components-foundation-react";
 
 class MyComponent extends Foundation {

packages/fast-components-foundation-react/src/foundation/foundation.spec.tsx

@@ -1,8 +1,8 @@
 /* tslint:disable:max-classes-per-file */
 /* tslint:disable:no-string-literal */
-import * as React from "react";
+import React from "react";
 import Foundation, { HandledProps, ReferenceResolver } from "./foundation";
-import * as ReactTestUtils from "react-dom/test-utils";
+import ReactTestUtils from "react-dom/test-utils";
 import { has, merge } from "lodash-es";
 
 class GetRefTestComponent extends Foundation<{}, {}, {}> {

packages/fast-components-foundation-react/src/foundation/foundation.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { get, isPlainObject, pick, set } from "lodash-es";
 import { FoundationProps } from "./foundation.props";
 

packages/fast-components-foundation-react/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "module": "ES6",
         "target": "ES6",

packages/fast-components-react-base/README.md

@@ -13,8 +13,8 @@ Base components are the structural, semantic, and interactive core of a piece of
 An example of using one of the components from the `@microsoft/fast-components-react-base` package:
 
 ```tsx
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import { ClassNames, IButtonClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
 import { Button } from "@microsoft/fast-components-react-base";
 

packages/fast-components-react-base/app/components/react-html-element.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 export interface ReactHTMLElementProps {
     tag?: string;

packages/fast-components-react-base/app/index.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import Site, {
     componentFactory,
     formChildFromExamplesFactory,

packages/fast-components-react-base/app/utilities/class-name.plugin.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     ChildOptionItem,
     Plugin,

packages/fast-components-react-base/src/auto-suggest/auto-suggest-context.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 export interface AutoSuggestContextType {
     /**

packages/fast-components-react-base/src/auto-suggest/auto-suggest.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     AutoSuggestClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, mount, render, shallow } from "enzyme";
 import AutoSuggest, { AutoSuggestUnhandledProps } from "./auto-suggest";
 import ListboxItem from "../listbox-item";

packages/fast-components-react-base/src/auto-suggest/auto-suggest.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import { get, isEqual } from "lodash-es";
 import { KeyCodes } from "@microsoft/fast-web-utilities";

packages/fast-components-react-base/src/auto-suggest/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentFactoryExample } from "@microsoft/fast-development-site-react";
 import schema from "./auto-suggest.schema.json";
 import AutoSuggest, { AutoSuggestManagedClasses, AutoSuggestProps } from "./auto-suggest";

packages/fast-components-react-base/src/badge/badge.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     BadgeClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/badge/badge.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, mount, shallow } from "enzyme";
 import Badge, { BadgeHandledProps, BadgeProps, BadgeUnhandledProps } from "./index";
 

packages/fast-components-react-base/src/badge/badge.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import { BadgeClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
 import { BadgeHandledProps, BadgeUnhandledProps } from "./badge.props";

packages/fast-components-react-base/src/badge/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Badge, { BadgeProps } from "./index";
 import schema from "./badge.schema.json";
 import Documentation from "./.tmp/documentation";

packages/fast-components-react-base/src/breadcrumb/breadcrumb.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     BreadcrumbClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/breadcrumb/breadcrumb.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, mount, shallow, ShallowWrapper } from "enzyme";
 import Breadcrumb, {
     BreadcrumbClassNameContract,

packages/fast-components-react-base/src/breadcrumb/breadcrumb.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import { BreadcrumbClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
 import {

packages/fast-components-react-base/src/breadcrumb/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentFactoryExample } from "@microsoft/fast-development-site-react";
 import schema from "./breadcrumb.schema.json";
 import Breadcrumb, { BreadcrumbManagedClasses, BreadcrumbProps } from "./breadcrumb";

packages/fast-components-react-base/src/button/button.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     ButtonClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/button/button.spec.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
 import * as ShallowRenderer from "react-test-renderer/shallow";
-import * as Adapter from "enzyme-adapter-react-16";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, shallow } from "enzyme";
 import examples from "./examples.data";
 import Button, {

packages/fast-components-react-base/src/button/button.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import { get } from "lodash-es";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import { ButtonHandledProps, ButtonUnhandledProps } from "./button.props";

packages/fast-components-react-base/src/button/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Button, {
     ButtonHandledProps,
     ButtonManagedClasses,

packages/fast-components-react-base/src/card/card.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     CardClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/card/card.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, shallow } from "enzyme";
 import examples from "./examples.data";
 import Card, {

packages/fast-components-react-base/src/card/card.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import { get } from "lodash-es";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import {

packages/fast-components-react-base/src/card/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Card, {
     CardHandledProps,
     CardManagedClasses,

packages/fast-components-react-base/src/checkbox/checkbox.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     CheckboxClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/checkbox/checkbox.spec.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
 import * as ShallowRenderer from "react-test-renderer/shallow";
-import * as Adapter from "enzyme-adapter-react-16";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, mount, shallow, ShallowWrapper } from "enzyme";
 import examples from "./examples.data";
 import Checkbox, {

packages/fast-components-react-base/src/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import {
     CheckboxHandledProps,

packages/fast-components-react-base/src/checkbox/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Checkbox, {
     CheckboxHandledProps,
     CheckboxManagedClasses,

packages/fast-components-react-base/src/context-menu-item/context-menu-item.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     ContextMenuItemClassNameContract,
     ManagedClasses,

packages/fast-components-react-base/src/context-menu-item/context-menu-item.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import Adapter from "enzyme-adapter-react-16";
 import { configure, shallow } from "enzyme";
 import ContextMenuItem, {
     ContextMenuItemHandledProps,

packages/fast-components-react-base/src/context-menu-item/context-menu-item.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
 import { get } from "lodash-es";
 import { ContextMenuItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";

packages/fast-components-react-base/src/context-menu-item/examples.data.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentFactoryExample } from "@microsoft/fast-development-site-react";
 import ContextMenuItem, {
     ContextMenuItemHandledProps,

packages/fast-components-react-base/src/context-menu/context-menu.props.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     ContextMenuClassNameContract,
     ManagedClasses,