diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json index 00f63e9b68c3f..7d3c5e0e17830 100644 --- a/fixtures/dom/package.json +++ b/fixtures/dom/package.json @@ -6,14 +6,14 @@ "react-scripts": "^1.0.11" }, "dependencies": { - "buble": "^0.19.3", + "@babel/standalone": "^7.0.0", "classnames": "^2.2.5", "core-js": "^2.4.1", "prop-types": "^15.6.0", "query-string": "^4.2.3", "react": "^15.4.1", + "react-codemirror": "^1.0.0", "react-dom": "^15.4.1", - "react-live": "^1.11.0", "semver": "^5.5.0" }, "scripts": { diff --git a/fixtures/dom/public/renderer.html b/fixtures/dom/public/renderer.html index acefa6c3a2a90..f0e7a8f9234c1 100644 --- a/fixtures/dom/public/renderer.html +++ b/fixtures/dom/public/renderer.html @@ -79,6 +79,7 @@
+ diff --git a/fixtures/dom/public/renderer.js b/fixtures/dom/public/renderer.js index b198ee2037b5c..5e3a541cb6443 100644 --- a/fixtures/dom/public/renderer.js +++ b/fixtures/dom/public/renderer.js @@ -125,16 +125,20 @@ } window.addEventListener('message', function(event) { - switch (event.data.type) { + var data = JSON.parse(event.data); + + switch (data.type) { case 'code': - reloadFixture(event.data.payload); + reloadFixture(data.payload); break; default: - throw new Error('Unrecognized message: ' + event.data.type); + throw new Error( + 'Renderer Error: Unrecognized message "' + data.type + '"' + ); } }); - window.parent.postMessage({type: 'ready'}, '*'); + window.parent.postMessage(JSON.stringify({type: 'ready'}), '*'); }) .catch(handleError); })(); diff --git a/fixtures/dom/src/components/fixtures/hydration/Code.js b/fixtures/dom/src/components/fixtures/hydration/Code.js index f4ee73a63ab95..9a3e97cd7a3bd 100644 --- a/fixtures/dom/src/components/fixtures/hydration/Code.js +++ b/fixtures/dom/src/components/fixtures/hydration/Code.js @@ -1,50 +1,27 @@ -/** - * react-live does not support React 14. For this version, just return - * a textarea. - * - * TODO: Could we just get rid of react-live? It only adds syntax highlighting - */ +import 'codemirror/lib/codemirror.css'; +import './codemirror-gruvbox-dark.css'; +import 'codemirror/mode/jsx/jsx'; -import semver from 'semver'; -import {LiveProvider, LiveEditor, LiveError} from 'react-live'; +import CodeMirror from 'react-codemirror'; const React = window.React; -const supportsReactLive = semver(React.version).major > 1; // React 15 or higher -export class CodeProvider extends React.Component { - render() { - const {code, children} = this.props; - - if (supportsReactLive) { - return ; - } - - return
{children}
; - } -} +const options = { + lineNumbers: true, + mode: 'jsx', + theme: 'gruvbox-dark', +}; export class CodeEditor extends React.Component { render() { const {code, onChange} = this.props; - - if (supportsReactLive) { - return ; - } - - return ( -