Skip to content

add non-jsx view to interactive code samples #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 16, 2017
Merged

add non-jsx view to interactive code samples #141

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
527f503
add non-jsx view to to interactive code samples
criticalbh Oct 11, 2017
6bd11c1
99 fix prettier, lint and flow
criticalbh Oct 11, 2017
9876647
99 replace button with checkbox and apply proposed changes
criticalbh Oct 12, 2017
8a0eda3
use callback for setState
criticalbh Oct 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 41 additions & 11 deletions src/components/CodeEditor/CodeEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,23 @@ import ReactDOM from 'react-dom';
import Remarkable from 'remarkable';
// TODO: switch back to the upstream version of react-live
// once https://github.com/FormidableLabs/react-live/issues/37 is fixed.
import {LiveProvider, LiveEditor} from '@gaearon/react-live';
import {LiveEditor, LiveProvider} from '@gaearon/react-live';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😆 Love the ninja alpha-sort

import {colors, media} from 'theme';
import MetaTitle from 'templates/components/MetaTitle';

const compile = code =>
Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
const compileES5 = (
code, // eslint-disable-next-line no-undef
) => Babel.transform(code, {presets: ['es2015', 'react']}).code;

// eslint-disable-next-line no-undef
const compileES6 = code => Babel.transform(code, {presets: ['react']}).code;

class CodeEditor extends Component {
constructor(props, context) {
super(props, context);

this.state = this._updateState(props.code);
this.state.showJSX = true;
}

componentDidMount() {
Expand All @@ -38,11 +43,11 @@ class CodeEditor extends Component {
}

render() {
const {children, code} = this.props;
const {error} = this.state;
const {children} = this.props;
const {compiledES6, code, error, showJSX} = this.state;

return (
<LiveProvider code={code} mountStylesheet={false}>
<LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
<div
css={{
[media.greaterThan('xlarge')]: {
Expand Down Expand Up @@ -112,7 +117,23 @@ class CodeEditor extends Component {
background: colors.darker,
color: colors.white,
}}>
<MetaTitle onDark={true}>Live JSX Editor</MetaTitle>
<MetaTitle onDark={true}>
Live JSX Editor
<label
css={{
fontSize: 14,
float: 'right',
cursor: 'pointer',
}}>
<input
checked={this.state.showJSX}
onChange={event =>
this.setState({showJSX: event.target.checked})}
type="checkbox"
/>{' '}
JSX?
</label>
</MetaTitle>
</div>
<div
css={{
Expand Down Expand Up @@ -265,12 +286,21 @@ class CodeEditor extends Component {
this._mountNode = ref;
};

_updateState(code) {
_updateState(code, showJSX = true) {
try {
return {
compiled: compile(code),
let newState = {
compiled: compileES5(code),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should code always go into newState? What's the benefit of only adding it conditionally.

Copy link
Contributor Author

@criticalbh criticalbh Oct 16, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I thought here is that we want to keep code only if we are in JSX view.

If we mix code from ES5 view with ES6 it wont work any more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see what you mean.

error: null,
};

if (showJSX) {
newState.code = code;
newState.compiledES6 = compileES6(code);
} else {
newState.compiledES6 = code;
}

return newState;
} catch (error) {
console.error(error);

Expand All @@ -282,7 +312,7 @@ class CodeEditor extends Component {
}

_onChange = code => {
this.setState(this._updateState(code));
this.setState(state => this._updateState(code, state.showJSX));
};
}

Expand Down