feat(volar): support TSNonNullExpression

Author: zhiyuanzmj

src/volar.ts

@@ -77,9 +77,12 @@ function transformReactivityFunction(options: {
       node.range = [node.start, node.end]
     },
     enter(node, parent) {
+      let tsNonNullExpressionEnd = 0
       if (node.type === 'TSNonNullExpression') {
         node = node.expression
+        tsNonNullExpressionEnd = node.end
       }
+
       if (node.type === 'CallExpression') {
         const calleeName = text.slice(node.callee.start, node.callee.end)
         if (calleeName === '$$') {
@@ -171,15 +174,15 @@ function transformReactivityFunction(options: {
             replaceSourceRange(
               codes,
               source,
-              node.end,
-              node.end,
+              tsNonNullExpressionEnd || node.end,
+              tsNonNullExpressionEnd || node.end,
               '\n,',
               ...toRefs.join('\n,'),
               '\n,',
               `${toValuesName} = `,
               parent.id.type === 'ArrayPattern' ? '[' : '{',
-              hasRest ? `...${refName},` : '',
-              ...toValues.join('\n,'),
+              hasRest ? `...${refName}, ` : '',
+              ...toValues.join(', '),
               parent.id.type === 'ArrayPattern' ? ']' : '}',
               '\n,',
               [

tests/__snapshots__/basic.test.ts.snap

@@ -16,7 +16,6 @@ let __MACROS_ref0 = useApi(),
   id1 = toRef(__MACROS_ref0, 'id', 0),
   name = toRef(__MACROS_ref0, 'name'),
   rest1 = createPropsRestProxy(__MACROS_ref0, ['id', 'name']);
-;
 id1.value == 0;
 console.log({
   id1: id1.value,

tests/fixtures/basic.tsx

@@ -9,24 +9,24 @@ function useApi$(defaultName = ref('')) {
   }
 }
 
-let { id: id1 = 0, name, ...rest1 } = $useApi();
-;id1 == 0
+let { id: id1 = 0, name, ...rest1 } = $useApi()!
+id1 == 0
 console.log({
   id1,
   name,
-  rest1
+  rest1,
 })
 useApi$(name)
 
 function useArray$() {
   const foo = $ref(1)
-  const bar = $ref(2) 
-  ;[$$(foo),$$(bar)]
+  const bar = $ref(2)
+  ;[$$(foo), $$(bar)]
   return [foo, bar]
 }
 
 let [foo = 0] = $useArray()
-foo === 1  
+foo === 1
 foo = 1
 
 // @ts-expect-error
@@ -36,14 +36,18 @@ console.log$(name)
 watch$(name, () => {
   let name = 1
   return {
-    name
+    name,
   }
 })
 
 defineExpose$({
   name,
-})    
-const title = $ref<string>('title')  
+})
+const title = $ref<string>('title')
 console.log($$(title))
-const Comp = ({ title }: { title: Ref<string>, foo: string }) => title.value
-export default () => <Comp title$={title} foo={title}>{title}</Comp>
+const Comp = ({ title }: { title: Ref<string>; foo: string }) => title.value
+export default () => (
+  <Comp title$={title} foo={title}>
+    {title}
+  </Comp>
+)