feat: parse normal scripts with defineComponent (#28)

Author: farnabaz

src/types.d.ts

@@ -1,13 +1,14 @@
 export interface ComponentPropType {
-  type: string
+  type: string | string[]
   elementType?: string
+  as?: string | ComponentPropType
 }
 
 export interface ComponentProp {
-    name: string
-    type?: string | ComponentPropType,
-    default?: any
-    required?: boolean,
-    values?: any,
-    description?: string
+  name: string
+  type?: string | ComponentPropType | string[],
+  default?: any
+  required?: boolean,
+  values?: any,
+  description?: string
 }

src/utils/ast.ts

@@ -38,5 +38,68 @@ export function visit (node, test, visitNode) {
     case 'TSTypeLiteral':
       visit(node.members, test, visitNode)
       break
+    case 'ExportDefaultDeclaration':
+      visit(node.declaration, test, visitNode)
+      break
+  }
+}
+
+export function getValue (prop) {
+  if (!prop?.type) {
+    return undefined
+  }
+  if (prop.type.endsWith('Literal')) {
+    return prop.value
+  }
+
+  if (prop.type === 'Identifier') {
+    return prop.name === 'undefined' ? undefined : prop.name
+  }
+
+  if (prop.type === 'TSAsExpression') {
+    return {
+      type: getValue(prop.expression),
+      as: getType(prop.typeAnnotation)
+    }
+  }
+  if (prop.type === 'ArrayExpression') {
+    return prop.elements.map(getValue)
+  }
+
+  if (prop.type === 'ObjectExpression') {
+    return prop.properties.reduce((acc, prop) => {
+      acc[prop.key.name] = getValue(prop.value)
+      return acc
+    }, {})
+  }
+}
+
+export function getType (tsProperty) {
+  const { type, typeName, elementType, typeParameters } = tsProperty.typeAnnotation?.typeAnnotation || tsProperty
+  switch (type) {
+    case 'TSStringKeyword':
+      return 'String'
+    case 'TSNumberKeyword':
+      return 'Number'
+    case 'TSBooleanKeyword':
+      return 'Boolean'
+    case 'TSObjectKeyword':
+      return 'Object'
+    case 'TSTypeReference':
+      if (typeParameters?.params) {
+        if (typeName.name === 'PropType') {
+          return getType(typeParameters.params[0])
+        }
+        return {
+          type: typeName.name,
+          elementType: typeParameters.params.map(type => getType(type))
+        }
+      }
+      return typeName.name
+    case 'TSArrayType':
+      return {
+        type: 'Array',
+        elementType: getType(elementType)
+      }
   }
 }

src/utils/parseComponent.ts

@@ -1,15 +1,22 @@
 import { parse } from '@vue/compiler-sfc'
+import type { ComponentProp } from '../types'
 import { parseSetupScript } from './parseSetupScript'
+import { parseScript } from './parseScript'
 import { parseTemplate } from './parseTemplate'
 
 export function parseComponent (name: string, source: string) {
   // Parse component source
   const { descriptor } = parse(source)
+  let props: ComponentProp[] = []
 
   // Parse script
-  const { props } = descriptor.scriptSetup
-    ? parseSetupScript(name, descriptor)
-    : { props: [] }
+  if (descriptor.scriptSetup) {
+    const setupScrip = parseSetupScript(name, descriptor)
+    props = setupScrip.props
+  } else if (descriptor.script) {
+    const script = parseScript(name, descriptor)
+    props = script.props
+  }
 
   const { slots } = parseTemplate(name, descriptor)
 

src/utils/parseScript.ts

@@ -0,0 +1,38 @@
+import type { SFCDescriptor } from '@vue/compiler-sfc'
+import { compileScript } from '@vue/compiler-sfc'
+import { ComponentProp } from '../types'
+import { getType, getValue, visit } from './ast'
+
+export function parseScript (id: string, descriptor: SFCDescriptor) {
+  const props: ComponentProp[] = []
+  const script = compileScript(descriptor, { id })
+
+  visit(script.scriptAst, node => node.type === 'CallExpression' && node.callee?.name === 'defineComponent', (node) => {
+    const nodeProps = node.arguments?.[0]?.properties?.find(prop => prop.key.name === 'props')
+    if (!nodeProps) {
+      return
+    }
+    const properties = nodeProps.value.properties || []
+    properties.reduce((props, p) => {
+      if (p.type === 'ObjectProperty') {
+        props.push({
+          name: p.key.name,
+          ...getValue(p.value)
+        })
+      }
+      return props
+    }, props)
+    visit(node, n => n.type === 'TSPropertySignature', (property) => {
+      const name = property.key.name
+      props.push({
+        name,
+        required: !property.optional,
+        type: getType(property)
+      })
+    })
+  })
+
+  return {
+    props
+  }
+}

src/utils/parseSetupScript.ts

@@ -1,65 +1,12 @@
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 import { compileScript } from '@vue/compiler-sfc'
 import { ComponentProp } from '../types'
-import { visit } from './ast'
+import { getType, getValue, visit } from './ast'
 
 export function parseSetupScript (id: string, descriptor: SFCDescriptor) {
   const props: ComponentProp[] = []
   const script = compileScript(descriptor, { id })
 
-  function getValue (prop) {
-    if (!prop?.type) {
-      return undefined
-    }
-    if (prop.type.endsWith('Literal')) {
-      return prop.value
-    }
-
-    if (prop.type === 'Identifier') {
-      return prop.name
-    }
-
-    if (prop.type === 'TSAsExpression') {
-      return getType(prop.typeAnnotation)
-    }
-
-    if (prop.type === 'ObjectExpression') {
-      return prop.properties.reduce((acc, prop) => {
-        acc[prop.key.name] = getValue(prop.value)
-        return acc
-      }, {})
-    }
-  }
-  function getType (tsProperty) {
-    const { type, typeName, elementType, typeParameters } = tsProperty.typeAnnotation?.typeAnnotation || tsProperty
-    switch (type) {
-      case 'TSStringKeyword':
-        return 'String'
-      case 'TSNumberKeyword':
-        return 'Number'
-      case 'TSBooleanKeyword':
-        return 'Boolean'
-      case 'TSObjectKeyword':
-        return 'Object'
-      case 'TSTypeReference':
-        if (typeParameters?.params) {
-          if (typeName.name === 'PropType') {
-            return getType(typeParameters.params[0])
-          }
-          return {
-            type: typeName.name,
-            elementType: typeParameters.params.map(type => getType(type))
-          }
-        }
-        return typeName.name
-      case 'TSArrayType':
-        return {
-          type: 'Array',
-          elementType: getType(elementType)
-        }
-    }
-  }
-
   visit(script.scriptSetupAst, node => node.type === 'CallExpression' && node.callee?.name === 'defineProps', (node) => {
     const properties = node.arguments[0]?.properties || []
     properties.reduce((props, p) => {

test/basic-component.test.ts

@@ -58,7 +58,8 @@ describe('Basic Component', async () => {
 
     expect(typedArrayProps.length).toBe(1)
     expect(typedArrayProps[0].name).toBe('typedArrayProps')
-    expect((typedArrayProps[0].type as ComponentPropType).elementType).toBe('String')
+    expect(((typedArrayProps[0].type as ComponentPropType)?.as as ComponentPropType)?.type).toBe('Array')
+    expect(((typedArrayProps[0].type as ComponentPropType)?.as as ComponentPropType)?.elementType).toBe('String')
   })
 
   test('Object', () => {

test/fixtures/basic/components/NormalScript.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { PropType } from 'vue'
+// @ts-ignore
+import { computed, defineComponent, h } from '#imports'
+
+type NuxtImg = string & {
+  light: string
+  dark: string
+}
+
+export default defineComponent({
+  props: {
+    src: {
+      type: [String, Object] as PropType<NuxtImg>,
+      default: null
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: [String, Number],
+      default: undefined
+    },
+    height: {
+      type: [String, Number],
+      default: undefined
+    }
+  },
+  setup (props) {
+    const imgSrc = computed(() => {
+      let src = props.src
+
+      try {
+        src = JSON.parse(src as any)
+      } catch (e) {
+        src = props.src
+      }
+
+      if (typeof src === 'string') { return props.src }
+
+      return src
+    })
+
+    return {
+      imgSrc
+    }
+  },
+  render ({ imgSrc }) {
+    // String as `src`; return a single image
+    if (typeof imgSrc === 'string') {
+      return h('img', { src: imgSrc })
+    }
+
+    // Object as `src`; return a light and dark image if present
+    const nodes: any[] = []
+    if (imgSrc.light) {
+      nodes.push(h('img', { src: imgSrc.light, class: ['dark-img'] }))
+    }
+    if (imgSrc.dark) {
+      nodes.push(h('img', { src: imgSrc.dark, class: ['light-img'] }))
+    }
+
+    return nodes
+  }
+})
+</script>

test/normarl-script.test.ts

@@ -0,0 +1,50 @@
+import fsp from 'fs/promises'
+import { fileURLToPath } from 'url'
+import { test, describe, expect } from 'vitest'
+import { ComponentProp, ComponentPropType } from '../src/types'
+import { parseComponent } from '../src/utils/parseComponent'
+
+describe('Basic Component', async () => {
+  const path = fileURLToPath(new URL('./fixtures/basic/components/NormalScript.vue', import.meta.url))
+  const source = await fsp.readFile(path, { encoding: 'utf-8' })
+  // Parse component source
+  const { props, slots } = parseComponent('NormalScript', source)
+
+  test('slots', () => {
+    expect(slots).toEqual([])
+  })
+
+  test('props', () => {
+    expect(props).toBeDefined()
+    expect(props.length > 0)
+  })
+
+  test('props:src', () => {
+    const prop = props.find(prop => prop.name === 'src') as ComponentProp
+    expect(prop).toBeDefined()
+    expect((prop.type as ComponentPropType)?.type).toEqual(['String', 'Object'])
+    expect((prop.type as ComponentPropType)?.as).toEqual('NuxtImg')
+    expect(prop.default).toEqual(undefined)
+  })
+
+  test('props:alt', () => {
+    const prop = props.find(prop => prop.name === 'alt') as ComponentProp
+    expect(prop).toBeDefined()
+    expect(prop.type).toEqual('String')
+    expect(prop.default).toEqual('')
+  })
+
+  test('props:width', () => {
+    const prop = props.find(prop => prop.name === 'width') as ComponentProp
+    expect(prop).toBeDefined()
+    expect(prop.type).toEqual(['String', 'Number'])
+    expect(prop.default).toEqual(undefined)
+  })
+
+  test('props:height', () => {
+    const prop = props.find(prop => prop.name === 'height') as ComponentProp
+    expect(prop).toBeDefined()
+    expect(prop.type).toEqual(['String', 'Number'])
+    expect(prop.default).toEqual(undefined)
+  })
+})