跨平台UI组件前端移动开发【免费下载链接】ValdiValdi is a cross-platform UI framework that delivers native performance without sacrificing developer velocity.项目地址https://gitcode.com/gh_mirrors/val/Valdi点击查看免费下载导读Valdi 是跨平台 UI 框架一个真实项目中多个模块经常各自实现形态几乎相同的按钮封装、加载态容器和骨架屏组件。本文讲解 Valdi CLI 提供的valdi analyze duplicates组件去重分析能力它如何扫描模块、识别已知重复模式与相似组件簇以及如何按一套可复用的六步工作流把重复组件提取进共享组件库shared library最终用valdi agent-check验证改动。读完本文你将掌握去重分析的完整命令面、报告解读方法以及 Async State Container、Button Preset、Shimmer Layout 三类高频重复模式的共享化改造方案。一、为什么需要组件去重Valdi 的项目通常由多个模块module组成每个模块通过valdi_module规则见 bzl/valdi/valdi_module.bzl独立构建。模块自治带来的副作用是同一份 UI 逻辑经常被不同模块各自重新实现一遍——A 模块写了一个带 loading/error 切换的容器B 模块又写了一个几乎一样的C 模块把共享按钮包了一层并写死尺寸颜色D 模块也照做。valdi analyze duplicates正是为这类场景设计定位多个模块各自独立实现的重复组件把它们提取到共享库让后续模块直接复用而不是重新发明。其命令入口定义在 npm_modules/cli/src/commands/analyze.ts子命令duplicates的完整实现位于 npm_modules/cli/src/commands/analyze_commands/duplicates.ts。二、运行分析命令与参数在项目根目录执行以下命令即可开始扫描# 全量扫描所有模块 valdi analyze duplicates # 只扫描单个模块 valdi analyze duplicates --module my_module # 输出机器可读 JSON valdi analyze duplicates --json # 只检测某一种已知模式 valdi analyze duplicates --pattern async # 自定义扫描根目录与共享组件库 valdi analyze duplicates --scan-root src/modules --shared-lib valdi_widgets valdi analyze duplicates --scan-root src/modules --shared-lib my_shared_lib --shared-lib another_libCLI 参数一览Flag效果源码中的补充说明--module name只扫描单个模块类型 string扫描时按模块名过滤.tsx文件--json机器可读 JSON 输出别名-j默认 false输出完整AnalysisReport--threshold 0-1相似度阈值默认 0.6别名-t默认0.6低于阈值的组件对不会被聚簇--pattern name只检测某一种模式async、button、shimmer源码中为choices: [async, button, shimmer]非法值会被 CLI 拒绝--output path把 JSON 报告写入文件别名-o即使未开启--json也会把报告写入该路径--verbose输出显示每个文件的明细别名-v人类可读报告中会展示更多文件与共享 import 细节--scan-root path扫描根目录可重复传入不传时自动探测见下文--shared-lib name共享组件库名称可重复传入不传时内部默认为coreui外部默认为valdi_widgets说明上表中的补充说明来自 duplicates.ts 中 yargs 的builder定义与 skill 文档一致且提供了文档未列出的别名-j、-t、-o、-v与choices约束。扫描配置的自动探测不传--scan-root时扫描器按以下优先级自动决定扫描范围实现见 npm_modules/cli/src/core/analyze/scanner.ts如果存在src/composer_modules/src/composer内部仓库布局扫描该目录共享库默认coreui否则若存在src目录扫描src共享库默认valdi_widgets否则回退到整个当前工作目录。--shared-lib指定的共享库会按四种方式定位扫描根下的直接子目录、工作区同级目录含多种命名变体如valdi_widgets/Valdi_widgets/valdi-widgets/valdiWidgets、Bazel 外部依赖目录bazel-workspace/external/*name*、以及node_modules。扫描时会自动跳过node_modules、.git、bazel-out并排除*.spec.tsx、*.test.tsx以及位于test/__tests__目录下的文件确保分析对象是真实业务组件。三、理解分析报告分析流程分四步对应 duplicates.ts 的analyzeDuplicates发现.tsx文件 → 指纹化组件 → 检测已知模式 → 聚簇相似组件。人类可读报告由 npm_modules/cli/src/core/analyze/reporter.ts 渲染报告包含两个核心部分。Known Patterns已知模式内置了针对最常见重复的预置检测器实现在 npm_modules/cli/src/core/analyze/knownPatterns.tsAsync State Container实现了 loading→error/content 状态机的组件。检测依据是指纹中的hasLoadingState标记命中数量 ≥3 时触发≥15 为 MEDIUM≥50 为 HIGH。若已存在名为AsyncContentContainer/AsyncStateContainer的共享实现报告中会列出这些existingImplementations并建议合并。Button Wrapper薄封装共享按钮、写死尺寸与颜色的组件。检测条件为导入了CoreButton/PillButton且渲染元素不超过 5 个、类名含button命中 ≥5 触发≥10 为 MEDIUM≥30 为 HIGH。Shimmer / Skeleton Layout自定义加载占位组件。检测依据是AnimationShimmer的使用标记或类名包含shimmer/skeleton命中 ≥3 触发≥8 为 MEDIUM≥20 为 HIGH。每个已知模式在报告中都会给出严重度HIGH / MEDIUM / LOW、命中数量、涉及文件列表与具体改造建议recommendation并按严重度从高到低排序。Similar Clusters相似组件簇除去已知模式外通用相似度分析会找出在 ViewModel 属性、渲染树、import 签名上存在重叠的组件组。聚类逻辑实现在 npm_modules/cli/src/core/analyze/clusterer.ts先按共享库 import 集合分桶没有共享 import 的组件再按渲染签名onRender 中的原生元素集合分桶桶内跨模块两两计算相似度同一模块内的组件不比较达到--threshold默认 0.6的组件对用单链接single-linkage合并算法聚成簇只保留成员 ≥2 的簇按成员数降序排列。相似度本身是三个维度的加权平均实现见 npm_modules/cli/src/core/analyze/similarity.tssimilarity 0.40 × ViewModel 属性 Jaccard 相似度 0.35 × 渲染元素序列 LCS 比率 0.25 × import 路径 Jaccard 相似度每个簇展示的信息文件数量与平均相似度avgSimilarity0~1 归一化后四舍五入到千分位簇内所有成员共有的 ViewModel 属性sharedViewModelProps取交集建议的提取方案suggestedExtraction——例如成员全部带 loading 状态时建议提取 async state container共享属性 ≥3 时建议提取有状态组件等逻辑见 clusterer.ts 的suggestExtraction。报告摘要与 JSON 输出人类可读报告末尾会输出 Summary已知模式命中总数、相似簇数量、重复文件总数默认最多展示前 10 个簇其余可用--verbose查看全部。--json或--output输出的则是完整的AnalysisReport结构定义在 npm_modules/cli/src/core/analyze/fingerprint.ts包含timestamp 报告生成时间ISO 8601 config 扫描根与共享库配置 scanStats 扫描文件数、模块数、耗时ms knownPatterns 已知模式命中列表 genericClusters 相似簇列表 summary 总簇数、重复文件总数、已知模式命中总数该 JSON 结构是后续保存基线 → 提取后复测对比的基础也是供 Agent / CI 脚本消费的稳定契约。四、提取工作流六步把重复组件收编进共享库找到值得提取的簇之后按以下步骤执行。第 1 步阅读候选组件逐个阅读簇内文件从中识别三样东西共享的 ViewModel 属性成为新组件 ViewModel 的基础共享的渲染结构成为新组件onRender的主体各模块特有的差异变成可选属性或渲染回调render callback。第 2 步先查共享库中是否有可扩展的现成组件在创建任何新组件之前先在共享库里搜索是否已有组件解决了部分问题。很多时候正确做法是给现有组件加属性、预设枚举或渲染回调而不是从零新建。# 在共享库中搜索相关组件 grep -rl Button\|Shimmer\|AsyncContent your-shared-lib/src/components/如果现有组件已覆盖 70% 以上的使用场景就扩展它为缺失行为添加可选属性optional props如果消费者只是需要不同的默认组合添加预设preset或变体枚举variant enum如果消费者需要注入自定义 UI添加渲染回调槽位render callback slot。只有当共享库中没有任何组件足够接近时才创建新组件。第 3 步设计或扩展共享组件扩展现有组件首选方案——例如给现有按钮组件加预设// 给现有按钮组件添加预设 export enum CoreButtonPreset { PRIMARY_CTA, SECONDARY_ACTION, PILL_ACTION, } // 给现有 ViewModel 添加可选属性 interface CoreButtonViewModel { // ... 既有属性 ... preset?: CoreButtonPreset; }创建新组件当没有可扩展对象时——注意从valdi_core引入基类import { Component } from valdi_core/src/Component; interface SharedComponentViewModel { commonProp: string; optionalVariant?: VariantType; renderCustomSection?: () void; } export class SharedComponent extends ComponentSharedComponentViewModel { onRender(): void { view label value{this.viewModel.commonProp} /; {this.viewModel.renderCustomSection?.()}; /view; } }关于Component基类仓库中的真实实现位于 src/valdi_modules/src/valdi/valdi_core/src/Component.ts它通过构造器注入只读viewModel提供onCreate()、onRender()、registerDisposable()等生命周期与资源管理钩子有状态变体StatefulComponent额外提供setState()、setStateAnimated()等状态更新方法。上面示例中的onRender()、this.viewModel都对应这些真实 API。第 4 步放入共享库如果创建了新组件把它放到项目的共享组件库中例如shared-lib/src/components/category/目录结构与命名遵循项目既有约定。共享库目录会被扫描器的--shared-lib机制识别提取后共享库内的组件不会再被当作重复源计入分析clusterer.ts 与 knownPatterns.ts 都会先用isSharedLibFile过滤共享库文件。第 5 步迁移消费者对簇内的每个文件用共享组件的 import 替换本地组件类把旧 ViewModel 属性映射到新的共享 ViewModel把模块特有的渲染逻辑搬进渲染回调删除旧的本地组件文件运行valdi agent-check --module name验证。第 6 步验证# 重新运行分析——簇应当缩小或消失 valdi analyze duplicates --pattern async # 构建并测试受影响的模块 valdi agent-check --module module_a valdi agent-check --module module_bagent-check的真实行为实现见 npm_modules/cli/src/commands/agentCheck.ts解析模块对应的 Bazel targetvaldi_modulekind→ 构建 → 并行执行 prettier 格式检查与模块测试 → 汇总 pass/fail/skip 结果全部通过返回退出码 0否则退出码 1。它支持--module name/--target target指定范围--quick跳过构建热重载场景--json输出结构化结果是迁移后验证模块健康度的标准手段。五、常见提取模式附完整实现以下三个模式是 Valdi 项目中最常见的重复skill 文档与源码检测器knownPatterns.ts相互印证。Async State Container异步状态容器最常见的重复管理 loading→loaded/error 状态的组件。共享化后由一个泛型容器统一承载import { StatefulComponent } from valdi_core/src/Component; import { promiseToCancelablePromise } from valdi_core/src/CancelablePromise; interface AsyncStateContainerViewModelT { resultProvider: () PromiseLikeT; renderLoading: () void; renderResult: (data: T) void; renderError: (error: string, retry: () void) void; renderEmpty?: () void; } type AsyncStateT { phase: loading } | { phase: result; data: T } | { phase: error; message: string }; export class AsyncStateContainerT extends StatefulComponentAsyncStateContainerViewModelT, { state: AsyncStateT } { state { state: { phase: loading } as AsyncStateT }; onCreate(): void { this.load(); } onRender(): void { const s this.state.state; switch (s.phase) { case loading: this.viewModel.renderLoading(); break; case result: this.viewModel.renderResult(s.data); break; case error: this.viewModel.renderError(s.message, () this.load()); break; } } private load(): void { this.setState({ state: { phase: loading } }); const cancelable promiseToCancelablePromise( Promise.resolve(this.viewModel.resultProvider()), () {}, ); this.registerDisposable(() cancelable.cancel?.()); cancelable.then( data { this.setState({ state: { phase: result, data } }); }, error { this.setState({ state: { phase: error, message: (error as Error).message } }); }, ); } }两个核心依赖都是仓库真实 APIStatefulComponent提供setState与state见 Component.tspromiseToCancelablePromise定义于 src/valdi_modules/src/valdi/valdi_core/src/CancelablePromise.ts把普通 Promise 包装成可取消对象配合registerDisposable在组件销毁时取消在途请求避免卸载后 setState 引发问题。renderEmpty保持可选各模块按需注入空态 UI。Button Presets按钮预设与其让每个模块包一层按钮封装不如给现有共享按钮加预设枚举把尺寸与配色差异收敛为配置// 不再新建 wrapper而是给现有共享按钮加预设 enum ButtonPreset { PRIMARY_CTA, SECONDARY_ACTION, PILL_ACTION, } function presetProps(preset: ButtonPreset): { sizing: ButtonSizing; coloring: ButtonColoring } { switch (preset) { case ButtonPreset.PRIMARY_CTA: return { sizing: ButtonSizing.XL, coloring: ButtonColoring.PRIMARY_BRAND }; case ButtonPreset.SECONDARY_ACTION: return { sizing: ButtonSizing.LARGE, coloring: ButtonColoring.SECONDARY }; case ButtonPreset.PILL_ACTION: return { sizing: ButtonSizing.SMALL, coloring: ButtonColoring.TERTIARY }; } }这与检测器的思路完全对应Button Wrapper 模式的判定就是导入了CoreButton/PillButton且渲染元素 ≤5、类名含 button命中后推荐语明确建议给共享按钮组件添加预设枚举而不是每个模块各写 wrapper。Shimmer Layout骨架屏布局可配置的骨架加载占位组件import { Component } from valdi_core/src/Component; interface ShimmerRow { widthRatio: number; height: number; borderRadius?: number; } interface ShimmerLayoutViewModel { rows: ShimmerRow[]; spacing?: number; } export class ShimmerLayout extends ComponentShimmerLayoutViewModel { onRender(): void { const spacing this.viewModel.spacing ?? 8; view {this.viewModel.rows.forEach((row, i) { AnimationShimmer width{${row.widthRatio * 100}%} height{row.height} borderRadius{row.borderRadius ?? 4} marginTop{i 0 ? spacing : 0} /; })} /view; } }AnimationShimmer是分析器检测 shimmer 模式的关键标记parser.ts 中通过 import 或文本匹配AnimationShimmer设置usesAnimationShimmer标记它属于共享 UI 基础设施中的动画组件这里作为占位组件的基础元素复用。spacing与borderRadius均带默认值8 / 4保证零配置即可渲染。六、实践建议优先处理严重度最高的已知模式已知模式报告按 HIGH → MEDIUM → LOW 排序HIGH 命中如 Async State Container ≥50 处、Button Wrapper ≥30 处收益最大先做这些先提取最简单的共享接口再迭代处理边界情况不要一开始就追求覆盖所有变体模块特有 UI 用渲染回调承载而不是强行泛化一切renderLoading/renderResult/renderCustomSection这类回调正是为此设计用基线衡量效果提取前运行valdi analyze duplicates --json --output report.json保存基线提取完成后再跑一次同样的命令对比summary.totalClusters、totalDuplicatedFiles、totalKnownPatternMatches三个指标验证收益也可以把该命令接入 CI 防止重复模式回潮。七、相关资源命令定义与参数npm_modules/cli/src/commands/analyze.ts、npm_modules/cli/src/commands/analyze_commands/duplicates.ts扫描与配置探测npm_modules/cli/src/core/analyze/scanner.ts指纹模型与报告结构npm_modules/cli/src/core/analyze/fingerprint.ts解析器TSX 解析、ViewModel/State/render 提取、flags 检测npm_modules/cli/src/core/analyze/parser.ts相似度算法加权 Jaccard LCSnpm_modules/cli/src/core/analyze/similarity.ts聚类与提取建议npm_modules/cli/src/core/analyze/clusterer.ts已知模式检测器npm_modules/cli/src/core/analyze/knownPatterns.ts报告渲染npm_modules/cli/src/core/analyze/reporter.ts组件基类与可取消 Promisesrc/valdi_modules/src/valdi/valdi_core/src/Component.ts、src/valdi_modules/src/valdi/valdi_core/src/CancelablePromise.ts迁移后校验命令npm_modules/cli/src/commands/agentCheck.ts原始技能文档ai-skills/skills/valdi-component-dedup/skill.md赞分享跨平台UI组件前端移动开发【免费下载链接】ValdiValdi is a cross-platform UI framework that delivers native performance without sacrificing developer velocity.项目地址https://gitcode.com/gh_mirrors/val/Valdi点击查看免费下载相关推荐告别重复造轮子Webpack 5模块联邦实现跨应用组件共享告别重复造轮子Webpack 5模块联邦实现跨应用组件共享 在前端开发中你是否遇到过多个项目间重复开发相同组件的困境是否正在寻找一种无需发布npm包即可实示例工程Polar 前端工程中的 SWR 自动去重实践从重复请求到跨组件共享缓存Polar 前端工程中的 SWR 自动去重实践从重复请求到跨组件共享缓存 导读 本文聚焦 Vercel React Best Practices 工程规范中的后端前端金融科技open-agents 客户端数据获取中的 SWR 请求去重实践缓存、重校验与跨组件共享open agents 客户端数据获取中的 SWR 请求去重实践缓存、重校验与跨组件共享 本文基于 open agents 仓库中的最佳实践规则文档 clie人工智能AI Agent代码智能体Agent 工作流Agent 沙箱工具调用后端前端上一篇Android启动镜像深度解析MagiskBoot底层原理与高级定制技术下一篇PIDNet源代码解析从模型定义到训练流程的关键函数详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考