feat(useChangeCase)!: migrate to change-case@v5, closes #3457 (#3460)

wheatjs · antfu · web-flow · commit df343afdfe2e · 2024-06-12T11:56:20.000Z
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/integrations/package.json b/packages/integrations/package.json
@@ -95,7 +95,7 @@
   "peerDependencies": {
     "async-validator": "^4",
     "axios": "^1",
-    "change-case": "^4",
+    "change-case": "^5",
     "drauu": "^0.3",
     "focus-trap": "^7",
     "fuse.js": "^7",
@@ -155,7 +155,7 @@
     "@types/sortablejs": "^1.15.8",
     "async-validator": "^4.2.5",
     "axios": "^1.7.2",
-    "change-case": "^4.1.2",
+    "change-case": "^5.3.0",
     "drauu": "^0.3.7",
     "focus-trap": "^7.5.4",
     "fuse.js": "^7.0.0",
diff --git a/packages/integrations/useChangeCase/changeCase.ts b/packages/integrations/useChangeCase/changeCase.ts
diff --git a/packages/integrations/useChangeCase/demo.vue b/packages/integrations/useChangeCase/demo.vue
@@ -1,32 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, shallowReadonly } from 'vue-demi'
+import { ref } from 'vue-demi'
+import * as ChangeCase from 'change-case'
 import { useChangeCase } from '.'
 import type { ChangeCaseType } from '.'
 
-const arr: Array<ChangeCaseType> = [
-  'camelCase',
-  'capitalCase',
-  'constantCase',
-  'dotCase',
-  'headerCase',
-  'noCase',
-  'paramCase',
-  'pascalCase',
-  'pathCase',
-  'sentenceCase',
-  'snakeCase',
-]
-const types = shallowReadonly(arr)
+const transforms: any = Object.keys(ChangeCase).filter(v => v.endsWith('Case'))
 const input = ref('helloWorld')
-const type = ref<ChangeCaseType>(arr[0])
-const changeCase = computed(() => {
-  return useChangeCase(input, type.value)
-})
+const type = ref<ChangeCaseType>(transforms[0])
+const changeCase = useChangeCase(input, type)
 </script>
 
 <template>
   <div>
-    <label v-for="item in types" :key="item" class="radio">
+    <label v-for="item in transforms" :key="item" class="radio">
       <input v-model="type" :value="item" type="radio">
       <span>{{ item }}</span>
     </label>
@@ -35,9 +21,6 @@ const changeCase = computed(() => {
   <pre lang="yaml">{{ changeCase }}</pre>
 </template>
 
-<style scoped>
-</style>
-
 <style scoped lang="postcss">
 input {
   --tw-ring-offset-width: 1px !important;
@@ -46,7 +29,7 @@ input {
 }
 
 .radio {
-  width: 7rem;
+  width: 9rem;
   @apply ml-2;
   @apply inline-flex items-center my-auto cursor-pointer select-none;
 }
diff --git a/packages/integrations/useChangeCase/index.md b/packages/integrations/useChangeCase/index.md
@@ -11,7 +11,7 @@ Subsitutes `useCamelCase`, `usePascalCase`, `useSnakeCase`, `useSentenceCase`, `
 ## Install
 
 ```bash
-npm i change-case@^4
+npm i change-case@^5
 ```
 
 ## Usage
diff --git a/packages/integrations/useChangeCase/index.test.ts b/packages/integrations/useChangeCase/index.test.ts
@@ -33,7 +33,7 @@ describe('useChangeCase', () => {
       delimiterHelloWorld: 'hello-world',
       delimiterVueuse: 'vue-use',
     },
-    headerCase: {
+    trainCase: {
       helloWorld: 'Hello-World',
       vueuse: 'Vue-Use',
       delimiterHelloWorld: 'Hello-World',
@@ -45,7 +45,7 @@ describe('useChangeCase', () => {
       delimiterHelloWorld: 'hello-world',
       delimiterVueuse: 'vue-use',
     },
-    paramCase: {
+    kebabCase: {
       helloWorld: 'hello-world',
       vueuse: 'vue-use',
       delimiterHelloWorld: 'hello-world',
@@ -57,6 +57,12 @@ describe('useChangeCase', () => {
       delimiterHelloWorld: 'Hello-World',
       delimiterVueuse: 'Vue-Use',
     },
+    pascalSnakeCase: {
+      helloWorld: 'Hello_World',
+      vueuse: 'Vue_Use',
+      delimiterHelloWorld: 'Hello-World',
+      delimiterVueuse: 'Vue-Use',
+    },
     pathCase: {
       helloWorld: 'hello/world',
       vueuse: 'vue/use',
diff --git a/packages/integrations/useChangeCase/index.ts b/packages/integrations/useChangeCase/index.ts
@@ -3,26 +3,43 @@ import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
 import type { ComputedRef, WritableComputedRef } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
-import * as changeCase from './changeCase'
+import * as changeCase from 'change-case'
 
-export type ChangeCaseType = keyof typeof changeCase
+type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
+type FilterKeys<T> = { [K in keyof T as K extends string ? K : never]: EndsWithCase<K> }
+type ChangeCaseKeys = FilterKeys<typeof changeCase>
 
-export function useChangeCase(input: MaybeRef<string>, type: ChangeCaseType, options?: Options | undefined): WritableComputedRef<string>
-export function useChangeCase(input: MaybeRefOrGetter<string>, type: ChangeCaseType, options?: Options | undefined): ComputedRef<string>
+export type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys]
+
+const changeCaseTransforms: any = /* @__PURE__ */ Object.values(changeCase)
+  .filter(v => typeof v === 'function' && v.name.endsWith('Case')).reduce((acc, fn) => {
+    acc[fn.name] = fn
+    return acc
+  }, {} as any)
+
+export function useChangeCase(input: MaybeRef<string>, type: MaybeRefOrGetter<ChangeCaseType>, options?: MaybeRefOrGetter<Options> | undefined): WritableComputedRef<string>
+export function useChangeCase(input: MaybeRefOrGetter<string>, type: MaybeRefOrGetter<ChangeCaseType>, options?: MaybeRefOrGetter<Options> | undefined): ComputedRef<string>
 
 /**
  * Reactive wrapper for `change-case`
  *
  * @see https://vueuse.org/useChangeCase
  */
-export function useChangeCase(input: MaybeRefOrGetter<string>, type: ChangeCaseType, options?: Options | undefined) {
+export function useChangeCase(input: MaybeRefOrGetter<string>, type: MaybeRefOrGetter<ChangeCaseType>, options?: MaybeRefOrGetter<Options> | undefined) {
+  const typeRef = computed(() => {
+    const t = toValue(type)
+    if (!changeCaseTransforms[t])
+      throw new Error(`Invalid change case type "${t}"`)
+    return t
+  })
+
   if (typeof input === 'function')
-    return computed(() => changeCase[type](toValue(input), options))
+    return computed(() => changeCaseTransforms[typeRef.value](toValue(input), toValue(options)))
 
   const text = ref(input)
   return computed<string>({
     get() {
-      return changeCase[type](text.value, options)
+      return changeCaseTransforms[typeRef.value](text.value, toValue(options))
     },
     set(value) {
       text.value = value
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
