[codemod][FP/FN] nuxt/4/migration-recipe

[baixiaoyu2997]

Issue Description

Select one of:
[x] Generated codemod is not correct
[ ] Bug in Codemod Studio
[ ] UI/UX improvement request
[ ] Feature request

use nuxt/4/shallow-function-reactivity@1.0.3
code from :

const {
    data: continuousKLinesData,
    status: originDataStatus,
    execute,
  } = useAsyncData(() => getContinuousKLines(symbol.value, interval.value), {
    immediate: false,
    default: () => [] satisfies Array<WSContinuousKLineDataK>,
    watch: [symbol, interval],
  })

change to:

const {
    data: continuousKLinesData,
    status: originDataStatus,
    execute,
// issue here, `.params.slug`
  } = useAsyncData(.params.slug, () => getContinuousKLines(symbol.value, interval.value), {
    immediate: false,
    default: () => [] satisfies Array<WSContinuousKLineDataK>,
    watch: [symbol, interval],
  })

Source

import dayjs from 'dayjs'
import type { LWChartDataItem } from '#layers/chart/components/LWChart.vue'
import type { UTCTimestamp } from 'lightweight-charts'
import type { WSContinuousKLineDataK } from '~/apis/binance-ws'
import { getContinuousKLines } from '~/apis/binace'
import type { ContinuousKLinesItem } from '~/apis/binace'

export function useKLineChart(options: { symbol: Ref<string>; interval: Ref<string> }) {
  const { symbol, interval } = toRefs(options)
  const allOriginData = ref<Array<WSContinuousKLineDataK>>([])

  const {
    data: continuousKLinesData,
    status: originDataStatus,
    execute,
  } = useAsyncData(() => getContinuousKLines(symbol.value, interval.value), {
    immediate: false,
    default: () => [] satisfies Array<WSContinuousKLineDataK>,
    watch: [symbol, interval],
  })
  const originData = computed(() => {
    return continuousKLinesData.value.map(formatContinuousKLinesToWSData)
  })
  const initChartData = computed(() => {
    return originData.value.map(formatKToChartData)
  })

  watch(
    originDataStatus,
    (status) => {
      if (status === 'success' && originData.value.length > 0) {
        allOriginData.value = originData.value
      }
    },
    {
      immediate: true,
    },
  )

  onBeforeMount(() => {
    execute()
  })

  return {
    allOriginData,
    originData,
    originDataStatus,
    initChartData,
    getInitChartData: execute,
  }
}

export const formatKToChartData = (item: WSContinuousKLineDataK) => {
  return {
    time: dayjs(item.T).unix() as UTCTimestamp,
    open: Number(item.o),
    high: Number(item.h),
    low: Number(item.l),
    close: Number(item.c),
  } satisfies LWChartDataItem<'Candlestick'>
}
export const formatContinuousKLinesToWSData = (item: ContinuousKLinesItem) => {
  return {
    t: item[0],
    T: item[6],
    i: '', // not used
    f: 0, // not used
    L: 0, // not used
    o: item[1],
    c: item[4],
    h: item[2],
    l: item[3],
    v: item[5],
    n: item[8],
    x: false, // not used
    q: item[7],
    V: item[9],
    Q: item[10],
  }
}

Technical details

---

• Operating System: Darwin
• Node Version: v22.14.0
• Nuxt Version: 3.17.7
• CLI Version: 3.25.1
• Nitro Version: 2.11.13
• Package Manager: pnpm@10.11.0
• Builder: -
• User Config: compatibilityDate, future, css, components, modules, runtimeConfig, imports, vite, ssr, ignore
• Runtime Modules: @nuxt/eslint@1.5.2, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, @pinia/nuxt@0.11.1
• Build Modules: -

---

[alexbit-codemod]

thanks for reporting the issue. quick question, how did you get to this page for opening an issue in this repo? was it through npx codemod@latest feedback?

we're no longer using this repo for codemod issues, so we need to track down and update any places still pointing folks here.

[baixiaoyu2997]

oh, ok, the link: https://nuxt.com/docs/4.x/getting-started/upgrade#migrating-using-codemods

and i'm trying use npx codemod@latest feedback, still jump to this page:

npx codemod@latest -v
0.18.7

1. go https://go.codemod.com/feedback
2. then redirect to https://github.com/codemod-com/codemod/issues/new/choose

[alexbit-codemod]

Noted. Thanks.

[mohab-sameh]

Hi @baixiaoyu2997 thanks a lot for reporting this issue!

You are correct, the codemod currently prepends .params.slug as a key to useAsyncData even when there is no variable assigned to useRoute(). This results in invalid code, as seen in your example.

Root cause:
The codemod tries to find a variable assigned to useRoute() (e.g., const route = useRoute();) and, if found, uses route.params.slug as a unique key for useAsyncData. If it doesn’t find such a variable, it should skip this transformation. However, due to a bug, it prepends .params.slug even when no variable is found.

What should happen: If there is no variable assigned to useRoute(), the codemod should not add a key, or should at least warn the user.

Workaround:

• You can manually add a unique key to your useAsyncData call if needed, or ensure you have a const route = useRoute(); in scope.

Since these are community codemods, we would appreciate it if you could contribute to improving them. I opened a PR (#71), which may fix the reported issue. If you're able to test and confirm that the bug is not reproducible and no regressions have been introduced, please let me know.

Thank you for helping us improve Nuxt codemods!