@cfp-studio/iframe 18.4.6 → 18.4.7

package/package.json

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

package/preview/__previewjs_internal__/logs.ts

@@ -2,7 +2,7 @@
 import type { LogLevel } from "../../src";
 // @ts-ignore
 import inspect from "./object-inspect";
-import { postToParent } from "./runtime-bridge";
+import { publishToHost } from "./runtime-bridge";
 
 // 注意: 请与 vite 保持同步:
 // https://github.com/vitejs/vite/blob/2de425d0288bfae345c5ced5c84cf67ffccaef48/packages/vite/src/client/client.ts#L117
@@ -158,6 +158,16 @@ function formatValue(value: any) {
  *
  * 不追求精确（不需要漏桶/令牌桶）：排查时要的是「知道有过量日志 + 看到样本」，
  * 不是一份完整的日志归档。
+ *
+ * ## `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;
 /** 一个窗口内最多转发多少条。超出部分计数后丢弃。 */
@@ -173,10 +183,12 @@ function publishLogToHost(level: LogLevel, message: string): void {
 		if (now - burstWindowStart > LOG_BURST_WINDOW_MS) {
 			// 上一个窗口结束时若有丢弃，补一条汇总（用 warn，确保宿主默认看得见）。
 			if (droppedInWindow > 0) {
-				postToParent({
+				publishToHost({
 					kind: "cfp-log",
 					level: "warn",
 					message: `[预览页日志过多] 上一秒另有 ${droppedInWindow} 条被丢弃（上限 ${LOG_BURST_LIMIT}/秒）`,
+					// 这条是**我们自己**的限流提示，不是用户代码打的 —— 宿主据此把它留在运行时频道。
+					source: "runtime",
 					timestamp: now,
 				});
 			}
@@ -189,7 +201,10 @@ function publishLogToHost(level: LogLevel, message: string): void {
 			return;
 		}
 		burstCount += 1;
-		postToParent({ kind: "cfp-log", level, message, timestamp: now });
+		// 用 `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));