Add new SPA template

README.md

@@ -2,33 +2,51 @@
 
 [Cycle-app](https://github.com/cyclejs-community/create-cycle-app) flavor.
 
+## Template
+
+An elementary SPA. Each page is a cycle component and has its own state, which is persisted in local storage
+
+Uses:
+* xstream observables designed for HTML apps
+* @cycle/dom and snabbdom for HTML rendering and events
+* @cycle/http for http requests
+* @cycle/time for accurate timing
+* cycle-onionify and @cycle/isolate for fractal single state atom
+* cycle-storageify and @cycle/storage for persistence in browser local storage
+* cyclic-router and switch-path for routing and history management
+* cycle-rerun for Hot Module Reloading (HMR)
+* Custom HTML speech driver (write only)
+
 ## Language
 
-ES6 or Typescript, uses the Typescript compiler for both.
+Typescript (strict) with TSLint or ES6, uses the Typescript compiler for both.
 
 ## How does this flavor work
 
 My goal is to create a flavor where you don't have to eject if you want to customize the config. This is now possible with the 3.0.0 update. The template will create a `webpack.config.js` inside your app folder that defines the entry points of the app. You can add to that config and it will be merged with the config defined in this flavor.
 
 I strongly recommend [wepack-blocks](https://github.com/andywer/webpack-blocks) as they help a lot in making webpack easy.
 
-## Enable HMR
-
-If you have a new scaffold you won't have to do anything.
-When migration from an earlier version, you will have to update the flavor and adjust your index.ts like [this one](https://github.com/cyclejs-community/create-cycle-app-flavors/blob/master/packages/cycle-scripts-one-fits-all/template/src/index.ts)
-
 ## Migrating
 
-The 3.0.0 update is a breaking change, you will need to update manually:
-
-1. Create a new bare scaffold using `create-cycle-app tmp --flavor cycle-scripts-one-fits-all`
-2. Copy over your source and tests.
-3. (optional) Adjust the entry points in the webpack.config.js
-4. Open the old package.json and the new one (that was created by `create-cycle-app`) and copy over the dependencies of your app _manually_. **It won't work if you replace the config alltogether!**
-5. Copy over `.git` and all other files you want to keep
-6. Check if everything is working as it should.
-7. Delete your old folder and rename `tmp` to your app name.
-8. Enjoy your new flavor :)
+To migrate an existing app to `5.0.0` you have to
+* update `cycle-scripts-one-fits-all`
+* update `package.json` like this:
+```json
+"nyc": {
+  "instrument": false,
+  "sourceMap": false,
+  "include": [<paths of files you want to test>, 'src/components'],
+  "reporter": ['html', 'text-summary']
+}
+
+"mocha-webpack": {
+  include: [
+    'src/components/**/*.{jsx,js,ts,tsx}', //Should be the same as in nyc.include
+    'test/**/*.test.{js,jsx,ts,tsx}' //All your tests
+]
+
+```
 
 ## Bundler
 
@@ -38,37 +56,12 @@ Webpack is configured using [webpack-blocks](https://github.com/andywer/webpack-
 
 ## Scripts
 
-- `npm start`: Start development server listening on port 8000
-- `npm test`: Run the default test tool
+- `npm start`: Start development server listening on port 8080
+- `npm test`: Run the tests with mocha-webpack
 - `npm run build`: Generate a production-ready build content, on the `build` folder (this folder is *gitignored*)
 - `npm run eject`: Copy flavor's dependencies and configurations to the project folder, update `package.json` and remove the dependency on the flavored `cycle-scripts`. This is irreversible.
 - `npm run clean`: Delete all the files and folders that were generated by the other commands (build, start and test)
 
-
-## Boilerplate:
-
-The flavor generate the following file structure:
-
-```
-my-awesome-cycle-app/
-├── node_modules/
-├── public/
-│   ├── favicon.png
-│   └── favicon.ico
-├── src/
-│   ├── css
-│   │   └── styles.scss
-│   ├── app.tsx
-│   ├── app.test.js
-│   └── index.ts
-├── .gitignore
-├── package.json
-├── tsconfig.json
-├── tslint.json
-├── webpack.config.js
-└── index.ejs
-```
-
 ### Config files
 * webpack.config.js (Added to `config/` after running the eject script)
 * webpack.config.test.js (Added to `config/` after running the eject script)

configs/webpack.config.test.js

@@ -1,43 +1,30 @@
 const config = require('./webpack.config.js');
 const nodeExternals = require('webpack-node-externals');
+const path = require('path');
+const packageJson = require(path.join(process.cwd(), 'package.json'));
 
 module.exports = Object.assign({}, config, {
+    output: {
+        // use absolute paths in sourcemaps (important for debugging via IDE)
+        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
+        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
+    },
     target: 'node',
     devtool: 'inline-source-map',
     externals: [nodeExternals()],
     plugins: config.plugins.filter(p => !(p.options && p.options.template)), //Exclude HtmlWebpackPlugin
     module: Object.assign({}, config.module, {
-        loaders: config.module.loaders.map(l => {
-            if (
-                l.loaders &&
-                l.loaders.reduce(
-                    (acc, curr) =>
-                        acc || /awesome-typescript-loader.*/.test(curr),
-                    false
-                )
-            ) {
-                return Object.assign({}, l, {
-                    loaders: l.loaders
-                        .filter(e => !/awesome-typescript-loader.*/.test(e))
-                        .concat([
-                            'awesome-typescript-loader?' +
-                                JSON.stringify({
-                                    useBabel: true,
-                                    babelOptions: {
-                                        env: {
-                                            test: {
-                                                plugins: ['istanbul']
-                                            }
-                                        }
-                                    },
-                                    useCache: true,
-                                    cacheDirectory:
-                                        'node_modules/.cache/at-loader'
-                                })
-                        ])
-                });
-            }
-            return l;
-        })
+        loaders: packageJson.nyc.include
+            .map(s => ({
+                test: /\.(jsx?|tsx?)/,
+                include: path.resolve(s),
+                loader: 'istanbul-instrumenter-loader-fix',
+                enforce: 'post',
+                options: {
+                    esModules: true,
+                    fixWebpackSourcePaths: true
+                }
+            }))
+            .concat(config.module.loaders)
     })
 });