feat(useHydration): add useHydration composable

docs/api/vue-composable.api.md

@@ -4,6 +4,7 @@
 
 ```ts
 import { ComputedRef } from "@vue/runtime-core";
+import { Plugin as Plugin_2 } from "@vue/runtime-core";
 import { provide } from "@vue/runtime-core";
 import { Ref } from "@vue/runtime-core";
 import { UnwrapRef } from "@vue/runtime-core";
@@ -351,6 +352,9 @@ export function getCssVariableFor(
   name: string
 ): CssVariable;
 
+// @public (undocumented)
+export const hydrationPlugin: Plugin_2;
+
 // @public
 export interface i18n extends Record<string, i18nMessageValue> {}
 
@@ -1214,6 +1218,9 @@ export function useGeolocation(
   highAccuracy: Ref<boolean | null>;
 };
 
+// @public (undocumented)
+export function useHydration(): Readonly<Ref<boolean>>;
+
 // @public
 export function useI18n<
   T extends i18nDefinition<TMessage>,

examples/vue-composable-example/src/main.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import VueCompositionApi from "@vue/composition-api";
+import { hydrationPlugin } from "vue-composable";
 import App from "./App.vue";
 
 import HelloWorld from "./components/HelloWorld";
@@ -13,6 +14,8 @@ import SharedRef from "./components/SharedRef";
 
 Vue.use(VueRouter);
 Vue.use(VueCompositionApi);
+Vue.use(hydrationPlugin);
+
 window.SuperVue = Vue;
 
 Vue.config.productionTip = false;

examples/vue-next-webpack-preview-master/src/App.vue

@@ -2,6 +2,8 @@
   <img src="./logo.png" />
   <h1>Hello Vue 3!</h1>
 
+  <p>hydrating: {{ hydrating }}</p>
+
   <ul>
     <li
       v-for="({ name, use }, i) in components"
@@ -34,6 +36,8 @@ import HelloWorld from "./components/HelloWorld.vue";
 import Swapi from "./components/SWAPI.vue";
 import TodoList from "./components/TodoList.vue";
 import { ref } from "vue";
+import { useHydration } from "vue-composable";
+import { onMounted } from "vue";
 
 export default {
   components: {
@@ -48,6 +52,13 @@ export default {
   },
 
   setup(props, ctx) {
+    const hydrating = useHydration();
+
+    console.log("setup hydrating", hydrating.value);
+    onMounted(() => {
+      console.log("mounted hydrating", hydrating.value);
+    });
+
     const selected = ref(0);
     const components = require
       .context("./components", true, /\.(vue)$/)
@@ -62,7 +73,8 @@ export default {
 
     return {
       components,
-      selected
+      selected,
+      hydrating
     };
   }
 };

examples/vue-next-webpack-preview-master/src/main.js

@@ -1,4 +1,9 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
+import { hydrationPlugin } from "vue-composable";
 
-createApp(App).mount('#app')
+const app = createApp(App);
+
+app.use(hydrationPlugin);
+
+app.mount("#app");

packages/axios/package.json

@@ -58,4 +58,4 @@
     "@vue/runtime-core": "^3.0.0-beta.14",
     "typescript": "^3.8.3"
   }
-}
+}

packages/vue-composable/package.json

@@ -46,4 +46,4 @@
     "@vue/composition-api": "^0.5.0",
     "vue": "^2.6.10"
   }
-}
+}

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

@@ -13,16 +13,20 @@ export {
   computed,
   getCurrentInstance
 } from "@vue/composition-api";
+export { VueConstructor as App } from "vue";
 
 import {
   Ref,
   watch as vueWatch,
   isRef,
   set,
   getCurrentInstance,
-  onUnmounted
+  onUnmounted,
+  computed
 } from "@vue/composition-api";
-import Vue from "vue";
+import Vue, { PluginFunction } from "vue";
+
+export type Plugin = PluginFunction<any>;
 
 interface WatcherOption {
   immediate: boolean;
@@ -95,3 +99,8 @@ export function watch(source: any, cb: any, options?: any): any {
   }
   return w;
 }
+
+// FAKE readonly
+export function readonly<T extends object>(target: T): Readonly<UnwrapRef<T>> {
+  return computed(() => target) as any;
+}

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

@@ -15,7 +15,10 @@ export {
   computed,
   getCurrentInstance,
   ComputedRef,
-  UnwrapRef
+  UnwrapRef,
+  Plugin,
+  App,
+  readonly
 } from "@vue/runtime-core";
 
 // istanbul ignore next

packages/vue-composable/src/api.ts

@@ -15,7 +15,10 @@ export {
   computed,
   getCurrentInstance,
   ComputedRef,
-  UnwrapRef
+  UnwrapRef,
+  Plugin,
+  App,
+  readonly
 } from "@vue/runtime-core";
 
 // istanbul ignore next

packages/vue-composable/src/index.ts

@@ -13,6 +13,7 @@ export * from "./format";
 export * from "./validation";
 export * from "./i18n";
 export * from "./meta";
+export * from "./ssr";
 
 export const VERSION = __VERSION__;
 export const VUE_VERSION: "2" | "3" = __VUE_2__ ? "2" : "3";

packages/vue-composable/src/ssr/hydration.ts

@@ -0,0 +1,57 @@
+import {
+  inject,
+  ref,
+  InjectionKey,
+  Ref,
+  readonly,
+  computed,
+  Plugin
+} from "../api";
+
+// istanbul ignore next
+const HYDRATION_KEY: InjectionKey<Readonly<
+  Ref<Readonly<boolean>>
+>> = /*#__PURE__*/ Symbol((__DEV__ && "VUE_COMPOSABLE_HYDRATION_KEY") || ``);
+
+export const hydrationPlugin: Plugin = {
+  // @ts-ignore
+  install(app: any) {
+    const hydrating = ref(true);
+    const h = readonly(hydrating);
+    if (__VUE_2__) {
+      // TODO add mixin?
+      if (__DEV__) {
+        console.warn(
+          "[hydrationPlugin] HydrationPlugin is not supported in vue2"
+        );
+        hydrating.value = false;
+      }
+    } else {
+      // @ts-ignore
+      app._context.provides[HYDRATION_KEY] = h;
+
+      const appMount = app.mount;
+      app.mount = (...args: any[]) => {
+        const component = appMount(...args);
+        hydrating.value = false;
+        return component;
+      };
+    }
+  }
+};
+
+export function useHydration() {
+  if (__DEV__) {
+    const s = Symbol();
+    const r = inject(HYDRATION_KEY, s as any);
+    if (r === s) {
+      console.warn(
+        "[useHydration] no hydration found, did you forget to `app.use(HydrationPlugin)`?"
+      );
+    }
+  }
+  return inject(
+    HYDRATION_KEY,
+    computed(() => false)
+  );
+}

packages/vue-composable/src/ssr/index.ts

@@ -0,0 +1 @@
+export * from "./hydration";