feat: move to TS

Author: bahmutov

.travis.yml

@@ -12,6 +12,7 @@ node_js:
   - '10'
 script:
   - npm run lint
+  - npm run transpile
   - npm test -- --record
 after_success:
   - npm run semantic-release

cypress/support/index.js

@@ -13,4 +13,4 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import '../../lib'
+import '../../dist'

lib/index.d.ts

@@ -2,16 +2,26 @@
 // but for now have to document methods in both places
 // like this: import {mount} from './index'
 
+interface ReactModule {
+  name: string
+  type: string
+  location: string
+  source: string
+}
+
 declare namespace Cypress {
   interface Cypress {
     stylesCache: any
     React: string
     ReactDOM: string
     Styles: string
+    modules: ReactModule[]
   }
+
   // NOTE: By default, avoiding React.Component/Element typings
   // for many cases, we don't want to import @types/react
-  interface Chainable<Subject = any> {
+  interface Chainable<Subject> {
+    state: (key) => any,
     injectReactDOM: () => Chainable<void>
     copyComponentStyles: (component: Symbol) => Chainable<void>
     /**

lib/index.js renamed to lib/index.ts

@@ -1,13 +1,14 @@
+/// <reference path="./index.d.ts" />
+
 // having weak reference to styles prevents garbage collection
 // and "losing" styles when the next test starts
-// import { stylesCache, setXMLHttpRequest, setAlert } from './index'
-
 const stylesCache = new Map()
 
 const setXMLHttpRequest = w => {
   // by grabbing the XMLHttpRequest from app's iframe
   // and putting it here - in the test iframe
   // we suddenly get spying and stubbing 😁
+  // @ts-ignore
   window.XMLHttpRequest = w.XMLHttpRequest
   return w
 }
@@ -40,7 +41,8 @@ Cypress.Commands.add('injectReactDOM', () => {
   })
 })
 
-cy.stylesCache = stylesCache
+Cypress.stylesCache = stylesCache
+
 /** Caches styles from previously compiled components for reuse
     @function   cy.copyComponentStyles
     @param      {Object}  component
@@ -54,11 +56,11 @@ Cypress.Commands.add('copyComponentStyles', component => {
   let styles = document.querySelectorAll('head style')
   if (styles.length) {
     cy.log('injected %d styles', styles.length)
-    cy.stylesCache.set(hash, styles)
+    Cypress.stylesCache.set(hash, styles)
   } else {
     cy.log('No styles injected for this component, checking cache')
-    if (cy.stylesCache.has(hash)) {
-      styles = cy.stylesCache.get(hash)
+    if (Cypress.stylesCache.has(hash)) {
+      styles = Cypress.stylesCache.get(hash)
     } else {
       styles = null
     }
@@ -67,9 +69,12 @@ Cypress.Commands.add('copyComponentStyles', component => {
     return
   }
   const parentDocument = window.parent.document
+  // hmm, is this really project name?
+  // @ts-ignore
   const projectName = Cypress.config('projectName')
   const appIframeId = "Your App: '" + projectName + "'"
   const appIframe = parentDocument.getElementById(appIframeId)
+  // @ts-ignore
   var head = appIframe.contentDocument.querySelector('head')
   styles.forEach(function (style) {
     head.appendChild(style)

tsconfig.json

@@ -3,8 +3,8 @@
     /* Basic Options */
     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation:  */
-    "allowJs": true,                          /* Allow javascript files to be compiled. */
+    "lib": ["es2015", "dom"],                             /* Specify library files to be included in the compilation:  */
+    "allowJs": false,                          /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
@@ -19,7 +19,7 @@
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": false                            /* Enable all strict type-checking options. */
+    "strict": false,                            /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
@@ -38,7 +38,7 @@
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "types": ["cypress"]                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
 
@@ -53,6 +53,7 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include": [
-    "lib/index.js"
+    "lib/index.ts",
+    "lib/index.d.ts"
   ]
 }