mirror of https://github.com/vuejs/core.git
refactor: remove @vue/vapor package
This commit is contained in:
parent
c73ee16345
commit
3a6915b587
|
@ -4,7 +4,7 @@ import {
|
|||
triggerRef,
|
||||
type ShallowRef,
|
||||
createSelector,
|
||||
} from '@vue/vapor'
|
||||
} from 'vue/vapor'
|
||||
import { buildData } from './data'
|
||||
import { defer, wrap } from './profiling'
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { shallowRef } from '@vue/vapor'
|
||||
import { shallowRef } from 'vue/vapor'
|
||||
|
||||
let ID = 1
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -179,7 +179,6 @@ async function buildApp(isVapor) {
|
|||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@vue/vapor': runtimePath,
|
||||
'vue/vapor': runtimePath,
|
||||
vue: runtimePath,
|
||||
},
|
||||
|
|
|
@ -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"]
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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__ &&
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -2,7 +2,7 @@ import {
|
|||
type EmitFn,
|
||||
type ObjectEmitsOptions,
|
||||
baseEmit,
|
||||
} from '@vue/runtime-core'
|
||||
} from '@vue/runtime-dom'
|
||||
import {
|
||||
type VaporComponent,
|
||||
type VaporComponentInstance,
|
||||
|
|
|
@ -5,7 +5,7 @@ import {
|
|||
baseNormalizePropsOptions,
|
||||
isEmitListener,
|
||||
resolvePropValue,
|
||||
} from '@vue/runtime-core'
|
||||
} from '@vue/runtime-dom'
|
||||
import { normalizeEmitsOptions } from './componentEmits'
|
||||
|
||||
export interface RawProps {
|
||||
|
|
|
@ -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!
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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.
|
|
@ -1 +0,0 @@
|
|||
# @vue/vapor
|
|
@ -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,
|
||||
}
|
||||
}
|
|
@ -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,
|
||||
)
|
||||
})
|
|
@ -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>
|
|
@ -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')
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
export * from './index.js'
|
|
@ -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:*"
|
||||
}
|
||||
}
|
|
@ -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'
|
|
@ -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:*"
|
||||
},
|
||||
|
|
|
@ -1 +1 @@
|
|||
export * from '@vue/vapor'
|
||||
export * from '@vue/runtime-vapor'
|
||||
|
|
|
@ -1 +1 @@
|
|||
export * from '@vue/vapor'
|
||||
export * from '@vue/runtime-vapor'
|
||||
|
|
|
@ -1 +1 @@
|
|||
module.exports = require('@vue/vapor')
|
||||
module.exports = require('@vue/runtime-vapor')
|
||||
|
|
|
@ -1 +1 @@
|
|||
export * from '@vue/vapor'
|
||||
export * from '@vue/runtime-vapor'
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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':
|
||||
|
|
|
@ -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"]
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue