mirror of https://github.com/vuejs/core.git
chore: upgrade deps, remove playground demos
This commit is contained in:
三咲智子 Kevin Deng
parent
b8713589de
commit
c366948ded
|
|
@ -9,13 +9,13 @@
|
|||
"start": "node index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@vapor",
|
||||
"@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5",
|
||||
"connect": "^3.7.0",
|
||||
"sirv": "^2.0.4",
|
||||
"vite": "^5.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/connect": "^3.4.38",
|
||||
"terser": "^5.31.6"
|
||||
"terser": "^5.33.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
"preview": "node ./setup/vite.js preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^10.7.2",
|
||||
"@vueuse/core": "^11.1.0",
|
||||
"vue": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@0.0.0-alpha.4",
|
||||
"vite": "^5.0.12",
|
||||
"vite-hyper-config": "^0.2.1",
|
||||
"vite-plugin-inspect": "^0.7.42"
|
||||
"@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5",
|
||||
"vite": "catalog:",
|
||||
"vite-hyper-config": "^0.4.0",
|
||||
"vite-plugin-inspect": "^0.8.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ startVite(
|
|||
{ plugins: [DevPlugin()] },
|
||||
{
|
||||
deps: {
|
||||
inline: ['@vue-vapor/vite-plugin-vue'],
|
||||
inline: ['@vitejs/plugin-vue'],
|
||||
},
|
||||
},
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
*
|
||||
!.gitignore
|
||||
!App.vue
|
||||
!main.ts
|
||||
!style.css
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue/vapor'
|
||||
|
||||
const count = ref(1)
|
||||
|
||||
const handleClick = () => {
|
||||
count.value++
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="handleClick">
|
||||
{{ count }}
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
<script setup lang="ts" vapor>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
onUnmounted,
|
||||
ref,
|
||||
} from 'vue/vapor'
|
||||
import SubComp from './sub-comp.vue'
|
||||
|
||||
const bar = ref('update')
|
||||
const id = ref('id')
|
||||
const p = ref<any>({
|
||||
bar,
|
||||
id: 'not id',
|
||||
test: 100,
|
||||
})
|
||||
|
||||
function update() {
|
||||
bar.value = 'updated'
|
||||
p.value.foo = 'updated foo'
|
||||
p.value.newAttr = 'new attr'
|
||||
id.value = 'updated id'
|
||||
}
|
||||
|
||||
function update2() {
|
||||
delete p.value.test
|
||||
}
|
||||
|
||||
onBeforeMount(() => console.log('root: before mount'))
|
||||
onMounted(() => console.log('root: mounted'))
|
||||
onBeforeUnmount(() => console.log('root: before unmount'))
|
||||
onUnmounted(() => console.log('root: unmounted'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
root comp
|
||||
<button @click="update">update</button>
|
||||
<button @click="update2">update2</button>
|
||||
<SubComp foo="foo" v-bind="p" :baz="'baz'" :id />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ObjectDirective, FunctionDirective, ref } from '@vue/vapor'
|
||||
|
||||
const text = ref('created (overwrite by v-text), ')
|
||||
const counter = ref(0)
|
||||
const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
|
||||
created(node) {
|
||||
if (!node.parentElement) {
|
||||
node.textContent += 'created, '
|
||||
node.style.color = 'red'
|
||||
} else {
|
||||
alert('!')
|
||||
}
|
||||
},
|
||||
beforeMount(node) {
|
||||
if (!node.parentElement) node.textContent += 'beforeMount, '
|
||||
},
|
||||
mounted(node) {
|
||||
if (node.parentElement) node.textContent += 'mounted, '
|
||||
},
|
||||
beforeUpdate(node, binding) {
|
||||
console.log('beforeUpdate', binding, node)
|
||||
},
|
||||
updated(node, binding) {
|
||||
console.log('updated', binding, node)
|
||||
},
|
||||
}
|
||||
const vDirectiveSimple: FunctionDirective<HTMLDivElement> = (node, binding) => {
|
||||
console.log('v-directive-simple:', node, binding)
|
||||
}
|
||||
const handleClick = () => {
|
||||
text.value = 'change'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-directive:foo.bar="text"
|
||||
v-text="text"
|
||||
v-directive-simple="text"
|
||||
@click="handleClick"
|
||||
/>
|
||||
<button @click="counter++">
|
||||
{{ counter }} (Click to Update Other Element)
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html {
|
||||
color-scheme: dark;
|
||||
background-color: #000;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<template>{{ '1' }}{{ '2' }}</template>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<template>
|
||||
1{{ 2 }}{{ 3 }}4
|
||||
<div>div</div>
|
||||
</template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<template>{{ '1' }}2{{ '3' }}</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
{{ 1 }}{{ 2 }}3{{ 4 }}{{ 5 }}6{{ 7 }}{{ 8 }}9{{ 'A' }}{{ 'B' }}
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const name = 'click'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @[name]="">click me</button>
|
||||
</template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<template>{{ '1' }}</template>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue/vapor'
|
||||
const handleClick = () => {
|
||||
console.log('Hello, Vapor!')
|
||||
}
|
||||
|
||||
const i = ref(0)
|
||||
const event = ref('click')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form>
|
||||
<button @click="handleClick">submit</button>
|
||||
</form>
|
||||
|
||||
<form>
|
||||
<button @click.prevent="handleClick">no submit</button>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
{{ i }}
|
||||
<button @[event].prevent="i++">Add by {{ event }}</button>
|
||||
<button @click="event = event === 'click' ? 'contextmenu' : 'click'">
|
||||
Change Event
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
computed,
|
||||
watchEffect,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
} from 'vue/vapor'
|
||||
|
||||
import 'todomvc-app-css/index.css'
|
||||
|
||||
const STORAGE_KEY = 'todos-vuejs-3.x'
|
||||
const todoStorage = {
|
||||
fetch() {
|
||||
const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
|
||||
todos.forEach((todo, index) => {
|
||||
todo.id = index
|
||||
})
|
||||
todoStorage.uid = todos.length
|
||||
return todos
|
||||
},
|
||||
save(todos) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
|
||||
},
|
||||
}
|
||||
|
||||
const filters = {
|
||||
all(todos) {
|
||||
return todos
|
||||
},
|
||||
active(todos) {
|
||||
return todos.filter(todo => {
|
||||
return !todo.completed
|
||||
})
|
||||
},
|
||||
completed(todos) {
|
||||
return todos.filter(function (todo) {
|
||||
return todo.completed
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
function pluralize(n) {
|
||||
return n === 1 ? 'item' : 'items'
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
todos: todoStorage.fetch(),
|
||||
editedTodo: null,
|
||||
newTodo: '',
|
||||
beforeEditCache: '',
|
||||
visibility: 'all',
|
||||
remaining: computed(() => {
|
||||
return filters.active(state.todos).length
|
||||
}),
|
||||
remainingText: computed(() => {
|
||||
return ` ${pluralize(state.remaining)} left`
|
||||
}),
|
||||
filteredTodos: computed(() => {
|
||||
return filters[state.visibility](state.todos)
|
||||
}),
|
||||
allDone: computed({
|
||||
get: function () {
|
||||
return state.remaining === 0
|
||||
},
|
||||
set: function (value) {
|
||||
state.todos.forEach(todo => {
|
||||
todo.completed = value
|
||||
})
|
||||
},
|
||||
}),
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
todoStorage.save(state.todos)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('hashchange', onHashChange)
|
||||
onHashChange()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('hashchange', onHashChange)
|
||||
})
|
||||
|
||||
function onHashChange() {
|
||||
const visibility = window.location.hash.replace(/#\/?/, '')
|
||||
if (filters[visibility]) {
|
||||
state.visibility = visibility
|
||||
} else {
|
||||
window.location.hash = ''
|
||||
state.visibility = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
function addTodo() {
|
||||
const value = state.newTodo && state.newTodo.trim()
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
state.todos.push({
|
||||
id: todoStorage.uid++,
|
||||
title: value,
|
||||
completed: false,
|
||||
})
|
||||
state.newTodo = ''
|
||||
}
|
||||
|
||||
function removeTodo(todo) {
|
||||
state.todos.splice(state.todos.indexOf(todo), 1)
|
||||
}
|
||||
|
||||
async function editTodo(todo) {
|
||||
state.beforeEditCache = todo.title
|
||||
state.editedTodo = todo
|
||||
await nextTick()
|
||||
document.getElementById(`todo-${todo.id}-input`).focus()
|
||||
}
|
||||
|
||||
function doneEdit(todo) {
|
||||
if (!state.editedTodo) {
|
||||
return
|
||||
}
|
||||
state.editedTodo = null
|
||||
todo.title = todo.title.trim()
|
||||
if (!todo.title) {
|
||||
removeTodo(todo)
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit(todo) {
|
||||
state.editedTodo = null
|
||||
todo.title = state.beforeEditCache
|
||||
}
|
||||
|
||||
function removeCompleted() {
|
||||
state.todos = filters.active(state.todos)
|
||||
}
|
||||
|
||||
return {
|
||||
state,
|
||||
addTodo,
|
||||
removeTodo,
|
||||
editTodo,
|
||||
doneEdit,
|
||||
cancelEdit,
|
||||
removeCompleted,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="todoapp">
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input
|
||||
class="new-todo"
|
||||
autofocus
|
||||
autocomplete="off"
|
||||
placeholder="What needs to be done?"
|
||||
v-model="state.newTodo"
|
||||
@keyup.enter="addTodo"
|
||||
/>
|
||||
</header>
|
||||
<section class="main" v-show="state.todos.length">
|
||||
<input
|
||||
id="toggle-all"
|
||||
class="toggle-all"
|
||||
type="checkbox"
|
||||
:checked="state.allDone"
|
||||
@change="state.allDone = $event.target.checked"
|
||||
/>
|
||||
<label for="toggle-all">Mark all as complete</label>
|
||||
<ul class="todo-list">
|
||||
<li
|
||||
v-for="todo in state.filteredTodos"
|
||||
class="todo"
|
||||
:key="todo.id"
|
||||
:class="{
|
||||
completed: todo.completed,
|
||||
editing: todo === state.editedTodo,
|
||||
}"
|
||||
>
|
||||
<div class="view">
|
||||
<input
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
:checked="todo.completed"
|
||||
@change="todo.completed = $event.target.checked"
|
||||
/>
|
||||
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
|
||||
<button class="destroy" @click="removeTodo(todo)"></button>
|
||||
</div>
|
||||
<input
|
||||
:id="`todo-${todo.id}-input`"
|
||||
class="edit"
|
||||
type="text"
|
||||
:value="todo.title"
|
||||
@input="todo.title = $event.target.value"
|
||||
@blur="doneEdit(todo)"
|
||||
@keyup.enter="doneEdit(todo)"
|
||||
@keyup.escape="cancelEdit(todo)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="footer" v-show="state.todos.length">
|
||||
<span class="todo-count">
|
||||
<strong>{{ state.remaining }}</strong>
|
||||
<span>{{ state.remainingText }}</span>
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li>
|
||||
<a href="#/all" :class="{ selected: state.visibility === 'all' }"
|
||||
>All</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#/active"
|
||||
:class="{ selected: state.visibility === 'active' }"
|
||||
>Active</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#/completed"
|
||||
:class="{ selected: state.visibility === 'completed' }"
|
||||
>Completed</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="clear-completed"
|
||||
@click="removeCompleted"
|
||||
v-show="state.todos.length > state.remaining"
|
||||
>
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const arr = reactive(['foo', 'bar', 'baz', 'qux'])
|
||||
const selected = ref('foo')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-for="item of arr"
|
||||
v-memo="[selected === item]"
|
||||
:class="{ danger: selected === item }"
|
||||
@click="selected = item"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.danger {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<template>
|
||||
<p>hello</p>
|
||||
<p>world</p>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<div :id="'hello'"></div>
|
||||
</template>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { template } from '@vue/runtime-vapor'
|
||||
|
||||
const comp = () => {
|
||||
return template('<div><h1>Hello')()
|
||||
}
|
||||
comp.vapor = true
|
||||
|
||||
export default comp
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref } from '@vue/vapor'
|
||||
|
||||
const count = ref(1)
|
||||
const obj = computed(() => ({ id: String(count.value), subObj: { a: 'xxx' } }))
|
||||
const key = ref('id')
|
||||
|
||||
const handleClick = () => {
|
||||
count.value++
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="handleClick">click me to update props</button>
|
||||
|
||||
<!-- prop id's value should update reactively -->
|
||||
<button :id="'before'" :[key]="'dynamic key after' + count">
|
||||
{{ count }}
|
||||
</button>
|
||||
<!-- prop id's value should update only once -->
|
||||
<button :[key]="'dynamic key before' + count" :id="'before'">
|
||||
{{ count }}
|
||||
</button>
|
||||
<!-- object props should update reactively -->
|
||||
<button v-bind="obj">{{ count }}</button>
|
||||
<button v-bind="{ id: `${count}`, subObj: { a: 'xxx' } }">
|
||||
{{ count }}
|
||||
</button>
|
||||
<!-- prop id's value should update reactively since it was override by object props -->
|
||||
<button :id="'before'" v-bind="obj">{{ count }}</button>
|
||||
<button :[key]="'dynamic key before'" v-bind="obj">
|
||||
{{ count }}
|
||||
</button>
|
||||
<!-- prop id's value should update only once since the prop id in object props was override -->
|
||||
<button v-bind="obj" :id="'after'">{{ count }}</button>
|
||||
<button v-bind="obj" :[key]="'dynamic key after'">{{ count }}</button>
|
||||
|
||||
<!-- old props will be reset after dynamic key changed -->
|
||||
<button :[`key${count}`]="'dynamic key'">{{ count }}</button>
|
||||
</template>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
// @ts-check
|
||||
import {
|
||||
createComponent,
|
||||
defineComponent,
|
||||
on,
|
||||
reactive,
|
||||
ref,
|
||||
renderEffect,
|
||||
setText,
|
||||
template,
|
||||
} from '@vue/vapor'
|
||||
|
||||
const t0 = template('<button></button>')
|
||||
|
||||
export default defineComponent({
|
||||
vapor: true,
|
||||
setup() {
|
||||
const count = ref(1)
|
||||
const props = reactive({
|
||||
a: 'b',
|
||||
'foo-bar': 100,
|
||||
})
|
||||
const handleClick = () => {
|
||||
count.value++
|
||||
props['foo-bar']++
|
||||
// @ts-expect-error
|
||||
props.boolean = true
|
||||
console.log(count)
|
||||
}
|
||||
|
||||
return (() => {
|
||||
const n0 = /** @type {HTMLButtonElement} */ (t0())
|
||||
on(n0, 'click', () => handleClick)
|
||||
renderEffect(() => setText(n0, count.value))
|
||||
/** @type {any} */
|
||||
const n1 = createComponent(child, [
|
||||
{
|
||||
/* <Comp :count="count" /> */
|
||||
count: () => {
|
||||
// console.trace('access')
|
||||
return count.value
|
||||
},
|
||||
/* <Comp :inline-double="count * 2" /> */
|
||||
inlineDouble: () => count.value * 2,
|
||||
id: () => 'hello',
|
||||
},
|
||||
() => props,
|
||||
])
|
||||
return [n0, n1]
|
||||
})()
|
||||
},
|
||||
})
|
||||
|
||||
const t1 = template('<p></p>')
|
||||
const child = defineComponent({
|
||||
vapor: true,
|
||||
|
||||
props: {
|
||||
count: { type: Number, default: 1 },
|
||||
inlineDouble: { type: Number, default: 2 },
|
||||
fooBar: { type: Number, required: true },
|
||||
boolean: { type: Boolean },
|
||||
},
|
||||
|
||||
setup(props, { attrs }) {
|
||||
console.log(props, { ...props })
|
||||
console.log(attrs, { ...attrs })
|
||||
|
||||
return (() => {
|
||||
const n0 = /** @type {HTMLParagraphElement} */ (t1())
|
||||
renderEffect(() =>
|
||||
setText(n0, props.count + ' * 2 = ' + props.inlineDouble),
|
||||
)
|
||||
const n1 = /** @type {HTMLParagraphElement} */ (t1())
|
||||
renderEffect(() => setText(n1, props.fooBar, ', ', props.boolean))
|
||||
return [n0, n1]
|
||||
})()
|
||||
},
|
||||
})
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watchEffect } from 'vue/vapor'
|
||||
|
||||
const count = ref(0)
|
||||
const inc = () => count.value++
|
||||
const dec = () => count.value--
|
||||
const handler = ref(inc)
|
||||
|
||||
watchEffect(() => {
|
||||
if (count.value > 5) {
|
||||
handler.value = dec
|
||||
} else if (count.value < -5) {
|
||||
handler.value = inc
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="handler">{{ count }}</button>
|
||||
</template>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import type { Data } from '@vue/runtime-shared'
|
||||
import { ref, onMounted } from 'vue/vapor'
|
||||
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
const buttonRef = ref<HTMLButtonElement>()
|
||||
|
||||
function handleSetRef(el: HTMLButtonElement, refs: Data) {
|
||||
buttonRef.value = el
|
||||
console.log(el, refs)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log(inputRef.value, buttonRef.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" ref="inputRef" />
|
||||
<!-- @vue-expect-error TODO fix types -->
|
||||
<button :ref="handleSetRef">Button</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
onWatcherCleanup,
|
||||
ref,
|
||||
watch,
|
||||
watchEffect,
|
||||
watchPostEffect,
|
||||
watchSyncEffect,
|
||||
} from 'vue/vapor'
|
||||
|
||||
const source = ref(0)
|
||||
const add = () => source.value++
|
||||
|
||||
watchPostEffect(() => {
|
||||
const current = source.value
|
||||
console.log('post', current)
|
||||
onWatcherCleanup(() => console.log('cleanup post', current))
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const current = source.value
|
||||
console.log('pre', current)
|
||||
onWatcherCleanup(() => console.log('cleanup pre', current))
|
||||
})
|
||||
|
||||
watchSyncEffect(() => {
|
||||
const current = source.value
|
||||
console.log('sync', current)
|
||||
onWatcherCleanup(() => console.log('cleanup sync', current))
|
||||
})
|
||||
|
||||
watch(source, (value, oldValue) => {
|
||||
console.log('watch', value, 'oldValue:', oldValue)
|
||||
onWatcherCleanup(() => console.log('cleanup watch', value))
|
||||
})
|
||||
|
||||
const onUpdate = (arg: any) => {
|
||||
const current = source.value
|
||||
console.log('render', current)
|
||||
onWatcherCleanup(() => console.log('cleanup render', current))
|
||||
return arg
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p>Please check the console</p>
|
||||
<div>
|
||||
<button @click="add">Add</button>
|
||||
|
|
||||
<span>{{ onUpdate(source) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
background-color: #000;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from '@vue/vapor'
|
||||
|
||||
const visible = ref(true)
|
||||
function handleClick() {
|
||||
visible.value = !visible.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="handleClick">toggle</button>
|
||||
<h1 v-show="visible">hello world</h1>
|
||||
</template>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
// @ts-check
|
||||
import {
|
||||
children,
|
||||
createComponent,
|
||||
defineComponent,
|
||||
insert,
|
||||
on,
|
||||
ref,
|
||||
renderEffect,
|
||||
setText,
|
||||
template,
|
||||
} from '@vue/vapor'
|
||||
|
||||
// <template #mySlot="{ message, changeMessage }">
|
||||
// <div clas="slotted">
|
||||
// <h1>{{ message }}</h1>
|
||||
// <button @click="changeMessage">btn parent</button>
|
||||
// </div>
|
||||
// </template>
|
||||
const t1 = template(
|
||||
'<div class="slotted"><h1><!></h1><button>parent btn</button></div>',
|
||||
)
|
||||
|
||||
const Parent = defineComponent({
|
||||
vapor: true,
|
||||
setup() {
|
||||
return (() => {
|
||||
/** @type {any} */
|
||||
const n0 = createComponent(
|
||||
Child,
|
||||
{},
|
||||
{
|
||||
mySlot: ({ message, changeMessage }) => {
|
||||
const n1 = t1()
|
||||
const n2 = /** @type {any} */ (children(n1, 0))
|
||||
const n3 = /** @type {any} */ (children(n1, 1))
|
||||
renderEffect(() => setText(n2, message()))
|
||||
on(n3, 'click', changeMessage)
|
||||
return n1
|
||||
},
|
||||
// e.g. default slot
|
||||
// default: () => {
|
||||
// const n1 = t1()
|
||||
// return n1
|
||||
// }
|
||||
},
|
||||
)
|
||||
return n0
|
||||
})()
|
||||
},
|
||||
})
|
||||
|
||||
const t2 = template(
|
||||
'<div class="child-container"><button>child btn</button></div>',
|
||||
)
|
||||
|
||||
const Child = defineComponent({
|
||||
vapor: true,
|
||||
setup(_, { slots }) {
|
||||
const message = ref('Hello World!')
|
||||
function changeMessage() {
|
||||
message.value += '!'
|
||||
}
|
||||
|
||||
return (() => {
|
||||
// <div>
|
||||
// <slot name="mySlot" :message="msg" :changeMessage="changeMessage" />
|
||||
// <button @click="changeMessage">button in child</button>
|
||||
// </div>
|
||||
const n0 = /** @type {any} */ (t2())
|
||||
const n1 = /** @type {any} */ (children(n0, 0))
|
||||
on(n1, 'click', () => changeMessage)
|
||||
const s0 = /** @type {any} */ (
|
||||
slots.mySlot?.({
|
||||
message: () => message.value,
|
||||
changeMessage: () => changeMessage,
|
||||
})
|
||||
)
|
||||
insert(s0, n0, n1)
|
||||
return n0
|
||||
})()
|
||||
},
|
||||
})
|
||||
|
||||
export default Parent
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
onBeforeMount,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
useAttrs,
|
||||
watchEffect,
|
||||
} from 'vue/vapor'
|
||||
|
||||
const props = defineProps<{
|
||||
foo: string
|
||||
bar: string
|
||||
baz: string
|
||||
}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
|
||||
watchEffect(() => {
|
||||
console.log({ ...attrs })
|
||||
})
|
||||
|
||||
const keys = Object.keys
|
||||
|
||||
onBeforeMount(() => console.log('sub: before mount'))
|
||||
onMounted(() => console.log('sub: mounted'))
|
||||
onBeforeUnmount(() => console.log('sub: before unmount'))
|
||||
onUnmounted(() => console.log('sub: unmounted'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2>sub-comp</h2>
|
||||
<p>
|
||||
props: {{ props }}
|
||||
<br />
|
||||
attrs: {{ attrs }}
|
||||
<br />
|
||||
keys(attrs): {{ keys(attrs) }}
|
||||
</p>
|
||||
</template>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue/vapor'
|
||||
import { useLocalStorage } from '@vueuse/core'
|
||||
interface Task {
|
||||
title: string
|
||||
completed: boolean
|
||||
}
|
||||
|
||||
const tasks = useLocalStorage<Task[]>('tasks', [])
|
||||
const value = useLocalStorage('value', '')
|
||||
|
||||
const remaining = computed(() => {
|
||||
return tasks.value.filter(task => !task.completed).length
|
||||
})
|
||||
|
||||
function handleAdd(evt: KeyboardEvent | MouseEvent) {
|
||||
console.log(evt)
|
||||
tasks.value.push({
|
||||
title: value.value,
|
||||
completed: false,
|
||||
})
|
||||
value.value = ''
|
||||
}
|
||||
|
||||
function handleComplete(index: number, evt: Event) {
|
||||
tasks.value[index].completed = (evt.target as HTMLInputElement).checked
|
||||
}
|
||||
|
||||
function handleClearComplete() {
|
||||
tasks.value = tasks.value.filter(task => !task.completed)
|
||||
}
|
||||
|
||||
function handleClearAll() {
|
||||
tasks.value = []
|
||||
}
|
||||
|
||||
function handleRemove(idx: number, task: Task) {
|
||||
console.log(task)
|
||||
tasks.value.splice(idx, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>todos</h1>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(task, index) of tasks"
|
||||
:key="index"
|
||||
:class="{ del: task.completed }"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="task.completed"
|
||||
@change="handleComplete(index, $event)"
|
||||
/>
|
||||
{{ task.title }}
|
||||
<button @click="handleRemove(index, task)">x</button>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
{{ remaining }} item{{ remaining !== 1 ? 's' : '' }} left /
|
||||
{{ tasks.length }} item{{ tasks.length !== 1 ? 's' : '' }} in total
|
||||
</p>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<input
|
||||
type="text"
|
||||
v-model="value"
|
||||
@keydown.enter="handleAdd"
|
||||
placeholder="What need to be done?"
|
||||
/>
|
||||
<button @click.passive="handleAdd">Add</button>
|
||||
<button @click="handleClearComplete">Clear completed</button>
|
||||
<button @click="handleClearAll">Clear all</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
// @ts-check
|
||||
import {
|
||||
createFor,
|
||||
defineComponent,
|
||||
insert,
|
||||
on,
|
||||
ref,
|
||||
renderEffect,
|
||||
} from 'vue/vapor'
|
||||
|
||||
export default defineComponent({
|
||||
vapor: true,
|
||||
setup() {
|
||||
const list = ref(['a', 'b', 'c'])
|
||||
const value = ref('')
|
||||
|
||||
function handleAdd() {
|
||||
list.value.push(value.value)
|
||||
value.value = ''
|
||||
}
|
||||
|
||||
function handleRemove() {
|
||||
list.value.shift()
|
||||
}
|
||||
|
||||
return (() => {
|
||||
const li = createFor(
|
||||
() => list.value,
|
||||
ctx0 => {
|
||||
const node = document.createTextNode('')
|
||||
const container = document.createElement('li')
|
||||
insert(node, container)
|
||||
|
||||
renderEffect(() => {
|
||||
const [item, index] = ctx0
|
||||
node.textContent = `${index}. ${item}`
|
||||
})
|
||||
return container
|
||||
},
|
||||
(item, index) => index,
|
||||
)
|
||||
const container = document.createElement('ul')
|
||||
insert(li, container)
|
||||
|
||||
const input = document.createElement('input')
|
||||
on(input, 'input', () => e => {
|
||||
value.value = e.target.value
|
||||
})
|
||||
on(input, 'keydown', () => handleAdd, {
|
||||
keys: ['enter'],
|
||||
})
|
||||
|
||||
const add = document.createElement('button')
|
||||
add.textContent = 'add'
|
||||
on(add, 'click', () => handleAdd)
|
||||
renderEffect(() => {
|
||||
input.value = value.value
|
||||
})
|
||||
|
||||
const del = document.createElement('button')
|
||||
del.textContent = 'shift'
|
||||
on(del, 'click', () => handleRemove)
|
||||
|
||||
const data = document.createElement('p')
|
||||
renderEffect(() => {
|
||||
data.textContent = JSON.stringify(list.value)
|
||||
})
|
||||
|
||||
return [container, input, add, del, data]
|
||||
})()
|
||||
},
|
||||
})
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue/vapor'
|
||||
const arr = ref([1, 2, 3])
|
||||
const obj = ref<Record<string, any>>({ a: 1, b: 2, c: 3 })
|
||||
const str = ref('123')
|
||||
const map = ref(
|
||||
new Map([
|
||||
['a', 1],
|
||||
['b', 2],
|
||||
['c', 3],
|
||||
]),
|
||||
)
|
||||
const num = ref(10)
|
||||
const objChange = () => {
|
||||
obj.value = { a: 'x', e: 4, f: 5, g: 6 }
|
||||
}
|
||||
const arrChange = () => {
|
||||
arr.value = [4, 5, 6, 7]
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="arrChange">change arr</button>
|
||||
<button @click="objChange">change obj</button>
|
||||
|
||||
<div>arr:</div>
|
||||
<div v-for="(item, index) in arr" :key="item">{{ item }}-{{ index }}</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>obj:</div>
|
||||
<div v-for="(item, index) in obj">{{ item }}-{{ index }}</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>map:</div>
|
||||
<div v-for="(item, index) in map" :key="item[0]">{{ item }}-{{ index }}</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>str:</div>
|
||||
<div v-for="(item, index) in str" :key="item">{{ item }}-{{ index }}</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>num:</div>
|
||||
<div v-for="(item, index) in num" :key="item">{{ item }}-{{ index }}</div>
|
||||
</template>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { createComponent, warn } from 'vue/vapor'
|
||||
|
||||
export default {
|
||||
vapor: true,
|
||||
setup() {
|
||||
return createComponent(Comp, [
|
||||
{
|
||||
msg: () => 'hello',
|
||||
onClick: () => () => {},
|
||||
},
|
||||
() => ({ foo: 'world', msg: 'msg' }),
|
||||
])
|
||||
},
|
||||
}
|
||||
|
||||
const Comp = {
|
||||
name: 'Comp',
|
||||
vapor: true,
|
||||
props: ['msg', 'foo'],
|
||||
setup() {
|
||||
warn('hello')
|
||||
},
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@ export default defineConfig({
|
|||
clearScreen: false,
|
||||
plugins: [
|
||||
Vue({
|
||||
vapor: true,
|
||||
compiler: CompilerSFC,
|
||||
}),
|
||||
DevPlugin(),
|
||||
|
|
|
|||
969
pnpm-lock.yaml
969
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue