@cfp-studio/iframe 18.0.0

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@cfp-studio/iframe",
+  "version": "18.0.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "preview"
+  ],
+  "devDependencies": {
+    "assert-never": "1.4.0",
+    "immer": "10.1.1",
+    "typescript": "5.7.3",
+    "unbuild": "2.0.0",
+    "vite": "6.2.0"
+  },
+  "scripts": {
+    "build": "tsc && unbuild"
+  }
+}

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

@@ -0,0 +1,75 @@
+export function overrideCopyCutPaste() {
+  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;
+      }
+    }
+  });
+}

package/preview/__previewjs_internal__/error-message.ts

@@ -0,0 +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}` : ""}`;
+}

package/preview/__previewjs_internal__/index.ts

@@ -0,0 +1,95 @@
+import { overrideCopyCutPaste } from "./copy-cut-paste";
+import { setUpLinkInterception } from "./links";
+import { setUpLogInterception } from "./logs";
+import { loadRenderer } from "./renderer";
+import { runRenderer } from "./run-renderer";
+import { setState } from "./state";
+import { setupViteHmrListener } from "./vite-hmr-listener";
+import { setupVSCodeControlListener } from "./vscode-control";
+
+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();
+}
+
+export function initPreview({
+  previewableModule,
+  previewableName,
+  wrapperModule,
+  wrapperName,
+}: {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  previewableModule: any;
+  previewableName: string;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  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",
+  });
+
+  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,
+      });
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    } 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);
+  };
+}

package/preview/__previewjs_internal__/links.ts

@@ -0,0 +1,30 @@
+export function setUpLinkInterception() {
+  document.addEventListener(
+    "click",
+    (event) => {
+      let node = event?.target;
+      while (node) {
+        if (!(node instanceof Node)) {
+          break;
+        }
+        if (node.nodeName === "A") {
+          // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+          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
+  );
+}

package/preview/__previewjs_internal__/logs.ts

@@ -0,0 +1,131 @@
+/* eslint-disable no-console */
+import type { LogLevel } from "../../src";
+// @ts-ignore
+import inspect from "./object-inspect";
+
+// 注意: 请与 vite 保持同步:
+// https://github.com/vitejs/vite/blob/2de425d0288bfae345c5ced5c84cf67ffccaef48/packages/vite/src/client/client.ts#L117
+const HMR_FAILED_UPDATE_REGEX =
+  /^\[hmr\] Failed to reload (.+)\. This could be due to syntax errors or importing non-existent modules\. \(see errors above\)$/;
+
+/**
+ * 设置日志拦截器。
+ */
+export function setUpLogInterception() {
+  const makeLogger =
+    (level: LogLevel, defaultFn: typeof console.log) =>
+      // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+      (...args: any[]) => {
+        // Prevent an infinite call stack size if anything here logs.
+        const self = console[level];
+        console[level] = defaultFn;
+        defaultFn(...args);
+        try {
+          const firstArg = args[0];
+          if (typeof firstArg === "string") {
+            if (firstArg.startsWith("[vite]")) {
+              // Silence.
+              return;
+            }
+            const hmrMatch = firstArg.match(HMR_FAILED_UPDATE_REGEX);
+            if (hmrMatch) {
+              return;
+            }
+          }
+          window.__PREVIEWJS_IFRAME__.reportEvent({
+            kind: "log-message",
+            level,
+            message: formatLogMessage(...args),
+            timestamp: Date.now(),
+          });
+        } finally {
+          console[level] = self;
+        }
+      };
+  console.log = makeLogger("log", console.log);
+  console.info = makeLogger("info", console.info);
+  console.warn = makeLogger("warn", console.warn);
+  console.error = makeLogger("error", console.error);
+  window.onerror = (message, source, lineno, colno, error) => {
+    window.__PREVIEWJS_IFRAME__.reportEvent({
+      kind: "error",
+      source: "renderer",
+      message: formatError(error, message),
+    });
+  };
+  window.onunhandledrejection = (event) => {
+    const message = formatError(event.reason);
+    window.__PREVIEWJS_IFRAME__.reportEvent({
+      kind: "error",
+      source:
+        message.includes("Failed to fetch dynamically imported module") ||
+          message.includes("Failed to reload")
+          ? "vite"
+          : "renderer",
+      message,
+    });
+  };
+}
+
+/**
+ *  格式化错误信息。
+ * @param error  
+ * @param message 
+ * @returns 
+ */
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+function formatError(error?: any, message?: any): string {
+  // 如果 error 对象存在且包含 stack 和 message 属性
+  if (error?.stack && error.message) {
+    let stackMessage = error.stack;
+    // 确保 stack 信息包含错误消息
+    if (!stackMessage.includes(error.message)) {
+      stackMessage = `${error.message}\n${stackMessage}`;
+    }
+    return stackMessage;
+  } if (message) {
+    return `${message}`;
+  }
+  return `${error}`;
+}
+
+/**
+ *  格式化日志消息。
+ * @param args 
+ * @returns 
+ */
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+function formatLogMessage(...args: any[]) {
+  if (args.length === 0) {
+    return "";
+  }
+  let message = formatValue(args.shift());
+  message = message.replace(/%s/g, () => formatValue(args.shift()));
+  return [message, ...args.map(formatValue)].join(" ");
+}
+
+/**
+ *  格式化值。
+ * @param value 
+ * @returns 
+ */
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+function formatValue(value: any) {
+  if (typeof value === "string") {
+    return value;
+  }
+  const formatted = inspect(value);
+  if (typeof formatted !== "string") {
+    // This can happen in rare cases e.g. toString() not actually returning a string.
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "[Unable to represent value as string]";
+    }
+  }
+  if (formatted.at(0) === "[" && formatted.at(-1) === "]") {
+    return formatted.substring(1, formatted.length - 1);
+  }
+  return formatted;
+}