npm - @farview/example - Versions diffs - 0.1.0 - Mend

@farview/example 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Farview E2E 测试页</title>
+    <style>
+      body {
+        font:
+          15px/1.6 system-ui,
+          sans-serif;
+        max-width: 720px;
+        margin: 40px auto;
+        padding: 0 16px;
+      }
+      h1 {
+        font-size: 20px;
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin: 12px 0;
+      }
+      button {
+        padding: 8px 14px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        background: #fff;
+        cursor: pointer;
+      }
+      button:hover {
+        background: #f2f2f2;
+      }
+      input {
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+      }
+      #state {
+        padding: 8px 12px;
+        border-radius: 8px;
+        background: #f6f6f6;
+        font-family: monospace;
+      }
+      section {
+        margin: 20px 0;
+        padding: 12px 16px;
+        border: 1px solid #eee;
+        border-radius: 12px;
+      }
+      h2 {
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Farview E2E 测试页</h1>
+    <p id="state">
+      agent 状态：<b id="agentState">未加载</b>（仅当 URL 带 <code>?debug=</code> 时加载）
+    </p>
+    <section>
+      <h2>Console</h2>
+      <div class="row">
+        <button data-act="log">console.log</button>
+        <button data-act="warn">console.warn</button>
+        <button data-act="error">console.error</button>
+        <button data-act="throw">抛未捕获异常</button>
+      </div>
+    </section>
+    <section>
+      <h2>Network</h2>
+      <div class="row">
+        <button data-act="fetch-ok">fetch 200 (JSON)</button>
+        <button data-act="fetch-404">fetch 404</button>
+        <button data-act="fetch-fail">fetch 失败(跨域/断网)</button>
+      </div>
+    </section>
+    <section>
+      <h2>环境 / 镜像 / eval</h2>
+      <p>环境快照、镜像画面由 agent 自动上报；eval 从 viewer 端执行，无需页面按钮。</p>
+      <div class="row">
+        <button data-act="mutate">改一下 DOM（验证镜像实时性）</button>
+      </div>
+    </section>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "@farview/example",
+  "version": "0.1.0",
+  "description": "Farview 端到端联调示例（Vite + TS）——按需懒加载 agent 的最小接入范式。用 `npx @farview/cli example` 释放成可改脚手架。",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "index.html",
+    "tsconfig.json",
+    "src"
+  ],
+  "dependencies": {
+    "@farview/agent": "0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite --host --port 5188",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/actions.ts ADDED Viewed

@@ -0,0 +1,43 @@
+// 各类可观测行为触发器，按 index.html 里按钮的 data-act 键索引。
+// 点一下就在 viewer 对应面板（Console / Network / 镜像）产生一条记录。
+type Action = () => void;
+export const actions: Record<string, Action> = {
+  // --- Console / 报错 ---
+  log: () => console.log('[e2e] 普通日志', { ts: Date.now(), items: [1, 2, 3] }),
+  warn: () => console.warn('[e2e] 警告一下'),
+  error: () => console.error('[e2e] 错误日志', new Error('demo error')),
+  throw: () => {
+    // 未捕获异常，验证 error hook
+    setTimeout(() => {
+      throw new Error('[e2e] 未捕获的运行时异常');
+    }, 0);
+  },
+  // --- Network ---
+  'fetch-ok': () => {
+    void fetch('https://jsonplaceholder.typicode.com/todos/1')
+      .then((r) => r.json())
+      .then((d) => console.log('[e2e] fetch ok', d));
+  },
+  'fetch-404': () => {
+    void fetch('https://jsonplaceholder.typicode.com/nope-404').then((r) =>
+      console.log('[e2e] fetch status', r.status),
+    );
+  },
+  'fetch-fail': () => {
+    // 指向一个连不上的地址，验证网络失败上报
+    void fetch('https://127.0.0.1:1/nope').catch((err: unknown) =>
+      console.log('[e2e] fetch failed', err instanceof Error ? err.message : err),
+    );
+  },
+  // --- 镜像实时性 ---
+  mutate: () => {
+    const tag = document.createElement('div');
+    tag.textContent = `镜像测试块 @ ${new Date().toLocaleTimeString()}`;
+    tag.style.cssText = 'margin:8px 0;padding:8px;background:#e0f2fe;border-radius:8px;';
+    document.body.appendChild(tag);
+  },
+};

package/src/farview.ts ADDED Viewed

@@ -0,0 +1,32 @@
+// agent 引导：仅当 URL 带 ?debug= 时懒加载并启动。
+//
+// 关键：这里用 `import type`（编译期擦除，不进产物），运行时才 `await import()`
+// 拉真正的 agent。这样保留 README 的真实语义——正常用户（无 ?debug=）永不下载
+// agent chunk，同时又能拿到完整 TS 类型。
+import type { FarviewOptions } from '@farview/agent';
+/** 演示用业务码表：HTTP 200 但 code≠0 时，viewer 的 Network 面板据此标红。 */
+const BUSINESS_CODES: Record<number, string> = {
+  1001: '未登录',
+  1002: '无权限',
+};
+const options: FarviewOptions = {
+  decodeBusinessCode: (code) => (code === 0 ? '成功' : (BUSINESS_CODES[code] ?? `业务码 ${code}`)),
+  // 环境快照的业务补充（真实项目里密钥须自行剥离后再返回）
+  buildSnapshot: () => ({ tenant: 'e2e-tenant', theme: 'light' }),
+};
+/**
+ * 若 URL 带 ?debug=<隧道子域名> 则懒加载启动 agent。
+ * @returns 供页面显示的状态文案。
+ */
+export async function bootstrapFarview(): Promise<string> {
+  const token = new URLSearchParams(location.search).get('debug');
+  if (!token) {
+    return '未加载（安全：无 ?debug= 时 agent 完全不下载、不连接）';
+  }
+  const { startFarview } = await import('@farview/agent'); // 独立 chunk
+  startFarview(token, options);
+  return `已加载并连接：${token}`;
+}

package/src/main.ts ADDED Viewed

@@ -0,0 +1,19 @@
+// 入口：引导 agent + 把按钮点击派发到 actions。
+import { actions } from './actions';
+import { bootstrapFarview } from './farview';
+function setState(text: string): void {
+  const el = document.getElementById('agentState');
+  if (el) el.textContent = text;
+}
+bootstrapFarview()
+  .then(setState)
+  .catch((err: unknown) => setState(`加载失败：${err instanceof Error ? err.message : err}`));
+document.body.addEventListener('click', (e) => {
+  const target = e.target;
+  if (!(target instanceof HTMLElement)) return;
+  const act = target.dataset.act;
+  if (act && act in actions) actions[act]();
+});

package/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}