├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── assets
    └── demo.gif
├── dist
    └── index.html
├── package.json
├── src
    ├── devTools.jsx
    └── index.jsx
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .hz/
2 | dist/bundle.js
3 | node_modules/
4 | rethinkdb_data/
5 | *.log
6 | index.js
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .hz
2 | dist
3 | rethinkdb_data
4 | src
5 | .babelrc
6 | webpack.config.js
7 | *.log
8 | assets
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Ryan Delaney
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Horizon Devtools
 2 | 
 3 | > A better dev experience for Horizon users
 4 | 
 5 | ## Demo
 6 | 
 7 | ![Demo](https://github.com/rrdelaney/horizon-devtools/blob/master/assets/demo.gif)
 8 | 
 9 | ## Installation
10 | 
11 | ```
12 | npm install --save horizon-devtools
13 | ```
14 | 
15 | ## Usage
16 | 
17 | ```js
18 | // Require the dependencies
19 | import React from 'react'
20 | import ReactDOM from 'react-dom'
21 | import { createDevTools } from 'horizon-devtools'
22 | import App from './App'
23 | 
24 | // Create your horizon instance
25 | let horizon = Horizon()
26 | horizon.connect()
27 | 
28 | // Run the `createDevTools` function on your horizon instance
29 | // This returns a `DevTools` component to render into your react app
30 | let DevTools = createDevTools(horizon)
31 | 
32 | // Render your app!
33 | ReactDOM.render(<div>
34 |   <DevTools />
35 |   <App />
36 | </div>, document.getElementById('root'))
37 | ```
38 | 
39 | ## Guide
40 | 
41 | The devtools will track any query you make through Horizon after the tools are
42 | initialized with `createDevTools`. If the query ends with `fetch()` the devtools
43 | will display the result of that query. If `watch()` is used 🔄 will
44 | show next to the query and be live updated with the results.
45 | 
46 | `⌃ + Q` will show/hide the devtools.
47 | 
48 | `⌃ + W` will change the position of the devtools.
49 | 
50 | You can run custom queries using the query editor in the devtools. Type in a
51 | query into the bottom text box and press `⌃ + Enter` to run it. The horizon
52 | instance will be bound to `horizon`. If a query excludes `fetch()` or `watch()`,
53 | `fetch()` will be automatically appended. If a query excludes `subscribe()`,
54 | `subscribe()` will be automatically appended. For example, if `horizon('users')`
55 | is entered, `horizon('users').fetch().subscribe()` will be run.
56 | 
57 | ## API
58 | 
59 | ### `createDevTools(horizon): DevTools`
60 | 
61 | Attaches instrumentation for monitoring on the horizon instance. It returns
62 | a `DevTools` component hooked up to the instrumentation that automatically
63 | updates.
64 | 
65 | ### `<DevTools defaultVisible={true} defaultPosition='right' />`
66 | 
67 | This renders the developer tools into the window. If `defaultVisible` is set
68 | to false, the tools will not be open at first. `defaultPosition` can be either
69 | `left`, `right`, `top`, or `bottom`.
70 | 
71 | ## Contributing
72 | 
73 | To run the example use `npm run dev` and go to `localhost:8181`.
74 | 
75 | To build for publishing run `npm run build`.
76 | 


--------------------------------------------------------------------------------
/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrdelaney/horizon-devtools/7aacba90a3c06a9e8840eabc8b6fa0ae9ac23a8e/assets/demo.gif


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <script src="/horizon/horizon.js"></script>
 6 |     <script>
 7 |       var horizon = Horizon();
 8 |       horizon.connect();
 9 |     </script>
10 |   </head>
11 |   <body>
12 |    <div id="root"></div>
13 | 
14 |    <script src="bundle.js"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "horizon-devtools",
 3 |   "version": "1.1.0",
 4 |   "description": "Devtools for horizon",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "concurrently -c green,blue --names \"Horizon,Webpack\" --prefix \"[{name}]\" \"hz serve --dev\" \"webpack --watch\"",
 8 |     "build": "babel src/devTools.jsx > index.js"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/rrdelaney/horizon-devtools"
13 |   },
14 |   "keywords": [
15 |     "horizon",
16 |     "react",
17 |     "devtools",
18 |     "hz"
19 |   ],
20 |   "author": "Ryan Delaney <rrdelaney@outlook.com>",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/rrdelaney/horizon-devtools/issues"
24 |   },
25 |   "homepage": "https://github.com/rrdelaney/horizon-devtools",
26 |   "devDependencies": {
27 |     "babel-cli": "^6.11.4",
28 |     "babel-preset-es2015": "^6.9.0",
29 |     "babel-preset-react": "^6.11.1",
30 |     "concurrently": "^2.2.0",
31 |     "horizon": "^2.0.0",
32 |     "react": "^15.2.1",
33 |     "react-dom": "^15.2.1",
34 |     "snazzy": "^4.0.0",
35 |     "standard": "^7.1.2",
36 |     "webpack": "^1.13.1"
37 |   },
38 |   "dependencies": {
39 |     "react-dock": "^0.2.3",
40 |     "react-json-tree": "^0.10.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/devTools.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import JSONTree from 'react-json-tree'
  3 | import Dock from 'react-dock'
  4 | 
  5 | // This should be replaced with Horizon 2's `query.toString()` method
  6 | const ast2string = (ast, live) => {
  7 |   // All queries except `find` are an array, so we normalize `find` here to be an array
  8 |   if (ast.find) ast.find = [ast.find]
  9 |   return ['find', 'find_all', 'above', 'below', 'order', 'limit'].reduce(
 10 |     (res, key) => res + (!ast[key] ? '' : `.${key}(${JSON.stringify(ast[key][0]).replace(/[\[\]"\{\}]/g, '')})`),
 11 |     (live === 'watch' ? '🔄 ' : '') + ast.collection
 12 |   )
 13 | }
 14 | 
 15 | let positions = ['left', 'top', 'right', 'bottom']
 16 | 
 17 | let nextPosition = c => positions[(positions.indexOf(c) + 1) % 4]
 18 | 
 19 | const theme = {
 20 |   base00: '#1B2B34',
 21 |   base01: '#EC5F67',
 22 |   base03: '#99C794',
 23 |   base06: '#FAC863',
 24 |   base05: '#6699CC',
 25 |   base04: '#C594C5',
 26 |   base02: '#5FB3B3',
 27 |   base07: '#A7ADBA',
 28 |   base08: '#4F5B66',
 29 |   base09: '#EC5F67',
 30 |   base0A: '#99C794',
 31 |   base0B: '#FAC863',
 32 |   base0D: '#6699CC',
 33 |   base0C: '#C594C5',
 34 |   base0E: '#5FB3B3',
 35 |   base0F: '#D8DEE9'
 36 | }
 37 | 
 38 | function instrument (horizon) {
 39 |   let observ = {
 40 |     queries: {},
 41 |     update: () => null
 42 |   }
 43 | 
 44 |   Object.getPrototypeOf(Object.getPrototypeOf(horizon('users'))).fetch =
 45 |     new Proxy(Object.getPrototypeOf(Object.getPrototypeOf(horizon('users'))).fetch, {
 46 |       apply (_fetch, thisArg) {
 47 |         return _fetch.bind(thisArg)().map(c => {
 48 |           observ.queries[ast2string(thisArg._query, 'fetch')] = c
 49 |           observ.update()
 50 |           return c
 51 |         })
 52 |       }
 53 |     })
 54 | 
 55 |   Object.getPrototypeOf(Object.getPrototypeOf(horizon('users'))).watch =
 56 |     new Proxy(Object.getPrototypeOf(Object.getPrototypeOf(horizon('users'))).watch, {
 57 |       apply (_watch, thisArg, args) {
 58 |         return _watch.bind(thisArg)(...args).map(c => {
 59 |           observ.queries[ast2string(thisArg._query, 'watch')] = c
 60 |           observ.update()
 61 |           return c
 62 |         })
 63 |       }
 64 |     })
 65 | 
 66 |   return observ
 67 | }
 68 | 
 69 | const Button = ({ onClick, children }) =>
 70 |   <span onClick={onClick} style={{
 71 |     flexGrow: '1',
 72 |     cursor: 'pointer',
 73 |     textAlign: 'center',
 74 |     color: theme.base07,
 75 |     backgroundColor: theme.base08,
 76 |     borderRadius: '3px',
 77 |     margin: '5px',
 78 |     padding: '5px 0',
 79 |     textDecoration: 'underline'
 80 |   }}>
 81 |     {children}
 82 |   </span>
 83 | 
 84 | const ButtonTabs = ({ onClick }) =>
 85 |   <div style={{ display: 'flex' }}>
 86 |     <Button onClick={() => onClick('query')}>Query</Button>
 87 |     <Button onClick={() => onClick('user')}>User</Button>
 88 |     {/* <Button onClick={() => onClick('feed')}>Feed</Button> */}
 89 |   </div>
 90 | 
 91 | const Logo = () =>
 92 |   <span>
 93 |     <img src='http://horizon.io/images/horizon-logo.png' style={{ maxWidth: '200px', width: '50%' }} />
 94 |     <span style={{ color: '#5e5e5e' }}>[DEV TOOLS]</span>
 95 |   </span>
 96 | 
 97 | const QueryView = ({ queries }) =>
 98 |   <JSONTree
 99 |     data={queries}
100 |     theme={theme}
101 |     invertTheme={false}
102 |     hideRoot={true}
103 |   />
104 | 
105 | const UserView = ({ user }) =>
106 |   user === null
107 |     ? <div style={{ color: theme.base01, margin: '.5em' }}>No user exists</div>
108 |     : <JSONTree
109 |       data={user}
110 |       theme={theme}
111 |       invertTheme={false}
112 |       hideRoot={true}
113 |     />
114 | 
115 | export function createDevTools (horizon) {
116 |   let devtools = instrument(horizon)
117 |   if (typeof window !== 'undefined') window.devtools = devtools
118 | 
119 |   return class HzDevTools extends Component {
120 |     constructor (props) {
121 |       super(props)
122 | 
123 |       this.handleKeyDown = this.handleKeyDown.bind(this)
124 |       this.handleQueryTextUpdate = this.handleQueryTextUpdate.bind(this)
125 |       this.shouldRunQuery = this.shouldRunQuery.bind(this)
126 | 
127 |       this.state = {
128 |         visible: props.defaultVisible || true,
129 |         position: props.defaultPosition || 'right',
130 |         queries: devtools.queries,
131 |         user: {},
132 |         queryText: '',
133 |         queryTextError: false,
134 |         currentTab: 'query'
135 |       }
136 |     }
137 | 
138 |     componentDidMount () {
139 |       if (typeof window !== 'undefined') window.addEventListener('keydown', this.handleKeyDown)
140 | 
141 |       horizon.currentUser().watch().subscribe(user => {
142 |         this.setState({ user })
143 |       }, () => {
144 |         this.setState({ user: null })
145 |       })
146 | 
147 |       devtools.update = () => {
148 |         this.setState({ queries: devtools.queries })
149 |       }
150 |     }
151 | 
152 |     componentWillUnmount () {
153 |       if (typeof window !== 'undefined') window.removeEventListener('keydown', this.handleKeyDown)
154 |       devtools.update = () => null
155 |     }
156 | 
157 |     handleKeyDown (e) {
158 |       let char = String.fromCharCode(e.keyCode || e.which)
159 |       if (char.toUpperCase() === 'Q' && e.ctrlKey) this.setState({ visible: !this.state.visible })
160 |       if (char.toUpperCase() === 'W' && e.ctrlKey) this.setState({ position: nextPosition(this.state.position) })
161 |     }
162 | 
163 |     handleQueryTextUpdate (e) {
164 |       this.setState({ queryText: e.target.value, queryTextError: false })
165 |     }
166 | 
167 |     shouldRunQuery (e) {
168 |       if (e.keyCode === 13 && e.ctrlKey) {
169 |         this.setState({ queryText: '' })
170 |         this.runQuery(this.state.queryText)
171 | 
172 |         return false
173 |       }
174 |     }
175 | 
176 |     runQuery (query) {
177 |       try {
178 |         let q = eval(query)
179 |         if (q.fetch) { q = q.fetch() }
180 |         if (q.subscribe) { q = q.subscribe() }
181 |         this.setState({ queries: devtools.queries })
182 |       } catch (e) {
183 |         this.setState({ queryTextError: true, queryText: e })
184 |       }
185 |     }
186 | 
187 |     render () {
188 |       return <Dock position={this.state.position} isVisible={this.state.visible} dimMode='none'>
189 |         <pre style={{ padding: '10px', width: 'calc(100% - 20px)', height: '90%', margin: 0, backgroundColor: theme.base00 }}>
190 |           <Logo />
191 |           <hr style={{ borderStyle: 'solid', color: '#5e5e5e' }} />
192 | 
193 |           <ButtonTabs onClick={currentTab => this.setState({ currentTab })} />
194 | 
195 |           <div style={{ overflow: 'auto', height: '100%' }}>
196 |             {this.state.currentTab === 'query'
197 |               ? <QueryView queries={this.state.queries} />
198 |               : this.state.currentTab === 'user'
199 |               ? <UserView user={this.state.user} />
200 |               : null
201 |             }
202 |           </div>
203 |         </pre>
204 |         <textarea
205 |           onChange={this.handleQueryTextUpdate}
206 |           value={this.state.queryText}
207 |           onKeyUp={this.shouldRunQuery}
208 |           placeholder='Write a query using `horizon`. Run with ^ + Enter.'
209 |           style={{ color: this.state.queryTextError ? 'red' : undefined,
210 |                    padding: '5px',
211 |                    position: 'absolute',
212 |                    bottom: '0',
213 |                    width: '97.2%',
214 |                    resize: 'none',
215 |                    height: '10%',
216 |                    fontSize: '12pt',
217 |                    fontFamily: 'monospace'
218 |           }}
219 |         />
220 |       </Dock>
221 |     }
222 |   }
223 | }
224 | 


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { createDevTools } from './devTools'
 4 | 
 5 | let root = document.getElementById('root')
 6 | 
 7 | let DevTools = createDevTools(horizon)
 8 | 
 9 | class App extends Component {
10 |   constructor (props) {
11 |     super(props)
12 | 
13 |     this.state = {
14 |       loaded: false,
15 |       posts: []
16 |     }
17 | 
18 |     horizon('posts').findAll({ message: 'hey' }).watch().subscribe(posts => {
19 |       this.setState({ posts, loaded: true })
20 |     })
21 |   }
22 | 
23 |   render () {
24 |     return <div>
25 |       <h1>Posts</h1>
26 |       {!this.state.loaded
27 |         ? null
28 |         : this.state.posts.map(p => <li key={p.time.toISOString()}>{p.message} - <small>{p.time.toISOString()}</small></li>)
29 |       }
30 |     </div>
31 |   }
32 | }
33 | 
34 | ReactDOM.render(<div>
35 |   <App />
36 |   <DevTools />
37 | </div>, root)
38 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index',
 5 |   output: {
 6 |     path: path.join(__dirname, 'dist'),
 7 |     filename: 'bundle.js'
 8 |   },
 9 |   module: {
10 |     loaders: [{
11 |       test: /\.jsx?$/,
12 |       loaders: ['babel'],
13 |       include: path.join(__dirname, 'src')
14 |     }]
15 |   },
16 |   resolve: {
17 |     extensions: ['', '.js', '.jsx']
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------