From 82893863d019b631c88d13af0d3fcc67441db546 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Sat, 11 Feb 2017 16:35:50 -0500 Subject: [PATCH 001/119] sw-precache-webpack-plugin, SW registration, manifest.json --- .../react-scripts/config/webpack.config.prod.js | 6 ++++++ packages/react-scripts/package.json | 1 + packages/react-scripts/template/public/index.html | 8 ++++++++ .../react-scripts/template/public/manifest.json | 13 +++++++++++++ 4 files changed, 28 insertions(+) create mode 100644 packages/react-scripts/template/public/manifest.json diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 86d87d39211..a091f4bcb09 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -18,6 +18,7 @@ var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var url = require('url'); var paths = require('./paths'); var getClientEnvironment = require('./env'); +var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); // @remove-on-eject-begin // `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174 @@ -273,6 +274,11 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json' + }), + new SWPrecacheWebpackPlugin({ + dontCacheBustUrlsMatching: /\.\w{8}\./, + filename: 'service-worker.js', + staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/] }) ], // Some libraries import Node modules but don't use them in the browser. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 371b952c8c5..040ad859351 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -59,6 +59,7 @@ "recursive-readdir": "2.1.0", "strip-ansi": "3.0.1", "style-loader": "0.13.1", + "sw-precache-webpack-plugin": "^0.9.0", "url-loader": "0.5.7", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html index aab5e3b00ce..05ab1feb693 100644 --- a/packages/react-scripts/template/public/index.html +++ b/packages/react-scripts/template/public/index.html @@ -3,6 +3,7 @@ + + diff --git a/packages/react-scripts/template/public/manifest.json b/packages/react-scripts/template/public/manifest.json new file mode 100644 index 00000000000..919f85c9d30 --- /dev/null +++ b/packages/react-scripts/template/public/manifest.json @@ -0,0 +1,13 @@ +{ + "short_name": "React App", + "name": "React App", + "icons": [ + { + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + } + ], + "start_url": "./", + "display": "standalone" +} From 8ec99b6fffcadfd865788f84e41bf51152073fa1 Mon Sep 17 00:00:00 2001 From: Blaine Kasten Date: Sat, 11 Feb 2017 17:05:54 -0600 Subject: [PATCH 002/119] Suggest jest-enzyme for simplifying test matchers (#994) * Suggest jest-enzyme for simplifying test matchers * Update README.md * Update README.md --- packages/react-scripts/template/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c49da3e8d34..c30fb9d13ee 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -867,6 +867,20 @@ it('renders welcome message', () => { All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. +Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme. + +```js +expect(wrapper).toContainReact(welcome) +``` + +To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. + +```js +// src/setupTests.js +import 'jest-enzyme'; +``` + + ### Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566). From 1fe6f5502c1d8d96e943f2a2e537e02cf6977c6b Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Sun, 12 Feb 2017 02:38:59 +0200 Subject: [PATCH 003/119] Add SASS support documentation #1007 (#1008) * Add SASS support documentation #1007 * Change SASS section title to more generic label * Fix link in Table of Contents * Chain build-css with watch-css script, fix typos * Update Sass and Less naming style * Fix wording, remove offensive words * Slightly rewite --- packages/react-scripts/template/README.md | 47 +++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c30fb9d13ee..00e4f248131 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) +- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Changing the HTML](#changing-the-html) @@ -353,6 +354,52 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. +## Adding a CSS Preprocessor (Sass, Less etc.) + +Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `` and `` components, we recommend creating a `