feat: vue 3 support via vue-demi

Author: Djaler

package.json

@@ -5,9 +5,12 @@
     "preinstall": "npx only-allow pnpm",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
+    "switch-vue2": "cd packages/core && npm run switch-vue2",
+    "switch-vue3": "cd packages/core && npm run switch-vue3",
     "test:core": "cd packages/core && npm run test",
-    "test:vue2": "cd packages/tests-vue2 && npm run test",
-    "test:all": "npm run test:core && npm run test:vue2",
+    "test:vue2": "npm run switch-vue2 && cd packages/tests-vue2 && npm run test",
+    "test:vue3": "npm run switch-vue3 && cd packages/tests-vue3 && npm run test",
+    "test:all": "npm run test:core && npm run test:vue3 && npm run test:vue2",
     "build": "cd packages/core && npm run build",
     "prerelease": "npm run lint && npm run test:all && npm run build",
     "release": "standard-version --preset @djaler/standard",

packages/core/README.md

@@ -6,6 +6,7 @@
 > A tiny Vue composable function to create a ref synced with vue router query.
 
 ## Install
+> Works for Vue 2 and Vue 3 **within a single package** by the power of [vue-demi](https://github.com/vueuse/vue-demi)!
 
 ```sh
 npm install --save vue-use-route-query
@@ -28,7 +29,7 @@ pnpm install vue-use-route-query
 Simple example with a string parameter without any transformations
 
 ```ts
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import { useRouteQuery } from 'vue-use-route-query'
 
 export default defineComponent({
@@ -49,7 +50,7 @@ export default defineComponent({
 More complex example with a transformer
 
 ```ts
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import { useRouteQuery, RouteQueryTransformer } from 'vue-use-route-query'
 
 export default defineComponent({

packages/core/package.json

@@ -16,6 +16,8 @@
     "vue-composition-api"
   ],
   "scripts": {
+    "switch-vue2": "vue-demi-switch 2",
+    "switch-vue3": "vue-demi-switch 3 vue3",
     "test": "vitest run",
     "check-es6": "es-check es2017 dist/index.js",
     "check-treeshake": "agadoo dist/index.mjs",
@@ -31,12 +33,18 @@
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "async-queue-chain": "^1.0.1"
+    "async-queue-chain": "^1.0.1",
+    "vue-demi": "^0.12.5"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.1.0",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.0"
+    "vue": "^2.6.10 || ^3.2.0",
+    "vue-router": "^3.0.0 || ^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@vue/composition-api": "1.4.9",
@@ -47,6 +55,7 @@
     "vite-plugin-dts": "1.0.5",
     "vitest": "0.9.3",
     "vue": "2.6.14",
+    "vue3": "npm:vue@3",
     "vue-router": "3.1.3"
   },
   "clean-publish": {

packages/core/src/helpers.ts

@@ -1,8 +1,6 @@
-import { computed, ComputedRef, getCurrentInstance } from '@vue/composition-api';
-import type VueRouter from 'vue-router';
-import type { Route } from 'vue-router';
+import { computed, getCurrentInstance } from 'vue-demi';
 
-export function useRouter(): VueRouter {
+export function useRouter() {
     const vm = getCurrentInstance();
 
     if (!vm) {
@@ -12,7 +10,7 @@ export function useRouter(): VueRouter {
     return vm.proxy.$router;
 }
 
-export function useRoute(): ComputedRef<Route> {
+export function useRoute() {
     const vm = getCurrentInstance();
 
     if (!vm) {

packages/core/src/useRouteQuery.ts

@@ -1,4 +1,4 @@
-import { computed, Ref } from '@vue/composition-api';
+import { computed, Ref } from 'vue-demi';
 
 import { useRoute, useRouter } from './helpers';
 import { queueQueryUpdate } from './queue-query-update';

packages/tests-vue2/index.spec.ts

@@ -1,4 +1,3 @@
-import VueCompositionApi from '@vue/composition-api';
 import { testUseRouteQuery } from 'tests-base';
 import { beforeEach, it } from 'vitest';
 import Vue from 'vue';
@@ -7,7 +6,6 @@ import VueRouter from 'vue-router';
 import { mountComposition } from './vue-composition-test-utils';
 
 Vue.use(VueRouter);
-Vue.use(VueCompositionApi);
 
 let router: VueRouter;
 

packages/tests-vue3/index.spec.ts

@@ -0,0 +1,29 @@
+import { testUseRouteQuery } from 'tests-base';
+import { beforeEach, it } from 'vitest';
+import { createRouter, createWebHistory, Router } from 'vue-router';
+
+import { mountComposition } from './vue-composition-test-utils';
+
+let router: Router;
+
+beforeEach(() => {
+    router = createRouter({
+        history: createWebHistory(),
+        routes: [
+            { path: '/', component: { template: '<div/>' } },
+        ],
+    });
+});
+
+testUseRouteQuery({
+    replaceQuery: async (query) => {
+        await router.replace({ query });
+    },
+    getCurrentQuery: () => router.currentRoute.value.query,
+    mountComposition: callback => mountComposition(callback, {
+        global: {
+            plugins: [router],
+        },
+    }),
+    it,
+});

packages/tests-vue3/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "tests-vue3",
+  "private": true,
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "2.0.0-rc.21",
+    "jsdom": "19.0.0",
+    "tests-base": "workspace:*",
+    "vitest": "0.9.3",
+    "vue": "3.2.33",
+    "vue-router": "4.0.14"
+  }
+}

packages/tests-vue3/vitest.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+    },
+});

packages/tests-vue3/vue-composition-test-utils.ts

@@ -0,0 +1,42 @@
+/**
+ * https://github.com/ariesjia/vue-composition-test-utils with some changes
+ * TODO: fork
+ */
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import { h } from 'vue';
+
+type MountingOptions = Parameters<typeof shallowMount>[1] & {
+    component?: any;
+};
+
+export interface MountResult<R> extends VueWrapper {
+    result: R;
+    error: unknown;
+}
+
+export function mountComposition<R>(callback: () => R, options: MountingOptions = {}): MountResult<R> {
+    let result: R;
+    let error: unknown;
+    const { component = {}, ...other } = options;
+    const Wrap = {
+        render: () => h('div'),
+        ...component,
+        setup() {
+            try {
+                result = callback();
+            } catch (e) {
+                error = e;
+            }
+            return {
+                result,
+                error,
+            };
+        },
+    };
+
+    const vueWrapper = shallowMount(Wrap, other);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return Object.assign(vueWrapper, { result, error });
+}