This is the 9th day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

Recently, I tried to migrate Vue2 project to Vue3. During the migration process, I found that the original code used a lot of slot instructions, such as slot = ‘XXX’ and slot-scope = ‘XXX’ directly on the component. Every time I migrated a page, there was a lot of similar code to be refactored. Slot and slot-scope are obsolete in version 2.6.0. The new v-slot directive replaces them with the v-bind v-on syntax. Slot and slot-scope are completely unavailable in Vue3.

Since the project version is 2.6.+, you can use the V-slot directive and search the project for thousands of slots and slot-scopes. So we decided to take some time out of global refactoring to save some costs for subsequent migrations. The following describes the V-slot directive and the refactoring process.

v-slot

For those familiar with template engine languages such as Jinja, slot stands for slot, a reserved area in a template that can be reimplemented and replaced by pages that implement the template.

In Vue, slots can be used as the reserved area of the child component. Slots implemented in the parent component can access the variables of the reserved area of the child component.

For v-slot instructions, the following rules apply:

  1. V-slot cannot be used on HTML tags such as div, SPAN and P. It can only be used on templates or components. Otherwise, vUE will report an error.

  2. When v-slot is used on a component, there is a

    <component #slotProps>	
    <template v-slot:child></template>
</component>
Copy the code

  3. Vue also generates an error when using v-slot with the old slot and slot-scope syntax because the old syntax was deprecated in Vue3;

  5. If there are multiple V-slots, only the first one is valid and the others are ignored.

refactoring

Jscodeshift can be quite efficient and accurate, but you can’t master jscodeshift quite well. So we decided to use the re to replace code such as

with
.

The steps are disassembled as follows:

  1. Identify the corresponding label;

  2. Add the template V-slot tag;

  3. Remove the original slot labels.

The concrete implementation is as follows:

  1. Open vscode global search;

  2. Since there are basically several components with slot attributes in the project, each batch is processed: < XXX.? slot=”(.?) “.? / /? >[\n]+([\s\S])? <\/xxx>=>

    $0


  3. =>

  4. Repeat this for each component such as div and SPAN;

Refactoring slot tags with regex is not easy. Vscode also has a pit where when a file has two or more tags that contain slots, the second and subsequent tags are replaced with the value of the first slot. It is possible that the results of the write cannot be synchronized in time, so files with two or more slots need to be processed separately, i.e. one by one (CTRL + Shift +1). The conclusion is that regular scripts can be reasonably used for regular replacement to reduce the boredom caused by repeated operations. For more efficient refactoring methods, please leave a comment in the comments section.

Thank you for reading

Happy coding

reference

v-slot directive should be used properly

Slots