Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update migration codemods #1285

Merged
merged 3 commits into from
Sep 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/Callout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const activeType = computed(() => {
class="text-sm rounded-xl border px-6 py-4 [&_p]:mb-0 my-4"
:class="activeType.class"
>
<div class="flex items-center gap-2 font-semibold">
<div class="flex items-center gap-2 font-semibold mb-4">
<Icon
class="text-lg"
:icon="activeType.icon"
Expand Down
1 change: 0 additions & 1 deletion docs/components/examples/ComboboxTextarea/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const users = [
{ value: '@folz', listValue: 'folz' },
{ value: '@Slapbox', listValue: 'Slapbox' },
{ value: '@jyash97', listValue: 'jyash97' },
{ value: '@k-sav', listValue: 'k-sav' },
{ value: '@AliLynne', listValue: 'AliLynne' },
{ value: '@DaniGuardiola', listValue: 'DaniGuardiola' },
{ value: '@frassinier', listValue: 'frassinier' },
Expand Down
88 changes: 50 additions & 38 deletions docs/content/docs/guides/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,23 @@ Congratulation! 🎉 Now that you've installed the above package, let's perform

#### Codemods

To assist with the upgrade from radix-vue to Reka UI, we have added features that utilize codemods to automatically update your code to many of the new updates and patterns. Run the following command to automatically update your code for RekaUI migration:
To assist with the upgrade from Radix Vue to Reka UI, we collaborated with the [Codemod](https://github.com/codemod-com/codemod) team to automatically update your code to many of the new updates and patterns with [open-source codemods](https://go.codemod.com/reka-codemods). You can run the following command to automatically migrate to Reka UI:

> **Note**: Codemod for this Change:
>
> ```bash
> npx codemod reka-ui-v2/migration-recipe
> ```
<Callout type="tip" title="Migration recipe">

```bash
npx codemod reka-ui/migration-recipe
```

</Callout>

These will run the following codemods from the radix-vue Codemod repository:
The [migration recipe](https://go.codemod.com/reka-recipe) will run the following codemods from the radix-vue Codemod repository:

- **Remove filter-function props**
- **Rename controlled state to v-model**
- **Remove deprecated step prop**
- [`reka-ui/import-update`](https://go.codemod.com/reka-import-update)
- [`reka-ui/update-css-and-data-attributes`](https://go.codemod.com/reka-update-css-data)
- [`reka-ui/update-combobox-filter`](https://go.codemod.com/update-combobox-filter)
- [`reka-ui/rename-controlled-state`](https://go.codemod.com/rename-controlled-state)
- [`reka-ui/remove-calendar-step-prop`](https://go.codemod.com/remove-calendar-step-prop)

## Import Statement Changes

Expand All @@ -45,11 +48,13 @@ import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui' // [!code +
</script>
```

> **Note**: Codemod for this Change:
>
> ```bash
> npx codemod rekaUI-v2/radix-vue-1-reka-ui-import-update
> ```
<Callout type="tip" title="Codemod available">

```bash
npx codemod reka-ui/import-update
```

</Callout>

## Naming Convention Changes

Expand All @@ -63,11 +68,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
[data-reka-collection-item] {} // [!code ++]
```

> **Note**: Codemod for this Change:
>
> ```bash
> npx codemod rekaUI-v2/radix-to-reka-css-and-data-attribute-replacement
> ```
<Callout type="tip" title="Codemod available">

```bash
npx codemod reka-ui/update-css-and-data-attributes
```

</Callout>

## Component Breaking Changes

Expand All @@ -81,11 +88,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
</template>
```

> **Note**: Codemod for this Change:
>
> ```bash
> npx codemod rekaUI-v2/combobox-root-to-combobox-input
> ```
<Callout type="tip" title="Codemod available">

```bash
npx codemod reka-ui/update-combobox-filter
```

</Callout>

- [Replace `searchTerm` props of Root to Input's `v-model`](https://github.com/radix-vue/radix-vue/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
- [Move `displayValue` props from Root to Input](https://github.com/radix-vue/radix-vue/commit/e1bab6598c3533dfbf6a86ad26b471ab826df069#diff-833593a5ce28a8c3fabc7d77462b116405e25df2b93bcab449798b5799e73474)
Expand All @@ -94,9 +103,8 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
<template>
<ComboboxRoot v-model:searchTerm="search" :display-value="(v) => v.name" /> // [!code --]
<ComboboxRoot>
// [!code ++]
<ComboboxInput v-model="search" :display-value="(v) => v.name" /> // [!code ++]
</ComboboxRoot> // [!code ++]
</ComboboxRoot>
</template>
```

Expand All @@ -115,11 +123,13 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
</template>
```

> **Note**: Codemod for this Change:
>
> ```bash
> npx codemod rekaUI-v2/searchTerm-props-of-Root-to-Input's-v-model
> ```
<Callout type="tip" title="Codemod available">

```bash
npx codemod reka-ui/rename-controlled-state
```

</Callout>

- [Reposition `VisuallyHidden`](https://github.com/radix-vue/radix-vue/commit/107389a9c230d2c94232887b9cbe2710222564aa) - Previously `VisuallyHidden` were position at the root node, causing style scoped to not be applied.

Expand Down Expand Up @@ -155,15 +165,17 @@ CSS variable and data attributes names have been updated to use the `reka` prefi
</template>
```

> **Note**: Codemod for this Change:
>
> ```bash
> npx codemod rekaUI-v2/add-script-setup-and-update-calendar-components
> ```
<Callout type="tip" title="Codemod available">

```bash
npx codemod reka-ui/remove-calendar-step-prop
```

</Callout>

### Select

- [`SelectValue` no longer render teleported element](https://github.com/radix-vue/radix-vue/commit/6a623484d610cc3b7c1a23a77c253c8e95cef518) - Previous implmenentation of `SelectValue` will render the selected `SelectItem` via teleporting fragment. This causes SSR flickering, and it is unncessarily computation.
- [`SelectValue` no longer render teleported element](https://github.com/radix-vue/radix-vue/commit/6a623484d610cc3b7c1a23a77c253c8e95cef518) - Previous implmenentation of `SelectValue` will render the selected `SelectItem` via teleporting fragment. This causes SSR flickering, and it is unnecessarily computation.

```vue
<template>
Expand Down
Loading