refactor(playground): add vapor option [ci skip]

This commit is contained in:
三咲智子 Kevin Deng 2024-02-14 14:42:59 +08:00
parent 79f3929cd2
commit 8bb0e0887b
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
7 changed files with 65 additions and 66 deletions

View File

@ -12,7 +12,7 @@
"vue": "workspace:*"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@latest",
"vite": "^5.0.2",
"vite-hyper-config": "^0.2.1",
"vite-plugin-inspect": "^0.7.42"

View File

@ -1,13 +1,18 @@
import { render, unmountComponent } from 'vue/vapor'
import { createApp } from 'vue'
import './style.css'
const modules = import.meta.glob<any>('./*.(vue|js)')
const mod = (modules['.' + location.pathname] || modules['./App.vue'])()
mod.then(({ default: mod }) => {
const instance = render(mod, {}, '#app')
// @ts-expect-error
globalThis.unmount = () => {
unmountComponent(instance)
if (mod.vapor) {
const instance = render(mod, {}, '#app')
// @ts-expect-error
globalThis.unmount = () => {
unmountComponent(instance)
}
} else {
createApp(mod).mount('#app')
}
})

View File

@ -1,15 +1,20 @@
import { watch } from 'vue'
// @ts-check
import {
children,
defineComponent,
on,
ref,
render as renderComponent,
setText,
template,
watchEffect, // TODO:
watch,
watchEffect,
} from '@vue/vapor'
export default {
const t0 = template('<button></button>')
export default defineComponent({
vapor: true,
props: undefined,
setup(_, {}) {
@ -29,21 +34,18 @@ export default {
},
render(_ctx) {
const t0 = template('<button></button>')
const n0 = t0()
const {
0: [n1],
} = children(n0)
on(n1, 'click', _ctx.handleClick)
const n1 = /** @type {HTMLButtonElement} */ (children(n0, 0))
on(n1, 'click', () => _ctx.handleClick)
watchEffect(() => {
setText(n1, void 0, _ctx.count)
setText(n1, _ctx.count)
})
// TODO: create component fn?
// const c0 = createComponent(...)
// insert(n0, c0)
renderComponent(
child,
/** @type {any} */ (child),
// TODO: proxy??
{
@ -62,9 +64,12 @@ export default {
return n0
},
}
})
const t1 = template('<p></p>')
const child = defineComponent({
vapor: true,
const child = {
props: {
count: { type: Number, default: 1 },
inlineDouble: { type: Number, default: 2 },
@ -79,26 +84,14 @@ const child = {
() => props.inlineDouble,
v => console.log('inlineDouble changed', v),
)
const __returned__ = {}
Object.defineProperty(__returned__, '__isScriptSetup', {
enumerable: false,
value: true,
})
return __returned__
},
render(_ctx) {
const t0 = template('<p></p>')
const n0 = t0()
const {
0: [n1],
} = children(n0)
const n0 = t1()
const n1 = children(n0, 0)
watchEffect(() => {
setText(n1, void 0, _ctx.count + ' * 2 = ' + _ctx.inlineDouble)
})
return n0
},
}
})

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { ref, watchEffect } from 'vue/vapor'
const count = ref(0)
const inc = () => count.value++

View File

@ -1,7 +1,15 @@
import { defineComponent, withKeys } from 'vue'
import { append, createFor, on, ref, renderEffect } from 'vue/vapor'
// @ts-check
import {
append,
createFor,
defineComponent,
on,
ref,
renderEffect,
} from 'vue/vapor'
export default defineComponent({
vapor: true,
setup() {
const list = ref(['a', 'b', 'c'])
const value = ref('')
@ -23,16 +31,13 @@ export default defineComponent({
const container = document.createElement('li')
append(container, node)
renderEffect(() => {
const update = () => {
const [item, index] = block.s
node.textContent = `${index}. ${item}`
})
}
renderEffect(() => {
const [item, index] = block.s
node.textContent = `${index}/ ${item}`
})
return container
renderEffect(update)
return [container, update]
},
(item, index) => index,
)
@ -40,21 +45,23 @@ export default defineComponent({
append(container, li)
const input = document.createElement('input')
on(input, 'input', e => {
on(input, 'input', () => e => {
value.value = e.target.value
})
on(input, 'keydown', withKeys(handleAdd, ['enter']))
on(input, 'keydown', () => handleAdd, undefined, {
keys: ['enter'],
})
const add = document.createElement('button')
add.textContent = 'add'
on(add, 'click', handleAdd)
on(add, 'click', () => handleAdd)
renderEffect(() => {
input.value = value.value
})
const del = document.createElement('button')
del.textContent = 'shift'
on(del, 'click', handleRemove)
on(del, 'click', () => handleRemove)
const data = document.createElement('p')
renderEffect(() => {

View File

@ -5,9 +5,6 @@ import Vue from '@vitejs/plugin-vue'
import * as CompilerSFC from '@vue/compiler-sfc'
export default defineConfig({
resolve: {
alias: [{ find: /^vue$/, replacement: 'vue/vapor' }],
},
build: {
target: 'esnext',
minify: 'terser',
@ -20,10 +17,7 @@ export default defineConfig({
clearScreen: false,
plugins: [
Vue({
template: {
// @ts-expect-error
vapor: true,
},
vapor: true,
compiler: CompilerSFC,
}),
DevPlugin(),

View File

@ -465,8 +465,8 @@ importers:
version: link:../packages/vue
devDependencies:
'@vitejs/plugin-vue':
specifier: ^4.5.0
version: 4.5.0(vite@5.0.2)(vue@packages+vue)
specifier: npm:@vue-vapor/vite-plugin-vue@latest
version: /@vue-vapor/vite-plugin-vue@0.0.0-alpha.1(vite@5.0.2)(vue@packages+vue)
vite:
specifier: ^5.0.2
version: 5.0.2(@types/node@20.11.16)(terser@5.27.0)
@ -1796,17 +1796,6 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true
/@vitejs/plugin-vue@4.5.0(vite@5.0.2)(vue@packages+vue):
resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0 || ^5.0.0
vue: ^3.2.25
dependencies:
vite: 5.0.2(@types/node@20.11.16)(terser@5.27.0)
vue: link:packages/vue
dev: true
/@vitejs/plugin-vue@5.0.3(vite@5.0.12)(vue@packages+vue):
resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==}
engines: {node: ^18.0.0 || >=20.0.0}
@ -1891,6 +1880,17 @@ packages:
pretty-format: 29.7.0
dev: true
/@vue-vapor/vite-plugin-vue@0.0.0-alpha.1(vite@5.0.2)(vue@packages+vue):
resolution: {integrity: sha512-wv64VLcd9dkVZTkjkLUDjr7CsP5Q7fNyN6Ar+AXJyVEXP+0vCRkXuH1HEmVUDJrOalutULRIV8PyehEmjxmG4A==}
engines: {node: ^18.0.0 || >=20.0.0}
peerDependencies:
vite: ^5.0.0
vue: '*'
dependencies:
vite: 5.0.2(@types/node@20.11.16)(terser@5.27.0)
vue: link:packages/vue
dev: true
/@vue/consolidate@0.17.3:
resolution: {integrity: sha512-nl0SWcTMzaaTnJ5G6V8VlMDA1CVVrNnaQKF1aBZU3kXtjgU9jtHMsEAsgjoRUx+T0EVJk9TgbmxGhK3pOk22zw==}
engines: {node: '>= 0.12.0'}