fix: compiler doens't report vineProp mixed with formal param

tomoriny · Nov 1, 2024 · e6064e2 · e6064e2
1 parent f61af7f
commit e6064e2
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "build:eslint-parser": "cross-env NODE_ENV=production pnpm --filter @vue-vine/eslint-parser run build",
     "build:main": "cross-env NODE_ENV=production pnpm --filter vue-vine run build",
     "build:ls": "pnpm --filter @vue-vine/compiler --filter @vue-vine/language-service --filter @vue-vine/language-server --filter vue-vine-tsc run build",
-    "build:ext": "pnpm run build:ls && pnpm --filter vue-vine-extension run build",
+    "build:ext": "pnpm run build:compiler && pnpm run build:ls && pnpm --filter vue-vine-extension run build",
     "test": "esno scripts/run-test.js",
     "test:compiler": "pnpm --filter @vue-vine/compiler run test",
     "test:e2e": "pnpm --filter @vue-vine/e2e-test run test",

diff --git a/packages/compiler/src/analyze.ts b/packages/compiler/src/analyze.ts
@@ -375,16 +375,21 @@ const analyzeVineProps: AnalyzeRunner = (
     // its type is `identifier`, and it must have an object literal type annotation.
     // Save this parameter's name as `propsAlias`
     const propsFormalParam = formalParams[0] as Identifier
-    const propsTypeAnnotation = (propsFormalParam.typeAnnotation as TSTypeAnnotation).typeAnnotation as TSTypeLiteral
+    const propsTypeAnnotation = (propsFormalParam.typeAnnotation as TSTypeAnnotation)?.typeAnnotation as TSTypeLiteral | undefined
+    if (!propsTypeAnnotation) {
+      return
+    }
+
+    vineCompFnCtx.propsFormalParam = propsTypeAnnotation
     vineCompFnCtx.propsAlias = propsFormalParam.name;
     // Analyze the object literal type annotation
     // and save the props info into `vineCompFnCtx.props`
     (propsTypeAnnotation.members as TSPropertySignature[])?.forEach((member) => {
-      if (!isIdentifier(member.key)) {
+      if (!isIdentifier(member.key) || !member.typeAnnotation) {
         return
       }
       const propName = member.key.name
-      const propType = vineFileCtx.getAstNodeContent(member.typeAnnotation!.typeAnnotation)
+      const propType = vineFileCtx.getAstNodeContent(member.typeAnnotation.typeAnnotation)
       const propMeta: VinePropMeta = {
         isFromMacroDefine: false,
         isRequired: member.optional === undefined ? true : !member.optional,

diff --git a/packages/compiler/src/types.ts b/packages/compiler/src/types.ts
@@ -174,6 +174,7 @@ export interface VineCompFnCtx {
   propsAlias: string
   props: Record<string, VinePropMeta>
   propsDefinitionBy: 'annotaion' | 'macro'
+  propsFormalParam?: TSTypeLiteral
   emitsAlias: string
   emits: string[]
   emitsTypeParam?: TSTypeLiteral

diff --git a/packages/compiler/src/validate.ts b/packages/compiler/src/validate.ts
@@ -1181,13 +1181,27 @@ function validatePropsForSingelFC(
       isCheckFormalParamsPropPass = false
     }
 
-    if (!isCheckFormalParamsPropPass) {
-      // Still check if there're maybe some invalid `vineProp` macro call
-      // that should be reported
-      isCheckVinePropMacroCallPass()
-      return false
-    }
-    return isCheckVinePropMacroCallPass()
+    // Still check if there're maybe some invalid `vineProp` macro call
+    // that should be reported, we don't allow two defintion styles to be used together
+    _breakableTraverse(
+      vineCompFnDecl,
+      (node) => {
+        if (isVineProp(node)) {
+          vineCompilerHooks.onError(
+            vineErr(
+              { vineFileCtx },
+              {
+                msg: '`vineProp` macro calls is not allowed when props with props formal parameter defined',
+                location: node.loc,
+              },
+            ),
+          )
+          isCheckFormalParamsPropPass = false
+        }
+      },
+    )
+
+    return isCheckFormalParamsPropPass
   }
   vineCompilerHooks.onError(
     vineErr(

diff --git a/packages/compiler/tests/validate.spec.ts b/packages/compiler/tests/validate.spec.ts
@@ -237,9 +237,9 @@ function App() {
           "If you're defining a Vine component function's props with formal parameter, it must be one and only identifier",
           "Vine component function's props type annotation must be an object literal",
           "Vine component function's props type annotation must be an object literal",
-          "\`vineProp\` macro call must have a type parameter to specify the prop's type",
-          "\`vineProp.withDefault\` macro call must have at least 1 argument",
-          "\`vineProp.optional\` macro call must have a type parameter to specify the prop's type",
+          "\`vineProp\` macro calls is not allowed when props with props formal parameter defined",
+          "\`vineProp\` macro calls is not allowed when props with props formal parameter defined",
+          "\`vineProp\` macro calls is not allowed when props with props formal parameter defined",
         ]
       `)
   })

diff --git a/packages/language-service/src/index.ts b/packages/language-service/src/index.ts
@@ -80,7 +80,11 @@ export function createVueVineLanguagePlugin(
     },
     createVirtualCode(uriOrFileName, langaugeId, snapshot) {
       const moduleId = String(uriOrFileName)
-      if (moduleId.endsWith('.vine.ts') && langaugeId === 'typescript') {
+      if (
+        moduleId.endsWith('.vine.ts')
+        && !moduleId.includes('volar_virtual_code')
+        && langaugeId === 'typescript'
+      ) {
         if (vineActiveModuleId !== moduleId) {
           vinePerfMonitorLogger.reset()
           vineActiveModuleId = moduleId
@@ -208,33 +212,19 @@ function createVueVineCode(
       tsCodeSegments.push(propsParam)
 
       // Generate `context: { ... }` after `props: ...`
-      const contextProperties: string[] = []
-
-      const slotsParam = `slots: { ${vineCompFn.slotsNamesInTemplate.map((slot) => {
-        const slotPropTypeLiteralNode = vineCompFn.slots[slot]?.props
-        return `${slot}: ${
-          slotPropTypeLiteralNode
-            ? `(props: ${vineFileCtx.getAstNodeContent(slotPropTypeLiteralNode)}) => any`
-            : 'unknown'
-        }`
-      }).join(', ')} },`
-      contextProperties.push(slotsParam)
-
-      const emitsParam = `emit: ${
-        vineCompFn.emitsTypeParam
-          ? `VueDefineEmits<${
-            vineFileCtx.getAstNodeContent(vineCompFn.emitsTypeParam)
-          }>`
-          : `{ ${vineCompFn.emits.map(emit => `${emit}: (...args: any[]) => boolean`)} }`
-      },`
-      contextProperties.push(emitsParam)
-
-      const contextFormalParam = `\n  context: {\n${' '.repeat(4)}${contextProperties.join(`\n${' '.repeat(4)}`)}\n  }\n`
-      tsCodeSegments.push(contextFormalParam)
+      tsCodeSegments.push(generateContextFormalParam(vineCompFn))
     }
     else {
       // User provide a `props` formal parameter in the component function,
-      // we should keep it in virtual code, and generate `context: ...` after it.
+      // we should keep it in virtual code, and generate `context: ...` after it,
+      const formalParamNode = vineCompFn.propsFormalParam!
+      generateScriptUntil(formalParamNode.end!)
+
+      // Generate `context: { ... }` after `props: ...`
+      tsCodeSegments.push(`, ${generateContextFormalParam(vineCompFn, {
+        tabNum: 2,
+        lineWrapAtStart: false,
+      })}`)
     }
 
     // Need to extract all complex expression in `vineProp.withDefault`
@@ -400,6 +390,44 @@ function createVueVineCode(
     currentOffset = targetOffset
   }
 
+  function generateContextFormalParam(
+    vineCompFn: ReturnType<typeof compileVineForVirtualCode>['vineFileCtx']['vineCompFns'][number],
+    {
+      tabNum = 4,
+      lineWrapAtStart = true,
+    }: {
+      tabNum?: number
+      lineWrapAtStart?: boolean
+    } = {},
+  ) {
+    // Generate `context: { ... }` after `props: ...`
+    const contextProperties: string[] = []
+
+    const slotsParam = `slots: { ${vineCompFn.slotsNamesInTemplate.map((slot) => {
+      const slotPropTypeLiteralNode = vineCompFn.slots[slot]?.props
+      return `${slot}: ${
+        slotPropTypeLiteralNode
+          ? `(props: ${vineFileCtx.getAstNodeContent(slotPropTypeLiteralNode)}) => any`
+          : 'unknown'
+      }`
+    }).join(', ')} },`
+    contextProperties.push(slotsParam)
+
+    const emitsParam = `emit: ${
+      vineCompFn.emitsTypeParam
+        ? `VueDefineEmits<${
+          vineFileCtx.getAstNodeContent(vineCompFn.emitsTypeParam)
+        }>`
+        : `{ ${vineCompFn.emits.map(emit => `${emit}: (...args: any[]) => boolean`)} }`
+    },`
+    contextProperties.push(emitsParam)
+
+    const contextFormalParam = `${lineWrapAtStart ? `\n` : ''}  context: {\n${
+      ' '.repeat(tabNum)}${contextProperties.join(`\n${' '.repeat(tabNum)}`)
+    }\n  }\n`
+    return contextFormalParam
+  }
+
   function* createStyleEmbeddedCodes(): Generator<VirtualCode> {
     for (const styleDefines of Object.values(
       vineFileCtx.styleDefine,

diff --git a/packages/playground/src/pages/about.vine.ts b/packages/playground/src/pages/about.vine.ts
@@ -1,7 +1,9 @@
 import { PageHeader } from '../components/page-header.vine'
 
-function TestSlotContainer() {
-  const fizz = vineProp<string>()
+function TestSlotContainer(props: {
+  fizz: string
+}) {
+  // const fizz = vineProp<string>()
   vineEmits<{ emitCamel: [bar: string] }>()
   vineSlots<{ slotCamel(props: { foo: number }): any }>()