@jbpark/live-editor 1.14.0 → 1.15.0

package/dist/preview/index.d.ts

@@ -0,0 +1,2 @@
+import { n as Props, t as Preview } from "../index-lgHdCda5.js";
+export { type Props, Preview as default };

package/dist/preview/index.js

@@ -0,0 +1,2 @@
+import { t as Preview } from "../preview-DkLLqgKE.js";
+export { Preview as default };

package/dist/preview-DkLLqgKE.js

@@ -0,0 +1,113 @@
+import { i as compile, r as cn, t as baseModules } from "./utils-BzfDKU6y.js";
+import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
+import { t as Frame } from "./frame-C11nuIBH.js";
+import { t as generateTailwindCSSFromDOM } from "./tailwind-CbjdLyVX.js";
+import { t as Error$1 } from "./error-DRMGumEj.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/preview/client.tsx
+const Client = ({ code: _code = "", className, showError, props = {}, modules = {}, frame, dynamicTailwind = false, provider }) => {
+	const { code } = usePreview();
+	const { error, setError } = useError();
+	const isError = !!showError && !!error;
+	const classNames = cn(isError && "hidden", className);
+	const mergedModules = {
+		...baseModules,
+		...modules
+	};
+	const effectiveCode = _code || code;
+	const [dynamicCSS, setDynamicCSS] = useState("");
+	const [contentEl, setContentEl] = useState(null);
+	const contentRef = useCallback((el) => {
+		setContentEl(el);
+	}, []);
+	useEffect(() => {
+		if (!effectiveCode || !dynamicTailwind || !contentEl) return;
+		let cancelled = false;
+		generateTailwindCSSFromDOM(contentEl).then((css) => {
+			if (!cancelled) setDynamicCSS(css);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		effectiveCode,
+		dynamicTailwind,
+		contentEl
+	]);
+	let module = null;
+	if (effectiveCode) try {
+		module = compile(effectiveCode, mergedModules);
+	} catch (e) {
+		module = {
+			exports: {},
+			error: e instanceof Error ? e.message : "Module transformation error"
+		};
+	}
+	const componentProps = useMemo(() => ({ ...props }), [props]);
+	const renderProvider = (component) => {
+		return provider ? provider(component) : component;
+	};
+	if (module && module.error) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: cn("relative h-full w-full", classNames),
+		children: /* @__PURE__ */ jsx(Error$1, {
+			message: module.error,
+			title: "Compile Error"
+		})
+	}), /* @__PURE__ */ jsx(Error$1.Runtime, { open: isError })] });
+	const Component = module?.exports?.default;
+	if (!Component) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [frame ? /* @__PURE__ */ jsx("div", {
+		className: cn("h-full w-full", classNames),
+		children: /* @__PURE__ */ jsx(Frame, {
+			...frame,
+			children: (container) => /* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				style: { display: "contents" },
+				children: /* @__PURE__ */ jsx(Error$1.Boundary, {
+					resetKeys: [effectiveCode],
+					onError: (e) => setError(e.message),
+					children: renderProvider(/* @__PURE__ */ jsxs(Error$1.Guard, {
+						onError: (e) => setError(e.message),
+						children: [/* @__PURE__ */ jsx(Component, {
+							...componentProps,
+							container
+						}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
+					}))
+				})
+			})
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		ref: contentRef,
+		className: cn("relative h-full w-full overflow-x-hidden overflow-y-auto", classNames),
+		style: {
+			isolation: "isolate",
+			transform: "translateZ(0)",
+			containerType: "inline-size"
+		},
+		children: /* @__PURE__ */ jsx(Error$1.Boundary, {
+			resetKeys: [effectiveCode],
+			onError: (e) => setError(e.message),
+			children: renderProvider(/* @__PURE__ */ jsxs(Error$1.Guard, {
+				onError: (e) => setError(e.message),
+				children: [/* @__PURE__ */ jsx(Component, { ...componentProps }), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
+			}))
+		})
+	}), /* @__PURE__ */ jsx(Error$1.Runtime, { open: isError })] });
+};
+//#endregion
+//#region src/components/preview/preview.tsx
+const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, provider, ...restProps }) => {
+	return /* @__PURE__ */ jsx(Client, {
+		code,
+		props,
+		modules,
+		dynamicTailwind,
+		provider,
+		...restProps
+	});
+};
+//#endregion
+export { Preview as t };
+
+//# sourceMappingURL=preview-DkLLqgKE.js.map

package/dist/preview-DkLLqgKE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-DkLLqgKE.js","names":["LiveError"],"sources":["../src/components/preview/client.tsx","../src/components/preview/preview.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport LiveError from '~/components/error';\nimport Frame, { type FrameProps } from '~/components/frame';\nimport { baseModules, cn, compile } from '~/utils';\nimport { generateTailwindCSSFromDOM } from '~/utils/tailwind';\n\nimport { type Props } from './preview';\n\nconst Client = ({\n  code: _code = '',\n  className,\n  showError,\n  props = {},\n  modules = {},\n  frame,\n  dynamicTailwind = false,\n  provider,\n}: Props) => {\n  const { code } = usePreview();\n  const { error, setError } = useError();\n  const isError = !!showError && !!error;\n\n  const classNames = cn(isError && 'hidden', className);\n\n  const mergedModules = { ...baseModules, ...modules };\n  const effectiveCode = _code || code;\n\n  // Scans the actual rendered DOM (via `contentRef`, attached below) rather\n  // than `effectiveCode`'s source text, so classes contributed by an\n  // imported component (e.g. ui-kit's `Button`) are picked up too — those\n  // never appear as literal text in the previewed source, only in that\n  // component's own compiled output.\n  //\n  // The wrapper below is tracked via a callback ref (`contentEl` state)\n  // rather than a plain `useRef`, because in shadow mode it isn't mounted\n  // on this component's first commit at all — `Shadow` creates its portal\n  // target in its own effect and only re-renders with it afterwards, one\n  // commit later. A plain ref read in an `[effectiveCode, dynamicTailwind]`\n  // -keyed effect would see `null` on that first pass and never retry;\n  // making the element itself a dependency re-runs the scan once it\n  // actually exists.\n  const [dynamicCSS, setDynamicCSS] = useState('');\n  const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);\n  const contentRef = useCallback((el: HTMLDivElement | null) => {\n    setContentEl(el);\n  }, []);\n\n  useEffect(() => {\n    if (!effectiveCode || !dynamicTailwind || !contentEl) {\n      return;\n    }\n\n    let cancelled = false;\n\n    generateTailwindCSSFromDOM(contentEl).then(css => {\n      if (!cancelled) {\n        setDynamicCSS(css);\n      }\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [effectiveCode, dynamicTailwind, contentEl]);\n\n  let module = null;\n\n  if (effectiveCode) {\n    try {\n      module = compile(effectiveCode, mergedModules);\n    } catch (e) {\n      module = {\n        exports: {},\n        error: e instanceof Error ? e.message : 'Module transformation error',\n      };\n    }\n  }\n\n  const componentProps = useMemo(\n    () => ({\n      ...props,\n    }),\n    [props],\n  );\n\n  const renderProvider = (component: React.ReactNode) => {\n    return provider ? provider(component) : component;\n  };\n\n  if (module && module.error) {\n    return (\n      <>\n        <div className={cn('relative h-full w-full', classNames)}>\n          <LiveError message={module.error} title=\"Compile Error\" />\n        </div>\n        <LiveError.Runtime open={isError} />\n      </>\n    );\n  }\n\n  const Component = module?.exports?.default;\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <>\n      {frame ? (\n        <div className={cn('h-full w-full', classNames)}>\n          <Frame {...(frame as FrameProps)}>\n            {container => (\n              <div ref={contentRef} style={{ display: 'contents' }}>\n                <LiveError.Boundary\n                  resetKeys={[effectiveCode]}\n                  onError={(e: Error) => setError(e.message)}\n                >\n                  {renderProvider(\n                    <LiveError.Guard onError={e => setError(e.message)}>\n                      <Component {...componentProps} container={container} />\n                      {dynamicTailwind && dynamicCSS && (\n                        <style>{dynamicCSS}</style>\n                      )}\n                    </LiveError.Guard>,\n                  )}\n                </LiveError.Boundary>\n              </div>\n            )}\n          </Frame>\n        </div>\n      ) : (\n        <div\n          ref={contentRef}\n          className={cn(\n            'relative h-full w-full overflow-x-hidden overflow-y-auto',\n            classNames,\n          )}\n          style={{\n            isolation: 'isolate',\n            transform: 'translateZ(0)',\n            containerType: 'inline-size',\n          }}\n        >\n          <LiveError.Boundary\n            resetKeys={[effectiveCode]}\n            onError={e => setError(e.message)}\n          >\n            {renderProvider(\n              <LiveError.Guard onError={e => setError(e.message)}>\n                <Component {...componentProps} />\n                {dynamicTailwind && dynamicCSS && <style>{dynamicCSS}</style>}\n              </LiveError.Guard>,\n            )}\n          </LiveError.Boundary>\n        </div>\n      )}\n      <LiveError.Runtime open={isError} />\n    </>\n  );\n};\n\nexport default Client;\n","import type React from 'react';\n\nimport type { FrameProps } from '../frame';\nimport Client from './client';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  code?: string;\n  showError?: boolean;\n  props?: Record<string, unknown>;\n  container?: HTMLElement | null;\n  frame?: boolean | FrameProps;\n  modules?: Record<string, unknown>;\n  dynamicTailwind?: boolean;\n  provider?: (children: React.ReactNode) => React.ReactNode;\n}\n\n// A thin wrapper around Client, which does the actual compiling, error\n// handling, and frame wrapping. This used to have its own duplicate\n// compile-and-render branch for the `code` prop that never wrapped its\n// output in <Frame>, so `frame` was silently ignored whenever `code` was\n// passed — see #187. Client already handles `code` (falling back to\n// context when absent) and `frame`, so there is only one render path now.\nconst Preview = ({\n  code,\n  props = {},\n  modules = {},\n  dynamicTailwind = false,\n  provider,\n  ...restProps\n}: Props) => {\n  return (\n    <Client\n      code={code}\n      props={props}\n      modules={modules}\n      dynamicTailwind={dynamicTailwind}\n      provider={provider}\n      {...restProps}\n    />\n  );\n};\n\nexport default Preview;\n"],"mappings":";;;;;;;;AAYA,MAAM,UAAU,EACd,MAAM,QAAQ,IACd,WACA,WACA,QAAQ,CAAC,GACT,UAAU,CAAC,GACX,OACA,kBAAkB,OAClB,eACW;CACX,MAAM,EAAE,SAAS,WAAW;CAC5B,MAAM,EAAE,OAAO,aAAa,SAAS;CACrC,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;CAEjC,MAAM,aAAa,GAAG,WAAW,UAAU,SAAS;CAEpD,MAAM,gBAAgB;EAAE,GAAG;EAAa,GAAG;CAAQ;CACnD,MAAM,gBAAgB,SAAS;CAgB/B,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,aAAa,aAAa,OAA8B;EAC5D,aAAa,EAAE;CACjB,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,WACzC;EAGF,IAAI,YAAY;EAEhB,2BAA2B,SAAS,CAAC,CAAC,MAAK,QAAO;GAChD,IAAI,CAAC,WACH,cAAc,GAAG;EAErB,CAAC;EAED,aAAa;GACX,YAAY;EACd;CACF,GAAG;EAAC;EAAe;EAAiB;CAAS,CAAC;CAE9C,IAAI,SAAS;CAEb,IAAI,eACF,IAAI;EACF,SAAS,QAAQ,eAAe,aAAa;CAC/C,SAAS,GAAG;EACV,SAAS;GACP,SAAS,CAAC;GACV,OAAO,aAAa,QAAQ,EAAE,UAAU;EAC1C;CACF;CAGF,MAAM,iBAAiB,eACd,EACL,GAAG,MACL,IACA,CAAC,KAAK,CACR;CAEA,MAAM,kBAAkB,cAA+B;EACrD,OAAO,WAAW,SAAS,SAAS,IAAI;CAC1C;CAEA,IAAI,UAAU,OAAO,OACnB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;EACrD,UAAA,oBAACA,SAAD;GAAW,SAAS,OAAO;GAAO,OAAM;EAAiB,CAAA;CACtD,CAAA,GACL,oBAACA,QAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;CAIN,MAAM,YAAY,QAAQ,SAAS;CAEnC,IAAI,CAAC,WACH,OAAO;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAC5C,UAAA,oBAAC,OAAD;GAAO,GAAK;GACT,WAAA,cACC,oBAAC,OAAD;IAAK,KAAK;IAAY,OAAO,EAAE,SAAS,WAAW;IACjD,UAAA,oBAACA,QAAU,UAAX;KACE,WAAW,CAAC,aAAa;KACzB,UAAU,MAAa,SAAS,EAAE,OAAO;KAExC,UAAA,eACC,qBAACA,QAAU,OAAX;MAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;MAAjD,UAAA,CACE,oBAAC,WAAD;OAAW,GAAI;OAA2B;MAAY,CAAA,GACrD,mBAAmB,cAClB,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAEb;KACnB,CAAA,CAAA;IACkB,CAAA;GACjB,CAAA;EAEF,CAAA;CACJ,CAAA,IAEL,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,4DACA,UACF;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,eAAe;EACjB;EAEA,UAAA,oBAACA,QAAU,UAAX;GACE,WAAW,CAAC,aAAa;GACzB,UAAS,MAAK,SAAS,EAAE,OAAO;GAE/B,UAAA,eACC,qBAACA,QAAU,OAAX;IAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;IAAjD,UAAA,CACE,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA,GAC/B,mBAAmB,cAAc,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAC7C;GACnB,CAAA,CAAA;EACkB,CAAA;CACjB,CAAA,GAEP,oBAACA,QAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;AAEN;;;AC7IA,MAAM,WAAW,EACf,MACA,QAAQ,CAAC,GACT,UAAU,CAAC,GACX,kBAAkB,OAClB,UACA,GAAG,gBACQ;CACX,OACE,oBAAC,QAAD;EACQ;EACC;EACE;EACQ;EACP;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/provider/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+//#region src/components/context/context.d.ts
+declare const ContextProvider: ({ children }: {
+  children?: React.ReactNode;
+}) => React.JSX.Element;
+//#endregion
+export { ContextProvider as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/provider/index.js

@@ -0,0 +1,2 @@
+import { t as ContextProvider } from "../context-DrqO0VVu.js";
+export { ContextProvider as default };

package/dist/states-Ci1AvoQ9.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+//#region src/components/context/states.ts
+const PreviewContext = createContext(void 0);
+const ErrorContext = createContext(void 0);
+const usePreview = () => {
+	const context = useContext(PreviewContext);
+	if (context === void 0) throw new Error("usePreview must be used within <Live> (ContextProvider)");
+	return context;
+};
+const useError = () => {
+	const context = useContext(ErrorContext);
+	if (context === void 0) throw new Error("useError must be used within <Live> (ContextProvider)");
+	return context;
+};
+//#endregion
+export { usePreview as i, PreviewContext as n, useError as r, ErrorContext as t };
+
+//# sourceMappingURL=states-Ci1AvoQ9.js.map

package/dist/states-Ci1AvoQ9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states-Ci1AvoQ9.js","names":[],"sources":["../src/components/context/states.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\n\nexport interface PreviewContextType {\n  code: string;\n  setCode: Dispatch<SetStateAction<string>>;\n}\n\nexport interface ErrorContextType {\n  error: string | null;\n  setError: Dispatch<SetStateAction<string | null>>;\n}\n\n// `undefined` (rather than a no-op default) so usePreview/useError can tell\n// \"no <Live>/ContextProvider ancestor\" apart from \"a real value\" and throw\n// instead of silently no-op'ing — forgetting to wrap with <Live> previously\n// failed silently (setCode/setError did nothing, code/error just stayed at\n// their hardcoded defaults) instead of surfacing as a clear error.\nexport const PreviewContext = createContext<PreviewContextType | undefined>(\n  undefined,\n);\n\nexport const ErrorContext = createContext<ErrorContextType | undefined>(\n  undefined,\n);\n\nexport const usePreview = () => {\n  const context = useContext(PreviewContext);\n\n  if (context === undefined) {\n    throw new Error('usePreview must be used within <Live> (ContextProvider)');\n  }\n\n  return context;\n};\n\nexport const useError = () => {\n  const context = useContext(ErrorContext);\n\n  if (context === undefined) {\n    throw new Error('useError must be used within <Live> (ContextProvider)');\n  }\n\n  return context;\n};\n"],"mappings":";;AAoBA,MAAa,iBAAiB,cAC5B,KAAA,CACF;AAEA,MAAa,eAAe,cAC1B,KAAA,CACF;AAEA,MAAa,mBAAmB;CAC9B,MAAM,UAAU,WAAW,cAAc;CAEzC,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,yDAAyD;CAG3E,OAAO;AACT;AAEA,MAAa,iBAAiB;CAC5B,MAAM,UAAU,WAAW,YAAY;CAEvC,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MAAM,uDAAuD;CAGzE,OAAO;AACT"}