Merge pull request #4713 from afshin/fix-json

Fix JSON rendering

dev_mode/package.json

@@ -91,8 +91,8 @@
     "marked": "~0.3.9",
     "moment": "~2.21.0",
     "path-posix": "~1.0.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0",
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0",
     "sanitize-html": "~1.14.3",
     "url-parse": "~1.1.9",
     "xterm": "~3.3.0"

jupyterlab/staging/package.json

@@ -89,8 +89,8 @@
     "marked": "~0.3.9",
     "moment": "~2.21.0",
     "path-posix": "~1.0.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0",
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0",
     "sanitize-html": "~1.14.3",
     "url-parse": "~1.1.9",
     "xterm": "~3.3.0"

jupyterlab/staging/yarn.lock

@@ -4030,6 +4030,15 @@ react-dom@~16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-dom@~16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react-highlighter@^0.4.0:
   version "0.4.2"
   resolved "https://registry.npmjs.org/react-highlighter/-/react-highlighter-0.4.2.tgz#a3a9a8f6eba4c40809d586ac3bf6bec3e04b1735"
@@ -4056,6 +4065,15 @@ react@~16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react@~16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"

packages/application-extension/package.json

@@ -32,7 +32,7 @@
     "@jupyterlab/application": "^0.16.2",
     "@jupyterlab/apputils": "^0.16.3",
     "@jupyterlab/coreutils": "^1.1.2",
-    "react": "~16.2.0"
+    "react": "~16.4.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",

packages/apputils/package.json

@@ -43,8 +43,8 @@
     "@phosphor/virtualdom": "^1.1.2",
     "@phosphor/widgets": "^1.6.0",
     "@types/react": "~16.0.19",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0",
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0",
     "sanitize-html": "~1.14.3"
   },
   "devDependencies": {

packages/cells/package.json

@@ -43,7 +43,7 @@
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/signaling": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0"
+    "react": "~16.4.0"
   },
   "devDependencies": {
     "@types/react": "~16.0.19",

packages/codeeditor/package.json

@@ -37,8 +37,8 @@
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/signaling": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0"
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",

packages/help-extension/package.json

@@ -36,7 +36,7 @@
     "@jupyterlab/mainmenu": "^0.5.2",
     "@jupyterlab/services": "^2.0.2",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0"
+    "react": "~16.4.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",

packages/json-extension/package.json

@@ -32,10 +32,10 @@
     "@jupyterlab/rendermime-interfaces": "^1.0.9",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0",
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0",
     "react-highlighter": "^0.4.0",
-    "react-json-tree": "^0.10.9"
+    "react-json-tree": "^0.11.0"
   },
   "devDependencies": {
     "@types/react": "~16.0.19",

packages/json-extension/src/component.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import * as ReactDOM from 'react-dom';
 
-import JSONTree from 'react-json-tree';
+import Highlight = require('react-highlighter');
 
-import * as Highlight from 'react-highlighter';
+import JSONTree from 'react-json-tree';
 
 import {
   JSONValue,
@@ -48,9 +48,7 @@ class Component extends React.Component<IProps, IState> {
      */
     ReactDOM.findDOMNode(this.input).addEventListener(
       'keydown',
-      (event: Event) => {
-        event.stopPropagation();
-      },
+      (event: Event) => { event.stopPropagation(); },
       false
     );
   }
@@ -58,9 +56,7 @@ class Component extends React.Component<IProps, IState> {
   componentWillUnmount() {
     ReactDOM.findDOMNode(this.input).removeEventListener(
       'keydown',
-      (event: Event) => {
-        event.stopPropagation();
-      },
+      (event: Event) => { event.stopPropagation(); },
       false
     );
   }
@@ -72,10 +68,7 @@ class Component extends React.Component<IProps, IState> {
       ? filterPaths(data, this.state.filter, [root])
       : [root];
     return (
-      <div style={{
-        position: 'relative',
-        width: '100%'
-      }}>
+      <div style={{ position: 'relative', width: '100%' }}>
         <input
           ref={ref => this.input = ref}
           onChange={event => {

packages/json-extension/src/index.tsx

@@ -51,12 +51,13 @@ class RenderedJSON extends Widget implements IRenderMime.IRenderer {
    */
   renderModel(model: IRenderMime.IMimeModel): Promise<void> {
     const data = model.data[this._mimeType] as any;
-    const metadata = model.metadata[this._mimeType] as any || {};
+    const metadata = model.metadata[this._mimeType] as any || { };
     const props = { data, metadata, theme: 'cm-s-jupyter' };
+
     return new Promise<void>((resolve, reject) => {
-      ReactDOM.render(<Component {...props} />, this.node, () => {
-        resolve(undefined);
-      });
+      const component = <Component {...props} />;
+
+      ReactDOM.render(component, this.node, () => { resolve(); });
     });
   }
 

packages/launcher/package.json

@@ -36,7 +36,7 @@
     "@phosphor/disposable": "^1.1.2",
     "@phosphor/properties": "^1.1.2",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0"
+    "react": "~16.4.0"
   },
   "devDependencies": {
     "@types/react": "~16.0.19",

packages/notebook/package.json

@@ -47,7 +47,7 @@
     "@phosphor/signaling": "^1.2.2",
     "@phosphor/virtualdom": "^1.1.2",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0"
+    "react": "~16.4.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",

packages/settingeditor/package.json

@@ -39,8 +39,8 @@
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/signaling": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0"
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0"
   },
   "devDependencies": {
     "@types/react": "~16.0.19",

packages/vdom-extension/package.json

@@ -32,8 +32,8 @@
     "@jupyterlab/rendermime-interfaces": "^1.0.9",
     "@nteract/transform-vdom": "^1.1.1",
     "@phosphor/widgets": "^1.6.0",
-    "react": "~16.2.0",
-    "react-dom": "~16.2.0"
+    "react": "~16.4.0",
+    "react-dom": "~16.4.0"
   },
   "devDependencies": {
     "@types/react": "~16.0.19",

tests/package.json

@@ -38,7 +38,7 @@
     "chai": "~4.1.2",
     "expect.js": "~0.3.1",
     "json-to-html": "~0.1.2",
-    "react": "~16.2.0",
+    "react": "~16.4.0",
     "simulate-event": "~1.4.0"
   },
   "devDependencies": {

tests/test-apputils/package.json

@@ -26,7 +26,7 @@
     "@phosphor/widgets": "^1.6.0",
     "chai": "~4.1.2",
     "expect.js": "~0.3.1",
-    "react": "~16.2.0",
+    "react": "~16.4.0",
     "simulate-event": "~1.4.0"
   },
   "devDependencies": {

yarn.lock

@@ -6571,9 +6571,9 @@ react-base16-styling@^0.5.1:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
-react-dom@~16.2.0:
-  version "16.2.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+react-dom@~16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6589,17 +6589,17 @@ react-highlighter@^0.4.0:
     escape-string-regexp "^1.0.5"
     prop-types "^15.6.0"
 
-react-json-tree@^0.10.9:
-  version "0.10.9"
-  resolved "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.10.9.tgz#7263173a2cc8bf05eac63b0419c3ce75b232e284"
+react-json-tree@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.11.0.tgz#f5b17e83329a9c76ae38be5c04fda3a7fd684a35"
   dependencies:
     babel-runtime "^6.6.1"
     prop-types "^15.5.8"
     react-base16-styling "^0.5.1"
 
-react@~16.2.0:
-  version "16.2.0"
-  resolved "https://registry.npmjs.org/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+react@~16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"