refactor(playground): add vapor option [ci skip]
This commit is contained in:
parent
79f3929cd2
commit
8bb0e0887b
|
@ -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"
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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++
|
||||
|
|
|
@ -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(() => {
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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'}
|
||||
|
|
Loading…
Reference in New Issue