fix(vueuse): add missing Vue runtime API stubs

[GabrielxDuO]

问题描述

参考 文档 集成 VueUse 后构建产生错误：

 ERROR  Error: Build failed with 6 errors:

[MISSING_EXPORT] Error: "hasInjectionContext" is not exported by "node_modules/@reactive-vscode/reactivity/dist/index.js".
   ╭─[ node_modules/@reactive-vscode/vueuse/dist/index.js:1:148 ]
   │
 1 │ import { customRef, toValue, shallowRef, watchEffect, readonly, watch, effectScope, unref, computed, ref, shallowReadonly, isRef, getCurrentScope, hasInjectionContext, inject, provide, toRefs as toRefs$1, reactive, toRef as toRef$1, onBeforeMount, nextTick, onBeforeUnmount, onScopeDispose, onUnmounted, isReactive, isReadonly, markRaw } from "@reactive-vscode/reactivity";
   │                                                                                                                                                    ─────────┬─────────  
   │                                                                                                                                                             ╰─────────── Missing export
───╯

[MISSING_EXPORT] Error: "inject" is not exported by "node_modules/@reactive-vscode/reactivity/dist/index.js".
   ╭─[ node_modules/@reactive-vscode/vueuse/dist/index.js:1:169 ]
   │
 1 │ import { customRef, toValue, shallowRef, watchEffect, readonly, watch, effectScope, unref, computed, ref, shallowReadonly, isRef, getCurrentScope, hasInjectionContext, inject, provide, toRefs as toRefs$1, reactive, toRef as toRef$1, onBeforeMount, nextTick, onBeforeUnmount, onScopeDispose, onUnmounted, isReactive, isReadonly, markRaw } from "@reactive-vscode/reactivity";
   │                                                                                                                                                                         ───┬──  
   │                                                                                                                                                                            ╰──── Missing export
───╯

[MISSING_EXPORT] Error: "provide" is not exported by "node_modules/@reactive-vscode/reactivity/dist/index.js".
   ╭─[ node_modules/@reactive-vscode/vueuse/dist/index.js:1:177 ]
   │
 1 │ import { customRef, toValue, shallowRef, watchEffect, readonly, watch, effectScope, unref, computed, ref, shallowReadonly, isRef, getCurrentScope, hasInjectionContext, inject, provide, toRefs as toRefs$1, reactive, toRef as toRef$1, onBeforeMount, nextTick, onBeforeUnmount, onScopeDispose, onUnmounted, isReactive, isReadonly, markRaw } from "@reactive-vscode/reactivity";
   │                                                                                                                                                                                 ───┬───  
   │                                                                                                                                                                                    ╰───── Missing export
───╯

[MISSING_EXPORT] Error: "onBeforeMount" is not exported by "node_modules/@reactive-vscode/reactivity/dist/index.js".
   ╭─[ node_modules/@reactive-vscode/vueuse/dist/index.js:1:234 ]
   │
 1 │ import { customRef, toValue, shallowRef, watchEffect, readonly, watch, effectScope, unref, computed, ref, shallowReadonly, isRef, getCurrentScope, hasInjectionContext, inject, provide, toRefs as toRefs$1, reactive, toRef as toRef$1, onBeforeMount, nextTick, onBeforeUnmount, onScopeDispose, onUnmounted, isReactive, isReadonly, markRaw } from "@reactive-vscode/reactivity";
   │                                                                                                                                                                                                                                          ──────┬──────  
   │                                                                                                                                                                                                                                                ╰──────── Missing export
───╯

[MISSING_EXPORT] Error: "onBeforeUnmount" is not exported by "node_modules/@reactive-vscode/reactivity/dist/index.js".
   ╭─[ node_modules/@reactive-vscode/vueuse/dist/index.js:1:259 ]
   │
 1 │ import { customRef, toValue, shallowRef, watchEffect, readonly, watch, effectScope, unref, computed, ref, shallowReadonly, isRef, getCurrentScope, hasInjectionContext, inject, provide, toRefs as toRefs$1, reactive, toRef as toRef$1, onBeforeMount, nextTick, onBeforeUnmount, onScopeDispose, onUnmounted, isReactive, isReadonly, markRaw } from "@reactive-vscode/reactivity";
   │                                                                                                                                                                                                                                                                   ───────┬───────  
   │                                                                                                                                                                                                                                                                          ╰───────── Missing export
───╯

...

复现步骤

1. pn create [email protected]
2. cd your-extension && ni
3. ni -D @reactive-vscode/[email protected]
4. 修改 src/extension.ts 内容为：

   import { defineExtension, useCommand, useIsDarkTheme, watchEffect } from 'reactive-vscode'
   import { window } from 'vscode'
   import { config } from './config'
   import { logger } from './utils'
   import { useNow } from '@reactive-vscode/vueuse'
   
   useNow()
   
   export = defineExtension(() => {
     logger.info('Extension Activated')
   
     useCommand('your-extension.helloWorld', () => {
       window.showInformationMessage(config.message)
     })
   
     const isDark = useIsDarkTheme()
     watchEffect(() => {
       logger.info('Is Dark Theme:', isDark.value)
     })
   })

5. nr dev
6. 构建产生错误，日志同上

解决方案

在 vue-replacement.ts 中添加了缺失的 Vue 运行时 API 的空实现

[pkg-pr-new]

Open in StackBlitz

reactive-vscode

npm i https://pkg.pr.new/kermanx/reactive-vscode@36

create-reactive-vscode

npm i https://pkg.pr.new/kermanx/reactive-vscode/create-reactive-vscode@36

@reactive-vscode/metadata

npm i https://pkg.pr.new/kermanx/reactive-vscode/@reactive-vscode/metadata@36

@reactive-vscode/mock

npm i https://pkg.pr.new/kermanx/reactive-vscode/@reactive-vscode/mock@36

@reactive-vscode/reactivity

npm i https://pkg.pr.new/kermanx/reactive-vscode/@reactive-vscode/reactivity@36

@reactive-vscode/vueuse

npm i https://pkg.pr.new/kermanx/reactive-vscode/@reactive-vscode/vueuse@36

commit: dfb6ebd

[kermanx]

Thank you