Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-live

Package Overview
Dependencies
Maintainers
41
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-live - npm Package Compare versions

Comparing version 2.2.2 to 4.1.5

dist/index.d.ts
dist/index.js
dist/index.js.map
dist/index.mjs
dist/index.mjs.map

129

package.json
{
"name": "react-live",
"version": "2.2.2",
"version": "4.1.5",
"description": "A production-focused playground for live editing React code",
"main": "dist/react-live.cjs.js",
"typings": "./typings/react-live.d.ts",
"jsnext:main": "dist/react-live.es.js",
"module": "dist/react-live.es.js",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"jsnext:main": "dist/index.mjs",
"module": "dist/index.mjs",
"license": "MIT",
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook",
"storybook:build": "build-storybook -c .storybook -o .out",
"prebuild:lib": "rm -rf lib/*",
"build": "rollup -c",
"prepublishOnly": "npm run build",
"test": "jest",
"test:typings": "typings-tester --dir typings",
"prettier": "prettier --config .prettierrc --write \"./**/*.{js,css,html}\"",
"lint": "eslint --config .eslintrc \"./**/*.js\""
},
"dependencies": {
"buble": "0.19.6",
"core-js": "^2.4.1",
"create-react-context": "0.2.2",
"dom-iterator": "^1.0.0",
"prism-react-renderer": "^1.0.1",
"prop-types": "^15.5.8",
"react-simple-code-editor": "^0.10.0",
"unescape": "^1.0.1"
"prism-react-renderer": "^2.0.6",
"sucrase": "^3.31.0",
"use-editable": "^2.3.3"
},
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
},
"devDependencies": {
"@storybook/addon-knobs": "^3.3.12",
"@storybook/react": "^3.3.12",
"@types/react": "^16.0.36",
"babel-core": "^6.26.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^22.2.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
"babel-preset-env": "^1.3.2",
"babel-preset-react": "^6.23.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^5.16.0",
"eslint-config-formidable": "^3.0.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-filenames": "^1.2.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-react": "^7.7.0",
"jest": "^22.2.1",
"prettier": "^1.17.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"rollup": "^0.55.3",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^8.3.0",
"rollup-plugin-filesize": "^1.5.0",
"rollup-plugin-node-resolve": "^3.0.2",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify-es": "^0.0.1",
"shx": "^0.3.4",
"@babel/core": "^7.15.0",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.14.7",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.21.0",
"@storybook/addon-controls": "^6.4.13",
"@storybook/builder-webpack5": "^6.5.16",
"@storybook/manager-webpack5": "^6.5.16",
"@storybook/react": "^6.4.13",
"@types/prismjs": "^1.26.0",
"@types/react": "^18.0.31",
"@types/styled-components": "^5.1.26",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.2",
"babel-plugin-add-module-exports": "^1.0.4",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jest": "^27.0.6",
"prismjs": "^1.26.0",
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-docgen-typescript": "^2.2.2",
"react-dom": "^18.2.0",
"react-test-renderer": "^17.0.2",
"styled-components": "^4.0.0-beta.8",
"typescript": "^2.9.2",
"typings-tester": "^0.3.1"
"tsup": "^6.7.0",
"typescript": "^4.9.5",
"typings-tester": "^0.3.1",
"webpack": "^5.76.3"
},
"publishConfig": {
"provenance": true
},
"files": [
"src",
"packages/react-live/src",
"lib",

@@ -75,3 +62,3 @@ "dist",

],
"author": "Phil Plückthun <phil@plckthn.me> (https://github.com/philpl)",
"author": "@FormidableLabs",
"bugs": {

@@ -82,3 +69,3 @@ "url": "https://github.com/philpl/react-live/issues"

"type": "git",
"url": "git+https://github.com/philpl/react-live.git"
"url": "https://github.com/FormidableLabs/react-live"
},

@@ -97,9 +84,19 @@ "engines": {

"jest": {
"testEnvironment": "jsdom",
"resetMocks": true,
"rootDir": "./src",
"setupFiles": [
"../jest.setup.js"
],
"testURL": "http://localhost/"
},
"sideEffects": false
}
"sideEffects": false,
"scripts": {
"storybook": "start-storybook -p 9001",
"storybook:build": "build-storybook -o .out",
"build": "tsup",
"build:watch": "tsup --watch",
"test": "jest",
"test:typings": "typings-tester --dir typings",
"typecheck": "tsc --noEmit",
"lint": "eslint --ext .js,.ts,.tsx src",
"lint:fix": "eslint --ext .js,.ts,.tsx src --fix"
}
}

237

README.md

@@ -1,4 +0,7 @@

<p align="center"><img src="https://user-images.githubusercontent.com/17658189/63178611-4e90d580-c042-11e9-875f-f2455148b9ae.png" width=250></p>
<h2 align="center">React Live</h2>
<p align="center">
<a href="https://formidable.com/open-source/" target="_blank">
<img alt="React Live — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/react-live/master/react-live-Hero.png" />
</a>
</p>
<p align="center">
<strong>A flexible playground for live editing React code</strong>

@@ -8,4 +11,4 @@ <br><br>

<a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/v/react-live.svg"></a>
<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
<img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg">

@@ -18,232 +21,24 @@ <a href="https://github.com/FormidableLabs/react-live#maintenance-status">

**React Live** brings you the ability to render React components with editable source code and live preview.
It supports server-side rendering and comes in a tiny bundle.
The library is structured modularly and lets you style and compose its components freely.
<p align="center"><img src="https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif" width=500></p>
## Usage
Come learn more at our [docs site](https://formidable.com/open-source/react-live)!
Install it with `npm install react-live` or `yarn add react-live` and try out this piece of JSX:
## Support
```js
import {
LiveProvider,
LiveEditor,
LiveError,
LivePreview
} from 'react-live'
Have a question about react-live? Submit an issue in this repository using the
["Question" template](https://github.com/FormidableLabs/react-live/issues/new?template=question.md).
<LiveProvider code="<strong>Hello World!</strong>">
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
```
Notice something inaccurate or confusing? Feel free to [open an issue](https://github.com/FormidableLabs/react-live/issues/new/choose) or [make a pull request](https://github.com/FormidableLabs/react-live/pulls) to help improve the documentation for everyone!
## Demo
The source for our docs site lives in this repo in the [`docs`](docs) folder.
[https://react-live.netlify.com/](https://react-live.netlify.com/)
## Contributing
## FAQ
Please see our [contributing guide](CONTRIBUTING.MD).
### How does it work?
It takes your code and transpiles it with [Bublé](https://github.com/bublejs/buble), while the code is displayed using [`react-simple-code-editor`](https://github.com/satya164/react-simple-code-editor) and the code is highlighted using [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer).
The transpiled code is then rendered in the preview component (`LivePreview`), which does a fake mount if the code
is a React component.
### What code can I use?
The code can be one of the following things:
- React elements, e.g. `<strong>Hello World!</strong>`
- React pure functional components, e.g. `() => <strong>Hello World!</strong>`
- React component classes
If you enable the `noInline` prop on your `LiveProvider`, you’ll be able to write imperative code,
and render one of the above things by calling `render`.
### How does the scope work?
The `scope` prop on the `LiveProvider` accepts additional globals. By default it injects `React` only, which
means that the user can use it in their code like this:
```js
// ↓↓↓↓↓
class Example extends React.Component {
render() {
return <strong>Hello World!</strong>
}
}
```
But you can of course pass more things to the scope. They will be available as variables in the code. Here's an example using [styled components](https://github.com/styled-components/styled-components):
```js
import styled from 'styled-components';
const headerProps = { text: 'I\'m styled!' };
const scope = {styled, headerProps};
const code = `
const Header = styled.div\`
color: palevioletred;
font-size: 18px;
\`
render(<Header>{headerProps.text}</Header>)
`
<LiveProvider code={code} scope={scope} noInline={true}>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
```
Here's an example using a custom component `<MyButton />`. This component lives in a different directory. It gets passed into the scope wrapped in an Object. Note that since we are not using `render()` in the code snippet we let `noInline` stay equal to the default of `false`:
```js
import { MyButton } from './components/MyButton';
const scope = { MyButton };
const code = `
<MyButton />
`
<LiveProvider code={code} scope={scope}>
<LiveEditor />
<LiveError />
<LivePreview />
</LiveProvider>
```
### What bundle size can I expect?
Our reported bundle size badges don't give you the full picture of
the kind of sizes you will get in a production app. The minified
bundles we publish _exclude_ some dependencies that we depend
on.
<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
In an actual app when you use `react-live` you will also be bundling
Buble for transpilation, which adds `~135kB` to your bundle. This also
includes their dependency on `regenerate-unicode-properties`, which
is rather large as well.
We maintain a fork of Buble which excludes the ESnext Regular Expression
transpilation with removes Buble's large dependency and weighs in at
a smaller size of `~51kB`, which you can find published at [`@philpl/buble`](http://npm.im/@philpl/buble).
You can alias this in Webpack or the build tool of your choice, which
will reduce the overall bundle size of `react-live` to about `83kB`.
## API
### &lt;LiveProvider /&gt;
This component provides the `context` for all the other ones. It also transpiles the user’s code!
It supports these props, while passing any others through to the `children`:
|Name|PropType|Description|
|---|---|---|
|code|PropTypes.string|The code that should be rendered, apart from the user’s edits
|scope|PropTypes.object|Accepts custom globals that the `code` can use
|noInline|PropTypes.bool|Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}`
|transformCode|PropTypes.func|Accepts and returns the code to be transpiled, affording an opportunity to first transform it
|language|PropTypes.string|What language you're writing for correct syntax highlighting. (Default: `jsx`)
|disabled|PropTypes.bool|Disable editing on the `<LiveEditor />` (Default: `false`)
|theme|PropTypes.object|A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)
All subsequent components must be rendered inside a provider, since they communicate
using one.
The `noInline` option kicks the Provider into a different mode, where you can write imperative-style
code and nothing gets evaluated and mounted automatically. Your example will need to call `render`
with valid JSX elements.
### &lt;LiveEditor /&gt;
This component renders the editor that displays the code. It is a wrapper around [`react-simple-code-editor`](https://github.com/satya164/react-simple-code-editor) and the code highlighted using [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer).
### &lt;LiveError /&gt;
This component renders any error that occur while executing the code, or transpiling it.
It passes through any props to a `pre`.
> Note: Right now when the component unmounts, when there’s no error to be shown.
### &lt;LivePreview /&gt;
This component renders the actual component that the code generates inside an error boundary.
|Name|PropType|Description|
|---|---|---|
|Component|PropTypes.node|Element that wraps the generated code. (Default: `div`)
### withLive
The `withLive` method creates a higher-order component, that injects the live-editing props provided
by `LiveProvider` into a component.
Using this HOC allows you to add new components to react-live, or replace the default ones, with a new
desired behavior.
The component wrapped with `withLive` gets injected the following props:
|Name|Type|Description|
|---|---|---|
|code|string|Reflects the code that is passed in as the `code` prop
|error|string|An error that the code has thrown when it was previewed
|onError|function|A callback that, when called, changes the error to what's passed as the first argument
|onChange|function|A callback that accepts new code and transpiles it
|element|React.Element|The result of the transpiled code that is previewed
> Note: The code prop doesn't reflect the up-to-date code, but the `code` prop, that is passed to the `LiveProvider`.
## FAQ
> **I want to use experimental feature x but Bublé doesn't support it! Can I use babel instead?**
`react-live` doesn't currently support configuring the transpiler and it ships with Bublé. The current workaround for using some experimental features `bublé` doesn't support would be to use the `transformCode` prop on `LiveProvider` to transform your code with `babel` alongside `bublé`.
Here is a minimal example on how you could use `babel` to support class-properties in `react-live`:
[![Edit 7ml9mjw766](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/7ml9mjw766?fontsize=14)
## Comparison to [component-playground](https://github.com/FormidableLabs/component-playground)
There are multiple options when it comes to live, editable React component environments. Formidable actually has **two** first class projects to help you out: [`component-playground`](https://github.com/FormidableLabs/component-playground) and [`react-live`](https://github.com/FormidableLabs/react-live). Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.
Here's a high-level decision tree:
- If you want **fast and easy** setup and integration, then `component-playground` may be the ticket!
- If you want **a smaller bundle**, **SSR**, and **more flexibility**, then `react-live` is for you!
Here are the various factors at play:
- **Build**: `component-playground` uses `babel-standalone`, `react-live` uses `bublé`. (_Note_: `react-live` might make transpiler customizable in the future).
- **Bundle size**: `component-playground` has a larger bundle, but uses a more familiar editor setup. `react-live` is smaller, but more customized editor around `prism`.
- **Ease vs. flexibility**: `react-live` is more modular/customizable, while `component-playground` is easier/faster to set up.
- **SSR**: `component-playground` is not server-side renderable, `react-live` is.
- **Extra features**: `component-playground` supports raw evaluation and pretty-printed output out-of-the-box, while `react-live` does not.
- **Error handling**: `component-playground` might have more predictable error handling than `react-live` in some cases (due to `react-dom`, although this might change with React 16).
## 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.
**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.
dist/react-live.cjs.js
dist/react-live.es.js
dist/react-live.js
dist/react-live.min.js
src/components/Editor/index.js
src/components/Live/LiveContext.js
src/components/Live/LiveEditor.js
src/components/Live/LiveError.js
src/components/Live/LivePreview.js
src/components/Live/LiveProvider.js
src/constants/theme.js
src/hoc/withLive.js
src/index.js
src/utils/test/errorBoundary.test.js
src/utils/test/transpile.test.js
src/utils/transpile/errorBoundary.js
src/utils/transpile/evalCode.js
src/utils/transpile/index.js
src/utils/transpile/transform.js
typings/react-live.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc