@jbpark/live-editor 1.5.0 → 1.7.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { S as __toESM, c as generateCode, h as BINDING_PROP, m as require_lib, p as require_lib$1, v as DEFAULT_TEMPLATE, y as DRAGGABLE_ITEMS } from "./document-BGG0pNR2.mjs";
-import { a as detectTypeScript, c as getCachedScriptBlob, i as compile, l as preloadScripts, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as replaceSections } from "./utils-UTqUJaVs.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 } from "./ast-DyDLUN5F.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-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 { generateTailwindCSS } from "./utils/tailwind/index.mjs";
 import "@jbpark/ui-kit/style.css";
-import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -397,13 +397,12 @@ const Droppable = ({ children, className }) => {
 
 //#endregion
 //#region src/components/dnd/renderer.tsx
-const Renderer = ({ fullCode, code, headers, modules, frame, provider }) => {
+const Renderer = ({ preview, headers, modules, frame, provider }) => {
 	const memoizedModules = useMemo(() => ({
 		...baseModules,
 		...modules
 	}), [modules]);
-	const memoizedSection = useMemo(() => generateSection(code, fullCode), [code, fullCode]);
-	const module = useMemo(() => compile(memoizedSection, memoizedModules), [memoizedSection, memoizedModules]);
+	const module = useMemo(() => compile(preview, memoizedModules), [preview, memoizedModules]);
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
@@ -422,6 +421,7 @@ const Renderer = ({ fullCode, code, headers, modules, frame, provider }) => {
 		})
 	});
 };
+var renderer_default = memo(Renderer);
 
 //#endregion
 //#region src/components/dnd/sortable.tsx
@@ -477,14 +477,18 @@ const Overlay = ({ sections, renderProps }) => {
 		return /* @__PURE__ */ jsx(Draggable, { item });
 	}
 	const section = sections.find((s) => s.id === active.id);
-	if (section) return /* @__PURE__ */ jsx(Sortable, {
-		id: section.id,
-		name: section.name,
-		children: /* @__PURE__ */ jsx(Renderer, {
-			...renderProps,
-			code: section.code
-		})
-	});
+	if (section) {
+		const preview = generateSection(section.code, renderProps.fullCode);
+		return /* @__PURE__ */ jsx(Sortable, {
+			id: section.id,
+			name: section.name,
+			children: /* @__PURE__ */ jsx(renderer_default, {
+				preview,
+				modules: renderProps.modules,
+				frame: renderProps.frame
+			})
+		});
+	}
 	return null;
 };
 
@@ -12624,6 +12628,7 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || DEFAULT_TEMPLATE;
 	const sections = useMemo(() => extractSections(value), [value]);
+	const previews = useMemo(() => generateSections(sections.map((s) => s.code), value), [sections, value]);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
@@ -12760,16 +12765,15 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 						}) : /* @__PURE__ */ jsx(SortableContext, {
 							items: sections.map((s) => s.id),
 							strategy: verticalListSortingStrategy,
-							children: sections.map((section) => /* @__PURE__ */ jsx(Sortable, {
+							children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
 								id: section.id,
 								name: section.name,
 								selected: selectedId === section.id,
 								onClick: () => onSelect(section.id),
 								onDelete,
 								onCopy,
-								children: /* @__PURE__ */ jsx(Renderer, {
-									fullCode: value,
-									code: section.code,
+								children: /* @__PURE__ */ jsx(renderer_default, {
+									preview: previews[index],
 									modules,
 									frame,
 									provider,