feat(vue2.7): WIP support vue2.7

docs/api/vue-composable.api.md

@@ -729,9 +729,7 @@ export interface LocalStorageReturn<T> {
   clear: () => void;
   remove: () => void;
   setSync: (sync: boolean) => void;
-  // (undocumented)
-  storage: Ref<T>;
-  // (undocumented)
+  storage: Ref<T | undefined>;
   supported: boolean;
 }
 
@@ -1071,6 +1069,14 @@ export interface ScrollResult {
   scrollTopTo: (y: number) => void;
 }
 
+// @public (undocumented)
+export interface sessionStorageReturn<T> {
+  clear: () => void;
+  remove: () => void;
+  storage: Ref<T | undefined>;
+  supported: boolean;
+}
+
 // Warning: (ae-forgotten-export) The symbol "TailwindConfigEmpty" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "ExtractTailwindScreens" needs to be exported by the entry point index.d.ts
 //
@@ -1749,17 +1755,11 @@ export function useLanguage(): {
 };
 
 // @public (undocumented)
-export function useLocalStorage(
-  key: RefTyped<string>,
-  defaultValue?: RefTyped<string>,
-  sync?: boolean
-): LocalStorageReturn<string>;
-
-// @public (undocumented)
-export function useLocalStorage<T>(
+export function useLocalStorage<T = string>(
   key: RefTyped<string>,
   defaultValue?: RefTyped<T>,
-  sync?: boolean
+  sync?: boolean,
+  useDebounce?: boolean
 ): LocalStorageReturn<T>;
 
 // @public (undocumented)
@@ -2169,18 +2169,11 @@ export function useRetry<T, TArgs extends Array<any>>(
 ): RetryReturnFactory<T, TArgs>;
 
 // @public (undocumented)
-export function useSessionStorage(
-  key: RefTyped<string>,
-  defaultValue?: RefTyped<string>,
-  sync?: boolean
-): LocalStorageReturn<string>;
-
-// @public (undocumented)
-export function useSessionStorage<T>(
+export function useSessionStorage<T = string>(
   key: RefTyped<string>,
   defaultValue?: RefTyped<T>,
-  sync?: boolean
-): LocalStorageReturn<T>;
+  useDebounce?: boolean
+): sessionStorageReturn<T>;
 
 // Warning: (ae-forgotten-export) The symbol "NavigatorShareData" needs to be exported by the entry point index.d.ts
 // Warning: (ae-forgotten-export) The symbol "ShareReturn" needs to be exported by the entry point index.d.ts
@@ -2302,7 +2295,7 @@ export function useWorkerFunction<T, TArgs extends Array<any>>(
 export const VERSION: string;
 
 // @public (undocumented)
-export const VUE_VERSION: "2" | "3";
+export const VUE_VERSION: "2" | "2.7" | "3";
 
 // @public (undocumented)
 export const VueComposableDevtools: {
@@ -2351,7 +2344,7 @@ export interface WebStorage {
   $watchHandlers: Map<string, Function>;
   clear(): void;
   getItem<T = any>(key: string): Ref<T> | null;
-  getRef<T = any>(key: RefTyped<string>): Ref<T>;
+  getRef<T = any>(key: RefTyped<string>, useDebounce?: boolean): Ref<T>;
   key(index: number): string | null;
   readonly length: number;
   removeItem(key: string): void;
@@ -2401,7 +2394,7 @@ export type WrapRef<T> = T extends Ref<any> ? T : Ref<T>;
 
 // Warnings were encountered during analysis:
 //
-// dist/v3/packages/vue-composable/src/validation/validation.d.ts:72:5 - (ae-forgotten-export) The symbol "ToObjectOutput" needs to be exported by the entry point index.d.ts
+// src/validation/validation.ts:397:46 - (ae-forgotten-export) The symbol "ToObjectOutput" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 ```

jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
     __SSR__: true,
     __VERSION__: pkg.version,
     __VUE_2__: process.env.VUE === "2",
+    __VUE_2Dot7__: process.env.VUE === "2.7",
     __COMMIT__: "none",
   },
   setupFiles: [

package.json

@@ -18,12 +18,14 @@
   "scripts": {
     "build": "node scripts/build.js",
     "build:vue2": "yarn build --version=2",
+    "build:vue2.7": "yarn build --version=2.7",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
     "release": "node scripts/publish.js",
     "test": "jest --coverage",
     "test:watch": "jest --coverage --watch",
     "test:prod": "npm run lint && npm run test -- --no-cache",
     "test:vue2": "cross-env VUE=2 yarn test",
+    "test:vue2.7": "cross-env VUE=2.7 yarn test",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "lint": "prettier \"packages/**/*.ts\" \"docs/(.vuepress|Examples|composable)/**/*.md\" \"docs/.vuepress/*.js\" \"docs/**/*.vue\" --write"
@@ -98,6 +100,7 @@
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
+    "vue2.7": "npm:vue@^2.7.0",
     "vuepress": "^1.8.2",
     "yorkie": "^2.0.0",
     "zlib": "^1.0.5"

packages/axios/api-extractor.v2.7.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/v2.7/packages/<unscopedPackageName>/src/index.d.ts",
+  "dtsRollup": {
+    "untrimmedFilePath": "./dist/v2.7/<unscopedPackageName>.d.ts"
+  }
+}

packages/axios/package.json

@@ -60,5 +60,9 @@
     "@types/node": "^16.4.7",
     "@vue/runtime-core": "^3.0.7",
     "typescript": "^4.2.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "axios": "^0.22.0"
   }
-}
+}

packages/axios/src/api.2.7.ts

@@ -0,0 +1,18 @@
+/* istanbul ignore file */
+
+export {
+  ref,
+  unref,
+  isRef,
+  Ref,
+  onMounted,
+  onUnmounted,
+  inject,
+  InjectionKey,
+  provide,
+  reactive,
+  computed,
+  UnwrapRef,
+  ComputedRef,
+  getCurrentInstance,
+} from "vue2.7";

packages/cookie/api-extractor.v2.7.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/v2.7/packages/<unscopedPackageName>/src/index.d.ts",
+  "dtsRollup": {
+    "untrimmedFilePath": "./dist/v2.7/<unscopedPackageName>.d.ts"
+  }
+}

packages/cookie/package.json

@@ -62,5 +62,10 @@
     "@types/node": "^16.4.7",
     "@vue/runtime-core": "^3.0.7",
     "typescript": "^4.2.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@types/js-cookie": "^2.2.6",
+    "js-cookie": "^2.2.1"
   }
-}
+}

packages/cookie/src/api.2.7.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+
+export { ref, Ref, onMounted, watch } from "vue2.7";

packages/global.d.ts

@@ -4,4 +4,5 @@ declare var __JSDOM__: boolean;
 declare var __COMMIT__: string;
 declare var __VERSION__: string;
 declare var __VUE_2__: boolean;
+declare var __VUE_2Dot7__: boolean;
 declare var __SSR__: boolean;

packages/vue-composable/api-extractor.v2.7.json

@@ -0,0 +1,7 @@
+{
+    "extends": "../../api-extractor.json",
+    "mainEntryPointFilePath": "./dist/v2.7/packages/<unscopedPackageName>/src/index.d.ts",
+    "dtsRollup": {
+        "untrimmedFilePath": "./dist/v2.7/<unscopedPackageName>.d.ts"
+    }
+}

packages/vue-composable/package.json

@@ -52,5 +52,11 @@
   "peerDependencies2": {
     "@vue/composition-api": "^1.0.0-beta.14",
     "vue": "^2.6.10"
+  },
+  "peerDependencies2.7": {
+    "vue": "^2.7.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   }
-}
+}

packages/vue-composable/scripts/postinstall.js

@@ -73,6 +73,8 @@ if (!Vue || typeof Vue.version !== "string") {
   console.warn(
     "[vue-composable] Vue is not detected in the dependencies. Please install Vue first."
   );
+} else if (Vue.version.startsWith("2.7")) {
+  switchVersion(2.7);
 } else if (Vue.version.startsWith("2.")) {
   const VCA = loadModule("@vue/composition-api");
   if (!VCA) {

packages/vue-composable/src/api.2.7.ts

@@ -0,0 +1,52 @@
+/* istanbul ignore file */
+
+export {
+  ref,
+  isRef,
+  unref,
+  Ref,
+  inject,
+  InjectionKey,
+  provide,
+  watch,
+  reactive,
+  computed,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onDeactivated,
+  ComputedRef,
+  toRaw,
+  UnwrapRef, // Plugin,
+  customRef,
+  watchEffect,
+} from "vue2.7";
+export { VueConstructor as App } from "vue2.7";
+
+import Vue, { PluginFunction } from "vue2.7";
+import { computed, Ref, set } from "vue2.7";
+import { unwrap } from "./utils";
+
+export type Plugin = PluginFunction<any>;
+
+export const vueDelete = (x: any, o: string) => Vue.delete(x, o);
+export const vueSet = set;
+
+// FAKE readonly
+export function readonly<T extends object>(
+  target: T
+): T extends Ref ? DeepReadonly<T> : DeepReadonly<Ref<T>> {
+  return computed(() => unwrap(target)) as any;
+}
+
+// FAKE DeepReadonly
+export type DeepReadonly<T> = Readonly<T>;
+
+declare module "vue2.7" {
+  interface VueConstructor {
+    provide(key: any, value: any): void;
+  }
+}

packages/vue-composable/src/index.ts

@@ -20,5 +20,9 @@ export * from "./dom";
 
 export const VERSION = __VERSION__;
 // istanbul ignore next
-export const VUE_VERSION: "2" | "3" = __VUE_2__ ? "2" : "3";
+export const VUE_VERSION: "2" | "2.7" | "3" = __VUE_2Dot7__
+  ? "2.7"
+  : __VUE_2__
+  ? "2"
+  : "3";
 export const COMMIT = __COMMIT__;

packages/vue-composable/src/web/pageVisibility.ts

@@ -1,7 +1,7 @@
 import { ref, Ref } from "../api";
 import { isClient, PASSIVE_EV } from "../utils";
 
-let visibility: Ref<DocumentVisibilityState> | undefined = undefined;
+let visibility: Ref<VisibilityState> | undefined = undefined;
 let hidden: Ref<boolean> | undefined = undefined;
 
 export function usePageVisibility() {
@@ -21,11 +21,11 @@ export function usePageVisibility() {
         PASSIVE_EV
       );
     } else {
-      visibility = ref<DocumentVisibilityState>("visible");
+      visibility = ref<VisibilityState>("visible");
     }
   }
   return {
     visibility,
-    hidden
+    hidden,
   };
 }

rollup.config.js

@@ -213,6 +213,7 @@ function createReplacePlugin(
         : "'production'",
 
       __VUE_2__: process.env.VUE_VERSION === "2",
+      __VUE_2Dot7__: process.env.VUE_VERSION === "2.7",
     },
   });
 }