chore: upgrade deps, remove playground demos

benchmark/package.json

@@ -9,13 +9,13 @@
     "start": "node index.js"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@vapor",
+    "@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5",
     "connect": "^3.7.0",
     "sirv": "^2.0.4",
     "vite": "^5.0.12"
   },
   "devDependencies": {
     "@types/connect": "^3.4.38",
-    "terser": "^5.31.6"
+    "terser": "^5.33.0"
   }
 }

playground/package.json

@@ -8,13 +8,13 @@
     "preview": "node ./setup/vite.js preview"
   },
   "dependencies": {
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^11.1.0",
     "vue": "workspace:*"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@0.0.0-alpha.4",
-    "vite": "^5.0.12",
-    "vite-hyper-config": "^0.2.1",
-    "vite-plugin-inspect": "^0.7.42"
+    "@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5",
+    "vite": "catalog:",
+    "vite-hyper-config": "^0.4.0",
+    "vite-plugin-inspect": "^0.8.7"
   }
 }

playground/setup/vite.js

@@ -8,7 +8,7 @@ startVite(
   { plugins: [DevPlugin()] },
   {
     deps: {
-      inline: ['@vue-vapor/vite-plugin-vue'],
+      inline: ['@vitejs/plugin-vue'],
     },
   },
 )

playground/src/.gitignore

@@ -0,0 +1,5 @@
+*
+!.gitignore
+!App.vue
+!main.ts
+!style.css

playground/src/App-root.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue/vapor'
-
-const count = ref(1)
-
-const handleClick = () => {
-  count.value++
-}
-</script>
-
-<template>
-  <button @click="handleClick">
-    {{ count }}
-  </button>
-</template>

playground/src/App.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" vapor>
 import {
   ref,
   computed,

playground/src/components.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import {
-  onBeforeMount,
-  onMounted,
-  onBeforeUnmount,
-  onUnmounted,
-  ref,
-} from 'vue/vapor'
-import SubComp from './sub-comp.vue'
-
-const bar = ref('update')
-const id = ref('id')
-const p = ref<any>({
-  bar,
-  id: 'not id',
-  test: 100,
-})
-
-function update() {
-  bar.value = 'updated'
-  p.value.foo = 'updated foo'
-  p.value.newAttr = 'new attr'
-  id.value = 'updated id'
-}
-
-function update2() {
-  delete p.value.test
-}
-
-onBeforeMount(() => console.log('root: before mount'))
-onMounted(() => console.log('root: mounted'))
-onBeforeUnmount(() => console.log('root: before unmount'))
-onUnmounted(() => console.log('root: unmounted'))
-</script>
-
-<template>
-  <div>
-    root comp
-    <button @click="update">update</button>
-    <button @click="update2">update2</button>
-    <SubComp foo="foo" v-bind="p" :baz="'baz'" :id />
-  </div>
-</template>

playground/src/directive.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { ObjectDirective, FunctionDirective, ref } from '@vue/vapor'
-
-const text = ref('created (overwrite by v-text), ')
-const counter = ref(0)
-const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
-  created(node) {
-    if (!node.parentElement) {
-      node.textContent += 'created, '
-      node.style.color = 'red'
-    } else {
-      alert('!')
-    }
-  },
-  beforeMount(node) {
-    if (!node.parentElement) node.textContent += 'beforeMount, '
-  },
-  mounted(node) {
-    if (node.parentElement) node.textContent += 'mounted, '
-  },
-  beforeUpdate(node, binding) {
-    console.log('beforeUpdate', binding, node)
-  },
-  updated(node, binding) {
-    console.log('updated', binding, node)
-  },
-}
-const vDirectiveSimple: FunctionDirective<HTMLDivElement> = (node, binding) => {
-  console.log('v-directive-simple:', node, binding)
-}
-const handleClick = () => {
-  text.value = 'change'
-}
-</script>
-
-<template>
-  <div
-    v-directive:foo.bar="text"
-    v-text="text"
-    v-directive-simple="text"
-    @click="handleClick"
-  />
-  <button @click="counter++">
-    {{ counter }} (Click to Update Other Element)
-  </button>
-</template>
-
-<style>
-html {
-  color-scheme: dark;
-  background-color: #000;
-  padding: 10px;
-}
-</style>

playground/src/dynamic-all.vue

@@ -1 +0,0 @@
-<template>{{ '1' }}{{ '2' }}</template>

playground/src/dynamic-mixed-mid.vue

@@ -1,4 +0,0 @@
-<template>
-  1{{ 2 }}{{ 3 }}4
-  <div>div</div>
-</template>

playground/src/dynamic-mixed.vue

@@ -1 +0,0 @@
-<template>{{ '1' }}2{{ '3' }}</template>

playground/src/dynamic-mixed2.vue

@@ -1,3 +0,0 @@
-<template>
-  {{ 1 }}{{ 2 }}3{{ 4 }}{{ 5 }}6{{ 7 }}{{ 8 }}9{{ 'A' }}{{ 'B' }}
-</template>

playground/src/dynamic-on.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const name = 'click'
-</script>
-
-<template>
-  <button @[name]="">click me</button>
-</template>

playground/src/dynamic.vue

@@ -1 +0,0 @@
-<template>{{ '1' }}</template>

playground/src/event-modifier.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue/vapor'
-const handleClick = () => {
-  console.log('Hello, Vapor!')
-}
-
-const i = ref(0)
-const event = ref('click')
-</script>
-
-<template>
-  <form>
-    <button @click="handleClick">submit</button>
-  </form>
-
-  <form>
-    <button @click.prevent="handleClick">no submit</button>
-  </form>
-
-  <div>
-    {{ i }}
-    <button @[event].prevent="i++">Add by {{ event }}</button>
-    <button @click="event = event === 'click' ? 'contextmenu' : 'click'">
-      Change Event
-    </button>
-  </div>
-</template>

playground/src/example-todomvc.vue

@@ -1,249 +0,0 @@
-<script>
-import {
-  defineComponent,
-  reactive,
-  computed,
-  watchEffect,
-  onMounted,
-  onUnmounted,
-  nextTick,
-} from 'vue/vapor'
-
-import 'todomvc-app-css/index.css'
-
-const STORAGE_KEY = 'todos-vuejs-3.x'
-const todoStorage = {
-  fetch() {
-    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
-    todos.forEach((todo, index) => {
-      todo.id = index
-    })
-    todoStorage.uid = todos.length
-    return todos
-  },
-  save(todos) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
-  },
-}
-
-const filters = {
-  all(todos) {
-    return todos
-  },
-  active(todos) {
-    return todos.filter(todo => {
-      return !todo.completed
-    })
-  },
-  completed(todos) {
-    return todos.filter(function (todo) {
-      return todo.completed
-    })
-  },
-}
-
-function pluralize(n) {
-  return n === 1 ? 'item' : 'items'
-}
-
-export default defineComponent({
-  setup() {
-    const state = reactive({
-      todos: todoStorage.fetch(),
-      editedTodo: null,
-      newTodo: '',
-      beforeEditCache: '',
-      visibility: 'all',
-      remaining: computed(() => {
-        return filters.active(state.todos).length
-      }),
-      remainingText: computed(() => {
-        return ` ${pluralize(state.remaining)} left`
-      }),
-      filteredTodos: computed(() => {
-        return filters[state.visibility](state.todos)
-      }),
-      allDone: computed({
-        get: function () {
-          return state.remaining === 0
-        },
-        set: function (value) {
-          state.todos.forEach(todo => {
-            todo.completed = value
-          })
-        },
-      }),
-    })
-
-    watchEffect(() => {
-      todoStorage.save(state.todos)
-    })
-
-    onMounted(() => {
-      window.addEventListener('hashchange', onHashChange)
-      onHashChange()
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('hashchange', onHashChange)
-    })
-
-    function onHashChange() {
-      const visibility = window.location.hash.replace(/#\/?/, '')
-      if (filters[visibility]) {
-        state.visibility = visibility
-      } else {
-        window.location.hash = ''
-        state.visibility = 'all'
-      }
-    }
-
-    function addTodo() {
-      const value = state.newTodo && state.newTodo.trim()
-      if (!value) {
-        return
-      }
-      state.todos.push({
-        id: todoStorage.uid++,
-        title: value,
-        completed: false,
-      })
-      state.newTodo = ''
-    }
-
-    function removeTodo(todo) {
-      state.todos.splice(state.todos.indexOf(todo), 1)
-    }
-
-    async function editTodo(todo) {
-      state.beforeEditCache = todo.title
-      state.editedTodo = todo
-      await nextTick()
-      document.getElementById(`todo-${todo.id}-input`).focus()
-    }
-
-    function doneEdit(todo) {
-      if (!state.editedTodo) {
-        return
-      }
-      state.editedTodo = null
-      todo.title = todo.title.trim()
-      if (!todo.title) {
-        removeTodo(todo)
-      }
-    }
-
-    function cancelEdit(todo) {
-      state.editedTodo = null
-      todo.title = state.beforeEditCache
-    }
-
-    function removeCompleted() {
-      state.todos = filters.active(state.todos)
-    }
-
-    return {
-      state,
-      addTodo,
-      removeTodo,
-      editTodo,
-      doneEdit,
-      cancelEdit,
-      removeCompleted,
-    }
-  },
-})
-</script>
-
-<template>
-  <section class="todoapp">
-    <header class="header">
-      <h1>todos</h1>
-      <input
-        class="new-todo"
-        autofocus
-        autocomplete="off"
-        placeholder="What needs to be done?"
-        v-model="state.newTodo"
-        @keyup.enter="addTodo"
-      />
-    </header>
-    <section class="main" v-show="state.todos.length">
-      <input
-        id="toggle-all"
-        class="toggle-all"
-        type="checkbox"
-        :checked="state.allDone"
-        @change="state.allDone = $event.target.checked"
-      />
-      <label for="toggle-all">Mark all as complete</label>
-      <ul class="todo-list">
-        <li
-          v-for="todo in state.filteredTodos"
-          class="todo"
-          :key="todo.id"
-          :class="{
-            completed: todo.completed,
-            editing: todo === state.editedTodo,
-          }"
-        >
-          <div class="view">
-            <input
-              class="toggle"
-              type="checkbox"
-              :checked="todo.completed"
-              @change="todo.completed = $event.target.checked"
-            />
-            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
-            <button class="destroy" @click="removeTodo(todo)"></button>
-          </div>
-          <input
-            :id="`todo-${todo.id}-input`"
-            class="edit"
-            type="text"
-            :value="todo.title"
-            @input="todo.title = $event.target.value"
-            @blur="doneEdit(todo)"
-            @keyup.enter="doneEdit(todo)"
-            @keyup.escape="cancelEdit(todo)"
-          />
-        </li>
-      </ul>
-    </section>
-    <footer class="footer" v-show="state.todos.length">
-      <span class="todo-count">
-        <strong>{{ state.remaining }}</strong>
-        <span>{{ state.remainingText }}</span>
-      </span>
-      <ul class="filters">
-        <li>
-          <a href="#/all" :class="{ selected: state.visibility === 'all' }"
-            >All</a
-          >
-        </li>
-        <li>
-          <a
-            href="#/active"
-            :class="{ selected: state.visibility === 'active' }"
-            >Active</a
-          >
-        </li>
-        <li>
-          <a
-            href="#/completed"
-            :class="{ selected: state.visibility === 'completed' }"
-            >Completed</a
-          >
-        </li>
-      </ul>
-
-      <button
-        class="clear-completed"
-        @click="removeCompleted"
-        v-show="state.todos.length > state.remaining"
-      >
-        Clear completed
-      </button>
-    </footer>
-  </section>
-</template>

playground/src/for-memo.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-
-const arr = reactive(['foo', 'bar', 'baz', 'qux'])
-const selected = ref('foo')
-</script>
-
-<template>
-  <div
-    v-for="item of arr"
-    v-memo="[selected === item]"
-    :class="{ danger: selected === item }"
-    @click="selected = item"
-  >
-    {{ item }}
-  </div>
-</template>
-
-<style>
-.danger {
-  color: red;
-}
-</style>

playground/src/fragment.vue

@@ -1,4 +0,0 @@
-<template>
-  <p>hello</p>
-  <p>world</p>
-</template>

playground/src/literal-expression.vue

@@ -1,3 +0,0 @@
-<template>
-  <div :id="'hello'"></div>
-</template>

playground/src/no-script.js

@@ -1,8 +0,0 @@
-import { template } from '@vue/runtime-vapor'
-
-const comp = () => {
-  return template('<div><h1>Hello')()
-}
-comp.vapor = true
-
-export default comp

playground/src/prop.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from '@vue/vapor'
-
-const count = ref(1)
-const obj = computed(() => ({ id: String(count.value), subObj: { a: 'xxx' } }))
-const key = ref('id')
-
-const handleClick = () => {
-  count.value++
-}
-</script>
-
-<template>
-  <button @click="handleClick">click me to update props</button>
-
-  <!-- prop id's value should update reactively  -->
-  <button :id="'before'" :[key]="'dynamic key after' + count">
-    {{ count }}
-  </button>
-  <!-- prop id's value should update only once  -->
-  <button :[key]="'dynamic key before' + count" :id="'before'">
-    {{ count }}
-  </button>
-  <!-- object props should update reactively -->
-  <button v-bind="obj">{{ count }}</button>
-  <button v-bind="{ id: `${count}`, subObj: { a: 'xxx' } }">
-    {{ count }}
-  </button>
-  <!-- prop id's value should update reactively since it was override by object props -->
-  <button :id="'before'" v-bind="obj">{{ count }}</button>
-  <button :[key]="'dynamic key before'" v-bind="obj">
-    {{ count }}
-  </button>
-  <!-- prop id's value should update only once since the prop id in object props was override -->
-  <button v-bind="obj" :id="'after'">{{ count }}</button>
-  <button v-bind="obj" :[key]="'dynamic key after'">{{ count }}</button>
-
-  <!-- old props will be reset after dynamic key changed -->
-  <button :[`key${count}`]="'dynamic key'">{{ count }}</button>
-</template>

playground/src/props.js

@@ -1,79 +0,0 @@
-// @ts-check
-import {
-  createComponent,
-  defineComponent,
-  on,
-  reactive,
-  ref,
-  renderEffect,
-  setText,
-  template,
-} from '@vue/vapor'
-
-const t0 = template('<button></button>')
-
-export default defineComponent({
-  vapor: true,
-  setup() {
-    const count = ref(1)
-    const props = reactive({
-      a: 'b',
-      'foo-bar': 100,
-    })
-    const handleClick = () => {
-      count.value++
-      props['foo-bar']++
-      // @ts-expect-error
-      props.boolean = true
-      console.log(count)
-    }
-
-    return (() => {
-      const n0 = /** @type {HTMLButtonElement} */ (t0())
-      on(n0, 'click', () => handleClick)
-      renderEffect(() => setText(n0, count.value))
-      /** @type {any} */
-      const n1 = createComponent(child, [
-        {
-          /* <Comp :count="count" /> */
-          count: () => {
-            // console.trace('access')
-            return count.value
-          },
-          /* <Comp :inline-double="count * 2" /> */
-          inlineDouble: () => count.value * 2,
-          id: () => 'hello',
-        },
-        () => props,
-      ])
-      return [n0, n1]
-    })()
-  },
-})
-
-const t1 = template('<p></p>')
-const child = defineComponent({
-  vapor: true,
-
-  props: {
-    count: { type: Number, default: 1 },
-    inlineDouble: { type: Number, default: 2 },
-    fooBar: { type: Number, required: true },
-    boolean: { type: Boolean },
-  },
-
-  setup(props, { attrs }) {
-    console.log(props, { ...props })
-    console.log(attrs, { ...attrs })
-
-    return (() => {
-      const n0 = /** @type {HTMLParagraphElement} */ (t1())
-      renderEffect(() =>
-        setText(n0, props.count + ' * 2 = ' + props.inlineDouble),
-      )
-      const n1 = /** @type {HTMLParagraphElement} */ (t1())
-      renderEffect(() => setText(n1, props.fooBar, ', ', props.boolean))
-      return [n0, n1]
-    })()
-  },
-})

playground/src/reactive-event-handler.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { ref, watchEffect } from 'vue/vapor'
-
-const count = ref(0)
-const inc = () => count.value++
-const dec = () => count.value--
-const handler = ref(inc)
-
-watchEffect(() => {
-  if (count.value > 5) {
-    handler.value = dec
-  } else if (count.value < -5) {
-    handler.value = inc
-  }
-})
-</script>
-
-<template>
-  <button @click="handler">{{ count }}</button>
-</template>

playground/src/refs.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { Data } from '@vue/runtime-shared'
-import { ref, onMounted } from 'vue/vapor'
-
-const inputRef = ref<HTMLInputElement>()
-const buttonRef = ref<HTMLButtonElement>()
-
-function handleSetRef(el: HTMLButtonElement, refs: Data) {
-  buttonRef.value = el
-  console.log(el, refs)
-}
-
-onMounted(() => {
-  console.log(inputRef.value, buttonRef.value)
-})
-</script>
-
-<template>
-  <div>
-    <input type="text" ref="inputRef" />
-    <!-- @vue-expect-error TODO fix types -->
-    <button :ref="handleSetRef">Button</button>
-  </div>
-</template>

playground/src/scheduler.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import {
-  onWatcherCleanup,
-  ref,
-  watch,
-  watchEffect,
-  watchPostEffect,
-  watchSyncEffect,
-} from 'vue/vapor'
-
-const source = ref(0)
-const add = () => source.value++
-
-watchPostEffect(() => {
-  const current = source.value
-  console.log('post', current)
-  onWatcherCleanup(() => console.log('cleanup post', current))
-})
-
-watchEffect(() => {
-  const current = source.value
-  console.log('pre', current)
-  onWatcherCleanup(() => console.log('cleanup pre', current))
-})
-
-watchSyncEffect(() => {
-  const current = source.value
-  console.log('sync', current)
-  onWatcherCleanup(() => console.log('cleanup sync', current))
-})
-
-watch(source, (value, oldValue) => {
-  console.log('watch', value, 'oldValue:', oldValue)
-  onWatcherCleanup(() => console.log('cleanup watch', value))
-})
-
-const onUpdate = (arg: any) => {
-  const current = source.value
-  console.log('render', current)
-  onWatcherCleanup(() => console.log('cleanup render', current))
-  return arg
-}
-</script>
-
-<template>
-  <div>
-    <p>Please check the console</p>
-    <div>
-      <button @click="add">Add</button>
-      |
-      <span>{{ onUpdate(source) }}</span>
-    </div>
-  </div>
-</template>
-
-<style>
-.red {
-  color: red;
-}
-
-html {
-  color-scheme: dark;
-  background-color: #000;
-  padding: 10px;
-}
-</style>

playground/src/show.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { ref } from '@vue/vapor'
-
-const visible = ref(true)
-function handleClick() {
-  visible.value = !visible.value
-}
-</script>
-
-<template>
-  <button @click="handleClick">toggle</button>
-  <h1 v-show="visible">hello world</h1>
-</template>

playground/src/slots.js

@@ -1,85 +0,0 @@
-// @ts-check
-import {
-  children,
-  createComponent,
-  defineComponent,
-  insert,
-  on,
-  ref,
-  renderEffect,
-  setText,
-  template,
-} from '@vue/vapor'
-
-// <template #mySlot="{ message, changeMessage }">
-//   <div clas="slotted">
-//     <h1>{{ message }}</h1>
-//     <button @click="changeMessage">btn parent</button>
-//   </div>
-// </template>
-const t1 = template(
-  '<div class="slotted"><h1><!></h1><button>parent btn</button></div>',
-)
-
-const Parent = defineComponent({
-  vapor: true,
-  setup() {
-    return (() => {
-      /** @type {any} */
-      const n0 = createComponent(
-        Child,
-        {},
-        {
-          mySlot: ({ message, changeMessage }) => {
-            const n1 = t1()
-            const n2 = /** @type {any} */ (children(n1, 0))
-            const n3 = /** @type {any} */ (children(n1, 1))
-            renderEffect(() => setText(n2, message()))
-            on(n3, 'click', changeMessage)
-            return n1
-          },
-          // e.g. default slot
-          // default: () => {
-          //   const n1 = t1()
-          //   return n1
-          // }
-        },
-      )
-      return n0
-    })()
-  },
-})
-
-const t2 = template(
-  '<div class="child-container"><button>child btn</button></div>',
-)
-
-const Child = defineComponent({
-  vapor: true,
-  setup(_, { slots }) {
-    const message = ref('Hello World!')
-    function changeMessage() {
-      message.value += '!'
-    }
-
-    return (() => {
-      // <div>
-      //   <slot name="mySlot" :message="msg" :changeMessage="changeMessage" />
-      //   <button @click="changeMessage">button in child</button>
-      // </div>
-      const n0 = /** @type {any} */ (t2())
-      const n1 = /** @type {any} */ (children(n0, 0))
-      on(n1, 'click', () => changeMessage)
-      const s0 = /** @type {any} */ (
-        slots.mySlot?.({
-          message: () => message.value,
-          changeMessage: () => changeMessage,
-        })
-      )
-      insert(s0, n0, n1)
-      return n0
-    })()
-  },
-})
-
-export default Parent

playground/src/style.css

@@ -1,5 +1,3 @@
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+html {
+  color-scheme: light dark;
 }

playground/src/sub-comp.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import {
-  onBeforeMount,
-  onBeforeUnmount,
-  onMounted,
-  onUnmounted,
-  useAttrs,
-  watchEffect,
-} from 'vue/vapor'
-
-const props = defineProps<{
-  foo: string
-  bar: string
-  baz: string
-}>()
-
-const attrs = useAttrs()
-
-watchEffect(() => {
-  console.log({ ...attrs })
-})
-
-const keys = Object.keys
-
-onBeforeMount(() => console.log('sub: before mount'))
-onMounted(() => console.log('sub: mounted'))
-onBeforeUnmount(() => console.log('sub: before unmount'))
-onUnmounted(() => console.log('sub: unmounted'))
-</script>
-
-<template>
-  <h2>sub-comp</h2>
-  <p>
-    props: {{ props }}
-    <br />
-    attrs: {{ attrs }}
-    <br />
-    keys(attrs): {{ keys(attrs) }}
-  </p>
-</template>

playground/src/todo-mvc.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue/vapor'
-import { useLocalStorage } from '@vueuse/core'
-interface Task {
-  title: string
-  completed: boolean
-}
-
-const tasks = useLocalStorage<Task[]>('tasks', [])
-const value = useLocalStorage('value', '')
-
-const remaining = computed(() => {
-  return tasks.value.filter(task => !task.completed).length
-})
-
-function handleAdd(evt: KeyboardEvent | MouseEvent) {
-  console.log(evt)
-  tasks.value.push({
-    title: value.value,
-    completed: false,
-  })
-  value.value = ''
-}
-
-function handleComplete(index: number, evt: Event) {
-  tasks.value[index].completed = (evt.target as HTMLInputElement).checked
-}
-
-function handleClearComplete() {
-  tasks.value = tasks.value.filter(task => !task.completed)
-}
-
-function handleClearAll() {
-  tasks.value = []
-}
-
-function handleRemove(idx: number, task: Task) {
-  console.log(task)
-  tasks.value.splice(idx, 1)
-}
-</script>
-
-<template>
-  <h1>todos</h1>
-  <ul>
-    <li
-      v-for="(task, index) of tasks"
-      :key="index"
-      :class="{ del: task.completed }"
-    >
-      <input
-        type="checkbox"
-        :checked="task.completed"
-        @change="handleComplete(index, $event)"
-      />
-      {{ task.title }}
-      <button @click="handleRemove(index, task)">x</button>
-    </li>
-  </ul>
-  <p>
-    {{ remaining }} item{{ remaining !== 1 ? 's' : '' }} left /
-    {{ tasks.length }} item{{ tasks.length !== 1 ? 's' : '' }} in total
-  </p>
-  <div style="display: flex; gap: 8px">
-    <input
-      type="text"
-      v-model="value"
-      @keydown.enter="handleAdd"
-      placeholder="What need to be done?"
-    />
-    <button @click.passive="handleAdd">Add</button>
-    <button @click="handleClearComplete">Clear completed</button>
-    <button @click="handleClearAll">Clear all</button>
-  </div>
-</template>
-
-<style>
-.del {
-  text-decoration: line-through;
-}
-</style>

playground/src/v-for.js

@@ -1,72 +0,0 @@
-// @ts-check
-import {
-  createFor,
-  defineComponent,
-  insert,
-  on,
-  ref,
-  renderEffect,
-} from 'vue/vapor'
-
-export default defineComponent({
-  vapor: true,
-  setup() {
-    const list = ref(['a', 'b', 'c'])
-    const value = ref('')
-
-    function handleAdd() {
-      list.value.push(value.value)
-      value.value = ''
-    }
-
-    function handleRemove() {
-      list.value.shift()
-    }
-
-    return (() => {
-      const li = createFor(
-        () => list.value,
-        ctx0 => {
-          const node = document.createTextNode('')
-          const container = document.createElement('li')
-          insert(node, container)
-
-          renderEffect(() => {
-            const [item, index] = ctx0
-            node.textContent = `${index}. ${item}`
-          })
-          return container
-        },
-        (item, index) => index,
-      )
-      const container = document.createElement('ul')
-      insert(li, container)
-
-      const input = document.createElement('input')
-      on(input, 'input', () => e => {
-        value.value = e.target.value
-      })
-      on(input, 'keydown', () => handleAdd, {
-        keys: ['enter'],
-      })
-
-      const add = document.createElement('button')
-      add.textContent = 'add'
-      on(add, 'click', () => handleAdd)
-      renderEffect(() => {
-        input.value = value.value
-      })
-
-      const del = document.createElement('button')
-      del.textContent = 'shift'
-      on(del, 'click', () => handleRemove)
-
-      const data = document.createElement('p')
-      renderEffect(() => {
-        data.textContent = JSON.stringify(list.value)
-      })
-
-      return [container, input, add, del, data]
-    })()
-  },
-})

playground/src/v-for.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue/vapor'
-const arr = ref([1, 2, 3])
-const obj = ref<Record<string, any>>({ a: 1, b: 2, c: 3 })
-const str = ref('123')
-const map = ref(
-  new Map([
-    ['a', 1],
-    ['b', 2],
-    ['c', 3],
-  ]),
-)
-const num = ref(10)
-const objChange = () => {
-  obj.value = { a: 'x', e: 4, f: 5, g: 6 }
-}
-const arrChange = () => {
-  arr.value = [4, 5, 6, 7]
-}
-</script>
-
-<template>
-  <button @click="arrChange">change arr</button>
-  <button @click="objChange">change obj</button>
-
-  <div>arr:</div>
-  <div v-for="(item, index) in arr" :key="item">{{ item }}-{{ index }}</div>
-
-  <hr />
-
-  <div>obj:</div>
-  <div v-for="(item, index) in obj">{{ item }}-{{ index }}</div>
-
-  <hr />
-
-  <div>map:</div>
-  <div v-for="(item, index) in map" :key="item[0]">{{ item }}-{{ index }}</div>
-
-  <hr />
-
-  <div>str:</div>
-  <div v-for="(item, index) in str" :key="item">{{ item }}-{{ index }}</div>
-
-  <hr />
-
-  <div>num:</div>
-  <div v-for="(item, index) in num" :key="item">{{ item }}-{{ index }}</div>
-</template>

playground/src/warning.js

@@ -1,23 +0,0 @@
-import { createComponent, warn } from 'vue/vapor'
-
-export default {
-  vapor: true,
-  setup() {
-    return createComponent(Comp, [
-      {
-        msg: () => 'hello',
-        onClick: () => () => {},
-      },
-      () => ({ foo: 'world', msg: 'msg' }),
-    ])
-  },
-}
-
-const Comp = {
-  name: 'Comp',
-  vapor: true,
-  props: ['msg', 'foo'],
-  setup() {
-    warn('hello')
-  },
-}

playground/vite.config.ts

@@ -17,7 +17,6 @@ export default defineConfig({
   clearScreen: false,
   plugins: [
     Vue({
-      vapor: true,
       compiler: CompilerSFC,
     }),
     DevPlugin(),