fix: playground

package.json

@@ -31,7 +31,7 @@
     "dev-sfc-serve": "vite packages/sfc-playground --host",
     "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
     "dev-vapor": "run-s dev-prepare-cjs dev-vapor-run",
-    "dev-vapor-run": "run-p \"dev vue-vapor -if esm-bundler-runtime\" \"dev vue-vapor -ipf esm-browser-runtime\" dev-vapor-serve",
+    "dev-vapor-run": "run-p \"dev vue-vapor -if esm-bundler-runtime\" \"dev compiler-vapor -ipf esm-bundler\" dev-vapor-serve",
     "dev-vapor-serve": "pnpm -C playground run dev",
     "serve": "serve",
     "open": "open http://localhost:3000/packages/template-explorer/local.html",

packages/compiler-core/src/index.ts

@@ -25,8 +25,6 @@ export { generate, type CodegenContext, type CodegenResult } from './codegen'
 export {
   ErrorCodes,
   createCompilerError,
-  defaultOnError,
-  defaultOnWarn,
   type CoreCompilerError,
   type CompilerError
 } from './errors'

packages/compiler-sfc/src/compileScript.ts

@@ -368,7 +368,8 @@ export function compileScript(
   const vueImportAliases: Record<string, string> = {}
   for (const key in ctx.userImports) {
     const { source, imported, local } = ctx.userImports[key]
-    if (source === 'vue') vueImportAliases[imported] = local
+    if (['vue', 'vue/vapor'].includes(source))
+      vueImportAliases[imported] = local
   }
 
   // 2.1 process normal <script> body
@@ -744,7 +745,7 @@ export function compileScript(
     ctx.bindingMetadata[key] =
       imported === '*' ||
       (imported === 'default' && source.endsWith('.vue')) ||
-      source === 'vue'
+      ['vue', 'vue/vapor'].includes(source)
         ? BindingTypes.SETUP_CONST
         : BindingTypes.SETUP_MAYBE_REF
   }
@@ -855,7 +856,7 @@ export function compileScript(
     for (const key in allBindings) {
       if (
         allBindings[key] === true &&
-        ctx.userImports[key].source !== 'vue' &&
+        ['vue', 'vue/vapor'].includes(ctx.userImports[key].source) &&
         !ctx.userImports[key].source.endsWith('.vue')
       ) {
         // generate getter for import bindings

packages/compiler-vapor/src/errors.ts

@@ -1,10 +1,14 @@
-export {
+import { CompilerError } from '@vue/compiler-dom'
-  createCompilerError,
+
-  defaultOnError,
+export { createCompilerError } from '@vue/compiler-dom'
-  defaultOnWarn,
+
-  type CoreCompilerError,
+export function defaultOnError(error: CompilerError) {
-  type CompilerError,
+  throw error
-} from '@vue/compiler-dom'
+}
+
+export function defaultOnWarn(msg: CompilerError) {
+  __DEV__ && console.warn(`[Vue warn] ${msg.message}`)
+}
 
 export const enum ErrorCodes {
   // transform errors

packages/compiler-vapor/src/transform.ts

@@ -1,14 +1,14 @@
-import {
+import type {
   NodeTypes,
-  type RootNode,
+  RootNode,
-  type Node,
+  Node,
-  type TemplateChildNode,
+  TemplateChildNode,
-  type ElementNode,
+  ElementNode,
-  type AttributeNode,
+  AttributeNode,
-  type InterpolationNode,
+  InterpolationNode,
-  type TransformOptions,
+  TransformOptions,
-  type DirectiveNode,
+  DirectiveNode,
-  type ExpressionNode,
+  ExpressionNode,
 } from '@vue/compiler-dom'
 import {
   type OperationNode,
@@ -361,7 +361,8 @@ function transformProp(
     case 'bind': {
       if (
         !exp ||
-        (exp.type === NodeTypes.SIMPLE_EXPRESSION! && !exp.content.trim())
+        (exp.type === (4 satisfies NodeTypes.SIMPLE_EXPRESSION) &&
+          !exp.content.trim())
       ) {
         ctx.options.onError!(
           createCompilerError(ErrorCodes.VAPOR_BIND_NO_EXPRESSION, loc),

packages/runtime-vapor/src/index.ts

@@ -6,6 +6,7 @@ export {
   reactive,
   ref,
   readonly,
+  computed,
   // utilities
   unref,
   proxyRefs,
@@ -26,7 +27,6 @@ export {
   markRaw,
   toRaw,
   // effect
-  effect,
   stop,
   ReactiveEffect,
   // effect scope
@@ -35,7 +35,7 @@ export {
   getCurrentScope,
   onScopeDispose
 } from '@vue/reactivity'
+export { effect } from './scheduler'
 export * from './on'
 export * from './render'
 export * from './template'
-export * from './scheduler'

packages/runtime-vapor/src/scheduler.ts

@@ -4,7 +4,7 @@ const p = Promise.resolve()
 
 let queued: any[] | undefined
 
-const queue = (fn: any) => {
+function queue(fn: any) {
   if (!queued) {
     queued = [fn]
     p.then(flush)
@@ -22,7 +22,7 @@ function flush() {
 
 export const nextTick = (fn: any) => p.then(fn)
 
-export const effect = (fn: any) => {
+export function effect(fn: any) {
   let run: () => void
   const e = new ReactiveEffect(fn, () => queue(run))
   run = e.run.bind(e)

playground/src/App-root.vue

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

playground/src/App.vue

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

playground/vite.config.ts

@@ -1,20 +1,20 @@
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Inspect from 'vite-plugin-inspect'
-import * as CompilerVapor from '../packages/compiler-vapor/src'
+// @ts-ignore
+import * as CompilerVapor from '../packages/compiler-vapor/dist/compiler-vapor.esm-bundler.prod.js'
+
+const vue = Vue({
+  isProduction: true,
+  template: {
+    compiler: CompilerVapor
+  }
+})
 
 export default defineConfig({
   build: {
     target: 'esnext'
   },
   clearScreen: false,
-  plugins: [
+  plugins: [vue, Inspect()]
-    Vue({
-      isProduction: true,
-      template: {
-        compiler: CompilerVapor
-      }
-    }),
-    Inspect()
-  ]
 })