refactor(volar): use muggle-string utils (#238)

.changeset/honest-comics-teach.md

@@ -0,0 +1,5 @@
+---
+'@vue-macros/volar': minor
+---
+
+use muggle-string utils

.github/workflows/unit-test.yml

@@ -31,6 +31,12 @@ jobs:
       - name: Install
         run: nci
 
+      - name: Build
+        run: nr build
+        env:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: sxzz
+
       - name: Lint
         run: nr lint
 
@@ -46,10 +52,6 @@ jobs:
 
     runs-on: ${{ matrix.os }}
 
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: sxzz
-
     steps:
       - uses: actions/checkout@v3
 
@@ -69,6 +71,9 @@ jobs:
 
       - name: Build
         run: nr build
+        env:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: sxzz
 
       - name: Unit Test
         run: nr test

package.json

@@ -22,7 +22,8 @@
     "publish": "pnpm build && changeset publish",
     "typecheck": "run-p \"typecheck:*\"",
     "typecheck:lib": "tsc --noEmit -p tsconfig.lib.json",
-    "typecheck:test": "tsc --noEmit -p tsconfig.test.json"
+    "typecheck:test": "tsc --noEmit -p tsconfig.test.json",
+    "typecheck:fixture": "vue-tsc --noEmit -p tsconfig.fixture.json"
   },
   "devDependencies": {
     "@babel/types": "^7.20.7",
@@ -35,6 +36,7 @@
     "@vitest/coverage-c8": "^0.28.1",
     "@vitest/ui": "^0.28.1",
     "@vue-macros/test-utils": "workspace:*",
+    "@vue-macros/volar": "workspace:*",
     "eslint": "^8.32.0",
     "eslint-define-config": "^1.14.0",
     "expect-type": "^0.15.0",
@@ -48,6 +50,7 @@
     "vite": "^4.0.4",
     "vitest": "^0.28.1",
     "vue": "^3.2.45",
+    "vue-tsc": "^1.0.24",
     "vue2": "npm:vue@^2.7.14",
     "webpack": "^5.75.0"
   },

packages/api/tests/fixtures/circular-referencing/bar.ts

@@ -1,5 +1,7 @@
 export * from './foo'
 export type Bar = 'bar'
 
+// @ts-expect-error
 export type A = B
+// @ts-expect-error
 export type B = A

packages/better-define/tests/fixtures/optional-method.vue

@@ -2,6 +2,7 @@
 defineProps<{
   onClick?(): void
   onSubmit(): void
+  // @ts-expect-error
   onSubmit?(): void
 }>()
 </script>

packages/define-model/tests/__snapshots__/fixtures.test.ts.snap

@@ -286,8 +286,8 @@ const emit = defineEmits<{(evt: 'input', value: string): void
 }>()
 
 {
-  value = 'hello'
-  title = 'world'
+  value.value = 'hello'
+  title.value = 'world'
   emit('change')
 
   {
@@ -323,8 +323,8 @@ const emit = defineEmits<{(evt: 'changeInput', value: string): void
 }>()
 
 {
-  value = 'hello'
-  title = 'world'
+  value.value = 'hello'
+  title.value = 'world'
   emit('change')
 
   {
@@ -361,8 +361,8 @@ const emit = defineEmits<{(evt: 'changeInput', value: string): void
 }>()
 
 {
-  value = 'hello'
-  title = 'world'
+  value.value = 'hello'
+  title.value = 'world'
   emit('change')
 
   {

packages/define-model/tests/fixtures/runtime/vue2/basic.vue

@@ -11,8 +11,8 @@ const emit = defineEmits<{
 }>()
 
 {
-  value = 'hello'
-  title = 'world'
+  value.value = 'hello'
+  title.value = 'world'
   emit('change')
 
   {

packages/define-model/tests/fixtures/runtime/vue2/custom-model-defineComponent.vue

@@ -20,8 +20,8 @@ const emit = defineEmits<{
 }>()
 
 {
-  value = 'hello'
-  title = 'world'
+  value.value = 'hello'
+  title.value = 'world'
   emit('change')
 
   {

packages/define-model/tests/fixtures/runtime/vue2/custom-model.vue

@@ -19,8 +19,8 @@ const emit = defineEmits<{
 }>()
 
 {
-  value = 'hello'
-  title = 'world'
+  value.value = 'hello'
+  title.value = 'world'
   emit('change')
 
   {

packages/define-render/tests/fixtures/without-fn.vue

@@ -1,3 +1,4 @@
 <script setup lang="tsx">
+// @ts-nocheck
 defineRender(<div>Hello</div>)
 </script>

packages/export-props/tests/__snapshots__/fixtures.test.ts.snap

@@ -12,10 +12,8 @@ const { foo = 'foo', bar = 10, baz, qux = fn(), } = defineProps<{
 
 
 
-</script>
 
-<template>
-  <div></div>
-</template>
+function fn() {}
+</script>
 "
 `;

packages/export-props/tests/fixtures/basic.vue

@@ -3,8 +3,6 @@ export const foo: string = 'foo'
 export const bar = 10
 export let baz: string | undefined
 export var qux = fn()
-</script>
 
-<template>
-  <div></div>
-</template>
+function fn() {}
+</script>

packages/nuxt/src/index.ts

@@ -1,5 +1,4 @@
 import { defineNuxtModule } from '@nuxt/kit'
-// @ts-ignore error when no bundle (CI typecheck)
 import VueMacros from 'unplugin-vue-macros/vite'
 import { transformShortVmodel } from '@vue-macros/short-vmodel'
 import type { Options } from 'unplugin-vue-macros'

packages/volar/package.json

@@ -30,20 +30,8 @@
     "*.js"
   ],
   "exports": {
-    "./define-model": {
-      "require": "./define-model.js"
-    },
-    "./define-slots": {
-      "require": "./define-slots.js"
-    },
-    "./export-props": {
-      "require": "./export-props.js"
-    },
-    "./short-vmodel": {
-      "require": "./short-vmodel.js"
-    },
-    "./define-props": {
-      "require": "./define-props.js"
+    "./*": {
+      "require": "./dist/*.js"
     }
   },
   "scripts": {

packages/volar/src/common.ts

@@ -1,5 +1,6 @@
-import type { FileRangeCapabilities } from '@volar/language-core'
+import { replace } from 'muggle-string'
 import type { Segment } from 'muggle-string'
+import type { FileRangeCapabilities } from '@volar/language-core'
 
 export function getVueLibraryName(vueVersion: number) {
   return vueVersion < 2.7 ? '@vue/runtime-dom' : 'vue'
@@ -10,13 +11,35 @@ export function addProps(
   decl: Segment<FileRangeCapabilities>[],
   vueLibName: string
 ) {
-  const idx = content.indexOf('setup() {\n')
-  if (idx === -1) return false
-  content.splice(idx, 0, ...['props: ({} as ', ...decl, '),\n'])
-
+  replace(
+    content,
+    /setup\(\) {/,
+    'setup() {\n',
+    'props: ({} as ',
+    ...decl,
+    '),'
+  )
   content.push(
     `type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;\n`,
     `type __VLS_TypePropsToRuntimeProps<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? { type: import('${vueLibName}').PropType<__VLS_NonUndefinedable<T[K]>> } : { type: import('${vueLibName}').PropType<T[K]>, required: true } };\n`
   )
   return true
 }
+
+export function addEmits(
+  content: Segment<FileRangeCapabilities>[],
+  decl: Segment<FileRangeCapabilities>[]
+) {
+  const idx = content.indexOf('setup() {\n')
+  if (idx === -1) return false
+
+  replace(
+    content,
+    /setup\(\) {/,
+    'setup() {\n',
+    'emits: ({} as ',
+    ...decl,
+    '),'
+  )
+  return true
+}

packages/volar/src/define-model.ts

@@ -1,7 +1,6 @@
 import { DEFINE_MODEL, DEFINE_MODEL_DOLLAR } from '@vue-macros/common'
 import { FileKind, FileRangeCapabilities } from '@volar/language-core'
-import { addProps, getVueLibraryName } from './common'
-import type { FileCapabilities } from '@volar/language-core'
+import { addEmits, addProps, getVueLibraryName } from './common'
 import type { Segment } from 'muggle-string'
 import type {
   Sfc,
@@ -36,7 +35,7 @@ function transformDefineModel({
       ['__VLS_TypePropsToRuntimeProps<__VLS_ModelToProps<', seg, '>>'],
       vueLibName
     )
-  mergeEmits() || addEmits()
+  mergeEmits() || addEmits(codes, ['__VLS_ModelToEmits<', seg, '>'])
 
   codes.push(
     `type __VLS_GetPropKey<K> = K extends 'modelValue'${
@@ -68,19 +67,6 @@ function transformDefineModel({
     codes.splice(idx + 2, 1, '>> & __VLS_ModelToEmits<', seg, '>),\n')
     return true
   }
-
-  function addEmits() {
-    const idx = codes.indexOf('setup() {\n')
-    if (idx === -1) return false
-
-    const segs: Segment<FileCapabilities>[] = [
-      'emits: ({} as __VLS_ModelToEmits<',
-      seg,
-      '>),\n',
-    ]
-    codes.splice(idx, 0, ...segs)
-    return true
-  }
 }
 
 function getTypeArg(
@@ -137,8 +123,7 @@ function resolve({
   const vueVersion = vueCompilerOptions.target
   const vueLibName = getVueLibraryName(vueVersion)
   const unified =
-    (vueVersion < 3 && (vueCompilerOptions as any)?.defineModel?.unified) ??
-    true
+    (vueVersion < 3 && vueCompilerOptions?.defineModel?.unified) ?? true
 
   transformDefineModel({
     codes: embeddedFile.content,
@@ -166,4 +151,4 @@ const plugin: VueLanguagePlugin = ({
     },
   }
 }
-export default plugin
+export = plugin

packages/volar/src/define-props.ts

@@ -9,4 +9,4 @@ const plugin: VueLanguagePlugin = ({ vueCompilerOptions }) => {
   }
 }
 
-export default plugin
+export = plugin

packages/volar/src/define-slots.ts

@@ -17,13 +17,16 @@ const transform = ({
   sfc: Sfc
 }) => {
   if (embeddedFile.kind !== FileKind.TypeScriptHostFile) return
-  if (!toString(embeddedFile.content).includes(DEFINE_SLOTS)) return
-
-  if (!embeddedFile.content.includes('return __VLS_slots;\n')) return
+  const textContent = toString(embeddedFile.content)
+  if (
+    !textContent.includes(DEFINE_SLOTS) ||
+    !textContent.includes('return __VLS_slots')
+  )
+    return
 
   replace(
     embeddedFile.content,
-    'return __VLS_slots;\n',
+    'return __VLS_slots',
     `return __VLS_slots as __VLS_DefineSlots<`,
     () => [
       // slots type
@@ -32,7 +35,7 @@ const transform = ({
       typeArg!.pos,
       FileRangeCapabilities.full,
     ],
-    '>;\n'
+    '>'
   )
   embeddedFile.content.push(
     `type __VLS_DefineSlots<T> = { [SlotName in keyof T]: (_: T[SlotName]) => any }`
@@ -79,4 +82,4 @@ const plugin: VueLanguagePlugin = ({ modules: { typescript: ts } }) => {
   }
 }
 
-export default plugin
+export = plugin