@hybridly/vue 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/index.cjs

@@ -56,6 +56,8 @@ const dialogStore = {
   }
 };
 
+const onMountedCallbacks = [];
+
 const state = {
   context: vue.ref(),
   view: vue.shallowRef(),
@@ -119,10 +121,17 @@ const wrapper = vue.defineComponent({
     function renderView() {
       utils.debug.adapter("vue:render:view", "Rendering view.");
       state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      return vue.h(state.view.value, {
+      return vue.withDirectives(vue.h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
-      });
+      }), [[{
+        mounted: () => {
+          vue.nextTick(() => {
+            utils.debug.adapter("vue:render:view", "Calling mounted callbacks.");
+            onMountedCallbacks.pop()?.();
+          });
+        }
+      }]]);
     }
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
@@ -279,6 +288,9 @@ async function initializeHybridly(options = {}) {
     responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
     adapter: {
       resolveComponent: resolve,
+      onWaitingForMount: (callback) => {
+        onMountedCallbacks.push(callback);
+      },
       onDialogClose: async () => {
         dialogStore.hide();
       },

package/dist/index.d.ts

@@ -182,7 +182,7 @@ declare const RouterLink: vue.DefineComponent<{
 /** Accesses all current properties. */
 declare function useProperties<T extends object, Global extends GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
 /** Accesses a property with a dot notation. */
-declare function useProperty<F = never, T = GlobalHybridlyProperties, P extends Path<T> = Path<T>>(path: [F] extends [never] ? [P] extends [never] ? string : P : string): ComputedRef<[F] extends [never] ? [PathValue<T, P>] extends [never] ? never : PathValue<T, P> : F>;
+declare function useProperty<F = never, T = GlobalHybridlyProperties, P extends Path<T> = Path<T>>(path: [F] extends [never] ? ([P] extends [never] ? string : P) : string): ComputedRef<[F] extends [never] ? ([PathValue<T, P>] extends [never] ? never : PathValue<T, P>) : F>;
 type PathImpl<T, K extends keyof T> = K extends string ? T[K] extends undefined ? undefined : NonNullable<T[K]> extends Record<string, any> ? NonNullable<T[K]> extends ArrayLike<any> ? K | `${K}.${PathImpl<NonNullable<T[K]>, Exclude<keyof NonNullable<T[K]>, keyof any[]>>}` : K | `${K}.${PathImpl<NonNullable<T[K]>, keyof NonNullable<T[K]>>}` : K : never;
 type Path<T> = PathImpl<T, keyof T> | keyof T;
 type PathValue<T, P extends Path<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? T[K] extends undefined ? undefined : Rest extends Path<T[K]> ? PathValue<T[K], Rest> : Rest extends Path<NonNullable<T[K]>> ? PathValue<NonNullable<T[K]>, Rest> | undefined : never : never : P extends keyof T ? T[P] extends undefined ? undefined : T[P] : never;
@@ -280,7 +280,7 @@ type BaseUrlTransformable = Partial<Omit<URL, 'searchParams' | 'toJSON' | 'toStr
     trailingSlash?: boolean;
 };
 
-type ConditionalNavigationOption = boolean | ((payload: HybridPayload) => boolean);
+type ConditionalNavigationOption<T extends boolean | string> = T | ((payload: NavigationOptions) => T);
 interface NavigationOptions {
     /** View to navigate to. */
     payload?: HybridPayload;
@@ -288,13 +288,13 @@ interface NavigationOptions {
      * Whether to replace the current history state instead of adding
      * one. This affects the browser's "back" and "forward" features.
      */
-    replace?: ConditionalNavigationOption;
-    /** Whether to preserve the current scrollbar position. */
-    preserveScroll?: ConditionalNavigationOption;
+    replace?: ConditionalNavigationOption<boolean>;
+    /** Whether to preserve the scrollbars positions on the page. */
+    preserveScroll?: ConditionalNavigationOption<boolean>;
     /** Whether to preserve the current page component's state. */
-    preserveState?: ConditionalNavigationOption;
+    preserveState?: ConditionalNavigationOption<boolean>;
     /** Whether to preserve the current URL. */
-    preserveUrl?: ConditionalNavigationOption;
+    preserveUrl?: ConditionalNavigationOption<boolean>;
     /**
      * Properties of the given URL to override.
      * @example
@@ -458,6 +458,8 @@ interface Adapter {
     onContextUpdate?: (context: InternalRouterContext) => void;
     /** Called when a dialog is closed. */
     onDialogClose?: (context: InternalRouterContext) => void;
+    /** Called when Hybridly is waiting for a component to be mounted. The given callback should be executed after the view component is mounted. */
+    onWaitingForMount: (callback: Function) => void;
 }
 interface ResolvedAdapter extends Adapter {
     updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
+import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, withDirectives, nextTick, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
 import { registerHook as registerHook$1, createRouter, makeUrl, router } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
 import { debug, random, showDomainsDisabledErrorModal, showPageComponentErrorModal, merge, clone } from '@hybridly/utils';
@@ -48,6 +48,8 @@ const dialogStore = {
   }
 };
 
+const onMountedCallbacks = [];
+
 const state = {
   context: ref(),
   view: shallowRef(),
@@ -111,10 +113,17 @@ const wrapper = defineComponent({
     function renderView() {
       debug.adapter("vue:render:view", "Rendering view.");
       state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      return h(state.view.value, {
+      return withDirectives(h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
-      });
+      }), [[{
+        mounted: () => {
+          nextTick(() => {
+            debug.adapter("vue:render:view", "Calling mounted callbacks.");
+            onMountedCallbacks.pop()?.();
+          });
+        }
+      }]]);
     }
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
@@ -271,6 +280,9 @@ async function initializeHybridly(options = {}) {
     responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
     adapter: {
       resolveComponent: resolve,
+      onWaitingForMount: (callback) => {
+        onMountedCallbacks.push(callback);
+      },
       onDialogClose: async () => {
         dialogStore.hide();
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -43,10 +43,10 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.0",
-    "@hybridly/config": "0.1.0-alpha.4",
-    "@hybridly/core": "0.1.0-alpha.4",
-    "@hybridly/progress-plugin": "0.1.0-alpha.4",
-    "@hybridly/utils": "0.1.0-alpha.4"
+    "@hybridly/config": "0.1.0-alpha.5",
+    "@hybridly/core": "0.1.0-alpha.5",
+    "@hybridly/progress-plugin": "0.1.0-alpha.5",
+    "@hybridly/utils": "0.1.0-alpha.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191",