elegant-react - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/index.js

 'use strict';
 
-var React = require('react');
-var elegant = require('./elegant');
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports['default'] = setup;
 
-module.exports = elegant(React);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _createElegantDecorator = require('./create-elegant-decorator');
+
+var _createElegantDecorator2 = _interopRequireDefault(_createElegantDecorator);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function subedit(edit) {
+  for (var _len = arguments.length, path = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    path[_key - 1] = arguments[_key];
+  }
+
+  return function (transform) {
+    return edit(function (state) {
+      return state.updateIn(path, transform);
+    });
+  };
+}
+
+function setup(debug) {
+  return {
+    subedit: subedit,
+    sub: subedit,
+    elegant: (0, _createElegantDecorator2['default'])(_react2['default'], debug)
+  };
+}
+
+setup.elegant = (0, _createElegantDecorator2['default'])(_react2['default']);
+setup.subedit = subedit;
+setup.sub = subedit;
+module.exports = exports['default'];

lib/native.js

 'use strict';
 
-var React = require('react-native');
-var elegant = require('./elegant');
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports['default'] = setup;
 
-module.exports = elegant(React);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _createElegantDecorator = require('./create-elegant-decorator');
+
+var _createElegantDecorator2 = _interopRequireDefault(_createElegantDecorator);
+
+var _reactNative = require('react-native');
+
+var _reactNative2 = _interopRequireDefault(_reactNative);
+
+function subedit(edit) {
+  for (var _len = arguments.length, path = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    path[_key - 1] = arguments[_key];
+  }
+
+  return function (transform) {
+    return edit(function (state) {
+      return state.updateIn(path, transform);
+    });
+  };
+}
+
+function setup(debug) {
+  return {
+    subedit: subedit,
+    sub: subedit,
+    elegant: (0, _createElegantDecorator2['default'])(_reactNative2['default'], debug)
+  };
+}
+
+setup.elegant = (0, _createElegantDecorator2['default'])(_reactNative2['default']);
+setup.subedit = subedit;
+setup.sub = subedit;
+module.exports = exports['default'];

package.json

 {
   "name": "elegant-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Elegant Functional Architecture for React",
@@ -5,0 +5,0 @@ "main": "lib",

README.md

 # elegant-react
 
-Functional React Architecture based on [omniscient](http://omniscientjs.github.io/) and [browser.html](https://github.com/mozilla/browser.html/).
-I've created this repo for use in my own projects. You're welcome to use it as well.
-Comments/suggestions/PRs are all welcome.
-If you are interested in something like
-this for a production application, consider using [omniscient](http://omniscientjs.github.io/) instead.
+Functional React Architecture inspired by [omniscient](http://omniscientjs.github.io/) and [browser.html](https://github.com/mozilla/browser.html/).
+Comments/suggestions/PRs are all welcome. This is still experimental.
 
@@ -12,4 +9,9 @@
 
-See [this Medium article](https://medium.com/@gilbox/an-elegant-functional-architecture-for-react-faa3fb42b75b)
+This repo started off as a demonstration of some concepts that I wrote about in [this Medium article](https://medium.com/@gilbox/an-elegant-functional-architecture-for-react-faa3fb42b75b) and [this one](https://medium.com/p/7acf5d0cf00e) as well. However, since that time elegant-react
+has continued to evolve and things have changed significantly. For the purpose of education,
+you can check out the [elegant-react-og](https://github.com/gilbox/elegant-react) repo which
+is a copy of the elegant-react repo immediately before it began to diverge from the content
+in those two Medium articles.
 
+
 ## Installation
@@ -21,29 +23,25 @@
 
-## Using in your project (functional style)
 
+## Bringing it into your project
+
 Require it:
 
-    var {component, subedit} = require('elegant-react');
+    const {elegant, subedit} = require('elegant-react');
 
 Or if you'd like to enable debug mode:
 
-    var {component, subedit} = require('elegant-react')({debug: true});
+    const {elegant, subedit} = require('elegant-react')({debug: true});
 
-## Using in your project (classical style)
 
+## react-native support
+
 Require it:
 
-    var {elegant, subedit} = require('elegant-react/classy');
+    const {elegant, subedit} = require('elegant-react/native');
 
 Or if you'd like to enable debug mode:
 
-    var {elegant, subedit} = require('elegant-react/classy')({debug: true});
+    const {elegant, subedit} = require('elegant-react/native')({debug: true});
 
-## react-native support
 
-Same as the previous two sections, except replace:
-
-- `require('elegant-react')` with `require('elegant-react/native')`
-- `require('elegant-react/classy')` with `require('elegant-react/classy/native')`
-
 ## Using in codepen, jsbin, etc.
@@ -57,11 +55,57 @@
 
-Now grab the component function:
+    const {elegant, subedit} = ElegantReact;
 
-    var component = ElegantReact.component;
-
 Or if you'd like to enable `debug` mode:
 
-    var component = ElegantReact({debug: true}).component;
+    const {elegant, subedit} = ElegantReact({debug: true});
 
 
+## Usage
+
+First, make sure you understand the `subedit` function described in
+[this Medium article](https://medium.com/@gilbox/an-elegant-functional-architecture-for-react-faa3fb42b75b)
+
+Then add the `@elegant` decorator to your component, specifying which
+props are static.
+
+    const inc = n => n + 1;
+
+    @elegant({statics: ['editValue']})
+    class Item extends Component {
+      render() {
+        const {item,editValue} = this.props;
+        const onClick = _ => editValue(inc);
+        return <li onClick={ onClick }>
+          { item.get('name') } - { item.get('value') }
+        </li>
+      }
+    }
+
+Now put that component to use:
+
+    const reverse = data => data.reverse();
+
+    @elegant({statics: ['edit']})
+    class Items extends Component {
+      render() {
+        const {items,edit} = this.props;
+
+        const children = items.toArray().map(
+          (item, index) =>
+            <Item key={item.get('name')}
+                  item={item}
+                  editValue={sub(edit, index,'value')} /> );
+
+        return  <div key="root">
+          <button onClick={_ => edit(reverse)}>reverse</button>
+          <ul>{ children }</ul>
+        </div>;
+      }
+    }
+
+The rest of the source for this demo is [here](https://github.com/gilbox/elegant-react/blob/master/examples/reorder-items/app.js)
+and you can [see it in action](http://gilbox.github.io/elegant-react/examples/reorder-items/demo.html)
+as well.
+
+
 ## dependencies
@@ -86,3 +130,9 @@
 
-- omniscient will perform deep comparisons on props of any type with `lodash.isequal`.
+- elegant-react uses higher-order components where omniscient uses mixins
+- elegant-react components use a decorator to specify which props are static while
+  omniscient uses a single prop called `statics`.
+- omniscient will perform deep comparisons on props of any type with `lodash.isequal`,
+  elegant-react only performs shallow comparison assuming that if you need deep comparison
+  you will use immutable objects or define your own `shouldComponentUpdate`
+- elegant-react uses idiomatic react approach ([see this article](https://medium.com/p/7acf5d0cf00e) for more info)
 - omniscient supports components as function without JSX
@@ -92,8 +142,15 @@ - omniscient supports cursors
 - omniscient is unit-tested
-- omniscient is ~18kb minified. elegant-react is <3kb minified (or ~4kb for classical style).
+- omniscient is ~18kb minified. elegant-react is ~4kb
 
+## live examples
 
+- [Phone Input](http://gilbox.github.io/elegant-react/examples/phone-input-field/demo.html)
+- [Address Book w/"Store" streams](http://gilbox.github.io/elegant-react/examples/address-book-store-streams/demo.html)
+- [Scroll Spring Animation](http://gilbox.github.io/elegant-react/examples/scroll-spring-animation/demo.html)
+- [Reorder Items](http://gilbox.github.io/elegant-react/examples/reorder-items/demo.html)
+
 ## credit
 
-This project is essentially a simplified version of [omniscient](http://omniscientjs.github.io/)
-and promotes the functional approach of [browser.html](https://github.com/mozilla/browser.html/)
+This project was originally a simplified version of [omniscient](http://omniscientjs.github.io/)
+which promotes the functional approach of [browser.html](https://github.com/mozilla/browser.html/).
+However, it has since evolved to become a more unique thing of it's own (see *differences from omniscient* above)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14874

increased by1.22%

Number of lines in readme file

152

increased by60%

Worsened metrics

Number of package files

7

decreased by-36.36%

Lines of code

210

decreased by-25%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes