triggerRef,
type ShallowRef,
createSelector,
-} from '@vue/vapor'
+} from 'vue/vapor'
import { buildData } from './data'
import { defer, wrap } from './profiling'
-import { shallowRef } from '@vue/vapor'
+import { shallowRef } from 'vue/vapor'
let ID = 1
/* 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
-import { createVaporApp } from '@vue/vapor'
+import { createVaporApp } from 'vue/vapor'
import App from './App.vue'
createVaporApp(App as any).mount('#app')
},
resolve: {
alias: {
- '@vue/vapor': runtimePath,
'vue/vapor': runtimePath,
vue: runtimePath,
},
"noEmit": true,
"paths": {
"vue": ["../packages/vue/src"],
- "@vue/vapor": ["../packages/vue-vapor/src"],
- "vue/vapor": ["../packages/vue-vapor/src"],
"@vue/*": ["../packages/*/src"]
}
},
/**
* @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) {
`Failed to mount app: mount target selector "${container}" returned null.`,
)
}
- return res
+ return res as any
}
if (
__DEV__ &&
-import { normalizeContainer } from './_old/apiRender'
import { insert } from './dom/element'
import { type VaporComponent, createComponent } from './component'
import {
type AppUnmountFn,
type CreateAppFunction,
createAppAPI,
-} from '@vue/runtime-core'
+ normalizeContainer,
+} from '@vue/runtime-dom'
let _createApp: CreateAppFunction<ParentNode, VaporComponent>
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
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'
type EmitFn,
type ObjectEmitsOptions,
baseEmit,
-} from '@vue/runtime-core'
+} from '@vue/runtime-dom'
import {
type VaporComponent,
type VaporComponentInstance,
baseNormalizePropsOptions,
isEmitListener,
resolvePropValue,
-} from '@vue/runtime-core'
+} from '@vue/runtime-dom'
import { normalizeEmitsOptions } from './componentEmits'
export interface RawProps {
shouldSetAsAttr,
toDisplayString,
} from '@vue/shared'
-import { warn } from '../_old/warning'
import { setStyle } from './style'
import {
MetadataKind,
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!
isString,
normalizeStyle,
} from '@vue/shared'
-import { warn } from '../_old/warning'
+import { warn } from '@vue/runtime-dom'
import { recordPropMetadata } from '../componentMetadata'
import { mergeInheritAttr } from './prop'
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,
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
refFor = false,
): NodeRef | undefined {
if (!currentInstance) return
+ // @ts-expect-error TODO
const { setupState, isUnmounted } = currentInstance
if (isUnmounted) {
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)) {
callWithErrorHandling(
ref,
currentInstance,
- VaporErrorCodes.FUNCTION_REF,
+ // @ts-expect-error
+ null,
[value, refs],
)
}
})
})
} else if (__DEV__) {
- warn('Invalid template ref type:', ref, `(${typeof ref})`)
+ // warn('Invalid template ref type:', ref, `(${typeof ref})`)
}
}
return ref
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 {
+++ /dev/null
-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.
+++ /dev/null
-# @vue/vapor
+++ /dev/null
-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,
- }
-}
+++ /dev/null
-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,
- )
-})
+++ /dev/null
-<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>
+++ /dev/null
-'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')
-}
+++ /dev/null
-export * from './index.js'
+++ /dev/null
-{
- "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:*"
- }
-}
+++ /dev/null
-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'
"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:*"
},
-export * from '@vue/vapor'
+export * from '@vue/runtime-vapor'
-export * from '@vue/vapor'
+export * from '@vue/runtime-vapor'
-module.exports = require('@vue/vapor')
+module.exports = require('@vue/runtime-vapor')
-export * from '@vue/vapor'
+export * from '@vue/runtime-vapor'
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'),
'@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
specifier: workspace:*
version: link:../vue
- packages/vue-vapor:
- dependencies:
- '@vue/runtime-vapor':
- specifier: workspace:*
- version: link:../runtime-vapor
-
playground:
dependencies:
'@vueuse/core':
"rootDir": ".",
"paths": {
"@vue/compat": ["packages/vue-compat/src"],
- "@vue/vapor": ["packages/vue-vapor/src"],
"@vue/*": ["packages/*/src"],
"vue": ["packages/vue/src"]
},