test: add unit tests for directives

packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap

@@ -13,9 +13,101 @@ return root
 }"
 `;
 
+exports[`comile > directives > v-bind > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setAttr } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setAttr(n0, \\"id\\", undefined, id.value)
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-html > no expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setHtml } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setHtml(n0, undefined, \\"\\")
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-html > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setHtml } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setHtml(n0, undefined, code.value)
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-on > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, on } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+on(n0, \\"click\\", handleClick)
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-once 1`] = `
+"import { template, children, insert, setText, setAttr } from 'vue/vapor'
+const t0 = template(\`<div> <span></span></div>\`)
+export function render() {
+const root = t0()
+const { 1: [n2],} = children(root)
+const n1 = document.createTextNode(msg.value)
+insert(n1, n0, 0 /* InsertPosition.FIRST */)
+setText(n1, undefined, msg.value)
+setAttr(n2, \\"class\\", undefined, clz.value)
+return root
+}"
+`;
+
+exports[`comile > directives > v-text > no expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setText } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setText(n0, undefined, \\"\\")
+})
+return root
+}"
+`;
+
+exports[`comile > directives > v-text > simple expression 1`] = `
+"import { watchEffect } from 'vue'
+import { template, setText } from 'vue/vapor'
+const t0 = template(\`<div></div>\`)
+export function render() {
+const root = t0()
+watchEffect(() => {
+setText(n0, undefined, str.value)
+})
+return root
+}"
+`;
+
 exports[`comile > static template 1`] = `
 "import { template } from 'vue/vapor'
-const t0 = template(\`<div><p>hello</p><input></div>\`)
+const t0 = template(\`<div><p>hello</p><input><span></span></div>\`)
 export function render() {
 const root = t0()
 return root

packages/compiler-vapor/__tests__/compile.test.ts

@@ -2,23 +2,95 @@ import { BindingTypes } from '@vue/compiler-dom'
 import { compile } from '../src'
 
 describe('comile', () => {
-  it('static template', () => {
+  test('static template', () => {
     const { code } = compile(
       `<div>
         <p>hello</p>
         <input />
+        <span />
       </div>`,
-      {},
     )
     expect(code).matchSnapshot()
   })
 
-  it('bindings', () => {
+  test('bindings', () => {
     const { code } = compile(`<div>{{ count }}</div>`, {
       bindingMetadata: {
         count: BindingTypes.SETUP_REF,
       },
     })
     expect(code).matchSnapshot()
   })
+
+  describe('directives', () => {
+    describe('v-bind', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div :id="id"></div>`, {
+          bindingMetadata: {
+            id: BindingTypes.SETUP_REF,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+    })
+
+    describe('v-on', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div @click="handleClick"></div>`, {
+          bindingMetadata: {
+            handleClick: BindingTypes.SETUP_CONST,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+    })
+
+    describe('v-html', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div v-html="code"></div>`, {
+          bindingMetadata: {
+            code: BindingTypes.SETUP_REF,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+
+      test('no expression', () => {
+        const { code } = compile(`<div v-html></div>`)
+        expect(code).matchSnapshot()
+      })
+    })
+
+    describe('v-text', () => {
+      test('simple expression', () => {
+        const { code } = compile(`<div v-text="str"></div>`, {
+          bindingMetadata: {
+            str: BindingTypes.SETUP_REF,
+          },
+        })
+        expect(code).matchSnapshot()
+      })
+
+      test('no expression', () => {
+        const { code } = compile(`<div v-text></div>`)
+        expect(code).matchSnapshot()
+      })
+    })
+
+    test('v-once', () => {
+      const { code } = compile(
+        `<div v-once>
+          {{ msg }}
+          <span :class="clz" />
+        </div>`,
+        {
+          bindingMetadata: {
+            msg: BindingTypes.SETUP_REF,
+            clz: BindingTypes.SETUP_REF,
+          },
+        },
+      )
+      expect(code).matchSnapshot()
+    })
+  })
 })

packages/compiler-vapor/src/compile.ts

@@ -11,7 +11,7 @@ import { generate } from './generate'
 // code/AST -> IR -> JS codegen
 export function compile(
   template: string | RootNode,
-  options: CompilerOptions,
+  options: CompilerOptions = {},
 ): CodegenResult {
   const ast = isString(template) ? baseParse(template, options) : template
   const ir = transform(ast, options)