@cfp-studio/iframe 18.0.0

package/preview/__previewjs_internal__/run-renderer.ts

@@ -0,0 +1,112 @@
+import type { RendererLoader } from "../../src";
+import { getState } from "./state";
+
+export async function runRenderer({
+  wrapperModule,
+  wrapperName,
+  previewableModule,
+  previewableName,
+  renderId,
+  shouldAbortRender,
+  loadRenderer,
+}: {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  wrapperModule: any;
+  wrapperName: string;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  previewableModule: any;
+  previewableName: string;
+  renderId: number;
+  shouldAbortRender: () => boolean;
+  loadRenderer: RendererLoader;
+}) {
+  const currentState = getState();
+  if (!currentState || shouldAbortRender()) {
+    return;
+  }
+  window.__PREVIEWJS_IFRAME__.reportEvent({
+    kind: "before-render",
+  });
+  const { render, jsxFactory } = await loadRenderer({
+    wrapperModule,
+    wrapperName,
+    previewableModule,
+    previewableName,
+    renderId,
+    shouldAbortRender,
+  });
+  if (shouldAbortRender()) {
+    return;
+  }
+  const { autogenCallbackProps, properties } =
+    await previewableModule.PreviewJsEval(
+      `
+      let ${currentState.autogenCallbackPropsSource};
+      let ${currentState.propsAssignmentSource};
+      return { autogenCallbackProps, properties };
+      `,
+      {
+        __jsxFactory__: jsxFactory,
+      }
+    );
+  if (shouldAbortRender()) {
+    return;
+  }
+  await render(({ presetProps, presetGlobalProps }) => ({
+    ...transformFunctions(autogenCallbackProps, []),
+    ...transformFunctions(presetGlobalProps, []),
+    ...transformFunctions(properties || presetProps, []),
+  }));
+  if (shouldAbortRender()) {
+    return;
+  }
+  window.__PREVIEWJS_IFRAME__.reportEvent({
+    kind: "rendered",
+  });
+}
+
+/**
+ * Ensures that any call to a function within objects and arrays is automatically intercepted
+ * and shown to the user.
+ */
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+function transformFunctions(value: any, path: string[]): any {
+  if (value && typeof value === "object") {
+    if (Array.isArray(value)) {
+      // Array.
+      return value.map((v, i) =>
+        transformFunctions(v, [...path, i.toString(10)])
+      );
+    }
+    if (value.constructor === Object) {
+      // Plain object (i.e. not Set or Map or any class instance).
+      if (value.$$typeof) {
+        // This is likely a React component, e.g. instantiated in a JSX expression.
+        // We don't want to show an action invoked when the JSX function is invoked,
+        // so skip it.
+        return value;
+      }
+      if (value.__v_isVNode) {
+        // This is likely a Vue component (at least Vue 3).
+        return value;
+      }
+      return Object.fromEntries(
+        Object.entries(value).map(([k, v]) => [
+          k,
+          typeof v === "function"
+            ? (...args: unknown[]) => {
+              window.__PREVIEWJS_IFRAME__.reportEvent({
+                kind: "action",
+                type: "fn",
+                path: [...path, k].join("."),
+              });
+              return v(...args);
+            }
+            : transformFunctions(v, [...path, k]),
+        ])
+      );
+    }
+  }
+  return value;
+}

package/preview/__previewjs_internal__/state.ts

@@ -0,0 +1,11 @@
+import type { RenderOptions } from "../../src";
+
+let state: RenderOptions | null = null;
+
+export function getState() {
+  return state;
+}
+
+export function setState(newState: RenderOptions) {
+  state = newState;
+}

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

@@ -0,0 +1,74 @@
+/// <reference types="vite/client" />
+import type { ErrorPayload, UpdatePayload } from "vite/types/hmrPayload";
+import { generateMessageFromError } from "./error-message";
+
+const IGNORED_UPDATE_PATH = "/__previewjs_internal__/preview.js?";
+
+export function setupViteHmrListener() {
+  const hmr = import.meta.hot;
+  if (!hmr) {
+    return;
+  }
+  let error: ErrorPayload | null = null;
+  let isFirstUpdate = true;
+  hmr.on("vite:beforeFullReload", () => {
+    window.__PREVIEWJS_IFRAME__.reportEvent({
+      kind: "vite-before-reload",
+    });
+  });
+  hmr.on("vite:error", (payload: ErrorPayload) => {
+    error = payload;
+    if (typeof payload.err?.message !== "string") {
+      // This error doesn't match the expected payload.
+      // For example, this can happen with invalid CSS with the
+      // vite-plugin-vue2 plugin.
+      // Block this to prevent crashes down the track.
+      return;
+    }
+    window.__PREVIEWJS_IFRAME__.reportEvent({
+      kind: "error",
+      source: "vite",
+      message: generateMessageFromError(payload.err.message, payload.err.stack),
+    });
+  });
+  hmr.on("vite:beforeUpdate", (payload: UpdatePayload) => {
+    if (payload.updates.every((u) => u.path.startsWith(IGNORED_UPDATE_PATH))) {
+      // Ignore.
+      return;
+    }
+    // This is a copy of Vite logic that is disabled when the error overlay is off:
+    // https://github.com/vitejs/vite/blob/f3d15f106f378c3850b62fbebd69fc8f7c7f944b/packages/vite/src/client/client.ts#L61
+    if (error && isFirstUpdate) {
+      window.location.reload();
+    } else {
+      error = null;
+      isFirstUpdate = false;
+    }
+    if (window.__PREVIEWJS_IFRAME__.lastRenderFailed) {
+      window.location.reload();
+    } else {
+      window.__PREVIEWJS_IFRAME__.reportEvent({
+        kind: "vite-before-update",
+        payload,
+      });
+    }
+  });
+  hmr.on("vite:afterUpdate", (payload: UpdatePayload) => {
+    if (payload.updates.every((u) => u.path.startsWith(IGNORED_UPDATE_PATH))) {
+      // Ignore.
+      return;
+    }
+    window.__PREVIEWJS_IFRAME__.reportEvent({
+      kind: "vite-after-update",
+      payload,
+    });
+  });
+  hmr.on("vite:invalidate", () => {
+    window.__PREVIEWJS_IFRAME__.reportEvent({
+      kind: "vite-invalidate",
+    });
+    window.__PREVIEWJS_IFRAME__.refresh({
+      refetchPreviewableModule: true,
+    });
+  });
+}

package/preview/__previewjs_internal__/vscode-control.ts

@@ -0,0 +1,58 @@
+export function setupVSCodeControlListener() {
+    console.log('setupVSCodeControlListener');
+    window.addEventListener('message', (event) => {
+        parseMessageFromChannel(event.data, (eventName, args) => {
+            console.log(`收到vscode:${eventName}消息: ${args}`);
+            if (eventName === 'ready') {
+                const { message } = JSON.parse(args) as { message: string };
+                console.log(`处理消息体: ${message}`);
+                const payload = JSON.parse(message);
+                window.__PREVIEWJS_IFRAME__.reportEvent({
+                    kind: "toggle-inspect",
+                    enabled: payload.data.isInspectorOpen,
+                });
+                return true;
+            }
+            return false
+        })
+    })
+}
+
+export function parseMessageFromChannel(
+    message: string,
+    emit: (eventName: WebviewEvent, args: string) => boolean): boolean {
+    for (const e of webviewEventNames) {
+        if (message.substr(0, e.length) === e && message[e.length] === ':') {
+            emit(e, message.substr(e.length + 1));
+            return true;
+        }
+    }
+
+    return false;
+}
+
+export type WebviewEvent = 'getState' | 'getUrl' | 'openInEditor' | 'cssMirrorContent' | 'ready' | 'setState' | 'telemetry' | 'websocket'
+    | 'getVscodeSettings' | 'copyText' | 'focusEditor' | 'focusEditorGroup' | 'openUrl' | 'toggleScreencast' | 'toggleInspect' | 'replayConsoleMessages'
+    | 'devtoolsConnection' | 'toggleCSSMirrorContent' | 'writeToClipboard' | 'readClipboard';
+export const webviewEventNames: WebviewEvent[] = [
+    'getState',
+    'getUrl',
+    'openInEditor',
+    'cssMirrorContent',
+    'ready',
+    'setState',
+    'telemetry',
+    'websocket',
+    'getVscodeSettings',
+    'copyText',
+    'focusEditor',
+    'focusEditorGroup',
+    'openUrl',
+    'toggleScreencast',
+    'toggleInspect',
+    'replayConsoleMessages',
+    'devtoolsConnection',
+    'toggleCSSMirrorContent',
+    'writeToClipboard',
+    'readClipboard',
+];

package/preview/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="icon" href="/logo.png" />
+    <script>
+      // 将全局对象 globalThis 赋值给 window.global，确保在不同环境下全局对象的一致性
+      window.global = globalThis;
+      // 将 window.module 设置为 undefined，避免模块冲突
+      window.module = undefined;
+
+      // 定义一个全局对象 __PREVIEWJS_IFRAME__，用于管理预览框架的状态和事件
+      window.__PREVIEWJS_IFRAME__ = {
+        // 初始化 lastRenderFailed 为 false，表示初始渲染未失败
+        lastRenderFailed: false,
+        toggleInspect:false,
+        /**
+         * 报告预览事件
+         * @param {Object} event - 事件对象
+         * @param {string} event.kind - 事件类型，如 "rendered" 或 "error"
+         * @param {string} [event.source] - 事件源，如 "renderer"
+         */
+        reportEvent: (event) => {
+          // 如果事件类型为 "rendered"，则将 lastRenderFailed 设为 false
+          if (event.kind === "rendered" ) {
+            window.__PREVIEWJS_IFRAME__.lastRenderFailed = false;
+          } 
+          // 如果事件类型为 "error" 且事件源为 "renderer"，则将 lastRenderFailed 设为 true
+          else if (event.kind === "error" && event.source === "renderer") {
+            window.__PREVIEWJS_IFRAME__.lastRenderFailed = true;
+          }
+          // 调用控制器的 onPreviewEvent 方法处理事件
+          (
+            // 注意: 与 core/src/html-error.ts 中的代码保持同步.
+            window.__PREVIEWJS_CONTROLLER__ || window.parent.__PREVIEWJS_CONTROLLER__
+          ).onPreviewEvent(event);
+        },
+        /**
+         * 刷新预览
+         * 目前为空函数，可根据需求实现具体逻辑
+         */
+        refresh: () => {}
+      };
+      // 报告启动事件，表明预览框架正在初始化
+      window.__PREVIEWJS_IFRAME__.reportEvent({
+        kind: "bootstrapping",
+      });
+    </script>
+    <!-- %OPTIONAL_HEAD_CONTENT% -->
+    <style>
+      body {
+        padding: 1rem;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+          "Helvetica Neue", sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      code,
+      .code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+          monospace;
+      }
+    </style>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>