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
 }