feat: Store settings at URL, close #2

Author: finom

README.md

@@ -1,6 +1,6 @@
 # jsoncompare.com [![Build Status](https://travis-ci.org/circlecell/jsoncompare.com.svg?branch=master)](https://travis-ci.org/circlecell/jsoncompare.com)
 
-Source code for http://jsoncompare.com
+Source code for [jsoncompare.com](jsoncompare.com).
 
 ## API
 ``POST https://jsoncompare.com/api/save`` - saves current application state on S3.

packages/frontend/js/main/index.js

@@ -3,22 +3,55 @@ import { dataset } from 'matreshka/binders';
 import initRouter from 'matreshka-router';
 import beautify from 'js-beautify/js/lib/beautify';
 import minify from 'jsonminify';
+import qs from 'qs';
 import LintEditor from '../linteditor';
 import Sandbox from './components/sandbox';
 import Tabs from './tabs';
 
-
 export default class Main extends Matreshka {
     constructor() {
-        initRouter(super(), 'mode/id')
+        initRouter(super(), 'mode/params')
             .instantiate('tabs', Tabs)
             .set({
                 memo: {},
                 mode: this.mode || 'simple',
                 defaultView: this.toJSONString(),
                 saved: true,
-                loading: true,
-                fullscreen: false
+                loading: true
+            })
+            .calc({
+                id: {
+                    source: 'params',
+                    handler: params => (qs.parse(params).id || null)
+                },
+                fullscreen: {
+                    source: 'params',
+                    handler: params => 'fullscreen' in qs.parse(params)
+                },
+                reformat: {
+                    source: 'params',
+                    handler: params => (qs.parse(params).reformat || null)
+                },
+                params: {
+                    source: ['id', 'fullscreen', 'reformat'],
+                    handler(id, fullscreen, reformat) {
+                        const params = [];
+
+                        if (id) {
+                            params.push(`id=${id}`);
+                        }
+
+                        if (fullscreen) {
+                            params.push('fullscreen');
+                        }
+
+                        if (reformat) {
+                            params.push(`reformat=${reformat}`);
+                        }
+
+                        return params.join('&');
+                    }
+                }
             })
             .bindSandbox(<Sandbox owner={this} />)
             .bindNode('win', window)

packages/frontend/js/realdom/createelement.js

@@ -11,6 +11,18 @@ module.exports = function createElement(givenElement, attributes, ...children) {
         element = givenElement;
     }
 
+    for (let i = 0; i < children.length; i++) {
+        let child = children[i];
+
+        if (typeof child === 'string') {
+            child = document.createTextNode(child);
+        }
+
+        if (child instanceof Node) {
+            element.appendChild(child);
+        }
+    }
+
     if (attributes) {
         for (let i = 0, keys = Object.keys(attributes); i < keys.length; i++) {
             const name = keys[i];
@@ -25,25 +37,11 @@ module.exports = function createElement(givenElement, attributes, ...children) {
                 && lowerCasedName in element
             ) {
                 element[lowerCasedName] = value;
-            } else {
+            } else if (name !== 'owner') {
                 element.setAttribute(name, value);
             }
         }
     }
 
-    for (let i = 0; i < children.length; i++) {
-        let child = children[i];
-
-        if (typeof child === 'string') {
-            child = document.createTextNode(child);
-        }
-
-        if (!(child instanceof Node)) {
-            throw Error(`RealDOM JSX can not contain ${typeof child}`);
-        }
-
-        element.appendChild(child);
-    }
-
     return element;
 };

packages/frontend/package-lock.json

@@ -28,6 +28,7 @@
     "matreshka-binders-file": "0.0.2",
     "matreshka-router": "1.0.30",
     "object.assign": "^4.0.4",
+    "qs": "^6.4.0",
     "valid-url": "^1.0.9"
   },
   "devDependencies": {