xander - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

package.json

 {
   "name": "xander",
-  "version": "2.0.0",
-  "description": "state management in js",
-  "main": "./lib/index.js",
+  "version": "3.0.0",
+  "description": "Single page app framework",
+  "repository": "git+https://github.com/FormBucket/xander.git",
+  "main": "./index.js",
   "scripts": {
-    "build":
-      "npx rollup --format=umd --name=xander src/index.js | npx buble | npx uglifyjs > lib/index.js",
-    "test": "npx nodent test.js"
+    "build": "npm run build:lib; npm run build:min",
+    "build:lib": "rollup --format=umd --name=xander --globals=react:React,react-dom:ReactDom,xander:xander,formula:formula src/index.js | buble > ./lib/xander.js",
+    "build:min": "cat ./lib/xander.js | npx uglifyjs > ./lib/xander.min.js",
+    "clean": "rm -rf lib",
+    "test": "babel-node tests/public-api; babel-node tests/router;  babel-node tests/store"
   },
-  "engines": {
-    "node": ">=8.0"
-  },
-  "author": "JC Fisher",
-  "license": "MIT",
+  "keywords": [
+    "flux",
+    "react",
+    "framework",
+    "spa"
+  ],
+  "homepage": "https://github.com/FormBucket/xander#readme",
   "devDependencies": {
-    "buble": "^0.19.3",
+    "babel-cli": "^6.1.2",
+    "babel-core": "^6.1.2",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.11.1",
+    "formula": "^3.5.2",
     "immutable": "^3.7.5",
-    "nodent": "^3.2.6",
-    "rollup": "^0.59.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "tape": "^4.2.2",
     "tape-async": "^2.1.1",
-    "uglify-js": "^3.3.25"
+    "uglify-js": "^3.3.25",
+    "window": "^4.2.5"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/FormBucket/xander.git"
+  "author": "JC Fisher",
+  "license": "MIT",
+  "peerDependencies": {
+    "formula": "^3.5.2",
+    "react": "^15.6.2 || ^16.0.0"
   },
-  "keywords": ["react", "react-component", "flux"],
-  "bugs": {
-    "url": "https://github.com/FormBucket/xander/issues"
-  },
-  "homepage": "https://github.com/FormBucket/xander#readme"
+  "dependencies": {}
 }

README.md

 # xander
 
-[![Circle CI](https://circleci.com/gh/FormBucket/xander/tree/master.svg?style=svg)](https://circleci.com/gh/FormBucket/xander/tree/master)
+[![CircleCI](https://circleci.com/gh/FormBucket/xander.svg?style=svg)](https://circleci.com/gh/FormBucket/xander)
 
-## Overview
+# Overview
 
-State management library; works like redux but with option for many stores, side effects, Promises and other practical things.
+Frontend Framework for [React](https://github.com/facebook/react) and [Formula](https://github.com/FormBucket/formula).
 
-Library includes:
+# Usage
 
-  - createStore(key, reducerOrSpec, actionsOrSelectors)
-  - dispatch(action)
-  - getStores()
-  - getReducer()
-  - getState()
-  - promiseAction(type, data)
-  - replaceState(state)
-  - subscribe(cb)
+## Installation
 
+```sh
+npm install --save react formula xander
+```
+
+# Examples
+
 ## Quick start
 
-```sh
-npm install --save xander
+A minimal xander app with home and 404 page.
+
+### index.js
+
+```js
+// Import the boot function to intialize xander.
+import React from "react";
+import { render } from "xander";
+
+// Import style onto the page.
+require("./app.css");
+
+// Define routes for the app.
+let routes = [
+  {
+    path: "/",
+    component: props => <div>Hello, World.</div>
+  },
+  {
+    path: "*",
+    component: props => <div>404 NOT FOUND</div>
+  }
+];
+
+// Render your app to the DOM.
+render(
+  {
+    routes
+  },
+  document.getElementById("root")
+);
 ```
 
+[minimal example](https://github.com/FormBucket/xander/blob/master/examples/minimal/)
+
+## With React's render
+
+Render xander with React's render function.
+
 ```js
-import {
-  createStore,
-  dispatch,
-  getStores,
-  getState,
-  promiseAction,
-  replaceState,
-  subscribe
-}
-from 'xander'
+// Import the boot function to intialize xander.
+import { app } from "xander";
+import React from "react";
+import ReactDOM from "react-dom";
+import routes from "./routes";
 
-// creates a key="A" in the root store, connected to a reducer function.
-let storeA = createStore('a1', (state=0, action) => 
-                      action.type === 'setA' ? 
-                      action.data : state )
+let App = app({ routes });
+// Define routes for your app.
+// Boot the app into a root DOM element. Map your URLs to component to render.
+ReactDOM.render(<App />, document.getElementById("root"));
+```
 
-let storeB = createStore('b1', (state=0, action) => 
-                      action.type === 'setB' ? 
-                      action.data : state )
+# Components
 
-// Store with dependencies on state in storeA and storeB.
-let storeC = createStore('c1', (state=0, action, waitFor) => {
-  // Ensure storeA and storeB reducers run prior to continuing.
-  waitFor([storeA.dispatchToken, storeB.dispatchToken]);
-  
-  // Side effect! Get state from other stores.
-  return storeA.getState() + storeB.getState();
-})
+## Link Component
 
-subscribe((...args) => console.log('action', ...args))
-dispatch('setA', 2)
-dispatch('setB', 2)
-getState()  // -> { a1: 2, b1: 2, c1: 4 }
+A link component to hyperlink your app without annoying page refreshes.
+
+```js
+import {Link} from 'xander'
+<Link to="/buckets">Go to my buckets</Link>
 ```
 
-## Polyfills
+## Eval Component
 
-This library depends on a modern JavaScript runtime. Load a polyfill like in [core-js](https://github.com/zloirock/core-js#commonjs) or [babel-polyfill](http://babeljs.io/docs/usage/polyfill/) to support old browsers.
+The Eval component calculates the result of a formula expression.
 
-Manually install required polyfills with [core-js](https://github.com/zloirock/core-js):
+```js
+import {Eval} from 'xander'
+<Eval exp="SUM(A, B)" values={ A: 2, B: 2 } />
+```
 
+## Rule Component
+
+The Rule component renders HTML describing a formula expression.
+
 ```js
-require('core-js/fn/promise');
-require('core-js/fn/object/assign');
-require('core-js/fn/object/freeze');
-require('core-js/fn/object/keys');
+import {Rule} from 'xander'
+<Rule exp="SUM(A, B)" />
 ```
 
-## API
+## Loadable / loader HOCs
 
-### createStore( key, reducerOrSpec, actionsOrSelectors )
+The Loadable HOC works with webpack to split your app into chunks that load dynamically.
 
+```jsx
+import { loadable } from "xander";
+let routes = [
+  {
+    path: "/",
+    component: loadable({
+      loader: () => import("./home"),
+      loading: (props) => <div>Loading...</div>
+      delay: 500 // 0.500 seconds
+    })
+  }
+];
+```
+
+## Container Component
+
+The Container component renders the router's current component.
+
+```jsx
+import { Link } from "xander";
+render(<Container />);
+```
+
+## Connect Component
+
+The Connect HOC component syncs the store with React state.
+
+```jsx
+import { connect, Container } from "xander";
+connect(Container);
+```
+
+# Stores
+
+## Router Store
+
+A minimal router, backed by the history API.
+
+```js
+import { router } from "xander";
+router.open("/buckets/1");
+```
+
+Use `redirect` to modify URL without adding an entry to the history state.
+
+```js
+router.redirect("/buckets");
+```
+
+Load routes and related configuration without `app` or `render`.
+
+```js
+import { router } from "xander";
+router.loadRoutes([
+  {
+    path: "/",
+    component: require("./pages/home")
+  }
+]);
+```
+
+## Window Store
+
+The window store keeps track of window size and scroll location; syncs with DOM.
+
+```js
+import { loadWindowStore } from "xander";
+loadWindowStore();
+```
+
+## Custom Stores
+
+Create custom stores to store your app's data.
+
+```js
+import { createStore } from "xander";
+createStore(key, reducerOrSpec, actionsAndQueries);
+
+// example store, access via the key `todos` in react props.
+let todosStore = createStore('todos', {
+  getInitialState: () => []
+  addTodo: (state, todo) => state.concat(todo),
+  removeTodo: (state, id) => state.filter(d => d.id !== id)
+})
+
+// usagexander
+todosStore.addTodo({ id: 1, desc: "Make new framework" })
+todosStore.addTodo({ id: 2, desc: "Write killer app" })
+todosStore.addTodo({ id: 3, desc: "Analyze competition" })
+todosStore.removeTodo(3)
+todosStore.subscribe((state, action) => console.log('todos changes', state, action))
+todosStore.dispatch('addTodo', { id: 4, desc: "Write product examples" })
+```
+
+## createStore( key, reducerOrSpec, actionsOrSelectors )
+
 A store responds to actions by returning the next state.
@@ -109,24 +232,38 @@
 ```js
-const inc = 'inc'
-import { createStore } from 'xander';
+const inc = "inc";
+import { createStore } from "xander";
 
 // a simple counting store
-var countStore = createStore( "count", {
+var countStore = createStore("count", {
   // life-cycle method for initialization.
   getInitialState: () => 0,
   // handles { type: 'inc' }
-  inc: (state) => state+1,
+  inc: state => state + 1,
   // handles { type: 'incN' }
-  incN: (state, n) => state+n,
-})
+  incN: (state, n) => state + n
+});
 
 // object spec makes action creators automatically...
-countStore.inc()
-countStore.incN(10)
+countStore.inc();
+countStore.incN(10);
 ```
 
-### dispatch( action )
+## Store Properties
 
-The entry point to effecting state changes in the app is when an action is dispatch. 
+Here is a list of store properties that are part of the public API.
 
+| name           | comment                             |
+| -------------- | ----------------------------------- |
+| name           | The name of the store               |
+| dispatch       | Access to dispatch function         |
+| dispatchToken  | A number used to identity the store |
+| subscribe      | A function to tegister a listener   |
+| getState       | A function to access state          |
+| setState       | Replace the store's state           |
+| replaceReducer | Replace the store's reducer         |
+
+## dispatch( action )
+
+The entry point to effecting state changes in the app is when an action is dispatch.
+
 Dispatch accepts action as object, promise, or type/data; returns promise.
@@ -147,39 +284,64 @@
 dispatch( 'loadSettings', { a: 1, b: 2 } )
+```
 
+## WaitFor Example
+
+```js
+import { createStore } from "xander";
+
+// creates a key="A" in the root store, connected to a reducer function.
+let storeA = createStore(
+  "a1",
+  (state = 0, action) => (action.type === "setA" ? action.data : state)
+);
+
+let storeB = createStore(
+  "b1",
+  (state = 0, action) => (action.type === "setB" ? action.data : state)
+);
+
+// Store with dependencies on state in storeA and storeB.
+let storeC = createStore("c1", (state = 0, action, waitFor) => {
+  // Ensure storeA and storeB reducers run prior to continuing.
+  waitFor([storeA.dispatchToken, storeB.dispatchToken]);
+
+  // Side effect! Reads state from other stores after they are updated.
+  return storeA.getState() + storeB.getState();
+});
 ```
 
-#### Store Properties
+## getState( )
 
-Here is a list of store properties that are part of the public API.
+Returns an object with the store's state by key.
 
-| name | comment |
-|---------|------|
-| name | The name of the store |
-| dispatch | Access to dispatch function |
-| dispatchToken | A number used to identity the store |
-| subscribe | A function to tegister a listener |
-| getState | A function to access state |
-| setState | Replace the store's state |
-| replaceReducer | Replace the store's reducer |
+```js
+import { getState } from "xander";
+getState();
+```
 
-### getStores( )
+## getStores( )
 
-Returns an object with the name as key and store as value.
+Returns an object with the stores by key.
 
-### replaceState( state )
+```js
+import { getStores } from "xander";
+getStores();
+```
 
+## replaceState( state )
+
 Rehydrate the root state.
 
 ```js
+import { replaceState } from "xander";
+
 replaceState({
-  'MyCountStore': 1
-})
+  MyCountStore: 1
+});
 ```
 
-### subscribe( listener )
+## subscribe( listener )
 
 Listen to changes to all stores. This will trigger once each time createStore or dispatch is invoked.
 
-_Please note that action will be undefined when createStore is invoked._
-
 ```
@@ -193,4 +355,3 @@ var unsubscribe = subscribe( (state, action) => {
 ```
-### getReducer( )
 
-Return app's reducer function, use with Redux.
+_Please note that action will be undefined when createStore is invoked._

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

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108597

increased by218.8%

Number of package files

25

increased by177.78%

Lines of code

2706

increased by808.05%

Number of lines in readme file

355

increased by82.99%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

13

increased by85.71%

Number of low maintenance alerts

2

increased by100%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

4

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes