Coverage using ts-jest

development-setup.md

@@ -0,0 +1,163 @@
+# Development setup
+
+(for https://github.com/NLeSC/create-react-app)
+
+
+## long story short
+
+```
+npm install -g create-react-app
+npm install -g verdaccio
+verdaccio
+npm set registry http://localhost:4873
+git clone https://github.com/NLeSC/create-react-app.git
+cd create-react-app/packages/react-scripts
+<make changes>
+npm version <major|minor|patch|...>
+npm adduser --registry http://localhost:4873/
+npm publish
+<make sure to publish in the tslint-config-react-app subdir as well>
+cd <somewhere else>
+create-react-app my-app --scripts-version @nlesc/react-scripts
+
+```
+
+
+
+## long story long
+
+A user who just wants to automatically generate an initial setup for a React app
+could do so by installing the ``create-react-app`` generator as follows:
+```
+npm install -g create-react-app
+```
+
+Afterwards, you will have a command available that will allow you to run the
+line below and create a new React app:
+```
+create-react-app <your-app-name>
+```
+
+This will create a directory ``your-app-name`` that contains a complete setup for
+developing the newly created React app, including testing, code coverage generation,
+bundling, minification, incremental buidling, linting, etc.
+
+Note that the above uses the ``npm`` registry at ``https://registry.npmjs.org/``.
+Now let's say you'd want to make changes to the template used to generate new
+apps, for example because you want new apps to be in TypeScript instead of the
+default JavaScript. For this, it is useful to run your own, local ``npm`` registry 
+using [verdaccio](https://github.com/verdaccio/verdaccio). Verdaccio sits between
+you and https://registry.npmjs.com. It lets you publish development versions of 
+your npm package to the local, private repo, while still being able to retrieve
+any other packages from the 'normal' registry at npmjs. 
+
+Install verdaccio with:
+
+```
+npm install -g verdaccio
+```
+
+Check to see if it works:
+
+```
+verdaccio
+```
+
+``verdaccio`` should tell you where its registry lives. Mine is at
+``http://localhost:4873/``. We will now tell ``npm`` to use the local
+``verdaccio`` registry instead of ``http://registry.npmjs.com``, as follows:
+```
+npm set registry http://localhost:4873
+```
+If you want to return to the normal setup at a later point in time, you can do
+so with:
+```
+npm set registry https://registry.npmjs.com
+```
+
+Let's say you now want to make some changes to the ``create-react-app``
+generator application. First get the source code of ``create-react-app`` using
+nlesc's fork. I'm checking out the source code into ``~/github/nlesc/``:
+```
+cd ~/github/nlesc/
+git clone https://github.com/NLeSC/create-react-app.git
+```
+
+Any changes you make will likely be in one of ``create-react-app``'s constituent
+packages, which are located at ``create-react-app/packages``. Each of its
+subdirectories is a separate ``npm`` package. Let's say you want to make changes
+to the App template from ``create-react-app/packages/react-scripts/template/src``.
+
+```
+cd create-react-app/packages/react-scripts/template/src
+<make changes>
+```
+
+Before publishing your changes, you need to:
+
+1. increment the semantic versioning of the package
+1. add yourself as a user to verdaccio's npm registry server
+
+Let's first check what the current semantic version number is, as follows. Walk
+up the directory tree until you find a ``package.json``. You should find one in
+``create-react-app/packages/react-scripts/``. Look up the value for ``version``.
+Now go back to the terminal and use ``npm version patch`` to increment the patch
+part of the semantic version number. The 'patch' part of the
+version value in package.json should have been incremented (reload your editor
+if necessary).
+
+Now let's add a user to verdaccio, as follows:
+```
+npm adduser --registry http://localhost:4873/
+```
+This will ask you to enter a user name, password, and e-mail address, which will
+be stored in verdaccio. It doesn't really matter what you enter on any of the
+three questions.
+
+
+Now look up the value for ``name`` in package.json. This will be the name the
+package is published under. For me, it's ``@nlesc/react-scripts``.
+
+Verify that verdaccio is the active npm registry with ``npm get registry``, and
+that verdaccio is in fact up and running, then publish the package to verdaccio
+with:
+
+```
+npm publish
+```
+
+You can point your browser to http://localhost:4873/ to get an overview of
+packages that are present in verdaccio's registry.
+
+Now when we want to test if the new version of ``@nlesc/react-scripts`` does
+what we want it to do, we can ``cd`` to some other place, let's say ``~/tmp``:
+
+```
+cd ~/tmp
+```
+``npm install`` ``@nlesc/react-scripts`` locally (still using verdaccio's repo):
+```
+npm install @nlesc/react-scripts
+```
+
+You can now inspect the package at ``~/tmp/node_modules/@nlesc/react-scripts/``.
+
+The local install (``npm install`` without the ``-g`` flag) makes it a little
+easier to remove the ``node_modules`` directory when additional changes have
+been made to the package, and those changes have been ``npm publish``'ed to the
+verdaccio registry.
+
+
+Now create a new app using the updated generator as follows:
+```
+cd ~/tmp # or wherever you want the new app to be
+create-react-app the-new-app --scripts-version @nlesc/react-scripts
+```
+This uses the globally installed ``create-react-app``, but with the custom
+version of ``react-scripts``, namely ``@nlesc/react-scripts`` from verdaccio.
+
+
+
+
+
+

feature-matrix.md

@@ -0,0 +1,131 @@
+
+# legend
+
+The table records what is currently available and working _in the listed repo_, not what could work with some extra effort. Recording these facts helps to keep the discussions clean.
+
+- :grey_question: : unknown
+- :white_check_mark: : implemented
+- :x: : not implemented
+
+
+
+# general
+
+|feature description |  [create-react-app](https://github.com/facebookincubator/create-react-app) |  [punchcardjs](https://github.com/nlesc-sherlock/punchcardjs) |  [molviewer](https://github.com/3D-e-Chem/molviewer-tsx) |  [angular-cli](https://github.com/angular/angular-cli) |  [create-ts-app](https://github.com/vgmr/create-ts-app) | yeoman generator | issues |
+|---|---|---|---|---|---|---|---|
+| transpile from TS to JS | :x: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| transpile TSX to JS | :x: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| transpile errors are terminal | :grey_question: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#5](https://github.com/NLeSC/create-react-app/issues/5) |
+| doesn't use ``gulp`` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| doesn't use ``grunt`` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| doesn't use ``bower`` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| doesn't use ``jspm`` | :white_check_mark: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| targets es5 | :white_check_mark: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| targets latest chrome | :grey_question: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| targets latest firefox | :grey_question: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| targets latest edge | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| automatic reload browser on code change | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| automatic rebuild on code changes, manual browser reload | :white_check_mark: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| fast rebuilds | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| can handle TS2 ``@types/`` | :x: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#2](https://github.com/NLeSC/create-react-app/issues/2) |
+| in-browser debugging of original source code | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#6](https://github.com/NLeSC/create-react-app/issues/6) |
+| minification of js | :white_check_mark: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#6](https://github.com/NLeSC/create-react-app/issues/6) |
+| minification of css | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| bundling of js | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| bundling of css | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| linting can run on Travis or similar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#7](https://github.com/NLeSC/create-react-app/issues/7) |
+| testing can run on Travis or similar | :white_check_mark: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| building can run on Travis or similar | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#8](https://github.com/NLeSC/create-react-app/issues/8) |
+| has ``purge`` command: | :x: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#9](https://github.com/NLeSC/create-react-app/issues/9) |
+| has deploy app to gh-pages command | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| has deploy docs to gh-pages command | :x: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#10](https://github.com/NLeSC/create-react-app/issues/10) |
+| has generate api docs command | :x: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#11](https://github.com/NLeSC/create-react-app/issues/11) |
+| can handle es7 object spread | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#12](https://github.com/NLeSC/create-react-app/issues/12) |
+| can handle es7 decorators | :x: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#12](https://github.com/NLeSC/create-react-app/issues/12) |
+| can handle es7 generator | :grey_question: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#12](https://github.com/NLeSC/create-react-app/issues/12) |
+| can use untyped JS libs | :x: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#13](https://github.com/NLeSC/create-react-app/issues/13) |
+| can differentiate prod/dev | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#14](https://github.com/NLeSC/create-react-app/issues/14) |
+| can access external api server | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+
+
+# testing
+
+|feature description |  [create-react-app](https://github.com/facebookincubator/create-react-app) |  [punchcardjs](https://github.com/nlesc-sherlock/punchcardjs) |  [molviewer](https://github.com/3D-e-Chem/molviewer-tsx) |  [angular-cli](https://github.com/angular/angular-cli) |  [create-ts-app](https://github.com/vgmr/create-ts-app) | yeoman generator | issues |
+|---|---|---|---|---|---|---|---|
+| unit testing | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#15](https://github.com/NLeSC/create-react-app/issues/15) |
+| dom testing | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#15](https://github.com/NLeSC/create-react-app/issues/15) |
+| e2e testing | :x: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#16](https://github.com/NLeSC/create-react-app/issues/16) |
+| testing across browsers/OS/devices | :x: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#16](https://github.com/NLeSC/create-react-app/issues/16) |
+| coverage of original code  | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#17](https://github.com/NLeSC/create-react-app/issues/17) |
+| coverage includes untouched code  | :grey_question: | :grey_question: | :x: | :grey_question: | :grey_question: | :grey_question: | [#18](https://github.com/NLeSC/create-react-app/issues/18) |
+| error stacktrace of original code  | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | [#17](https://github.com/NLeSC/create-react-app/issues/17) |
+| tests written in TS  | :x: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#15](https://github.com/NLeSC/create-react-app/issues/15) |
+| has ``it()`` and ``describe()`` or similar  | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| has command to run tests  | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| automatic run tests on source change | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| Advanced assertions, e.g. Chai  | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| Mocking ability, e.g. Sinon  | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+
+
+# linting
+
+|feature description |  [create-react-app](https://github.com/facebookincubator/create-react-app) |  [punchcardjs](https://github.com/nlesc-sherlock/punchcardjs) |  [molviewer](https://github.com/3D-e-Chem/molviewer-tsx) |  [angular-cli](https://github.com/angular/angular-cli) |  [create-ts-app](https://github.com/vgmr/create-ts-app) | yeoman generator | issues |
+|---|---|---|---|---|---|---|---|
+| tslint by editor plugin | :x: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#19](https://github.com/NLeSC/create-react-app/issues/19) |
+| csslint by editor plugin | :x: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#19](https://github.com/NLeSC/create-react-app/issues/19) |
+| esjshint by editor plugin | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#19](https://github.com/NLeSC/create-react-app/issues/19) |
+| prebuild linting | :grey_question: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#20](https://github.com/NLeSC/create-react-app/issues/20) |
+| precommit linting | :grey_question: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| prerelease linting | :grey_question: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| tslint the TS src | :x: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#20](https://github.com/NLeSC/create-react-app/issues/20) |
+| eslint src | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| no conflicts between linters | :white_check_mark: | :white_check_mark: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :white_check_mark: |
+| lint css | :x: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#20](https://github.com/NLeSC/create-react-app/issues/20) |
+| linter tsx aware | :x: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | [#20](https://github.com/NLeSC/create-react-app/issues/20) |
+| has .editorconfig | :x: | :white_check_mark: | :x: | :grey_question: | :grey_question: | :grey_question: | [#21](https://github.com/NLeSC/create-react-app/issues/21) |
+| lint errors are terminal | :grey_question: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | [#20](https://github.com/NLeSC/create-react-app/issues/20) |
+
+
+
+
+
+# Remaining
+
+* Not too many commands
+* Not too many config files
+* Minimize duplication, eg. installing library should not take many steps
+* Opening repo in editor should just work
+* Doucment how to install dependencies
+* Document usual suspects for routing/state/async/fetch: react-router, react-redux, redux-thunk, isomorphic-fetch
+* dependency management: npm, unpkg
+* autoprefixing vendor specific css ``-webkit-box-orient`` and such
+* static asset management, including fonts, images and such
+* avoid browser caching of static assets
+
+
+| allows offline mode | :white_check_mark: | :x: | :x: | :grey_question: | :grey_question: | :grey_question: | :grey_question: |
+| allows standalone mode | :grey_question: | :x: | :white_check_mark: | :grey_question: | :grey_question: | :grey_question: | :grey_question: |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

packages/react-scripts/README.md

@@ -1,5 +1,13 @@
 # react-scripts
 
+Fork which adds Typescript support to apps created with [Create React App](https://github.com/facebookincubator/create-react-app).
+
+The `@nlesc/react-scripts` package can be used by:
+
+```
+create-react-app my-app --scripts-version @nlesc/react-scripts
+```
+
 This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).  
 Please refer to its documentation:
 

packages/react-scripts/bin/react-scripts.js

@@ -7,6 +7,7 @@ switch (script) {
 case 'build':
 case 'eject':
 case 'start':
+case 'lint':
 case 'test':
   var result = spawn.sync(
     'node',