From a4624127e678ba0968d2df8fe4ffc46cc4756f3c Mon Sep 17 00:00:00 2001 From: Joe McBride Date: Mon, 18 May 2015 13:20:06 -0700 Subject: [PATCH] Move dependencies to peer. Rename files. Add classNames. * Rename CodeMirror to CodeMirrorSettings. * Simplify checking for node. * Add a number of places to provide a custom className. * Move react and codemirror to peer dependencies. --- lib/CodeMirror.client.js | 17 ----------------- lib/CodeMirror.js | 10 ---------- lib/CodeMirrorEditor.js | 22 ++++++++-------------- lib/CodeMirrorSettings.js | 18 ++++++++++++++++++ lib/Playground.js | 22 ++++++++++++++++++---- lib/is_mobile.js | 2 +- package.json | 8 +++++--- src/CodeMirror.client.js | 6 ------ src/CodeMirror.js | 4 ---- src/CodeMirrorEditor.js | 19 +++++++------------ src/CodeMirrorSettings.js | 12 ++++++++++++ src/Playground.js | 22 +++++++++++++++++----- src/is_mobile.js | 2 +- 13 files changed, 87 insertions(+), 77 deletions(-) delete mode 100644 lib/CodeMirror.client.js delete mode 100644 lib/CodeMirror.js create mode 100644 lib/CodeMirrorSettings.js delete mode 100644 src/CodeMirror.client.js delete mode 100644 src/CodeMirror.js create mode 100644 src/CodeMirrorSettings.js diff --git a/lib/CodeMirror.client.js b/lib/CodeMirror.client.js deleted file mode 100644 index b7b6a3b..0000000 --- a/lib/CodeMirror.client.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { - value: true -}); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -var _codemirror = require('codemirror'); - -var _codemirror2 = _interopRequireDefault(_codemirror); - -exports['default'] = { - IS_NODE: false, - CodeMirror: _codemirror2['default'] -}; -module.exports = exports['default']; \ No newline at end of file diff --git a/lib/CodeMirror.js b/lib/CodeMirror.js deleted file mode 100644 index 774f2aa..0000000 --- a/lib/CodeMirror.js +++ /dev/null @@ -1,10 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports["default"] = { - IS_NODE: true, - CodeMirror: {} -}; -module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/CodeMirrorEditor.js b/lib/CodeMirrorEditor.js index 0b17c87..2aedcf7 100644 --- a/lib/CodeMirrorEditor.js +++ b/lib/CodeMirrorEditor.js @@ -20,7 +20,7 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react); -var _CodeMirror = require('./CodeMirror'); +var _CodeMirrorSettings = require('./CodeMirrorSettings'); var _is_mobile = require('./is_mobile'); @@ -39,11 +39,11 @@ var CodeMirrorEditor = (function (_React$Component) { key: 'componentDidMount', value: function componentDidMount() { - if (_is_mobile.IS_MOBILE || _CodeMirror.IS_NODE) { + if (_is_mobile.IS_MOBILE || !_CodeMirrorSettings.IS_BROWSER) { return; } - this.editor = _CodeMirror.CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), { + this.editor = _CodeMirrorSettings.CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), { mode: this.props.mode, lineNumbers: this.props.lineNumbers, lineWrapping: false, @@ -54,13 +54,6 @@ var CodeMirrorEditor = (function (_React$Component) { }); this.editor.on('change', this.handleChange); } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate() { - if (this.props.readOnly) { - this.editor.setValue(this.props.text); - } - } }, { key: 'handleChange', value: function handleChange() { @@ -87,7 +80,7 @@ var CodeMirrorEditor = (function (_React$Component) { return _react2['default'].createElement( 'div', - { style: this.props.style, className: this.props.className }, + { className: this.props.className }, editor ); } @@ -96,12 +89,12 @@ var CodeMirrorEditor = (function (_React$Component) { return CodeMirrorEditor; })(_react2['default'].Component); -CodeMirrorEditor.PropTypes = { +CodeMirrorEditor.propTypes = { text: _react2['default'].PropTypes.string, theme: _react2['default'].PropTypes.string, mode: _react2['default'].PropTypes.string, lineNumbers: _react2['default'].PropTypes.bool, - className: _react2['default'].PropTypes.className, + className: _react2['default'].PropTypes.string, readOnly: _react2['default'].PropTypes.bool, onChange: _react2['default'].PropTypes.func }; @@ -109,7 +102,8 @@ CodeMirrorEditor.PropTypes = { CodeMirrorEditor.defaultProps = { mode: 'javascript', theme: 'solarized light', - lineNumbers: false + lineNumbers: false, + readOnly: false }; exports['default'] = CodeMirrorEditor; diff --git a/lib/CodeMirrorSettings.js b/lib/CodeMirrorSettings.js new file mode 100644 index 0000000..fcb72ce --- /dev/null +++ b/lib/CodeMirrorSettings.js @@ -0,0 +1,18 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); +var IS_BROWSER = typeof window !== 'undefined'; + +var CodeMirror = {}; + +if (IS_BROWSER) { + CodeMirror = require('codemirror'); +} + +exports['default'] = { + IS_BROWSER: IS_BROWSER, + CodeMirror: CodeMirror +}; +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/Playground.js b/lib/Playground.js index 723d446..9287458 100644 --- a/lib/Playground.js +++ b/lib/Playground.js @@ -30,6 +30,8 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); +var _is_mobile = require('./is_mobile'); + var React = modReact['default']; var Playground = (function (_React$Component) { @@ -64,8 +66,6 @@ var Playground = (function (_React$Component) { return this.props.displayError(error, transformed); } else { - console.log(error, transformed); - return React.createElement( 'div', { className: 'code-error' }, @@ -143,11 +143,23 @@ var Playground = (function (_React$Component) { codeToggleClasses['code-toggle'] = true; codeToggleClasses.expanded = this.state.showEditor; + if (this.props.toggleClass) { + codeToggleClasses[this.props.toggleClass] = true; + } + var toggleText = this.state.showEditor ? 'Hide Code' : 'Show Code'; + var playgroundClasses = {}; + playgroundClasses.playground = true; + playgroundClasses.mobile = _is_mobile.IS_MOBILE; + + if (this.props.className) { + playgroundClasses[this.props.className] = true; + } + return React.createElement( 'div', - { className: 'playground' }, + { className: _classnames2['default'](playgroundClasses) }, React.createElement( 'div', { className: _classnames2['default'](exampleClasses) }, @@ -174,7 +186,9 @@ Playground.propTypes = { displayError: React.PropTypes.func, theme: React.PropTypes.string, mode: React.PropTypes.string, - lineNumbers: React.PropTypes.bool + lineNumbers: React.PropTypes.bool, + className: React.PropTypes.string, + toggleClass: React.PropTypes.string }; Playground.defaultProps = { diff --git a/lib/is_mobile.js b/lib/is_mobile.js index 0a0fbc6..92f8919 100644 --- a/lib/is_mobile.js +++ b/lib/is_mobile.js @@ -7,6 +7,6 @@ Object.defineProperty(exports, '__esModule', { var IS_MOBILE = typeof navigator !== 'undefined' && (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)); exports['default'] = { - IS_MOBILE: IS_MOBILE + IS_MOBILE: IS_MOBILE != null ? true : false }; module.exports = exports['default']; \ No newline at end of file diff --git a/package.json b/package.json index c481c2c..0d750f3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-playground", - "version": "0.0.1", + "version": "0.0.2", "description": "React Playground", "main": "lib/index.js", "scripts": { @@ -15,6 +15,10 @@ ], "author": "Joe McBride", "license": "MIT", + "peerDependencies": { + "codemirror": ">=5.2.0", + "react": ">=0.13.2" + }, "devDependencies": { "babel": "^5.2.17", "babel-core": "^5.2.17", @@ -23,7 +27,6 @@ "child-process-promise": "^1.0.2", "classnames": "^2.1.1", "client-loader": "0.0.1", - "codemirror": "^5.2.0", "colors": "^1.1.0", "css-loader": "^0.12.0", "eslint": "^0.20.0", @@ -40,7 +43,6 @@ "lodash": "^3.8.0", "portfinder": "^0.4.0", "raw-loader": "^0.5.1", - "react": "^0.13.2", "rimraf": "^2.3.3", "style-loader": "^0.12.2", "webpack": "^1.8.11", diff --git a/src/CodeMirror.client.js b/src/CodeMirror.client.js deleted file mode 100644 index 7949d58..0000000 --- a/src/CodeMirror.client.js +++ /dev/null @@ -1,6 +0,0 @@ -import CodeMirror from 'codemirror'; - -export default { - IS_NODE: false, - CodeMirror -}; diff --git a/src/CodeMirror.js b/src/CodeMirror.js deleted file mode 100644 index 1639c02..0000000 --- a/src/CodeMirror.js +++ /dev/null @@ -1,4 +0,0 @@ -export default { - IS_NODE: true, - CodeMirror: {} -}; diff --git a/src/CodeMirrorEditor.js b/src/CodeMirrorEditor.js index 6113996..dd3a404 100644 --- a/src/CodeMirrorEditor.js +++ b/src/CodeMirrorEditor.js @@ -1,5 +1,5 @@ import React from 'react'; -import {CodeMirror, IS_NODE} from './CodeMirror'; +import {CodeMirror, IS_BROWSER} from './CodeMirrorSettings'; import {IS_MOBILE} from './is_mobile'; class CodeMirrorEditor extends React.Component { @@ -12,7 +12,7 @@ class CodeMirrorEditor extends React.Component { componentDidMount() { - if (IS_MOBILE || IS_NODE) { + if (IS_MOBILE || !IS_BROWSER) { return; } @@ -28,12 +28,6 @@ class CodeMirrorEditor extends React.Component { this.editor.on('change', this.handleChange); } - componentDidUpdate() { - if (this.props.readOnly) { - this.editor.setValue(this.props.text); - } - } - handleChange() { if (!this.props.readOnly && this.props.onChange) { this.props.onChange(this.editor.getValue()); @@ -52,19 +46,19 @@ class CodeMirrorEditor extends React.Component { } return ( -
+
{editor}
); } } -CodeMirrorEditor.PropTypes = { +CodeMirrorEditor.propTypes = { text: React.PropTypes.string, theme: React.PropTypes.string, mode: React.PropTypes.string, lineNumbers: React.PropTypes.bool, - className: React.PropTypes.className, + className: React.PropTypes.string, readOnly: React.PropTypes.bool, onChange: React.PropTypes.func }; @@ -72,7 +66,8 @@ CodeMirrorEditor.PropTypes = { CodeMirrorEditor.defaultProps = { mode: 'javascript', theme: 'solarized light', - lineNumbers: false + lineNumbers: false, + readOnly: false }; export default CodeMirrorEditor; diff --git a/src/CodeMirrorSettings.js b/src/CodeMirrorSettings.js new file mode 100644 index 0000000..df937b5 --- /dev/null +++ b/src/CodeMirrorSettings.js @@ -0,0 +1,12 @@ +let IS_BROWSER = typeof window !== 'undefined'; + +let CodeMirror = {}; + +if (IS_BROWSER) { + CodeMirror = require('codemirror'); +} + +export default { + IS_BROWSER: IS_BROWSER, + CodeMirror: CodeMirror +}; diff --git a/src/Playground.js b/src/Playground.js index 430fd36..09fec2e 100644 --- a/src/Playground.js +++ b/src/Playground.js @@ -1,10 +1,10 @@ import * as modReact from 'react'; import CodeMirrorEditor from './CodeMirrorEditor'; import classNames from 'classnames'; +import {IS_MOBILE} from './is_mobile'; const React = modReact.default; - class Playground extends React.Component { constructor(props) { @@ -31,8 +31,6 @@ class Playground extends React.Component { return this.props.displayError(error, transformed); } else { - console.log(error, transformed); - return (

Oh snap! You got an error!

@@ -101,10 +99,22 @@ class Playground extends React.Component { codeToggleClasses['code-toggle'] = true; codeToggleClasses.expanded = this.state.showEditor; + if (this.props.toggleClass) { + codeToggleClasses[this.props.toggleClass] = true; + } + let toggleText = this.state.showEditor ? 'Hide Code' : 'Show Code'; + let playgroundClasses = {}; + playgroundClasses.playground = true; + playgroundClasses.mobile = IS_MOBILE; + + if (this.props.className) { + playgroundClasses[this.props.className] = true; + } + return ( -
+
{this.compile()}
@@ -123,7 +133,9 @@ Playground.propTypes = { displayError: React.PropTypes.func, theme: React.PropTypes.string, mode: React.PropTypes.string, - lineNumbers: React.PropTypes.bool + lineNumbers: React.PropTypes.bool, + className: React.PropTypes.string, + toggleClass: React.PropTypes.string }; Playground.defaultProps = { diff --git a/src/is_mobile.js b/src/is_mobile.js index c381c39..169af57 100644 --- a/src/is_mobile.js +++ b/src/is_mobile.js @@ -10,5 +10,5 @@ const IS_MOBILE = typeof navigator !== 'undefined' && ( ); export default { - IS_MOBILE: IS_MOBILE + IS_MOBILE: IS_MOBILE != null ? true : false };