Set up a structure for JSONEditor base class (instead of Main)

src/JSONEditor.js

@@ -0,0 +1,59 @@
+import { h, Component } from 'preact'
+
+import TreeMode from './TreeMode'
+import bindMethods from './utils/bindMethods'
+
+// TODO: implement and use JSONEditor.js after we've integrated Redux.
+
+export default class JSONEditor extends Component {
+  constructor (props) {
+    super(props)
+
+    bindMethods(this)
+
+    this.state = {
+      options: props.options,
+      data: null
+    }
+  }
+
+  render () {
+    return h(TreeMode, {
+      ref: 'tree-mode',
+      options: this.state.options,
+      data: this.state.data
+    }, [])
+  }
+
+  /**
+   * Set JSON object in editor
+   * @param {Object | Array | string | number | boolean | null} json   JSON data
+   * @param {SetOptions} [options]
+   */
+  set (json, options = {}) {
+    if (this.refs['tree-mode']) {
+      this.refs['tree-mode'].set(json, options)
+    }
+    else {
+      // not yet rendered
+      this.setState({
+        data: json,
+        options
+      })
+    }
+  }
+
+  /**
+   * Get JSON from the editor
+   * @returns {Object | Array | string | number | boolean | null} json
+   */
+  get () {
+    if (this.refs['tree-mode']) {
+      return this.refs['tree-mode'].get()
+    }
+    else {
+      // not yet rendered
+      return this.state.data
+    }
+  }
+}

src/JSONNode.js

@@ -27,6 +27,8 @@ const TYPE_TITLES = {
 let activeContextMenu = null
 
 export default class JSONNode extends Component {
+  // TODO: define propTypes
+
   constructor (props) {
     super(props)
 

src/TreeMode.js

@@ -7,23 +7,24 @@ import { isObject } from './utils/typeUtils'
 import bindMethods from './utils/bindMethods'
 import JSONNode from './JSONNode'
 
-export default class Main extends Component {
+export default class TreeMode extends Component {
+  // TODO: define propTypes
+
   constructor (props) {
     super(props)
 
     bindMethods(this)
 
+    const name   = this.props.options && this.props.options.name || null
+    const expand = this.props.options && this.props.options.expand || TreeMode.expand
+    
     this.state = {
       options: {
-        name: null
+        name
-      },
-
-      data: {
-        type: 'object',
-        expanded: true,
-        props: []
       },
 
+      data: jsonToData([], this.props.data || {}, expand),
+      
       events: {
         onChangeProperty: this.handleChangeProperty,
         onChangeValue: this.handleChangeValue,
@@ -285,7 +286,7 @@ export default class Main extends Component {
     this.setState({
       options: setIn(this.state.options, ['name'], options && options.name || null),
 
-      data: jsonToData([], json, options.expand || Main.expand)
+      data: jsonToData([], json, options.expand || TreeMode.expand)
     })
   }
 

src/index.js

@@ -1,5 +1,5 @@
 import { h, render } from 'preact'
-import Main from './Main'
+import TreeMode from './TreeMode'
 
 /**
  * Factory function to create a new JSONEditor
@@ -9,7 +9,8 @@ import Main from './Main'
  * @constructor
  */
 export default function jsoneditor (container, options) {
-  const elem = render(h(Main, {options}), container)
+  // TODO: use JSONEditor instead of TreeMode
+  const elem = render(h(TreeMode, {options}), container)
   return elem._component
 }