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

package/src/build/config-overrides.ts

@@ -0,0 +1,39 @@
+import type { UserConfigExport } from '@tarojs/cli'
+import type { BuildContext, CreateMicroappTaroConfigOptions } from './taro'
+
+/**
+ * @desc 递归合并 Taro 配置，数组按顺序拼接。
+ * @params {any} base 基础配置。
+ * @params {any} override 覆盖配置。
+ * @return {any} 合并后的配置。
+ * @example mergeConfigValue({ plugins: ['a'] }, { plugins: ['b'] })
+ */
+export function mergeConfigValue(base: any, override: any): any {
+  if (Array.isArray(base) && Array.isArray(override)) return [...base, ...override]
+  if (base && override && typeof base === 'object' && typeof override === 'object') {
+    const result = { ...base }
+    for (const [key, value] of Object.entries(override)) {
+      result[key] = key in result ? mergeConfigValue(result[key], value) : value
+    }
+    return result
+  }
+  return override
+}
+
+/**
+ * @desc 将对象或函数形式的覆盖项应用到 Taro 配置。
+ * @params {UserConfigExport} config 当前配置。
+ * @params {CreateMicroappTaroConfigOptions['overrides']} overrides 覆盖项。
+ * @params {BuildContext} ctx 构建上下文。
+ * @return {UserConfigExport} 应用覆盖后的配置。
+ * @example applyConfigOverrides(config, { h5: { publicPath: '/' } }, ctx)
+ */
+export function applyConfigOverrides(
+  config: UserConfigExport,
+  overrides: CreateMicroappTaroConfigOptions['overrides'],
+  ctx: BuildContext,
+): UserConfigExport {
+  if (!overrides) return config
+  if (typeof overrides === 'function') return overrides(config, ctx) ?? config
+  return mergeConfigValue(config, overrides) as UserConfigExport
+}

package/src/build/index.ts

@@ -0,0 +1,5 @@
+export {
+  createMicroappTaroConfig,
+  type BuildContext,
+  type CreateMicroappTaroConfigOptions,
+} from './taro'

package/src/build/plugins/app-config.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+
+type AppConfigPluginContext = {
+  modifyAppConfig: (
+    modifier: (payload: { appConfig: Record<string, any> }) => Record<string, any>,
+  ) => void;
+}
+
+const withPreviewBasePath = (iconPath: string, previewBasePath: string) => {
+  if (!previewBasePath) {
+    return iconPath
+  }
+  const previewPath = path.join(previewBasePath, iconPath)
+  if (previewPath.startsWith('./')) {
+    return previewPath
+  }
+
+  if (previewPath.startsWith('/')) {
+    return `.${previewPath}`
+  }
+
+  return `./${previewPath}`
+}
+
+export default function appConfigPlugin(
+  ctx: AppConfigPluginContext,
+  options: { previewBasePath?: string } = {},
+) {
+  const previewBasePath = options.previewBasePath ?? ''
+  ctx.modifyAppConfig(({ appConfig }) => {
+    if (!(process.env.TARO_ENV === 'h5' && process.env.NODE_ENV === 'development')) {
+      return appConfig
+    }
+    if (Array.isArray(appConfig.tabBar?.list) && appConfig.tabBar.list.length > 0) {
+      const list = appConfig.tabBar.list;
+      list.forEach(item => {
+        if (item.iconPath) {
+          item.iconPath = withPreviewBasePath(item.iconPath, previewBasePath)
+        }
+        if (item.selectedIconPath) {
+          item.selectedIconPath = withPreviewBasePath(item.selectedIconPath, previewBasePath)
+        }
+      })
+    }
+    return appConfig
+  });
+}

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

@@ -0,0 +1,122 @@
+import { parse } from '@babel/parser'
+import traverseModule from '@babel/traverse'
+
+const traverse = (traverseModule as unknown as { default?: typeof traverseModule }).default ?? traverseModule
+const cardComponentModules = new Set([
+  '@tarojs/components',
+  '@open-dy/vibecoding-sdk-taro/components/miniapp-open-card',
+])
+
+/** @description 卡片原生标签，或尚待解析的模块导出引用。 */
+export type CardReference = true | { source: string; name: string }
+/** @description 单个源文件的紧凑分析结果；不保留 AST 和 Babel 作用域。 */
+export interface CardModule {
+  uses: CardReference[]
+  exports: Map<string, CardReference | undefined>
+  stars: string[]
+}
+
+/**
+ * @desc 判断引用是否直接来自已支持的卡片组件入口。
+ * @params {CardReference} reference 组件引用。
+ * @return {boolean} 是否直接指向卡片。
+ * @example isDirectCard({ source: '@tarojs/components', name: 'MiniappOpenCard' })
+ */
+export function isDirectCard(reference: CardReference) {
+  return reference === true ||
+    (cardComponentModules.has(reference.source) && reference.name === 'MiniappOpenCard')
+}
+
+/**
+ * @desc 一次解析并收集 JSX、React.createElement 和运行时导出之间的引用。
+ *   忽略类型导出及被遮蔽或重新赋值的局部别名；语法错误向调用方抛出。
+ * @params {string} source 源码内容。
+ * @params {string} filename 用于选择 TypeScript 和 JSX 语法的文件名。
+ * @return {CardModule} 使用点和导出关系，不递归读取其他文件。
+ * @example analyzeCardModule('export const Page = () => <miniapp-open-card />', 'page.tsx')
+ */
+export function analyzeCardModule(source: string, filename: string): CardModule {
+  const ast = parse(source, {
+    sourceType: 'unambiguous',
+    plugins: [...(/\.[cm]?ts$/.test(filename) ? [] : ['jsx' as const]),
+      ...(/\.[cm]?tsx?$/.test(filename) ? ['typescript' as const] : []), 'decorators-legacy'],
+  })
+  const result: CardModule = { uses: [], exports: new Map(), stars: [] }
+
+  /** @description 按词法绑定追踪导入及不可变别名，避免将同名业务组件识别为卡片。 */
+  function reference(node, scope, seen = new Set(), allowUnbound = false): CardReference | undefined {
+    if (!node) return
+    if (node.type === 'StringLiteral') return node.value === 'miniapp-open-card' ? true : undefined
+    if (node.type === 'JSXMemberExpression' || node.type === 'MemberExpression') {
+      const binding = scope.getBinding(node.object.name)
+      const name = node.computed ? node.property.value : node.property.name
+      if (typeof name === 'string' && binding?.path.isImportNamespaceSpecifier() &&
+          binding.path.parent.importKind !== 'type') {
+        return { source: binding.path.parent.source.value, name }
+      }
+      return
+    }
+    if (!['Identifier', 'JSXIdentifier'].includes(node.type)) return
+    if (node.name === 'miniapp-open-card') return true
+    const binding = scope.getBinding(node.name)
+    if (!binding) return allowUnbound && node.name === 'MiniappOpenCard' ? true : undefined
+    if (seen.has(binding)) return
+    seen.add(binding)
+    if (binding.path.isImportSpecifier() || binding.path.isImportDefaultSpecifier()) {
+      if (binding.path.parent.importKind !== 'type' && binding.path.node.importKind !== 'type') {
+        return {
+          source: binding.path.parent.source.value,
+          name: binding.path.isImportDefaultSpecifier() ? 'default' :
+            (binding.path.node.imported.name ?? binding.path.node.imported.value),
+        }
+      }
+    } else if (binding.path.isVariableDeclarator() && binding.constant) {
+      return reference(binding.path.node.init, binding.path.scope, seen, allowUnbound)
+    }
+  }
+
+  /** @description 记录真实渲染点；仅导入或转导出不会被视为使用。 */
+  function use(node, scope) {
+    const target = reference(node, scope, new Set(), true)
+    if (target) result.uses.push(target)
+  }
+
+  traverse(ast, {
+    JSXOpeningElement(p) { use(p.node.name, p.scope) },
+    CallExpression(p) {
+      const callee = p.node.callee
+      const binding = callee.type === 'Identifier' ? p.scope.getBinding(callee.name) : null
+      const importedCreateElement = binding?.path.isImportSpecifier() &&
+        binding.path.parent.source.value === 'react' &&
+        binding.path.node.imported.name === 'createElement'
+      const reactBinding = callee.type === 'MemberExpression' ? p.scope.getBinding(callee.object.name) : null
+      const reactCreateElement = callee.type === 'MemberExpression' &&
+        callee.property.name === 'createElement' &&
+        ((reactBinding?.path.isImportDefaultSpecifier() || reactBinding?.path.isImportNamespaceSpecifier()) &&
+          reactBinding.path.parent.source.value === 'react')
+      if (importedCreateElement || reactCreateElement) use(p.node.arguments[0], p.scope)
+    },
+    ExportNamedDeclaration(p) {
+      if (p.node.exportKind === 'type') return
+      for (const specifier of p.node.specifiers) {
+        if (specifier.type !== 'ExportSpecifier' || specifier.exportKind === 'type') continue
+        const exported = specifier.exported.name ?? specifier.exported.value
+        result.exports.set(exported, p.node.source
+          ? { source: p.node.source.value, name: specifier.local.name }
+          : reference(specifier.local, p.scope))
+      }
+      if (p.node.declaration) {
+        for (const [name, identifier] of Object.entries(p.getBindingIdentifiers())) {
+          result.exports.set(name, reference(identifier, p.scope))
+        }
+      }
+    },
+    ExportDefaultDeclaration(p) {
+      result.exports.set('default', reference(p.node.declaration, p.scope))
+    },
+    ExportAllDeclaration(p) {
+      if (p.node.exportKind !== 'type') result.stars.push(p.node.source.value)
+    },
+  })
+  return result
+}

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

@@ -0,0 +1,97 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { analyzeCardModule, isDirectCard } from './analyze'
+import type { CardModule, CardReference } from './analyze'
+
+const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mts', '.cts', '.mjs', '.cjs']
+
+/**
+ * @desc 创建仅扫描 sourceDir 的检测器，按源码内容缓存解析结果，不访问依赖目录。
+ *   每次扫描重新计算导出关系，使转导出修改、新增和删除立即生效；循环引用不会无限递归。
+ * @return {Function} 返回卡片依赖标记和文件、目录监听列表的扫描函数。
+ * @example const scan = createCardSourceScanner(); scan('/workspace/project/src')
+ */
+export function createCardSourceScanner() {
+  const cache = new Map<string, { source: string; module: CardModule }>()
+  return (sourceDir: string) => {
+    const files: string[] = []
+    const directories: string[] = []
+    const modules = new Map<string, CardModule>()
+
+    /** @description 仅遍历真实业务源码；符号链接、测试、配置及声明文件不进入解析范围。 */
+    function visit(directory: string) {
+      if (!fs.existsSync(directory)) return
+      directories.push(directory)
+      for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+        const file = path.join(directory, entry.name)
+        if (entry.isDirectory()) {
+          if (!['node_modules', '__tests__', '__mocks__'].includes(entry.name)) visit(file)
+        } else if (entry.isFile() && /\.[cm]?[jt]sx?$/.test(entry.name) &&
+            !/\.(?:d|test|spec|config)\.[cm]?[jt]sx?$/.test(entry.name)) {
+          files.push(file)
+          try {
+            const source = fs.readFileSync(file, 'utf8')
+            let cached = cache.get(file)
+            if (!cached || cached.source !== source) {
+              cached = { source, module: analyzeCardModule(source, file) }
+              cache.set(file, cached)
+            }
+            modules.set(file, cached.module)
+          } catch (error: any) {
+            throw new Error(`Cannot determine isDependCard from ${file}: ${error.message}`)
+          }
+        }
+      }
+    }
+    visit(path.resolve(sourceDir))
+    for (const file of cache.keys()) if (!modules.has(file)) cache.delete(file)
+
+    /** @description 从已扫描文件表解析相对导入；不读取 src 之外的文件，也不解析 npm 包。 */
+    function resolveLocal(importer: string, source: string) {
+      if (!source.startsWith('./') && !source.startsWith('../')) return
+      const target = path.resolve(path.dirname(importer), source)
+      const candidates = [target]
+      if (/\.[cm]?jsx?$/.test(target)) {
+        candidates.push(target.replace(/\.js$/, '.ts'), target.replace(/\.jsx?$/, '.tsx'),
+          target.replace(/\.mjs$/, '.mts'), target.replace(/\.cjs$/, '.cts'))
+      }
+      candidates.push(...extensions.map(ext => target + ext),
+        ...extensions.map(ext => path.join(target, 'index' + ext)))
+      return candidates.find(candidate => modules.has(candidate))
+    }
+
+    const resolved = new Map<string, boolean>()
+    /** @description 迭代追踪命名、默认及星号转导出，按文件和导出名去重并缓存查询结果。 */
+    function isCard(importer: string, reference: CardReference) {
+      if (isDirectCard(reference)) return true
+      if (reference === true) return true
+      const root = resolveLocal(importer, reference.source)
+      if (!root) return false
+      const key = `${root}\0${reference.name}`
+      if (resolved.has(key)) return resolved.get(key)!
+      const queue = [{ file: root, name: reference.name }]
+      const seen = new Set<string>()
+      let found = false
+      for (let index = 0; index < queue.length && !found; index++) {
+        const { file, name } = queue[index]
+        const itemKey = `${file}\0${name}`
+        if (seen.has(itemKey)) continue
+        seen.add(itemKey)
+        const module = modules.get(file)!
+        const target = module.exports.get(name)
+        const next = module.exports.has(name) ? (target ? [target] : []) :
+          (name === 'default' ? [] : module.stars.map(source => ({ source, name })))
+        for (const ref of next) {
+          if (isDirectCard(ref)) { found = true; break }
+          if (ref === true) continue
+          const dependency = resolveLocal(file, ref.source)
+          if (dependency) queue.push({ file: dependency, name: ref.name })
+        }
+      }
+      resolved.set(key, found)
+      return found
+    }
+    const depends = files.some(file => modules.get(file)!.uses.some(ref => isCard(file, ref)))
+    return { depends, files, directories }
+  }
+}

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,
+      };
+    },
+  };
+}