Merge from vuejs-templates/webpack#develop preserving PWA configuration

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 docs/_book
+test/

README.md

@@ -1,18 +1,19 @@
 # vue-pwa-boilerplate
 
-> A full-featured [PWA](https://developers.google.com/web/progressive-web-apps/) template with webpack, hot-reload, lint-on-save, unit testing & css extraction.
+> A full-featured [PWA](https://developers.google.com/web/progressive-web-apps/) Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.
+
+> This template is Vue 2.0 compatible. For Vue 1.x use this command: `vue init webpack#1.0 my-project`
 
 ## Documentation
 
 - This template builds on top of the main webpack template, so please refer to the [webpack template docs](http://vuejs-templates.github.io/webpack).
-
-- Check out the [official Vue.js guide](http://vuejs.org/guide/) for general information about Vue that is not specific to this template.
+- [For Vue 2.0](http://vuejs.org/guide/): general information about how to work with Vue, not specific to this template
 
 ## Usage
 
-This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ or [yarn](https://yarnpkg.com) for a more efficient dependency tree.**
+This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.**
 
-```bash
+``` bash
 $ npm install -g vue-cli
 $ vue init pwa my-project
 $ cd my-project
@@ -57,14 +58,14 @@ See ["Configuring your Web server to prevent caching"](docs/prevent_caching.md)
   - JavaScript minified with [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony).
   - HTML minified with [html-minifier](https://github.com/kangax/html-minifier).
   - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano).
-  - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets.
+  - Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets.
   - Use `npm run build --report`to build with bundle size analytics.
   - Generates a Service Worker for offline caching your static assets using [sw-precache-webpack-plugin](https://www.npmjs.com/package/sw-precache-webpack-plugin)
 
-- `npm run unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack).
+- `npm run unit`: Unit tests run in [JSDOM](https://github.com/tmpvar/jsdom) with [Jest](https://facebook.github.io/jest/), or in PhantomJS with Karma + Mocha + karma-webpack.
   - Supports ES2015+ in test files.
   - Supports all webpack loaders.
-  - Easy mock injection.
+  - Easy mocking.
 
 - `npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/).
   - Run tests in multiple browsers in parallel.
@@ -76,7 +77,7 @@ See ["Configuring your Web server to prevent caching"](docs/prevent_caching.md)
 
 You can fork this repo to create your own boilerplate, and use it with `vue-cli`:
 
-```bash
+``` bash
 vue init username/repo my-project
 ```
 

docs/README.md

@@ -1,6 +1,6 @@
 # Introduction
 
-This [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](http://vuejs.github.io/vue-loader/index.html) for common workflow recipes.
+This [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](https://vue-loader.vuejs.org/) for common workflow recipes.
 
 If you just want to try out `vue-loader` or whip out a quick prototype, use the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template instead.
 

docs/backend.md

@@ -5,18 +5,37 @@ If you are building a purely-static app (one that is deployed separately from th
 Let's take a look at the default `config/index.js`:
 
 ``` js
+// config/index.js
 'use strict'
-
 const path = require('path')
 
 module.exports = {
+  dev: {
+    / Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost',
+    port: 8080, 
+
+    // skipping other options as they are only convenience features
+  },
   build: {
-    index: path.resolve(__dirname, 'dist/index.html'),
-    assetsRoot: path.resolve(__dirname, 'dist'),
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    productionSourceMap: true
+
+    productionSourceMap: true,
+
+    // skipping the rest ...
   },
+//TODO: the rest of the content is not on webpack template. is it ok?
   dev: {
     port: 8080,
     proxyTable: {}

docs/commands.md

@@ -24,11 +24,12 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 
 ### `npm run unit`
 
-> Run unit tests in PhantomJS with [Karma](https://karma-runner.github.io/). See [Unit Testing](unit.md) for more details.
+> Run unit tests in JSDOM with [Jest](https://facebook.github.io/jest/docs/getting-started.html). See [Unit Testing](unit.md) for more details.
 
 - Supports ES2015+ in test files.
+TODO: following line is not present on webpack template. is it ok?
 - Supports all webpack loaders.
-- Easy [mock injection](http://vuejs.github.io/vue-loader/en/workflow/testing-with-mocks.html).
+- Easy [mocking](https://facebook.github.io/jest/docs/mock-functions.html).
 
 ### `npm run e2e`
 
@@ -38,3 +39,7 @@ All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/sc
 - Works with one command out of the box:
   - Selenium and chromedriver dependencies automatically handled.
   - Automatically spawns the Selenium server.
+
+### `npm run lint`
+
+> Runs eslint and reports any linting errors in your code. See [Linter Configuration](linter.md)

docs/e2e.md

@@ -10,7 +10,7 @@ Let's take a look at the files in the `test/e2e` directory:
 
 - `nightwatch.conf.js`
 
-  Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/guide#settings-file) for more details.
+  Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/gettingstarted#settings-file) for more details.
 
 - `custom-assertions/`
 

docs/env.md

@@ -47,5 +47,5 @@ As we can see, `test.env` inherits the `dev.env` and the `dev.env` inherits the
 It is simple to use the environment variables in your code. For example:
 
 ```js
-Vue.config.debug = process.env.DEBUG_MODE
+Vue.config.productionTip = process.env.NODE_ENV === 'production'
 ```

docs/linter.md

@@ -1,15 +1,35 @@
 # Linter Configuration
 
-This boilerplate uses [ESLint](http://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
+This boilerplate uses [ESLint](https://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
+
+## eslint-plugin-vue
+
+We always add [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) as well, which comes with a whole bunch of helpful rules to write consistent Vue components - it can also lint templates!
+
+You can find an overview of all the available rules on [github](https://github.com/vuejs/eslint-plugin-vue#gear-configs). We chose to add the `essential` configs, but we recommend to switch to the bigger `strongly-recommended` or `recommended` rulesets once you are familiar with them.
+
+## Customizing
 
 If you are not happy with the default linting rules, you have several options:
 
 1. Overwrite individual rules in `.eslintrc.js`. For example, you can add the following rule to enforce semicolons instead of omitting them:
 
   ``` js
+  // .eslintrc.js
   "semi": [2, "always"]
   ```
 
 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).
 
-3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](http://eslint.org/docs/rules/) for more details.
+3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](https://eslint.org/docs/rules/) for more details.
+
+## Fixing Linting Errors
+
+You can run the following command to let eslint fix any errors it finds (if it can - not all errors are fixable like this):
+
+```
+npm run lint -- --fix
+```
+
+*(The `--` in the middle is necessary to ensure the `--fix` option is passdd to `eslint`, not to `npm`. It can be omitted whne using yarn)*
+

docs/pre-processors.md

@@ -1,6 +1,6 @@
 # Pre-Processors
 
-This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS:
+This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:
 
 ``` bash
 npm install sass-loader node-sass --save-dev
@@ -20,19 +20,23 @@ Once installed, you can use the pre-processors inside your `*.vue` components us
 
 ### A note on SASS syntax
 
-- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolones).
+- `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolons).
 - `lang="sass"` corresponds to the indentation-based syntax.
 
 ### PostCSS
 
-Styles in `*.vue` files are piped through PostCSS by default, so you don't need to use a specific loader for it. You can simply add PostCSS plugins you want to use in `build/webpack.base.conf.js` under the `vue` block:
+Styles in `*.vue` files and style files (`*.css`, `*.scss` etc) are piped through PostCSS by default, so you don't need to use a specific loader for it.
+
+You can simply add PostCSS plugins you want to use to the `.postcssrc.js`file in your project's root directory:
 
 ``` js
-// build/webpack.base.conf.js
+// https://github.com/michael-ciniawsky/postcss-load-config
+
 module.exports = {
-  // ...
-  vue: {
-    postcss: [/* your plugins */]
+  "plugins": {
+    // to edit target browsers: use "browserslist" field in package.json
+    "postcss-import": {},
+    "autoprefixer": {}
   }
 }
 ```

docs/proxy.md

@@ -31,7 +31,7 @@ In addition to static urls you can also use glob patterns to match URLs, e.g. `/
 
 ``` js
 proxyTable: {
-  '*': {
+  '**': {
     target: 'http://jsonplaceholder.typicode.com',
     filter: function (pathname, req) {
       return pathname.match('^/api') && req.method === 'GET'

docs/static.md

@@ -1,14 +1,14 @@
-# Handing Static Assets
+# Handling Static Assets
 
 You will notice in the project structure we have two directories for static assets: `src/assets` and `static/`. What is the difference between them?
 
 ### Webpacked Assets
 
 To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `<img src="./logo.png">` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**.
 
-Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
+Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
 
-Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, along side other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
+Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, alongside other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
 
 ### Asset Resolving Rules
 
@@ -41,7 +41,7 @@ In comparison, files in `static/` are not processed by Webpack at all: they are
 As an example, with the following default values:
 
 ``` js
-// config.js
+// config/index.js
 module.exports = {
   // ...
   build: {

docs/structure.md

@@ -17,20 +17,26 @@
 ├── static/                     # pure static assets (directly copied)
 ├── test/
 │   └── unit/                   # unit tests
-│   │   ├── specs/              # test spec files
-│   │   ├── index.js            # test build entry file
-│   │   └── karma.conf.js       # test runner config file
+│   │   ├── specs/              # test spec files
+│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
+│   │   ├── index.js            # test build entry file
+│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
+│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
+│   │   ├── setup.js            # file that runs before Jest runs your unit tests
 │   └── e2e/                    # e2e tests
 │   │   ├── specs/              # test spec files
 │   │   ├── custom-assertions/  # custom assertions for e2e tests
 │   │   ├── runner.js           # test runner script
 │   │   └── nightwatch.conf.js  # test runner config file
 ├── .babelrc                    # babel config
-├── .postcssrc.js               # postcss config
+├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
 ├── .eslintrc.js                # eslint config
-├── .editorconfig               # editor config
+├── .eslintignore               # eslint ignore rules
+├── .gitignore                  # sensible defaults for gitignore
+├── .postcssrc.js               # postcss config
 ├── index.html                  # index.html template
-└── package.json                # build scripts and dependencies
+├── package.json                # build scripts and dependencies
+└── README.md                   # Default README file
 ```
 
 ### `build/`

docs/unit.md

@@ -1,6 +1,26 @@
 # Unit Testing
 
-An overview of the tools used by this boilerplate for unit testing:
+This project offers two options for unit testing:
+
+1. Jest
+2. Karma and Mocha.
+
+
+## Jest
+
+- [Jest](https://facebook.github.io/jest/): the test runner that launches JSDOM runs the tests and reports the results to us.
+
+### Files
+
+- `setup.js`
+
+  Jest runs this file before it runs the unit tests. It sets the Vue production tip to false.
+
+### Mocking Dependencies
+
+The Jest boilerplate comes with the ability to mock dependencies. See the [mock functions guide](https://facebook.github.io/jest/docs/mock-functions.html) for more details.
+
+## Karma and Mocha
 
 - [Karma](https://karma-runner.github.io/): the test runner that launches browsers, runs the tests and reports the results to us.
 - [karma-webpack](https://github.com/webpack/karma-webpack): the plugin for Karma that bundles our tests using Webpack.
@@ -10,7 +30,7 @@ An overview of the tools used by this boilerplate for unit testing:
 
 Chai and Sinon are integrated using [karma-sinon-chai](https://github.com/kmees/karma-sinon-chai), so all Chai interfaces (`should`, `expect`, `assert`) and `sinon` are globally available in test files.
 
-And the files:
+### Files
 
 - `index.js`
 
@@ -24,10 +44,10 @@ And the files:
 
   This is the Karma configuration file. See [Karma docs](https://karma-runner.github.io/) for more details.
 
-## Running Tests in More Browsers
+### Running Tests in More Browsers
 
 You can run the tests in multiple real browsers by installing more [karma launchers](https://karma-runner.github.io/1.0/config/browsers.html) and adjusting the `browsers` field in `test/unit/karma.conf.js`.
 
-## Mocking Dependencies
+### Mocking Dependencies
 
-This boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).
+The Karma unit test boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).