@hybridly/vue 0.4.4 → 0.4.5

package/dist/index.cjs

@@ -236,19 +236,25 @@ const wrapper = vue.defineComponent({
         renderDialog()
       ];
     }
-    function renderView() {
-      utils.debug.adapter("vue:render:view", "Rendering view.");
-      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      const actual = state.view.value?.mounted;
-      state.view.value.mounted = () => {
+    function hijackOnMounted(component, type) {
+      if (!component) {
+        return;
+      }
+      const actual = component?.mounted;
+      component.mounted = () => {
         actual?.();
         vue.nextTick(() => {
-          utils.debug.adapter("vue:render:view", "Calling mounted callbacks.");
+          utils.debug.adapter(`vue:render:${type}`, "Calling mounted callbacks.");
           while (onMountedCallbacks.length) {
             onMountedCallbacks.shift()?.();
           }
         });
       };
+    }
+    function renderView() {
+      utils.debug.adapter("vue:render:view", "Rendering view.");
+      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
+      hijackOnMounted(state.view.value, "view");
       return vue.h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
@@ -257,6 +263,7 @@ const wrapper = vue.defineComponent({
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
         utils.debug.adapter("vue:render:dialog", "Rendering dialog.");
+        hijackOnMounted(dialogStore.state.component.value, "dialog");
         return vue.h(dialogStore.state.component.value, {
           ...dialogStore.state.properties.value,
           key: dialogStore.state.key.value
@@ -310,6 +317,11 @@ function setupDevtools(app) {
         key: "component",
         value: state.context.value?.view.component
       });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "deferred",
+        value: state.context.value?.view.deferred
+      });
       payload.instanceData.state.push({
         type: hybridlyStateType,
         key: "dialog",
@@ -404,8 +416,8 @@ function viewTransition() {
   let domUpdated;
   return {
     name: "view-transition",
-    navigating: async ({ isInitial }) => {
-      if (isInitial) {
+    navigating: async ({ type, hasDialog }) => {
+      if (type === "initial" || hasDialog) {
         return;
       }
       return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
@@ -416,6 +428,10 @@ function viewTransition() {
     mounted: () => {
       domUpdated?.();
       domUpdated = void 0;
+    },
+    navigated: () => {
+      domUpdated?.();
+      domUpdated = void 0;
     }
   };
 }
@@ -444,12 +460,16 @@ async function initializeHybridly(options = {}) {
         state.setContext(context);
       },
       onViewSwap: async (options2) => {
-        state.setView(options2.component);
+        if (options2.component) {
+          onMountedCallbacks.push(() => options2.onMounted?.({ isDialog: false }));
+          state.setView(options2.component);
+        }
         state.setProperties(options2.properties);
         if (!options2.preserveState && !options2.dialog) {
           state.setViewKey(utils.random());
         }
         if (options2.dialog) {
+          onMountedCallbacks.push(() => options2.onMounted?.({ isDialog: true }));
           dialogStore.setComponent(await resolve(options2.dialog.component));
           dialogStore.setProperties(options2.dialog.properties);
           dialogStore.setKey(options2.dialog.key);
@@ -880,7 +900,7 @@ function useHistoryState(key, initial) {
 function useBackForward() {
   const callbacks = [];
   core.registerHook("navigated", (options) => {
-    if (options.isBackForward) {
+    if (options.type === "back-forward") {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
     }

package/dist/index.d.cts

@@ -185,7 +185,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>>;
+declare function useProperties<T extends object, Global extends GlobalHybridlyProperties = GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
 /** Accesses a property with a dot notation. */
 declare function useProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ReturnType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string): ComputedRef<ReturnType>;
 /**
@@ -265,15 +265,21 @@ interface Hooks extends RequestHooks {
     /**
      * Called when a component navigation is being made.
      */
-    navigating: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    navigating: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a component has been navigated to.
      */
-    navigated: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    navigated: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a component has been navigated to and was mounted by the adapter.
      */
-    mounted: (context: InternalRouterContext) => MaybePromise<any>;
+    mounted: (options: InternalNavigationOptions & MountedHookOptions, context: InternalRouterContext) => MaybePromise<any>;
+}
+interface MountedHookOptions {
+    /**
+     * Whether the component being mounted is a dialog.
+     */
+    isDialog: boolean;
 }
 
 interface RoutingConfiguration {
@@ -321,16 +327,22 @@ interface NavigationOptions {
      * @internal This is an advanced property meant to be used internally.
      */
     updateHistoryState?: boolean;
+}
+interface InternalNavigationOptions extends NavigationOptions {
     /**
-     * Defines whether this navigation is a back/forward navigation from the popstate event.
-     * @internal This is an advanced property meant to be used internally.
+     * Defines the kind of navigation being performed.
+     * - initial: the initial page load's navigation
+     * - server: a navigation initiated by a server round-trip
+     * - local: a navigation initiated by `router.local`
+     * - back-forward: a navigation initiated by the browser's `popstate` event
+     * @internal
      */
-    isBackForward?: boolean;
+    type: 'initial' | 'local' | 'back-forward' | 'server';
     /**
-     * Defines whether this navigation is the first to happen after a direct page load.
-     * @internal This is an advanced property meant to be used internally.
+     * Defines whether this navigation opens a dialog.
+     * @internal
      */
-    isInitial?: boolean;
+    hasDialog?: boolean;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
@@ -378,11 +390,13 @@ interface PendingNavigation {
 /** A page or dialog component. */
 interface View {
     /** Name of the component to use. */
-    component: string;
+    component?: string;
     /** Properties to apply to the component. */
     properties: Properties;
+    /** Deferred properties for this view. */
+    deferred: string[];
 }
-interface Dialog extends View {
+interface Dialog extends Required<View> {
     /** URL that is the base background page when navigating to the dialog directly. */
     baseUrl: string;
     /** URL to which the dialog should redirect when closed. */
@@ -403,6 +417,8 @@ interface SwapOptions<T> {
     preserveState?: boolean;
     /** Current dialog. */
     dialog?: Dialog;
+    /** On mounted callback. */
+    onMounted?: (options: MountedHookOptions) => void;
 }
 type ViewComponent = any;
 type ResolveComponent = (name: string) => Promise<ViewComponent>;

package/dist/index.d.mts

@@ -185,7 +185,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>>;
+declare function useProperties<T extends object, Global extends GlobalHybridlyProperties = GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
 /** Accesses a property with a dot notation. */
 declare function useProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ReturnType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string): ComputedRef<ReturnType>;
 /**
@@ -265,15 +265,21 @@ interface Hooks extends RequestHooks {
     /**
      * Called when a component navigation is being made.
      */
-    navigating: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    navigating: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a component has been navigated to.
      */
-    navigated: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    navigated: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a component has been navigated to and was mounted by the adapter.
      */
-    mounted: (context: InternalRouterContext) => MaybePromise<any>;
+    mounted: (options: InternalNavigationOptions & MountedHookOptions, context: InternalRouterContext) => MaybePromise<any>;
+}
+interface MountedHookOptions {
+    /**
+     * Whether the component being mounted is a dialog.
+     */
+    isDialog: boolean;
 }
 
 interface RoutingConfiguration {
@@ -321,16 +327,22 @@ interface NavigationOptions {
      * @internal This is an advanced property meant to be used internally.
      */
     updateHistoryState?: boolean;
+}
+interface InternalNavigationOptions extends NavigationOptions {
     /**
-     * Defines whether this navigation is a back/forward navigation from the popstate event.
-     * @internal This is an advanced property meant to be used internally.
+     * Defines the kind of navigation being performed.
+     * - initial: the initial page load's navigation
+     * - server: a navigation initiated by a server round-trip
+     * - local: a navigation initiated by `router.local`
+     * - back-forward: a navigation initiated by the browser's `popstate` event
+     * @internal
      */
-    isBackForward?: boolean;
+    type: 'initial' | 'local' | 'back-forward' | 'server';
     /**
-     * Defines whether this navigation is the first to happen after a direct page load.
-     * @internal This is an advanced property meant to be used internally.
+     * Defines whether this navigation opens a dialog.
+     * @internal
      */
-    isInitial?: boolean;
+    hasDialog?: boolean;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
@@ -378,11 +390,13 @@ interface PendingNavigation {
 /** A page or dialog component. */
 interface View {
     /** Name of the component to use. */
-    component: string;
+    component?: string;
     /** Properties to apply to the component. */
     properties: Properties;
+    /** Deferred properties for this view. */
+    deferred: string[];
 }
-interface Dialog extends View {
+interface Dialog extends Required<View> {
     /** URL that is the base background page when navigating to the dialog directly. */
     baseUrl: string;
     /** URL to which the dialog should redirect when closed. */
@@ -403,6 +417,8 @@ interface SwapOptions<T> {
     preserveState?: boolean;
     /** Current dialog. */
     dialog?: Dialog;
+    /** On mounted callback. */
+    onMounted?: (options: MountedHookOptions) => void;
 }
 type ViewComponent = any;
 type ResolveComponent = (name: string) => Promise<ViewComponent>;

package/dist/index.d.ts

@@ -185,7 +185,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>>;
+declare function useProperties<T extends object, Global extends GlobalHybridlyProperties = GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
 /** Accesses a property with a dot notation. */
 declare function useProperty<Override = never, T extends SearchableObject = GlobalHybridlyProperties, P extends Path<T> & string = Path<T> & string, ReturnType = [Override] extends [never] ? PathValue<T, P> : Override>(path: [Override] extends [never] ? P : string): ComputedRef<ReturnType>;
 /**
@@ -265,15 +265,21 @@ interface Hooks extends RequestHooks {
     /**
      * Called when a component navigation is being made.
      */
-    navigating: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    navigating: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a component has been navigated to.
      */
-    navigated: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    navigated: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a component has been navigated to and was mounted by the adapter.
      */
-    mounted: (context: InternalRouterContext) => MaybePromise<any>;
+    mounted: (options: InternalNavigationOptions & MountedHookOptions, context: InternalRouterContext) => MaybePromise<any>;
+}
+interface MountedHookOptions {
+    /**
+     * Whether the component being mounted is a dialog.
+     */
+    isDialog: boolean;
 }
 
 interface RoutingConfiguration {
@@ -321,16 +327,22 @@ interface NavigationOptions {
      * @internal This is an advanced property meant to be used internally.
      */
     updateHistoryState?: boolean;
+}
+interface InternalNavigationOptions extends NavigationOptions {
     /**
-     * Defines whether this navigation is a back/forward navigation from the popstate event.
-     * @internal This is an advanced property meant to be used internally.
+     * Defines the kind of navigation being performed.
+     * - initial: the initial page load's navigation
+     * - server: a navigation initiated by a server round-trip
+     * - local: a navigation initiated by `router.local`
+     * - back-forward: a navigation initiated by the browser's `popstate` event
+     * @internal
      */
-    isBackForward?: boolean;
+    type: 'initial' | 'local' | 'back-forward' | 'server';
     /**
-     * Defines whether this navigation is the first to happen after a direct page load.
-     * @internal This is an advanced property meant to be used internally.
+     * Defines whether this navigation opens a dialog.
+     * @internal
      */
-    isInitial?: boolean;
+    hasDialog?: boolean;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
@@ -378,11 +390,13 @@ interface PendingNavigation {
 /** A page or dialog component. */
 interface View {
     /** Name of the component to use. */
-    component: string;
+    component?: string;
     /** Properties to apply to the component. */
     properties: Properties;
+    /** Deferred properties for this view. */
+    deferred: string[];
 }
-interface Dialog extends View {
+interface Dialog extends Required<View> {
     /** URL that is the base background page when navigating to the dialog directly. */
     baseUrl: string;
     /** URL to which the dialog should redirect when closed. */
@@ -403,6 +417,8 @@ interface SwapOptions<T> {
     preserveState?: boolean;
     /** Current dialog. */
     dialog?: Dialog;
+    /** On mounted callback. */
+    onMounted?: (options: MountedHookOptions) => void;
 }
 type ViewComponent = any;
 type ResolveComponent = (name: string) => Promise<ViewComponent>;

package/dist/index.mjs

@@ -229,19 +229,25 @@ const wrapper = defineComponent({
         renderDialog()
       ];
     }
-    function renderView() {
-      debug.adapter("vue:render:view", "Rendering view.");
-      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      const actual = state.view.value?.mounted;
-      state.view.value.mounted = () => {
+    function hijackOnMounted(component, type) {
+      if (!component) {
+        return;
+      }
+      const actual = component?.mounted;
+      component.mounted = () => {
         actual?.();
         nextTick(() => {
-          debug.adapter("vue:render:view", "Calling mounted callbacks.");
+          debug.adapter(`vue:render:${type}`, "Calling mounted callbacks.");
           while (onMountedCallbacks.length) {
             onMountedCallbacks.shift()?.();
           }
         });
       };
+    }
+    function renderView() {
+      debug.adapter("vue:render:view", "Rendering view.");
+      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
+      hijackOnMounted(state.view.value, "view");
       return h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
@@ -250,6 +256,7 @@ const wrapper = defineComponent({
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
         debug.adapter("vue:render:dialog", "Rendering dialog.");
+        hijackOnMounted(dialogStore.state.component.value, "dialog");
         return h(dialogStore.state.component.value, {
           ...dialogStore.state.properties.value,
           key: dialogStore.state.key.value
@@ -303,6 +310,11 @@ function setupDevtools(app) {
         key: "component",
         value: state.context.value?.view.component
       });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "deferred",
+        value: state.context.value?.view.deferred
+      });
       payload.instanceData.state.push({
         type: hybridlyStateType,
         key: "dialog",
@@ -397,8 +409,8 @@ function viewTransition() {
   let domUpdated;
   return {
     name: "view-transition",
-    navigating: async ({ isInitial }) => {
-      if (isInitial) {
+    navigating: async ({ type, hasDialog }) => {
+      if (type === "initial" || hasDialog) {
         return;
       }
       return new Promise((confirmTransitionStarted) => document.startViewTransition(() => {
@@ -409,6 +421,10 @@ function viewTransition() {
     mounted: () => {
       domUpdated?.();
       domUpdated = void 0;
+    },
+    navigated: () => {
+      domUpdated?.();
+      domUpdated = void 0;
     }
   };
 }
@@ -437,12 +453,16 @@ async function initializeHybridly(options = {}) {
         state.setContext(context);
       },
       onViewSwap: async (options2) => {
-        state.setView(options2.component);
+        if (options2.component) {
+          onMountedCallbacks.push(() => options2.onMounted?.({ isDialog: false }));
+          state.setView(options2.component);
+        }
         state.setProperties(options2.properties);
         if (!options2.preserveState && !options2.dialog) {
           state.setViewKey(random());
         }
         if (options2.dialog) {
+          onMountedCallbacks.push(() => options2.onMounted?.({ isDialog: true }));
           dialogStore.setComponent(await resolve(options2.dialog.component));
           dialogStore.setProperties(options2.dialog.properties);
           dialogStore.setKey(options2.dialog.key);
@@ -873,7 +893,7 @@ function useHistoryState(key, initial) {
 function useBackForward() {
   const callbacks = [];
   registerHook$1("navigated", (options) => {
-    if (options.isBackForward) {
+    if (options.type === "back-forward") {
       callbacks.forEach((fn) => fn(state.context.value));
       callbacks.splice(0, callbacks.length);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -44,11 +44,11 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.2",
-    "@hybridly/core": "0.4.4",
-    "@hybridly/utils": "0.4.4"
+    "@hybridly/core": "0.4.5",
+    "@hybridly/utils": "0.4.5"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.197",
+    "@types/lodash": "^4.14.198",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/nprogress": "^0.2.0",