@aliemir/react-live
Version:
A production-focused playground for live editing React code
2 lines (1 loc) • 14.3 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prism-react-renderer"),require("sucrase")):"function"==typeof define&&define.amd?define(["exports","react","prism-react-renderer","sucrase"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactLive={},e.React,e.Prism,e.Sucrase)}(this,(function(e,t,n,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(t),a=o(n);function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var s={characterData:!0,characterDataOldValue:!0,childList:!0,subtree:!0};function l(e){var t=window.getSelection();t.empty(),t.addRange(e)}function u(e){return(e.metaKey||e.ctrlKey)&&!e.altKey&&"KeyZ"===e.code}function f(e){e=[e.firstChild];for(var t,n="";t=e.pop();)t.nodeType===Node.TEXT_NODE?n+=t.textContent:t.nodeType===Node.ELEMENT_NODE&&"BR"===t.nodeName&&(n+="\n"),t.nextSibling&&e.push(t.nextSibling),t.firstChild&&e.push(t.firstChild);return"\n"!==n[n.length-1]&&(n+="\n"),n}function d(e){var t=window.getSelection().getRangeAt(0),n=t.collapsed?0:t.toString().length,r=document.createRange();return r.setStart(e,0),r.setEnd(t.startContainer,t.startOffset),{position:e=(r=r.toString()).length,extent:n,content:r=(r=r.split("\n"))[t=r.length-1],line:t}}function p(e,t,n){0>=t&&(t=0),(!n||0>n)&&(n=t);var r=document.createRange();e=[e.firstChild];for(var o,i=0,a=t;o=e[e.length-1];){if(o.nodeType===Node.TEXT_NODE){if(i+o.textContent.length>=a){var c=a-i;if(a===t){if(a=r,c<o.textContent.length?a.setStart(o,c):a.setStartAfter(o),n!==t){a=n;continue}break}t=r,c<(n=o).textContent.length?t.setEnd(n,c):t.setEndAfter(n);break}i+=o.textContent.length}else if(o.nodeType===Node.ELEMENT_NODE&&"BR"===o.nodeName){if(i+1>=a){if(a===t){if(c=r,0<o.textContent.length?c.setStart(o,0):c.setStartAfter(o),n!==t){a=n;continue}break}t=r,0<(n=o).textContent.length?t.setEnd(n,0):t.setEndAfter(n);break}i++}e.pop(),o.nextSibling&&e.push(o.nextSibling),o.firstChild&&e.push(o.firstChild)}return r}var y={plain:{color:"#C5C8C6",backgroundColor:"#1D1F21"},styles:[{types:["prolog","comment","doctype","cdata"],style:{color:"hsl(30, 20%, 50%)"}},{types:["property","tag","boolean","number","constant","symbol"],style:{color:"hsl(350, 40%, 70%)"}},{types:["attr-name","string","char","builtin","insterted"],style:{color:"hsl(75, 70%, 60%)"}},{types:["operator","entity","url","string","variable","language-css"],style:{color:"hsl(40, 90%, 60%)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["regex","important"],style:{color:"#e90"}},{types:["atrule","attr-value","keyword"],style:{color:"hsl(350, 40%, 70%)"}},{types:["punctuation","symbol"],style:{opacity:"0.7"}}]};function v(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?v(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var h=function(e){var r=t.useRef(null),o=t.useState(e.code||""),c=o[0],v=o[1];t.useEffect((function(){v(e.code)}),[e.code]);var h=t.useCallback((function(e){v(e.slice(0,-1))}),[]);return function(e,n,r){function o(t){var n=e.current;if(n){var r=d(n);n=f(n),r.position+=t.length-n.length,g.position=r,g.onChange(t,r)}}function i(t,n){var r=e.current;if(r){var o=window.getSelection().getRangeAt(0);o.deleteContents(),o.collapse();var i=n||0;(o=p(r,n=(o=d(r)).position+(0>i?i:0),o.position+(0<i?i:0))).deleteContents(),t&&o.insertNode(document.createTextNode(t)),l(p(r,n+t.length))}}function a(t){var n=e.current;if(n){n.focus();var r=0;if("number"==typeof t)r=t;else{var o=f(n).split("\n").slice(0,t.row);t.row&&(r+=o.join("\n").length+1),r+=t.column}l(p(n,r))}}function c(){var t=e.current;return{text:f(t),position:t=d(t)}}function y(){g.observer.disconnect()}r||(r={});var v=t.useState([])[1],g=t.useState((function(){var e={observer:null,disconnected:!1,onChange:n,queue:[],history:[],historyAt:-1,position:null};return"undefined"!=typeof MutationObserver&&(e.observer=new MutationObserver((function(t){var n;(n=e.queue).push.apply(n,t)}))),e}))[0],h=t.useMemo((function(){return{update:o,insert:i,move:a,getState:c}}),[]);"object"!=typeof navigator||(t.useLayoutEffect((function(){if(g.onChange=n,e.current&&!r.disabled){if(g.disconnected=!1,g.observer.observe(e.current,s),g.position){var t=g.position,o=t.position;l(p(e.current,o,o+t.extent))}return y}})),t.useLayoutEffect((function(){if(e.current&&!r.disabled){var t=e.current;if(g.position){t.focus();var n=g.position,o=n.position;l(p(t,o,o+n.extent))}var i=t.style.whiteSpace,a=t.contentEditable,c=!0;try{t.contentEditable="plaintext-only"}catch(e){t.contentEditable="true",c=!1}"pre"!==i&&(t.style.whiteSpace="pre-wrap"),r.indentation&&(t.style.tabSize=t.style.MozTabSize=""+r.indentation),n=""+" ".repeat(r.indentation||0);var s,y=new RegExp("^(?:"+n+")"),b=new RegExp("^(?:"+n+")*("+n+")$"),m=function(n){if(e.current&&g.position){var r=f(t),o=d(t),i=(new Date).valueOf(),a=g.history[g.historyAt];!n&&500>i-s||a&&a[1]===r?s=i:(n=++g.historyAt,g.history[n]=[o,r],g.history.splice(n+1),500<n&&(g.historyAt--,g.history.shift()))}},O=function(){var e;if((e=g.queue).push.apply(e,g.observer.takeRecords()),e=d(t),g.queue.length){g.observer.disconnect(),g.disconnected=!0;var n,r,o=f(t);for(g.position=e;n=g.queue.pop();){for(null!==n.oldValue&&(n.target.textContent=n.oldValue),r=n.removedNodes.length-1;0<=r;r--)n.target.insertBefore(n.removedNodes[r],n.nextSibling);for(r=n.addedNodes.length-1;0<=r;r--)n.addedNodes[r].parentNode&&n.target.removeChild(n.addedNodes[r])}g.onChange(o,e)}},E=function(e){if(!e.defaultPrevented&&e.target===t){if(g.disconnected)return e.preventDefault(),v([]);if(u(e))e.preventDefault(),e.shiftKey?(e=++g.historyAt,(e=g.history[e])||(g.historyAt=g.history.length-1)):(e=--g.historyAt,(e=g.history[e])||(g.historyAt=0)),e&&(g.observer.disconnect(),g.disconnected=!0,g.position=e[0],g.onChange(e[1],e[0]));else{if(m(),"Enter"===e.key){e.preventDefault();var n=d(t),o=/\S/g.exec(n.content);n="\n"+n.content.slice(0,o?o.index:n.content.length),h.insert(n)}else if(c&&!r.indentation||"Backspace"!==e.key){if(r.indentation&&"Tab"===e.key){e.preventDefault(),o=(n=d(t)).position-n.content.length;var i=f(t);n=e.shiftKey?i.slice(0,o)+n.content.replace(y,"")+i.slice(o+n.content.length):i.slice(0,o)+(r.indentation?" ".repeat(r.indentation):"\t")+i.slice(o),h.update(n)}}else e.preventDefault(),window.getSelection().getRangeAt(0).collapsed?(n=d(t),n=b.exec(n.content),h.insert("",n?-n[1].length:-1)):h.insert("",0);e.repeat&&O()}}},w=function(e){e.defaultPrevented||e.isComposing||(u(e)||m(),O(),t.focus())},j=function(e){g.position=window.getSelection().rangeCount&&e.target===t?d(t):null},C=function(e){e.preventDefault(),m(!0),h.insert(e.clipboardData.getData("text/plain")),m(!0),O()};return document.addEventListener("selectstart",j),window.addEventListener("keydown",E),t.addEventListener("paste",C),t.addEventListener("keyup",w),function(){document.removeEventListener("selectstart",j),window.removeEventListener("keydown",E),t.removeEventListener("paste",C),t.removeEventListener("keyup",w),t.style.whiteSpace=i,t.contentEditable=a}}g.history.length=0,g.historyAt=-1}),[e.current,r.disabled,r.indentation]))}(r,h,{disabled:e.disabled,indentation:2}),t.useEffect((function(){e.onChange&&e.onChange(c)}),[c]),i.default.createElement("div",{className:e.className,style:e.style},i.default.createElement(a.default,{Prism:e.prism||n.Prism,code:c,theme:e.theme||y,language:e.language},(function(t){var n=t.className,o=t.tokens,a=t.getLineProps,c=t.getTokenProps,s=t.style;return i.default.createElement("pre",{className:n,style:g({margin:0,outline:"none",padding:10,fontFamily:"inherit"},e.className&&e.theme?s:{}),ref:r,spellCheck:"false"},o.map((function(e,t){return i.default.createElement("div",a({line:e,key:"line-"+t}),e.filter((function(e){return!e.empty})).map((function(e,t){return i.default.createElement("span",c({token:e,key:"token-"+t}))})),"\n")})))})))},b=t.createContext({});function m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function O(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?m(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var E={transforms:["typescript","jsx","imports"]},w=function(e,t){return void 0===t&&(t={}),r.transform(e,O(O({},E),t)).code};function j(e,t){return(j=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function C(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,j(e,t)}var P=function(e,n){return function(t){function r(){return t.apply(this,arguments)||this}C(r,t);var o=r.prototype;return o.componentDidCatch=function(e){n(e)},o.render=function(){return"function"==typeof e?i.default.createElement(e,null):i.default.isValidElement(e)?e:null},r}(t.Component)};function x(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function S(e,t,n){return(S=x()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&j(o,n.prototype),o}).apply(null,arguments)}var D=function(e,t){var n=Object.keys(t),r=n.map((function(e){return t[e]}));return S(Function,n.concat([e])).apply(void 0,r)};function k(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var L=function(e,t){var n=e.code,r=void 0===n?"":n,o=e.scope,a=void 0===o?{}:o,c=e.opts,s=void 0===c?{}:c,l=r.trim().replace(/;$/,""),u=w("return ("+l+")",s).trim();return P(D(u,N({React:i.default},a)),t)},R=function(e,t,n){var r=e.code,o=void 0===r?"":r,a=e.scope,c=void 0===a?{}:a,s=e.opts,l=void 0===s?{}:s;if(!/render\s*\(/.test(o))return n(new SyntaxError("No-Inline evaluations must call `render`."));D(w(o,l),N(N({React:i.default},c),{},{render:function(e){void 0===e?n(new SyntaxError("`render` must be called with valid JSX.")):t(P(e,n))}}))};function A(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function T(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?A(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function _(e){var n=e.Context,r=void 0===n?b:n,o=e.children,a=e.code,c=e.language,s=e.theme,l=e.disabled,u=e.scope,f=e.transformOptions,d=e.transformCode,p=e.noInline,y=void 0!==p&&p,v=t.useState({error:void 0,element:void 0}),g=v[0],h=v[1];function m(e){var t=function(e){h({error:e.toString(),element:void 0})};try{var n=d?d(e):e;return Promise.resolve(n).then((function(e){var n=function(e){return h({error:void 0,element:e})},r={code:e,scope:u,opts:f};y?(h({error:void 0,element:null}),R(r,n,t)):n(L(r,t))})).catch(t)}catch(e){return t(e),Promise.resolve()}}var O=function(e){return h({error:e.toString()})};t.useEffect((function(){m(a).catch(O)}),[a,u,y,d]);return i.default.createElement(r.Provider,{value:T(T({},g),{},{code:a,language:c,theme:s,disabled:l,onError:O,onChange:function(e){m(e).catch(O)}})},o)}function q(){return(q=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function M(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}_.defaultProps={code:"",noInline:!1,language:"jsx",disabled:!1};var B=["Context"];var K=["Context"];var F=["Component","Context"];function V(e){var n=e.Component,r=e.Context,o=void 0===r?b:r,a=M(e,F),c=t.useContext(o).element;return i.default.createElement(n,a,c?i.default.createElement(c,null):null)}V.defaultProps={Component:"div"},e.Editor=h,e.LiveContext=b,e.LiveEditor=function(e){var n=e.Context,r=void 0===n?b:n,o=M(e,B),a=t.useContext(r),c=a.code,s=a.language,l=a.theme,u=a.disabled,f=a.onChange;return i.default.createElement(h,q({theme:l,code:c,language:s,disabled:u,onChange:f},o))},e.LiveError=function(e){var n=e.Context,r=void 0===n?b:n,o=M(e,K),a=t.useContext(r).error;return a?i.default.createElement("pre",o,a):null},e.LivePreview=V,e.LiveProvider=_,e.generateElement=L,e.renderElementAsync=R,e.theme=y,e.withLive=function(e,n){return void 0===n&&(n=b),function(t){function r(){return t.apply(this,arguments)||this}return C(r,t),r.prototype.render=function(){var t=this;return i.default.createElement(n.Consumer,null,(function(n){return i.default.createElement(e,q({live:n},t.props))}))},r}(t.Component)},Object.defineProperty(e,"__esModule",{value:!0})}));