@cfp-studio/iframe 18.4.4 → 18.4.6

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/hmrPayload.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_d5dfe5fcbde62b2ff1de970aa6c74477/node_modules/vite/types/hmrPayload.d.ts
 interface UpdatePayload {
   type: 'update';
   updates: Update[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfp-studio/iframe",
-  "version": "18.4.4",
+  "version": "18.4.6",
   "license": "MIT",
   "files": [
     "dist",
@@ -10,6 +10,7 @@
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "dependencies": {
+    "@cfp-studio/analyzer-api": "0.1.16",
     "@cfp-studio/fiber-reader": "0.3.0"
   },
   "devDependencies": {

package/preview/__previewjs_internal__/index.ts

@@ -1,3 +1,5 @@
+import { clearErrorPanel } from "@cfp-studio/analyzer-api/error-panel";
+
 import { overrideCopyCutPaste } from "./copy-cut-paste";
 import { setUpLinkInterception } from "./links";
 import { setUpLogInterception } from "./logs";
@@ -67,11 +69,20 @@ export function initPreview({
 				shouldAbortRender: () => renderId !== thisRenderId,
 				loadRenderer,
 			});
+			// 渲染成功：上一次的错误覆盖层该撤了。
+			//
+			// 面板现在挂在 `document.body` 的独立覆盖层上（不占 `#root`），所以不会被
+			// `root.innerHTML` 覆写带走 —— 必须显式清 —— 否则改好代码后面板会永久赖着。
+			clearErrorPanel();
 		} catch (error: any) {
-			if (root.innerHTML !== rootHtml) {
-				// 重新调用前一次渲染，以确保预览不会白屏。
-				root.innerHTML = rootHtml;
-			}
+			// **不再 `root.innerHTML = rootHtml` 回填快照**。
+			//
+			// 旧行为（为了「不白屏」而回滚）实测症状：「错误面板闪现一下，然后被正常页面
+			// 覆盖」，用户看不到真正原因。现在改成：保留错误覆盖层（半透明遮罩盖住旧画面），
+			// 同时继续 `reportEvent` 给宿主侧。
+			//
+			// `rootHtml` 仍用于判定：没变化说明连上一次的 DOM 都没建立，无需特别处理。
+			void rootHtml;
 			window.__PREVIEWJS_IFRAME__.reportEvent({
 				kind: "error",
 				source: "renderer",

package/preview/__previewjs_internal__/logs.ts

@@ -2,6 +2,7 @@
 import type { LogLevel } from "../../src";
 // @ts-ignore
 import inspect from "./object-inspect";
+import { postToParent } from "./runtime-bridge";
 
 // 注意: 请与 vite 保持同步:
 // https://github.com/vitejs/vite/blob/2de425d0288bfae345c5ced5c84cf67ffccaef48/packages/vite/src/client/client.ts#L117
@@ -31,12 +32,21 @@ export function setUpLogInterception() {
 						return;
 					}
 				}
+				const message = formatLogMessage(...args);
 				window.__PREVIEWJS_IFRAME__.reportEvent({
 					kind: "log-message",
 					level,
-					message: formatLogMessage(...args),
+					message,
 					timestamp: Date.now(),
 				});
+				// 同时往上广播一份给宿主（`docs/todo/38` 的 P1）。
+				//
+				// 为什么需要两条路：`reportEvent` 只落到 iframe 自己的 `state.logs`，
+				// 而 `app/client/src/main.ts` 的 `onStateUpdate` 从未消费它 ——
+				// 组件的 console 输出在宿主完全不可见，用户只能开 Webview DevTools。
+				// 这里走 `cfp-*` 前缀是为了复用已有的转发链：
+				//   iframe → app/client 的通用转发 → webview 的 classifyShellMessage → 宿主
+				publishLogToHost(level, message);
 			} finally {
 				console[level] = self;
 			}
@@ -129,3 +139,58 @@ function formatValue(value: any) {
 	}
 	return formatted;
 }
+
+/**
+ * 把一条 console 消息广播给宿主。
+ *
+ * ## 为什么单独一个函数
+ *
+ * `reportEvent` 那条路（`state.logs`）与这条（`cfp-log`）**消费者不重叠**：
+ * 前者留在 iframe 内部供 UI 用，后者往上传。和 `cfp-rendered` 的双通路是同一个模式，
+ * 见 `docs/analysis/preview-event-channels.md`。
+ *
+ * ## 为什么要限流
+ *
+ * 组件在 render 里打 `console.log` 时，一次刷新可能几十条。不设上限的话
+ * `OutputChannel` 会瞬间被刷满、`postMessage` 也会拖慢渲染。这里按
+ * {@link LOG_BURST_WINDOW_MS} 的窗口做**简单丢弃计数**：超限后只统计，
+ * 窗口结束时补一条汇总。
+ *
+ * 不追求精确（不需要漏桶/令牌桶）：排查时要的是「知道有过量日志 + 看到样本」，
+ * 不是一份完整的日志归档。
+ */
+const LOG_BURST_WINDOW_MS = 1_000;
+/** 一个窗口内最多转发多少条。超出部分计数后丢弃。 */
+const LOG_BURST_LIMIT = 50;
+
+let burstWindowStart = 0;
+let burstCount = 0;
+let droppedInWindow = 0;
+
+function publishLogToHost(level: LogLevel, message: string): void {
+	try {
+		const now = Date.now();
+		if (now - burstWindowStart > LOG_BURST_WINDOW_MS) {
+			// 上一个窗口结束时若有丢弃，补一条汇总（用 warn，确保宿主默认看得见）。
+			if (droppedInWindow > 0) {
+				postToParent({
+					kind: "cfp-log",
+					level: "warn",
+					message: `[预览页日志过多] 上一秒另有 ${droppedInWindow} 条被丢弃（上限 ${LOG_BURST_LIMIT}/秒）`,
+					timestamp: now,
+				});
+			}
+			burstWindowStart = now;
+			burstCount = 0;
+			droppedInWindow = 0;
+		}
+		if (burstCount >= LOG_BURST_LIMIT) {
+			droppedInWindow += 1;
+			return;
+		}
+		burstCount += 1;
+		postToParent({ kind: "cfp-log", level, message, timestamp: now });
+	} catch {
+		// 上报失败绝不能影响页面本身 —— console 拦截已经改了全局行为，这里必须静默。
+	}
+}

package/preview/__previewjs_internal__/vite-hmr-listener.ts

@@ -46,7 +46,15 @@ export function setupViteHmrListener() {
 			isFirstUpdate = false;
 		}
 		if (window.__PREVIEWJS_IFRAME__.lastRenderFailed) {
-			window.location.reload();
+			// **不要 `location.reload()`**。
+			//
+			// 旧行为：上一次渲染失败时整页重载。实测症状（真实反馈）：
+			// 「保存后闪现错误页面，然后被白屏覆盖」—— 错误面板刚画出来就被重载抹了，
+			// 重载后 `runNewRender` 又在 `loadRenderer` 阶段抛错，用户什么都看不到。
+			//
+			// 现在：面板是独立覆盖层（见 `analyzer-api` 的 `renderErrorPanel`），
+			// 只要重新渲染就行 —— 成功时 `runNewRender` 会自己 `clearErrorPanel()`。
+			window.__PREVIEWJS_IFRAME__.refresh({ refetchPreviewableModule: true });
 		} else {
 			window.__PREVIEWJS_IFRAME__.reportEvent({
 				kind: "vite-before-update",