hrx - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

lib/connect.js

@@ -13,3 +13,3 @@ "use strict";
 
-var _fluxury = require("fluxury");
+var _xander = require("xander");
 
@@ -35,3 +35,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-      _this.state = (0, _fluxury.getState)();
+      _this.state = (0, _xander.getState)();
       _this.handleChange = _this.handleChange.bind(_this);
@@ -44,3 +44,3 @@ return _this;
       value: function componentDidMount() {
-        this.token = (0, _fluxury.subscribe)(this.handleChange);
+        this.token = (0, _xander.subscribe)(this.handleChange);
       }
@@ -47,0 +47,0 @@ }, {

lib/index.js

@@ -13,3 +13,3 @@ "use strict";
 
-var _fluxury = require("fluxury");
+var _xander = require("xander");
 
@@ -52,3 +52,3 @@ var _loadable = require("./loadable");
     window.router = _router2.default;
-    (0, _fluxury.subscribe)(function (state, action) {
+    (0, _xander.subscribe)(function (state, action) {
       return console.log("action", action);
@@ -74,14 +74,16 @@ });
 hrx.loadable = _loadable2.default;
+hrx.loader = function (loader) {
+  return (0, _loadable2.default)({ loader: loader });
+};
 hrx.Container = _container2.default;
 hrx.connect = _connect2.default;
-hrx.createStore = _fluxury.createStore;
-hrx.dispatch = _fluxury.dispatch;
-hrx.subscribe = _fluxury.subscribe;
-hrx.getState = _fluxury.getState;
-hrx.replaceReducer = _fluxury.replaceReducer;
-hrx.getStores = _fluxury.getStores;
-hrx.promiseAction = _fluxury.promiseAction;
+hrx.createStore = _xander.createStore;
+hrx.dispatch = _xander.dispatch;
+hrx.subscribe = _xander.subscribe;
+hrx.getState = _xander.getState;
+hrx.replaceReducer = _xander.replaceReducer;
+hrx.getStores = _xander.getStores;
+hrx.promiseAction = _xander.promiseAction;
 hrx.router = _router2.default;
 hrx.loadRoutes = _router2.default.loadRoutes;
-hrx = Object.assign({}, hrx, require("formula"));
 hrx.__esModule = true;
@@ -88,0 +90,0 @@ hrx.default = hrx;

lib/router.js

@@ -10,4 +10,4 @@ "use strict";
 
-var createStore = require("fluxury").createStore;
-var dispatch = require("fluxury").dispatch;
+var createStore = require("xander").createStore;
+var dispatch = require("xander").dispatch;
 var pathToRegexp = require("./pathToRegexp");
@@ -14,0 +14,0 @@ var pathRegexps = {};

lib/window.js

@@ -7,3 +7,3 @@ "use strict";
 
-var _fluxury = require("fluxury");
+var _xander = require("xander");
 
@@ -21,3 +21,3 @@ var getWindow = function getWindow() {
 
-var windowStore = (0, _fluxury.createStore)("window", {
+var windowStore = (0, _xander.createStore)("window", {
   getInitialState: getWindow,
@@ -33,7 +33,7 @@ windowOnResize: function windowOnResize(state, data) {
 function resize() {
-  (0, _fluxury.dispatch)("windowOnResize", getWindow());
+  (0, _xander.dispatch)("windowOnResize", getWindow());
 }
 
 function scroll() {
-  (0, _fluxury.dispatch)("windowOnScroll", getWindow());
+  (0, _xander.dispatch)("windowOnScroll", getWindow());
 }
@@ -40,0 +40,0 @@

package.json

 {
   "name": "hrx",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Single page app framework",
@@ -5,0 +5,0 @@ "repository": "git+https://github.com/FormBucket/hrx.git",

README.md

@@ -32,36 +32,19 @@ # hrx
 ```js
-import { createElement as h } from 'react';
-import { RUN as r } from 'formula'
-import {boot, Loadable, Rule, Eval} from 'hrx';
+// Import the boot function to intialize hrx.
+import {boot} from 'hrx';
 
-// Calling constructor function return React component.
+// Import sass styles onto the page.
+require('./app.scss');
+
+// Boot the app into a root DOM element. Map your URLs to component to render.
 boot({
+  rootEl: document.getElementById('root'),
   routes: [{
-    path: '/',
-    component: (props) => <div>Hello, World.</div>
+    path: "/",
+    component: (props) => "Hello, World."
   }, {
-    path: '/page-splitting',
-    component: Loadable({
-      loader: () => import('./page-to-your-component'),
-      loading: (props) => <div>My Loader Code</div>
-    })
-  }, {
-    path: '/hyperscript',
-    component: (props) => h('div',
-      h(Rule, { exp: 'sum(A,B)'}, values: { A: 2, B: 4 }),
-      h(Eval, { exp: 'sum(A,B)'}, values: { A: 2, B: 4 }),
-    )
-  }, {
-    path: '/jsx',
-    component: (props) =>
-    <div>
-      <Rule exp="sum(A,B)" values={{ A: 2, B: 4 }} />
-      <Eval exp="sum(A, B)" values={{ A: 2, B: 4 }} />
-    </div>
-  }, {
-    path: '*',
-    component: (props) => <div>404</div>
-  }])
-
-}, document.getElementById('your-dom-element-goes-here'))
+    path: "*",
+    component: ((props) => "No Page Found" )
+  }]
+});
 ```
@@ -71,10 +54,8 @@
 
-Try [xan](https://github.com/FormBucket/xan) for a full featured development server.
+Want a full featured static site generator and hot reloading development server. Checkout [xan](https://github.com/FormBucket/xan)
 
-### webpack
+### Components
 
-Already use webpack? The [minimal example](./examples/minimal) offers a simple boilerplate.
+#### Link Component
 
-### Link Component
-
 A link component to hyperlink your app without annoying page refreshes.
@@ -89,4 +70,64 @@
 
-### Router
+#### Eval Component
 
+The Eval component calculates the result of a formula expression.
+
+```js
+import {Eval} from 'hrx'
+<Eval exp="SUM(A, B)" values={ A: 2, B: 2 } />
+```
+
+#### Rule Component
+
+The Rule component renders HTML describing a formula expression.
+
+```js
+import {Rule} from 'hrx'
+<Rule exp="SUM(A, B)" />
+```
+
+#### Container Component
+
+The Container component renders a child component based on URL.
+
+```jsx
+import {Link} from 'hrx'
+render(
+  <Container>
+  </Container>
+)
+```
+#### Connect Component
+
+The Connect HOC component syncs Xander state with React state.
+
+```jsx
+import {connect, Container} from 'hrx'
+render(
+  connect(Container) // <- boot function does just this
+)
+```
+
+#### Loadable / loader HOCs
+
+The Loadable HOC works with webpack to split your app into chunks that load dynamically.
+
+```jsx
+import {Loadable, loader} from 'hrx'
+let routes = [{
+    path: "/",
+    component: loadable({
+      loader: () => import('./home'),
+      delay: 500 // 0.500 seconds
+    })
+  }, {
+    path: "*",
+    component: loader(() => import('./404'))
+  }]
+```
+
+### Stores
+
+#### Router
+
 A minimal router, backed by native history API.
@@ -105,3 +146,3 @@
 
-#### Load Routes
+##### Load Routes
 
@@ -119,4 +160,12 @@ Load routes and related configuration without `boot`.
 
-### State management
+#### Window
 
+The window store (optional) keeps track of window size and scroll location; keeps in sync with DOM.
+
+```js
+import windowStore from "hrx/lib/window";
+```
+
+#### Custom State management
+
 Use `createStore` to manage locally cached data.
@@ -129,2 +178,2 @@
 
-For more examples see [xander](https://github.com/FormBucket/xander).
+For more info checkout [xander](https://github.com/FormBucket/xander).

No alert changes

Improved metrics

Total package byte prevSize

58075

increased by1.21%

Lines of code

1143

increased by0.18%

Number of lines in readme file

174

increased by39.2%

No dependency changes