@jbpark/live-editor 1.8.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

@@ -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;
 	};
@@ -12935,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,
@@ -13043,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: {},
@@ -13070,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),
@@ -13088,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),
@@ -13102,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",
@@ -13116,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,
@@ -13131,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 })]
 			}))
 		});
 	}