Merge pull request #3 from JeanBaptisteWATENBERG/preview-json-path-evaluation-in-context

Preview json path evaluation in context

Author: JeanBaptisteWATENBERG

.travis.yml

@@ -1,16 +1,25 @@
 sudo: false
-
 language: node_js
 node_js:
-  - 8
-
+- 8
 before_install:
-  - npm install codecov.io coveralls
-
+- npm install codecov.io coveralls
 after_success:
-  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
-  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
-
+- cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
+- cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+- npm run docz:build
 branches:
   only:
-    - master
+  - master
+deploy:
+  - provider: npm
+    email: "jeanbaptiste.watenberg@gmail.com"
+    on:
+      branch: master
+    api_key:
+      secure: gpLMqNojmvhWMHWoskbjdNY053xujK8VbxiksEXj0b44eUvdGkiRnugeKEgaDPjBLl2vx9jjw+awQlUnNieWn+V3fFAq1BAAChJYR7kDD7Wl4hV2TiihXFWWwE89GdGggol5VbIsX+JZsCaPrrQnEjc6CFFSBBRdCLokGlURreT67cHb+n4kuwBalq5HX9Gvymdcpc4akWWhr73HQFT6hK4wpqsXU5TSvCe9jsHBjTTFmviLtUE3sLQB7iUG++2vLlSaRVqUx37ty5RSZgaPrvymMdb8xWMpCkdN+fr2fRSs/8YDy0eva4Vezcfjc5eBY7+LbEportVKp9JLaoyNvA0JJpUaHkGlOKTrfAIRVPfXJkk9IBxSqg+Lnse+RMKCU+eCN6W86EjLlvjREfpK8KkhWBqNBhg3ar0bcVm+7XQYp2FhXMrKK4KMK6PCQGyPr7ip7sbUJLJ5/zYraOq/s7vJuY1MqmJV2+QalYeWmD1+6iFOLlmQ4/hCwbp9Gdco7PHRX2flA2+Td1V++3rvRRLATfBQKosue00Bux1u1FSGIUTYGcSdHlTKZ0U0CsJXoUn0DnOOhwURdRsNK2t8j6R+CB4z0e0lIEqx4SG2+/+74FOJE7RuNi7+Us/By5g8a3fpbH/MSJ1cXlw5vrE4B88La4/tx4RMEUGAIU5R56U=
+  - provider: surge
+    project: .docz/dist
+    domain: react-jsonpath-editor.surge.sh
+    on:
+      branch: master

demo/src/index.js

@@ -1,31 +1,72 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
+import React, {Component} from 'react';
+import {render} from 'react-dom';
 
-import JsonPathEditor from '../../src'
+import JsonPathEditor from '../../src';
+import Previewer from '../../src/components/JsonPathPreviewer';
 import { generateRandomJson } from './generateRandomJson';
 
 
 class Demo extends Component {
-  constructor(props) {
-    super(props)
+    constructor(props) {
+        super(props);
 
-    this.state = {
-      json: generateRandomJson(5)
+        this.state = {
+            json: generateRandomJson(5)
+        };
     }
-  }
 
-  render() {
-    const {json} = this.state;
-    return <div>
-      <h1>react-jsonpath-editor Demo</h1>
-      <h2>With a default json</h2>
-      <JsonPathEditor/>
-      <h2>With a random json and a default value <button onClick={() => this.setState({json: generateRandomJson(5)})}>Click here to generate a new input json</button></h2>
-      <JsonPathEditor value='$' json={json}/>
-      <h2>With a default value</h2>
-      <JsonPathEditor value='$.store.book'/>
-    </div>
-  }
+    render() {
+        const {json} = this.state;
+        return <div>
+            <h1>react-jsonpath-editor Demo</h1>
+            <h2>With a default json</h2>
+            <JsonPathEditor/>
+            <h2>With a random json and a default value <button onClick={() => this.setState({json: generateRandomJson(5)})}>Click here to generate a new input json</button></h2>
+            <JsonPathEditor value='$' json={json}/>
+            <h2>With a default value</h2>
+            <JsonPathEditor value='$.store.book'/>
+            <br/>
+            <br/>
+            <br/>
+            <Previewer json={{
+                'store': {
+                    'book': [
+                        {
+                            'category': 'reference',
+                            'author': 'Nigel Rees',
+                            'title': 'Sayings of the Century',
+                            'price': 8.95
+                        },
+                        {
+                            'category': 'fiction',
+                            'author': 'Evelyn Waugh',
+                            'title': 'Sword of Honour',
+                            'price': 12.99
+                        },
+                        {
+                            'category': 'fiction',
+                            'author': 'Herman Melville',
+                            'title': 'Moby Dick',
+                            'isbn': '0-553-21311-3',
+                            'price': 8.99
+                        },
+                        {
+                            'category': 'fiction',
+                            'author': 'J. R. R. Tolkien',
+                            'title': 'The Lord of the Rings',
+                            'isbn': '0-395-19395-8',
+                            'price': 22.99
+                        }
+                    ],
+                    'bicycle': {
+                        'color': 'red',
+                        'price': 19.95
+                    }
+                }
+            }} jsonPath='$.store' />
+
+        </div>;
+    }
 }
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo/>, document.querySelector('#demo'));

docs/react-jsonpath-editor.png

@@ -2,9 +2,6 @@ import { css } from 'docz-plugin-css';
 import { svgr } from 'docz-plugin-svgr';
 
 export default {
-    themeConfig: {
-        mode: 'dark'
-    },
     plugins: [
         svgr(),
         css()

doczrc.js

@@ -1,6 +1,6 @@
 {
   "name": "react-jsonpath-editor",
-  "version": "1.1.0-beta.3",
+  "version": "1.2.0",
   "description": "react-jsonpath-editor React component",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "easy-json-schema": "0.0.2-beta",
-    "jsoneditor": "^5.16.0",
     "jsonpath": "^1.0.0",
     "prop-types": "^15.6.2"
   },

package.json

@@ -0,0 +1,54 @@
+---
+name: react-json-path-previewer
+route: /json-path-previewer
+---
+
+import { Playground, PropsTable } from 'docz'
+import { JsonPathPreviewer } from './';
+
+# React JSON Path previewer
+
+<PropsTable of={JsonPathPreviewer} />
+
+## Basic usage
+
+<Playground>
+    <JsonPathPreviewer 
+     jsonPath='$..author'
+    json={{
+    'store': {
+        'book': [
+            {
+                'category': 'reference',
+                'author': 'Nigel Rees',
+                'title': 'Sayings of the Century',
+                'price': 8.95
+            },
+            {
+                'category': 'fiction',
+                'author': 'Evelyn Waugh',
+                'title': 'Sword of Honour',
+                'price': 12.99
+            },
+            {
+                'category': 'fiction',
+                'author': 'Herman Melville',
+                'title': 'Moby Dick',
+                'isbn': '0-553-21311-3',
+                'price': 8.99
+            },
+            {
+                'category': 'fiction',
+                'author': 'J. R. R. Tolkien',
+                'title': 'The Lord of the Rings',
+                'isbn': '0-395-19395-8',
+                'price': 22.99
+            }
+        ],
+        'bicycle': {
+            'color': 'red',
+            'price': 19.95
+        }
+    }
+}}/>
+</Playground>

src/JsonPathPreviewer.mdx

@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
-import JSONEditor from 'jsoneditor';
 import jp from 'jsonpath/jsonpath.min';
 import ejs from 'easy-json-schema';
 import { getSuggestions } from './suggestionBuilder';
 import { getInputSelection, setCaretPosition, insertAtCursor } from './getInputSelection';
 import SuggestionList from './SuggestionList';
 
-import 'jsoneditor/dist/jsoneditor.min.css';
 import './editor.css';
+import JsonPathPreviewer from './JsonPathPreviewer';
 
 const defaultJsonToFilter = {
     'store': {
@@ -51,8 +50,6 @@ class Editor extends Component {
     constructor(props) {
         super(props);
 
-        this.jsonEditorRef = React.createRef();
-        this.onJsonChange = this.onJsonChange.bind(this);
         this.onSelectSuggestion = this.onSelectSuggestion.bind(this);
         this.onCaretChanged = this.onCaretChanged.bind(this);
 
@@ -64,10 +61,7 @@ class Editor extends Component {
     }
 
     componentDidMount() {
-        this.jsonEditor = new JSONEditor(this.jsonEditorRef.current, { modes: ['tree', 'code'], search: false, change: this.onJsonChange });
-        this.jsonEditor.set(this.state.jsonToFilter);
         this.initSchema(this.props);
-        this.jsonEditor.expandAll();
         this.evalPathAndSuggestions(this.props);
         this.props.input.addEventListener('keyup',this.onCaretChanged);
         this.props.input.addEventListener('click',this.onCaretChanged);
@@ -90,7 +84,6 @@ class Editor extends Component {
     initSchema(props) {
         if (props.jsonSchema) {
             this.setState({ jsonSchema: props.jsonSchema });
-            this.jsonEditor.setSchema(props.jsonSchema);
         } else {
             const schema = ejs(this.state.jsonToFilter);
             this.setState({ jsonSchema: schema });
@@ -104,14 +97,10 @@ class Editor extends Component {
                 this.setState({ jsonToFilter: newProps.json }, () => {
                     resolve();
                 });
-                this.jsonEditor.set(newProps.json);
             });
 
             promises.push(jsonToFilterStatePromise);
         }
-        if (newProps.jsonSchema) {
-            this.jsonEditor.setSchema(newProps.jsonSchema);
-        }
 
         // ensure state modifications to jsonToFilter did propagate
         if (promises.length > 0) {
@@ -134,22 +123,9 @@ class Editor extends Component {
             );
 
             this.setState({ suggestions });
-
-            try {
-                const filteredJson = jp.query(this.state.jsonToFilter, props.jsonpath);
-                this.jsonEditor.set(filteredJson);
-                this.jsonEditor.expandAll();
-            } catch (e) {
-                this.jsonEditor.set(this.state.jsonToFilter);
-                this.jsonEditor.expandAll();
-            }
         }
     }
 
-    onJsonChange() {
-        this.setState({ jsonToFilter: this.jsonEditor.get() }, () => this.initSchema(this.props));
-    }
-
     onSelectSuggestion(suggestion) {
         const initialJsonPathLength = this.props.jsonpath.length;
 
@@ -174,15 +150,20 @@ class Editor extends Component {
             left: this.props.position.x,
         };
 
+        const {jsonpath} = this.props;
+        const {jsonToFilter, suggestions} = this.state;
+
         return <div className='react-json-path-editor-container' style={style} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave}>
             <div className='react-json-path-editor-intellisense'>
                 <SuggestionList
-                    suggestions={this.state.suggestions}
+                    suggestions={suggestions}
                     onSelectSuggestion={this.onSelectSuggestion}
                 // onSelectSuggestionToSimulate={}
                 />
             </div>
-            <div className='react-json-path-editor-jsoneditor-container' ref={this.jsonEditorRef}></div>
+            <div className='react-json-path-editor-jsoneditor-container'>
+                <JsonPathPreviewer json={jsonToFilter} jsonPath={jsonpath}/>
+            </div>
         </div>;
     }
 }

src/components/Editor.js

@@ -0,0 +1,13 @@
+.highlighted {
+    color: green;
+    font-weight: bold;
+}
+
+code {
+    color: #777;
+    font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+}
+
+code p {
+    margin: 0;
+}