FormidableLabs / react-live

A flexible playground for live editing React components

Home Page:https://commerce.nearform.com/open-source/react-live/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[2.4.1] Code in CodeEditor isn't updated

thomasdax98 opened this issue · comments

Issue

If the code passed to <LiveProvider> changes, the <CodeEditor> isn't updated. This occurs in v2.4.1 of react-live.

Demo

CodeSandbox: https://codesandbox.io/s/react-live-code-update-issue-w2lxsg?file=/src/App.js

After two seconds the code passed to the <LiveProvider> changes from abc to def. This change is reflected in the <LivePreview> but not in the <CodeEditor>.

Reason

The reason is the following code:

https://github.com/FormidableLabs/react-live/blob/v2.4.1/src/components/Editor/index.js#L13-L15

if (state.prevCodeProp && props.code !== state.prevCodeProp) {
  setState({ code: props.code, prevCodeProp: props.code });
}

In the if(), you check if state.prevCodeProp is defined. However, this can never be true because it's never initialized. The bug was introduced in v2.3.0. Previously, the code read:

https://github.com/FormidableLabs/react-live/blob/v2.2.3/src/components/Editor/index.js#L18-L20

if (props.code !== state.prevCodeProp) {
  return { code: props.code, prevCodeProp: props.code };
}

That worked as expected.

Fix

I already pushed a fix to my fork of your repo: thomasdax98@d977799

However, I don't know how I can merge it to your repo since there is no v2 branch. Could you help me with that?