feat!: migrate to @vue/reactivity with ported watch API

kermanx · kermanx · commit 30faee6f0f72 · 2024-06-05T18:13:38.000+08:00
diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@
 
 [MIT](./LICENSE) License © 2024-PRESENT [_Kerman](https://github.com/KermanX)
 
+Source code in [the `./packages/core/src/reactivity` directory](https://github.com/KermanX/reactive-vscode/blob/main/packages/core/src/reactivity) is ported from [`@vue/runtime-core`](https://github.com/vuejs/core/blob/main/packages/runtime-core). Licensed under a [MIT License](https://github.com/vueuse/vueuse/blob/main/LICENSE).
+
 The logo <img src="https://kermanx.github.io/reactive-vscode/logo.svg" width="14"> is modified from [Vue Reactity Artworks](https://github.com/vue-reactivity/art). Licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/).
 
 Part of the docs website is ported from [VueUse](https://github.com/vueuse/vueuse). Licensed under a [MIT License](https://github.com/vueuse/vueuse/blob/main/LICENSE).
diff --git a/docs/guide/why.md b/docs/guide/why.md
@@ -90,9 +90,7 @@ As you can see, after using <ReactiveVscode />, the code is much cleaner and eas
 
 ### Why use `npm::@vue/runtime-core` internally?
 
-This library is built on top of `npm::@vue/runtime-core`. This is because `npm::@vue/reactivity` doesn't provide the `vue::watch(https://vuejs.org/api/reactivity-core.html#watch)` and `vue::watchEffect(https://vuejs.org/api/reactivity-core.html#watcheffect)` function, which is essential in a VSCode extension.
-
-It's possible to use `npm::@vue-reactivity/watch` in the future. But for now, we have to use `npm::@vue/runtime-core`.
+This library is built on top of `npm::@vue/reactivity`, and ported some code from `npm::@vue/runtime-core` (See [the `./packages/core/src/reactivity` directory](https://github.com/KermanX/reactive-vscode/blob/main/packages/core/src/reactivity)).
 
 ### Use Vue in Webview?
 
diff --git a/eslint.config.js b/eslint.config.js
@@ -3,6 +3,9 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu(
   {
+    ignores: [
+      'packages/core/src/reactivity/**/*.ts',
+    ],
   },
   {
     files: ['**/*.ts'],
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -42,9 +42,11 @@
     "@types/vscode": "^1.89.0"
   },
   "dependencies": {
-    "@vue/runtime-core": "^3.4.27"
+    "@vue/reactivity": "^3.4.27",
+    "@vue/shared": "^3.4.27"
   },
   "devDependencies": {
+    "@types/node": "^20.14.2",
     "@types/vscode": "^1.89.0",
     "mkdist": "^1.5.1",
     "typescript": "^5.4.5"
diff --git a/packages/core/shim.d.ts b/packages/core/shim.d.ts
@@ -0,0 +1,4 @@
+export {}
+declare global {
+  const __DEV__: boolean
+}
diff --git a/packages/core/src/composables/useAbsolutePath.ts b/packages/core/src/composables/useAbsolutePath.ts
@@ -1,5 +1,5 @@
-import type { ComputedRef, MaybeRefOrGetter } from '@vue/runtime-core'
-import { computed, toValue } from '@vue/runtime-core'
+import type { ComputedRef, MaybeRefOrGetter } from '../reactivity'
+import { computed, toValue } from '../reactivity'
 import { extensionContext } from '../utils'
 
 /**
diff --git a/packages/core/src/composables/useActiveColorTheme.ts b/packages/core/src/composables/useActiveColorTheme.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useActiveDebugSession.ts b/packages/core/src/composables/useActiveDebugSession.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { debug } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useActiveEditorDecorations.ts b/packages/core/src/composables/useActiveEditorDecorations.ts
@@ -1,5 +1,5 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
 import type { DecorationOptions, DecorationRenderOptions, Range, TextEditorDecorationType } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
 import { useActiveTextEditor } from './useActiveTextEditor'
 import { useEditorDecorations } from './useEditorDecorations'
 
diff --git a/packages/core/src/composables/useActiveNotebookEditor.ts b/packages/core/src/composables/useActiveNotebookEditor.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useActiveTerminal.ts b/packages/core/src/composables/useActiveTerminal.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useActiveTextEditor.ts b/packages/core/src/composables/useActiveTextEditor.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useAllExtensions.ts b/packages/core/src/composables/useAllExtensions.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { extensions } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useDefaultShell.ts b/packages/core/src/composables/useDefaultShell.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { env } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useDisposable.ts b/packages/core/src/composables/useDisposable.ts
@@ -1,5 +1,5 @@
-import { getCurrentScope } from '@vue/runtime-core'
 import type { Disposable } from 'vscode'
+import { getCurrentScope } from '../reactivity'
 import { extensionScope } from '../utils'
 
 /**
diff --git a/packages/core/src/composables/useDocumentText.ts b/packages/core/src/composables/useDocumentText.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { shallowRef, toValue, watchEffect } from '@vue/runtime-core'
 import type { TextDocument } from 'vscode'
 import { workspace } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { shallowRef, toValue, watchEffect } from '../reactivity'
 import { useDisposable } from './useDisposable'
 
 /**
diff --git a/packages/core/src/composables/useEditorDecorations.ts b/packages/core/src/composables/useEditorDecorations.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { toValue, watchEffect } from '@vue/runtime-core'
 import type { DecorationOptions, DecorationRenderOptions, Range, TextEditor, TextEditorDecorationType } from 'vscode'
 import { window } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { toValue, watchEffect } from '../reactivity'
 import type { Nullable } from '../utils/types'
 
 /**
diff --git a/packages/core/src/composables/useFetchTasks.ts b/packages/core/src/composables/useFetchTasks.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { computed, toValue } from '@vue/runtime-core'
 import type { TaskFilter } from 'vscode'
 import { tasks } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { computed, toValue } from '../reactivity'
 
 /**
  * @reactive `tasks.fetchTasks`
diff --git a/packages/core/src/composables/useFileUri.ts b/packages/core/src/composables/useFileUri.ts
@@ -1,6 +1,6 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { toValue } from '@vue/runtime-core'
 import { Uri } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { toValue } from '../reactivity'
 import { useUri } from './useUri'
 
 /**
diff --git a/packages/core/src/composables/useFoldingRangeProvider.ts b/packages/core/src/composables/useFoldingRangeProvider.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { shallowRef, toValue, watchEffect } from '@vue/runtime-core'
 import type { DocumentSelector, FoldingRangeProvider } from 'vscode'
 import { EventEmitter, languages } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { shallowRef, toValue, watchEffect } from '../reactivity'
 import { useDisposable } from './useDisposable'
 
 /**
diff --git a/packages/core/src/composables/useIsDarkTheme.ts b/packages/core/src/composables/useIsDarkTheme.ts
@@ -1,5 +1,5 @@
-import { computed } from '@vue/runtime-core'
 import { ColorThemeKind } from 'vscode'
+import { computed } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useActiveColorTheme } from './useActiveColorTheme'
 
diff --git a/packages/core/src/composables/useIsTelemetryEnabled.ts b/packages/core/src/composables/useIsTelemetryEnabled.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { env } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useL10nText.ts b/packages/core/src/composables/useL10nText.ts
@@ -1,6 +1,6 @@
-import type { ComputedRef, MaybeRefOrGetter } from '@vue/runtime-core'
-import { computed, toRaw, toValue } from '@vue/runtime-core'
 import { l10n } from 'vscode'
+import type { ComputedRef, MaybeRefOrGetter } from '../reactivity'
+import { computed, toRaw, toValue } from '../reactivity'
 
 /**
  * @reactive `l10n.t`
diff --git a/packages/core/src/composables/useLogLevel.ts b/packages/core/src/composables/useLogLevel.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { env } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useNotebookEditorSelection.ts b/packages/core/src/composables/useNotebookEditorSelection.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { NotebookEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useNotebookEditorSelections.ts b/packages/core/src/composables/useNotebookEditorSelections.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { NotebookEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useNotebookEditorVisibleRanges.ts b/packages/core/src/composables/useNotebookEditorVisibleRanges.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { NotebookEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useOpenedTerminals.ts b/packages/core/src/composables/useOpenedTerminals.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useStatusBarItem.ts b/packages/core/src/composables/useStatusBarItem.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { toValue, watchEffect } from '@vue/runtime-core'
 import type { StatusBarAlignment, StatusBarItem } from 'vscode'
 import { window } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { toValue, watchEffect } from '../reactivity'
 import { useDisposable } from './useDisposable'
 
 export interface UseStatusBarItemOptions {
diff --git a/packages/core/src/composables/useTaskExecutions.ts b/packages/core/src/composables/useTaskExecutions.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { tasks } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useTerminalState.ts b/packages/core/src/composables/useTerminalState.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { Terminal } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useTextEditorSelection.ts b/packages/core/src/composables/useTextEditorSelection.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { TextEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useTextEditorSelections.ts b/packages/core/src/composables/useTextEditorSelections.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { TextEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useTextEditorViewColumn.ts b/packages/core/src/composables/useTextEditorViewColumn.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { TextEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useTextEditorVisibleRanges.ts b/packages/core/src/composables/useTextEditorVisibleRanges.ts
@@ -1,6 +1,6 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import type { TextEditor } from 'vscode'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useTreeView.ts b/packages/core/src/composables/useTreeView.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { toValue, watch } from '@vue/runtime-core'
 import type { TreeDataProvider, TreeView, TreeViewOptions } from 'vscode'
 import { EventEmitter, window } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { toValue, watch } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useUri.ts b/packages/core/src/composables/useUri.ts
@@ -1,6 +1,6 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { shallowReactive, toValue } from '@vue/runtime-core'
 import type { Uri } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { shallowReactive, toValue } from '../reactivity'
 
 /**
  * @reactive `Uri`
diff --git a/packages/core/src/composables/useViewBadge.ts b/packages/core/src/composables/useViewBadge.ts
@@ -1,6 +1,6 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { toValue, watchEffect } from '@vue/runtime-core'
 import type { TreeView, ViewBadge, WebviewView } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { toValue, watchEffect } from '../reactivity'
 import type { Nullable } from '../utils/types'
 
 type ViewWithBadge = Pick<TreeView<unknown> | WebviewView, 'badge'>
diff --git a/packages/core/src/composables/useViewTitle.ts b/packages/core/src/composables/useViewTitle.ts
@@ -1,6 +1,6 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { toValue, watchEffect } from '@vue/runtime-core'
 import type { TreeView, WebviewView } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { toValue, watchEffect } from '../reactivity'
 import type { Nullable } from '../utils/types'
 
 type ViewWithTitle = Pick<TreeView<unknown> | WebviewView, 'title'>
diff --git a/packages/core/src/composables/useViewVisibility.ts b/packages/core/src/composables/useViewVisibility.ts
@@ -1,6 +1,6 @@
-import type { ComputedRef, MaybeRefOrGetter } from '@vue/runtime-core'
-import { computed, ref, toValue, watchEffect } from '@vue/runtime-core'
 import type { TreeView, WebviewView } from 'vscode'
+import type { ComputedRef, MaybeRefOrGetter } from '../reactivity'
+import { computed, ref, toValue, watchEffect } from '../reactivity'
 import type { Nullable } from '../utils/types'
 
 type ViewWithVisibility = Pick<TreeView<unknown> | WebviewView, 'visible' | 'onDidChangeVisibility'>
diff --git a/packages/core/src/composables/useVisibleNotebookEditors.ts b/packages/core/src/composables/useVisibleNotebookEditors.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useVisibleTextEditors.ts b/packages/core/src/composables/useVisibleTextEditors.ts
@@ -1,5 +1,5 @@
-import { shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useVscodeContext.ts b/packages/core/src/composables/useVscodeContext.ts
@@ -1,6 +1,6 @@
-import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from '@vue/runtime-core'
-import { computed, toValue, watchEffect } from '@vue/runtime-core'
 import { commands } from 'vscode'
+import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from '../reactivity'
+import { computed, toValue, watchEffect } from '../reactivity'
 
 export function useVscodeContext<T>(
   name: string,
diff --git a/packages/core/src/composables/useWebviewView.ts b/packages/core/src/composables/useWebviewView.ts
@@ -1,7 +1,7 @@
-import type { MaybeRefOrGetter } from '@vue/runtime-core'
-import { shallowRef, toValue, watchEffect } from '@vue/runtime-core'
 import type { WebviewOptions, WebviewView } from 'vscode'
 import { window } from 'vscode'
+import type { MaybeRefOrGetter } from '../reactivity'
+import { shallowRef, toValue, watchEffect } from '../reactivity'
 import { createKeyedComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useWindowState.ts b/packages/core/src/composables/useWindowState.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { window } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/composables/useWorkspaceFolders.ts b/packages/core/src/composables/useWorkspaceFolders.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef } from '@vue/runtime-core'
 import { workspace } from 'vscode'
+import { computed, shallowRef } from '../reactivity'
 import { createSingletonComposable } from '../utils'
 import { useDisposable } from './useDisposable'
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
diff --git a/packages/core/src/reactivity/README.md b/packages/core/src/reactivity/README.md
diff --git a/packages/core/src/reactivity/apiWatch.ts b/packages/core/src/reactivity/apiWatch.ts
diff --git a/packages/core/src/reactivity/enums.ts b/packages/core/src/reactivity/enums.ts
diff --git a/packages/core/src/reactivity/errorHandling.ts b/packages/core/src/reactivity/errorHandling.ts
diff --git a/packages/core/src/reactivity/index.ts b/packages/core/src/reactivity/index.ts
diff --git a/packages/core/src/reactivity/scheduler.ts b/packages/core/src/reactivity/scheduler.ts
diff --git a/packages/core/src/reactivity/warning.ts b/packages/core/src/reactivity/warning.ts
diff --git a/packages/core/src/utils/defineConfigs.ts b/packages/core/src/utils/defineConfigs.ts
diff --git a/packages/core/src/utils/defineExtension.ts b/packages/core/src/utils/defineExtension.ts
diff --git a/packages/core/src/utils/tryOnScopeDispose.ts b/packages/core/src/utils/tryOnScopeDispose.ts
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,9 @@ import antfu from '@antfu/eslint-config'`
`3`	`3`
`4`	`4`	`export default antfu(`
`5`	`5`	`{`
	`6`	`+ ignores: [`
	`7`	`+ 'packages/core/src/reactivity/*/.ts',`
	`8`	`+ ],`
`6`	`9`	`},`
`7`	`10`	`{`
`8`	`11`	`files: ['*/.ts'],`