test: counter

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

@@ -2,16 +2,35 @@
 
 exports[`basic 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-import { template } from 'vue/vapor'
-const t0 = template(\`<h1 id=\\"title\\">Counter</h1>\`)
+import { watchEffect } from 'vue'
+import { template, setAttr, setText, children, on, insert } from 'vue/vapor'
+const t0 = template(\`<h1 id=\\"title\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button>\`)
+import { ref, computed } from 'vue'
+
 
 export default /*#__PURE__*/_defineComponent({
   setup(__props) {
 
-console.log('script')
+const count = ref(0)
+const double = computed(() => count.value * 2)
+
+const increment = () => count.value++
 
 return (() => {
 const root = t0()
+const n1 = document.createTextNode(count.value)
+insert(n1, n0)
+const n3 = document.createTextNode(double.value)
+insert(n3, n2)
+watchEffect(() => {
+setText(n1, undefined, count.value)
+})
+watchEffect(() => {
+setText(n3, undefined, double.value)
+})
+watchEffect(() => {
+on(n4, \\"click\\", increment)
+})
 return root
 })();
 }

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

@@ -8,7 +8,7 @@ test('basic', async () => {
   const script = compileScript(descriptor, {
     id: 'counter.vue',
     inlineTemplate: true,
-    templateOptions: { compiler: CompilerVapor }
+    templateOptions: { compiler: CompilerVapor },
   })
   expect(script.content).matchSnapshot()
 })

packages/compiler-vapor/__tests__/fixtures/counter.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
-console.log('script')
+import { ref, computed } from 'vue'
+
+const count = ref(0)
+const double = computed(() => count.value * 2)
+
+const increment = () => count.value++
 </script>
 
 <template>
   <h1 id="title">Counter</h1>
+  <p>Count: {{ count }}</p>
+  <p>Double: {{ double }}</p>
+  <button @click="increment">Increment</button>
 </template>

packages/compiler-vapor/src/compile.ts

@@ -2,7 +2,7 @@ import {
   CodegenResult,
   CompilerOptions,
   RootNode,
-  baseParse
+  baseParse,
 } from '@vue/compiler-dom'
 import { isString } from '@vue/shared'
 import { transform } from './transform'
@@ -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)

packages/compiler-vapor/src/transform.ts

@@ -198,8 +198,6 @@ export function transform(
   ctx.registerTemplate()
   ir.children = ctx.children
 
-  console.log(JSON.stringify(ir, undefined, 2))
-
   return ir
 }