react-live-unplugin/dist/default/ReactLive.js

Turn React components into live code blocks with ease.

import React, { useMemo } from "react";
import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live";
import { transformCode } from "../transformCode.js";
const classNameRecord = {
  container: "react-live-unplugin",
  editor: "react-live-unplugin__editor",
  preview: "react-live-unplugin__preview",
  error: "react-live-unplugin__error"
};
const ReactLiveInternal = ({ scope, code, ...props }) => {
  const mergedScope = useMemo(
    () => ({
      ...React,
      ...scope
    }),
    [scope]
  );
  return /* @__PURE__ */ React.createElement(
    LiveProvider,
    {
      ...props,
      scope: mergedScope,
      noInline: true,
      code: code || "",
      transformCode
    },
    /* @__PURE__ */ React.createElement("div", { className: classNameRecord.container }, /* @__PURE__ */ React.createElement("div", { className: classNameRecord.editor }, /* @__PURE__ */ React.createElement(LiveEditor, null)), /* @__PURE__ */ React.createElement("div", { className: classNameRecord.error }, /* @__PURE__ */ React.createElement(LiveError, null)), /* @__PURE__ */ React.createElement("div", { className: classNameRecord.preview }, /* @__PURE__ */ React.createElement(LivePreview, null)))
  );
};
const ReactLive = Object.assign(ReactLiveInternal, {
  displayName: "ReactLive",
  classNameRecord
});
export { ReactLive };