feat: add directive support

Author: xiaoxiangmoe

src/core/parseSFC.ts

@@ -1,15 +1,39 @@
 import { Parser as HTMLParser, ParserOptions as HTMLParserOptions } from 'htmlparser2'
 import type { ParserOptions } from '@babel/parser'
-import { camelize, capitalize, isHTMLTag, isSVGTag, isVoidTag } from '@vue/shared'
+import { isHTMLTag, isSVGTag, isVoidTag } from '@vue/shared'
 import { ParsedSFC, ScriptSetupTransformOptions, ScriptTagMeta } from '../types'
 import { getIdentifierUsages } from './identifiers'
 import { parse } from './babel'
+import { pascalize } from './utils'
 
 const multilineCommentsRE = /\/\*\s(.|[\r\n])*?\*\//gm
 const singlelineCommentsRE = /\/\/\s.*/g
 
+const BUILD_IN_DIRECTIVES = new Set([
+  'if',
+  'else',
+  'else-if',
+  'for',
+  'once',
+  'model',
+  'on',
+  'bind',
+  'slot',
+  'slot-scope',
+  'key',
+  'ref',
+  'text',
+  'html',
+  'show',
+  'pre',
+  'cloak',
+  // 'el',
+  // 'ref',
+])
+
 export function parseSFC(code: string, id?: string, options?: ScriptSetupTransformOptions): ParsedSFC {
   const components = new Set<string>()
+  const directives = new Set<string>()
   const expressions = new Set<string>()
   const identifiers = new Set<string>()
 
@@ -52,7 +76,7 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
 
   function handleTemplateContent(name: string, attributes: Record<string, string>) {
     if (!isHTMLTag(name) && !isSVGTag(name) && !isVoidTag(name))
-      components.add(capitalize(camelize(name)))
+      components.add(pascalize((name)))
 
     Object.entries(attributes).forEach(([key, value]) => {
       if (!value)
@@ -64,6 +88,11 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
         else
           expressions.add(`(${value})`)
       }
+      if (key.startsWith('v-')) {
+        const directiveName = key.slice('v-'.length)
+        if (!BUILD_IN_DIRECTIVES.has(directiveName))
+          directives.add(`v${pascalize(directiveName)}`)
+      }
       if (key === 'ref')
         identifiers.add(value)
     })
@@ -183,6 +212,7 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
     id,
     template: {
       components,
+      directives,
       identifiers,
     },
     scriptSetup,

src/core/transformScriptSetup.ts

@@ -1,11 +1,11 @@
-import { camelize, capitalize } from '@vue/shared'
 import type { Node, ObjectExpression, Statement } from '@babel/types'
 import generate from '@babel/generator'
 import { partition } from '@antfu/utils'
 import { ParsedSFC, ScriptSetupTransformOptions } from '../types'
 import { applyMacros } from './macros'
 import { getIdentifierDeclarations } from './identifiers'
 import { t } from './babel'
+import { isNotNil, pascalize, uncapitalize } from './utils'
 
 function isAsyncImport(node: any) {
   if (node.type === 'VariableDeclaration') {
@@ -35,22 +35,24 @@ export function transformScriptSetup(sfc: ParsedSFC, options?: ScriptSetupTransf
   const declarations = new Set<string>()
   getIdentifierDeclarations(hoisted, declarations)
   getIdentifierDeclarations(setupBody, declarations)
+  const declarationArray = Array.from(declarations).filter(isNotNil)
 
   // filter out identifiers that are used in `<template>`
-  const returns: ObjectExpression['properties'] = Array.from(declarations)
-    .filter(Boolean)
+  const returns: ObjectExpression['properties'] = declarationArray
     .filter(i => template.identifiers.has(i))
     .map((i) => {
       const id = t.identifier(i)
       return t.objectProperty(id, id, false, true)
     })
 
-  const components = Array.from(declarations)
-    .filter(Boolean)
-    .filter(i => template.components.has(i)
-      || template.components.has(camelize(i))
-      || template.components.has(capitalize(camelize(i))),
-    )
+  const components = Array.from(template.components).map(component =>
+    declarationArray.find(declare => declare === component)
+    ?? declarationArray.find(declare => pascalize(declare) === component),
+  ).filter(isNotNil)
+
+  const directives = Array.from(template.directives).map(directive =>
+    declarationArray.find(declare => declare === directive),
+  ).filter(isNotNil)
 
   // append `<script setup>` imports to `<script>`
 
@@ -160,6 +162,41 @@ export function transformScriptSetup(sfc: ParsedSFC, options?: ScriptSetupTransf
     )
   }
 
+  // inject directives
+  // `__sfc_main.directives = Object.assign({ ... }, __sfc_main.directives)`
+  if (directives.length) {
+    hasBody = true
+    const directivesObject = t.objectExpression(
+      directives.map((i) => {
+        // fooBar
+        const keyName = uncapitalize(i.slice(1))
+        // vFooBar
+        const valueName = i
+        return t.objectProperty(
+          t.identifier(keyName),
+          t.identifier(valueName),
+          false,
+          false,
+        )
+      }),
+    )
+
+    ast.body.push(
+      t.expressionStatement(
+        t.assignmentExpression('=',
+          t.memberExpression(__sfc, t.identifier('directives')),
+          t.callExpression(
+            t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+            [
+              directivesObject,
+              t.memberExpression(__sfc, t.identifier('directives')),
+            ],
+          ),
+        ),
+      ) as any,
+    )
+  }
+
   if (!hasBody && !options?.astTransforms) {
     return {
       ast: null,

src/core/utils.ts

@@ -0,0 +1,7 @@
+import { camelize, capitalize } from '@vue/shared'
+
+export const pascalize = (str: string) => capitalize(camelize(str))
+
+export const uncapitalize = (str: string) => (str[0]?.toLowerCase() ?? '') + str.slice(1)
+
+export const isNotNil = <T>(value: T): value is NonNullable<T> => value != null

src/types.ts

@@ -18,6 +18,7 @@ export interface ParsedSFC {
   id?: string
   template: {
     components: Set<string>
+    directives: Set<string>
     identifiers: Set<string>
   }
   scriptSetup: ScriptTagMeta

test/__snapshots__/transform.test.ts.snap

@@ -180,6 +180,40 @@ export default __sfc_main;
 "
 `;
 
+exports[`transform fixtures test/fixtures/ComponentsDirectives.vue 1`] = `
+"<template>
+  <div>
+    <FooView ref=\\"fooView\\" v-foo-bar=\\"a\\"></FooView>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { ref } from '@vue/runtime-dom';
+import FooView from './FooView.vue';
+import { vFooBar } from './foo-bar-directive';
+const __sfc_main = {};
+
+__sfc_main.setup = (__props, __ctx) => {
+  const fooView = ref<null | InstanceType<typeof FooView>>(null);
+  const a = ref(1);
+  return {
+    fooView,
+    a
+  };
+};
+
+__sfc_main.components = Object.assign({
+  FooView
+}, __sfc_main.components);
+__sfc_main.directives = Object.assign({
+  fooBar: vFooBar
+}, __sfc_main.directives);
+export default __sfc_main;
+</script>
+"
+`;
+
 exports[`transform fixtures test/fixtures/DynamicStyle.vue 1`] = `
 "<template>
   <div :style=\\"{ color, border: '1px' }\\" />

test/fixtures/ComponentsDirectives.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <FooView ref="fooView" v-foo-bar="a"></FooView>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from '@vue/runtime-dom'
+import FooView from './FooView.vue'
+import { vFooBar } from './foo-bar-directive'
+
+const fooView = ref<null | InstanceType<typeof FooView>>(null)
+const a = ref(1)
+</script>