refactor: remove @vue/vapor package

This commit is contained in:
Evan You 2024-12-04 14:22:26 +08:00
parent c73ee16345
commit 3a6915b587
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
32 changed files with 41 additions and 826 deletions

View File

@ -4,7 +4,7 @@ import {
triggerRef,
type ShallowRef,
createSelector,
} from '@vue/vapor'
} from 'vue/vapor'
import { buildData } from './data'
import { defer, wrap } from './profiling'

View File

@ -1,4 +1,4 @@
import { shallowRef } from '@vue/vapor'
import { shallowRef } from 'vue/vapor'
let ID = 1

View File

@ -2,7 +2,7 @@
/* eslint-disable no-restricted-syntax */
/* eslint-disable no-restricted-globals */
import { nextTick } from '@vue/vapor'
import { nextTick } from 'vue/vapor'
declare namespace globalThis {
let doProfile: boolean

View File

@ -1,4 +1,4 @@
import { createVaporApp } from '@vue/vapor'
import { createVaporApp } from 'vue/vapor'
import App from './App.vue'
createVaporApp(App as any).mount('#app')

View File

@ -179,7 +179,6 @@ async function buildApp(isVapor) {
},
resolve: {
alias: {
'@vue/vapor': runtimePath,
'vue/vapor': runtimePath,
vue: runtimePath,
},

View File

@ -18,8 +18,6 @@
"noEmit": true,
"paths": {
"vue": ["../packages/vue/src"],
"@vue/vapor": ["../packages/vue-vapor/src"],
"vue/vapor": ["../packages/vue-vapor/src"],
"@vue/*": ["../packages/*/src"]
}
},

View File

@ -230,9 +230,9 @@ function injectCompilerOptionsCheck(app: App) {
/**
* @internal
*/
export function normalizeContainer(
container: Element | ShadowRoot | string,
): Element | ShadowRoot | null {
export function normalizeContainer<T extends ParentNode>(
container: T | string,
): T | null {
if (isString(container)) {
const res = document.querySelector(container)
if (__DEV__ && !res) {
@ -240,7 +240,7 @@ export function normalizeContainer(
`Failed to mount app: mount target selector "${container}" returned null.`,
)
}
return res
return res as any
}
if (
__DEV__ &&

View File

@ -1,4 +1,3 @@
import { normalizeContainer } from './_old/apiRender'
import { insert } from './dom/element'
import { type VaporComponent, createComponent } from './component'
import {
@ -6,7 +5,8 @@ import {
type AppUnmountFn,
type CreateAppFunction,
createAppAPI,
} from '@vue/runtime-core'
normalizeContainer,
} from '@vue/runtime-dom'
let _createApp: CreateAppFunction<ParentNode, VaporComponent>
@ -32,7 +32,7 @@ export const createVaporApp: CreateAppFunction<
const app = _createApp(comp)
const mount = app.mount
app.mount = (container, ...args: any[]) => {
container = normalizeContainer(container) // TODO reuse from runtime-dom
container = normalizeContainer(container) as ParentNode
return mount(container, ...args)
}
return app

View File

@ -11,7 +11,7 @@ import {
nextUid,
popWarningContext,
pushWarningContext,
} from '@vue/runtime-core'
} from '@vue/runtime-dom'
import type { Block } from './block'
import { pauseTracking, resetTracking } from '@vue/reactivity'
import { EMPTY_OBJ, isFunction } from '@vue/shared'

View File

@ -2,7 +2,7 @@ import {
type EmitFn,
type ObjectEmitsOptions,
baseEmit,
} from '@vue/runtime-core'
} from '@vue/runtime-dom'
import {
type VaporComponent,
type VaporComponentInstance,

View File

@ -5,7 +5,7 @@ import {
baseNormalizePropsOptions,
isEmitListener,
resolvePropValue,
} from '@vue/runtime-core'
} from '@vue/runtime-dom'
import { normalizeEmitsOptions } from './componentEmits'
export interface RawProps {

View File

@ -12,7 +12,6 @@ import {
shouldSetAsAttr,
toDisplayString,
} from '@vue/shared'
import { warn } from '../_old/warning'
import { setStyle } from './style'
import {
MetadataKind,
@ -20,7 +19,8 @@ import {
recordPropMetadata,
} from '../componentMetadata'
import { on } from './event'
import { currentInstance } from '../_old/component'
import { currentInstance } from '../component'
import { warn } from '@vue/runtime-dom'
export function mergeInheritAttr(key: string, value: any): unknown {
const instance = currentInstance!

View File

@ -6,7 +6,7 @@ import {
isString,
normalizeStyle,
} from '@vue/shared'
import { warn } from '../_old/warning'
import { warn } from '@vue/runtime-dom'
import { recordPropMetadata } from '../componentMetadata'
import { mergeInheritAttr } from './prop'

View File

@ -1,10 +1,15 @@
import { type Ref, isRef, onScopeDispose } from '@vue/reactivity'
import {
type ComponentInternalInstance,
type VaporComponentInstance,
currentInstance,
isVaporComponent,
} from '../_old/component'
import { VaporErrorCodes, callWithErrorHandling } from '../_old/errorHandling'
} from '../component'
import {
type SchedulerJob,
callWithErrorHandling,
queuePostFlushCb,
warn,
} from '@vue/runtime-dom'
import {
EMPTY_OBJ,
hasOwn,
@ -13,11 +18,9 @@ import {
isString,
remove,
} from '@vue/shared'
import { warn } from '../_old/warning'
import { type SchedulerJob, queuePostFlushCb } from '../_old/scheduler'
export type NodeRef = string | Ref | ((ref: Element) => void)
export type RefEl = Element | ComponentInternalInstance
export type RefEl = Element | VaporComponentInstance
/**
* Function for handling a template ref
@ -29,6 +32,7 @@ export function setRef(
refFor = false,
): NodeRef | undefined {
if (!currentInstance) return
// @ts-expect-error TODO
const { setupState, isUnmounted } = currentInstance
if (isUnmounted) {
@ -46,7 +50,7 @@ export function setRef(
if (oldRef != null && oldRef !== ref) {
if (isString(oldRef)) {
refs[oldRef] = null
if (hasOwn(setupState, oldRef)) {
if (setupState && hasOwn(setupState, oldRef)) {
setupState[oldRef] = null
}
} else if (isRef(oldRef)) {
@ -59,7 +63,8 @@ export function setRef(
callWithErrorHandling(
ref,
currentInstance,
VaporErrorCodes.FUNCTION_REF,
// @ts-expect-error
null,
[value, refs],
)
}
@ -126,7 +131,7 @@ export function setRef(
})
})
} else if (__DEV__) {
warn('Invalid template ref type:', ref, `(${typeof ref})`)
// warn('Invalid template ref type:', ref, `(${typeof ref})`)
}
}
return ref

View File

@ -1,5 +1,5 @@
import { ReactiveEffect } from '@vue/reactivity'
import { type SchedulerJob, queueJob } from '@vue/runtime-core'
import { type SchedulerJob, queueJob } from '@vue/runtime-dom'
import { currentInstance } from './component'
export function renderEffect(fn: () => void): void {

View File

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2018-present, Yuxi (Evan) You
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@ -1 +0,0 @@
# @vue/vapor

View File

@ -1,209 +0,0 @@
import puppeteer, {
type Browser,
type ClickOptions,
type Page,
type PuppeteerLaunchOptions,
} from 'puppeteer'
export const E2E_TIMEOUT: number = 30 * 1000
const puppeteerOptions: PuppeteerLaunchOptions = {
args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : [],
headless: true,
}
const maxTries = 30
export const timeout = (n: number): Promise<any> =>
new Promise(r => setTimeout(r, n))
export async function expectByPolling(
poll: () => Promise<any>,
expected: string,
): Promise<void> {
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)
}
}
}
interface PuppeteerUtils {
page: () => Page
click(selector: string, options?: ClickOptions): Promise<void>
count(selector: string): Promise<number>
text(selector: string): Promise<string | null>
value(selector: string): Promise<string>
html(selector: string): Promise<string>
classList(selector: string): Promise<string[]>
children(selector: string): Promise<any[]>
isVisible(selector: string): Promise<boolean>
isChecked(selector: string): Promise<boolean>
isFocused(selector: string): Promise<boolean>
setValue(selector: string, value: string): Promise<any>
typeValue(selector: string, value: string): Promise<any>
enterValue(selector: string, value: string): Promise<any>
clearValue(selector: string): Promise<any>
timeout(time: number): Promise<any>
nextFrame(): Promise<any>
}
export function setupPuppeteer(args?: string[]): PuppeteerUtils {
let browser: Browser
let page: Page
const resolvedOptions = args
? {
...puppeteerOptions,
args: [...puppeteerOptions.args!, ...args],
}
: puppeteerOptions
beforeAll(async () => {
browser = await puppeteer.launch(resolvedOptions)
}, 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())
}
})
})
afterEach(async () => {
await page.close()
})
afterAll(async () => {
await browser.close()
})
async function click(
selector: string,
options?: ClickOptions,
): Promise<void> {
await page.click(selector, options)
}
async function count(selector: string): Promise<number> {
return (await page.$$(selector)).length
}
async function text(selector: string): Promise<string | null> {
return page.$eval(selector, node => node.textContent)
}
async function value(selector: string): Promise<string> {
return page.$eval(selector, node => (node as HTMLInputElement).value)
}
async function html(selector: string): Promise<string> {
return page.$eval(selector, node => node.innerHTML)
}
async function classList(selector: string): Promise<string[]> {
return page.$eval(selector, (node: any) => [...node.classList])
}
async function children(selector: string): Promise<any[]> {
return page.$eval(selector, (node: any) => [...node.children])
}
async function isVisible(selector: string): Promise<boolean> {
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,
}
}

View File

@ -1,177 +0,0 @@
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') {
let baseUrl = `../../examples/${apiType}/todomvc.html`
baseUrl = `file://${path.resolve(__dirname, baseUrl)}`
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(
'composition',
async () => {
await testTodomvc('composition')
},
E2E_TIMEOUT,
)
})

View File

@ -1,289 +0,0 @@
<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 {
createVaporApp,
defineComponent,
reactive,
computed,
watchEffect,
onMounted,
onUnmounted,
nextTick,
} = 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)
}
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,
}
},
})
const {
children: _children,
vModelText: _vModelText,
withDirectives: _withDirectives,
vShow: _vShow,
next: _next,
delegate: _delegate,
on: _on,
renderEffect: _renderEffect,
setDynamicProp: _setDynamicProp,
setText: _setText,
setClass: _setClass,
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', 'input')
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
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(n16, [
[_vShow, () => _ctx.state.todos.length > _ctx.state.remaining],
])
_delegate(
n0,
'update:modelValue',
() => $event => (_ctx.state.newTodo = $event),
)
_delegate(n0, 'keyup', () => _ctx.addTodo, {
keys: ['enter'],
})
_on(
n1,
'change',
() => $event => (_ctx.state.allDone = $event.target.checked),
)
const n2 = _createFor(
() => _ctx.state.filteredTodos,
_ctx2 => {
const n8 = t0()
const n4 = _children(n8, 0, 0)
const n5 = n4.nextSibling
const n6 = n5.nextSibling
const n7 = _children(n8, 1)
_on(
n4,
'change',
() => $event => (_ctx2[0].completed = $event.target.checked),
)
_delegate(n5, 'dblclick', () => $event => _ctx.editTodo(_ctx2[0]))
_delegate(n6, 'click', () => $event => _ctx.removeTodo(_ctx2[0]))
_delegate(
n7,
'input',
() => $event => (_ctx2[0].title = $event.target.value),
)
_on(n7, 'blur', () => $event => _ctx.doneEdit(_ctx2[0]))
_delegate(n7, 'keyup', () => $event => _ctx.doneEdit(_ctx2[0]), {
keys: ['enter'],
})
_delegate(n7, 'keyup', () => $event => _ctx.cancelEdit(_ctx2[0]), {
keys: ['escape'],
})
_renderEffect(() => _setDynamicProp(n4, 'checked', _ctx2[0].completed))
_renderEffect(() => {
_setText(n5, _ctx2[0].title)
_setDynamicProp(n7, 'value', _ctx2[0].title)
})
_renderEffect(() =>
_setDynamicProp(n7, 'id', `todo-${_ctx2[0].id}-input`),
)
_renderEffect(() =>
_setClass(n8, [
'todo',
{
completed: _ctx2[0].completed,
editing: _ctx2[0] === _ctx.state.editedTodo,
},
]),
)
return n8
},
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
const app = createVaporApp(_sfc_main, {})
app.mount('#app')
</script>

View File

@ -1,7 +0,0 @@
'use strict'
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/vue-vapor.cjs.prod.js')
} else {
module.exports = require('./dist/vue-vapor.cjs.js')
}

View File

@ -1 +0,0 @@
export * from './index.js'

View File

@ -1,59 +0,0 @@
{
"name": "@vue/vapor",
"version": "3.0.0-vapor",
"description": "The progressive JavaScript framework for building modern web UI.",
"main": "index.js",
"module": "dist/vue-vapor.esm-bundler.js",
"types": "dist/vue-vapor.d.ts",
"unpkg": "dist/vue-vapor.global.js",
"jsdelivr": "dist/vue-vapor.global.js",
"files": [
"index.js",
"index.mjs",
"dist"
],
"exports": {
".": {
"types": "./dist/vue-vapor.d.ts",
"import": {
"node": "./index.mjs",
"default": "./dist/vue-vapor.esm-bundler.js"
},
"require": {
"node": {
"production": "./dist/vue-vapor.cjs.prod.js",
"development": "./dist/vue-vapor.cjs.js",
"default": "./index.js"
},
"default": "./index.js"
}
},
"./dist/*": "./dist/*",
"./package.json": "./package.json"
},
"buildOptions": {
"name": "VueVapor",
"formats": [
"esm-bundler",
"cjs",
"global",
"esm-browser"
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/vue-vapor.git"
},
"keywords": [
"vue"
],
"author": "Evan You",
"license": "MIT",
"bugs": {
"url": "https://github.com/vuejs/vue-vapor/issues"
},
"homepage": "https://github.com/vuejs/vue-vapor/tree/main/packages/vapor#readme",
"dependencies": {
"@vue/runtime-vapor": "workspace:*"
}
}

View File

@ -1,15 +0,0 @@
import { initCustomFormatter } from '@vue/runtime-dom'
if (__DEV__ && __BROWSER__) {
/* istanbul ignore if */
if (!__ESM_BUNDLER__) {
console.info(
`You are running a development build of Vue.\n` +
`Make sure to use the production build (*.prod.js) when deploying for production.`,
)
}
initCustomFormatter()
}
export * from '@vue/runtime-vapor/src'

View File

@ -107,9 +107,9 @@
"homepage": "https://github.com/vuejs/vue-vapor/tree/main/packages/vue#readme",
"dependencies": {
"@vue/shared": "workspace:*",
"@vue/vapor": "workspace:*",
"@vue/compiler-dom": "workspace:*",
"@vue/runtime-dom": "workspace:*",
"@vue/runtime-vapor": "workspace:*",
"@vue/compiler-sfc": "workspace:*",
"@vue/server-renderer": "workspace:*"
},

View File

@ -1 +1 @@
export * from '@vue/vapor'
export * from '@vue/runtime-vapor'

View File

@ -1 +1 @@
export * from '@vue/vapor'
export * from '@vue/runtime-vapor'

View File

@ -1 +1 @@
module.exports = require('@vue/vapor')
module.exports = require('@vue/runtime-vapor')

View File

@ -1 +1 @@
export * from '@vue/vapor'
export * from '@vue/runtime-vapor'

View File

@ -16,9 +16,8 @@ export function DevPlugin({ browser = false } = {}) {
return {
resolve: {
alias: {
'vue/vapor': resolve('vue/vapor/index.mjs'),
'vue/vapor': resolve('runtime-vapor/src'),
vue: resolve('vue/src/runtime.ts'),
'@vue/vapor': resolve('vue-vapor/src'),
'@vue/runtime-core': resolve('runtime-core/src'),
'@vue/runtime-dom': resolve('runtime-dom/src'),

View File

@ -468,15 +468,15 @@ importers:
'@vue/runtime-dom':
specifier: workspace:*
version: link:../runtime-dom
'@vue/runtime-vapor':
specifier: workspace:*
version: link:../runtime-vapor
'@vue/server-renderer':
specifier: workspace:*
version: link:../server-renderer
'@vue/shared':
specifier: workspace:*
version: link:../shared
'@vue/vapor':
specifier: workspace:*
version: link:../vue-vapor
typescript:
specifier: '*'
version: 5.5.4
@ -496,12 +496,6 @@ importers:
specifier: workspace:*
version: link:../vue
packages/vue-vapor:
dependencies:
'@vue/runtime-vapor':
specifier: workspace:*
version: link:../runtime-vapor
playground:
dependencies:
'@vueuse/core':

View File

@ -23,7 +23,6 @@
"rootDir": ".",
"paths": {
"@vue/compat": ["packages/vue-compat/src"],
"@vue/vapor": ["packages/vue-vapor/src"],
"@vue/*": ["packages/*/src"],
"vue": ["packages/vue/src"]
},