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

playground/package.json

@@ -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"

playground/src/main.ts

@@ -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')
+  if (mod.vapor) {
-  // @ts-expect-error
+    const instance = render(mod, {}, '#app')
-  globalThis.unmount = () => {
+    // @ts-expect-error
-    unmountComponent(instance)
+    globalThis.unmount = () => {
+      unmountComponent(instance)
+    }
+  } else {
+    createApp(mod).mount('#app')
   }
 })

playground/src/props.js

@@ -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 {
+    const n1 = /** @type {HTMLButtonElement} */ (children(n0, 0))
-      0: [n1],
+    on(n1, 'click', () => _ctx.handleClick)
-    } = children(n0)
-    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 = t1()
-    const n0 = t0()
+    const n1 = children(n0, 0)
-    const {
-      0: [n1],
-    } = children(n0)
     watchEffect(() => {
       setText(n1, void 0, _ctx.count + ' * 2 = ' + _ctx.inlineDouble)
     })
     return n0
   },
-}
+})

playground/src/reactive-event-handler.vue

@@ -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++

playground/src/v-for.js

@@ -1,7 +1,15 @@
-import { defineComponent, withKeys } from 'vue'
+// @ts-check
-import { append, createFor, on, ref, renderEffect } from 'vue/vapor'
+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(() => {
+          renderEffect(update)
-            const [item, index] = block.s
+          return [container, update]
-            node.textContent = `${index}/ ${item}`
-          })
-          return container
         },
         (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(() => {

playground/vite.config.ts

@@ -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: {
+      vapor: true,
-        // @ts-expect-error
-        vapor: true,
-      },
       compiler: CompilerSFC,
     }),
     DevPlugin(),

pnpm-lock.yaml

@@ -465,8 +465,8 @@ importers:
         version: link:../packages/vue
     devDependencies:
       '@vitejs/plugin-vue':
-        specifier: ^4.5.0
+        specifier: npm:@vue-vapor/vite-plugin-vue@latest
-        version: 4.5.0(vite@5.0.2)(vue@packages+vue)
+        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'}