formidablelabs/react-live

A flexible playground for live editing React components

A flexible playground for live editing React code

React Live brings you the ability to render React components with editable source code and live preview.

The library is structured modularly and lets you style and compose its components freely.

Come learn more at our docs site!

Support

Have a question about react-live? Submit an issue in this repository using the "Question" template.

Notice something inaccurate or confusing? Feel free to open an issue or make a pull request to help improve the documentation for everyone!

The source for our docs site lives in this repo in the docs folder.

Contributing

Please see our contributing guide.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

react-live's Issues

Format code with prettier

When modifying code on the fly, it would be very useful to have prettier format the code.

I'd be happy to solve my own problem if someone can guide on how to use prettier on the browser.

This is the problem:

error while trying to render

when the user just trying to write - render();

before adding the jsx - the editor crashes.

Babel config

👋 First off, thank you very much for making this! I've used component-playground for a while, and have found this to be a really easy transition so far.

The one finicky thing I'm running into is "how" I'm writing my components that I pass into the code param.

My .babelrc looks like this:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-strict-mode"
  ]
}

Here's an example I'm attempting to use:

const AlertExample = `
class Example extends React.Component {
  state = {
    toggleAlert: false,
  };

  handleToggleAlert = () => {
    this.setState({
      toggleAlert: !this.state.toggleAlert,
    });
  }

  render() {
    return (
      <Fragment>
        <Alert collapse={this.state.toggleAlert} type="primary" close>Test 1</Alert>
        <Button type="reset" onClick={this.handleToggleAlert} >Toggle Alert</Button>
      </Fragment>
    );
  }
}
`.trim();

so I'm using a few niceties when I write my own components. It looks like when passing that same type of code into <LiveProvider /> it doesn't appear to be compiling, and blows up because of a syntax issue. Is there a way for react-live to take advantage of my babel config?

Add `es/` (ESM) output for webpack consumtion

Aka modules: false for babel-preset-env for one output dir.

How to pass function in scope in LiveProvider?

Hello friend,
First of all thanks for the nice plugin, it's work really very well.
Now I have some question about my requirement I need to check my newly created component and I have passed some on change function required in my prototype.
So can anyone help me please to pass a function in LiveProvider code?

Typescript Support?

Is supporting typescript something you're considering?

Prismjs plugins/line highlighting

Because react-live relies on the Node version of prismjs, it's unable to use many prism plugins which rely on the DOM. As discussed over on their repo, there aren't definite plans to fix this: PrismJS/prism#1171

It makes definite sense to use the node package, especially for server rendering.

At the same time I feel react-live is sorely missing some features, particularly line highlighting - being able to highlight lines can really helpful when presenting an evolving piece of code.

Wondering if any thought has gone into remedying this.

Compilation errors - Child-dependencies of dependency "dom-iterator" not found

Getting this error:

Compilation errors occured:
  ModuleNotFoundError: Module not found: Error: Cannot resolve module 'xor' in /Users/scottyeck/git/fabric/cashmere/node_modules/dom-iterator
  ModuleNotFoundError: Module not found: Error: Cannot resolve module 'props' in /Users/scottyeck/git/fabric/cashmere/node_modules/dom-iterator

(See matthewmueller/dom-iterator#10)

Apparently this was due to use of package.json's browser field alongside dynamic requires. As such, this should affect any build environment intended for the server. (In my case, I'm seeing the issue in gatsby's build-html phase, which is one such environment.)

This was fixed via matthewmueller/dom-iterator#11, so upgrading to the latest should resolve. I'll submit a PR shortly.

component is undefined

import { MYcomponent, MYcomponent2 } from './somecomponent';
const code = `
render(
<MYcomponent >
     <MYcomponent2 />
</MYcomponent>

);
`;

<LiveEdit code ={code} ...

How can i use external components ?

Can't assign lambdas to variables within component

Hello! I'm trying to use the following component within react-live:

class Button extends React.Component {
  constructor() {
    super();

    this.state = {
      counter: 0
    };
  }

  // This is where the error seems to take place
  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    return (
      <button
        onClick={this.handleClick}
      >
        {this.state.counter}
      </button>
    );
  }
}

However I get the following error:

SyntaxError: Unexpected token (10:13) 6 : counter: 0 7 : }; 8 : } 9 : 10 : handleClick = () => { ^

I would like to use this syntax as I don't need to bind in the constructor and for me it makes it more concise.

Injecting code, without making it visible to user?

Hi guys

I'm trying to write some online, editable examples with react-live. The framework is an animation framework not specifically related to React, but it's useful to use React to render the stuff we're animating.

In order to KISS and not to confuse the two frameworks it'd be helpful to be able to inject something like render(<Component />) at the top of every example, without making it visible to the user. I've tried a couple of approaches but to no success. Is there a recommended way I go about doing this?

Document babel usage and `transformCode` option

currently the only docs on it is the PR that added it: #17

would love more examples, in particular applying a babel plugin as it seems react-live doesn't use babel on the given code.

EDIT: just found #67 which shows how to use babel...

Create prism-react-renderer that renders Prism using React and "fixes" prismjs conflicts

For Prism tokenisation see: https://codesandbox.io/s/v6p4j23yn3

Add onError to `LiveEditor`

Current LiveEditor does not take onError. It would be nice to have access to it without the need to use the hoc.

yarn build fails in demo project

Hi,

When I build the /demo project after building the main(/) project, following error occurs at the dependency resolution process of webpack.

➜  demo git:(master) ✗ yarn build
yarn run v1.7.0
$ next build
(node:16989) ExperimentalWarning: The fs.promises API is experimental
> Using external babel configuration
> Location: "/ ... /react-live/demo/.babelrc"
> Failed to build
{ Error: (server) ./pages/_document.js
Module not found: Error: Can't resolve 'react-live/lib/constants/css' in '/ ... /react-live/demo/pages'
:
:

pages/_document.js requires the /lib directory, but there is no /lib in the demo/node_modules/react-live. I think /lib has been changed to /dist at the current master.

Do you know the way to generate /lib or to resolve the dependency?
I've tried all npm scripts for / and /demo.

Don't rerender the preview if there is an error.

I think it'd be nice if when a user makes a typo (or while they're typing), the rendered preview does not rerender if the editor has an error.

Thoughts?

onChange LiveEditor

Hi,

i have an issue when i try to add 'onChange' listener on LiveEditor. I want to save in my state the content.

Issue:
i change text of my second LiveEditor, then i change text of my first LiveEditor and the focus return to my second LiveEditor... :/

Have you an idea of what's wrong with my code? Thanks

This is my code:
ChallengeLiveCoding.js

import React from 'react';

import withAuth from '../../../hoc/withAuth';
import Layout from '../../../container/adminLayout';

import LiveEdit from './liveEdit';

class ChallengeLiveCoding extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      description: '',
      details: '',
      prizeDescription: '',
      companyVision: '',
      steps: '',
      legal: ''
    };
  }

  liveCodeChanges = (e, type) => {
    if (type === 'description')
      this.setState({
        description: e.trim()
      });
    else if (type === 'details')
      this.setState({
        details: e.trim()
      });
  };

  render() {
    const liveCode = type => `
      render(
        <div className="${type}">
          INSERER ICI VOTRE CODE HTML
        <style jsx>{\`
          .${type} {
            color: green;
          }
        \`}</style>
        </div>
      )
    `;

    return (
      <React.Fragment>
        <Layout {...this.props} navmenu>
          <BreadCrumb />
          <h3>Description</h3>
          <LiveEdit
            code={liveCode('description')}
            noInline
            change={this.liveCodeChanges}
            type="description"
          />
          <h3>Details</h3>
          <LiveEdit
            code={liveCode('details')}
            noInline
            change={this.liveCodeChanges}
            type="details"
          />
        </Layout>
      </React.Fragment>
    );
  }
}

export default withAuth(ChallengeLiveCoding);

liveEdit.js

import React from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';

const LiveEdit = ({ code, noInline, change, type }) => (
  <div className="globalWrapper">
    <LiveProvider code={code} noInline={noInline}>
      <div className="liveWrapper">
        <LiveEditor className="styledEditor" onChange={e => change(e, type)} />
        <LivePreview />
      </div>

      <LiveError />
    </LiveProvider>
    <style jsx>{globalWrapper}</style>
  </div>
);

TypeScript support

Hi,

I have a typescript application with react, when I am using this lib to preview typescript code I am getting error. Errors are specifically for braces. I am passing complete react container class(in typescript) to code attribute for "LiveProvider" component.

If you can give me any pointers on how do I use this plugin with typescript project, that would be helpful.

no support for hoisting

no hoisting between components or styled components for this matter.

Why not use `innerText` instead of `htmlToPlain` by self in `Editor/index.js`

react-live/src/components/Editor/index.js

Line 33 in 2f010fe

const plain = htmlToPlain(normalizeHtml(this.ref.innerHTML))

This action can shrink the dependencies, excludes unescape

Demo link not working

styled-components style expression won't work by default

Sending this as the code to react-live:

const code = `
  const Header = styled.div\`
    color: palevioletred;
    font-size: 18px;
    ${props => (props.big ? "font-size: 24px" : "font-size: 18px;")}
  \`

  render(<Header big={true}>{headerProps.text}</Header>)
`;

results in a transformation like this:

const Header = styled.div`
    color: palevioletred;
    font-size: 18px;
    function (props) {
  return props.big ? "font-size: 24px" : "font-size: 18px;";
}
  `

Expected Result

react-live to support template literal expressions

How to reproduce ?

https://codesandbox.io/s/jpkk6vjjow

Is there a way to have more involved code as a prop?

Right now I have a series of interdependent modules with a standalone examples that generally follow this form:

import React, { Component } from 'react';
import { Button } from 'my-proprietary-library';

export default class Example extends Component {
  render () {
    return (
      <Button>Click on Me!</Button>
    );
  }
}

The reason our examples take this form is that it reflects the real life usage of the <Button /> component (albeit very simply). However, this import pattern does not currently work within react-live as I get this error:

SyntaxError: Unexpected token (1:8)
1 : (import React from 'react';
            ^

I realize that is this is probably a transpilation issue as import does not exist in the browser. Is there a way we could essentially render entire "files" rather than just a class or function definition?

HOC should pass props?

Thanks for a great tool!

I think the expected behaviour for a HOC is to pass external props through untouched, which I notice the withLive component doesn't. Would you be open to adding it, or is there a reason not to?

Editor onChange event?

Is there any way to map a function to the editor's onChange event? If not, is this something that you'd like to add? I wouldn't mind submitting a PR for it if it's not already possible.

gatsby-remark-prismjs line highlight breaks when react-live is included

I recently noticed a bug with the gatsby-remark-prismjs plugin on a site I'm working on: code line-highlights show up when I navigate to a page initially, but if I reload the page in place they're missing. (There's no wrapper <span class="gatsby-highlight-code-line">...</span> after a page reload).

After a lot of trimming down, I've been able to demonstrate this bug in a small repro (at bvaughn/gatsby-remark-prismjs-react-live-bug). The tl;dr is that including any react-live component (even if it's not used) will break the gatsby-remark-prismjs plugin line highlight.

I will attempt to further track this issue down. I'm also unclear about whether I should file this as an issue for Gatsby or React Live, but I suspect it's most likely something that should be fixed in React Live.

Relates to gatsbyjs/gatsby/issues/1486

Tab normalization breaks Safari

We are seeing broken indentation in Safari:

This happens because normalization replaces spaces with tabs.

For now we'll fork and fix the normalization to use spaces, but I hope this can be solved upstream :-)

Compile error when using object spread alongside other props

👋

Noticed this today-- when using object spread to pass props to an element, along with other standard props, you hit a bublé compile error.

Input

() => {
  const someProps = { className: 'heading' };

  return (
    <h3 {...someProps} id='test'>
      So functional. Much wow!
    </h3>
  )
}

Error

CompileError: Mixed JSX attributes ending in spread requires specified objectAssign option with 'Object.assign' or polyfill helper. (5:3)
1 : () => {
2 :   const someProps = { className: 'heading' };
3 : 
4 :   return (
5 :     <h3 {...someProps} id='test'
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Fix

bublé needs the objectAssign option to be specified in order to compile this correctly. Not sure what the best way to handle that would be. A few options:

1. objectAssign: 'Object.assign' - use native Object.assign, forcing consumers to polyfill it if necessary.
2. objectAssign: '_.assign' - Use Lodash or another assign/extend module. This feels like a little bit of an overstep on a library's part to me, but it would have the nice benefit of "just working" without a user having to think about it or even being aware of it.
3. objectAssign: this.props.assignFunc - Allow users to pass their own assign in. Flexible, but additional API and passing the function around is a little messy.

Retrieve/react to selection range

First, thank you so much for this plugin 🙏 the flexibility and power is so nice.

I was wondering it there is any way to get the current selection range or the current position of the caret? Thinking it would really cool if there was some way to achieve functionality like https://snack.expo.io/ with the drag and drop components or even the ability to pop a menu of components and insert them inline.

Comments before JSX prevent rendering

I was playing around with the live demo and it looks like nothing gets rendered when a comment precedes the JSX:

// a comment
<h3>
  Hello World!
</h3>

Problem trying to consume the library from Gatsby

Hey guys, I'm trying to use react-live with gastby.

When I run the build process, a weird error appears related with buble dependency.

This is the verbose log:

  Error: ./~/buble/dist/buble.deps.js
  Module parse failed: /Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/buble/dist/buble.deps.js Unexpected token (5:0)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token (5:0)
      at Parser.pp$4.raise (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:2221:15)
      at Parser.pp.unexpected (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:603:10)
      at Parser.pp$3.parseExprAtom (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1822:12)
      at Parser.pp$3.parseExprSubscripts (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1715:21)
      at Parser.pp$3.parseMaybeUnary (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1692:19)
      at Parser.pp$3.parseExprOps (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1637:21)
      at Parser.pp$3.parseMaybeConditional (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1620:21)
      at Parser.pp$3.parseMaybeAssign (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1597:21)
      at Parser.pp$3.parseExpression (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:1573:21)
      at Parser.pp$1.parseStatement (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:727:47)
      at Parser.pp$1.parseTopLevel (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:638:25)
      at Parser.parse (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:516:17)
      at Object.parse (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/acorn/dist/acorn.js:3098:39)
      at Parser.parse (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/webpack/lib/Parser.js:902:15)
      at NormalModule.<anonymous> (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/webpack/lib/NormalModule.js:104:16)
      at NormalModule.onModuleBuild (/Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/webpack/node_modules/webpack-core/lib/Norma  lModuleMixin.js:310:10)
   @ ./~/react-live/lib/utils/transpile/transform.js 6:13-45

The error says You may need an appropriate loader to handle this file type. I think this is related with dep.js prefix of the file.

gatsby needs to consume ES5 javascript. Looks like you are transpiling your code using rollup, but not sure if this code is totally compatible.

Any tip for resolve that is welcome!

Demo down

The current demo link https://react-live-demo.philpl.com/ does not work. Getting a 500 error. The main site, https://philpl.com/ gives an error about a deployment gone wrong.

Problems with `dom-iterator` and webpack

The dom-iterator dependency causes problems in my webpack project when I import from react-live. Webpack tries to package the xor require() which is in a catch block in that package. The error looks like this:

Error: ./~/dom-iterator/index.js
Module not found: Error: Cannot resolve module 'xor' in directory/node_modules/dom-iterator
resolve module xor in directory/node_modules/dom-iterator
  looking for modules in directory
    directory/xor doesn't exist (module as directory)
    resolve 'file' xor in directory
      resolve file
        directory/xor doesn't exist
        directory/xor.js doesn't exist
        directory/xor.jsx doesn't exist
        directory/xor.cjsx doesn't exist
        directory/xor.coffee doesn't exist
        directory/xor.ts doesn't exist
        directory/xor.tsx doesn't exist
        directory/xor.json doesn't exist
        directory/xor.less doesn't exist
        directory/xor.css doesn't exist
        directory/xor.scss doesn't exist
        directory/xor.sass doesn't exist
        directory/xor.toml doesn't exist
        directory/xor.yml doesn't exist
        directory/xor.yaml doesn't exist

Any suggestions on how to get around this problem? Note this also happens for the props module required the same way in that module.

Oddly, I don't have this problem with development builds, only production builds. Possibly something in my webpack config?

a11y solutions?

I'd like to brainstorm ideas for how to support accessibility better by having a straightforward mechanism for keyboard-only users to be able to tab out of the react-live input somehow. I'm not sure whether there's an accepted/established way to do this....

Here's an example of the experience for a keyboard only user:

Hard pin to 1.6.0

Can we pin hard to 1.6.0 instead of the ^ range. Not having duplicate versions I'm told should solve FormidableLabs/spectacle#546

cc @ryan-roemer

Error rendering JSX with string values

I use react-live alongside react-storybook for static page builds. This was working until sometime recently.

Now all the static builds have the following error (shown in the LiveError component)
ReferenceError: str is not defined

You can see it here:

Note - this only happens when string JSX node children are used. An empty <div/> does not throw the error.

This also does not happen when running with react-storybook running as a server. Only when generating a static site.

This worked in 1.7.1 and has been broken sometime after. I tested by reverting to 1.7.1 and it started working again.

There was something that I found could be improved aside from the error fix.
The error has no stack information and is pretty useless. The error possibly came from somewhere within buble. Unfortunately, even though logging the stack information helped a little bit, since the site was static, the code was minified so wasn't perfect. Either way, a console error of the stack track here could help people in the future:

react-live/src/components/Live/LiveProvider.js

Line 73 in 76cfe4d

this.setState({ ...state, error: error.toString() })

stack trace:

ReferenceError: str is not defined
    at Node.transpile (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Array.isArray.value.forEach.node (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Array.forEach (<anonymous>)
    at Node.transpile (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Node.transpile (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Node.transpile (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Node.transpile (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Array.isArray.value.forEach.node (preview.17df648ff3ba4de8f974.bundle.js:1)
    at Array.forEach (<anonymous>)
    at Node.transpile (preview.17df648ff3ba4de8f974.bundle.js:1)

Looks like it's possibly Buble. Can't be sure...

Errors thrown by components from scope aren't caught

It appears that if a component is included via the scope prop on LiveProvider, errors thrown by that component aren't caught by the LiveProvider to be displayed nicely by LiveError.

For the following component:

const App = (props) =>
  <LiveProvider code="<div>{ (() => {const a = 1; return a.substring() })() }</div>">
    <LiveError />
    <LivePreview />
  </LiveProvider>;

...the error is caught and displayed via LiveError, as expected. However, if you instead use a component included from scope, like so:

const components = {
  Foo: (props) => {
    const a = 1;
    return a.substring();
  },
}

const App = (props) =>
  <LiveProvider code="<Foo/>" scope={components}>
    <LiveError />
    <LivePreview />
  </LiveProvider>;

...the error is not caught and bubbles all the way up. It would be great if these kinds of errors could be caught and displayed by LiveError!

Request/Question: Do we have a global scope functionality?

Hi!
In my use case it would interesting to have a global scope where I can add all of my components!

I'm using your library in conjunction with react-docgen to create a live version of my components documentation with live previews and an editor. The only problem that I'm having is with the scope prop. Is it possible to have a single provider on top of the other that has the scope of all of my components? I can help you guys with that if need be!

You guys did an amazing job!

Documentation improvements

My team and I ultimately wound up loving react-live but struggled initially with familiarizing ourselves with the library. The provided code example should be clearer and more fleshed out, i.e., when it comes to providing props to a documented component, so users can be more productive with the library right off the bat.

Next: Plan future API

Perfect-world-wishful-thinking-optimal-API:

// Live is the default export and should render
// a nice output with minimal props

<Live
  code=""
  scope={{ SomeComponent }}
  renderEditor={Live.Editor}
  {...defaultProps}

  /* defaultProps: */
  transform={bubleTransform}
  transformOutput={bubleOutput}
  transformError={bubleErrors}
/>

//////////////

<LiveProvider code="">
  <Live.DefaultLayout>
    <Live.Editor />
    <Live.Preview />
    <Live.Error />
  </Live.DefaultLayout>
</LiveProvider>

// LiveProvider is an export and all "broken out"
// bits of react-live are exported

// Live.Editor is context wrapped
// but import { Editor } is also present

//////////////////

// The normal editor doesn't come with any defaults?
<Editor code="" language="jsx" Prism={...} theme={...} padding={...} />

How to be notified when errors happen?

I want to conditionally render a node if there is an error, currently LiveEditor does not notify me if an error happens, it would be nice if it did.

Question: Is there a way to load the Custom Class plugin with Prism?

Is there an existing way to load the Custom Class Prism plugin or pass options to it from react-live? (https://prismjs.com/plugins/custom-class/)
Use case: I was previously using Prism to show static code samples, and this plugin allowed me to prefix the CSS class names output by Prism so that the more generic-ey class names such as "token" and "tag" don't get in the way of my existing styles.

Support inline compilation errors

The LiveError component is useful for displaying compilation errors. But the LiveEditor component could be even more useful if it showed inline errors. For example:

Current UI

Potential UI

This support could probably be added in such a way that is not dependent on a specific compiler/toolchain. For example, LiveEditor could expose an additional prop errors that looked something like this:

type errors = Array<{
  message: string,
  rowNumber: number,
  columnNumber?: number
}>

This issue is just being opened for discussion and is a follow-up from facebook/react/issues/11094 and reactjs/react.dev/issues/10

Disable spellcheck

I notice that Firefox adds a dotted underline to words that are "misspelled" in the contenteditable area:

We can fix this by adding spellcheck="false" to the editor container. That seems like a reasonable default, and I can't think of a situation where you would want a normal "spell check" behavior in a code editor.

API to display/style static, uneditable code in LiveEditor

As @philpl and I discussed in this styled-components issue, it would be great to have a header/footer section where static, un-editable code provided by the library user could be displayed.

This would be useful for code that users want to display as contextually important to the code that end-users can edit, while keeping the contextual code itself un-editable.

Specific to the styled-components case, the static, unevaluated code would show that one needs to import a helper named export, instead of relying solely on the main library.

My demo in React-Live's Storybook environment:

---

---

I ran a test and nothing broke, though I have not yet written any tests specific to the addition of the new staticCode prop.

Feel free to review/comment on my edits on my fork.

Thanks!

EDIT: worth noting that this is a rough sketch, and obviously only one possible way to enable this feature.

Best way to get up-to-date code

I'm hoping to save the current code as a string in a state on a parent. Figured I'd use the onChange callback, like this

<LiveEditor onChange={newCode => { this.setState({ code: newCode }); }} />

This works, but then the live editor silently stops updating and I'm not sure why – might be a React knowledge gap of mine. Any suggestions? Thanks!

Add support for custom interpolation methods

attr-value not being applied to values with spaces

Sorry if this is already addressed but I have very limited knowledge in how these property values are being parsed and am trying to simply get the "attr-value" class applied to values with a space. Pictured below is what I'm currently seeing:

https://imgur.com/a/BKBJmP5

I appreciate any help on this. Thanks.

Styled-jsx instead of styled-component

Hi!

Which is the better way to use styled-jsx (zeit/next project) instead of styled-component.

Indeed, i have this warning.

const challengeDescription = this.state.description;
const challengeDetails = this.state.details;

const scope = { challengeDescription, challengeDetails };

    const code = `
      render(
        <div className="root">
        <style jsx>{\`
          .root {
            color: green;
          }
        \`}</style>
        </div>
      )
    `;
   
<LiveProvider code={code} scope={scope} noInline>
   <Row>
      <Col sm={5}>
          <LiveEditor />
          <LiveError />
       </Col>
       <Col sm={7}>
          <LivePreview />
        </Col>
    </Row>
</LiveProvider>

warning.js?6327:33 Warning: Received true for a non-boolean attribute jsx.
If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
in style
in div
in ErrorBoundary (created by LivePreview)
in div (created by LivePreview)

April Fools! Write some tests

I should get this sorted out soon, but since it's only a PoC for now 😄