elegant-react - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "elegant-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Elegant Functional Architecture for React",
-  "main": "lib",
+  "main": "src",
   "repository": {
@@ -12,2 +12,12 @@ "type": "git",
   "bugs": "https://github.com/gilbox/elegant-react/issues",
+  "scripts": {
+    "build-global-elegant": "NODE_ENV=production webpack src/index.js build/global/elegant-react.js && NODE_ENV=production COMPRESS=1 webpack src/index.js build/global/elegant-react.min.js && echo \"gzipped, the global build is `gzip -c build/global/elegant-react.min.js | wc -c` bytes\"",
+    "build-global": "rm -rf build/global && npm run build-global-elegant",
+    "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",
+    "examples": "rm -rf examples/js && webpack-dev-server --config examples/webpack.config.js --content-base examples",
+    "examples-build": "rm -rf examples/js && webpack --config examples/webpack.build.config.js",
+    "test": "jsxhint . && karma start",
+    "publish": "npm publish ./build/npm",
+    "prepush": "npm run examples-build"
+  },
   "authors": [
@@ -17,2 +27,14 @@ "Gil Birman <[e-mail]> (http://gilbox.me/)"
   "license": "MIT",
+  "devDependencies": {
+    "babel": "^5.6.14",
+    "babel-core": "^5.6.15",
+    "babel-loader": "^5.2.2",
+    "flyd": "^0.1.14",
+    "immutable": "^3.7.3",
+    "jjv": "^1.0.2",
+    "node-libs-browser": "^0.5.2",
+    "react": "0.13.x",
+    "rebound": "0.0.13",
+    "webpack": "^1.10.0"
+  },
   "peerDependencies": {},
@@ -19,0 +41,0 @@ "dependencies": {},

README.md

@@ -7,2 +7,32 @@ # elegant-react
 
+## what is elegant-react?
+
+`elegant-react` is an npm package. The source code for the npm package is in the `src/`
+directory of this repo.
+
+This github repo is also currently the home for a growing number of experiments
+related to React functional patterns. The code for these experiments
+live in the `examples/` dir. Some use the `elegant-react` npm package but others,
+for the sake of simplicity, do not.
+
+The `elegant-react` npm package provides:
+
+  - A simple ES7 class decorator ([`@elegant-react`](https://github.com/gilbox/elegant-react/blob/master/src/create-elegant-decorator.js))
+    that via a higher-order component (HoC) facilitates working with immutable data:
+
+      * Automatically optimizes your shouldComponentUpdate. In order
+        for this optimization to be efficient, all props passed to components should be
+        scalar or immutable values. If you need to further optimize `shouldComponentUpdate`
+        you can define your own, and because the `@elegant` decorator is a HoC there's
+        no need to worry about collisions.
+
+      * Allows designated props to be treated as *static* so that changes to those
+        props don't trigger render updates.
+
+  - A simple [subedit](https://github.com/gilbox/elegant-react/blob/master/src/index.js#L4) function that looks like this:
+
+          const subedit = (edit, ...path) => transform =>
+              edit(state => state.updateIn(path, transform));
+
+
 ## about
@@ -26,10 +56,13 @@
 
-Require it:
+Import it:
 
-    const {elegant, subedit} = require('elegant-react');
+    import {elegant, subedit} from 'elegant-react';
 
 Or if you'd like to enable debug mode:
 
-    const {elegant, subedit} = require('elegant-react')({debug: true});
+    import ElegantReact from 'elegant-react';
+    const {elegant, subedit} = ElegantReact({debug: true});
 
+Note: the `subedit` function is also available as `sub`. It's a personal
+preference which you use. I like the way that `sub(edit, 'foo')` reads.
 
@@ -40,7 +73,8 @@ ## react-native support
 
-    const {elegant, subedit} = require('elegant-react/native');
+    import {elegant, subedit} from 'elegant-react/native';
 
 Or if you'd like to enable debug mode:
 
-    const {elegant, subedit} = require('elegant-react/native')({debug: true});
+    import ElegantReact from 'elegant-react/native';
+    const {elegant, subedit} = ElegantReact({debug: true});
 
@@ -65,3 +99,3 @@
 
-First, make sure you understand the `subedit` function described in
+First, make sure you understand the `subedit` (aka `sub`) function described in
 [this Medium article](https://medium.com/@gilbox/an-elegant-functional-architecture-for-react-faa3fb42b75b)
@@ -118,3 +152,12 @@
 
+Although it's not a hard dependency, the provided `subedit` function is known
+to work with `immutable-js`. If you wish to use a different immutable lib,
+just create your own subedit function and it should work.
 
+- subedit for [mori](http://swannodette.github.io/mori/) *(untested)*
+
+        const subedit = (edit, ...path) => transform =>
+            edit(state => mori.updateIn(state, path, transform));
+
+
 ## Run the examples
@@ -148,6 +191,21 @@
 - [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)
+  A very simple example of how to use `elegant-react` and a functional approach to creating
+  an input component with custom formatting and masking rules.
+- [Address Book with Stream-based Plugins](http://gilbox.github.io/elegant-react/examples/address-book-store-streams/demo.html)
+  Demonstrates how to use streams to create an undo/redo plugin.
+  Introduces the concepts of `previousEditStream`, `editStream`, and `wiredStream` that allows a plugin to gain read and/or write
+  access only to specific parts of the application state.
 - [Scroll Spring Animation](http://gilbox.github.io/elegant-react/examples/scroll-spring-animation/demo.html)
+  Demonstrates how to use `react-springs` (or `react-animation`) and how to create a scroll
+  handling component using the same functional technique.
 - [Reorder Items](http://gilbox.github.io/elegant-react/examples/reorder-items/demo.html)
+  A very simple demo showing how to use `elegant-react`.
+- [Form Validation (wip)](http://gilbox.github.io/elegant-react/examples/form-validation/demo.html)
+  Demonstrates how to create a robust plugin to handle validating form fields with a
+  json scema using the `jjv` npm package. Also demonstrates how to compose
+  decorators by combining `@elegant` with `@validationDecorator`.
 
+
+- **[elegant-react-hot-demo](https://github.com/gilbox/elegant-react-hot-demo)** - This github repo demonstrates stream-based plugins (with flyd), animation with react-motion, hot reload, and time-travel scrubbing.
+
 ## credit
@@ -154,0 +212,0 @@

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed 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

347024

increased by2233.09%

Number of package files

57

increased by714.29%

Lines of code

1516

increased by621.9%

Number of lines in readme file

210

increased by38.16%

Worsened metrics

Dev dependency count

10

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

4

increased byInfinity%

No dependency changes