@cfp-studio/iframe 18.4.5 → 18.4.7

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.5",
+  "version": "18.4.7",
   "license": "MIT",
   "files": [
     "dist",
@@ -10,7 +10,7 @@
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "dependencies": {
-    "@cfp-studio/analyzer-api": "0.1.15",
+    "@cfp-studio/analyzer-api": "0.1.16",
     "@cfp-studio/fiber-reader": "0.3.0"
   },
   "devDependencies": {

package/preview/__previewjs_internal__/index.ts

@@ -1,4 +1,4 @@
-import { clearErrorPanel } from "@cfp-studio/analyzer-api";
+import { clearErrorPanel } from "@cfp-studio/analyzer-api/error-panel";
 
 import { overrideCopyCutPaste } from "./copy-cut-paste";
 import { setUpLinkInterception } from "./links";

package/preview/__previewjs_internal__/logs.ts

@@ -2,6 +2,7 @@
 import type { LogLevel } from "../../src";
 // @ts-ignore
 import inspect from "./object-inspect";
+import { publishToHost } 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,73 @@ 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} 的窗口做**简单丢弃计数**：超限后只统计，
+ * 窗口结束时补一条汇总。
+ *
+ * 不追求精确（不需要漏桶/令牌桶）：排查时要的是「知道有过量日志 + 看到样本」，
+ * 不是一份完整的日志归档。
+ *
+ * ## `source` 为什么必须显式给
+ *
+ * 宿主过去按**级别**分频道（`log`/`info` → Preview Console，`warn`/`error` → 运行时频道），
+ * 但级别不等于说话者：React 把**所有**开发期警告都打到 `console.error`，于是
+ * 「Function components cannot be given refs」「Each child in a list should have a unique key」
+ * 这类**用户代码的输出**全被当成了我們自己的运行时告警。
+ *
+ * 反过来，本文件的限流汇总用 `warn` 发出，却是**我们自己的话**。两边都按级别推断会同时猜错，
+ * 所以说话者只能由生产方标注。
+ */
+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) {
+				publishToHost({
+					kind: "cfp-log",
+					level: "warn",
+					message: `[预览页日志过多] 上一秒另有 ${droppedInWindow} 条被丢弃（上限 ${LOG_BURST_LIMIT}/秒）`,
+					// 这条是**我们自己**的限流提示，不是用户代码打的 —— 宿主据此把它留在运行时频道。
+					source: "runtime",
+					timestamp: now,
+				});
+			}
+			burstWindowStart = now;
+			burstCount = 0;
+			droppedInWindow = 0;
+		}
+		if (burstCount >= LOG_BURST_LIMIT) {
+			droppedInWindow += 1;
+			return;
+		}
+		burstCount += 1;
+		// 用 `publishToHost` 而不是 `postToParent`：后者在 **browser 模式**下
+		// （预览页是顶层窗口，`window.parent === window`）直接 return 0，
+		// 日志会静默丢失 —— 而组件 console 恰恰是最需要传出去的东西。
+		publishToHost({ kind: "cfp-log", level, message, source: "user", timestamp: now });
+	} catch {
+		// 上报失败绝不能影响页面本身 —— console 拦截已经改了全局行为，这里必须静默。
+	}
+}

package/preview/__previewjs_internal__/runtime-bridge.ts

@@ -581,11 +581,19 @@ export function publishRuntimeSnapshot(): void {
 }
 
 /**
- * Browser mode uses a CDP Runtime binding (`window.__cfpBridge`) because the
- * preview page is a top-level page with no parent frame. Embedded mode keeps
- * the ancestor postMessage path.
+ * 把 `cfp-*` 消息上送宿主。
+ *
+ * ## 两条子路，两种预览模式各走一条
+ *
+ * - **browser**：预览页是顶层窗口（`window.parent === window`），`postMessage` 根本无处可发；
+ *   必须走 CDP `Runtime.addBinding` 注入的 `__cfpBridge`。
+ * - **embedded**：预览页嵌在 `@cfp-studio/app` 里，走 `parent.postMessage`，
+ *   由中间层原样转发给 webview。
+ *
+ * 这就是它存在的原因：任何想要「两种模式都能上送」的消息都必须用它，
+ * 而不是直接调 `postToParent` —— 后者在 browser 模式下会静默地什么都不做。
  */
-function publishToHost(message: unknown): void {
+export function publishToHost(message: unknown): void {
 	if (typeof window.__cfpBridge === "function") {
 		try {
 			window.__cfpBridge(JSON.stringify(message));