├── .gitignore
├── LICENSE
├── README.md
├── benchmark
└── index.js
├── build
└── global
│ ├── react-derive.js
│ └── react-derive.min.js
├── examples
├── component-demo-es6
│ ├── app.css
│ ├── app.js
│ ├── demo.html
│ └── index.html
├── component-demo
│ ├── app.css
│ ├── app.js
│ ├── demo.html
│ └── index.html
├── decorator-demo-es6
│ ├── app.css
│ ├── app.js
│ ├── demo.html
│ └── index.html
├── decorator-demo
│ ├── app.css
│ ├── app.js
│ ├── demo.html
│ └── index.html
├── global.css
├── index.html
├── webpack.build.config.js
└── webpack.config.js
├── package-npm.js
├── package.json
├── src
├── __tests__
│ └── index.spec.js
└── index.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | build/npm
3 | node_modules/
4 | npm-debug.log
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Gil Birman
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-derive
2 |
3 | For **organizing** and **optimizing** rendering of react components
4 | that rely on derived data. Works by wrapping your component in a HoC.
5 | For example, lets say your
6 | component shows the result of adding two numbers.
7 |
8 | export default class Add extends Component {
9 | render() {
10 | const {a,b,fontSize} = this.props;
11 | return a + b = {a+b}
12 | }
13 | }
14 |
15 | We can move the calculation of `a+b` to a decorator named `@derive`
16 | where we'll create the *deriver* function named `sum`. And because we
17 | named the function `sum`, the deriver's result will be passed
18 | into the `Add` component via a prop likewise named `sum`.
19 |
20 | @derive({
21 | sum({a,b}) { return a+b }
22 | })
23 | export default class Add extends Component {
24 | render() {
25 | const {sum,fontSize} = this.props;
26 | return a + b = {sum}
27 | }
28 | }
29 |
30 | Note that
31 |
32 | - The first argument to a *deriver* function is `newProps`.
33 | - The second argument is the previously derived props object
34 | (in this case it would look something like `{a:5,b:3,sum:8}`)
35 | - The value of `this` allows you to reference the result of other
36 | derivers like `this.sum()`.
37 |
38 | But wait, every time the component renders, `sum` will recalculate even
39 | if `a` and `b` didn't change. To optimize, we can memoize the calculation with `@track`
40 | so when the `fontSize` prop changes `sum` won't be recalculated.
41 |
42 | @derive({
43 | @track('a', 'b')
44 | sum({a,b}) { return a+b }
45 | })
46 | export default class Add extends Component {
47 | render() {
48 | const {sum,fontSize} = this.props;
49 | return a + b = {sum}
50 | }
51 | }
52 |
53 | We supply args `'a'` and `'b'` to the `@track`
54 | decorator to indicate that the `sum` deriver only
55 | cares about those two props. If `fontSize` changes,
56 | `sum` won't recalculate.
57 |
58 | -------
59 |
60 | This project is similar to [reselect](https://github.com/faassen/reselect)
61 | for redux. However, while reselect helps manage derived data from
62 | global state, react-derive manages derived data from props.
63 |
64 | ## `@derive` as a decorator
65 |
66 | You can use `this` object to depend on other derived props:
67 |
68 | @derive({
69 | @track('taxPercent')
70 | tax({taxPercent}) {
71 | return this.subtotal() * (taxPercent / 100);
72 | },
73 |
74 | @track('items')
75 | subtotal({items}) {
76 | return items.reduce((acc, item) => acc + item.value, 0);
77 | },
78 |
79 | @track('taxPercent')
80 | total({taxPercent}) {
81 | return this.subtotal() + this.tax();
82 | }
83 | })
84 | class Total extends React.Component {
85 | render() {
86 | return { this.props.total }
87 | }
88 | }
89 |
90 | See the [reselect version of the example above](https://github.com/faassen/reselect#example)
91 |
92 | ## `Derive` as a Component
93 |
94 | `options` prop is the same as first argument to `@derive`.
95 | The child is a function that accepts the derived props object
96 | as it's first argument:
97 |
98 |
99 | {({tax, subtotal, total}) =>
100 |
101 | tax: {tax}
102 | subtotal: {subtotal}
103 | total: {total}
104 |
105 | }
106 |
107 | ## ES6 support
108 |
109 | Using ES7 decorators is in fact optional. If you want to stick with
110 | ES6 constructs, it's easy to do:
111 |
112 | export const Add =
113 | derive({
114 | sum: track('a','b')
115 | (function({a,b}) { return a+b })
116 | }) // <--- function returned...
117 | (class Add extends Component { // <--- immediately invoked by passing in class
118 | render() {
119 | const {sum,fontSize} = this.props;
120 | return a + b = {sum}
121 | }
122 | });
123 |
124 | See the `examples/` dir of this repo for additional examples.
125 |
126 | ## install + import
127 |
128 | npm i react-derive -S
129 |
130 | then:
131 |
132 | import {Derive, derive, track} from 'react-derive';
133 |
134 | or when included via script tag it's available as the global variable `ReactDerive`:
135 |
136 | const {Derive, derive, track} = ReactDerive;
137 |
138 | ## [documentation](http://gilbox.github.io/react-derive/index.js.html)
139 |
140 | ## examples
141 |
142 | - decorator demo: [source](https://github.com/gilbox/react-derive/blob/master/examples/decorator-demo/app.js) - [live demo](http://gilbox.github.io/react-derive/examples/decorator-demo/demo.html)
143 | - component demo: [source](https://github.com/gilbox/react-derive/blob/master/examples/component-demo/app.js) - [live demo](http://gilbox.github.io/react-derive/examples/component-demo/demo.html)
144 | - [elegant-react-hot-demo](https://github.com/gilbox/elegant-react-hot-demo) (still a WIP)
145 |
--------------------------------------------------------------------------------
/benchmark/index.js:
--------------------------------------------------------------------------------
1 | import { derive, track } from '../src/index';
2 | import React, { Component } from 'react';
3 |
4 | const deriveOptions = {
5 | tax: track('taxPercent')
6 | (function({taxPercent}) {
7 | return this.subtotal() * (taxPercent / 100);
8 | }),
9 |
10 | subtotal: track('items')
11 | (function({items}) {
12 | return items.reduce((acc, item) => acc + item, 0);
13 | }),
14 |
15 | total: track('taxPercent')
16 | (function({taxPercent}) {
17 | return this.subtotal() + this.tax();
18 | })
19 | };
20 |
21 | const Calculated =
22 | derive({
23 | tax: track('taxPercent')
24 | (function({taxPercent}) {
25 | return this.subtotal() * (taxPercent / 100);
26 | }),
27 |
28 | subtotal: track('items')
29 | (function({items}) {
30 | return items.reduce((acc, item) => acc + item, 0);
31 | }),
32 |
33 | total: track('taxPercent')
34 | (function({taxPercent}) {
35 | return this.subtotal() + this.tax();
36 | })
37 | })
38 | (class Calculated extends Component {
39 | render() {
40 | const {tax,subtotal,total} = this.props;
41 |
42 | return
43 | tax: {tax}
44 | subtotal: {subtotal}
45 | total: {total}
46 |
47 | }
48 | });
49 |
50 | const t = Date.now();
51 |
52 | for (let j = 0; j < 10; j++) {
53 | const taxPercent = Math.random()*10;
54 | const items = [10,55,99,23,56].map(x => Math.random() * x);
55 |
56 | for (let i = 0; i < 1000; i++) {
57 | React.renderToStaticMarkup( acc + item, 0);
15 | }),
16 |
17 | total: track('taxPercent')
18 | (function({taxPercent}) {
19 | return this.subtotal() + this.tax();
20 | })
21 | };
22 |
23 | class App extends Component {
24 | constructor(props) {
25 | super(props);
26 | this.state = {
27 | taxPercent: 5,
28 | items: [10,55,99,23,56]
29 | };
30 | }
31 |
32 | render() {
33 | const {taxPercent,items} = this.state;
34 |
35 | return
36 |
37 |
38 | Tax Percent:
39 |
44 |
45 |
46 | {({tax, subtotal, total}) =>
47 |
48 |
49 | tax: {tax}
50 | subtotal: {subtotal}
51 | total: {total}
52 |
53 |
54 | }
55 |
56 |
Demo
4 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/component-demo-es6/index.html:
--------------------------------------------------------------------------------
1 |
2 | Demo
3 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/component-demo/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Georgia;
3 | padding: 50px;
4 | margin: 0; }
5 | ul { padding: 0; }
6 | li, button {
7 | border-radius: 3px;
8 | border: 1px solid grey;
9 | width: 100%;
10 | box-sizing: border-box;
11 | padding: 10px;
12 | cursor: pointer;
13 | list-style: none;
14 | text-align: center;
15 | margin-bottom: 30px;
16 |
17 | &:hover {
18 | border: 1px solid blue;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/examples/component-demo/app.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Derive, track, globalOptions} from 'react-derive';
3 |
4 | globalOptions.debug = true;
5 |
6 | const deriveOptions = {
7 | @track('taxPercent')
8 | tax({taxPercent}) {
9 | return this.subtotal() * (taxPercent / 100);
10 | },
11 |
12 | @track('items')
13 | subtotal({items}) {
14 | return items.reduce((acc, item) => acc + item, 0);
15 | },
16 |
17 | @track('taxPercent')
18 | total({taxPercent}) {
19 | return this.subtotal() + this.tax();
20 | }
21 | };
22 |
23 | class App extends Component {
24 | constructor(props) {
25 | super(props);
26 | this.state = {
27 | taxPercent: 5,
28 | items: [10,55,99,23,56]
29 | };
30 | }
31 |
32 | render() {
33 | const {taxPercent,items} = this.state;
34 |
35 | return
36 |
37 |
38 | Tax Percent:
39 |
44 |
45 |
46 | {({tax, subtotal, total}) =>
47 |
48 |
49 | tax: {tax}
50 | subtotal: {subtotal}
51 | total: {total}
52 |
53 |
54 | }
55 |
56 |
Demo
4 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/component-demo/index.html:
--------------------------------------------------------------------------------
1 |
2 | Demo
3 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/decorator-demo-es6/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Georgia;
3 | padding: 50px;
4 | margin: 0; }
5 | ul { padding: 0; }
6 | li, button {
7 | border-radius: 3px;
8 | border: 1px solid grey;
9 | width: 100%;
10 | box-sizing: border-box;
11 | padding: 10px;
12 | cursor: pointer;
13 | list-style: none;
14 | text-align: center;
15 | margin-bottom: 30px;
16 |
17 | &:hover {
18 | border: 1px solid blue;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/examples/decorator-demo-es6/app.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {derive, track, globalOptions} from 'react-derive';
3 |
4 | globalOptions.debug = true;
5 |
6 | const Calculated =
7 | derive({
8 | tax: track('taxPercent')
9 | (function({taxPercent}) {
10 | return this.subtotal() * (taxPercent / 100);
11 | }),
12 |
13 | subtotal: track('items')
14 | (function({items}) {
15 | return items.reduce((acc, item) => acc + item, 0);
16 | }),
17 |
18 | total: track('taxPercent')
19 | (function({taxPercent}) {
20 | return this.subtotal() + this.tax();
21 | })
22 | })
23 | (class Calculated extends Component {
24 | render() {
25 | const {tax,subtotal,total} = this.props;
26 |
27 | return
28 | tax: {tax}
29 | subtotal: {subtotal}
30 | total: {total}
31 |
32 | }
33 | });
34 |
35 | class App extends Component {
36 | constructor(props) {
37 | super(props);
38 | this.state = {
39 | taxPercent: 5,
40 | items: [10,55,99,23,56]
41 | };
42 | }
43 |
44 | render() {
45 | const {taxPercent,items} = this.state;
46 |
47 | return
48 |
49 |
50 | Tax Percent:
51 |
56 |
57 |
60 | }
61 | }
62 |
63 | React.render(Demo
4 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/decorator-demo-es6/index.html:
--------------------------------------------------------------------------------
1 |
2 | Demo
3 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/decorator-demo/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Georgia;
3 | padding: 50px;
4 | margin: 0; }
5 | ul { padding: 0; }
6 | li, button {
7 | border-radius: 3px;
8 | border: 1px solid grey;
9 | width: 100%;
10 | box-sizing: border-box;
11 | padding: 10px;
12 | cursor: pointer;
13 | list-style: none;
14 | text-align: center;
15 | margin-bottom: 30px;
16 |
17 | &:hover {
18 | border: 1px solid blue;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/examples/decorator-demo/app.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {derive, track, globalOptions} from 'react-derive';
3 |
4 | globalOptions.debug = true;
5 |
6 | @derive({
7 | @track('taxPercent')
8 | tax({taxPercent}) {
9 | return this.subtotal() * (taxPercent / 100);
10 | },
11 |
12 | @track('items')
13 | subtotal({items}) {
14 | return items.reduce((acc, item) => acc + item, 0);
15 | },
16 |
17 | @track('taxPercent')
18 | total({taxPercent}) {
19 | return this.subtotal() + this.tax();
20 | }
21 | })
22 | class Calculated extends Component {
23 | render() {
24 | const {tax,subtotal,total} = this.props;
25 |
26 | return
27 | tax: {tax}
28 | subtotal: {subtotal}
29 | total: {total}
30 |
31 | }
32 | }
33 |
34 | class App extends Component {
35 | constructor(props) {
36 | super(props);
37 | this.state = {
38 | taxPercent: 5,
39 | items: [10,55,99,23,56]
40 | };
41 | }
42 |
43 | render() {
44 | const {taxPercent,items} = this.state;
45 |
46 | return
47 |
48 |
49 | Tax Percent:
50 |
55 |
56 |
59 | }
60 | }
61 |
62 | React.render(Demo
4 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/decorator-demo/index.html:
--------------------------------------------------------------------------------
1 |
2 | Demo
3 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/global.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Helvetica Neue", Arial;
3 | font-weight: 200;
4 | }
5 |
6 | h1, h2, h3 {
7 | font-weight: 100;
8 | }
9 |
10 | a {
11 | color: hsl(200, 50%, 50%);
12 | }
13 |
14 | a.active {
15 | color: hsl(20, 50%, 50%);
16 | }
17 |
18 | .breadcrumbs a {
19 | text-decoration: none;
20 | }
21 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 | Demo
3 | Demo
6 |
12 |
--------------------------------------------------------------------------------
/examples/webpack.build.config.js:
--------------------------------------------------------------------------------
1 | var config = require('./webpack.config');
2 |
3 | config.output.path = '../react-derive_gh-pages/examples/js';
4 |
5 | module.exports = config;
6 |
--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var path = require('path');
3 | var webpack = require('webpack');
4 |
5 | function isDirectory(dir) {
6 | return fs.lstatSync(dir).isDirectory();
7 | }
8 |
9 | module.exports = {
10 |
11 | devtool: 'inline-source-map',
12 |
13 | entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
14 | var isDraft = dir.charAt(0) === '_';
15 |
16 | if (!isDraft && isDirectory(path.join(__dirname, dir)))
17 | entries[dir] = path.join(__dirname, dir, 'app.js');
18 |
19 | return entries;
20 | }, {}),
21 |
22 | output: {
23 | path: 'examples/__build__',
24 | filename: '[name].js',
25 | chunkFilename: '[id].chunk.js',
26 | publicPath: '/__build__/'
27 | },
28 |
29 | module: {
30 | loaders: [
31 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0' }
32 | ]
33 | },
34 |
35 | resolve: {
36 | alias: {
37 | 'react-derive': path.resolve(__dirname + '../../src/')
38 | }
39 | },
40 |
41 | plugins: [
42 | new webpack.DefinePlugin({
43 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
44 | })
45 | ]
46 |
47 | };
48 |
--------------------------------------------------------------------------------
/package-npm.js:
--------------------------------------------------------------------------------
1 | var p = require('./package');
2 |
3 | p.main='lib';
4 | p.scripts=p.devDependencies=undefined;
5 |
6 | module.exports = p;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-derive",
3 | "version": "0.1.1",
4 | "description": "Derived data for your memoizing pleasure",
5 | "main": "src/",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/gilbox/react-derive.git"
9 | },
10 | "homepage": "https://github.com/gilbox/react-derive",
11 | "bugs": "https://github.com/gilbox/react-derive/issues",
12 | "scripts": {
13 | "build-global": "rm -rf build/global && NODE_ENV=production webpack src/index.js build/global/react-derive.js && NODE_ENV=production COMPRESS=1 webpack src/index.js build/global/react-derive.min.js && echo \"gzipped, the global build is `gzip -c build/global/react-derive.min.js | wc -c` bytes\"",
14 | "build-npm": "rm -rf build/npm && babel -d build/npm/lib ./src --stage 0 && cp README.md build/npm && find -X build/npm/lib -type d -name __tests__ | xargs rm -rf && node -p 'p=require(\"./package-npm\");JSON.stringify(p,null,2)' > build/npm/package.json",
15 | "examples": "rm -rf examples/js && webpack-dev-server --config examples/webpack.config.js --content-base examples",
16 | "examples-build": "rm -rf ../react-derive_gh-pages/examples/ && cp -R examples/ ../react-derive_gh-pages/examples/ && webpack --config examples/webpack.build.config.js",
17 | "test": "BABEL_JEST_STAGE=0 jest",
18 | "publish": "npm publish ./build/npm",
19 | "prepush": "npm run examples-build",
20 | "docs": "docker -i src -I -o ../react-derive_gh-pages/ -s disable -c pastie"
21 | },
22 | "authors": [
23 | "Gil Birman (http://gilbox.me/)"
24 | ],
25 | "jest": {
26 | "scriptPreprocessor": "/node_modules/babel-jest",
27 | "testFileExtensions": [
28 | "es6",
29 | "js"
30 | ],
31 | "moduleFileExtensions": [
32 | "js",
33 | "json",
34 | "es6"
35 | ],
36 | "unmockedModulePathPatterns": [
37 | "react"
38 | ]
39 | },
40 | "license": "MIT",
41 | "devDependencies": {
42 | "babel": "^5.6.14",
43 | "babel-core": "^5.6.18",
44 | "babel-jest": "^5.3.0",
45 | "babel-loader": "^5.3.1",
46 | "docker": "^0.2.14",
47 | "immutable": "^3.7.3",
48 | "jest-cli": "^0.4.16",
49 | "node-libs-browser": "^0.5.2",
50 | "react": "^0.13.3",
51 | "webpack": "^1.10.1",
52 | "webpack-dev-server": "^1.10.1"
53 | },
54 | "peerDependencies": {},
55 | "dependencies": {},
56 | "tags": [
57 | "react",
58 | "react-native",
59 | "functional"
60 | ],
61 | "keywords": [
62 | "react",
63 | "react-native",
64 | "react-component"
65 | ]
66 | }
67 |
--------------------------------------------------------------------------------
/src/__tests__/index.spec.js:
--------------------------------------------------------------------------------
1 | jest.dontMock('../index');
2 | import {derive, track} from '../index';
3 | import React, {Component, addons} from 'react/addons';
4 | const {TestUtils} = addons;
5 |
6 | function createTestComponent(options, cb) {
7 | @derive(options)
8 | class TestComponent extends Component {
9 | render() {
10 | const props = this.props;
11 | cb(props);
12 | return null;
13 | }
14 | }
15 | return TestComponent;
16 | }
17 |
18 | function deriveProps(options, props) {
19 | var derivedProps;
20 | const Comp = createTestComponent(options, props => derivedProps = props);
21 | TestUtils.renderIntoDocument(