diff --git a/demo/next.config.js b/demo/next.config.js
index b1a4ff73..49392bc2 100644
--- a/demo/next.config.js
+++ b/demo/next.config.js
@@ -4,6 +4,8 @@ module.exports = {
reactStrictMode: true,
webpack: config => {
config.resolve.alias['react-live'] = path.resolve('../');
+ config.resolve.alias.react = path.resolve('./node_modules/react');
+ config.resolve.alias['react-dom'] = path.resolve('./node_modules/react-dom');
return config;
}
diff --git a/package.json b/package.json
index 197d70b1..9a677126 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
"eslint-plugin-react": "^7.7.0",
"jest": "^22.2.1",
"prettier": "^1.17.0",
- "react": "^16.2.0",
- "react-dom": "^16.2.0",
+ "react": "^16.8.0",
+ "react-dom": "^16.8.0",
"rollup": "^0.55.3",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^8.3.0",
diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
index e342a41c..c34fc576 100644
--- a/src/components/Editor/index.js
+++ b/src/components/Editor/index.js
@@ -7,7 +7,7 @@ import { theme as liveTheme } from '../../constants/theme';
class CodeEditor extends Component {
static propTypes = {
code: PropTypes.string,
- disabled: PropTypes.boolean,
+ disabled: PropTypes.bool,
language: PropTypes.string,
onChange: PropTypes.func,
style: PropTypes.object,
@@ -58,15 +58,7 @@ class CodeEditor extends Component {
);
render() {
- // eslint-disable-next-line no-unused-vars
- const {
- style,
- code: _code,
- onChange,
- language,
- theme,
- ...rest
- } = this.props;
+ const { style, theme, ...rest } = this.props;
const { code } = this.state;
const baseTheme =
diff --git a/src/components/Live/LivePreview.js b/src/components/Live/LivePreview.js
index 90bab452..e909b896 100644
--- a/src/components/Live/LivePreview.js
+++ b/src/components/Live/LivePreview.js
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
import LiveContext from './LiveContext';
function LivePreview({ Component, ...rest }) {
@@ -11,6 +12,10 @@ function LivePreview({ Component, ...rest }) {
);
}
+LivePreview.propTypes = {
+ Component: PropTypes.node
+};
+
LivePreview.defaultProps = {
Component: 'div'
};
diff --git a/src/components/Live/LiveProvider.js b/src/components/Live/LiveProvider.js
index 10d7627a..386ff4ae 100644
--- a/src/components/Live/LiveProvider.js
+++ b/src/components/Live/LiveProvider.js
@@ -1,104 +1,89 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import LiveContext from './LiveContext';
import { generateElement, renderElementAsync } from '../../utils/transpile';
-export default class LiveProvider extends Component {
- static defaultProps = {
- code: '',
- noInline: false,
- language: 'jsx',
- disabled: false
- };
+function LiveProvider({
+ children,
+ code,
+ language,
+ theme,
+ disabled,
+ scope,
+ transformCode,
+ noInline = false
+}) {
+ const [state, setState] = useState({
+ error: undefined,
+ element: undefined
+ });
- static propTypes = {
- children: PropTypes.children,
- code: PropTypes.string,
- disabled: PropTypes.bool,
- language: PropTypes.string,
- noInline: PropTypes.bool,
- scope: PropTypes.object,
- theme: PropTypes.object,
- transformCode: PropTypes.node
- };
-
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillMount() {
- const { code, scope, transformCode, noInline } = this.props;
-
- this.transpile({ code, scope, transformCode, noInline });
- }
-
- componentDidUpdate({
- code: prevCode,
- scope: prevScope,
- noInline: prevNoInline,
- transformCode: prevTransformCode
- }) {
- const { code, scope, noInline, transformCode } = this.props;
- if (
- code !== prevCode ||
- scope !== prevScope ||
- noInline !== prevNoInline ||
- transformCode !== prevTransformCode
- ) {
- this.transpile({ code, scope, transformCode, noInline });
- }
- }
-
- onChange = code => {
- const { scope, transformCode, noInline } = this.props;
- this.transpile({ code, scope, transformCode, noInline });
- };
-
- onError = error => {
- this.setState({ error: error.toString() });
- };
-
- transpile = ({ code, scope, transformCode, noInline = false }) => {
+ function transpile(newCode) {
// Transpilation arguments
const input = {
- code: transformCode ? transformCode(code) : code,
+ code: transformCode ? transformCode(newCode) : newCode,
scope
};
- const errorCallback = err =>
- this.setState({ element: undefined, error: err.toString() });
- const renderElement = element => this.setState({ ...state, element });
+ const errorCallback = error =>
+ setState({ error: error.toString(), element: undefined });
- // State reset object
- const state = { unsafeWrapperError: undefined, error: undefined };
+ const renderElement = element => setState({ error: undefined, element });
try {
if (noInline) {
- this.setState({ ...state, element: null }); // Reset output for async (no inline) evaluation
+ setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
renderElementAsync(input, renderElement, errorCallback);
} else {
renderElement(generateElement(input, errorCallback));
}
} catch (error) {
- this.setState({ ...state, error: error.toString() });
+ errorCallback(error);
}
- };
+ }
- render() {
- const { children, code, language, theme, disabled } = this.props;
+ useEffect(() => {
+ transpile(code);
+ }, [code, scope, noInline, transformCode]);
- return (
-
- {children}
-
- );
- }
+ const onChange = newCode => transpile(newCode);
+
+ const onError = error => setState({ error: error.toString() });
+
+ return (
+
+ {children}
+
+ );
}
+
+LiveProvider.propTypes = {
+ children: PropTypes.node,
+ code: PropTypes.string,
+ disabled: PropTypes.bool,
+ language: PropTypes.string,
+ noInline: PropTypes.bool,
+ scope: PropTypes.object,
+ theme: PropTypes.object,
+ transformCode: PropTypes.func
+};
+
+LiveProvider.defaultProps = {
+ code: '',
+ noInline: false,
+ language: 'jsx',
+ disabled: false
+};
+
+export default LiveProvider;
diff --git a/stories/Live.js b/stories/Live.js
index a98b6724..9b92659d 100644
--- a/stories/Live.js
+++ b/stories/Live.js
@@ -62,9 +62,9 @@ function LikeButton() {
return (
<>
- {likes} likes
+ {likes} likes