@open-dy/vibecoding-sdk-taro 0.0.1-beta.4 → 0.0.1-beta.6

package/src/build/plugins/vite-depend-card.ts

@@ -0,0 +1,168 @@
+import path from 'node:path'
+import type { Plugin } from 'vite'
+import { analyzeCardModule, isDirectCard } from './depend-card/analyze'
+import { createCardSourceScanner } from './depend-card/source'
+
+/**
+ * @desc 检测单个文件中直接来自卡片入口的 JSX 或 React.createElement 用法。
+ * @params {string} source 待分析的源码。
+ * @params {string} filename 用于选择 TypeScript、JSX 语法的文件名。
+ * @return {boolean} 是否检测到卡片组件使用；跨文件转导出由 scanSource 处理。
+ * @example usesCard('export const Page = () => <miniapp-open-card />', 'page.tsx')
+ */
+export function usesCard(source: string, filename: string) {
+  return analyzeCardModule(source, filename).uses.some(isDirectCard)
+}
+
+/**
+ * @desc 扫描业务源码并追踪源码内的相对路径转导出，跳过依赖、测试、mock、声明和配置文件。
+ * @params {string} sourceDir Taro 编译上下文提供的源码目录，可为自定义 sourceRoot。
+ * @return {{ depends: boolean, files: string[], directories: string[] }} 检测结果及监听路径。
+ * @example scanSource('/workspace/project/src')
+ */
+export function scanSource(sourceDir: string) {
+  return createCardSourceScanner()(sourceDir)
+}
+
+interface TaroCompilerContext {
+  /** @description Taro 解析后的源码目录，避免插件自行假设工程使用 src 目录。 */
+  sourceDir: string
+  /** @description Taro 共享的应用编译信息，修改后供后续入口及配置产物生成使用。 */
+  app: {
+    /** @description 应用配置对象，插件仅更新其中的卡片依赖标记。 */
+    config: {
+      /** @description 是否依赖卡片；显式布尔值优先，未配置时由源码扫描补齐。 */
+      isDependCard?: boolean
+    }
+    /** @description 应用入口脚本路径，用于识别并使序列化配置的入口模块缓存失效。 */
+    scriptPath: string
+  }
+}
+
+/**
+ * @desc 创建自动维护 isDependCard 的 Vite 插件，从 Taro 模块 metadata 获取编译上下文。
+ *   显式布尔配置优先；未配置时在入口序列化前扫描，开发期间复用未变化文件的解析结果。
+ * @return {Plugin} 注册到 compiler.vitePlugins 的插件实例。
+ * @example viteDependCardPlugin()
+ */
+export function viteDependCardPlugin(): Plugin {
+  let sourceDir: string
+  let viteCompilerContext: TaroCompilerContext
+  const scan = createCardSourceScanner()
+  const settings = new WeakMap<TaroCompilerContext['app']['config'], {
+    explicit: boolean | undefined
+    lastValue: boolean
+  }>()
+  /**
+   * @description 重新扫描源码并更新共享应用配置，只记录依赖标记是否变化。
+   * @returns {{ depends: boolean, files: string[], directories: string[], changed: boolean }} 扫描结果及变化标记。
+   */
+  const update = () => {
+    const config = viteCompilerContext.app.config
+    const previous = settings.get(config)
+    // Do not mistake our own write on a previous watch pass for user configuration.
+    const explicit = previous && config.isDependCard === previous.lastValue
+      ? previous.explicit
+      : (typeof config.isDependCard === 'boolean' ? config.isDependCard : undefined)
+    const result = explicit === undefined ? scan(sourceDir) : {
+      depends: explicit, files: [], directories: [],
+    }
+    const changed = config.isDependCard !== result.depends
+    config.isDependCard = result.depends
+    settings.set(config, { explicit, lastValue: result.depends })
+    return { ...result, changed }
+  }
+  /**
+   * @description 识别应用入口及其带 entry-loader 查询参数的虚拟模块。
+   * @param {string} id Vite 或 Rollup 提供的模块标识。
+   * @returns {boolean} 是否为需要刷新配置的应用入口模块。
+   */
+  const isAppModule = (id) => id.includes(viteCompilerContext.app.scriptPath)
+  return {
+    name: 'vibecoding-depend-card',
+    enforce: 'pre',
+    buildStart: {
+      // Taro's pipeline publishes its compiler context in an earlier buildStart.
+      // Wait for that hook (including H5's asynchronous initialization).
+      sequential: true,
+      /**
+       * @description 等待前序 Taro pipeline 发布上下文，再更新配置并监听文件及目录。
+       *   缺少编译上下文时使构建失败；监听目录用于捕获尚不存在的新文件。
+       * @returns {void} 配置及监听关系写入当前构建。
+       */
+      handler() {
+        for (const id of this.getModuleIds()) {
+          const compiler = this.getModuleInfo(id)?.meta.viteCompilerContext
+          if (compiler?.app && typeof compiler.sourceDir === 'string' && compiler.sourceDir) {
+            viteCompilerContext = compiler
+            sourceDir = compiler.sourceDir
+            break
+          }
+        }
+        if (!viteCompilerContext) {
+          this.error('Cannot update isDependCard: Taro Vite compiler context is unavailable')
+        }
+        const result = update()
+        for (const file of [...result.files, ...result.directories]) this.addWatchFile(file)
+      },
+    },
+    // Taro serializes app.config in its app entry loader. Re-run that loader
+    // during watch builds even if only a child component changed.
+    /**
+     * @description 强制重新处理应用入口，避免 watch 构建复用含旧 isDependCard 的序列化代码。
+     * @param {object} options Rollup 的缓存模块信息。
+     * @param {string} options.id 模块标识。
+     * @returns {true | undefined} 应用入口返回 true；其他模块沿用默认缓存处理。
+     */
+    shouldTransformCachedModule({ id }) {
+      if (isAppModule(id)) return true
+    },
+    /**
+     * @description 注册开发服务器的文件新增、删除监听，并在服务器关闭时解除监听。
+     * @param {object} server Vite 开发服务器，提供文件监听、模块缓存及刷新通知能力。
+     * @returns {void} 监听回调直接注册到服务器。
+     */
+    configureServer(server) {
+      /**
+       * @description 文件新增或删除导致依赖标记变化时，刷新应用入口；解析失败则发送错误提示。
+       * @param {string} file 发生变化的文件路径，源码目录以外的事件会被忽略。
+       * @returns {void} 按需使缓存失效并发送整页刷新或错误通知。
+       */
+      const refresh = (file) => {
+        if (!viteCompilerContext || !file.startsWith(sourceDir + path.sep)) return
+        try {
+          if (!update().changed) return
+        } catch (error: any) {
+          server.config.logger.error(error.message)
+          server.ws.send({ type: 'error', err: { message: error.message, stack: error.stack } })
+          return
+        }
+        for (const [id, mod] of server.moduleGraph.idToModuleMap) {
+          if (isAppModule(id)) server.moduleGraph.invalidateModule(mod)
+        }
+        server.ws.send({ type: 'full-reload' })
+      }
+      server.watcher.on('add', refresh)
+      server.watcher.on('unlink', refresh)
+      server.httpServer?.once('close', () => {
+        server.watcher.off('add', refresh)
+        server.watcher.off('unlink', refresh)
+      })
+    },
+    /**
+     * @description 处理已有源码的修改；依赖标记变化时重载页面，避免继续使用旧应用配置。
+     * @param {object} context Vite 热更新上下文。
+     * @param {string} context.file 发生修改的文件路径。
+     * @param {object} context.server 当前开发服务器。
+     * @returns {Array<never> | undefined} 整页刷新后返回空数组取消本次模块热更新；否则沿用默认处理。
+     */
+    handleHotUpdate({ file, server }) {
+      if (!viteCompilerContext || !file.startsWith(sourceDir + path.sep) || !update().changed) return
+      for (const [id, mod] of server.moduleGraph.idToModuleMap) {
+        if (isAppModule(id)) server.moduleGraph.invalidateModule(mod)
+      }
+      server.ws.send({ type: 'full-reload' })
+      return []
+    },
+  }
+}

package/src/build/plugins/vite-image-asset-import.ts

@@ -0,0 +1,178 @@
+import type { Plugin } from "vite";
+import fs from "fs";
+import path from "path";
+import { createHash } from "crypto";
+import { parse } from "@babel/parser";
+import babelTraverse from "@babel/traverse";
+import babelGenerate from "@babel/generator";
+import * as t from "@babel/types";
+
+// Babel's CommonJS packages are exposed as either the callable itself or a
+// `{ default }` namespace depending on the consumer's module loader.
+const traverse = ((babelTraverse as any).default ?? babelTraverse) as typeof babelTraverse;
+const generate = ((babelGenerate as any).default ?? babelGenerate) as typeof babelGenerate;
+
+/**
+ * 将 <Image src="/assets/..."> 或 src="@/assets/..." 在构建时转为
+ * `import __taroAsset_xxx from '@/assets/...'` + `src={__taroAsset_xxx}`，
+ * 使 H5 云端 preview 的 publicPath 与小程序打包路径正确。
+ * 仅当解析到 `src/assets/**` 下真实文件时转换；否则保持原样。
+ */
+export function viteImageAssetImportPlugin(options: {
+  projectRoot: string;
+}): Plugin {
+  const { projectRoot } = options;
+
+  return {
+    name: "vite-image-asset-import",
+    enforce: "pre",
+    transform(code, id) {
+      if (!/\.(tsx|jsx)$/.test(id) || id.includes("node_modules")) {
+        return null;
+      }
+      if (!id.replace(/\\/g, "/").includes("/src/")) {
+        return null;
+      }
+
+      let ast;
+      try {
+        ast = parse(code, {
+          sourceType: "module",
+          errorRecovery: false,
+          plugins: ["typescript", "jsx"],
+        });
+      } catch {
+        return null;
+      }
+
+      const assetImports = new Map<
+        string,
+        { localName: string; importSource: string }
+      >();
+
+      function resolveUnderSrcAssets(raw: string): string | null {
+        let relUnderSrc: string | null = null;
+        if (raw.startsWith("@/")) {
+          relUnderSrc = raw.slice(2);
+        } else if (raw.startsWith("/assets/")) {
+          relUnderSrc = raw.slice(1);
+        } else {
+          return null;
+        }
+        if (!relUnderSrc.startsWith("assets/")) {
+          return null;
+        }
+        const abs = path.join(projectRoot, "src", relUnderSrc);
+        try {
+          if (fs.existsSync(abs) && fs.statSync(abs).isFile()) {
+            return abs;
+          }
+        } catch {
+          return null;
+        }
+        return null;
+      }
+
+      function getLocalName(absFile: string): string {
+        const relFromSrc = path
+          .relative(path.join(projectRoot, "src"), absFile)
+          .replace(/\\/g, "/");
+        const h = createHash("sha256").update(relFromSrc).digest("hex").slice(0, 10);
+        return `__taroAsset_${h}`;
+      }
+
+      function getImportSource(absFile: string): string {
+        const relFromSrc = path
+          .relative(path.join(projectRoot, "src"), absFile)
+          .replace(/\\/g, "/");
+        return `@/${relFromSrc}`;
+      }
+
+      traverse(ast, {
+        JSXOpeningElement(path) {
+          const el = path.node;
+          if (!t.isJSXIdentifier(el.name) || el.name.name !== "Image") {
+            return;
+          }
+
+          const srcAttr = el.attributes.find(
+            (a): a is t.JSXAttribute =>
+              t.isJSXAttribute(a) &&
+              t.isJSXIdentifier(a.name) &&
+              a.name.name === "src",
+          );
+          if (!srcAttr?.value) {
+            return;
+          }
+
+          let strVal: string | null = null;
+          if (t.isStringLiteral(srcAttr.value)) {
+            strVal = srcAttr.value.value;
+          } else if (t.isJSXExpressionContainer(srcAttr.value)) {
+            const ex = srcAttr.value.expression;
+            if (t.isStringLiteral(ex)) {
+              strVal = ex.value;
+            }
+          }
+          if (strVal == null) {
+            return;
+          }
+
+          const abs = resolveUnderSrcAssets(strVal);
+          if (!abs) {
+            return;
+          }
+
+          let entry = assetImports.get(abs);
+          if (!entry) {
+            entry = {
+              localName: getLocalName(abs),
+              importSource: getImportSource(abs),
+            };
+            assetImports.set(abs, entry);
+          }
+
+          srcAttr.value = t.jsxExpressionContainer(
+            t.identifier(entry.localName),
+          );
+        },
+      });
+
+      if (assetImports.size === 0) {
+        return null;
+      }
+
+      const program = ast.program;
+      const body = program.body;
+      let insertAt = 0;
+      for (let i = 0; i < body.length; i++) {
+        const n = body[i];
+        if (t.isImportDeclaration(n) || t.isTSImportEqualsDeclaration(n)) {
+          insertAt = i + 1;
+        } else {
+          break;
+        }
+      }
+
+      const importNodes: t.ImportDeclaration[] = [];
+      for (const { localName, importSource } of assetImports.values()) {
+        importNodes.push(
+          t.importDeclaration(
+            [t.importDefaultSpecifier(t.identifier(localName))],
+            t.stringLiteral(importSource),
+          ),
+        );
+      }
+      for (let i = importNodes.length - 1; i >= 0; i--) {
+        body.splice(insertAt, 0, importNodes[i]!);
+      }
+
+      const out = generate(ast, { retainLines: false }, code);
+
+      return {
+        code: out.code,
+        map: out.map ?? undefined,
+      };
+    },
+  };
+}

package/src/build/plugins/vite-inline-json.ts

@@ -0,0 +1,149 @@
+import type { Plugin } from "vite";
+import fs from "fs";
+import path from "path";
+
+/**
+ * 将 `src/` 内 `import ... from '*.json'` 在 transform 阶段内联为 `const ... = {...}`。
+ *
+ * 背景：Taro H5 browser router 动态加载页面时，嵌套的 `.json` import 会触发
+ * `.json?import` 请求；云端预览环境可能返回 `application/json` 而非 JS 模块，
+ * 导致页面 import 失败、白屏。内联后可消除该运行时请求。
+ *
+ * 范围：src 目录下 ts/tsx/js/jsx 中的 @/ 或相对路径 .json import；enforce: pre。
+ * 业务上 Feed 落地页应走 `feed-card-from-json.ts`，不 runtime import JSON；本插件仍兜底 Agent 误写 import。
+ */
+
+// 匹配默认导入、命名导入、混合导入
+const JSON_IMPORT_RE =
+  /\bimport\s+([\w{},\s]+?)\s+from\s+['"]([^'"]+\.json)(?:\?[^\s'"]*)?['"]/g;
+
+export function viteInlineJsonPlugin(options: { projectRoot: string }): Plugin {
+  const srcDir = path.join(options.projectRoot, "src");
+
+  return {
+    name: "vite-inline-json",
+    enforce: "pre",
+
+    transform(code, id) {
+      const cleanId = id.split("?")[0]!;
+      if (
+        !/\.(tsx?|jsx?)$/.test(cleanId) ||
+        cleanId.includes("node_modules") ||
+        !cleanId.replace(/\\/g, "/").includes("/src/")
+      ) {
+        return null;
+      }
+
+      JSON_IMPORT_RE.lastIndex = 0;
+      if (!JSON_IMPORT_RE.test(code)) return null;
+      JSON_IMPORT_RE.lastIndex = 0;
+
+      const replacements: Array<{ start: number; end: number; text: string }> =
+        [];
+      let match: RegExpExecArray | null;
+
+      while ((match = JSON_IMPORT_RE.exec(code)) !== null) {
+        const [fullMatch, specifiers, importPath] = match;
+        const absPath = resolveJsonPath(importPath, cleanId, srcDir);
+        if (!absPath) continue;
+
+        let json: string;
+        try {
+          json = fs.readFileSync(absPath, "utf-8").trim();
+          JSON.parse(json);
+        } catch {
+          continue;
+        }
+
+        const text = expandSpecifiers(specifiers.trim(), json);
+        if (!text) continue;
+
+        replacements.push({
+          start: match.index,
+          end: match.index + fullMatch.length,
+          text,
+        });
+      }
+
+      if (replacements.length === 0) return null;
+
+      let result = code;
+      for (let i = replacements.length - 1; i >= 0; i--) {
+        const { start, end, text } = replacements[i]!;
+        result = result.slice(0, start) + text + result.slice(end);
+      }
+      return { code: result, map: null };
+    },
+  };
+}
+
+/**
+ * 将 import 说明符展开为 const 声明。
+ *
+ * 默认导入：  feedCard                       → const feedCard = <json>
+ * 命名导入：  { AppID, PlanName as name }     → const __json = <json>; const AppID = __json.AppID; ...
+ * 混合导入：  feedCard, { AppID }             → const feedCard = <json>; const AppID = feedCard.AppID;
+ */
+function expandSpecifiers(specifiers: string, json: string): string | null {
+  const mixed = specifiers.match(/^(\w+)\s*,\s*\{(.+)\}$/);
+  const named = specifiers.match(/^\{(.+)\}$/);
+  const defaultOnly = specifiers.match(/^(\w+)$/);
+
+  if (mixed) {
+    return `const ${mixed[1]} = ${json};\n${namedDecls(mixed[2]!, mixed[1])}`;
+  }
+  if (named) {
+    const tmp = `__json_${hash(specifiers)}`;
+    return `const ${tmp} = ${json};\n${namedDecls(named[1]!, tmp)}`;
+  }
+  if (defaultOnly) {
+    return `const ${defaultOnly[1]} = ${json}`;
+  }
+  return null;
+}
+
+/** 将 `{ foo, bar as baz }` 中的每一项展开为 `const xxx = obj.prop;` */
+function namedDecls(part: string, obj: string): string {
+  return (
+    part
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .map((item) => {
+        const m = item.match(/^(\w+)(?:\s+as\s+(\w+))?$/);
+        if (!m) return null;
+        const alias = m[2] ?? m[1];
+        return `const ${alias} = ${obj}.${m[1]}`;
+      })
+      .filter((s): s is string => s !== null)
+      .join(";\n") + ";"
+  );
+}
+
+/** 简单哈希，用于生成唯一临时变量名 */
+function hash(s: string): string {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0;
+  return (h >>> 0).toString(36);
+}
+
+function resolveJsonPath(
+  importPath: string,
+  importerId: string,
+  srcDir: string,
+): string | null {
+  const resolved = importPath.startsWith("@/")
+    ? path.join(srcDir, importPath.slice(2))
+    : importPath.startsWith(".")
+      ? path.resolve(path.dirname(importerId), importPath)
+      : null;
+
+  if (!resolved) return null;
+  try {
+    if (fs.statSync(resolved).isFile() && resolved.endsWith(".json"))
+      return resolved;
+  } catch {
+    /* ignore */
+  }
+  return null;
+}