@cfp-studio/iframe 18.4.0 → 18.4.1

package/README.md

@@ -3,6 +3,7 @@
 CFP Studio 预览 iframe 通信与渲染核心包，负责 iframe 与主应用/设计器的消息通信、状态同步、渲染控制、HMR 支持等。
 
 ## 特性
+
 - 提供 iframe 与父窗口的高效通信协议
 - 支持渲染状态、事件、错误、刷新等多种消息类型
 - 支持 HMR（热模块替换）与自动刷新
@@ -10,12 +11,14 @@ CFP Studio 预览 iframe 通信与渲染核心包，负责 iframe 与主应用/
 - 支持全局状态、事件上报、调试等
 
 ## 架构与工作原理
+
 - 通过全局 `__PREVIEWJS_IFRAME__` 对象暴露渲染、刷新、事件上报等能力
 - 预览页面（preview/index.html）自动注入全局对象与通信桥
 - 支持与主应用/设计器的双向事件流与状态同步
 - 支持多渲染器、错误处理、调试工具等扩展
 
 ## 主要 API/模块
+
 - `src/index.ts`：iframe 通信与状态主入口
 - `preview/index.html`：预览页面模板，注入全局对象
 - `preview/__previewjs_internal__/`：内部工具与渲染控制
@@ -26,12 +29,15 @@ CFP Studio 预览 iframe 通信与渲染核心包，负责 iframe 与主应用/
 集成于 CFP Studio 设计器/主应用，无需单独调用。自定义渲染器可参考 preview/renderer/
 
 ## 依赖
+
 - `assert-never`、`immer`、`typescript`、`vite`、`tsdown`
 
 ## 构建
+
 ```sh
 pnpm build
 ```
 
 ## 许可证
+
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfp-studio/iframe",
-  "version": "18.4.0",
+  "version": "18.4.1",
   "license": "MIT",
   "files": [
     "dist",

package/preview/__previewjs_internal__/copy-cut-paste.ts

@@ -1,75 +1,81 @@
 export function overrideCopyCutPaste() {
-  if (
-    !navigator.userAgent.includes(" Code/") &&
-    !navigator.userAgent.includes(" Code-Insiders/")
-  ) {
-    // We're not running in VS Code.
-    return;
-  }
+	if (!navigator.userAgent.includes(" Code/") && !navigator.userAgent.includes(" Code-Insiders/")) {
+		// We're not running in VS Code.
+		return;
+	}
 
-  document.addEventListener("keydown", (e) => {
-    const hasMeta = e.ctrlKey || e.metaKey;
-    if (!hasMeta) {
-      return;
-    }
-    switch (e.key.toLowerCase()) {
-      case "c": {
-        // 使用现代的 Clipboard API 替代已弃用的 document.execCommand
-        const textToCopy = window.getSelection()?.toString();
-        if (textToCopy) {
-          navigator.clipboard.writeText(textToCopy).then(() => {
-            console.log('Copied to clipboard successfully!');
-          }).catch((err) => {
-            console.error('Failed to copy text: ', err);
-          });
-        }
-        e.preventDefault();
-        break;
-      }
-      case "x": {
-        // 使用现代的 Clipboard API 替代已弃用的 document.execCommand
-        const textToCut = window.getSelection()?.toString();
-        if (textToCut) {
-          navigator.clipboard.writeText(textToCut).then(() => {
-            console.log('Cut to clipboard successfully!');
-            // 移除选中的文本
-            const range = document.createRange();
-            range.selectNodeContents(document.getSelection()?.anchorNode?.parentNode as Node);
-            range.deleteContents();
-          }).catch((err) => {
-            console.error('Failed to cut text: ', err);
-          });
-        }
-        e.preventDefault();
-        break;
-      }
-      case "v":
-        // 使用现代的 Clipboard API 替代已弃用的 document.execCommand
-        navigator.clipboard.readText().then((text) => {
-          const selection = window.getSelection();
-          if (selection) {
-            const range = selection.getRangeAt(0);
-            range.deleteContents();
-            range.insertNode(document.createTextNode(text));
-            console.log('Pasted from clipboard successfully!');
-          }
-        }).catch((err) => {
-          console.error('Failed to paste text: ', err);
-        });
-        e.preventDefault();
-        break;
-      case "a": {
-        // 使用现代的 Range 和 Selection API 替代已弃用的 document.execCommand
-        const selection = window.getSelection();
-        if (selection) {
-          const range = document.createRange();
-          range.selectNodeContents(document.body);
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-        e.preventDefault();
-        break;
-      }
-    }
-  });
+	document.addEventListener("keydown", (e) => {
+		const hasMeta = e.ctrlKey || e.metaKey;
+		if (!hasMeta) {
+			return;
+		}
+		switch (e.key.toLowerCase()) {
+			case "c": {
+				// 使用现代的 Clipboard API 替代已弃用的 document.execCommand
+				const textToCopy = window.getSelection()?.toString();
+				if (textToCopy) {
+					navigator.clipboard
+						.writeText(textToCopy)
+						.then(() => {
+							console.log("Copied to clipboard successfully!");
+						})
+						.catch((err) => {
+							console.error("Failed to copy text: ", err);
+						});
+				}
+				e.preventDefault();
+				break;
+			}
+			case "x": {
+				// 使用现代的 Clipboard API 替代已弃用的 document.execCommand
+				const textToCut = window.getSelection()?.toString();
+				if (textToCut) {
+					navigator.clipboard
+						.writeText(textToCut)
+						.then(() => {
+							console.log("Cut to clipboard successfully!");
+							// 移除选中的文本
+							const range = document.createRange();
+							range.selectNodeContents(document.getSelection()?.anchorNode?.parentNode as Node);
+							range.deleteContents();
+						})
+						.catch((err) => {
+							console.error("Failed to cut text: ", err);
+						});
+				}
+				e.preventDefault();
+				break;
+			}
+			case "v":
+				// 使用现代的 Clipboard API 替代已弃用的 document.execCommand
+				navigator.clipboard
+					.readText()
+					.then((text) => {
+						const selection = window.getSelection();
+						if (selection) {
+							const range = selection.getRangeAt(0);
+							range.deleteContents();
+							range.insertNode(document.createTextNode(text));
+							console.log("Pasted from clipboard successfully!");
+						}
+					})
+					.catch((err) => {
+						console.error("Failed to paste text: ", err);
+					});
+				e.preventDefault();
+				break;
+			case "a": {
+				// 使用现代的 Range 和 Selection API 替代已弃用的 document.execCommand
+				const selection = window.getSelection();
+				if (selection) {
+					const range = document.createRange();
+					range.selectNodeContents(document.body);
+					selection.removeAllRanges();
+					selection.addRange(range);
+				}
+				e.preventDefault();
+				break;
+			}
+		}
+	});
 }

package/preview/__previewjs_internal__/error-message.ts

@@ -1,36 +1,36 @@
 export function generateMessageFromError(errorMessage: string, stack?: string) {
-  let message = errorMessage + (stack ? `\n${stack}` : "");
-  // Remove any redundant line breaks (but not spaces,
-  // which could be useful indentation).
-  message = message.replace(/^\n+/g, "\n").trim();
-  const stripPrefix = "Internal server error: ";
-  if (message.startsWith(stripPrefix)) {
-    // Replace deprecated 'substr' with 'slice'
-    message = message.slice(stripPrefix.length);
-  }
-  if (/^Transform failed with \d+ errors?:?\n.*/.test(message)) {
-    const lineBreakPosition = message.indexOf("\n");
-    message = message.substring(lineBreakPosition + 1);
-  }
-  const lineBreakPosition = message.indexOf("\n");
-  let title: string;
-  let rest: string;
-  if (lineBreakPosition > -1) {
-    // Replace deprecated 'substr' with 'slice'
-    title = message.slice(0, lineBreakPosition).trim();
-    // Replace deprecated 'substr' with 'slice'
-    rest = message.slice(lineBreakPosition + 1);
-  } else {
-    title = message;
-    rest = "";
-  }
-  if (title.endsWith(":") || title.endsWith(".")) {
-    // Replace deprecated 'substr' with 'slice'
-    title = title.slice(0, -1).trim();
-  }
-  // Note: this isn't relevant to all browsers.
-  if (rest.startsWith(`Error: ${title}\n`)) {
-    rest = rest.slice(rest.indexOf("\n") + 1);
-  }
-  return `${title}${rest ? `\n\n${rest}` : ""}`;
+	let message = errorMessage + (stack ? `\n${stack}` : "");
+	// Remove any redundant line breaks (but not spaces,
+	// which could be useful indentation).
+	message = message.replace(/^\n+/g, "\n").trim();
+	const stripPrefix = "Internal server error: ";
+	if (message.startsWith(stripPrefix)) {
+		// Replace deprecated 'substr' with 'slice'
+		message = message.slice(stripPrefix.length);
+	}
+	if (/^Transform failed with \d+ errors?:?\n.*/.test(message)) {
+		const lineBreakPosition = message.indexOf("\n");
+		message = message.substring(lineBreakPosition + 1);
+	}
+	const lineBreakPosition = message.indexOf("\n");
+	let title: string;
+	let rest: string;
+	if (lineBreakPosition > -1) {
+		// Replace deprecated 'substr' with 'slice'
+		title = message.slice(0, lineBreakPosition).trim();
+		// Replace deprecated 'substr' with 'slice'
+		rest = message.slice(lineBreakPosition + 1);
+	} else {
+		title = message;
+		rest = "";
+	}
+	if (title.endsWith(":") || title.endsWith(".")) {
+		// Replace deprecated 'substr' with 'slice'
+		title = title.slice(0, -1).trim();
+	}
+	// Note: this isn't relevant to all browsers.
+	if (rest.startsWith(`Error: ${title}\n`)) {
+		rest = rest.slice(rest.indexOf("\n") + 1);
+	}
+	return `${title}${rest ? `\n\n${rest}` : ""}`;
 }

package/preview/__previewjs_internal__/index.ts

@@ -3,8 +3,8 @@ import { setUpLinkInterception } from "./links";
 import { setUpLogInterception } from "./logs";
 import { loadRenderer } from "./renderer";
 import { runRenderer } from "./run-renderer";
-import { setState } from "./state";
 import { setupRuntimeBridge } from "./runtime-bridge";
+import { setState } from "./state";
 import { setupViteHmrListener } from "./vite-hmr-listener";
 import { setupVSCodeControlListener } from "./vscode-control";
 
@@ -13,82 +13,81 @@ let listenersInitialized = false;
 // Important: initListeners() must be invoked before we try to load any modules
 // that might fail to load, such as a component, so we can intercept Vite errors.
 export function initListeners() {
-  if (listenersInitialized) {
-    return;
-  }
-  listenersInitialized = true;
-  setupViteHmrListener();
-  setUpLogInterception();
-  setUpLinkInterception();
-  overrideCopyCutPaste();
-  setupVSCodeControlListener();
-  setupRuntimeBridge();
+	if (listenersInitialized) {
+		return;
+	}
+	listenersInitialized = true;
+	setupViteHmrListener();
+	setUpLogInterception();
+	setUpLinkInterception();
+	overrideCopyCutPaste();
+	setupVSCodeControlListener();
+	setupRuntimeBridge();
 }
 
 export function initPreview({
-  previewableModule,
-  previewableName,
-  wrapperModule,
-  wrapperName,
+	previewableModule,
+	previewableName,
+	wrapperModule,
+	wrapperName,
 }: {
-  previewableModule: any;
-  previewableName: string;
-  wrapperModule: any;
-  wrapperName: string;
+	previewableModule: any;
+	previewableName: string;
+	wrapperModule: any;
+	wrapperName: string;
 }): typeof window.__PREVIEWJS_IFRAME__.refresh {
-  const root = document.getElementById("root");
-  if (!root) {
-    throw new Error("未能找到 #root 节点!");
-  }
-  let renderId = 0;
-  window.__PREVIEWJS_IFRAME__.render = async (data) => {
-    setState(data);
-    await runNewRender();
-  };
-
-  window.__PREVIEWJS_IFRAME__.reportEvent({
-    kind: "bootstrapped",
-  });
+	const root = document.getElementById("root");
+	if (!root) {
+		throw new Error("未能找到 #root 节点!");
+	}
+	let renderId = 0;
+	window.__PREVIEWJS_IFRAME__.render = async (data) => {
+		setState(data);
+		await runNewRender();
+	};
 
-  async function runNewRender() {
-    if (!root) {
-      throw new Error("未能找到 #root 节点!");
-    }
-    const rootHtml = root.innerHTML;
-    try {
-      renderId += 1;
-      const thisRenderId = renderId;
-      await runRenderer({
-        wrapperModule,
-        wrapperName,
-        previewableModule,
-        previewableName,
-        renderId,
-        shouldAbortRender: () => renderId !== thisRenderId,
-        loadRenderer,
-      });
-    } catch (error: any) {
-      if (root.innerHTML !== rootHtml) {
-        // 重新调用前一次渲染，以确保预览不会白屏。
-        root.innerHTML = rootHtml;
-      }
-      window.__PREVIEWJS_IFRAME__.reportEvent({
-        kind: "error",
-        source: "renderer",
-        message: error.stack || error.message,
-      });
-    }
-  }
+	window.__PREVIEWJS_IFRAME__.reportEvent({
+		kind: "bootstrapped",
+	});
 
+	async function runNewRender() {
+		if (!root) {
+			throw new Error("未能找到 #root 节点!");
+		}
+		const rootHtml = root.innerHTML;
+		try {
+			renderId += 1;
+			const thisRenderId = renderId;
+			await runRenderer({
+				wrapperModule,
+				wrapperName,
+				previewableModule,
+				previewableName,
+				renderId,
+				shouldAbortRender: () => renderId !== thisRenderId,
+				loadRenderer,
+			});
+		} catch (error: any) {
+			if (root.innerHTML !== rootHtml) {
+				// 重新调用前一次渲染，以确保预览不会白屏。
+				root.innerHTML = rootHtml;
+			}
+			window.__PREVIEWJS_IFRAME__.reportEvent({
+				kind: "error",
+				source: "renderer",
+				message: error.stack || error.message,
+			});
+		}
+	}
 
-  return (options = {}) => {
-    if (options.previewableModule) {
-      previewableModule = options.previewableModule;
-    }
-    if (options.wrapperModule) {
-      wrapperModule = options.wrapperModule;
-    }
-    // eslint-disable-next-line no-console
-    runNewRender().catch(console.error);
-  };
+	return (options = {}) => {
+		if (options.previewableModule) {
+			previewableModule = options.previewableModule;
+		}
+		if (options.wrapperModule) {
+			wrapperModule = options.wrapperModule;
+		}
+		// eslint-disable-next-line no-console
+		runNewRender().catch(console.error);
+	};
 }

package/preview/__previewjs_internal__/links.ts

@@ -1,29 +1,29 @@
 export function setUpLinkInterception() {
-  document.addEventListener(
-    "click",
-    (event) => {
-      let node = event?.target;
-      while (node) {
-        if (!(node instanceof Node)) {
-          break;
-        }
-        if (node.nodeName === "A") {
-          const url = (node as any).href;
-          // Handle click here by posting data back to VS Code
-          // for your extension to handle
-          if (url) {
-            window.__PREVIEWJS_IFRAME__.reportEvent({
-              kind: "action",
-              type: "url",
-              path: url,
-            });
-          }
-          event.preventDefault();
-          return;
-        }
-        node = node.parentNode;
-      }
-    },
-    true
-  );
+	document.addEventListener(
+		"click",
+		(event) => {
+			let node = event?.target;
+			while (node) {
+				if (!(node instanceof Node)) {
+					break;
+				}
+				if (node.nodeName === "A") {
+					const url = (node as any).href;
+					// Handle click here by posting data back to VS Code
+					// for your extension to handle
+					if (url) {
+						window.__PREVIEWJS_IFRAME__.reportEvent({
+							kind: "action",
+							type: "url",
+							path: url,
+						});
+					}
+					event.preventDefault();
+					return;
+				}
+				node = node.parentNode;
+			}
+		},
+		true,
+	);
 }