@jbpark/live-editor 6.0.0 → 6.1.1

package/README.ko.md

@@ -117,6 +117,14 @@ export default function Example() {
 | `@jbpark/live-editor/ui-kit/style.css` | ui-kit 진입점용 ui-kit 스타일시트                                     |
 | `@jbpark/live-editor/style.css`        | 컴파일된 스타일시트 (필수)                                            |
 
+## Next.js와 서버 렌더링
+
+컴포넌트는 클라이언트 컴포넌트입니다. Next.js App Router에서는 `'use client'`로 시작하는 파일에서 렌더링합니다.
+
+- 서버 사전 렌더링은 안전합니다. `Live.Editor`와 `frame` 없는 `Live.Preview`는 서버에서 렌더링되고, `Live.Dnd`의 섹션과 `frame`이 있는 `Live.Preview`는 hydration 뒤에 나타납니다.
+- `frame` 없는 `Live.Preview`는 사전 렌더링 중 서버에서 미리보기 코드를 컴파일하고 실행하며, 서버 권한으로 실행됩니다([보안 참고사항](#보안-참고사항) 참고). 피하려면 `frame`을 주거나 `next/dynamic`의 `ssr: false`로 불러옵니다.
+- `./utils`, `./utils/ast`, `./utils/tailwind`에는 React 컴포넌트가 없어 Server Component와 일반 Node에서 쓸 수 있습니다.
+
 ## 보안 참고사항
 
 - 프리뷰 `<iframe>`(`src/components/frame/iframe/iframe.tsx`)의 `sandbox` prop은 **실제 보안 경계가 아닙니다**. 컴파일된 프리뷰 코드는 host 페이지 자신의 JS realm에서 `new Function(...)`으로 실행되며(`src/utils/compile.ts`의 `compileModule`), iframe에는 그 결과로 생성된 React 엘리먼트만 `contentDocument`에 포탈되어 DOM/CSS 렌더링 용도로만 쓰입니다. iframe 자체는 사용자 코드를 실행하지 않습니다.

package/README.md

@@ -118,6 +118,14 @@ can avoid pulling in the rest (e.g. no CodeMirror in a preview-only build) — s
 | `@jbpark/live-editor/ui-kit/style.css` | ui-kit's stylesheet, for the ui-kit entry                                      |
 | `@jbpark/live-editor/style.css`        | Compiled stylesheet (required)                                                 |
 
+## Next.js and server rendering
+
+The components are client components: in the Next.js App Router, render them from a file that starts with `'use client'`.
+
+- Pre-rendering is safe. `Live.Editor` and a `Live.Preview` without `frame` render on the server; `Live.Dnd`'s sections and a framed `Live.Preview` appear once the page hydrates.
+- A `Live.Preview` without `frame` compiles and runs the previewed code on the server while pre-rendering, with the server's privileges (see [Security Notes](#security-notes)). Give it a `frame`, or load it with `next/dynamic` and `ssr: false`, to avoid that.
+- `./utils`, `./utils/ast` and `./utils/tailwind` hold no React components and work in Server Components and plain Node.
+
 ## Security Notes
 
 - The `sandbox` prop on the preview `<iframe>` (`src/components/frame/iframe/iframe.tsx`) is **not a security boundary**. Compiled preview code is executed via `new Function(...)` in the host page's own JS realm (`compileModule` in `src/utils/compile.ts`); only the resulting React elements are portaled into the iframe's `contentDocument` for DOM/CSS rendering. The iframe itself never evaluates user code.

package/dist/{boundary-CySnDUs2.js → boundary-CLMNMZFa.js}

@@ -1,13 +1,13 @@
 import { i as useLiveMessages, t as MessagesContext } from "./messages-DrINcRdG.js";
-import { t as cn } from "./cn-CAnad2vL.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/error/error.tsx
-const Error = ({ message, title, className, style, onReset }) => {
+const Error = ({ message, title, className, style, onReset, ...divProps }) => {
 	const messages = useLiveMessages();
 	if (!message) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(className),
+		...divProps,
+		className,
 		style: {
 			padding: "16px",
 			backgroundColor: "#fee2e2",
@@ -97,4 +97,4 @@ var ErrorBoundary = class extends React.Component {
 //#endregion
 export { Error as n, ErrorBoundary as t };
 
-//# sourceMappingURL=boundary-CySnDUs2.js.map
+//# sourceMappingURL=boundary-CLMNMZFa.js.map

package/dist/boundary-CLMNMZFa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boundary-CLMNMZFa.js","names":[],"sources":["../src/components/error/error.tsx","../src/components/error/boundary.tsx"],"sourcesContent":["import { useLiveMessages } from '~/components/context/messages';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithRef<'div'>,\n  // The component renders its own content.\n  'children' | 'dangerouslySetInnerHTML'\n> {\n  message?: string | null;\n  title?: string;\n  onReset?: () => void;\n}\n\nconst Error = ({\n  message,\n  title,\n  className,\n  style,\n  onReset,\n  ...divProps\n}: Props) => {\n  const messages = useLiveMessages();\n\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <div\n      {...divProps}\n      className={className}\n      style={{\n        padding: '16px',\n        backgroundColor: '#fee2e2',\n        border: '1px solid #fca5a5',\n        borderRadius: '6px',\n        color: '#7f1d1d',\n        ...style,\n      }}\n    >\n      <h3 style={{ fontSize: '14px', fontWeight: 'bold', margin: 0 }}>\n        {title ?? messages.errors.default}\n      </h3>\n      <pre\n        style={{\n          marginTop: '8px',\n          fontSize: '12px',\n          whiteSpace: 'pre-wrap',\n          margin: '8px 0 0 0',\n        }}\n      >\n        {message}\n      </pre>\n      {onReset && (\n        <button\n          style={{\n            marginTop: '8px',\n            padding: '4px 12px',\n            fontSize: '12px',\n            color: 'white',\n            backgroundColor: '#dc2626',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: 'pointer',\n          }}\n          onClick={onReset}\n        >\n          {messages.errors.tryAgain}\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Error;\n","import React from 'react';\n\nimport {\n  type LiveMessages,\n  MessagesContext,\n} from '~/components/context/messages';\n\nimport Error from './error';\n\ninterface Props {\n  children: React.ReactNode;\n  // `reset` clears the caught error and renders `children` again, the same\n  // thing the built-in error's reset button does.\n  fallback?: (message?: string, reset?: () => void) => React.ReactNode;\n  onError?: (e: Error, info: React.ErrorInfo) => void;\n  // When any of these values changes (compared one by one, by identity), a\n  // caught error resets and `children` render again, such as when the code\n  // that failed is edited.\n  resetKeys?: readonly unknown[];\n}\n\ninterface State {\n  hasError: boolean;\n  error?: Error;\n  // The resetKeys the last render saw, so getDerivedStateFromProps can tell\n  // when they change.\n  resetKeys?: readonly unknown[];\n}\n\nconst keysChanged = (\n  prev: readonly unknown[] = [],\n  next: readonly unknown[] = [],\n) => prev.length !== next.length || next.some((key, i) => key !== prev[i]);\n\nclass ErrorBoundary extends React.Component<Props, State> {\n  static contextType = MessagesContext;\n  declare context: LiveMessages;\n\n  constructor(props: Props) {\n    super(props);\n    this.state = { hasError: false, resetKeys: props.resetKeys };\n  }\n\n  static getDerivedStateFromError(error: Error): Partial<State> {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('🚨 [Boundary] Rendering error:', error, errorInfo);\n    this.props.onError?.(error, errorInfo);\n  }\n\n  // Clears a caught error in the same render that sees new resetKeys, so\n  // `children` get their next chance right away and the fallback doesn't\n  // render (and run its effects) once more first (#442). If `children` throw\n  // again with the new keys, getDerivedStateFromError catches that in this\n  // same render pass.\n  static getDerivedStateFromProps(\n    props: Props,\n    state: State,\n  ): Partial<State> | null {\n    if (!keysChanged(state.resetKeys, props.resetKeys)) {\n      return null;\n    }\n\n    return state.hasError\n      ? { hasError: false, error: undefined, resetKeys: props.resetKeys }\n      : { resetKeys: props.resetKeys };\n  }\n\n  reset = () => this.setState({ hasError: false, error: undefined });\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallback ? (\n        <>{this.props.fallback(this.state.error?.message, this.reset)}</>\n      ) : (\n        <Error\n          message={this.state.error?.message}\n          onReset={this.reset}\n          title={this.context.errors.rendering}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"mappings":";;;;AAYA,MAAM,SAAS,EACb,SACA,OACA,WACA,OACA,SACA,GAAG,eACQ;CACX,MAAM,WAAW,gBAAgB;CAEjC,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,GAAI;EACO;EACX,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,OAAO;GACP,GAAG;EACL;EAVF,UAAA;GAYE,oBAAC,MAAD;IAAI,OAAO;KAAE,UAAU;KAAQ,YAAY;KAAQ,QAAQ;IAAE;IAC1D,UAAA,SAAS,SAAS,OAAO;GACxB,CAAA;GACJ,oBAAC,OAAD;IACE,OAAO;KACL,WAAW;KACX,UAAU;KACV,YAAY;KACZ,QAAQ;IACV;IAEC,UAAA;GACE,CAAA;GACJ,WACC,oBAAC,UAAD;IACE,OAAO;KACL,WAAW;KACX,SAAS;KACT,UAAU;KACV,OAAO;KACP,iBAAiB;KACjB,QAAQ;KACR,cAAc;KACd,QAAQ;IACV;IACA,SAAS;IAER,UAAA,SAAS,OAAO;GACX,CAAA;EAEP;;AAET;;;AC1CA,MAAM,eACJ,OAA2B,CAAC,GAC5B,OAA2B,CAAC,MACzB,KAAK,WAAW,KAAK,UAAU,KAAK,MAAM,KAAK,MAAM,QAAQ,KAAK,EAAE;AAEzE,IAAM,gBAAN,cAA4B,MAAM,UAAwB;CACxD,OAAO,cAAc;CAGrB,YAAY,OAAc;EACxB,MAAM,KAAK;EACX,KAAK,QAAQ;GAAE,UAAU;GAAO,WAAW,MAAM;EAAU;CAC7D;CAEA,OAAO,yBAAyB,OAA8B;EAC5D,OAAO;GAAE,UAAU;GAAM;EAAM;CACjC;CAEA,kBAAkB,OAAc,WAA4B;EAC1D,QAAQ,MAAM,kCAAkC,OAAO,SAAS;EAChE,KAAK,MAAM,UAAU,OAAO,SAAS;CACvC;CAOA,OAAO,yBACL,OACA,OACuB;EACvB,IAAI,CAAC,YAAY,MAAM,WAAW,MAAM,SAAS,GAC/C,OAAO;EAGT,OAAO,MAAM,WACT;GAAE,UAAU;GAAO,OAAO,KAAA;GAAW,WAAW,MAAM;EAAU,IAChE,EAAE,WAAW,MAAM,UAAU;CACnC;CAEA,cAAc,KAAK,SAAS;EAAE,UAAU;EAAO,OAAO,KAAA;CAAU,CAAC;CAEjE,SAAS;EACP,IAAI,KAAK,MAAM,UACb,OAAO,KAAK,MAAM,WAChB,oBAAA,UAAA,EAAA,UAAG,KAAK,MAAM,SAAS,KAAK,MAAM,OAAO,SAAS,KAAK,KAAK,EAAI,CAAA,IAEhE,oBAAC,OAAD;GACE,SAAS,KAAK,MAAM,OAAO;GAC3B,SAAS,KAAK;GACd,OAAO,KAAK,QAAQ,OAAO;EAC5B,CAAA;EAIL,OAAO,KAAK,MAAM;CACpB;AACF"}

package/dist/{cn-CAnad2vL.js → compile-BWZ5U59y.js}

@@ -1,3 +1,7 @@
+import { a as CONFIG, n as registerEditorCache } from "./editor-caches-DXYXgWeD.js";
+import { t as createBoundedCache } from "./cache-B0-XcIxJ.js";
+import React from "react";
+import * as Babel from "@babel/standalone";
 //#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
 	var t, f, n = "";
@@ -3399,6 +3403,135 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-export { cn as t };
+//#region src/utils/scripts.ts
+const pins = /* @__PURE__ */ new Map();
+const deferredRevocations = /* @__PURE__ */ new Map();
+const revoke = (src, blobUrl) => {
+	if (!pins.has(src)) {
+		URL.revokeObjectURL(blobUrl);
+		return;
+	}
+	deferredRevocations.set(src, [...deferredRevocations.get(src) ?? [], blobUrl]);
+};
+const pin = (src) => {
+	pins.set(src, (pins.get(src) ?? 0) + 1);
+};
+const unpin = (src) => {
+	const count = (pins.get(src) ?? 0) - 1;
+	if (count > 0) {
+		pins.set(src, count);
+		return;
+	}
+	pins.delete(src);
+	deferredRevocations.get(src)?.forEach((blobUrl) => {
+		URL.revokeObjectURL(blobUrl);
+	});
+	deferredRevocations.delete(src);
+};
+const scriptCache = createBoundedCache(CONFIG.SCRIPT_CACHE_LIMIT, revoke);
+const loadingScriptCache = /* @__PURE__ */ new Map();
+const getCachedScriptBlob = async (src) => {
+	const cached = scriptCache.get(src);
+	if (cached) return cached;
+	const existing = loadingScriptCache.get(src);
+	if (existing) return existing;
+	const promise = fetch(src).then((res) => {
+		if (!res.ok) throw new Error(`Failed to load script ${src}: HTTP ${res.status}`);
+		return res.text();
+	}).then((text) => {
+		const blob = new Blob([text], { type: "application/javascript" });
+		const blobUrl = URL.createObjectURL(blob);
+		scriptCache.set(src, blobUrl);
+		return blobUrl;
+	}).finally(() => {
+		loadingScriptCache.delete(src);
+	});
+	loadingScriptCache.set(src, promise);
+	return promise;
+};
+const withScriptBlobs = async (scripts, inject) => {
+	scripts.forEach(pin);
+	try {
+		inject(await Promise.all(scripts.map(getCachedScriptBlob)));
+	} finally {
+		scripts.forEach(unpin);
+	}
+};
+const preloadScripts = (scripts) => {
+	scripts.forEach((src) => {
+		getCachedScriptBlob(src).catch(() => {});
+	});
+};
+const clearScriptCache = () => {
+	scriptCache.clear();
+	loadingScriptCache.clear();
+};
+registerEditorCache(clearScriptCache);
+//#endregion
+//#region src/utils/compile.ts
+const compilationKeys = /* @__PURE__ */ new Set();
+const compilationCache = createBoundedCache(CONFIG.CACHE_LIMIT, (key) => compilationKeys.delete(key));
+const createCacheKey = (code, modules) => ({
+	code,
+	modules: Object.keys(modules).sort().map((name) => [name, modules[name]])
+});
+const compile = (code, modules) => {
+	const candidate = createCacheKey(code, modules);
+	for (const key of compilationKeys) if (key.code === candidate.code && key.modules.length === candidate.modules.length && key.modules.every(([name, value], index) => name === candidate.modules[index][0] && Object.is(value, candidate.modules[index][1]))) return compilationCache.get(key);
+	const result = compileModule(code, Object.fromEntries(candidate.modules));
+	compilationCache.set(candidate, result);
+	compilationKeys.add(candidate);
+	return result;
+};
+const clearCompilationCache = () => {
+	compilationCache.clear();
+};
+const REACT_PRESET = ["react", { runtime: "classic" }];
+const FILENAME = "preview.tsx";
+const transformCode = (code) => Babel.transform(code, {
+	filename: FILENAME,
+	presets: ["typescript", REACT_PRESET],
+	sourceType: "module",
+	plugins: [Babel.availablePlugins["transform-modules-commonjs"]]
+})?.code || "";
+const describeTransformError = (e) => (e instanceof Error ? e.message : String(e)).replace(/^\/?preview\.tsx: /, "");
+const compileModule = (code, modules) => {
+	let transformed;
+	try {
+		transformed = transformCode(code);
+	} catch (e) {
+		return {
+			exports: {},
+			error: describeTransformError(e)
+		};
+	}
+	let render;
+	try {
+		render = new Function("exports", "require", "module", "React", transformed);
+	} catch (e) {
+		return {
+			exports: {},
+			error: e instanceof Error ? e.message : "Syntax error"
+		};
+	}
+	const module = { exports: {} };
+	const customRequire = (name) => {
+		if (name === "react") return React;
+		if (name in modules) return modules[name];
+		throw new Error(`Module not found: ${name}`);
+	};
+	try {
+		render(module.exports, customRequire, module, React);
+	} catch (e) {
+		return {
+			exports: {},
+			error: e instanceof Error ? e.message : "Runtime error"
+		};
+	}
+	return module;
+};
+registerEditorCache(clearCompilationCache);
+//#endregion
+export { cn as a, withScriptBlobs as i, compile as n, preloadScripts as r, clearCompilationCache as t };
 
-//# sourceMappingURL=cn-CAnad2vL.js.map
+//# sourceMappingURL=compile-BWZ5U59y.js.map