Assess, plan, evolve.
Reusable compiler-aware skills that help coding agents understand, plan, and safely evolve your codebase.
4 packages
Rewrite safe parseInt and Number.parseInt calls on static binary, octal, and hexadecimal strings to equivalent numeric literals.
- javascript
- typescript
- +3
The primary change in imports is replacing radix-vue with reka-ui. ### Before ```ts import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'radix-vue'; ``` ### After ```ts import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui'; ```
- vue
- radix
- +2
When using `NavigationMenuLink` together with `NuxtLink` according to the documentation the menu does not dismiss when clicking on a link. ## Example ### Before ```ts < script lang = "ts" > import type { PrimitiveProps } from '@/Primitive' import { useForwardExpose } from '@/shared' export type NavigationMenuLinkEmits = { /** * Event handler called when the user selects a link (via mouse or keyboard). * * Calling `event.preventDefault` in this handler will prevent the navigation menu from closing when selecting that link. */ select: [payload: MouseEvent] } export interface NavigationMenuLinkProps extends PrimitiveProps { /** Used to identify the link as the currently active page. */ active ? : boolean } < /script> < script setup lang = "ts" > import { nextTick } from 'vue' import { Primitive } from '@/Primitive' import { EVENT_ROOT_CONTENT_DISMISS } from './utils' // const LINK_SELECT = "navigationMenu.linkSelect"; const props = withDefaults(defineProps < NavigationMenuLinkProps > (), { as: 'a', }) const emits = defineEmits < NavigationMenuLinkEmits > () useForwardExpose() async function handleClick(ev: MouseEvent) { emits('select', linkSelectEvent) await nextTick() if (!ev.defaultPrevented && !ev.metaKey) { const rootContentDismissEvent = new CustomEvent( EVENT_ROOT_CONTENT_DISMISS, { bubbles: true, cancelable: true, }, ) ev.target?.dispatchEvent(rootContentDismissEvent) } } < /script> < template > < Primitive: as = "as": data - active = "active ? '' : undefined": aria - current = "active ? 'page' : undefined": as - child = "props.asChild" data - radix - vue - collection - item @click = "handleClick" > < slot / > < /Primitive> < /template> ``` ### After ```ts < script lang = "ts" > import type { PrimitiveProps } from '@/Primitive' import { useForwardExpose } from '@/shared' export type NavigationMenuLinkEmits = { /** * Event handler called when the user selects a link (via mouse or keyboard). * * Calling `event.preventDefault` in this handler will prevent the navigation menu from closing when selecting that link. */ select: [payload: CustomEvent < { originalEvent: Event } > ] } export interface NavigationMenuLinkProps extends PrimitiveProps { /** Used to identify the link as the currently active page. */ active ? : boolean } < /script> < script setup lang = "ts" > import { Primitive } from '@/Primitive' import { EVENT_ROOT_CONTENT_DISMISS, LINK_SELECT } from './utils' const props = withDefaults(defineProps < NavigationMenuLinkProps > (), { as: 'a', }) const emits = defineEmits < NavigationMenuLinkEmits > () useForwardExpose() async function handleClick(ev: MouseEvent) { const linkSelectEvent = new CustomEvent(LINK_SELECT, { bubbles: true, cancelable: true, detail: { originalEvent: ev, }, }) emits('select', linkSelectEvent) if (!linkSelectEvent.defaultPrevented && !ev.metaKey) { const rootContentDismissEvent = new CustomEvent( EVENT_ROOT_CONTENT_DISMISS, { bubbles: true, cancelable: true, }, ) ev.target?.dispatchEvent(rootContentDismissEvent) } } < /script> < template > < Primitive: as = "as": data - active = "active ? '' : undefined": aria - current = "active ? 'page' : undefined": as - child = "props.asChild" data - radix - vue - collection - item @click = "handleClick" > < slot / > < /Primitive> < /template> ```
- radix
- vue
- +5
When floating-ui returned isPositioned=true, radix-vue immediately emitted an event to focus on the selected item in the Select component. However, at this point, the PopperContent element did not yet have the correct transform CSS property set, resulting in the Popper being positioned at coordinates (0, -200%). Credits to the contributor ## Example ### Before ```ts import { watchEffect } from 'vue'; watchEffect(() => {}); ``` ### After ```ts import { watchPostEffect } from 'vue'; watchPostEffect(() => {}); ```
- radix
- vue
- +4
Build your own codemod!
Describe the migration you need and Codemod Agent will create a codemod for you.
Ready to evolve your codebase?
Build tailored, compiler-aware skills to assess, plan, and automate complex codebase changes.