fix(ts): remove esModuleInterop

.github/CONTRIBUTING.md

@@ -121,7 +121,7 @@ Stateful components should be classes:
 ```js
 import { AutoControlledComponent as Component } from '../../lib'
 
-class Dropdown extends Component {
+class Dropdown extends React.Component {
   // ...
 }
 ```
@@ -168,7 +168,8 @@ class MyComponent {
 Every component must have fully described `propTypes`.
 
  ```js
- import React, { PropTypes } from 'react'
+ import * as React from 'react'
+ import PropTypes from 'prop-types'
 
  function MyComponent(props) {
    return <div className={props.position}>{props.children}</div>
@@ -239,7 +240,7 @@ Each group has an API pattern and prop util for building up the `className` and
 Use [`classNameBuilders`][4] to extract the prop values and build up the `className`.  Grouped classes like `color` and `size` simply use the prop value as the `className`.
 
 ```js
-import cx from 'classnames'
+import * as cx from 'classnames'
 import { useKeyOnly, useValueAndKey, useKeyOrValueAndKey } from '../../lib'
 
 function Segment({ size, color, basic, floated, padded }) {
@@ -412,7 +413,7 @@ common.propKeyOrValueAndKeyToClassName()
 Every common test receives your component as its first argument.
 
 ```js
-import React from 'react'
+import * as React from 'react'
 import * as common from 'test/specs/commonTests'
 import Menu from 'src/collections/Menu/Menu'
 import MenuItem from 'src/collections/Menu/MenuItem'
@@ -483,7 +484,7 @@ function MyComponent(props) {
 If you're component requires event handlers, it is a stateful class component. Want to know [why][15]?
 
 ```js
-class MyComponent extends Component {
+class MyComponent extends React.Component {
   handleClick = (e) => {
     console.log('Clicked my component!')
   }

build/gulp/plugins/gulp-component-menu.ts

@@ -1,7 +1,7 @@
-import gutil from 'gulp-util'
-import path from 'path'
-import through2 from 'through2'
-import Vinyl from 'vinyl'
+import * as gutil from 'gulp-util'
+import * as path from 'path'
+import * as through2 from 'through2'
+import * as Vinyl from 'vinyl'
 
 import getComponentInfo from './util/getComponentInfo'
 

build/gulp/plugins/gulp-example-menu.ts

@@ -1,8 +1,8 @@
-import gutil from 'gulp-util'
-import _ from 'lodash'
-import path from 'path'
-import through2 from 'through2'
-import Vinyl from 'vinyl'
+import * as gutil from 'gulp-util'
+import * as _ from 'lodash'
+import * as path from 'path'
+import * as through2 from 'through2'
+import * as Vinyl from 'vinyl'
 
 import { parseDocSection } from './util'
 

build/gulp/plugins/gulp-react-docgen.ts

@@ -1,7 +1,7 @@
-import gutil from 'gulp-util'
-import path from 'path'
-import through2 from 'through2'
-import Vinyl from 'vinyl'
+import * as gutil from 'gulp-util'
+import * as path from 'path'
+import * as through2 from 'through2'
+import * as Vinyl from 'vinyl'
 
 import { getComponentInfo } from './util'
 

build/gulp/plugins/util/getComponentInfo.ts

@@ -1,8 +1,8 @@
-import _ from 'lodash'
-import path from 'path'
+import * as _ from 'lodash'
+import * as path from 'path'
 import { defaultHandlers, parse, resolver } from 'react-docgen'
-import fs from 'fs'
-import ts from 'typescript'
+import * as fs from 'fs'
+import * as ts from 'typescript'
 import parseDefaultValue from './parseDefaultValue'
 import parseDocblock from './parseDocblock'
 import parserCustomHandler from './parserCustomHandler'

build/gulp/plugins/util/isUIComponentClass.ts

@@ -1,5 +1,5 @@
 import { utils } from 'react-docgen'
-import recast from 'recast'
+import * as recast from 'recast'
 
 const { match, resolveToValue } = utils
 

build/gulp/plugins/util/parseDefaultValue.ts

@@ -1,3 +1,3 @@
-import _ from 'lodash'
+import * as _ from 'lodash'
 
 export default propDef => _.get(propDef, 'defaultValue.value', undefined)

build/gulp/plugins/util/parseDocSection.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import * as _ from 'lodash'
 import traverse from 'babel-traverse'
 
 import parseBuffer from './parseBuffer'

build/gulp/plugins/util/parseDocblock.ts

@@ -1,4 +1,4 @@
-import doctrine from 'doctrine'
+import * as doctrine from 'doctrine'
 
 export default docblock => {
   const { description = '', tags = [], ...rest } = doctrine.parse(docblock || '', { unwrap: true })

build/gulp/plugins/util/parserCustomHandler.ts

@@ -1,8 +1,8 @@
-import _ from 'lodash'
-import { types } from 'recast'
+import * as _ from 'lodash'
+import * as recast from 'recast'
 import { utils } from 'react-docgen'
 
-const { namedTypes } = types
+const { namedTypes } = recast.types
 const { getMemberValuePath, getPropertyName, resolveToValue } = utils
 
 const getObjectName = path => `${_.get(path, 'object.name')}.${_.get(path, 'property.name')}`

build/gulp/tasks/dist.ts

@@ -1,13 +1,12 @@
 import { task, series, parallel, src, dest } from 'gulp'
-import loadPlugins from 'gulp-load-plugins'
-import merge2 from 'merge2'
-import rimraf from 'rimraf'
-import webpack from 'webpack'
+import * as merge2 from 'merge2'
+import * as rimraf from 'rimraf'
+import * as webpack from 'webpack'
 
 import config from '../../../config'
 
 const { paths } = config
-const g = loadPlugins()
+const g = require('gulp-load-plugins')()
 const { log, PluginError } = g.util
 
 // ----------------------------------------

build/gulp/tasks/dll.ts

@@ -1,11 +1,10 @@
 import { task, series } from 'gulp'
-import loadPlugins from 'gulp-load-plugins'
-import rimraf from 'rimraf'
-import webpack from 'webpack'
+import * as rimraf from 'rimraf'
+import * as webpack from 'webpack'
 
 import config from '../../../config'
 
-const g = loadPlugins()
+const g = require('gulp-load-plugins')()
 const { log, PluginError } = g.util
 
 // ----------------------------------------

build/gulp/tasks/docs.ts

@@ -1,13 +1,12 @@
-import historyApiFallback from 'connect-history-api-fallback'
-import express from 'express'
+import * as historyApiFallback from 'connect-history-api-fallback'
+import * as express from 'express'
 import { task, src, dest, lastRun, parallel, series, watch } from 'gulp'
-import loadPlugins from 'gulp-load-plugins'
-import path from 'path'
-import rimraf from 'rimraf'
-import through from 'through2'
-import webpack from 'webpack'
-import WebpackDevMiddleware from 'webpack-dev-middleware'
-import WebpackHotMiddleware from 'webpack-hot-middleware'
+import * as path from 'path'
+import * as rimraf from 'rimraf'
+import * as through2 from 'through2'
+import * as webpack from 'webpack'
+import * as WebpackDevMiddleware from 'webpack-dev-middleware'
+import * as WebpackHotMiddleware from 'webpack-hot-middleware'
 
 import sh from '../sh'
 import config from '../../../config'
@@ -16,7 +15,7 @@ import gulpExampleMenu from '../plugins/gulp-example-menu'
 import gulpReactDocgen from '../plugins/gulp-react-docgen'
 
 const { paths } = config
-const g = loadPlugins()
+const g = require('gulp-load-plugins')()
 const { colors, log, PluginError } = g.util
 
 const handleWatchChange = e => log(`File ${e.path} was ${e.type}, running tasks...`)
@@ -90,7 +89,7 @@ task('build:docs:images', () =>
 
 task('build:docs:toc', () =>
   src(markdownSrc, { since: lastRun('build:docs:toc') }).pipe(
-    through.obj((file, enc, done) => {
+    through2.obj((file, enc, done) => {
       sh(`doctoc ${file.path} --github --maxlevel 4 && git add ${file.path}`, done)
     }),
   ),

build/gulp/tasks/generate/index.ts

@@ -4,8 +4,8 @@ import config from '../../../../config'
 import rename from 'gulp-rename'
 import replace from 'gulp-replace'
 import inquirer from 'inquirer'
-import path from 'path'
-import fs from 'fs'
+import * as path from 'path'
+import * as fs from 'fs'
 
 const { paths } = config
 const TEMPLATE_PLACEHOLDER = 'TEMPLATE_COMPONENT__'

build/gulp/tasks/generate/templates/docs-examples-components/TEMPLATE_COMPONENT__/Types/TEMPLATE_COMPONENT__Example.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { TEMPLATE_COMPONENT__ } from '@stardust-ui/react'
 
 const TEMPLATE_COMPONENT__Example = () => <TEMPLATE_COMPONENT__ />

build/gulp/tasks/generate/templates/docs-examples-components/TEMPLATE_COMPONENT__/Types/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 

build/gulp/tasks/generate/templates/docs-examples-components/TEMPLATE_COMPONENT__/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 
 const TEMPLATE_COMPONENT__Examples = () => (

build/gulp/tasks/generate/templates/src-components/TEMPLATE_COMPONENT__/TEMPLATE_COMPONENT__.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 const TEMPLATE_COMPONENT__: any = (props: any) => <div>Hello from TEMPLATE_COMPONENT__!</div>
 

build/tsconfig.common.json

@@ -20,7 +20,6 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "allowJs": false,
-    "esModuleInterop": true,
     "noImplicitReturns": false,
     "noImplicitThis": false,
     "noImplicitAny": false,

build/webpack.config.dll.ts

@@ -1,4 +1,4 @@
-import webpack from 'webpack'
+import * as webpack from 'webpack'
 import config from '../config'
 
 const { paths } = config

build/webpack.config.umd.ts

@@ -1,9 +1,9 @@
-import webpack from 'webpack'
+import * as webpack from 'webpack'
 
 import config from '../config'
-import pkg from '../package.json'
 import webpackConfig from '../webpack.config'
 
+const pkg = require('../package.json')
 const { paths } = config
 
 const webpackUMDConfig = {

config.ts

@@ -1,4 +1,4 @@
-import path from 'path'
+import * as path from 'path'
 
 // ------------------------------------
 // Environment vars

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Menu } from 'semantic-ui-react'
 
 import { updateForKeys } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 
-export default class ComponentControlsCopyLink extends Component<any, any> {
+export default class ComponentControlsCopyLink extends React.Component<any, any> {
   private mounted: boolean
   private readonly btnLabel = 'Permalink'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx

@@ -1,6 +1,6 @@
-import _ from 'lodash'
+import * as _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 import { NavLink } from 'react-router-dom'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsRtl.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 
 import { updateForKeys } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowCode.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 
 import { updateForKeys } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsShowVariables.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Icon, Menu } from 'semantic-ui-react'
 
 import { updateForKeys } from 'docs/src/hoc'

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -1,6 +1,6 @@
-import _ from 'lodash'
+import * as _ from 'lodash'
 import PropTypes from 'prop-types'
-import React, { Component, CSSProperties } from 'react'
+import * as React from 'react'
 import DocumentTitle from 'react-document-title'
 import { withRouter } from 'react-router'
 import { Grid, Header, Icon } from 'semantic-ui-react'
@@ -16,13 +16,13 @@ import ComponentSidebar from './ComponentSidebar'
 import ComponentDocTag from './ComponentDocTag'
 
 const topRowStyle = { margin: '1em' }
-const exampleEndStyle: CSSProperties = {
+const exampleEndStyle: React.CSSProperties = {
   textAlign: 'center',
   opacity: 0.5,
   paddingTop: '75vh',
 }
 
-class ComponentDoc extends Component<any, any> {
+class ComponentDoc extends React.Component<any, any> {
   static childContextTypes = {
     onPassed: PropTypes.func,
   }
@@ -103,7 +103,7 @@ class ComponentDoc extends Component<any, any> {
           </Grid.Row>
 
           <Grid.Row columns="equal">
-            <Grid.Column style={{ padding: '0 0 0 28px' } as CSSProperties}>
+            <Grid.Column style={{ padding: '0 0 0 28px' } as React.CSSProperties}>
               <div ref={this.handleExamplesRef}>
                 <ComponentExamples displayName={info.displayName} />
               </div>

docs/src/components/ComponentDoc/ComponentDocLinks.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import * as React from 'react'
 import { List } from 'semantic-ui-react'
 
 import { repoURL } from '../../utils'
@@ -14,7 +14,7 @@ const linkListStyle = {
   top: '0',
 }
 
-export default class ComponentDocLinks extends PureComponent<any, any> {
+export default class ComponentDocLinks extends React.PureComponent<any, any> {
   static propTypes = {
     repoPath: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,

docs/src/components/ComponentDoc/ComponentDocSee.tsx

@@ -1,6 +1,6 @@
-import _ from 'lodash'
+import * as _ from 'lodash'
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { Header, List } from 'semantic-ui-react'
 

docs/src/components/ComponentDoc/ComponentDocTag.tsx

@@ -1,12 +1,12 @@
-import React, { Component } from 'react'
-import _ from 'lodash'
+import * as React from 'react'
+import * as _ from 'lodash'
 import { Header, Message } from 'semantic-ui-react'
 
 const headerStyle = {
   whiteSpace: 'pre-line',
 }
 
-class ComponentDocTag extends Component<any, any> {
+class ComponentDocTag extends React.Component<any, any> {
   getTagDescription = (forTag, fromInfo) => {
     const tags = (fromInfo.docblock && fromInfo.docblock.tags) || []
     return _.result(_.find(tags, 'title', forTag), 'description')