|
1 | | -# Redux Detector |
2 | | -[](https://www.npmjs.com/package/redux-detector) |
3 | | -[](https://travis-ci.org/piotr-oles/redux-detector) |
4 | | -[](https://coveralls.io/github/piotr-oles/redux-detector?branch=master) |
| 1 | +# Fork TS Checker Webpack Plugin |
| 2 | +[](https://www.npmjs.com/package/@realytics/fork-ts-checker-webpack-plugin) |
| 3 | +[](https://travis-ci.org/realytics/fork-ts-checker-webpack-plugin) |
| 4 | +[](https://coveralls.io/github/realytics/fork-ts-checker-webpack-plugin?branch=master) |
5 | 5 |
|
6 | | -Redux [enhancer](http://redux.js.org/docs/api/createStore.html) for pure detection of state changes. |
| 6 | +Webpack plugin that runs typescript type checker (and eventually linter) on separate process. |
7 | 7 |
|
8 | 8 | **Warning: API is not stable yet, will be from version 1.0** |
9 | 9 |
|
10 | 10 | ## Installation ## |
11 | | -Redux Detector requires **Redux 3.1.0 or later.** |
| 11 | +This plugin is compatible with **Webpack 2**, **TypeScript 2.1** and **tslint 5.0** |
12 | 12 | ```sh |
13 | | -npm install --save redux-detector |
| 13 | +npm install --save fork-ts-checker-webpack-plugin |
14 | 14 | ``` |
15 | | -This assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like |
16 | | -[Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/) to consume |
17 | | -[CommonJS modules](http://webpack.github.io/docs/commonjs.html). |
18 | | - |
19 | | -To enable Redux Detector, use `createDetectableStore`: |
20 | | -```js |
21 | | -import { createDetectableStore } from 'redux-detector'; |
22 | | -import rootReducer from './reducers/index'; |
23 | | -import rootDetector from './detectors/index'; |
24 | | - |
25 | | -const store = createDetectableStore( |
26 | | - rootReducer, |
27 | | - rootDetector |
28 | | -); |
29 | | -``` |
30 | | - |
31 | | -or if you have more complicated store creation, use `createStore` with `createDetectorEnhancer`: |
| 15 | +Basic webpack config (with [ts-loader](https://github.com/TypeStrong/ts-loader)) |
32 | 16 | ```js |
33 | | -import { createStore } from 'redux'; |
34 | | -import { createDetectorEnhancer } from 'redux-detector'; |
35 | | -import rootReducer from './reducers/index'; |
36 | | -import rootDetector from './detectors/index'; |
37 | | - |
38 | | -const store = createStore( |
39 | | - rootReducer, |
40 | | - createDetectorEnhancer(rootDetector) |
41 | | -); |
| 17 | +var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); |
| 18 | + |
| 19 | +var webpackConfig = { |
| 20 | + context: __dirname, // to automatically find tsconfig.json |
| 21 | + entry: './src/index.ts', |
| 22 | + output: { |
| 23 | + path: 'dist', |
| 24 | + filename: 'index.js' |
| 25 | + }, |
| 26 | + module: { |
| 27 | + rules: [ |
| 28 | + { |
| 29 | + test: /\.tsx?$/, |
| 30 | + include: './src', |
| 31 | + loader: 'ts-loader', |
| 32 | + options: { |
| 33 | + // disable type checker - we will use it in fork plugin |
| 34 | + transpileOnly: true |
| 35 | + } |
| 36 | + } |
| 37 | + ] |
| 38 | + }, |
| 39 | + plugins: [ |
| 40 | + new ForkTsCheckerWebpackPlugin({ |
| 41 | + watch: './src' // optional but improves performance (less stat calls) |
| 42 | + }) |
| 43 | + ] |
| 44 | +}; |
42 | 45 | ``` |
43 | 46 |
|
44 | 47 | ## Motivation ## |
45 | | -Redux Detector [enhancer](http://redux.js.org/docs/api/createStore.html) allows you to use state changes detectors with redux. |
46 | | -Detector is a simple and pure function which compares two states and returns action or list of actions for some states configurations. |
47 | | -It can be used for reacting on particular state transitions. |
48 | | -```typescript |
49 | | -type Detector<S> = (prevState: S | undefined, nextState: S) => ActionLike | ActionLike[] | void; |
50 | | -``` |
51 | | - |
52 | | -For example detector that checks if number of rows exceed 100 looks like this: |
53 | | -```js |
54 | | -function rowsLimitExceededDetector(prevState, nextState) { |
55 | | - if (prevState.rows.length <= 100 && nextState.rows.length > 100) { |
56 | | - return { type: ROWS_LIMIT_EXCEEDED }; |
57 | | - } |
58 | | -} |
59 | | -``` |
60 | | -You can also return array of actions or nothing (undefined). |
61 | | -Thanks to detectors purity they are predictable and easy to test. There is no problem with features like time-travel, etc. |
62 | | - |
63 | | -## Composition ## |
64 | | -Redux store can handle only one detector (and one reducer). But don't worry - you can combine and reduce them. To do this, use |
65 | | -`combineDetectors` and `reduceDetectors` functions. |
66 | | -```js |
67 | | -// ./detectors/rootDetector.js |
68 | | -import { combineDetectors, reduceDetectors } from 'redux-detector'; |
69 | | -import { fooDetector } from './fooDetector'; |
70 | | -import { barDetector } from './barDetector'; |
71 | | -import { anotherDetector } from './anotherDetector'; |
72 | | - |
73 | | -// our state has shape: |
74 | | -// { |
75 | | -// foo: [], |
76 | | -// bar: 1 |
77 | | -// } |
78 | | -// |
79 | | -// We want to bind `fooDetector` and `anotherDetector` to `state.foo` branch (they should run in sequence) |
80 | | -// and also `barDetector` to `state.bar` branch. |
81 | | - |
82 | | -export default combineDetectors({ |
83 | | - foo: reduceDetectors( |
84 | | - fooDetector, |
85 | | - anotherDetector |
86 | | - ), |
87 | | - bar: barDetector |
88 | | -}); |
89 | | -``` |
90 | | - |
91 | | -Another way to re-use local state detectors is to mount them with `mountDetector` function. Combine detectors works only on objects level - |
92 | | -if you want to use detectors on more nested data, you should mount them. With factory pattern it becomes very elastic. |
93 | | -```js |
94 | | -// ./detectors/limitExceedDetector.js |
95 | | -export function createLimitExceedDetector(limit, action) { |
96 | | - return function limitExceedDetector(prevState, nextState) { |
97 | | - if (prevState <= limit && nextState > limit) { |
98 | | - return action; |
99 | | - } |
100 | | - } |
101 | | -} |
102 | | - |
103 | | -// ./detectors/rowsLimitExceedDetector.js |
104 | | -import { mountDetector } from 'redux-detector'; |
105 | | -import { createLimitExceeedDetector } from './limitExceedDetector'; |
106 | | - |
107 | | -export const rowsLimitExceedDetector = mountDetector( |
108 | | - state => state.rows.length, |
109 | | - createLimitExceedDetector(100, ROWS_LIMIT_EXCEEDED) |
110 | | -); |
111 | | -``` |
112 | | -Of course examples above are very trivial, but you can use it to solve more common problems |
113 | | -(you can for example schedule resource fetch on parameters change). |
114 | | - |
115 | | -## Code Splitting ## |
116 | | -Redux Detector provides `replaceDetector` method on `DetectableStore` interface (store created by Redux Detector). It's similar to |
117 | | -`replaceReducer` - it changes detector and dispatches `{ type: '@@detector/INIT' }`. |
118 | | - |
119 | | -## Typings ## |
120 | | -If you are using [TypeScript](https://www.typescriptlang.org/), you don't have to install typings - they are provided in npm package. |
| 48 | +TODO |
| 49 | + |
| 50 | +## Options ## |
| 51 | +| option | type | description | |
| 52 | +|--------|------|-------------| |
| 53 | +|**tsconfig**| `string` | Path to tsconfig.json file. If not set, plugin will use `path.resolve(compiler.context, './tsconfig.json')`. | |
| 54 | +|**tslint**| `string` or `false` | Path to tslint.json file. If not set, plugin will use `path.resolve(compiler.context, './tslint.json')`. If `false`, disables tslint.| |
| 55 | +|**watch**| `string` or `string[]` | Files or directories to watch be service. Not necessary but improves performance (reduces number of `fs.stat` calls). | |
| 56 | +|**blockEmit**| `boolean` | If `true`, plugin will block emit until check will be done. It's good setting for ci/production build because webpack will return code != 0 if there are type/lint errors. Default: `false`. | |
| 57 | +|**ignoreDiagnostics**| `number[]` | List of typescript diagnostic codes to ignore. | |
| 58 | +|**ignoreLints**| `string[]` | List of tslint rule names to ignore. | |
| 59 | +|**colors**| `boolean` | If `false`, disables colors for logger. Default: `true`. | |
| 60 | +|**logger**| `LoggerInterface` | Logger instance. It should be object that implements method: `error`, `warn`, `info`. Default: `console`.| |
| 61 | +|**silent**| `boolean` | If `true`, logger will not be used. Default: `false`.| |
121 | 62 |
|
122 | 63 | ## License ## |
123 | 64 | MIT |
0 commit comments