From b31e989e4198753896d0644f3b7e1a5dc714eac3 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 14 May 2024 17:26:24 +0800
Subject: [PATCH 1/3] feat: setup e2e test env and add a failed unit test

---
 package.json                                  |   2 +-
 packages/vue-vapor/__tests__/e2e/e2eUtils.ts  | 181 +++++++++++++
 .../vue-vapor/__tests__/e2e/todomvc.spec.ts   | 179 +++++++++++++
 .../examples/composition/todomvc.html         | 229 ++++++++++++++++
 playground/src/example-todomvc.vue            | 249 ++++++++++++++++++
 vitest.e2e.config.ts                          |   5 +-
 6 files changed, 843 insertions(+), 2 deletions(-)
 create mode 100644 packages/vue-vapor/__tests__/e2e/e2eUtils.ts
 create mode 100644 packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
 create mode 100644 packages/vue-vapor/examples/composition/todomvc.html
 create mode 100644 playground/src/example-todomvc.vue

diff --git a/package.json b/package.json
index aa1f3b59b..2feb62ad7 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "format-check": "prettier --check --cache .",
     "test": "vitest",
     "test-unit": "vitest -c vitest.unit.config.ts",
-    "test-e2e": "node scripts/build.js vue -f global -d && vitest -c vitest.e2e.config.ts",
+    "test-e2e": "node scripts/build.js vue vue-vapor -f global -d && vitest -c vitest.e2e.config.ts",
     "test-dts": "run-s build-dts test-dts-only",
     "test-dts-only": "tsc -p packages/dts-built-test/tsconfig.json && tsc -p ./packages/dts-test/tsconfig.test.json",
     "test-coverage": "vitest -c vitest.unit.config.ts --coverage",
diff --git a/packages/vue-vapor/__tests__/e2e/e2eUtils.ts b/packages/vue-vapor/__tests__/e2e/e2eUtils.ts
new file mode 100644
index 000000000..792e4452f
--- /dev/null
+++ b/packages/vue-vapor/__tests__/e2e/e2eUtils.ts
@@ -0,0 +1,181 @@
+import puppeteer, {
+  type Browser,
+  type ClickOptions,
+  type Page,
+  type PuppeteerLaunchOptions,
+} from 'puppeteer'
+
+export const E2E_TIMEOUT = 30 * 1000
+
+const puppeteerOptions: PuppeteerLaunchOptions = {
+  args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : [],
+  headless: 'new',
+}
+
+const maxTries = 30
+export const timeout = (n: number) => new Promise(r => setTimeout(r, n))
+
+export async function expectByPolling(
+  poll: () => Promise<any>,
+  expected: string,
+) {
+  for (let tries = 0; tries < maxTries; tries++) {
+    const actual = (await poll()) || ''
+    if (actual.indexOf(expected) > -1 || tries === maxTries - 1) {
+      expect(actual).toMatch(expected)
+      break
+    } else {
+      await timeout(50)
+    }
+  }
+}
+
+export function setupPuppeteer() {
+  let browser: Browser
+  let page: Page
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch(puppeteerOptions)
+  }, 20000)
+
+  beforeEach(async () => {
+    page = await browser.newPage()
+
+    await page.evaluateOnNewDocument(() => {
+      localStorage.clear()
+    })
+
+    page.on('console', e => {
+      if (e.type() === 'error') {
+        const err = e.args()[0]
+        console.error(
+          `Error from Puppeteer-loaded page:\n`,
+          err.remoteObject().description,
+        )
+      }
+    })
+  })
+
+  afterEach(async () => {
+    await page.close()
+  })
+
+  afterAll(async () => {
+    await browser.close()
+  })
+
+  async function click(selector: string, options?: ClickOptions) {
+    await page.click(selector, options)
+  }
+
+  async function count(selector: string) {
+    return (await page.$$(selector)).length
+  }
+
+  async function text(selector: string) {
+    return await page.$eval(selector, node => node.textContent)
+  }
+
+  async function value(selector: string) {
+    return await page.$eval(selector, node => (node as HTMLInputElement).value)
+  }
+
+  async function html(selector: string) {
+    return await page.$eval(selector, node => node.innerHTML)
+  }
+
+  async function classList(selector: string) {
+    return await page.$eval(selector, (node: any) => [...node.classList])
+  }
+
+  async function children(selector: string) {
+    return await page.$eval(selector, (node: any) => [...node.children])
+  }
+
+  async function isVisible(selector: string) {
+    const display = await page.$eval(selector, node => {
+      return window.getComputedStyle(node).display
+    })
+    return display !== 'none'
+  }
+
+  async function isChecked(selector: string) {
+    return await page.$eval(
+      selector,
+      node => (node as HTMLInputElement).checked,
+    )
+  }
+
+  async function isFocused(selector: string) {
+    return await page.$eval(selector, node => node === document.activeElement)
+  }
+
+  async function setValue(selector: string, value: string) {
+    await page.$eval(
+      selector,
+      (node, value) => {
+        ;(node as HTMLInputElement).value = value as string
+        node.dispatchEvent(new Event('input'))
+      },
+      value,
+    )
+  }
+
+  async function typeValue(selector: string, value: string) {
+    const el = (await page.$(selector))!
+    await el.evaluate(node => ((node as HTMLInputElement).value = ''))
+    await el.type(value)
+  }
+
+  async function enterValue(selector: string, value: string) {
+    const el = (await page.$(selector))!
+    await el.evaluate(node => ((node as HTMLInputElement).value = ''))
+    await el.type(value)
+    await el.press('Enter')
+  }
+
+  async function clearValue(selector: string) {
+    return await page.$eval(
+      selector,
+      node => ((node as HTMLInputElement).value = ''),
+    )
+  }
+
+  function timeout(time: number) {
+    return page.evaluate(time => {
+      return new Promise(r => {
+        setTimeout(r, time)
+      })
+    }, time)
+  }
+
+  function nextFrame() {
+    return page.evaluate(() => {
+      return new Promise(resolve => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(resolve)
+        })
+      })
+    })
+  }
+
+  return {
+    page: () => page,
+    click,
+    count,
+    text,
+    value,
+    html,
+    classList,
+    children,
+    isVisible,
+    isChecked,
+    isFocused,
+    setValue,
+    typeValue,
+    enterValue,
+    clearValue,
+    timeout,
+    nextFrame,
+  }
+}
diff --git a/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts b/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
new file mode 100644
index 000000000..6221d702a
--- /dev/null
+++ b/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
@@ -0,0 +1,179 @@
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
+
+describe('e2e: todomvc', () => {
+  const {
+    page,
+    click,
+    isVisible,
+    count,
+    text,
+    value,
+    isChecked,
+    isFocused,
+    classList,
+    enterValue,
+    clearValue,
+  } = setupPuppeteer()
+
+  async function removeItemAt(n: number) {
+    const item = (await page().$('.todo:nth-child(' + n + ')'))!
+    const itemBBox = (await item.boundingBox())!
+    await page().mouse.move(itemBBox.x + 10, itemBBox.y + 10)
+    await click('.todo:nth-child(' + n + ') .destroy')
+  }
+
+  async function testTodomvc(apiType: 'classic' | 'composition') {
+    const baseUrl = `file://${path.resolve(
+      __dirname,
+      `../../examples/${apiType}/todomvc.html`,
+    )}`
+
+    await page().goto(baseUrl)
+    expect(await isVisible('.main')).toBe(false)
+    expect(await isVisible('.footer')).toBe(false)
+    expect(await count('.filters .selected')).toBe(1)
+    expect(await text('.filters .selected')).toBe('All')
+    expect(await count('.todo')).toBe(0)
+
+    await enterValue('.new-todo', 'test')
+    expect(await count('.todo')).toBe(1)
+    expect(await isVisible('.todo .edit')).toBe(false)
+    expect(await text('.todo label')).toBe('test')
+    expect(await text('.todo-count strong')).toBe('1')
+    expect(await isChecked('.todo .toggle')).toBe(false)
+    expect(await isVisible('.main')).toBe(true)
+    expect(await isVisible('.footer')).toBe(true)
+    expect(await isVisible('.clear-completed')).toBe(false)
+    expect(await value('.new-todo')).toBe('')
+
+    await enterValue('.new-todo', 'test2')
+    expect(await count('.todo')).toBe(2)
+    expect(await text('.todo:nth-child(2) label')).toBe('test2')
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // toggle
+    await click('.todo .toggle')
+    expect(await count('.todo.completed')).toBe(1)
+    expect(await classList('.todo:nth-child(1)')).toContain('completed')
+    expect(await text('.todo-count strong')).toBe('1')
+    expect(await isVisible('.clear-completed')).toBe(true)
+
+    await enterValue('.new-todo', 'test3')
+    expect(await count('.todo')).toBe(3)
+    expect(await text('.todo:nth-child(3) label')).toBe('test3')
+    expect(await text('.todo-count strong')).toBe('2')
+
+    await enterValue('.new-todo', 'test4')
+    await enterValue('.new-todo', 'test5')
+    expect(await count('.todo')).toBe(5)
+    expect(await text('.todo-count strong')).toBe('4')
+
+    // toggle more
+    await click('.todo:nth-child(4) .toggle')
+    await click('.todo:nth-child(5) .toggle')
+    expect(await count('.todo.completed')).toBe(3)
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // remove
+    await removeItemAt(1)
+    expect(await count('.todo')).toBe(4)
+    expect(await count('.todo.completed')).toBe(2)
+    expect(await text('.todo-count strong')).toBe('2')
+    await removeItemAt(2)
+    expect(await count('.todo')).toBe(3)
+    expect(await count('.todo.completed')).toBe(2)
+    expect(await text('.todo-count strong')).toBe('1')
+
+    // remove all
+    await click('.clear-completed')
+    expect(await count('.todo')).toBe(1)
+    expect(await text('.todo label')).toBe('test2')
+    expect(await count('.todo.completed')).toBe(0)
+    expect(await text('.todo-count strong')).toBe('1')
+    expect(await isVisible('.clear-completed')).toBe(false)
+
+    // prepare to test filters
+    await enterValue('.new-todo', 'test')
+    await enterValue('.new-todo', 'test')
+    await click('.todo:nth-child(2) .toggle')
+    await click('.todo:nth-child(3) .toggle')
+
+    // active filter
+    await click('.filters li:nth-child(2) a')
+    expect(await count('.todo')).toBe(1)
+    expect(await count('.todo.completed')).toBe(0)
+    // add item with filter active
+    await enterValue('.new-todo', 'test')
+    expect(await count('.todo')).toBe(2)
+
+    // completed filter
+    await click('.filters li:nth-child(3) a')
+    expect(await count('.todo')).toBe(2)
+    expect(await count('.todo.completed')).toBe(2)
+
+    // filter on page load
+    await page().goto(`${baseUrl}#active`)
+    expect(await count('.todo')).toBe(2)
+    expect(await count('.todo.completed')).toBe(0)
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // completed on page load
+    await page().goto(`${baseUrl}#completed`)
+    expect(await count('.todo')).toBe(2)
+    expect(await count('.todo.completed')).toBe(2)
+    expect(await text('.todo-count strong')).toBe('2')
+
+    // toggling with filter active
+    await click('.todo .toggle')
+    expect(await count('.todo')).toBe(1)
+    await click('.filters li:nth-child(2) a')
+    expect(await count('.todo')).toBe(3)
+    await click('.todo .toggle')
+    expect(await count('.todo')).toBe(2)
+
+    // editing triggered by blur
+    await click('.filters li:nth-child(1) a')
+    await click('.todo:nth-child(1) label', { clickCount: 2 })
+    expect(await count('.todo.editing')).toBe(1)
+    expect(await isFocused('.todo:nth-child(1) .edit')).toBe(true)
+    await clearValue('.todo:nth-child(1) .edit')
+    await page().type('.todo:nth-child(1) .edit', 'edited!')
+    await click('.new-todo') // blur
+    expect(await count('.todo.editing')).toBe(0)
+    expect(await text('.todo:nth-child(1) label')).toBe('edited!')
+
+    // editing triggered by enter
+    await click('.todo label', { clickCount: 2 })
+    await enterValue('.todo:nth-child(1) .edit', 'edited again!')
+    expect(await count('.todo.editing')).toBe(0)
+    expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
+
+    // cancel
+    await click('.todo label', { clickCount: 2 })
+    await clearValue('.todo:nth-child(1) .edit')
+    await page().type('.todo:nth-child(1) .edit', 'edited!')
+    await page().keyboard.press('Escape')
+    expect(await count('.todo.editing')).toBe(0)
+    expect(await text('.todo:nth-child(1) label')).toBe('edited again!')
+
+    // empty value should remove
+    await click('.todo label', { clickCount: 2 })
+    await enterValue('.todo:nth-child(1) .edit', ' ')
+    expect(await count('.todo')).toBe(3)
+
+    // toggle all
+    await click('.toggle-all+label')
+    expect(await count('.todo.completed')).toBe(3)
+    await click('.toggle-all+label')
+    expect(await count('.todo:not(.completed)')).toBe(3)
+  }
+
+  test.fails(
+    'composition',
+    async () => {
+      await testTodomvc('composition')
+    },
+    E2E_TIMEOUT,
+  )
+})
diff --git a/packages/vue-vapor/examples/composition/todomvc.html b/packages/vue-vapor/examples/composition/todomvc.html
new file mode 100644
index 000000000..9e1cade18
--- /dev/null
+++ b/packages/vue-vapor/examples/composition/todomvc.html
@@ -0,0 +1,229 @@
+<script src="../../dist/vue-vapor.global.js"></script>
+<link rel="stylesheet" href="../../../../node_modules/todomvc-app-css/index.css">
+
+<div id="app"></div>
+
+<script>
+const { render, defineComponent, reactive, computed, watchEffect, onMounted, onUnmounted } = VueVapor
+
+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'
+}
+
+const _sfc_main = 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)
+    }
+
+    function editTodo(todo) {
+      state.beforeEditCache = todo.title
+      state.editedTodo = todo
+    }
+
+    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)
+    }
+
+    function vTodoFocus (el, { value }) {
+      if (value) {
+        el.focus()
+      }
+    }
+
+    return {
+      state,
+      addTodo,
+      removeTodo,
+      editTodo,
+      doneEdit,
+      cancelEdit,
+      removeCompleted,
+      vTodoFocus
+    }
+  },
+})
+
+const { children : _children, next : _next, vModelText : _vModelText, withDirectives : _withDirectives, vModelCheckbox : _vModelCheckbox, vShow : _vShow, on : _on, delegate : _delegate, resolveDirective : _resolveDirective, setText : _setText, setClass : _setClass, renderEffect : _renderEffect, createFor : _createFor, insert : _insert, setDynamicProp : _setDynamicProp, delegateEvents : _delegateEvents, template : _template } = VueVapor
+const t0 = _template("<li><div class=\"view\"><input class=\"toggle\" type=\"checkbox\"><label></label><button class=\"destroy\"></button></div><input class=\"edit\" type=\"text\"></li>")
+const t1 = _template("<section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input class=\"new-todo\" autofocus autocomplete=\"off\" placeholder=\"What needs to be done?\"></header><section class=\"main\"><input id=\"toggle-all\" class=\"toggle-all\" type=\"checkbox\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer\"><span class=\"todo-count\"><strong></strong><span></span></span><ul class=\"filters\"><li><a href=\"#/all\">All</a></li><li><a href=\"#/active\">Active</a></li><li><a href=\"#/completed\">Completed</a></li></ul><button class=\"clear-completed\"> Clear completed </button></footer></section>")
+_delegateEvents("keyup", "dblclick", "click")
+
+function _sfc_render(_ctx) {
+  const n18 = t1()
+  const n0 = _children(n18, 0, 1)
+  const n10 = _children(n18, 1)
+  const n1 = n10.firstChild
+  const n9 = _next(n1, 2)
+  const n17 = n10.nextSibling
+  const n11 = _children(n17, 0, 0)
+  const n12 = n11.nextSibling
+  const n13 = _children(n17, 1, 0, 0)
+  const n14 = _children(n17, 1, 1, 0)
+  const n15 = _children(n17, 1, 2, 0)
+  const n16 = _children(n17, 2)
+  _withDirectives(n0, [[_vModelText, () => _ctx.state.newTodo]])
+  _withDirectives(n1, [[_vModelCheckbox, () => _ctx.state.allDone]])
+  _withDirectives(n10, [[_vShow, () => _ctx.state.todos.length]])
+  _withDirectives(n16, [[_vShow, () => _ctx.state.todos.length > _ctx.state.remaining]])
+  _withDirectives(n17, [[_vShow, () => _ctx.state.todos.length]])
+  _on(n0, "update:modelValue", () => $event => (_ctx.state.newTodo = $event))
+  _delegate(n0, "keyup", () => _ctx.addTodo, {
+    keys: ["enter"]
+  })
+  _on(n1, "update:modelValue", () => $event => (_ctx.state.allDone = $event))
+  _on(n1, "change", () => $event => (_ctx.state.allDone = $event.target.checked))
+  const n2 = _createFor(() => (_ctx.state.filteredTodos), (_block) => {
+    const n8 = t0()
+    const n4 = _children(n8, 0, 0)
+    const n5 = n4.nextSibling
+    const n6 = n5.nextSibling
+    const n7 = _children(n8, 1)
+    _withDirectives(n4, [[_vModelCheckbox, () => _block.s[0].completed]])
+    _withDirectives(n7, [[_vModelText, () => _block.s[0].title], [_ctx.vTodoFocus, () => _block.s[0] === _ctx.state.editedTodo]])
+    _on(n4, "update:modelValue", () => $event => (_block.s[0].completed))
+    _delegate(n5, "dblclick", () => $event => (_ctx.editTodo(_block.s[0])))
+    _delegate(n6, "click", () => $event => (_ctx.removeTodo(_block.s[0])))
+    _on(n7, "update:modelValue", () => $event => (_block.s[0].title))
+    _on(n7, "blur", () => $event => (_ctx.doneEdit(_block.s[0])))
+    _delegate(n7, "keyup", () => $event => (_ctx.doneEdit(_block.s[0])), {
+      keys: ["enter"]
+    })
+    _delegate(n7, "keyup", () => $event => (_ctx.cancelEdit(_block.s[0])), {
+      keys: ["escape"]
+    })
+    const _updateEffect = () => {
+      const [todo] = _block.s
+      _setText(n5, todo.title)
+      _setClass(n8, ["todo", {
+            completed: todo.completed,
+            editing: todo === _ctx.state.editedTodo,
+          }])
+    }
+    _renderEffect(_updateEffect)
+    return [n8, _updateEffect]
+  }, (todo) => (todo.id))
+  _insert(n2, n9)
+  _delegate(n16, "click", () => _ctx.removeCompleted)
+  _renderEffect(() => _setDynamicProp(n1, "checked", _ctx.state.allDone))
+  _renderEffect(() => _setText(n11, _ctx.state.remaining))
+  _renderEffect(() => _setText(n12, _ctx.state.remainingText))
+  _renderEffect(() => _setClass(n13, { selected: _ctx.state.visibility === 'all' }))
+  _renderEffect(() => _setClass(n14, { selected: _ctx.state.visibility === 'active' }))
+  _renderEffect(() => _setClass(n15, { selected: _ctx.state.visibility === 'completed' }))
+  return n18
+}
+
+_sfc_main.render = _sfc_render
+render(_sfc_main, {}, '#app')
+</script>
diff --git a/playground/src/example-todomvc.vue b/playground/src/example-todomvc.vue
new file mode 100644
index 000000000..82c7e88ea
--- /dev/null
+++ b/playground/src/example-todomvc.vue
@@ -0,0 +1,249 @@
+<script>
+import {
+  defineComponent,
+  reactive,
+  computed,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+} 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)
+    }
+
+    function editTodo(todo) {
+      state.beforeEditCache = todo.title
+      state.editedTodo = todo
+    }
+
+    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,
+    }
+  },
+
+  directives: {
+    'todo-focus': (el, { value }) => {
+      if (value) {
+        el.focus()
+      }
+    },
+  },
+})
+</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"
+        v-model="state.allDone"
+        :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" v-model="todo.completed" />
+            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
+            <button class="destroy" @click="removeTodo(todo)"></button>
+          </div>
+          <input
+            class="edit"
+            type="text"
+            v-model="todo.title"
+            v-todo-focus="todo === state.editedTodo"
+            @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>
diff --git a/vitest.e2e.config.ts b/vitest.e2e.config.ts
index 90a67d229..2436baf2b 100644
--- a/vitest.e2e.config.ts
+++ b/vitest.e2e.config.ts
@@ -8,6 +8,9 @@ export default mergeConfig(config, {
         singleThread: !!process.env.CI,
       },
     },
-    include: ['packages/vue/__tests__/e2e/*.spec.ts'],
+    include: [
+      'packages/vue/__tests__/e2e/*.spec.ts',
+      'packages/vue-vapor/__tests__/e2e/*.spec.ts',
+    ],
   },
 })

From 959fe71ed8a936fb9458a67be502f9f3e23661ea Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 14 May 2024 19:44:50 +0800
Subject: [PATCH 2/3] chore: update e2e test

---
 packages/vue-vapor/__tests__/e2e/e2eUtils.ts  |  2 +-
 .../vue-vapor/__tests__/e2e/todomvc.spec.ts   |  6 +--
 .../examples/composition/todomvc.html         | 40 ++++++++-----------
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/packages/vue-vapor/__tests__/e2e/e2eUtils.ts b/packages/vue-vapor/__tests__/e2e/e2eUtils.ts
index 792e4452f..6e98ffc1d 100644
--- a/packages/vue-vapor/__tests__/e2e/e2eUtils.ts
+++ b/packages/vue-vapor/__tests__/e2e/e2eUtils.ts
@@ -9,7 +9,7 @@ export const E2E_TIMEOUT = 30 * 1000
 
 const puppeteerOptions: PuppeteerLaunchOptions = {
   args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : [],
-  headless: 'new',
+  headless: true,
 }
 
 const maxTries = 30
diff --git a/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts b/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
index 6221d702a..3d39ee086 100644
--- a/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
+++ b/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
@@ -24,10 +24,8 @@ describe('e2e: todomvc', () => {
   }
 
   async function testTodomvc(apiType: 'classic' | 'composition') {
-    const baseUrl = `file://${path.resolve(
-      __dirname,
-      `../../examples/${apiType}/todomvc.html`,
-    )}`
+    let baseUrl = `../../examples/${apiType}/todomvc.html`
+    baseUrl = `file://${path.resolve(__dirname, baseUrl)}`
 
     await page().goto(baseUrl)
     expect(await isVisible('.main')).toBe(false)
diff --git a/packages/vue-vapor/examples/composition/todomvc.html b/packages/vue-vapor/examples/composition/todomvc.html
index 9e1cade18..73bf87042 100644
--- a/packages/vue-vapor/examples/composition/todomvc.html
+++ b/packages/vue-vapor/examples/composition/todomvc.html
@@ -4,7 +4,7 @@
 <div id="app"></div>
 
 <script>
-const { render, defineComponent, reactive, computed, watchEffect, onMounted, onUnmounted } = VueVapor
+const { createVaporApp, defineComponent, reactive, computed, watchEffect, onMounted, onUnmounted } = VueVapor
 
 const STORAGE_KEY = 'todos-vuejs-3.x'
 const todoStorage = {
@@ -63,11 +63,11 @@
           return state.remaining === 0
         },
         set: function (value) {
-          state.todos.forEach((todo) => {
+          state.todos.forEach(todo => {
             todo.completed = value
           })
-        }
-      })
+        },
+      }),
     })
 
     watchEffect(() => {
@@ -101,7 +101,7 @@
       state.todos.push({
         id: todoStorage.uid++,
         title: value,
-        completed: false
+        completed: false,
       })
       state.newTodo = ''
     }
@@ -135,12 +135,6 @@
       state.todos = filters.active(state.todos)
     }
 
-    function vTodoFocus (el, { value }) {
-      if (value) {
-        el.focus()
-      }
-    }
-
     return {
       state,
       addTodo,
@@ -149,12 +143,11 @@
       doneEdit,
       cancelEdit,
       removeCompleted,
-      vTodoFocus
     }
   },
 })
 
-const { children : _children, next : _next, vModelText : _vModelText, withDirectives : _withDirectives, vModelCheckbox : _vModelCheckbox, vShow : _vShow, on : _on, delegate : _delegate, resolveDirective : _resolveDirective, setText : _setText, setClass : _setClass, renderEffect : _renderEffect, createFor : _createFor, insert : _insert, setDynamicProp : _setDynamicProp, delegateEvents : _delegateEvents, template : _template } = VueVapor
+const { resolveDirective: _resolveDirective, children: _children, vModelText: _vModelText, withDirectives: _withDirectives, vShow: _vShow, vModelCheckbox: _vModelCheckbox, next: _next, delegate: _delegate, on: _on, setText: _setText, setClass: _setClass, renderEffect: _renderEffect, createFor: _createFor, insert: _insert, setDynamicProp: _setDynamicProp, delegateEvents: _delegateEvents, template: _template } = VueVapor
 const t0 = _template("<li><div class=\"view\"><input class=\"toggle\" type=\"checkbox\"><label></label><button class=\"destroy\"></button></div><input class=\"edit\" type=\"text\"></li>")
 const t1 = _template("<section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input class=\"new-todo\" autofocus autocomplete=\"off\" placeholder=\"What needs to be done?\"></header><section class=\"main\"><input id=\"toggle-all\" class=\"toggle-all\" type=\"checkbox\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer\"><span class=\"todo-count\"><strong></strong><span></span></span><ul class=\"filters\"><li><a href=\"#/all\">All</a></li><li><a href=\"#/active\">Active</a></li><li><a href=\"#/completed\">Completed</a></li></ul><button class=\"clear-completed\"> Clear completed </button></footer></section>")
 _delegateEvents("keyup", "dblclick", "click")
@@ -162,39 +155,39 @@
 function _sfc_render(_ctx) {
   const n18 = t1()
   const n0 = _children(n18, 0, 1)
+  _withDirectives(n0, [[_vModelText, () => _ctx.state.newTodo]])
   const n10 = _children(n18, 1)
+  _withDirectives(n10, [[_vShow, () => _ctx.state.todos.length]])
   const n1 = n10.firstChild
+  _withDirectives(n1, [[_vModelCheckbox, () => _ctx.state.allDone]])
   const n9 = _next(n1, 2)
   const n17 = n10.nextSibling
+  _withDirectives(n17, [[_vShow, () => _ctx.state.todos.length]])
   const n11 = _children(n17, 0, 0)
   const n12 = n11.nextSibling
   const n13 = _children(n17, 1, 0, 0)
   const n14 = _children(n17, 1, 1, 0)
   const n15 = _children(n17, 1, 2, 0)
   const n16 = _children(n17, 2)
-  _withDirectives(n0, [[_vModelText, () => _ctx.state.newTodo]])
-  _withDirectives(n1, [[_vModelCheckbox, () => _ctx.state.allDone]])
-  _withDirectives(n10, [[_vShow, () => _ctx.state.todos.length]])
   _withDirectives(n16, [[_vShow, () => _ctx.state.todos.length > _ctx.state.remaining]])
-  _withDirectives(n17, [[_vShow, () => _ctx.state.todos.length]])
-  _on(n0, "update:modelValue", () => $event => (_ctx.state.newTodo = $event))
+  _delegate(n0, "update:modelValue", () => $event => (_ctx.state.newTodo = $event))
   _delegate(n0, "keyup", () => _ctx.addTodo, {
     keys: ["enter"]
   })
-  _on(n1, "update:modelValue", () => $event => (_ctx.state.allDone = $event))
+  _delegate(n1, "update:modelValue", () => $event => (_ctx.state.allDone = $event))
   _on(n1, "change", () => $event => (_ctx.state.allDone = $event.target.checked))
   const n2 = _createFor(() => (_ctx.state.filteredTodos), (_block) => {
     const n8 = t0()
     const n4 = _children(n8, 0, 0)
+    _withDirectives(n4, [[_vModelCheckbox, () => _block.s[0].completed]])
     const n5 = n4.nextSibling
     const n6 = n5.nextSibling
     const n7 = _children(n8, 1)
-    _withDirectives(n4, [[_vModelCheckbox, () => _block.s[0].completed]])
     _withDirectives(n7, [[_vModelText, () => _block.s[0].title], [_ctx.vTodoFocus, () => _block.s[0] === _ctx.state.editedTodo]])
-    _on(n4, "update:modelValue", () => $event => (_block.s[0].completed))
+    _delegate(n4, "update:modelValue", () => $event => (_block.s[0].completed = $event))
     _delegate(n5, "dblclick", () => $event => (_ctx.editTodo(_block.s[0])))
     _delegate(n6, "click", () => $event => (_ctx.removeTodo(_block.s[0])))
-    _on(n7, "update:modelValue", () => $event => (_block.s[0].title))
+    _delegate(n7, "update:modelValue", () => $event => (_block.s[0].title = $event))
     _on(n7, "blur", () => $event => (_ctx.doneEdit(_block.s[0])))
     _delegate(n7, "keyup", () => $event => (_ctx.doneEdit(_block.s[0])), {
       keys: ["enter"]
@@ -225,5 +218,6 @@
 }
 
 _sfc_main.render = _sfc_render
-render(_sfc_main, {}, '#app')
+const app = createVaporApp(_sfc_main, {})
+app.mount('#app')
 </script>

From 20486c792f56d30b4555e5088bd4345e85125f96 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Wed, 15 May 2024 16:29:50 +0800
Subject: [PATCH 3/3] feat: skip v-model case + skip directives case

---
 .../vue-vapor/__tests__/e2e/todomvc.spec.ts   |  2 +-
 .../examples/composition/todomvc.html         | 25 +++++++++---------
 playground/src/example-todomvc.vue            | 26 +++++++++----------
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts b/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
index 3d39ee086..c26079c06 100644
--- a/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
+++ b/packages/vue-vapor/__tests__/e2e/todomvc.spec.ts
@@ -167,7 +167,7 @@ describe('e2e: todomvc', () => {
     expect(await count('.todo:not(.completed)')).toBe(3)
   }
 
-  test.fails(
+  test(
     'composition',
     async () => {
       await testTodomvc('composition')
diff --git a/packages/vue-vapor/examples/composition/todomvc.html b/packages/vue-vapor/examples/composition/todomvc.html
index 73bf87042..47faa6412 100644
--- a/packages/vue-vapor/examples/composition/todomvc.html
+++ b/packages/vue-vapor/examples/composition/todomvc.html
@@ -4,7 +4,7 @@
 <div id="app"></div>
 
 <script>
-const { createVaporApp, defineComponent, reactive, computed, watchEffect, onMounted, onUnmounted } = VueVapor
+const { createVaporApp, defineComponent, reactive, computed, watchEffect, onMounted, onUnmounted, nextTick } = VueVapor
 
 const STORAGE_KEY = 'todos-vuejs-3.x'
 const todoStorage = {
@@ -110,9 +110,11 @@
       state.todos.splice(state.todos.indexOf(todo), 1)
     }
 
-    function editTodo(todo) {
+    async function editTodo(todo) {
       state.beforeEditCache = todo.title
       state.editedTodo = todo
+      await nextTick()
+      document.getElementById(`todo-${todo.id}-input`).focus()
     }
 
     function doneEdit(todo) {
@@ -147,7 +149,7 @@
   },
 })
 
-const { resolveDirective: _resolveDirective, children: _children, vModelText: _vModelText, withDirectives: _withDirectives, vShow: _vShow, vModelCheckbox: _vModelCheckbox, next: _next, delegate: _delegate, on: _on, setText: _setText, setClass: _setClass, renderEffect: _renderEffect, createFor: _createFor, insert: _insert, setDynamicProp: _setDynamicProp, delegateEvents: _delegateEvents, template: _template } = VueVapor
+const { children: _children, vModelText: _vModelText, withDirectives: _withDirectives, vShow: _vShow, next: _next, delegate: _delegate, on: _on, setDynamicProp: _setDynamicProp, setText: _setText, setClass: _setClass, renderEffect: _renderEffect, createFor: _createFor, insert: _insert, delegateEvents: _delegateEvents, template: _template } = VueVapor
 const t0 = _template("<li><div class=\"view\"><input class=\"toggle\" type=\"checkbox\"><label></label><button class=\"destroy\"></button></div><input class=\"edit\" type=\"text\"></li>")
 const t1 = _template("<section class=\"todoapp\"><header class=\"header\"><h1>todos</h1><input class=\"new-todo\" autofocus autocomplete=\"off\" placeholder=\"What needs to be done?\"></header><section class=\"main\"><input id=\"toggle-all\" class=\"toggle-all\" type=\"checkbox\"><label for=\"toggle-all\">Mark all as complete</label><ul class=\"todo-list\"></ul></section><footer class=\"footer\"><span class=\"todo-count\"><strong></strong><span></span></span><ul class=\"filters\"><li><a href=\"#/all\">All</a></li><li><a href=\"#/active\">Active</a></li><li><a href=\"#/completed\">Completed</a></li></ul><button class=\"clear-completed\"> Clear completed </button></footer></section>")
 _delegateEvents("keyup", "dblclick", "click")
@@ -159,7 +161,6 @@
   const n10 = _children(n18, 1)
   _withDirectives(n10, [[_vShow, () => _ctx.state.todos.length]])
   const n1 = n10.firstChild
-  _withDirectives(n1, [[_vModelCheckbox, () => _ctx.state.allDone]])
   const n9 = _next(n1, 2)
   const n17 = n10.nextSibling
   _withDirectives(n17, [[_vShow, () => _ctx.state.todos.length]])
@@ -174,20 +175,17 @@
   _delegate(n0, "keyup", () => _ctx.addTodo, {
     keys: ["enter"]
   })
-  _delegate(n1, "update:modelValue", () => $event => (_ctx.state.allDone = $event))
   _on(n1, "change", () => $event => (_ctx.state.allDone = $event.target.checked))
   const n2 = _createFor(() => (_ctx.state.filteredTodos), (_block) => {
     const n8 = t0()
     const n4 = _children(n8, 0, 0)
-    _withDirectives(n4, [[_vModelCheckbox, () => _block.s[0].completed]])
     const n5 = n4.nextSibling
     const n6 = n5.nextSibling
     const n7 = _children(n8, 1)
-    _withDirectives(n7, [[_vModelText, () => _block.s[0].title], [_ctx.vTodoFocus, () => _block.s[0] === _ctx.state.editedTodo]])
-    _delegate(n4, "update:modelValue", () => $event => (_block.s[0].completed = $event))
+    _on(n4, "change", () => $event => (_block.s[0].completed = $event.target.checked))
     _delegate(n5, "dblclick", () => $event => (_ctx.editTodo(_block.s[0])))
     _delegate(n6, "click", () => $event => (_ctx.removeTodo(_block.s[0])))
-    _delegate(n7, "update:modelValue", () => $event => (_block.s[0].title = $event))
+    _on(n7, "input", () => $event => (_block.s[0].title = $event.target.value))
     _on(n7, "blur", () => $event => (_ctx.doneEdit(_block.s[0])))
     _delegate(n7, "keyup", () => $event => (_ctx.doneEdit(_block.s[0])), {
       keys: ["enter"]
@@ -197,11 +195,14 @@
     })
     const _updateEffect = () => {
       const [todo] = _block.s
+      _setDynamicProp(n4, "checked", todo.completed)
       _setText(n5, todo.title)
+      _setDynamicProp(n7, "value", todo.title)
+      _setDynamicProp(n7, "id", `todo-${todo.id}-input`)
       _setClass(n8, ["todo", {
-            completed: todo.completed,
-            editing: todo === _ctx.state.editedTodo,
-          }])
+        completed: todo.completed,
+        editing: todo === _ctx.state.editedTodo,
+      }])
     }
     _renderEffect(_updateEffect)
     return [n8, _updateEffect]
diff --git a/playground/src/example-todomvc.vue b/playground/src/example-todomvc.vue
index 82c7e88ea..1ee5ac2e7 100644
--- a/playground/src/example-todomvc.vue
+++ b/playground/src/example-todomvc.vue
@@ -6,6 +6,7 @@ import {
   watchEffect,
   onMounted,
   onUnmounted,
+  nextTick,
 } from 'vue/vapor'
 
 import 'todomvc-app-css/index.css'
@@ -114,9 +115,11 @@ export default defineComponent({
       state.todos.splice(state.todos.indexOf(todo), 1)
     }
 
-    function editTodo(todo) {
+    async function editTodo(todo) {
       state.beforeEditCache = todo.title
       state.editedTodo = todo
+      await nextTick()
+      document.getElementById(`todo-${todo.id}-input`).focus()
     }
 
     function doneEdit(todo) {
@@ -149,14 +152,6 @@ export default defineComponent({
       removeCompleted,
     }
   },
-
-  directives: {
-    'todo-focus': (el, { value }) => {
-      if (value) {
-        el.focus()
-      }
-    },
-  },
 })
 </script>
 
@@ -178,7 +173,6 @@ export default defineComponent({
         id="toggle-all"
         class="toggle-all"
         type="checkbox"
-        v-model="state.allDone"
         :checked="state.allDone"
         @change="state.allDone = $event.target.checked"
       />
@@ -194,15 +188,21 @@ export default defineComponent({
           }"
         >
           <div class="view">
-            <input class="toggle" type="checkbox" v-model="todo.completed" />
+            <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"
-            v-model="todo.title"
-            v-todo-focus="todo === state.editedTodo"
+            :value="todo.title"
+            @input="todo.title = $event.target.value"
             @blur="doneEdit(todo)"
             @keyup.enter="doneEdit(todo)"
             @keyup.escape="cancelEdit(todo)"