@depup/react-live 4.1.8-depup.0

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+# @depup/react-live
+
+> Dependency-bumped version of [react-live](https://www.npmjs.com/package/react-live)
+
+Generated by [DepUp](https://github.com/depup/npm) -- all production
+dependencies bumped to latest versions.
+
+## Installation
+
+```bash
+npm install @depup/react-live
+```
+
+| Field | Value |
+|-------|-------|
+| Original | [react-live](https://www.npmjs.com/package/react-live) @ 4.1.8 |
+| Processed | 2026-03-18 |
+| Smoke test | failed |
+| Deps updated | 2 |
+
+## Dependency Changes
+
+| Dependency | From | To |
+|------------|------|-----|
+| prism-react-renderer | ^2.4.0 | ^2.4.1 |
+| sucrase | ^3.35.0 | ^3.35.1 |
+
+---
+
+Source: https://github.com/depup/npm | Original: https://www.npmjs.com/package/react-live
+
+License inherited from the original package.

package/changes.json

@@ -0,0 +1,14 @@
+{
+  "bumped": {
+    "prism-react-renderer": {
+      "from": "^2.4.0",
+      "to": "^2.4.1"
+    },
+    "sucrase": {
+      "from": "^3.35.0",
+      "to": "^3.35.1"
+    }
+  },
+  "timestamp": "2026-03-18T23:30:47.259Z",
+  "totalUpdated": 2
+}

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+import { Prism, themes } from 'prism-react-renderer';
+import * as React from 'react';
+import React__default, { CSSProperties, PropsWithChildren, ComponentType } from 'react';
+
+type Props$3 = {
+    className?: string;
+    code: string;
+    disabled?: boolean;
+    language: string;
+    prism?: typeof Prism;
+    style?: CSSProperties;
+    tabMode?: "focus" | "indentation";
+    theme?: typeof themes.nightOwl;
+    onChange?(value: string): void;
+};
+declare const CodeEditor: (props: Props$3) => JSX.Element;
+
+type Props$2 = {
+    code?: string;
+    disabled?: boolean;
+    enableTypeScript?: boolean;
+    language?: string;
+    noInline?: boolean;
+    scope?: Record<string, unknown>;
+    theme?: typeof themes.nightOwl;
+    transformCode?(code: string): void;
+};
+declare function LiveProvider({ children, code, language, theme, enableTypeScript, disabled, scope, transformCode, noInline, }: PropsWithChildren<Props$2>): JSX.Element;
+
+declare function LiveEditor(props: Partial<Props$3>): JSX.Element;
+
+declare function LiveError<T extends Record<string, unknown>>(props: T): JSX.Element | null;
+
+type Props$1<T extends React__default.ElementType = React__default.ElementType> = {
+    Component?: T;
+} & React__default.ComponentPropsWithoutRef<T>;
+declare function LivePreview<T extends keyof JSX.IntrinsicElements>(props: Props$1<T>): JSX.Element;
+declare function LivePreview<T extends React__default.ElementType>(props: Props$1<T>): JSX.Element;
+
+type ContextValue = {
+    error?: string;
+    element?: ComponentType | null;
+    code: string;
+    newCode?: string;
+    disabled: boolean;
+    language: string;
+    theme?: typeof themes.nightOwl;
+    onError(error: Error): void;
+    onChange(value: string): void;
+};
+declare const LiveContext: React.Context<ContextValue>;
+
+type Props = {
+    live: Record<string, unknown>;
+};
+declare function withLive<T>(WrappedComponent: ComponentType<T & Props>): {
+    (props: T): JSX.Element;
+    displayName: string;
+};
+
+type GenerateOptions = {
+    code: string;
+    scope?: Record<string, unknown>;
+    enableTypeScript: boolean;
+};
+declare const generateElement: ({ code, scope, enableTypeScript }: GenerateOptions, errorCallback: (error: Error) => void) => {
+    new (props: {} | Readonly<{}>): {
+        componentDidCatch(error: Error): void;
+        render(): JSX.Element | null;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React__default.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: {}, context: any): {
+        componentDidCatch(error: Error): void;
+        render(): JSX.Element | null;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React__default.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React__default.Context<any> | undefined;
+};
+declare const renderElementAsync: ({ code, scope, enableTypeScript }: GenerateOptions, resultCallback: (sender: ComponentType) => void, errorCallback: (error: Error) => void) => void;
+
+export { CodeEditor as Editor, LiveContext, LiveEditor, LiveError, LivePreview, LiveProvider, generateElement, renderElementAsync, withLive };

package/dist/index.js

@@ -0,0 +1,408 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Editor: () => Editor_default,
+  LiveContext: () => LiveContext_default,
+  LiveEditor: () => LiveEditor,
+  LiveError: () => LiveError,
+  LivePreview: () => LivePreview_default,
+  LiveProvider: () => LiveProvider_default,
+  generateElement: () => generateElement,
+  renderElementAsync: () => renderElementAsync,
+  withLive: () => withLive
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Editor/index.tsx
+var import_prism_react_renderer = require("prism-react-renderer");
+var import_react = require("react");
+var import_use_editable = require("use-editable");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CodeEditor = (props) => {
+  const { tabMode = "indentation" } = props;
+  const editorRef = (0, import_react.useRef)(null);
+  const [code, setCode] = (0, import_react.useState)(props.code || "");
+  const { theme } = props;
+  (0, import_react.useEffect)(() => {
+    setCode(props.code);
+  }, [props.code]);
+  (0, import_use_editable.useEditable)(
+    editorRef,
+    (text) => {
+      const t = text.slice(0, -1);
+      setCode(t);
+      if (props.onChange) {
+        props.onChange(t);
+      }
+    },
+    {
+      disabled: props.disabled,
+      indentation: tabMode === "indentation" ? 2 : void 0
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: props.className, style: props.style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_prism_react_renderer.Highlight,
+    {
+      code,
+      theme: props.theme || import_prism_react_renderer.themes.nightOwl,
+      language: props.language,
+      children: ({
+        className: _className,
+        tokens,
+        getLineProps,
+        getTokenProps,
+        style: _style
+      }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "pre",
+        {
+          className: _className,
+          style: __spreadValues(__spreadValues({
+            margin: 0,
+            outline: "none",
+            padding: 10,
+            fontFamily: "inherit"
+          }, theme && typeof theme.plain === "object" ? theme.plain : {}), _style),
+          ref: editorRef,
+          spellCheck: "false",
+          children: tokens.map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", __spreadProps(__spreadValues({}, getLineProps({ line })), { children: [
+            line.filter((token) => !token.empty).map((token, tokenIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              __spreadValues({}, getTokenProps({ token })),
+              `token-${tokenIndex}`
+            )),
+            "\n"
+          ] }), `line-${lineIndex}`))
+        }
+      )
+    }
+  ) });
+};
+var Editor_default = CodeEditor;
+
+// src/components/Live/LiveProvider.tsx
+var import_react5 = require("react");
+
+// src/components/Live/LiveContext.ts
+var import_react2 = require("react");
+var LiveContext = (0, import_react2.createContext)({});
+var LiveContext_default = LiveContext;
+
+// src/utils/transpile/index.ts
+var import_react4 = __toESM(require("react"));
+
+// src/utils/transpile/transform.ts
+var import_sucrase = require("sucrase");
+var defaultTransforms = ["jsx", "imports"];
+function transform(opts = {}) {
+  const transforms = Array.isArray(opts.transforms) ? opts.transforms.filter(Boolean) : defaultTransforms;
+  return (code) => (0, import_sucrase.transform)(code, { transforms }).code;
+}
+
+// src/utils/transpile/errorBoundary.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var errorBoundary = (Element, errorCallback) => {
+  return class ErrorBoundary extends import_react3.Component {
+    componentDidCatch(error) {
+      errorCallback(error);
+    }
+    render() {
+      return typeof Element === "function" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, {}) : import_react3.default.isValidElement(Element) ? Element : null;
+    }
+  };
+};
+var errorBoundary_default = errorBoundary;
+
+// src/utils/transpile/evalCode.ts
+var evalCode = (code, scope) => {
+  const scopeKeys = Object.keys(scope);
+  const scopeValues = scopeKeys.map((key) => scope[key]);
+  return new Function(...scopeKeys, code)(...scopeValues);
+};
+var evalCode_default = evalCode;
+
+// src/utils/transpile/compose.ts
+function compose(...functions) {
+  return functions.reduce(
+    (acc, currentFn) => (...args) => acc(currentFn(...args))
+  );
+}
+
+// src/utils/transpile/index.ts
+var jsxConst = 'const _jsxFileName = "";';
+var trimCode = (code) => code.trim().replace(/;$/, "");
+var spliceJsxConst = (code) => code.replace(jsxConst, "").trim();
+var addJsxConst = (code) => jsxConst + code;
+var wrapReturn = (code) => `return (${code})`;
+var generateElement = ({ code = "", scope = {}, enableTypeScript = true }, errorCallback) => {
+  const firstPassTransforms = ["jsx"];
+  enableTypeScript && firstPassTransforms.push("typescript");
+  const transformed = compose(
+    addJsxConst,
+    transform({ transforms: ["imports"] }),
+    spliceJsxConst,
+    trimCode,
+    transform({ transforms: firstPassTransforms }),
+    wrapReturn,
+    trimCode
+  )(code);
+  return errorBoundary_default(
+    evalCode_default(transformed, __spreadValues({ React: import_react4.default }, scope)),
+    errorCallback
+  );
+};
+var renderElementAsync = ({ code = "", scope = {}, enableTypeScript = true }, resultCallback, errorCallback) => {
+  const render = (element) => {
+    if (typeof element === "undefined") {
+      errorCallback(new SyntaxError("`render` must be called with valid JSX."));
+    } else {
+      resultCallback(errorBoundary_default(element, errorCallback));
+    }
+  };
+  if (!/render\s*\(/.test(code)) {
+    return errorCallback(
+      new SyntaxError("No-Inline evaluations must call `render`.")
+    );
+  }
+  const transforms = ["jsx", "imports"];
+  enableTypeScript && transforms.splice(1, 0, "typescript");
+  evalCode_default(transform({ transforms })(code), __spreadProps(__spreadValues({ React: import_react4.default }, scope), { render }));
+};
+
+// src/components/Live/LiveProvider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function LiveProvider({
+  children,
+  code = "",
+  language = "tsx",
+  theme,
+  enableTypeScript = true,
+  disabled = false,
+  scope,
+  transformCode,
+  noInline = false
+}) {
+  const [state, setState] = (0, import_react5.useState)({
+    error: void 0,
+    element: void 0
+  });
+  function transpileAsync(newCode) {
+    return __async(this, null, function* () {
+      const errorCallback = (error) => {
+        setState((previousState) => __spreadProps(__spreadValues({}, previousState), {
+          error: error.toString(),
+          element: void 0
+        }));
+      };
+      try {
+        const transformResult = transformCode ? transformCode(newCode) : newCode;
+        try {
+          const transformedCode = yield Promise.resolve(transformResult);
+          const renderElement = (element) => setState({ error: void 0, element, newCode });
+          if (typeof transformedCode !== "string") {
+            throw new Error("Code failed to transform");
+          }
+          const input = {
+            code: transformedCode,
+            scope,
+            enableTypeScript
+          };
+          if (noInline) {
+            setState((previousState) => __spreadProps(__spreadValues({}, previousState), {
+              error: void 0,
+              element: null
+            }));
+            renderElementAsync(input, renderElement, errorCallback);
+          } else {
+            renderElement(generateElement(input, errorCallback));
+          }
+        } catch (error) {
+          return errorCallback(error);
+        }
+      } catch (e) {
+        errorCallback(e);
+        return Promise.resolve();
+      }
+    });
+  }
+  const onError = (error) => setState({ error: error.toString() });
+  (0, import_react5.useEffect)(() => {
+    transpileAsync(code).catch(onError);
+  }, [code, scope, noInline, transformCode]);
+  const onChange = (newCode) => {
+    transpileAsync(newCode).catch(onError);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    LiveContext_default.Provider,
+    {
+      value: __spreadProps(__spreadValues({}, state), {
+        code,
+        language,
+        theme,
+        disabled,
+        onError,
+        onChange
+      }),
+      children
+    }
+  );
+}
+var LiveProvider_default = LiveProvider;
+
+// src/components/Live/LiveEditor.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function LiveEditor(props) {
+  const { code, language, theme, disabled, onChange } = (0, import_react6.useContext)(LiveContext_default);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Editor_default,
+    __spreadValues({
+      theme,
+      code,
+      language,
+      disabled,
+      onChange
+    }, props)
+  );
+}
+
+// src/components/Live/LiveError.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function LiveError(props) {
+  const { error } = (0, import_react7.useContext)(LiveContext_default);
+  return error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", __spreadProps(__spreadValues({}, props), { children: error })) : null;
+}
+
+// src/components/Live/LivePreview.tsx
+var import_react9 = require("react");
+
+// src/components/Live/ErrorBoundary.tsx
+var import_react8 = require("react");
+var ErrorBoundary = class extends import_react8.Component {
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  componentDidCatch(err) {
+    var _a, _b;
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, err);
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/Live/LivePreview.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LivePreview(_a) {
+  var _b = _a, { Component: Component3 = "div" } = _b, rest = __objRest(_b, ["Component"]);
+  const { element: Element, onError, newCode } = (0, import_react9.useContext)(LiveContext_default);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component3, __spreadProps(__spreadValues({}, rest), { children: Element ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Element, {}) : null })) }, newCode);
+}
+var LivePreview_default = LivePreview;
+
+// src/hoc/withLive.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function withLive(WrappedComponent) {
+  const WithLive = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LiveContext_default.Consumer, { children: (live) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WrappedComponent, __spreadValues({ live }, props)) });
+  WithLive.displayName = "WithLive";
+  return WithLive;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Editor,
+  LiveContext,
+  LiveEditor,
+  LiveError,
+  LivePreview,
+  LiveProvider,
+  generateElement,
+  renderElementAsync,
+  withLive
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Editor/index.tsx","../src/components/Live/LiveProvider.tsx","../src/components/Live/LiveContext.ts","../src/utils/transpile/index.ts","../src/utils/transpile/transform.ts","../src/utils/transpile/errorBoundary.tsx","../src/utils/transpile/evalCode.ts","../src/utils/transpile/compose.ts","../src/components/Live/LiveEditor.tsx","../src/components/Live/LiveError.tsx","../src/components/Live/LivePreview.tsx","../src/components/Live/ErrorBoundary.tsx","../src/hoc/withLive.tsx"],"sourcesContent":["import Editor from \"./components/Editor\";\n\nimport LiveProvider from \"./components/Live/LiveProvider\";\nimport LiveEditor from \"./components/Live/LiveEditor\";\nimport LiveError from \"./components/Live/LiveError\";\nimport LivePreview from \"./components/Live/LivePreview\";\nimport LiveContext from \"./components/Live/LiveContext\";\n\nimport withLive from \"./hoc/withLive\";\n\nexport * from \"./utils/transpile\";\n\nexport {\n  Editor,\n  // Main exports:\n  LiveProvider,\n  LiveEditor,\n  LiveError,\n  LivePreview,\n  LiveContext,\n  withLive,\n};\n","import { Highlight, Prism, themes } from \"prism-react-renderer\";\nimport { CSSProperties, useEffect, useRef, useState } from \"react\";\nimport { useEditable } from \"use-editable\";\n\nexport type Props = {\n  className?: string;\n  code: string;\n  disabled?: boolean;\n  language: string;\n  prism?: typeof Prism;\n  style?: CSSProperties;\n  tabMode?: \"focus\" | \"indentation\";\n  theme?: typeof themes.nightOwl;\n  onChange?(value: string): void;\n};\n\nconst CodeEditor = (props: Props) => {\n  const { tabMode = \"indentation\" } = props;\n  const editorRef = useRef(null);\n  const [code, setCode] = useState(props.code || \"\");\n  const { theme } = props;\n\n  useEffect(() => {\n    setCode(props.code);\n  }, [props.code]);\n\n  useEditable(\n    editorRef,\n    (text) => {\n      const t = text.slice(0, -1);\n      setCode(t);\n\n      if (props.onChange) {\n        props.onChange(t);\n      }\n    },\n    {\n      disabled: props.disabled,\n      indentation: tabMode === \"indentation\" ? 2 : undefined,\n    }\n  );\n\n  return (\n    <div className={props.className} style={props.style}>\n      <Highlight\n        code={code}\n        theme={props.theme || themes.nightOwl}\n        language={props.language}\n      >\n        {({\n          className: _className,\n          tokens,\n          getLineProps,\n          getTokenProps,\n          style: _style,\n        }) => (\n          <pre\n            className={_className}\n            style={{\n              margin: 0,\n              outline: \"none\",\n              padding: 10,\n              fontFamily: \"inherit\",\n              ...(theme && typeof theme.plain === \"object\" ? theme.plain : {}),\n              ..._style,\n            }}\n            ref={editorRef}\n            spellCheck=\"false\"\n          >\n            {tokens.map((line, lineIndex) => (\n              <span key={`line-${lineIndex}`} {...getLineProps({ line })}>\n                {line\n                  .filter((token) => !token.empty)\n                  .map((token, tokenIndex) => (\n                    <span\n                      key={`token-${tokenIndex}`}\n                      {...getTokenProps({ token })}\n                    />\n                  ))}\n                {\"\\n\"}\n              </span>\n            ))}\n          </pre>\n        )}\n      </Highlight>\n    </div>\n  );\n};\n\nexport default CodeEditor;\n","import { useEffect, useState, ComponentType, PropsWithChildren } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport { generateElement, renderElementAsync } from \"../../utils/transpile\";\nimport { themes } from \"prism-react-renderer\";\n\ntype ProviderState = {\n  element?: ComponentType | null;\n  error?: string;\n  newCode?: string;\n};\n\ntype Props = {\n  code?: string;\n  disabled?: boolean;\n  enableTypeScript?: boolean;\n  language?: string;\n  noInline?: boolean;\n  scope?: Record<string, unknown>;\n  theme?: typeof themes.nightOwl;\n  transformCode?(code: string): void;\n};\n\nfunction LiveProvider({\n  children,\n  code = \"\",\n  language = \"tsx\",\n  theme,\n  enableTypeScript = true,\n  disabled = false,\n  scope,\n  transformCode,\n  noInline = false,\n}: PropsWithChildren<Props>) {\n  const [state, setState] = useState<ProviderState>({\n    error: undefined,\n    element: undefined,\n  });\n\n  async function transpileAsync(newCode: string) {\n    const errorCallback = (error: Error) => {\n      setState((previousState) => ({\n        ...previousState,\n        error: error.toString(),\n        element: undefined,\n      }));\n    };\n\n    // - transformCode may be synchronous or asynchronous.\n    // - transformCode may throw an exception or return a rejected promise, e.g.\n    //   if newCode is invalid and cannot be transformed.\n    // - Not using async-await to since it requires targeting ES 2017 or\n    //   importing regenerator-runtime... in the next major version of\n    //   react-live, should target ES 2017+\n    try {\n      const transformResult = transformCode ? transformCode(newCode) : newCode;\n      try {\n        const transformedCode = await Promise.resolve(transformResult);\n        const renderElement = (element: ComponentType) =>\n          setState({ error: undefined, element, newCode });\n\n        if (typeof transformedCode !== \"string\") {\n          throw new Error(\"Code failed to transform\");\n        }\n\n        // Transpilation arguments\n        const input = {\n          code: transformedCode,\n          scope,\n          enableTypeScript,\n        };\n\n        if (noInline) {\n          setState((previousState) => ({\n            ...previousState,\n            error: undefined,\n            element: null,\n          })); // Reset output for async (no inline) evaluation\n          renderElementAsync(input, renderElement, errorCallback);\n        } else {\n          renderElement(generateElement(input, errorCallback));\n        }\n      } catch (error) {\n        return errorCallback(error as Error);\n      }\n    } catch (e) {\n      errorCallback(e as Error);\n      return Promise.resolve();\n    }\n  }\n\n  const onError = (error: Error) => setState({ error: error.toString() });\n\n  useEffect(() => {\n    transpileAsync(code).catch(onError);\n  }, [code, scope, noInline, transformCode]);\n\n  const onChange = (newCode: string) => {\n    transpileAsync(newCode).catch(onError);\n  };\n\n  return (\n    <LiveContext.Provider\n      value={{\n        ...state,\n        code,\n        language,\n        theme,\n        disabled,\n        onError,\n        onChange,\n      }}\n    >\n      {children}\n    </LiveContext.Provider>\n  );\n}\n\nexport default LiveProvider;\n","import { themes } from \"prism-react-renderer\";\nimport { ComponentType, createContext } from \"react\";\n\ntype ContextValue = {\n  error?: string;\n  element?: ComponentType | null;\n  code: string;\n  newCode?: string;\n  disabled: boolean;\n  language: string;\n  theme?: typeof themes.nightOwl;\n  onError(error: Error): void;\n  onChange(value: string): void;\n};\n\nconst LiveContext = createContext<ContextValue>({} as ContextValue);\n\nexport default LiveContext;\n","import React, { ComponentType } from \"react\";\nimport transform from \"./transform\";\nimport errorBoundary from \"./errorBoundary\";\nimport evalCode from \"./evalCode\";\nimport compose from \"./compose\";\nimport { Transform } from \"sucrase\";\n\nconst jsxConst = 'const _jsxFileName = \"\";';\nconst trimCode = (code: string) => code.trim().replace(/;$/, \"\");\nconst spliceJsxConst = (code: string) => code.replace(jsxConst, \"\").trim();\nconst addJsxConst = (code: string) => jsxConst + code;\nconst wrapReturn = (code: string) => `return (${code})`;\n\ntype GenerateOptions = {\n  code: string;\n  scope?: Record<string, unknown>;\n  enableTypeScript: boolean;\n};\n\nexport const generateElement = (\n  { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n  errorCallback: (error: Error) => void\n) => {\n  /**\n   * To enable TypeScript we need to transform the TS to JS code first,\n   * splice off the JSX const, wrap the eval in a return statement, then\n   * transform any imports. The two-phase approach is required to do\n   * the implicit evaluation and not wrap leading Interface or Type\n   * statements in the return.\n   */\n\n  const firstPassTransforms: Transform[] = [\"jsx\"];\n  enableTypeScript && firstPassTransforms.push(\"typescript\");\n\n  const transformed = compose<string>(\n    addJsxConst,\n    transform({ transforms: [\"imports\"] }),\n    spliceJsxConst,\n    trimCode,\n    transform({ transforms: firstPassTransforms }),\n    wrapReturn,\n    trimCode\n  )(code);\n\n  return errorBoundary(\n    evalCode(transformed, { React, ...scope }),\n    errorCallback\n  );\n};\n\nexport const renderElementAsync = (\n  { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n  resultCallback: (sender: ComponentType) => void,\n  errorCallback: (error: Error) => void\n  // eslint-disable-next-line consistent-return\n) => {\n  const render = (element: ComponentType) => {\n    if (typeof element === \"undefined\") {\n      errorCallback(new SyntaxError(\"`render` must be called with valid JSX.\"));\n    } else {\n      resultCallback(errorBoundary(element, errorCallback));\n    }\n  };\n\n  if (!/render\\s*\\(/.test(code)) {\n    return errorCallback(\n      new SyntaxError(\"No-Inline evaluations must call `render`.\")\n    );\n  }\n\n  const transforms: Transform[] = [\"jsx\", \"imports\"];\n  enableTypeScript && transforms.splice(1, 0, \"typescript\");\n\n  evalCode(transform({ transforms })(code), { React, ...scope, render });\n};\n","import { transform as _transform, Transform } from \"sucrase\";\n\nconst defaultTransforms: Transform[] = [\"jsx\", \"imports\"];\n\ntype Options = {\n  transforms?: Transform[];\n};\n\nexport default function transform(opts: Options = {}) {\n  const transforms = Array.isArray(opts.transforms)\n    ? opts.transforms.filter(Boolean)\n    : defaultTransforms;\n\n  return (code: string) => _transform(code, { transforms }).code;\n}\n","import React, { ComponentType, Component } from \"react\";\n\nconst errorBoundary = (\n  Element: ComponentType,\n  errorCallback: (error: Error) => void\n) => {\n  return class ErrorBoundary extends Component {\n    componentDidCatch(error: Error) {\n      errorCallback(error);\n    }\n\n    render() {\n      return typeof Element === \"function\" ? (\n        <Element />\n      ) : React.isValidElement(Element) ? (\n        Element\n      ) : null;\n    }\n  };\n};\n\nexport default errorBoundary;\n","import type { ComponentType } from \"react\";\n\nconst evalCode = (\n  code: string,\n  scope: Record<string, unknown>\n): ComponentType => {\n  const scopeKeys = Object.keys(scope);\n  const scopeValues = scopeKeys.map((key) => scope[key]);\n  return new Function(...scopeKeys, code)(...scopeValues);\n};\n\nexport default evalCode;\n","/**\n * Creates a new composite function that invokes the functions from right to left\n */\n\nexport default function compose<T>(...functions: ((...args: T[]) => T)[]) {\n  return functions.reduce(\n    (acc, currentFn) =>\n      (...args: T[]) =>\n        acc(currentFn(...args))\n  );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport Editor, { Props as EditorProps } from \"../Editor\";\n\nexport default function LiveEditor(props: Partial<EditorProps>) {\n  const { code, language, theme, disabled, onChange } = useContext(LiveContext);\n\n  return (\n    <Editor\n      theme={theme}\n      code={code}\n      language={language}\n      disabled={disabled}\n      onChange={onChange}\n      {...props}\n    />\n  );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\nexport default function LiveError<T extends Record<string, unknown>>(props: T) {\n  const { error } = useContext(LiveContext);\n  return error ? <pre {...props}>{error}</pre> : null;\n}\n","import React, { useContext } from \"react\";\n\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport LiveContext from \"./LiveContext\";\n\ntype Props<T extends React.ElementType = React.ElementType> = {\n  Component?: T;\n} & React.ComponentPropsWithoutRef<T>;\n\nfunction LivePreview<T extends keyof JSX.IntrinsicElements>(\n  props: Props<T>\n): JSX.Element;\nfunction LivePreview<T extends React.ElementType>(props: Props<T>): JSX.Element;\n\nfunction LivePreview({ Component = \"div\", ...rest }: Props): JSX.Element {\n  const { element: Element, onError, newCode } = useContext(LiveContext);\n\n  return (\n    <ErrorBoundary key={newCode} onError={onError}>\n      <Component {...rest}>{Element ? <Element /> : null}</Component>\n    </ErrorBoundary>\n  );\n}\nexport default LivePreview;\n","import { Component, ReactNode } from \"react\";\n\ntype Props = {\n  children: ReactNode;\n  onError?: (error: Error) => void;\n};\n\ntype State = {\n  hasError: boolean;\n};\n\nexport class ErrorBoundary extends Component<Props, State> {\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  componentDidCatch(err: Error): void {\n    this.props.onError?.(err);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return null;\n    }\n\n    return this.props.children;\n  }\n}\n","import React, { ComponentType } from \"react\";\nimport LiveContext from \"../components/Live/LiveContext\";\n\ntype Props = {\n  live: Record<string, unknown>;\n};\n\nexport default function withLive<T>(\n  WrappedComponent: ComponentType<T & Props>\n) {\n  const WithLive = (props: T) => (\n    <LiveContext.Consumer>\n      {(live) => <WrappedComponent live={live} {...props} />}\n    </LiveContext.Consumer>\n  );\n\n  WithLive.displayName = \"WithLive\";\n  return WithLive;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kCAAyC;AACzC,mBAA2D;AAC3D,0BAA4B;AAoEd;AAtDd,IAAM,aAAa,CAAC,UAAiB;AACnC,QAAM,EAAE,UAAU,cAAc,IAAI;AACpC,QAAM,gBAAY,qBAAO,IAAI;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM,QAAQ,EAAE;AACjD,QAAM,EAAE,MAAM,IAAI;AAElB,8BAAU,MAAM;AACd,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf;AAAA,IACE;AAAA,IACA,CAAC,SAAS;AACR,YAAM,IAAI,KAAK,MAAM,GAAG,EAAE;AAC1B,cAAQ,CAAC;AAET,UAAI,MAAM,UAAU;AAClB,cAAM,SAAS,CAAC;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,MACE,UAAU,MAAM;AAAA,MAChB,aAAa,YAAY,gBAAgB,IAAI;AAAA,IAC/C;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,MAAM,WAAW,OAAO,MAAM,OAC5C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,MAAM,SAAS,mCAAO;AAAA,MAC7B,UAAU,MAAM;AAAA,MAEf,WAAC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,MACT,MACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,aACR,SAAS,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,CAAC,IAC3D;AAAA,UAEL,KAAK;AAAA,UACL,YAAW;AAAA,UAEV,iBAAO,IAAI,CAAC,MAAM,cACjB,6CAAC,yCAAmC,aAAa,EAAE,KAAK,CAAC,IAAxD,EACE;AAAA,iBACE,OAAO,CAAC,UAAU,CAAC,MAAM,KAAK,EAC9B,IAAI,CAAC,OAAO,eACX;AAAA,cAAC;AAAA,iCAEK,cAAc,EAAE,MAAM,CAAC;AAAA,cADtB,SAAS;AAAA,YAEhB,CACD;AAAA,YACF;AAAA,gBATQ,QAAQ,WAUnB,CACD;AAAA;AAAA,MACH;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,IAAO,iBAAQ;;;ACzFf,IAAAA,gBAAsE;;;ACCtE,IAAAC,gBAA6C;AAc7C,IAAM,kBAAc,6BAA4B,CAAC,CAAiB;AAElE,IAAO,sBAAQ;;;ACjBf,IAAAC,gBAAqC;;;ACArC,qBAAmD;AAEnD,IAAM,oBAAiC,CAAC,OAAO,SAAS;AAMzC,SAAR,UAA2B,OAAgB,CAAC,GAAG;AACpD,QAAM,aAAa,MAAM,QAAQ,KAAK,UAAU,IAC5C,KAAK,WAAW,OAAO,OAAO,IAC9B;AAEJ,SAAO,CAAC,aAAiB,eAAAC,WAAW,MAAM,EAAE,WAAW,CAAC,EAAE;AAC5D;;;ACdA,IAAAC,gBAAgD;AAaxC,IAAAC,sBAAA;AAXR,IAAM,gBAAgB,CACpB,SACA,kBACG;AACH,SAAO,MAAM,sBAAsB,wBAAU;AAAA,IAC3C,kBAAkB,OAAc;AAC9B,oBAAc,KAAK;AAAA,IACrB;AAAA,IAEA,SAAS;AACP,aAAO,OAAO,YAAY,aACxB,6CAAC,WAAQ,IACP,cAAAC,QAAM,eAAe,OAAO,IAC9B,UACE;AAAA,IACN;AAAA,EACF;AACF;AAEA,IAAO,wBAAQ;;;ACnBf,IAAM,WAAW,CACf,MACA,UACkB;AAClB,QAAM,YAAY,OAAO,KAAK,KAAK;AACnC,QAAM,cAAc,UAAU,IAAI,CAAC,QAAQ,MAAM,GAAG,CAAC;AACrD,SAAO,IAAI,SAAS,GAAG,WAAW,IAAI,EAAE,GAAG,WAAW;AACxD;AAEA,IAAO,mBAAQ;;;ACPA,SAAR,WAA+B,WAAoC;AACxE,SAAO,UAAU;AAAA,IACf,CAAC,KAAK,cACJ,IAAI,SACF,IAAI,UAAU,GAAG,IAAI,CAAC;AAAA,EAC5B;AACF;;;AJHA,IAAM,WAAW;AACjB,IAAM,WAAW,CAAC,SAAiB,KAAK,KAAK,EAAE,QAAQ,MAAM,EAAE;AAC/D,IAAM,iBAAiB,CAAC,SAAiB,KAAK,QAAQ,UAAU,EAAE,EAAE,KAAK;AACzE,IAAM,cAAc,CAAC,SAAiB,WAAW;AACjD,IAAM,aAAa,CAAC,SAAiB,WAAW;AAQzC,IAAM,kBAAkB,CAC7B,EAAE,OAAO,IAAI,QAAQ,CAAC,GAAG,mBAAmB,KAAK,GACjD,kBACG;AASH,QAAM,sBAAmC,CAAC,KAAK;AAC/C,sBAAoB,oBAAoB,KAAK,YAAY;AAEzD,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,UAAU,EAAE,YAAY,CAAC,SAAS,EAAE,CAAC;AAAA,IACrC;AAAA,IACA;AAAA,IACA,UAAU,EAAE,YAAY,oBAAoB,CAAC;AAAA,IAC7C;AAAA,IACA;AAAA,EACF,EAAE,IAAI;AAEN,SAAO;AAAA,IACL,iBAAS,aAAa,iBAAE,qBAAAC,WAAU,MAAO;AAAA,IACzC;AAAA,EACF;AACF;AAEO,IAAM,qBAAqB,CAChC,EAAE,OAAO,IAAI,QAAQ,CAAC,GAAG,mBAAmB,KAAK,GACjD,gBACA,kBAEG;AACH,QAAM,SAAS,CAAC,YAA2B;AACzC,QAAI,OAAO,YAAY,aAAa;AAClC,oBAAc,IAAI,YAAY,yCAAyC,CAAC;AAAA,IAC1E,OAAO;AACL,qBAAe,sBAAc,SAAS,aAAa,CAAC;AAAA,IACtD;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,IAAI,GAAG;AAC7B,WAAO;AAAA,MACL,IAAI,YAAY,2CAA2C;AAAA,IAC7D;AAAA,EACF;AAEA,QAAM,aAA0B,CAAC,OAAO,SAAS;AACjD,sBAAoB,WAAW,OAAO,GAAG,GAAG,YAAY;AAExD,mBAAS,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,GAAG,+BAAE,qBAAAA,WAAU,QAAZ,EAAmB,OAAO,EAAC;AACvE;;;AF2BI,IAAAC,sBAAA;AA/EJ,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAA6B;AAC3B,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAwB;AAAA,IAChD,OAAO;AAAA,IACP,SAAS;AAAA,EACX,CAAC;AAED,WAAe,eAAe,SAAiB;AAAA;AAC7C,YAAM,gBAAgB,CAAC,UAAiB;AACtC,iBAAS,CAAC,kBAAmB,iCACxB,gBADwB;AAAA,UAE3B,OAAO,MAAM,SAAS;AAAA,UACtB,SAAS;AAAA,QACX,EAAE;AAAA,MACJ;AAQA,UAAI;AACF,cAAM,kBAAkB,gBAAgB,cAAc,OAAO,IAAI;AACjE,YAAI;AACF,gBAAM,kBAAkB,MAAM,QAAQ,QAAQ,eAAe;AAC7D,gBAAM,gBAAgB,CAAC,YACrB,SAAS,EAAE,OAAO,QAAW,SAAS,QAAQ,CAAC;AAEjD,cAAI,OAAO,oBAAoB,UAAU;AACvC,kBAAM,IAAI,MAAM,0BAA0B;AAAA,UAC5C;AAGA,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,YACN;AAAA,YACA;AAAA,UACF;AAEA,cAAI,UAAU;AACZ,qBAAS,CAAC,kBAAmB,iCACxB,gBADwB;AAAA,cAE3B,OAAO;AAAA,cACP,SAAS;AAAA,YACX,EAAE;AACF,+BAAmB,OAAO,eAAe,aAAa;AAAA,UACxD,OAAO;AACL,0BAAc,gBAAgB,OAAO,aAAa,CAAC;AAAA,UACrD;AAAA,QACF,SAAS,OAAP;AACA,iBAAO,cAAc,KAAc;AAAA,QACrC;AAAA,MACF,SAAS,GAAP;AACA,sBAAc,CAAU;AACxB,eAAO,QAAQ,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA;AAEA,QAAM,UAAU,CAAC,UAAiB,SAAS,EAAE,OAAO,MAAM,SAAS,EAAE,CAAC;AAEtE,+BAAU,MAAM;AACd,mBAAe,IAAI,EAAE,MAAM,OAAO;AAAA,EACpC,GAAG,CAAC,MAAM,OAAO,UAAU,aAAa,CAAC;AAEzC,QAAM,WAAW,CAAC,YAAoB;AACpC,mBAAe,OAAO,EAAE,MAAM,OAAO;AAAA,EACvC;AAEA,SACE;AAAA,IAAC,oBAAY;AAAA,IAAZ;AAAA,MACC,OAAO,iCACF,QADE;AAAA,QAEL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;AOrHf,IAAAC,gBAAkC;AAQ9B,IAAAC,sBAAA;AAJW,SAAR,WAA4B,OAA6B;AAC9D,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,SAAS,QAAI,0BAAW,mBAAW;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACI;AAAA,EACN;AAEJ;;;ACjBA,IAAAC,gBAAkC;AAKjB,IAAAC,sBAAA;AAFF,SAAR,UAA8D,OAAU;AAC7E,QAAM,EAAE,MAAM,QAAI,0BAAW,mBAAW;AACxC,SAAO,QAAQ,6CAAC,wCAAQ,QAAR,EAAgB,kBAAM,IAAS;AACjD;;;ACNA,IAAAC,gBAAkC;;;ACAlC,IAAAC,gBAAqC;AAW9B,IAAM,gBAAN,cAA4B,wBAAwB;AAAA,EACzD,OAAO,2BAA2B;AAChC,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,YAAY,OAAc;AACxB,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,UAAU,MAAM;AAAA,EACjC;AAAA,EAEA,kBAAkB,KAAkB;AArBtC;AAsBI,qBAAK,OAAM,YAAX,4BAAqB;AAAA,EACvB;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,aAAO;AAAA,IACT;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;;;ADbsC,IAAAC,sBAAA;AALtC,SAAS,YAAY,IAAoD;AAApD,eAAE,aAAAC,aAAY,MAdnC,IAcqB,IAAwB,iBAAxB,IAAwB,CAAtB;AACrB,QAAM,EAAE,SAAS,SAAS,SAAS,QAAQ,QAAI,0BAAW,mBAAW;AAErE,SACE,6CAAC,iBAA4B,SAC3B,uDAACA,YAAA,iCAAc,OAAd,EAAqB,oBAAU,6CAAC,WAAQ,IAAK,OAAK,KADjC,OAEpB;AAEJ;AACA,IAAO,sBAAQ;;;AEXE,IAAAC,sBAAA;AALF,SAAR,SACL,kBACA;AACA,QAAM,WAAW,CAAC,UAChB,6CAAC,oBAAY,UAAZ,EACE,WAAC,SAAS,6CAAC,mCAAiB,QAAgB,MAAO,GACtD;AAGF,WAAS,cAAc;AACvB,SAAO;AACT;","names":["import_react","import_react","import_react","_transform","import_react","import_jsx_runtime","React","React","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_react","import_jsx_runtime","Component","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,366 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/components/Editor/index.tsx
+import { Highlight, themes } from "prism-react-renderer";
+import { useEffect, useRef, useState } from "react";
+import { useEditable } from "use-editable";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeEditor = (props) => {
+  const { tabMode = "indentation" } = props;
+  const editorRef = useRef(null);
+  const [code, setCode] = useState(props.code || "");
+  const { theme } = props;
+  useEffect(() => {
+    setCode(props.code);
+  }, [props.code]);
+  useEditable(
+    editorRef,
+    (text) => {
+      const t = text.slice(0, -1);
+      setCode(t);
+      if (props.onChange) {
+        props.onChange(t);
+      }
+    },
+    {
+      disabled: props.disabled,
+      indentation: tabMode === "indentation" ? 2 : void 0
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { className: props.className, style: props.style, children: /* @__PURE__ */ jsx(
+    Highlight,
+    {
+      code,
+      theme: props.theme || themes.nightOwl,
+      language: props.language,
+      children: ({
+        className: _className,
+        tokens,
+        getLineProps,
+        getTokenProps,
+        style: _style
+      }) => /* @__PURE__ */ jsx(
+        "pre",
+        {
+          className: _className,
+          style: __spreadValues(__spreadValues({
+            margin: 0,
+            outline: "none",
+            padding: 10,
+            fontFamily: "inherit"
+          }, theme && typeof theme.plain === "object" ? theme.plain : {}), _style),
+          ref: editorRef,
+          spellCheck: "false",
+          children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({}, getLineProps({ line })), { children: [
+            line.filter((token) => !token.empty).map((token, tokenIndex) => /* @__PURE__ */ jsx(
+              "span",
+              __spreadValues({}, getTokenProps({ token })),
+              `token-${tokenIndex}`
+            )),
+            "\n"
+          ] }), `line-${lineIndex}`))
+        }
+      )
+    }
+  ) });
+};
+var Editor_default = CodeEditor;
+
+// src/components/Live/LiveProvider.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/components/Live/LiveContext.ts
+import { createContext } from "react";
+var LiveContext = createContext({});
+var LiveContext_default = LiveContext;
+
+// src/utils/transpile/index.ts
+import React2 from "react";
+
+// src/utils/transpile/transform.ts
+import { transform as _transform } from "sucrase";
+var defaultTransforms = ["jsx", "imports"];
+function transform(opts = {}) {
+  const transforms = Array.isArray(opts.transforms) ? opts.transforms.filter(Boolean) : defaultTransforms;
+  return (code) => _transform(code, { transforms }).code;
+}
+
+// src/utils/transpile/errorBoundary.tsx
+import React, { Component } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var errorBoundary = (Element, errorCallback) => {
+  return class ErrorBoundary extends Component {
+    componentDidCatch(error) {
+      errorCallback(error);
+    }
+    render() {
+      return typeof Element === "function" ? /* @__PURE__ */ jsx2(Element, {}) : React.isValidElement(Element) ? Element : null;
+    }
+  };
+};
+var errorBoundary_default = errorBoundary;
+
+// src/utils/transpile/evalCode.ts
+var evalCode = (code, scope) => {
+  const scopeKeys = Object.keys(scope);
+  const scopeValues = scopeKeys.map((key) => scope[key]);
+  return new Function(...scopeKeys, code)(...scopeValues);
+};
+var evalCode_default = evalCode;
+
+// src/utils/transpile/compose.ts
+function compose(...functions) {
+  return functions.reduce(
+    (acc, currentFn) => (...args) => acc(currentFn(...args))
+  );
+}
+
+// src/utils/transpile/index.ts
+var jsxConst = 'const _jsxFileName = "";';
+var trimCode = (code) => code.trim().replace(/;$/, "");
+var spliceJsxConst = (code) => code.replace(jsxConst, "").trim();
+var addJsxConst = (code) => jsxConst + code;
+var wrapReturn = (code) => `return (${code})`;
+var generateElement = ({ code = "", scope = {}, enableTypeScript = true }, errorCallback) => {
+  const firstPassTransforms = ["jsx"];
+  enableTypeScript && firstPassTransforms.push("typescript");
+  const transformed = compose(
+    addJsxConst,
+    transform({ transforms: ["imports"] }),
+    spliceJsxConst,
+    trimCode,
+    transform({ transforms: firstPassTransforms }),
+    wrapReturn,
+    trimCode
+  )(code);
+  return errorBoundary_default(
+    evalCode_default(transformed, __spreadValues({ React: React2 }, scope)),
+    errorCallback
+  );
+};
+var renderElementAsync = ({ code = "", scope = {}, enableTypeScript = true }, resultCallback, errorCallback) => {
+  const render = (element) => {
+    if (typeof element === "undefined") {
+      errorCallback(new SyntaxError("`render` must be called with valid JSX."));
+    } else {
+      resultCallback(errorBoundary_default(element, errorCallback));
+    }
+  };
+  if (!/render\s*\(/.test(code)) {
+    return errorCallback(
+      new SyntaxError("No-Inline evaluations must call `render`.")
+    );
+  }
+  const transforms = ["jsx", "imports"];
+  enableTypeScript && transforms.splice(1, 0, "typescript");
+  evalCode_default(transform({ transforms })(code), __spreadProps(__spreadValues({ React: React2 }, scope), { render }));
+};
+
+// src/components/Live/LiveProvider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function LiveProvider({
+  children,
+  code = "",
+  language = "tsx",
+  theme,
+  enableTypeScript = true,
+  disabled = false,
+  scope,
+  transformCode,
+  noInline = false
+}) {
+  const [state, setState] = useState2({
+    error: void 0,
+    element: void 0
+  });
+  function transpileAsync(newCode) {
+    return __async(this, null, function* () {
+      const errorCallback = (error) => {
+        setState((previousState) => __spreadProps(__spreadValues({}, previousState), {
+          error: error.toString(),
+          element: void 0
+        }));
+      };
+      try {
+        const transformResult = transformCode ? transformCode(newCode) : newCode;
+        try {
+          const transformedCode = yield Promise.resolve(transformResult);
+          const renderElement = (element) => setState({ error: void 0, element, newCode });
+          if (typeof transformedCode !== "string") {
+            throw new Error("Code failed to transform");
+          }
+          const input = {
+            code: transformedCode,
+            scope,
+            enableTypeScript
+          };
+          if (noInline) {
+            setState((previousState) => __spreadProps(__spreadValues({}, previousState), {
+              error: void 0,
+              element: null
+            }));
+            renderElementAsync(input, renderElement, errorCallback);
+          } else {
+            renderElement(generateElement(input, errorCallback));
+          }
+        } catch (error) {
+          return errorCallback(error);
+        }
+      } catch (e) {
+        errorCallback(e);
+        return Promise.resolve();
+      }
+    });
+  }
+  const onError = (error) => setState({ error: error.toString() });
+  useEffect2(() => {
+    transpileAsync(code).catch(onError);
+  }, [code, scope, noInline, transformCode]);
+  const onChange = (newCode) => {
+    transpileAsync(newCode).catch(onError);
+  };
+  return /* @__PURE__ */ jsx3(
+    LiveContext_default.Provider,
+    {
+      value: __spreadProps(__spreadValues({}, state), {
+        code,
+        language,
+        theme,
+        disabled,
+        onError,
+        onChange
+      }),
+      children
+    }
+  );
+}
+var LiveProvider_default = LiveProvider;
+
+// src/components/Live/LiveEditor.tsx
+import { useContext } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function LiveEditor(props) {
+  const { code, language, theme, disabled, onChange } = useContext(LiveContext_default);
+  return /* @__PURE__ */ jsx4(
+    Editor_default,
+    __spreadValues({
+      theme,
+      code,
+      language,
+      disabled,
+      onChange
+    }, props)
+  );
+}
+
+// src/components/Live/LiveError.tsx
+import { useContext as useContext2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function LiveError(props) {
+  const { error } = useContext2(LiveContext_default);
+  return error ? /* @__PURE__ */ jsx5("pre", __spreadProps(__spreadValues({}, props), { children: error })) : null;
+}
+
+// src/components/Live/LivePreview.tsx
+import { useContext as useContext3 } from "react";
+
+// src/components/Live/ErrorBoundary.tsx
+import { Component as Component2 } from "react";
+var ErrorBoundary = class extends Component2 {
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  componentDidCatch(err) {
+    var _a, _b;
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, err);
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+};
+
+// src/components/Live/LivePreview.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function LivePreview(_a) {
+  var _b = _a, { Component: Component3 = "div" } = _b, rest = __objRest(_b, ["Component"]);
+  const { element: Element, onError, newCode } = useContext3(LiveContext_default);
+  return /* @__PURE__ */ jsx6(ErrorBoundary, { onError, children: /* @__PURE__ */ jsx6(Component3, __spreadProps(__spreadValues({}, rest), { children: Element ? /* @__PURE__ */ jsx6(Element, {}) : null })) }, newCode);
+}
+var LivePreview_default = LivePreview;
+
+// src/hoc/withLive.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function withLive(WrappedComponent) {
+  const WithLive = (props) => /* @__PURE__ */ jsx7(LiveContext_default.Consumer, { children: (live) => /* @__PURE__ */ jsx7(WrappedComponent, __spreadValues({ live }, props)) });
+  WithLive.displayName = "WithLive";
+  return WithLive;
+}
+export {
+  Editor_default as Editor,
+  LiveContext_default as LiveContext,
+  LiveEditor,
+  LiveError,
+  LivePreview_default as LivePreview,
+  LiveProvider_default as LiveProvider,
+  generateElement,
+  renderElementAsync,
+  withLive
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Editor/index.tsx","../src/components/Live/LiveProvider.tsx","../src/components/Live/LiveContext.ts","../src/utils/transpile/index.ts","../src/utils/transpile/transform.ts","../src/utils/transpile/errorBoundary.tsx","../src/utils/transpile/evalCode.ts","../src/utils/transpile/compose.ts","../src/components/Live/LiveEditor.tsx","../src/components/Live/LiveError.tsx","../src/components/Live/LivePreview.tsx","../src/components/Live/ErrorBoundary.tsx","../src/hoc/withLive.tsx"],"sourcesContent":["import { Highlight, Prism, themes } from \"prism-react-renderer\";\nimport { CSSProperties, useEffect, useRef, useState } from \"react\";\nimport { useEditable } from \"use-editable\";\n\nexport type Props = {\n  className?: string;\n  code: string;\n  disabled?: boolean;\n  language: string;\n  prism?: typeof Prism;\n  style?: CSSProperties;\n  tabMode?: \"focus\" | \"indentation\";\n  theme?: typeof themes.nightOwl;\n  onChange?(value: string): void;\n};\n\nconst CodeEditor = (props: Props) => {\n  const { tabMode = \"indentation\" } = props;\n  const editorRef = useRef(null);\n  const [code, setCode] = useState(props.code || \"\");\n  const { theme } = props;\n\n  useEffect(() => {\n    setCode(props.code);\n  }, [props.code]);\n\n  useEditable(\n    editorRef,\n    (text) => {\n      const t = text.slice(0, -1);\n      setCode(t);\n\n      if (props.onChange) {\n        props.onChange(t);\n      }\n    },\n    {\n      disabled: props.disabled,\n      indentation: tabMode === \"indentation\" ? 2 : undefined,\n    }\n  );\n\n  return (\n    <div className={props.className} style={props.style}>\n      <Highlight\n        code={code}\n        theme={props.theme || themes.nightOwl}\n        language={props.language}\n      >\n        {({\n          className: _className,\n          tokens,\n          getLineProps,\n          getTokenProps,\n          style: _style,\n        }) => (\n          <pre\n            className={_className}\n            style={{\n              margin: 0,\n              outline: \"none\",\n              padding: 10,\n              fontFamily: \"inherit\",\n              ...(theme && typeof theme.plain === \"object\" ? theme.plain : {}),\n              ..._style,\n            }}\n            ref={editorRef}\n            spellCheck=\"false\"\n          >\n            {tokens.map((line, lineIndex) => (\n              <span key={`line-${lineIndex}`} {...getLineProps({ line })}>\n                {line\n                  .filter((token) => !token.empty)\n                  .map((token, tokenIndex) => (\n                    <span\n                      key={`token-${tokenIndex}`}\n                      {...getTokenProps({ token })}\n                    />\n                  ))}\n                {\"\\n\"}\n              </span>\n            ))}\n          </pre>\n        )}\n      </Highlight>\n    </div>\n  );\n};\n\nexport default CodeEditor;\n","import { useEffect, useState, ComponentType, PropsWithChildren } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport { generateElement, renderElementAsync } from \"../../utils/transpile\";\nimport { themes } from \"prism-react-renderer\";\n\ntype ProviderState = {\n  element?: ComponentType | null;\n  error?: string;\n  newCode?: string;\n};\n\ntype Props = {\n  code?: string;\n  disabled?: boolean;\n  enableTypeScript?: boolean;\n  language?: string;\n  noInline?: boolean;\n  scope?: Record<string, unknown>;\n  theme?: typeof themes.nightOwl;\n  transformCode?(code: string): void;\n};\n\nfunction LiveProvider({\n  children,\n  code = \"\",\n  language = \"tsx\",\n  theme,\n  enableTypeScript = true,\n  disabled = false,\n  scope,\n  transformCode,\n  noInline = false,\n}: PropsWithChildren<Props>) {\n  const [state, setState] = useState<ProviderState>({\n    error: undefined,\n    element: undefined,\n  });\n\n  async function transpileAsync(newCode: string) {\n    const errorCallback = (error: Error) => {\n      setState((previousState) => ({\n        ...previousState,\n        error: error.toString(),\n        element: undefined,\n      }));\n    };\n\n    // - transformCode may be synchronous or asynchronous.\n    // - transformCode may throw an exception or return a rejected promise, e.g.\n    //   if newCode is invalid and cannot be transformed.\n    // - Not using async-await to since it requires targeting ES 2017 or\n    //   importing regenerator-runtime... in the next major version of\n    //   react-live, should target ES 2017+\n    try {\n      const transformResult = transformCode ? transformCode(newCode) : newCode;\n      try {\n        const transformedCode = await Promise.resolve(transformResult);\n        const renderElement = (element: ComponentType) =>\n          setState({ error: undefined, element, newCode });\n\n        if (typeof transformedCode !== \"string\") {\n          throw new Error(\"Code failed to transform\");\n        }\n\n        // Transpilation arguments\n        const input = {\n          code: transformedCode,\n          scope,\n          enableTypeScript,\n        };\n\n        if (noInline) {\n          setState((previousState) => ({\n            ...previousState,\n            error: undefined,\n            element: null,\n          })); // Reset output for async (no inline) evaluation\n          renderElementAsync(input, renderElement, errorCallback);\n        } else {\n          renderElement(generateElement(input, errorCallback));\n        }\n      } catch (error) {\n        return errorCallback(error as Error);\n      }\n    } catch (e) {\n      errorCallback(e as Error);\n      return Promise.resolve();\n    }\n  }\n\n  const onError = (error: Error) => setState({ error: error.toString() });\n\n  useEffect(() => {\n    transpileAsync(code).catch(onError);\n  }, [code, scope, noInline, transformCode]);\n\n  const onChange = (newCode: string) => {\n    transpileAsync(newCode).catch(onError);\n  };\n\n  return (\n    <LiveContext.Provider\n      value={{\n        ...state,\n        code,\n        language,\n        theme,\n        disabled,\n        onError,\n        onChange,\n      }}\n    >\n      {children}\n    </LiveContext.Provider>\n  );\n}\n\nexport default LiveProvider;\n","import { themes } from \"prism-react-renderer\";\nimport { ComponentType, createContext } from \"react\";\n\ntype ContextValue = {\n  error?: string;\n  element?: ComponentType | null;\n  code: string;\n  newCode?: string;\n  disabled: boolean;\n  language: string;\n  theme?: typeof themes.nightOwl;\n  onError(error: Error): void;\n  onChange(value: string): void;\n};\n\nconst LiveContext = createContext<ContextValue>({} as ContextValue);\n\nexport default LiveContext;\n","import React, { ComponentType } from \"react\";\nimport transform from \"./transform\";\nimport errorBoundary from \"./errorBoundary\";\nimport evalCode from \"./evalCode\";\nimport compose from \"./compose\";\nimport { Transform } from \"sucrase\";\n\nconst jsxConst = 'const _jsxFileName = \"\";';\nconst trimCode = (code: string) => code.trim().replace(/;$/, \"\");\nconst spliceJsxConst = (code: string) => code.replace(jsxConst, \"\").trim();\nconst addJsxConst = (code: string) => jsxConst + code;\nconst wrapReturn = (code: string) => `return (${code})`;\n\ntype GenerateOptions = {\n  code: string;\n  scope?: Record<string, unknown>;\n  enableTypeScript: boolean;\n};\n\nexport const generateElement = (\n  { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n  errorCallback: (error: Error) => void\n) => {\n  /**\n   * To enable TypeScript we need to transform the TS to JS code first,\n   * splice off the JSX const, wrap the eval in a return statement, then\n   * transform any imports. The two-phase approach is required to do\n   * the implicit evaluation and not wrap leading Interface or Type\n   * statements in the return.\n   */\n\n  const firstPassTransforms: Transform[] = [\"jsx\"];\n  enableTypeScript && firstPassTransforms.push(\"typescript\");\n\n  const transformed = compose<string>(\n    addJsxConst,\n    transform({ transforms: [\"imports\"] }),\n    spliceJsxConst,\n    trimCode,\n    transform({ transforms: firstPassTransforms }),\n    wrapReturn,\n    trimCode\n  )(code);\n\n  return errorBoundary(\n    evalCode(transformed, { React, ...scope }),\n    errorCallback\n  );\n};\n\nexport const renderElementAsync = (\n  { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n  resultCallback: (sender: ComponentType) => void,\n  errorCallback: (error: Error) => void\n  // eslint-disable-next-line consistent-return\n) => {\n  const render = (element: ComponentType) => {\n    if (typeof element === \"undefined\") {\n      errorCallback(new SyntaxError(\"`render` must be called with valid JSX.\"));\n    } else {\n      resultCallback(errorBoundary(element, errorCallback));\n    }\n  };\n\n  if (!/render\\s*\\(/.test(code)) {\n    return errorCallback(\n      new SyntaxError(\"No-Inline evaluations must call `render`.\")\n    );\n  }\n\n  const transforms: Transform[] = [\"jsx\", \"imports\"];\n  enableTypeScript && transforms.splice(1, 0, \"typescript\");\n\n  evalCode(transform({ transforms })(code), { React, ...scope, render });\n};\n","import { transform as _transform, Transform } from \"sucrase\";\n\nconst defaultTransforms: Transform[] = [\"jsx\", \"imports\"];\n\ntype Options = {\n  transforms?: Transform[];\n};\n\nexport default function transform(opts: Options = {}) {\n  const transforms = Array.isArray(opts.transforms)\n    ? opts.transforms.filter(Boolean)\n    : defaultTransforms;\n\n  return (code: string) => _transform(code, { transforms }).code;\n}\n","import React, { ComponentType, Component } from \"react\";\n\nconst errorBoundary = (\n  Element: ComponentType,\n  errorCallback: (error: Error) => void\n) => {\n  return class ErrorBoundary extends Component {\n    componentDidCatch(error: Error) {\n      errorCallback(error);\n    }\n\n    render() {\n      return typeof Element === \"function\" ? (\n        <Element />\n      ) : React.isValidElement(Element) ? (\n        Element\n      ) : null;\n    }\n  };\n};\n\nexport default errorBoundary;\n","import type { ComponentType } from \"react\";\n\nconst evalCode = (\n  code: string,\n  scope: Record<string, unknown>\n): ComponentType => {\n  const scopeKeys = Object.keys(scope);\n  const scopeValues = scopeKeys.map((key) => scope[key]);\n  return new Function(...scopeKeys, code)(...scopeValues);\n};\n\nexport default evalCode;\n","/**\n * Creates a new composite function that invokes the functions from right to left\n */\n\nexport default function compose<T>(...functions: ((...args: T[]) => T)[]) {\n  return functions.reduce(\n    (acc, currentFn) =>\n      (...args: T[]) =>\n        acc(currentFn(...args))\n  );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport Editor, { Props as EditorProps } from \"../Editor\";\n\nexport default function LiveEditor(props: Partial<EditorProps>) {\n  const { code, language, theme, disabled, onChange } = useContext(LiveContext);\n\n  return (\n    <Editor\n      theme={theme}\n      code={code}\n      language={language}\n      disabled={disabled}\n      onChange={onChange}\n      {...props}\n    />\n  );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\nexport default function LiveError<T extends Record<string, unknown>>(props: T) {\n  const { error } = useContext(LiveContext);\n  return error ? <pre {...props}>{error}</pre> : null;\n}\n","import React, { useContext } from \"react\";\n\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport LiveContext from \"./LiveContext\";\n\ntype Props<T extends React.ElementType = React.ElementType> = {\n  Component?: T;\n} & React.ComponentPropsWithoutRef<T>;\n\nfunction LivePreview<T extends keyof JSX.IntrinsicElements>(\n  props: Props<T>\n): JSX.Element;\nfunction LivePreview<T extends React.ElementType>(props: Props<T>): JSX.Element;\n\nfunction LivePreview({ Component = \"div\", ...rest }: Props): JSX.Element {\n  const { element: Element, onError, newCode } = useContext(LiveContext);\n\n  return (\n    <ErrorBoundary key={newCode} onError={onError}>\n      <Component {...rest}>{Element ? <Element /> : null}</Component>\n    </ErrorBoundary>\n  );\n}\nexport default LivePreview;\n","import { Component, ReactNode } from \"react\";\n\ntype Props = {\n  children: ReactNode;\n  onError?: (error: Error) => void;\n};\n\ntype State = {\n  hasError: boolean;\n};\n\nexport class ErrorBoundary extends Component<Props, State> {\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  componentDidCatch(err: Error): void {\n    this.props.onError?.(err);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return null;\n    }\n\n    return this.props.children;\n  }\n}\n","import React, { ComponentType } from \"react\";\nimport LiveContext from \"../components/Live/LiveContext\";\n\ntype Props = {\n  live: Record<string, unknown>;\n};\n\nexport default function withLive<T>(\n  WrappedComponent: ComponentType<T & Props>\n) {\n  const WithLive = (props: T) => (\n    <LiveContext.Consumer>\n      {(live) => <WrappedComponent live={live} {...props} />}\n    </LiveContext.Consumer>\n  );\n\n  WithLive.displayName = \"WithLive\";\n  return WithLive;\n}\n"],"mappings":"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","names":["useEffect","useState","React","jsx","React","jsx","useState","useEffect","jsx","useContext","jsx","useContext","useContext","Component","jsx","Component","useContext","jsx"]}

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@depup/react-live",
+  "version": "4.1.8-depup.0",
+  "description": "A production-focused playground for live editing React code (with updated dependencies)",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "jsnext:main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "license": "MIT",
+  "dependencies": {
+    "prism-react-renderer": "^2.4.1",
+    "sucrase": "^3.35.1",
+    "use-editable": "^2.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "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",
+    "tsup": "^6.7.0",
+    "typescript": "^4.9.5",
+    "typings-tester": "^0.3.1",
+    "webpack": "^5.76.3"
+  },
+  "files": [
+    "packages/react-live/src",
+    "lib",
+    "dist",
+    "react-live.css",
+    "typings/react-live.d.ts",
+    "changes.json",
+    "README.md"
+  ],
+  "author": "@FormidableLabs",
+  "bugs": {
+    "url": "https://github.com/philpl/react-live/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormidableLabs/react-live"
+  },
+  "engines": {
+    "npm": ">= 2.0.0",
+    "node": ">= 0.12.0"
+  },
+  "keywords": [
+    "react-live",
+    "depup",
+    "updated-dependencies",
+    "security",
+    "latest",
+    "patched",
+    "react",
+    "live",
+    "live edit",
+    "component playground",
+    "react live"
+  ],
+  "jest": {
+    "testEnvironment": "jsdom",
+    "resetMocks": true,
+    "rootDir": "./src",
+    "testURL": "http://localhost/"
+  },
+  "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"
+  },
+  "depup": {
+    "changes": {
+      "prism-react-renderer": {
+        "from": "^2.4.0",
+        "to": "^2.4.1"
+      },
+      "sucrase": {
+        "from": "^3.35.0",
+        "to": "^3.35.1"
+      }
+    },
+    "depsUpdated": 2,
+    "originalPackage": "react-live",
+    "originalVersion": "4.1.8",
+    "processedAt": "2026-03-18T23:31:21.447Z",
+    "smokeTest": "failed"
+  }
+}