@jbpark/live-editor 1.7.0 → 1.8.1

package/dist/index.d.mts

@@ -49,6 +49,7 @@ interface Props$6 {
   children: React$1.ReactNode;
   fallback?: (message?: string) => React$1.ReactNode;
   onError?: (e: Error, info: React$1.ErrorInfo) => void;
+  resetKeys?: readonly unknown[];
 }
 interface State {
   hasError: boolean;
@@ -58,6 +59,7 @@ declare class ErrorBoundary extends React$1.Component<Props$6, State> {
   constructor(props: Props$6);
   static getDerivedStateFromError(error: Error): State;
   componentDidCatch(error: Error, errorInfo: React$1.ErrorInfo): void;
+  componentDidUpdate(prevProps: Props$6): void;
   render(): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
 }
 //#endregion

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { _ as DRAGGABLE_ITEMS, b as __toESM, d as require_lib$1, f as require_lib, g as DEFAULT_TEMPLATE, p as BINDING_PROP } from "./document-kU_tXfS_.mjs";
-import { a as detectTypeScript, c as generateSections, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-qt78kxvP.mjs";
-import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-DxgO-X_f.mjs";
+import { _ as DRAGGABLE_ITEMS, b as __toESM, d as require_lib$1, f as require_lib, g as DEFAULT_TEMPLATE, p as BINDING_PROP } from "./document-DJDRM79h.mjs";
+import { a as detectTypeScript, c as generateSections, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-D1tlgtgj.mjs";
+import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-DiVN0l7x.mjs";
 import { generateTailwindCSS } from "./utils/tailwind/index.mjs";
 import "@jbpark/ui-kit/style.css";
 import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -44,8 +44,12 @@ const useError = () => {
 //#endregion
 //#region src/components/context/context.tsx
 const ContextProvider = ({ children }) => {
-	const [code, setCode] = useState(DEFAULT_TEMPLATE);
+	const [code, setCodeState] = useState(DEFAULT_TEMPLATE);
 	const [error, setError] = useState(null);
+	const setCode = useCallback((next) => {
+		setError(null);
+		setCodeState(next);
+	}, []);
 	useEffect(() => {
 		return () => {
 			clearCompilationCache();
@@ -72,7 +76,9 @@ const EMPTY_STRING_ARRAY = [];
 const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_STRING_ARRAY, styles = EMPTY_STRING_ARRAY, stylesheets = EMPTY_STRING_ARRAY, autoHeight = false, syncStyle = false, children, onLoaded, ...props }) => {
 	const iframeRef = useRef(null);
 	const [mountNode, setMountNode] = useState(null);
-	const scriptsLoadedRef = useRef(false);
+	const loadedScriptsRef = useRef(/* @__PURE__ */ new Set());
+	const prevStyleCountRef = useRef(0);
+	const prevStylesheetCountRef = useRef(0);
 	const shouldAutoHeight = autoHeight && style.height == null;
 	const styleManagerRef = useRef({
 		copiedLinks: /* @__PURE__ */ new Set(),
@@ -129,9 +135,10 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			}
 			setMountNode(node);
 			applyStyle();
-			if (scripts.length && !scriptsLoadedRef.current) {
-				scriptsLoadedRef.current = true;
-				Promise.all(scripts.map(getCachedScriptBlob)).then((blobUrls) => {
+			const pendingScripts = scripts.filter((src) => !loadedScriptsRef.current.has(src));
+			if (pendingScripts.length) {
+				pendingScripts.forEach((src) => loadedScriptsRef.current.add(src));
+				Promise.all(pendingScripts.map(getCachedScriptBlob)).then((blobUrls) => {
 					if (!doc.head) return;
 					const fragment = doc.createDocumentFragment();
 					blobUrls.forEach((blobUrl) => {
@@ -184,6 +191,8 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			}
 			if (styleEl.textContent !== css) styleEl.textContent = css;
 		});
+		for (let index = styles.length; index < prevStyleCountRef.current; index++) doc.getElementById(`injected-style-${index}`)?.remove();
+		prevStyleCountRef.current = styles.length;
 		stylesheets.forEach((href, index) => {
 			const linkId = `injected-stylesheet-${index}`;
 			let linkEl = doc.getElementById(linkId);
@@ -195,6 +204,8 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			}
 			if (linkEl.href !== href) linkEl.href = href;
 		});
+		for (let index = stylesheets.length; index < prevStylesheetCountRef.current; index++) doc.getElementById(`injected-stylesheet-${index}`)?.remove();
+		prevStylesheetCountRef.current = stylesheets.length;
 	}, [styles, stylesheets]);
 	useEffect(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
@@ -295,41 +306,6 @@ const Shadow = ({ children }) => {
 			renderTargetRef.current = target;
 			setRenderTarget(target);
 		}
-		const onClick = (e) => {
-			const eventInit = {
-				bubbles: true,
-				cancelable: true,
-				composed: true
-			};
-			let newEvent;
-			if (e instanceof MouseEvent) newEvent = new MouseEvent(e.type, {
-				...eventInit,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				button: e.button
-			});
-			else if (e instanceof PointerEvent) newEvent = new PointerEvent(e.type, {
-				...eventInit,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				pointerId: e.pointerId
-			});
-			else newEvent = new Event(e.type, eventInit);
-			hostRef.current?.dispatchEvent(newEvent);
-		};
-		const eventTypes = [
-			"click",
-			"pointerdown",
-			"pointerup"
-		];
-		eventTypes.forEach((type) => {
-			target.addEventListener(type, onClick, true);
-		});
-		return () => {
-			eventTypes.forEach((type) => {
-				target?.removeEventListener(type, onClick, true);
-			});
-		};
 	}, []);
 	useLayoutEffect(() => {
 		if (renderTargetRef.current && !renderTarget) setRenderTarget(renderTargetRef.current);
@@ -402,7 +378,16 @@ const Renderer = ({ preview, headers, modules, frame, provider }) => {
 		...baseModules,
 		...modules
 	}), [modules]);
-	const module = useMemo(() => compile(preview, memoizedModules), [preview, memoizedModules]);
+	const module = useMemo(() => {
+		try {
+			return compile(preview, memoizedModules);
+		} catch (e) {
+			return {
+				exports: {},
+				error: e instanceof Error ? e.message : "Module transformation error"
+			};
+		}
+	}, [preview, memoizedModules]);
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
@@ -11722,6 +11707,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	};
 	const addItem = () => {
 		const firstItem = objectItems[0];
+		if (!firstItem) return;
 		const clonedElement = cloneObjectItemElement(firstItem);
 		const editableProperties = extractObjectProperties(clonedElement);
 		const nextItems = [...objectItems];
@@ -11845,6 +11831,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					variant: "solid",
 					color: "green",
+					disabled: objectItems.length === 0,
 					onClick: addItem,
 					children: "Add Item"
 				})]
@@ -12382,7 +12369,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next && next !== value) onChange?.({
+			if (next !== value) onChange?.({
 				id,
 				label: binding.label,
 				value: next
@@ -12472,7 +12459,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next && next !== value) onChange?.({
+			if (next !== value) onChange?.({
 				id,
 				label: binding.label,
 				value: next
@@ -12493,7 +12480,7 @@ const Field = ({ binding, id, value, onChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next && next !== value) onChange?.({
+			if (next !== value) onChange?.({
 				id,
 				label: binding.label,
 				value: next
@@ -12933,6 +12920,15 @@ var ErrorBoundary = class extends React.Component {
 		console.error("🚨 [Boundary] Rendering error:", error, errorInfo);
 		this.props.onError?.(error, errorInfo);
 	}
+	componentDidUpdate(prevProps) {
+		if (!this.state.hasError) return;
+		const prevKeys = prevProps.resetKeys ?? [];
+		const nextKeys = this.props.resetKeys ?? [];
+		if (prevKeys.length !== nextKeys.length || nextKeys.some((key, i) => key !== prevKeys[i])) this.setState({
+			hasError: false,
+			error: void 0
+		});
+	}
 	render() {
 		if (this.state.hasError) return this.props.fallback ? /* @__PURE__ */ jsx(Fragment, { children: this.props.fallback(this.state.error?.message) }) : /* @__PURE__ */ jsx(Error$2, {
 			message: this.state.error?.message,
@@ -12954,7 +12950,7 @@ const Guard = ({ children, onError }) => {
 	const errorHandled = useRef(false);
 	useEffect(() => {
 		if (!containerRef.current) return;
-		const onError = (event) => {
+		const handleWindowError = (event) => {
 			if (errorHandled.current) return;
 			errorHandled.current = true;
 			const errorMessage = event.error?.message || event.message || "Unknown error";
@@ -12967,7 +12963,7 @@ const Guard = ({ children, onError }) => {
 			}, 100);
 			return true;
 		};
-		const onUnhandledRejection = (event) => {
+		const handleUnhandledRejection = (event) => {
 			if (errorHandled.current) return;
 			errorHandled.current = true;
 			const errorMessage = event.reason?.message || "Promise rejection";
@@ -12978,11 +12974,11 @@ const Guard = ({ children, onError }) => {
 				errorHandled.current = false;
 			}, 100);
 		};
-		window.addEventListener("error", onError, true);
-		window.addEventListener("unhandledrejection", onUnhandledRejection, true);
+		window.addEventListener("error", handleWindowError, true);
+		window.addEventListener("unhandledrejection", handleUnhandledRejection, true);
 		return () => {
-			window.removeEventListener("error", onError, true);
-			window.removeEventListener("unhandledrejection", onUnhandledRejection, true);
+			window.removeEventListener("error", handleWindowError, true);
+			window.removeEventListener("unhandledrejection", handleUnhandledRejection, true);
 		};
 	}, [onError]);
 	if (error) return /* @__PURE__ */ jsx(Error$2, {
@@ -13041,9 +13037,10 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 		...baseModules,
 		...modules
 	};
+	const effectiveCode = _code || code;
 	let module = null;
-	if (_code || code) try {
-		module = compile(_code || code, mergedModules);
+	if (effectiveCode) try {
+		module = compile(effectiveCode, mergedModules);
 	} catch (e) {
 		module = {
 			exports: {},
@@ -13068,6 +13065,7 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 		children: /* @__PURE__ */ jsx(Frame, {
 			...frame,
 			children: (container) => /* @__PURE__ */ jsx(Error$1.Boundary, {
+				resetKeys: [effectiveCode],
 				onError: (e) => setError(e.message),
 				children: renderProvider(/* @__PURE__ */ jsx(Error$1.Guard, {
 					onError: (e) => setError(e.message),
@@ -13086,6 +13084,7 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 			containerType: "inline-size"
 		},
 		children: /* @__PURE__ */ jsx(Error$1.Boundary, {
+			resetKeys: [effectiveCode],
 			onError: (e) => setError(e.message),
 			children: renderProvider(/* @__PURE__ */ jsx(Error$1.Guard, {
 				onError: (e) => setError(e.message),
@@ -13100,12 +13099,23 @@ const Client = ({ code: _code = "", className, showError, props = {}, modules =
 const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, provider, ...restProps }) => {
 	const [runtimeError, setRuntimeError] = useState(null);
 	const [dynamicCSS, setDynamicCSS] = useState("");
+	const [prevCode, setPrevCode] = useState(code);
+	if (code !== prevCode) {
+		setPrevCode(code);
+		setRuntimeError(null);
+	}
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
 	useEffect(() => {
 		if (!code || !dynamicTailwind) return;
-		generateTailwindCSS(code).then(setDynamicCSS);
+		let cancelled = false;
+		generateTailwindCSS(code).then((css) => {
+			if (!cancelled) setDynamicCSS(css);
+		});
+		return () => {
+			cancelled = true;
+		};
 	}, [code, dynamicTailwind]);
 	if (runtimeError) return /* @__PURE__ */ jsx(Error$1, {
 		title: "Runtime Error",
@@ -13114,10 +13124,18 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 		onReset: () => setRuntimeError(null)
 	});
 	if (code) {
-		const module = compile(code, {
-			...baseModules,
-			...modules
-		});
+		let module;
+		try {
+			module = compile(code, {
+				...baseModules,
+				...modules
+			});
+		} catch (e) {
+			module = {
+				exports: {},
+				error: e instanceof Error ? e.message : "Module transformation error"
+			};
+		}
 		if (module.error) return /* @__PURE__ */ jsx(Error$1, {
 			title: "Compile Error",
 			message: module.error,
@@ -13129,13 +13147,14 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 			className: "mx-5 mt-25"
 		});
 		return /* @__PURE__ */ jsx(Error$1.Boundary, {
+			resetKeys: [code],
 			fallback: (message) => /* @__PURE__ */ jsx(Error$1, {
 				title: "Rendering Error",
 				message
 			}),
 			children: renderProvider(/* @__PURE__ */ jsxs(Error$1.Guard, {
 				onError: (e) => setRuntimeError(e.message),
-				children: [/* @__PURE__ */ jsx(Component, { ...props }), dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
+				children: [/* @__PURE__ */ jsx(Component, { ...props }), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
 			}))
 		});
 	}