hzql - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

index.js

@@ -37,3 +37,4 @@ 'use strict';
       return {
-        horizon: this.props.horizon
+        horizon: this.props.horizon,
+        Fiber: this.props.fiber || false
       };
@@ -51,3 +52,6 @@ }
 
-Provider.childContextTypes = { horizon: _react2.default.PropTypes.any };
+Provider.childContextTypes = {
+  horizon: _react2.default.PropTypes.any,
+  Fiber: _react2.default.PropTypes.any
+};
 
@@ -70,21 +74,34 @@ var nextVersion = 0;
         _this2.version = version;
+        return _this2;
+      }
 
-        var q = _this2.context.horizon.model(query(_this2.context.horizon))(_this2.props);
+      _createClass(Connection, [{
+        key: 'componentWillMount',
+        value: function componentWillMount() {
+          var _this3 = this;
 
-        if (isLive) {
-          q = q.watch();
-        } else {
-          q = q.fetch();
-        }
+          var q = this.context.horizon.model(query(this.context.horizon))(this.props);
 
-        q.subscribe(function (results) {
-          return _this2.setState({ results: results });
-        });
-        return _this2;
-      }
+          if (isLive) {
+            q = q.watch();
+          } else {
+            q = q.fetch();
+          }
 
-      _createClass(Connection, [{
+          var fiber = void 0;
+
+          var sub = q.subscribe(function (results) {
+            _this3.setState({ results: results });
+            if (_this3.context.Fiber) fiber.run();
+          });
+
+          if (this.context.Fiber) {
+            fiber = this.context.Fiber.current;
+            this.context.Fiber.yield();
+          }
+        }
+      }, {
         key: 'render',
         value: function render() {
-          return _react2.default.createElement(Consumer, _extends({}, this.state.results, this.props));
+          return _react2.default.createElement(Consumer, _extends({}, this.state.results, this.props, { horizon: this.context.horizon }));
         }
@@ -98,3 +115,3 @@ }]);
       Connection.prototype.componentWillUpdate = function componentWillUpdate() {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -115,3 +132,3 @@ if (this.version == version) {
         q.subscribe(function (results) {
-          return _this3.setState({ results: results });
+          return _this4.setState({ results: results });
         });
@@ -121,3 +138,6 @@ };
 
-    Connection.contextTypes = { horizon: _react2.default.PropTypes.any };
+    Connection.contextTypes = {
+      horizon: _react2.default.PropTypes.any,
+      Fiber: _react2.default.PropTypes.any
+    };
 
@@ -124,0 +144,0 @@ return Connection;

package.json

 {
   "name": "hzql",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Easy querying for Horizon and React",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,21 +5,68 @@ # HzQL
 
-## Usage
+HzQL with React colocates your data and components. It requires Horizon 2
+for its new `hz.model` query.
 
+## Setting up HzQL
+
+HzQL exports a `Provider` component to wrap your app in.
+Any component using a query must be a child of `Provider`
+
 __Example__
 
 ```js
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-import { createDevTools } from './devTools'
-import { Provider, connect, live } from 'hzql'
+import React from 'react'
+import { Provider } from 'hzql'
+import Horizon from '@horizon/client'
+import App from './App'
 
-let root = document.getElementById('root')
+let horizon = new Horizon()
 
-let DevTools = createDevTools(horizon)
+let WrappedApp = () =>
+  <Provider horizon={horizon}>
+    <App />
+  </Provider>
+```
 
-class RawApp extends Component {
+## Writing Queries
+
+Queries are a function of the form `hz => props => query`. A query can use the
+props from the parent component to write the query. The exported `connect`
+function wires up a query to a component. The keys of the query will be passed
+as props to the immediate child
+
+__Example__
+
+```js
+import React from 'react'
+import { connect } from 'hzql'
+
+const App = props =>
+  <pre>Users: {this.props.users}</pre>
+
+const query = hz => props => ({
+  users: hz('post').order('date')
+})
+
+export default connect(query)(App)
+```
+
+To run a live query, use `connect.live` instead of `connect`
+
+## Mutations
+
+The horizon instance is passed down to child components, which can perform
+mutations.
+
+__Example__
+
+```js
+import React, { Component } from 'react'
+import { connect } from 'hzql'
+
+class App extends Component {
   constructor (props) {
     super(props)
 
-    this.state = { message: '' }
+    this.state = { input: '' }
+
     this.handleInput = this.handleInput.bind(this)
@@ -30,9 +77,7 @@ this.handleSubmit = this.handleSubmit.bind(this)
   handleInput (e) {
-    this.setState({
-      message: e.target.value
-    })
+    this.setState({ input: e.target.value })
   }
 
   handleSubmit () {
-    this.props.submitPost(this.state.message)
+    this.props.horizon('posts').store({ message: this.state.input })
   }
@@ -42,11 +87,4 @@
     return <div>
-      <h1>Posts</h1>
-      {!this.props.posts__loaded
-        ? 'Loading...'
-        : this.props.posts.map(p => <li key={p.time.toISOString()}>{p.message} - <small>{p.time.toISOString()}</small></li>)}
-      <div>
-        <h1>Submit Post</h1>
-        <input type='text' value={this.state.message} onChange={this.handleInput} />
-        <button onClick={this.handleSubmit}>Submit</button>
-      </div>
+      <input onChange={this.handleInput} value={this.state.input} />
+      <button onClick={this.handleSubmit}>Submit</button>
     </div>
@@ -56,13 +94,5 @@ }
 
-const App = connect({
-  posts: live(_ => _('posts').order('time').limit(5)),
-  submitPost: _ => message => _('posts').insert({ message, time: new Date })
-})(RawApp)
+export default connect(App)(hz => props => ({}))
+```
 
-ReactDOM.render(<div>
-  <Provider horizon={horizon}>
-    <App />
-  </Provider>
-  <DevTools />
-</div>, root)
-```
+## Server side rendering

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9179

increased by13.29%

Lines of code

110

increased by19.57%

Number of lines in readme file

95

increased by46.15%

No dependency changes