react-runner - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

dist/index.esm.js

@@ -1,2 +0,2 @@
-import e,{isValidElement as r,createElement as t,Fragment as n,Component as o,useRef as c,useState as l,useEffect as s}from"react";import{transform as u}from"sucrase";function d(){return d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},d.apply(this,arguments)}const p=/^export default(?=\s+)/m,a=/^render(?=\s*\([^)])/m,i=/^</,m=o=>{const{code:c,scope:l}=o,s=c.trim();if(!s)return null;const m=(e=>u(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>p.test(e)?e.replace(p,"return"):a.test(e)?e.replace(a,"return"):(e=e.replace(/;$/,""),i.test(e)&&n&&(e="<>"+e+"</>"),"return ("+e+")"))(s)),v=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(m,d({React:e},l));return r(v)?v:"function"==typeof v?t(v):null};class v extends o{constructor(){super(...arguments),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:m(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}const f=e=>{let{code:r,scope:n,disableCache:o}=e;const u=c(!0),d=c(null),p=c(n);p.current=n;const[a,i]=l(()=>{const e=t(v,{code:r,scope:p.current,onRendered:r=>{r?i({element:o?null:d.current,error:r}):d.current=e}});return{element:e,error:null}});return s(()=>{if(u.current)return void(u.current=!1);const e=t(v,{code:r,scope:p.current,onRendered:r=>{r?i({element:o?null:d.current,error:r}):d.current=e}});i({element:e,error:null})},[r,o]),a};export{v as Runner,m as generateElement,f as useRunner};
+import e,{isValidElement as r,createElement as t,Fragment as n,Component as o,useRef as l,useState as c,useEffect as s}from"react";import{transform as u}from"sucrase";function d(){return d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},d.apply(this,arguments)}const p=/^export default(?=\s+)/m,i=/^render(?=\s*\([^)])/m,a=/^</,m=o=>{const{code:l,scope:c}=o,s=l.trim();if(!s)return null;const m=(e=>u(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>p.test(e)?e.replace(p,"return"):i.test(e)?e.replace(i,"return"):(e=e.replace(/;$/,""),a.test(e)&&(e="<>"+e+"</>"),"return ("+e+")"))(s)),v=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(m,d({React:e},c));return v?r(v)?v:"function"==typeof v?t(v):"string"==typeof v?t(n,void 0,v):null:null};class v extends o{constructor(){super(...arguments),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:m(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}const f=e=>{let{code:r,scope:n,disableCache:o}=e;const u=l(!0),d=l(null),p=l(n);p.current=n;const[i,a]=c(()=>{const e=t(v,{code:r,scope:p.current,onRendered:r=>{r?a({element:o?null:d.current,error:r}):d.current=e}});return{element:e,error:null}});return s(()=>{if(u.current)return void(u.current=!1);const e=t(v,{code:r,scope:p.current,onRendered:r=>{r?a({element:o?null:d.current,error:r}):d.current=e}});a({element:e,error:null})},[r,o]),i};export{v as Runner,m as generateElement,f as useRunner};
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,2 +0,2 @@
-var e=require("react"),r=require("sucrase");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function o(){return o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},o.apply(this,arguments)}const u=/^export default(?=\s+)/m,l=/^render(?=\s*\([^)])/m,c=/^</,s=t=>{const{code:s,scope:a}=t,d=s.trim();if(!d)return null;const i=(e=>r.transform(e,{transforms:["jsx","typescript"],production:!0}).code)((r=>u.test(r)?r.replace(u,"return"):l.test(r)?r.replace(l,"return"):(r=r.replace(/;$/,""),c.test(r)&&e.Fragment&&(r="<>"+r+"</>"),"return ("+r+")"))(d)),p=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(i,o({React:n.default},a));return e.isValidElement(p)?p:"function"==typeof p?e.createElement(p):null};class a extends e.Component{constructor(){super(...arguments),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:s(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}exports.Runner=a,exports.generateElement=s,exports.useRunner=r=>{let{code:t,scope:n,disableCache:o}=r;const u=e.useRef(!0),l=e.useRef(null),c=e.useRef(n);c.current=n;const[s,d]=e.useState(()=>{const r=e.createElement(a,{code:t,scope:c.current,onRendered:e=>{e?d({element:o?null:l.current,error:e}):l.current=r}});return{element:r,error:null}});return e.useEffect(()=>{if(u.current)return void(u.current=!1);const r=e.createElement(a,{code:t,scope:c.current,onRendered:e=>{e?d({element:o?null:l.current,error:e}):l.current=r}});d({element:r,error:null})},[t,o]),s};
+var e=require("react"),r=require("sucrase");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);function o(){return o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},o.apply(this,arguments)}const l=/^export default(?=\s+)/m,u=/^render(?=\s*\([^)])/m,c=/^</,s=t=>{const{code:s,scope:a}=t,d=s.trim();if(!d)return null;const i=(e=>r.transform(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>l.test(e)?e.replace(l,"return"):u.test(e)?e.replace(u,"return"):(e=e.replace(/;$/,""),c.test(e)&&(e="<>"+e+"</>"),"return ("+e+")"))(d)),p=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(i,o({React:n.default},a));return p?e.isValidElement(p)?p:"function"==typeof p?e.createElement(p):"string"==typeof p?e.createElement(e.Fragment,void 0,p):null:null};class a extends e.Component{constructor(){super(...arguments),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:s(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}exports.Runner=a,exports.generateElement=s,exports.useRunner=r=>{let{code:t,scope:n,disableCache:o}=r;const l=e.useRef(!0),u=e.useRef(null),c=e.useRef(n);c.current=n;const[s,d]=e.useState(()=>{const r=e.createElement(a,{code:t,scope:c.current,onRendered:e=>{e?d({element:o?null:u.current,error:e}):u.current=r}});return{element:r,error:null}});return e.useEffect(()=>{if(l.current)return void(l.current=!1);const r=e.createElement(a,{code:t,scope:c.current,onRendered:e=>{e?d({element:o?null:u.current,error:e}):u.current=r}});d({element:r,error:null})},[t,o]),s};
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-import e,{isValidElement as r,createElement as t,Fragment as n,Component as o,useRef as c,useState as l,useEffect as s}from"react";import{transform as u}from"sucrase";function d(){return d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},d.apply(this,arguments)}const p=/^export default(?=\s+)/m,a=/^render(?=\s*\([^)])/m,i=/^</,m=o=>{const{code:c,scope:l}=o,s=c.trim();if(!s)return null;const m=(e=>u(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>p.test(e)?e.replace(p,"return"):a.test(e)?e.replace(a,"return"):(e=e.replace(/;$/,""),i.test(e)&&n&&(e=`<>${e}</>`),`return (${e})`))(s)),v=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(m,d({React:e},l));return r(v)?v:"function"==typeof v?t(v):null};class v extends o{constructor(...e){super(...e),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:m(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}const f=({code:e,scope:r,disableCache:n})=>{const o=c(!0),u=c(null),d=c(r);d.current=r;const[p,a]=l(()=>{const r=t(v,{code:e,scope:d.current,onRendered:e=>{e?a({element:n?null:u.current,error:e}):u.current=r}});return{element:r,error:null}});return s(()=>{if(o.current)return void(o.current=!1);const r=t(v,{code:e,scope:d.current,onRendered:e=>{e?a({element:n?null:u.current,error:e}):u.current=r}});a({element:r,error:null})},[e,n]),p};export{v as Runner,m as generateElement,f as useRunner};
+import e,{isValidElement as r,createElement as t,Fragment as n,Component as o,useRef as c,useState as l,useEffect as s}from"react";import{transform as u}from"sucrase";function d(){return d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},d.apply(this,arguments)}const p=/^export default(?=\s+)/m,i=/^render(?=\s*\([^)])/m,a=/^</,m=o=>{const{code:c,scope:l}=o,s=c.trim();if(!s)return null;const m=(e=>u(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>p.test(e)?e.replace(p,"return"):i.test(e)?e.replace(i,"return"):(e=e.replace(/;$/,""),a.test(e)&&(e=`<>${e}</>`),`return (${e})`))(s)),v=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(m,d({React:e},l));return v?r(v)?v:"function"==typeof v?t(v):"string"==typeof v?t(n,void 0,v):null:null};class v extends o{constructor(...e){super(...e),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:m(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}const f=({code:e,scope:r,disableCache:n})=>{const o=c(!0),u=c(null),d=c(r);d.current=r;const[p,i]=l(()=>{const r=t(v,{code:e,scope:d.current,onRendered:e=>{e?i({element:n?null:u.current,error:e}):u.current=r}});return{element:r,error:null}});return s(()=>{if(o.current)return void(o.current=!1);const r=t(v,{code:e,scope:d.current,onRendered:e=>{e?i({element:n?null:u.current,error:e}):u.current=r}});i({element:r,error:null})},[e,n]),p};export{v as Runner,m as generateElement,f as useRunner};
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("sucrase")):"function"==typeof define&&define.amd?define(["exports","react","sucrase"],r):r((e||self).reactRunner={},e.react,e.sucrase)}(this,function(e,r,t){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/n(r);function u(){return u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},u.apply(this,arguments)}const c=/^export default(?=\s+)/m,l=/^render(?=\s*\([^)])/m,s=/^</,a=e=>{const{code:n,scope:a}=e,d=n.trim();if(!d)return null;const i=(e=>t.transform(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>c.test(e)?e.replace(c,"return"):l.test(e)?e.replace(l,"return"):(e=e.replace(/;$/,""),s.test(e)&&r.Fragment&&(e="<>"+e+"</>"),"return ("+e+")"))(d)),p=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(i,u({React:o.default},a));return r.isValidElement(p)?p:"function"==typeof p?r.createElement(p):null};class d extends r.Component{constructor(){super(...arguments),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:a(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}e.Runner=d,e.generateElement=a,e.useRunner=e=>{let{code:t,scope:n,disableCache:o}=e;const u=r.useRef(!0),c=r.useRef(null),l=r.useRef(n);l.current=n;const[s,a]=r.useState(()=>{const e=r.createElement(d,{code:t,scope:l.current,onRendered:r=>{r?a({element:o?null:c.current,error:r}):c.current=e}});return{element:e,error:null}});return r.useEffect(()=>{if(u.current)return void(u.current=!1);const e=r.createElement(d,{code:t,scope:l.current,onRendered:r=>{r?a({element:o?null:c.current,error:r}):c.current=e}});a({element:e,error:null})},[t,o]),s}});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("sucrase")):"function"==typeof define&&define.amd?define(["exports","react","sucrase"],r):r((e||self).reactRunner={},e.react,e.sucrase)}(this,function(e,r,t){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/n(r);function u(){return u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},u.apply(this,arguments)}const l=/^export default(?=\s+)/m,c=/^render(?=\s*\([^)])/m,s=/^</,a=e=>{const{code:n,scope:a}=e,d=n.trim();if(!d)return null;const i=(e=>t.transform(e,{transforms:["jsx","typescript"],production:!0}).code)((e=>l.test(e)?e.replace(l,"return"):c.test(e)?e.replace(c,"return"):(e=e.replace(/;$/,""),s.test(e)&&(e="<>"+e+"</>"),"return ("+e+")"))(d)),p=((e,r)=>{const t=Object.keys(r),n=t.map(e=>r[e]);return new Function(...t,e)(...n)})(i,u({React:o.default},a));return p?r.isValidElement(p)?p:"function"==typeof p?r.createElement(p):"string"==typeof p?r.createElement(r.Fragment,void 0,p):null:null};class d extends r.Component{constructor(){super(...arguments),this.state={element:null,error:null,prevCode:null}}static getDerivedStateFromProps(e,r){if(r.prevCode===e.code)return null;try{return{element:a(e),error:r.error&&e.code!==r.prevCode?null:r.error,prevCode:e.code}}catch(r){return{element:null,error:r.toString(),prevCode:e.code}}}static getDerivedStateFromError(e){return{error:e.toString()}}componentDidMount(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}shouldComponentUpdate(e){return e.code!==this.props.code}componentDidUpdate(){var e,r,t;null==(e=(r=this.props).onRendered)||e.call(r,null==(t=this.state.error)?void 0:t.toString())}render(){return this.state.error?null:this.state.element}}e.Runner=d,e.generateElement=a,e.useRunner=e=>{let{code:t,scope:n,disableCache:o}=e;const u=r.useRef(!0),l=r.useRef(null),c=r.useRef(n);c.current=n;const[s,a]=r.useState(()=>{const e=r.createElement(d,{code:t,scope:c.current,onRendered:r=>{r?a({element:o?null:l.current,error:r}):l.current=e}});return{element:e,error:null}});return r.useEffect(()=>{if(u.current)return void(u.current=!1);const e=r.createElement(d,{code:t,scope:c.current,onRendered:r=>{r?a({element:o?null:l.current,error:r}):l.current=e}});a({element:e,error:null})},[t,o]),s}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "react-runner",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Run your React code on the go",
@@ -66,3 +66,3 @@ "homepage": "https://nihgwu.github.io/react-runner/",
   },
-  "gitHead": "8e03bbd5ba849d3e016116771e8af1ed87543436"
+  "gitHead": "45b0aaa9ad2d4a368e1e916b253d8a715ea92232"
 }

README.md

@@ -1,2 +0,2 @@
-# react-runner
+# React Runner
 
@@ -7,9 +7,11 @@ Run your React code on the go [https://nihgwu.github.io/react-runner/](https://nihgwu.github.io/react-runner/)
 
-- Inline element
-- Inline elements _require React 16.3 or above_
+- Inline element(s)
 - Function component
 - Class component, **with class fields support**
 - Composing components with `render` or `export default`
-- Support `typescript` or `flow`
+- Support `Typescript`
+- Server Side Rendering
 
+Hacker News [in react-runner](https://nihgwu.github.io/react-runner/#hacker-news) vs [in real world](https://nihgwu.github.io/react-runner/examples/hacker-news), with the same code
+
 ## Install
@@ -25,8 +27,6 @@
 
-## Props
+## Options
 
-- **children** `function({ element, error })`, _required_ render props
 - **code** `string`, _required_ the code to be ran
 - **scope** `object` globals that could be used in `code`
-- **type** `string` the type system of the code, code be `typescript` or `flow`
 
@@ -36,23 +36,25 @@ ## Usage
 ```jsx
-import Runner from 'react-runner'
+import { useRunner } from 'react-runner'
 
-// pseudo code
-render(
-  <Runner code={code} scope={scope} type={type}>
-    {({ element, error }) => (error ? error : element)}
-  </Runner>
-)
+const { element, error } = useRunner({ code, scope })
 ```
 
-or hooks _(require React 16.8 or above)_
+or use `Runner` as a component directly and handle error with `onRendered`
 
 ```jsx
-import { useRunner } from 'react-runner'
+import { Runner } from 'react-runner'
 
-const { element, error } = useRunner({ code, scope, type })
+const element = <Runner code={code} scope={scope} onRendered={handleRendered} />
 ```
 
-## Caveats
+## Browser support
 
-As Sucrase transpiles your code to work in modern JS runtime only, so your code would not work on IE, depending on the features you used. If you want to work with old browsers, use [react-runner-buble](https://github.com/nihgwu/react-runner/tree/master/packages/react-runner-buble) instead.
+```
+"browserslist": [
+  "Chrome > 61",
+  "Edge > 16",
+  "Firefox > 60",
+  "Safari > 10.1"
+]
+```
 
@@ -76,39 +78,20 @@ ## react-live-runner
 
-// pseudo code
-render(
-  <LiveProvider code={code}>
-    <LiveEditor />
-    <LiveError />
-    <LivePreview />
-  </LiveProvider>
-)
+...
+<LiveProvider code={code}>
+  <LiveEditor />
+  <LiveError />
+  <LivePreview />
+</LiveProvider>
+...
 ```
 
-or you can use render props
+or hooks for better custom rendering
 
 ```jsx
-import LiveRunner, { CodeEditor } from 'react-live-runner'
-
-// pseudo code
-render(
-  <LiveRunner sourceCode={sourceCode} scope={scope} type={type}>
-    {({element, error, code, onChange }) => (
-      <div>
-        <CodeEditor code={code} onChange={onChange} />
-        {error ? error : element)}
-      </div>
-    )}
-  </LiveRunner>
-)
-```
-
-or hooks _(require React 16.8 or above)_
-
-```jsx
 import { useLiveRunner } from 'react-live-runner'
 
 const { element, error, code, onChange } = useLiveRunner({
-  sourceCode,
+  initialCode,
   scope,
-  type,
+  transformCode,
 })
@@ -123,8 +106,8 @@ ```
 
-const [code, onChange] = useState(sourceCode)
-const { element, error } = useRunner({ code, scope, type })
+const [code, onChange] = useState(initialCode)
+const { element, error } = useRunner({ code, scope })
 
 useEffect(() => {
-  onChange(sourceCode)
-}, [sourceCode])
+  onChange(initialCode)
+}, [initialCode])
 ```
@@ -131,0 +114,0 @@

No alert changes

Improved metrics

Total package byte prevSize

47156

increased by0.41%

Worsened metrics

Number of lines in readme file

115

decreased by-12.88%

No dependency changes