Merge pull request #512 from bemusic/replace-babel-with-tsc

Replace Babel with TypeScript compiler

.eslintrc

@@ -24,7 +24,7 @@ globals:
   xit: false
   sinon: false
   BemuseLogger: false
-parser: babel-eslint
+parser: typescript-eslint-parser
 plugins:
   - react
 rules:

config/webpack.js

@@ -57,15 +57,31 @@ function generateBaseConfig () {
 function generateLoadersConfig () {
   return [
     {
-      test: /\.jsx?$/,
+      test: /\.[jt]sx?$/,
       include: [path('src'), path('spec')],
       use: {
-        loader: 'babel-loader',
+        loader: 'ts-loader',
         options: {
-          cacheDirectory: true
+          transpileOnly: true,
+          compilerOptions: {
+            module: 'es6'
+          }
         }
       }
     },
+    ...(Env.coverageEnabled()
+      ? [
+        {
+          test: /\.[jt]sx?$/,
+          include: [path('src')],
+          use: {
+            loader: 'istanbul-instrumenter-loader',
+            options: { esModules: true }
+          },
+          enforce: 'post'
+        }
+      ]
+      : []),
     {
       test: /\.js$/,
       type: 'javascript/auto',
@@ -221,7 +237,10 @@ function applyTestBedConfig (config) {
   return config
 }
 
-export const generateWebConfig = flowRight(applyWebConfig, generateBaseConfig)
+export const generateWebConfig = flowRight(
+  applyWebConfig,
+  generateBaseConfig
+)
 
 export const generateKarmaConfig = flowRight(
   applyKarmaConfig,

node-environment.js

@@ -1,6 +1,3 @@
 require('dotenv').load()
-require('@babel/register')({
-  plugins: ['@babel/plugin-transform-modules-commonjs']
-})
-require('@babel/polyfill')
+require('ts-node/register/transpile-only')
 global.Promise = require('bluebird')

package.json

@@ -54,19 +54,7 @@
   },
   "homepage": "https://github.com/spacetme/bemuse",
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
     "autoprefixer": "^9.1.5",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-emotion": "^9.2.11",
-    "babel-plugin-espower": "^3.0.0",
-    "babel-plugin-istanbul": "^5.1.0",
     "body-parser": "^1.18.3",
     "brfs": "^1.6.1",
     "chai": "^4.2.0",
@@ -102,6 +90,7 @@
     "gulp-util": "^3.0.8",
     "hide-stack-frames-from": "^1.0.0",
     "import-sort-style-renke": "^2.4.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
     "jade": "^1.9.2",
     "jade-loader": "^0.8.0",
     "js-yaml": "^3.12.0",
@@ -140,8 +129,10 @@
     "style-loader": "^0.23.1",
     "through2": "^2.0.3",
     "transform-loader": "^0.2.4",
+    "ts-loader": "^5.3.1",
     "ts-node": "^7.0.1",
-    "typescript": "^3.1.3",
+    "typescript": "^3.2.1",
+    "typescript-eslint-parser": "^21.0.1",
     "url-loader": "^1.1.2",
     "val-loader": "^1.1.1",
     "web-audio-test-api": "^0.5.2",
@@ -152,7 +143,6 @@
     "yn": "^1.3.0"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.0.0",
     "audio-context": "^1.0.3",
     "auth0-js": "^9.8.0",
     "axios": "^0.17.1",

src/app/ui/AboutScene.jsx

@@ -109,9 +109,9 @@ class AboutScene extends React.Component {
                 libraries we use into standalone web packages.
               </li>
               <li>
-                We use <a href='https://babeljs.io/'>Babel</a> so that we can
-                write our code in future JavaScript dialect and have it
-                translate our code for today{"'"}s browsers.
+                We use <a href="https://www.typescriptlang.org/">TypeScript</a>{' '}
+                to statically check our code for type errors and compiles the
+                code down to JavaScript.
               </li>
               <li>
                 We use{' '}

src/bootstrap/index.js

@@ -3,17 +3,13 @@
 // :doc:
 // Bootstraps the environment with:
 //
-// - `babel-polyfill`_
 // - `debug`_
 // - `Bluebird`_ (with `extended Promise API`_)
 //
-// .. _ES6 Runtime: https://babeljs.io/docs/usage/polyfill/
-// .. _Babel: https://babeljs.io/
 // .. _debug: https://www.npmjs.com/package/debug
 // .. _bluebird: https://github.com/petkaantonov/bluebird
 // .. _Extended Promise API: https://github.com/petkaantonov/bluebird/blob/master/API.md
 
-import '@babel/polyfill'
 import 'whatwg-fetch'
 import debug from 'debug'
 import Bluebird from 'bluebird'

src/ui/DialogContent.jsx

@@ -1,6 +1,6 @@
 import styled from 'react-emotion'
 
-const DialogContent = styled.div`
+const DialogContent = styled('div')`
   padding: 1em;
   > p {
     margin: 0;
@@ -10,7 +10,7 @@ const DialogContent = styled.div`
   }
 `
 
-DialogContent.Buttons = styled.p`
+DialogContent.Buttons = styled('p')`
   text-align: right;
 `
 

src/ui/FloatingMobileButton.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { css } from 'emotion';
 
 function FloatingMobileButton ({ children, buttonProps }) {
   return (
     <button
-      css={`
+      className={css(`
         position: fixed;
         z-index: 102;
         top: 20px;
@@ -23,7 +24,7 @@ function FloatingMobileButton ({ children, buttonProps }) {
         align-items: center;
         justify-content: center;
         cursor: pointer;
-      `}
+      `)}
       {...buttonProps}
     >
       {children}

src/ui/FloatingMobileMenu.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled, { keyframes } from 'react-emotion'
+import styled, { keyframes, css } from 'react-emotion'
 
 function FloatingMobileMenu ({ children, visible }) {
   return (
     <nav
-      css={`
+      className={css(`
         position: fixed;
         top: 0;
         left: 0;
@@ -24,7 +24,7 @@ function FloatingMobileMenu ({ children, visible }) {
           text-decoration: none;
           color: #e9e8e7;
         }
-      `}
+      `)}
     >
       {children}
     </nav>
@@ -35,7 +35,7 @@ FloatingMobileMenu.propTypes = {
   visible: PropTypes.bool
 }
 
-FloatingMobileMenu.Separator = styled.hr`
+FloatingMobileMenu.Separator = styled('hr')`
   height: 0;
   border: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.3);

tsconfig.base.json

@@ -14,6 +14,7 @@
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
     "target": "es6",
-    "module": "commonjs"
+    "module": "commonjs",
+    "jsx": "react"
   }
 }