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"
|
"start": "node index.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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",
|
"connect": "^3.7.0",
|
||||||
"sirv": "^2.0.4",
|
"sirv": "^2.0.4",
|
||||||
"vite": "^5.0.12"
|
"vite": "^5.0.12"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/connect": "^3.4.38",
|
"@types/connect": "^3.4.38",
|
||||||
"terser": "^5.31.6"
|
"terser": "^5.33.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
"preview": "node ./setup/vite.js preview"
|
"preview": "node ./setup/vite.js preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vueuse/core": "^10.7.2",
|
"@vueuse/core": "^11.1.0",
|
||||||
"vue": "workspace:*"
|
"vue": "workspace:*"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@0.0.0-alpha.4",
|
"@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5",
|
||||||
"vite": "^5.0.12",
|
"vite": "catalog:",
|
||||||
"vite-hyper-config": "^0.2.1",
|
"vite-hyper-config": "^0.4.0",
|
||||||
"vite-plugin-inspect": "^0.7.42"
|
"vite-plugin-inspect": "^0.8.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ startVite(
|
||||||
{ plugins: [DevPlugin()] },
|
{ plugins: [DevPlugin()] },
|
||||||
{
|
{
|
||||||
deps: {
|
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 {
|
import {
|
||||||
ref,
|
ref,
|
||||||
computed,
|
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 {
|
||||||
html {
|
color-scheme: light dark;
|
||||||
color-scheme: 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,
|
clearScreen: false,
|
||||||
plugins: [
|
plugins: [
|
||||||
Vue({
|
Vue({
|
||||||
vapor: true,
|
|
||||||
compiler: CompilerSFC,
|
compiler: CompilerSFC,
|
||||||
}),
|
}),
|
||||||
DevPlugin(),
|
DevPlugin(),
|
||||||
|
|
|
||||||
969
pnpm-lock.yaml
969
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue