chore: use rollup to bundle

__test__/BaseOfRoute.test.tsx

 import { createMemoryHistory as createHistory } from 'history'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { MemoryRouter, Route as Route2, Router, withRouter } from 'react-router'
+import { MemoryRouter, Router, withRouter } from 'react-router'
 import NotLiveRoute from '../src/index'
 import renderStrict from './utils/renderStrict'
 
@@ -19,7 +19,7 @@ describe('A <Route>', () => {
       jest.spyOn(console, 'error').mockImplementation(() => {})
 
       expect(() => {
-        renderStrict(<Route2 />, node)
+        renderStrict(<Route />, node)
       }).toThrow(/You should not use <Route> outside a <Router>/)
     })
   })
@@ -313,24 +313,24 @@ describe('A <Route>', () => {
         expect(node.innerHTML).toContain(text)
       })
 
-      // describe('that returns `undefined`', () => {
-      //   it('logs a warning to the console and renders nothing', () => {
-      //     jest.spyOn(console, 'warn').mockImplementation(() => {})
+      describe('that returns `undefined`', () => {
+        it('logs a warning to the console and renders nothing', () => {
+          jest.spyOn(console, 'warn').mockImplementation(() => {})
 
-      //     renderStrict(
-      //       <MemoryRouter initialEntries={['/']}>
-      //         <Route path="/" children={() => undefined} />
-      //       </MemoryRouter>,
-      //       node
-      //     )
+          renderStrict(
+            <MemoryRouter initialEntries={['/']}>
+              <Route path="/" children={() => undefined} />
+            </MemoryRouter>,
+            node
+          )
 
-      //     expect(node.innerHTML).toEqual('')
+          expect(node.innerHTML).toEqual('')
 
-      //     expect(console.warn).toHaveBeenCalledWith(
-      //       expect.stringContaining('You returned `undefined` from the `children` function')
-      //     )
-      //   })
-      // })
+          expect(console.warn).toHaveBeenCalledWith(
+            expect.stringContaining('You returned `undefined` from the `children` function')
+          )
+        })
+      })
     })
 
     describe('that is an empty array (as in Preact)', () => {

package.json

 {
   "name": "react-live-route",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "A living route for react-router v4",
   "repository": "fi3ework/react-live-route",
   "license": "MIT",
   "authors": "fi3ework",
-  "main": "dist/index.js",
-  "module": "es/index.js",
+  "main": "lib/index.js",
+  "module": "lib/index.module.js",
+  "typings": "lib/LiveRoute.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "rm -fr dist && tsc",
+    "build": "rm -fr lib && ts-node scripts/build.ts",
     "dev": "tsc -b -w --pretty",
     "prepublishOnly": "yarn run build",
     "lint": "tslint src",
@@ -26,6 +27,7 @@
     "dist/"
   ],
   "dependencies": {
+    "babel-plugin-annotate-pure-calls": "^0.4.0",
     "history": "^4.9.0",
     "prop-types": "^15.6.1",
     "react-is": "^16.7.0"
@@ -35,7 +37,10 @@
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
     "@types/react-router-dom": "^4.3.1",
+    "babel-plugin-dev-expression": "^0.2.1",
     "coveralls": "^3.0.3",
+    "envify": "^4.1.0",
+    "fs-extra": "^8.0.0",
     "jest": "^24.5.0",
     "jest-environment-jsdom": "^24.5.0",
     "react": "^16.3.2",
@@ -43,7 +48,14 @@
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-testing-library": "^6.0.0",
+    "rollup": "^1.11.3",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-filesize": "^6.0.1",
+    "rollup-plugin-node-resolve": "^4.2.4",
+    "rollup-plugin-replace": "^2.2.0",
+    "shelljs": "^0.8.3",
     "ts-jest": "^24.0.0",
+    "tsdx": "^0.5.9",
     "tslint": "^5.14.0",
     "tslint-config-alloy": "^0.2.1",
     "tslint-config-prettier": "^1.18.0",

scripts/build.ts

+// learn from MobX, very grateful
+
+/* tslint:disable:no-var-requires */
+const rollup = require('rollup')
+const fs = require('fs-extra')
+const path = require('path')
+const ts = require('typescript')
+const shell = require('shelljs')
+const exec = shell.exec
+const babel = require('rollup-plugin-babel')
+const replace = require('rollup-plugin-replace')
+
+process.env.NODE_ENV = 'production'
+
+// exit upon first error
+shell.set('-e')
+
+const binFolder = path.resolve('node_modules/.bin/')
+
+function getCmd(cmd) {
+  if (process.platform === 'win32') {
+    return path.join(binFolder, cmd + '.cmd')
+  }
+  return cmd
+}
+
+// make sure we're in the right folder
+process.chdir(path.resolve(__dirname, '..'))
+
+fs.removeSync('lib')
+fs.removeSync('.build.cjs')
+fs.removeSync('.build.es')
+
+function runTypeScriptBuild(outDir, target, declarations) {
+  console.log(`Running typescript build (target: ${ts.ScriptTarget[target]}) in ${outDir}/`)
+
+  const tsConfig = path.resolve('tsconfig.json')
+  const json = ts.parseConfigFileTextToJson(tsConfig, ts.sys.readFile(tsConfig), true)
+
+  const { options } = ts.parseJsonConfigFileContent(json.config, ts.sys, path.dirname(tsConfig))
+
+  options.target = target
+  options.outDir = outDir
+  options.declaration = declarations
+
+  options.module = ts.ModuleKind.ES2015
+  options.importHelpers = true
+  options.noEmitHelpers = true
+  if (declarations) options.declarationDir = path.resolve('.', 'lib')
+
+  const rootFile = path.resolve('src', 'index.tsx')
+  const host = ts.createCompilerHost(options, true)
+  const prog = ts.createProgram([rootFile], options, host)
+  const result = prog.emit()
+  if (result.emitSkipped) {
+    const message = result.diagnostics
+      .map(d => `${ts.DiagnosticCategory[d.category]} ${d.code} (${d.file}:${d.start}): ${d.messageText}`)
+      .join('\n')
+
+    throw new Error(`Failed to compile typescript:\n\n${message}`)
+  }
+}
+
+const rollupPlugins = [
+  require('rollup-plugin-node-resolve')(),
+  require('rollup-plugin-filesize')(),
+  babel({
+    plugins: ['annotate-pure-calls', 'dev-expression'],
+    exclude: 'node_modules/**'
+  }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify('production')
+  })
+]
+
+function generateBundledModule(inputFile, outputFile, format) {
+  console.log(`Generating ${outputFile} bundle.`)
+
+  return rollup
+    .rollup({
+      input: inputFile,
+      plugins: rollupPlugins,
+      external: ['react-router', 'react-router-dom', 'react', 'react-dom'],
+      onwarn: warning => {
+        // Silence circular dependency warning for moment package
+        if (warning.code === 'CIRCULAR_DEPENDENCY') {
+          return
+        }
+        console.warn(`(!) ${warning.message}`)
+      }
+    })
+    .then(bundle =>
+      bundle.write({
+        file: outputFile,
+        format,
+        exports: 'named'
+      })
+    )
+}
+
+function generateMinified() {
+  const prodEnv = {
+    ...process.env,
+    NODE_ENV: 'production'
+  }
+
+  console.log('Generating index.min.js')
+  // envify will environment variables
+  exec(`${getCmd(`envify`)} lib/index.js > lib/index.prod.js`, { env: prodEnv })
+  exec(`${getCmd('uglifyjs')} --toplevel -m -c warnings=false --source-map -o lib/index.min.js lib/index.prod.js`)
+  shell.rm('lib/index.prod.js')
+}
+
+function build() {
+  runTypeScriptBuild('.build.es5', ts.ScriptTarget.ES5, true)
+  runTypeScriptBuild('.build.es6', ts.ScriptTarget.ES2015, false)
+  return Promise.all([
+    generateBundledModule(path.resolve('.build.es5', 'index.js'), path.resolve('lib', 'index.js'), 'cjs'),
+    generateBundledModule(path.resolve('.build.es5', 'index.js'), path.resolve('lib', 'index.module.js'), 'es'),
+    generateBundledModule(path.resolve('.build.es6', 'index.js'), path.resolve('lib', 'index.es6.js'), 'es')
+  ]).then(generateMinified)
+}
+
+build().catch(e => {
+  console.error(e)
+  if (e.frame) {
+    console.error(e.frame)
+  }
+  process.exit(1)
+})

src/LiveRoute.tsx

@@ -11,9 +11,9 @@ import warning from 'tiny-warning'
 declare var __DEV__: boolean
 
 function debugLog(...message: any) {
-  // if (__DEV__) {
-  // console.log(...message)
-  // }
+  if (__DEV__) {
+    console.log(...message)
+  }
 }
 
 function isEmptyChildren(children) {
@@ -359,16 +359,16 @@ class LiveRoute extends React.Component<PropsType, any> {
       children = (children as any)(props)
 
       if (children === undefined) {
-        // if (__DEV__) {
-        //   const { path } = this.props
+        if (__DEV__) {
+          const { path } = this.props
 
-        //   warning(
-        //     false,
-        //     'You returned `undefined` from the `children` function of ' +
-        //       `<Route${path ? ` path="${path}"` : ''}>, but you ` +
-        //       'should have returned a React element or `null`'
-        //   )
-        // }
+          warning(
+            false,
+            'You returned `undefined` from the `children` function of ' +
+              `<Route${path ? ` path="${path}"` : ''}>, but you ` +
+              'should have returned a React element or `null`'
+          )
+        }
 
         children = null
       }
@@ -390,35 +390,35 @@ class LiveRoute extends React.Component<PropsType, any> {
 }
 
 /* tslint:disable:no-invalid-this */
-// if (__DEV__) {
-//   LiveRoute.prototype.componentDidMount = function() {
-//     warning(
-//       !(this.props.children && !isEmptyChildren(this.props.children) && this.props.component),
-//       'You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored'
-//     )
-
-//     warning(
-//       !(this.props.children && !isEmptyChildren(this.props.children) && this.props.render),
-//       'You should not use <Route render> and <Route children> in the same route; <Route render> will be ignored'
-//     )
-
-//     warning(
-//       !(this.props.component && this.props.render),
-//       'You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored'
-//     )
-//   }
-
-//   LiveRoute.prototype.componentDidUpdate = function(prevProps) {
-//     warning(
-//       !(this.props.location && !prevProps.location),
-//       '<Route> elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'
-//     )
-
-//     warning(
-//       !(!this.props.location && prevProps.location),
-//       '<Route> elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.'
-//     )
-//   }
-// }
+if (__DEV__) {
+  LiveRoute.prototype.componentDidMount = function() {
+    warning(
+      !(this.props.children && !isEmptyChildren(this.props.children) && this.props.component),
+      'You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored'
+    )
+
+    warning(
+      !(this.props.children && !isEmptyChildren(this.props.children) && this.props.render),
+      'You should not use <Route render> and <Route children> in the same route; <Route render> will be ignored'
+    )
+
+    warning(
+      !(this.props.component && this.props.render),
+      'You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored'
+    )
+  }
+
+  LiveRoute.prototype.componentDidUpdate = function(prevProps) {
+    warning(
+      !(this.props.location && !prevProps.location),
+      '<Route> elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'
+    )
+
+    warning(
+      !(!this.props.location && prevProps.location),
+      '<Route> elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.'
+    )
+  }
+}
 
 export default LiveRoute

tsconfig.json

@@ -10,7 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "outDir": "dist/",
-    "module": "commonjs",
+    "module": "es2015",
     "target": "es5",
     "lib": ["es2017", "dom"],
     "sourceMap": true,