Upgrade Ant Design Vue Has Fix

• Playground Link

Description

ast-grep can be used to upgrade Vue template using the HTML parser.

This rule is an example to upgrade one breaking change in Ant Design Vue from v3 to v4, unifying the controlled visible API of the component popup.

It is designed to identify and replace the visible attribute with the open attribute for specific components like a-modal and a-tooltip. Note the rule should not replace other visible attributes that are not related to the component popup like a-tag.

The rule can be broken down into the following steps:

1. Find the target attribute name by kind and regex
2. Find the attribute's enclosing element using inside, and get its tag name
3. Ensure the tag name is related to popup components, using constraints

YAML

id: upgrade-ant-design-vue
language: HTML
utils:
  inside-tag:
    # find the enclosing element of the attribute
    inside:
      kind: element
      stopBy: { kind: element } # only the closest element
      # find the tag name and store it in metavar
      has:
        stopBy: { kind: tag_name }
        kind: tag_name
        pattern: $TAG_NAME
rule:
  # find the target attribute_name
  kind: attribute_name
  regex: :visible
  # find the element
  matches: inside-tag
# ensure it only matches modal/tooltip but not tag
constraints:
  TAG_NAME:
    regex: a-modal|a-tooltip
fix: :open

Example

<template>
  <a-modal :visible="visible">content</a-modal>
  <a-tooltip :visible="visible" />
  <a-tag :visible="visible">tag</a-tag>
</template>

Diff

<template>
  <a-modal :visible="visible">content</a-modal> // [!code --]
  <a-modal :open="visible">content</a-modal> // [!code ++]
  <a-tooltip :visible="visible" /> // [!code --]
  <a-tooltip :open="visible" /> // [!code ++]
  <a-tag :visible="visible">tag</a-tag>
</template>

Contributed by

Inspired by Vue.js RFC