feat: Add out-of-the-tbox typescript support

README.md

@@ -146,6 +146,16 @@ browserify({
 })
 ```
 
+### typescript
+
+When the path to the TypeScript package is given, Cypress will automatically transpile `.ts` spec, plugin, support files. Note that this **DOES NOT** check types.
+
+```javascript
+browserify({
+  typescript: require.resolve('typescript')
+})
+```
+
 **Default**: `undefined`
 
 ## Modifying default options

index.js

@@ -60,7 +60,7 @@ const defaultOptions = {
   },
 }
 
-const getBrowserifyOptions = (entry, userBrowserifyOptions = {}) => {
+const getBrowserifyOptions = (entry, userBrowserifyOptions = {}, typescriptPath = null) => {
   let browserifyOptions = cloneDeep(defaultOptions.browserifyOptions)
 
   // allow user to override default options
@@ -81,6 +81,18 @@ const getBrowserifyOptions = (entry, userBrowserifyOptions = {}) => {
     entries: [entry],
   })
 
+  if (typescriptPath) {
+    browserifyOptions.extensions.push('.ts', '.tsx')
+    // remove babelify setting
+    browserifyOptions.transform.pop()
+    // add typescript compiler
+    browserifyOptions.transform.push([
+      path.join(__dirname, './simple_tsify'), {
+        typescript: require(typescriptPath),
+      },
+    ])
+  }
+
   debug('browserifyOptions: %o', browserifyOptions)
 
   return browserifyOptions
@@ -127,7 +139,7 @@ const preprocessor = (options = {}) => {
     debug('input:', filePath)
     debug('output:', outputPath)
 
-    const browserifyOptions = getBrowserifyOptions(filePath, options.browserifyOptions)
+    const browserifyOptions = getBrowserifyOptions(filePath, options.browserifyOptions, options.typescript)
     const watchifyOptions = Object.assign({}, defaultOptions.watchifyOptions, options.watchifyOptions)
 
     const bundler = browserify(browserifyOptions)

package.json

@@ -55,7 +55,8 @@
     "semantic-release": "15.13.15",
     "sinon": "7.2.3",
     "sinon-chai": "3.3.0",
-    "snap-shot-it": "7.9.2"
+    "snap-shot-it": "7.9.2",
+    "typescript": "3.8.3"
   },
   "dependencies": {
     "@babel/core": "7.4.5",
@@ -74,7 +75,8 @@
     "debug": "4.1.1",
     "fs-extra": "7.0.1",
     "lodash.clonedeep": "4.5.0",
-    "watchify": "3.11.1"
+    "watchify": "3.11.1",
+    "through2": "^2.0.0"
   },
   "release": {
     "analyzeCommits": {

simple_tsify.js

@@ -0,0 +1,39 @@
+let through = require('through2')
+
+const isJson = (code) => {
+  try {
+    JSON.parse(code)
+  } catch (e) {
+    return false
+  }
+
+  return true
+}
+
+module.exports = function (b, opts) {
+  const chunks = []
+
+  return through(
+    (buf, enc, next) => {
+      chunks.push(buf.toString())
+      next()
+    },
+    function (next) {
+      const ts = opts.typescript
+      const text = chunks.join('')
+
+      if (isJson(text)) {
+        this.push(text)
+      } else {
+        this.push(ts.transpileModule(text, {
+          compilerOptions: {
+            esModuleInterop: true,
+            jsx: 'react',
+          },
+        }).outputText)
+      }
+
+      next()
+    },
+  )
+}

test/e2e/e2e_spec.js

@@ -33,6 +33,34 @@ describe('browserify preprocessor - e2e', function () {
   })
 })
 
+describe('typescript', function () {
+  it('handles .ts file when the path is given', function () {
+    return bundle('math_spec.ts', {
+      typescript: require.resolve('typescript'),
+    }).then((output) => {
+      // check that bundled tests work
+      eval(output)
+    })
+  })
+
+  it('handles .tsx file when the path is given', function () {
+    return bundle('math_spec.ts', {
+      typescript: require.resolve('typescript'),
+    }).then((output) => {
+      // check that bundled tests work
+      eval(output)
+    })
+  })
+
+  it('cannot handle .ts file when the path is not given', function () {
+    expect(() => bundle('math_spec.ts')).to.throw
+  })
+
+  it('cannot handle .tsx file when the path is not given', function () {
+    expect(() => bundle('math_spec.tsx')).to.throw
+  })
+})
+
 describe('imports and exports', () => {
   it('handles imports and exports', () => {
     return bundle('math_spec.js').then((output) => {

test/fixtures/math.ts

@@ -0,0 +1,5 @@
+export default {
+  add: (a: number, b: number) => {
+    return a + b
+  },
+}

test/fixtures/math_spec.ts

@@ -0,0 +1,13 @@
+// math exports default object
+// so if we want a property, first we need to grab the default
+import math from './math'
+const {add} = math
+
+context('math.js', function () {
+  it('imports function', () => {
+    expect(add, 'add').to.be.a('function')
+  })
+  it('can add numbers', function () {
+    expect(add(1, 2)).to.eq(3)
+  })
+})

test/fixtures/math_spec.tsx

@@ -0,0 +1,9 @@
+import math from './math'
+
+interface Props {
+  greeting: string
+}
+
+export const Foo = ({ greeting }: Props) => {
+  return <div>{greeting}{math.add(1, 2)}</div>
+}