SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsmigrate-v1-to-v2

migrate-v1-to-v2

Frontend & websites

View repository

Updated 10-15 23:23

About this skill

Migrate from v1 to v2 skill

This skill is used to assist users in migrating a project from Wot UI v1 (wot-design-uni) to Wot UI v2 (@wot-ui/ui)。

Complete migration guide:Chinese / English。

Scope of responsibility

  • Scan v1 usage, replace package names/paths, migrate component APIs, migrate the form validation system and built-in icon names, and fix incompatible changes.
  • Not responsible forCreating new business pages or refactoring business logic; only make the minimum necessary compatibility replacements.
  • Not responsible forInstalling dependencies; the user should execute this themselves in the terminal.

First interaction confirmation

Before starting any operation, first confirm the following three points with the user (skip the corresponding question if it can already be inferred from context):

  1. Installation method: npm or uni_modules? (affects import paths and easycom configuration)
  2. Goal：
    • A. Full migration(project not yet upgraded) → execute according to phases one to seven
    • B. Fix errors after upgrade(already upgraded but encountering compile/runtime errors) → first read errors.md to locate the problem
  3. Target platform: H5 / WeChat Mini Program / Alipay Mini Program? (affects style isolation and easycom verification method)

Quick path

Based on the problem described by the user, directly load the corresponding sub-file:

Keyword Sub-file
Error message / compile error / module not found / is not defined / abnormal after upgrade errors.md
Form / Form / schema / zodAdapter / FormRules / validation / required asterisk form.md
Package name / easycom / Volar / vite plugin / internationalization / path replacement / uni_modules infra.md
Sass / theme / Design Token / CSS variables / style overrides / dark mode / ConfigProvider styles.md
Dialog / MessageBox / Empty / StatusTip / Cascader / ColPicker / Keyboard / NumberKeyboard / Button / Tag / Radio / Checkbox / Search / Grid / Fab / Badge / Slider / Tabs / Steps / Swiper / Tooltip / Popover / Collapse / Cell / Input / Textarea / PickerView / ImgCropper / CountTo / Segmented components.md
Icon / icon / wd-icon / icon / iconClass / activeIcon / inactiveIcon / prefixIcon / suffixIcon / empty icon components.md "Icon migration" and icons.json

Core changes quick reference table

Type v1 v2
npm package name wot-design-uni @wot-ui/ui
uni_modules directory wot-design-uni wot-ui
Popup component wd-message-box wd-dialog
Popup Hook useMessage useDialog
Default prompt wd-status-tip wd-empty
Multi-column picker wd-col-picker wd-cascader
Number keyboard wd-number-keyboard wd-keyboard
Form validation rules / FormRules schema / FormSchema
Button variant plain / type="text" / type="icon" variant / icon button
Button danger color type="error" type="danger"
Tag variant plain variant="plain"
Radio/checkbox form shape / inline / cell type / direction / manual combination wd-cell
Search box light style light variant="light"
GridItem click @itemclick @click
Utility function path components/common/util common/util
Built-in icon names v1 icon set Migrate according to icons.json the manual review results in

Migration process

Recommended order: dependency upgrade → path replacement → Form pages → high-impact components → medium- and low-impact components → icons and low-impact properties → styles and themes → regression testing.

After completing each phase, confirm with the user before proceeding to the next phase.

Phase 1: Scanning and Diagnosis

  1. Determine the user's installation method (npm or uni_modules）。

  2. Confirm the project configuration:pages.json easycom、tsconfig.json type declarations, Vite plugin auto-import.

  3. Search for old v1 usage:

    rg "wot-design-uni|wd-message-box|useMessage|wd-status-tip|wd-col-picker|wd-number-keyboard|wd-icon|icon-class|iconClass|active-icon|activeIcon|inactive-icon|inactiveIcon|prefix-icon|prefixIcon|suffix-icon|suffixIcon|@itemclick|shape=|inline|\scell\b|\slight\b|type=\"error\"|type=\"icon\"|type=\"text\"|\splain\b|classPrefix|components/common/util|hide-label|hide-min-max|autoLineWidth|disabled-color|setRoate|useContentSlot|useMoreSlot|\bshow="

  4. If the project has forms, additionally search for:

    rg "wd-form|FormRules|:rules=|rules=|errorType|resetOnChange"

  5. Report the list of findings to the user, sorted by impact level:

    • High impact: Form (structure + validation system), Dialog (formerly MessageBox), ColPicker, NumberKeyboard
    • Medium impact: Button, Tag, Radio/Checkbox, Search, Grid, Fab, built-in icon names
    • Low impact: camelCase prop names, minor prop adjustments for Badge/Slider/Tabs/Steps/Swiper, etc.

Phase 2: Dependency and Path Replacement

See infra.md(package name, easycom, Volar, Vite plugin, internationalization) and styles.md(Sass upgrade). After reading, return toPhase 3to continue.

Phase 3: High-Impact Component Migration

See components.md（MessageBox→Dialog、StatusTip→Empty、ColPicker→Cascader、NumberKeyboard→Keyboard）。

For the Form system, see form.md. After reading, return toPhase 4to continue.

Phase 4: Medium-Impact Component Migration

See components.md(Button, Tag, Radio/Checkbox, Search, Grid, Fab). After reading, return toPhase 5to continue.

Phase 5: Low-Impact Prop and Icon Migration

See components.md(Badge, Slider, Tabs, Steps, Swiper, Tooltip, Popover, Collapse, DatetimePickerView, ImgCropper, CountTo, Segmented, PickerView, icon migration, camelCase prop names). When migrating icons, you must read icons.json, and only replace confirmed mappings; "no corresponding" and dynamically bound items are left for manual decision. After reading, return toPhase 6to continue.

Phase 6: Style and Theme Migration

See styles.md(theme file import, global variable overrides, ConfigProvider, style override priority, dark mode). After reading, proceed toPhase 7regression verification.

Phase 7: Regression Verification

  • Whether H5 and the target mini program platform can compile normally
  • easycom Whether all wd-* components can be resolved correctly
  • Toast、Dialog、Notify Whether functional calls such as these have declared instances in the page
  • Whether form submission, single-field validation, reset, hidden fields, and asynchronous validation work normally
  • Whether the display text and submitted values of selector-type form items are correct
  • Button 's type、variant、round and height meet expectations
  • Tag 's variant has been migrated from plain Migration
  • Radio/Checkbox 's shape、inline、cell has been migrated
  • Search 's light has been migrated to variant="light"
  • GridItem Whether the click event has been migrated from itemclick to click
  • Cell、Input、Textarea Whether the form-related props have been migrated to wd-form-item
  • PickerView、ImgCropper、CountTo Whether instance methods such as these can still be called normally
  • Badge、Slider、Tabs、Steps、Swiper Whether old props such as these have been migrated
  • Dialog Whether click-mask-to-close, Prompt return values, and button configuration meet expectations
  • Whether dark mode, theme variables, and brand color overrides take effect
  • Does the popup layer have a style isolation issue on the mini program side?
  • Do custom override styles still take effect?
  • Are all static built-in icon names handled according to icons.json , and has no global replacement been performed on business strings?
  • "No correspondence", dynamic binding, and iconClass / activeIcon / inactiveIcon / prefixIcon / suffixIcon Have they already been listed separately and manually confirmed?
  • Are the business semantics and visual results of the icons correct, and is the name casing kept accurate?
  • Does the change in icon button height affect the page layout?