@hybridly/vue 0.3.1 → 0.4.1

package/dist/index.cjs

@@ -127,7 +127,9 @@ const wrapper = vue.defineComponent({
         actual?.();
         vue.nextTick(() => {
           utils.debug.adapter("vue:render:view", "Calling mounted callbacks.");
-          onMountedCallbacks.pop()?.();
+          while (onMountedCallbacks.length) {
+            onMountedCallbacks.shift()?.();
+          }
         });
       };
       return vue.h(state.view.value, {
@@ -280,17 +282,15 @@ async function initializeHybridly(options = {}) {
   if (!element) {
     throw new Error("Could not find an HTML element to initialize Vue on.");
   }
-  if (!payload) {
-    throw new Error("No payload. Are you using `@hybridly` or the `payload` option?");
-  }
   state.setContext(await core.createRouter({
     axios: resolved.axios,
     plugins: resolved.plugins,
     serializer: resolved.serializer,
     responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
+    routing: resolved.routing,
     adapter: {
       resolveComponent: resolve,
-      onWaitingForMount: (callback) => {
+      executeOnMounted: (callback) => {
         onMountedCallbacks.push(callback);
       },
       onDialogClose: async () => {
@@ -346,21 +346,20 @@ function prepare(options) {
   const id = options.id ?? "root";
   const element = document?.getElementById(id) ?? void 0;
   utils.debug.adapter("vue", `Element "${id}" is:`, element);
-  const payload = options.payload ?? element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
+  const payload = element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
+  if (!payload) {
+    throw new Error("No payload found. Are you using the `@hybridly` directive?");
+  }
   if (options.cleanup !== false) {
     delete element.dataset.payload;
   }
   utils.debug.adapter("vue", "Resolved:", { isServer, element, payload });
   const resolve = async (name) => {
     utils.debug.adapter("vue", "Resolving component", name);
-    if (options.resolve) {
-      const component = await options.resolve?.(name);
-      return component.default ?? component;
-    }
-    if (options.components) {
-      return await resolvePageComponent(name, options);
+    if (!options.imported) {
+      throw new Error("No component loaded. Did you initialize Hybridly? Does `php artisan hybridly:config` return an error?");
     }
-    throw new Error("Either `initializeHybridly#resolve` or `initializeHybridly#pages` should be defined.");
+    return await resolveViewComponent(name, options);
   };
   if (options.progress !== false) {
     options.plugins = [
@@ -375,21 +374,13 @@ function prepare(options) {
     resolve
   };
 }
-async function resolvePageComponent(name, options) {
-  const components = options.components;
-  if (name.includes(":")) {
-    if (options.domains === false) {
-      utils.showDomainsDisabledErrorModal(name);
-      console.warn(`${name} is a domain-based component, but domains are disabled.`);
-      return;
-    }
-    const [domain, page] = name.split(":");
-    name = `${options.domains}.${domain}.${options.pages}.${page}`;
-  }
-  const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path2) => path2.endsWith(`${name.replaceAll(".", "/")}.vue`));
-  if (!path) {
+async function resolveViewComponent(name, options) {
+  const components = options.imported;
+  const result = options.components.views.find((view) => name === view.identifier);
+  const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path2) => result ? path2.endsWith(result?.path) : false);
+  if (!result || !path) {
+    console.warn(`Page component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
     utils.showPageComponentErrorModal(name);
-    console.warn(`Page component "${name}" could not be found. Available pages:`, Object.keys(components));
     return;
   }
   let component = typeof components[path] === "function" ? await components[path]() : components[path];
@@ -402,6 +393,7 @@ const RouterLink = vue.defineComponent({
   setup(_, { slots, attrs }) {
     return (props) => {
       let data = props.data ?? {};
+      const preloads = props.preload ?? false;
       const url = core.makeUrl(props.href ?? "");
       const method = props.method?.toUpperCase() ?? "GET";
       const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
@@ -424,6 +416,24 @@ Please specify a more appropriate element using the "as" attribute. For example:
         ...attrs,
         ...as === "a" ? { href: url } : {},
         ...props.disabled ? { disabled: props.disabled } : {},
+        onMouseenter: () => {
+          if (!preloads) {
+            return;
+          }
+          if (props.external) {
+            return;
+          }
+          if (props.disabled) {
+            return;
+          }
+          if (method !== "GET") {
+            return;
+          }
+          core.router.preload(url, {
+            data,
+            ...props.options
+          });
+        },
         onClick: (event) => {
           if (props.external) {
             return;
@@ -480,6 +490,10 @@ Please specify a more appropriate element using the "as" attribute. For example:
       type: String,
       required: false,
       default: void 0
+    },
+    preload: {
+      type: Boolean,
+      default: false
     }
   }
 });
@@ -680,7 +694,7 @@ function useForm(options) {
     hasDirty,
     submitWithOptions: submit,
     submit: () => submit(),
-    hasErrors: vue.computed(() => Object.values(errors.value).length > 0),
+    hasErrors: vue.computed(() => Object.values(errors.value ?? {}).length > 0),
     initial,
     loaded,
     progress,
@@ -885,7 +899,6 @@ exports.defineLayout = defineLayout;
 exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
 exports.registerHook = registerHook;
-exports.resolvePageComponent = resolvePageComponent;
 exports.useBackForward = useBackForward;
 exports.useContext = useContext;
 exports.useDialog = useDialog;

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import * as vue from 'vue';
 import { App, Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } from 'vue';
 import * as _hybridly_core from '@hybridly/core';
-import { ResolveComponent as ResolveComponent$1, RouterContextOptions, Plugin as Plugin$1, HybridPayload as HybridPayload$1, RouterContext, Method as Method$1, HybridRequestOptions as HybridRequestOptions$1, UrlResolvable as UrlResolvable$1, registerHook as registerHook$1 } from '@hybridly/core';
+import { RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Method$1, HybridRequestOptions as HybridRequestOptions$1, UrlResolvable as UrlResolvable$1, registerHook as registerHook$1 } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
 import { Axios, AxiosResponse, AxiosProgressEvent } from 'axios';
-import { HybridlyConfig } from '@hybridly/config';
 import { ProgressOptions } from '@hybridly/progress-plugin';
 import * as _vue_shared from '@vue/shared';
 import { RequestData } from '@hybridly/utils';
@@ -14,11 +13,6 @@ import { SearchableObject, Path, PathValue } from '@clickbar/dot-diver';
  * Initializes Hybridly's router and context.
  */
 declare function initializeHybridly(options?: InitializeOptions): Promise<any>;
-/**
- * Resolves a page component.
- */
-declare function resolvePageComponent(name: string, options: ResolvedInitializeOptions): Promise<any>;
-type ResolvedInitializeOptions = InitializeOptions & HybridlyConfig;
 interface InitializeOptions {
     /** Callback that gets executed before Vue is mounted. */
     enhanceVue?: (vue: App<Element>) => any;
@@ -30,8 +24,6 @@ interface InitializeOptions {
     devtools?: boolean;
     /** Whether to display response error modals. */
     responseErrorModals?: boolean;
-    /** A custom component resolution option. */
-    resolve?: ResolveComponent$1;
     /** Custom history state serialization functions. */
     serializer?: RouterContextOptions['serializer'];
     /** Progressbar options. */
@@ -42,10 +34,6 @@ interface InitializeOptions {
     plugins?: Plugin$1[];
     /** Custom Axios instance. */
     axios?: Axios;
-    /** Initial view data. This is automatically set by Laravel, using this option would override the default behavior. */
-    payload?: HybridPayload$1;
-    /** A custom collection of pages components. This is automatically determined thanks to `root` and `pages`, using this would override the default behavior. */
-    components?: Record<string, any>;
 }
 interface SetupArguments {
     /** DOM element to mount Vue on. */
@@ -97,42 +85,21 @@ declare const RouterLink: vue.DefineComponent<{
         required: false;
         default: undefined;
     };
-}, (props: Readonly<_vue_shared.LooseRequired<Readonly<vue.ExtractPropTypes<{
-    href: {
-        type: StringConstructor;
-        required: false;
-        default: undefined;
-    };
-    as: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: string;
-    };
-    method: {
-        type: PropType<"delete" | Method$1 | "get" | "post" | "put" | "patch">;
-        default: string;
-    };
-    data: {
-        type: PropType<RequestData>;
-        default: () => {};
-    };
-    external: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
+    preload: {
         type: BooleanConstructor;
         default: boolean;
     };
-    options: {
-        type: PropType<Omit<HybridRequestOptions$1, "data" | "url" | "method">>;
-        default: () => {};
-    };
-    text: {
-        type: StringConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & {}>>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}, (props: _vue_shared.LooseRequired<{
+    readonly data: RequestData;
+    readonly method: "delete" | Method$1 | "get" | "post" | "put" | "patch";
+    readonly options: Omit<HybridRequestOptions$1, "data" | "url" | "method">;
+    readonly as: string | Record<string, any>;
+    readonly external: boolean;
+    readonly disabled: boolean;
+    readonly preload: boolean;
+    readonly text?: string | undefined;
+    readonly href?: string | undefined;
+} & {}>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     href: {
@@ -169,6 +136,10 @@ declare const RouterLink: vue.DefineComponent<{
         required: false;
         default: undefined;
     };
+    preload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     data: RequestData;
     text: string;
@@ -178,7 +149,8 @@ declare const RouterLink: vue.DefineComponent<{
     as: string | Record<string, any>;
     external: boolean;
     disabled: boolean;
-}>;
+    preload: boolean;
+}, {}>;
 
 /** Accesses all current properties. */
 declare function useProperties<T extends object, Global extends GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
@@ -261,6 +233,10 @@ interface Hooks extends RequestHooks {
      * Called when a component has been navigated to.
      */
     navigated: (options: NavigationOptions, context: InternalRouterContext) => MaybePromise<any>;
+    /**
+     * Called when a component has been navigated to and was mounted by the adapter.
+     */
+    mounted: (context: InternalRouterContext) => MaybePromise<any>;
 }
 
 interface RoutingConfiguration {
@@ -443,6 +419,8 @@ interface InternalRouterContext {
     routing?: RoutingConfiguration;
     /** Whether to display response error modals. */
     responseErrorModals?: boolean;
+    /** Cache of preload requests. */
+    preloadCache: Map<string, AxiosResponse>;
 }
 /** Adapter-specific functions. */
 interface Adapter {
@@ -455,7 +433,7 @@ interface Adapter {
     /** 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;
+    executeOnMounted: (callback: Function) => void;
 }
 interface ResolvedAdapter extends Adapter {
     updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;
@@ -529,7 +507,7 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
         readonly percentage: number;
     } | undefined;
     isDirty: boolean;
-    errors: vue.UnwrapRef<DeepReadonly<[Errors<T>] extends [vue.Ref<any>] ? vue.Ref<any> & Errors<T> : vue.Ref<vue.UnwrapRef<Errors<T>>>>>;
+    errors: DeepReadonly<vue.UnwrapRef<Errors<T>>>;
     processing: boolean;
     successful: boolean;
     failed: boolean;
@@ -817,4 +795,4 @@ declare function useRefinements<Properties extends object, RefinementsKey extend
     applyFilter: (filter: string, value: any, options?: AvailableHybridRequestOptions) => Promise<_hybridly_core.NavigationResponse | undefined>;
 };
 
-export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };
+export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, 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, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
+import { debug, random, showPageComponentErrorModal, merge, clone, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
 import { progress } from '@hybridly/progress-plugin';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
 import qs from 'qs';
@@ -119,7 +119,9 @@ const wrapper = defineComponent({
         actual?.();
         nextTick(() => {
           debug.adapter("vue:render:view", "Calling mounted callbacks.");
-          onMountedCallbacks.pop()?.();
+          while (onMountedCallbacks.length) {
+            onMountedCallbacks.shift()?.();
+          }
         });
       };
       return h(state.view.value, {
@@ -272,17 +274,15 @@ async function initializeHybridly(options = {}) {
   if (!element) {
     throw new Error("Could not find an HTML element to initialize Vue on.");
   }
-  if (!payload) {
-    throw new Error("No payload. Are you using `@hybridly` or the `payload` option?");
-  }
   state.setContext(await createRouter({
     axios: resolved.axios,
     plugins: resolved.plugins,
     serializer: resolved.serializer,
     responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
+    routing: resolved.routing,
     adapter: {
       resolveComponent: resolve,
-      onWaitingForMount: (callback) => {
+      executeOnMounted: (callback) => {
         onMountedCallbacks.push(callback);
       },
       onDialogClose: async () => {
@@ -338,21 +338,20 @@ function prepare(options) {
   const id = options.id ?? "root";
   const element = document?.getElementById(id) ?? void 0;
   debug.adapter("vue", `Element "${id}" is:`, element);
-  const payload = options.payload ?? element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
+  const payload = element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
+  if (!payload) {
+    throw new Error("No payload found. Are you using the `@hybridly` directive?");
+  }
   if (options.cleanup !== false) {
     delete element.dataset.payload;
   }
   debug.adapter("vue", "Resolved:", { isServer, element, payload });
   const resolve = async (name) => {
     debug.adapter("vue", "Resolving component", name);
-    if (options.resolve) {
-      const component = await options.resolve?.(name);
-      return component.default ?? component;
-    }
-    if (options.components) {
-      return await resolvePageComponent(name, options);
+    if (!options.imported) {
+      throw new Error("No component loaded. Did you initialize Hybridly? Does `php artisan hybridly:config` return an error?");
     }
-    throw new Error("Either `initializeHybridly#resolve` or `initializeHybridly#pages` should be defined.");
+    return await resolveViewComponent(name, options);
   };
   if (options.progress !== false) {
     options.plugins = [
@@ -367,21 +366,13 @@ function prepare(options) {
     resolve
   };
 }
-async function resolvePageComponent(name, options) {
-  const components = options.components;
-  if (name.includes(":")) {
-    if (options.domains === false) {
-      showDomainsDisabledErrorModal(name);
-      console.warn(`${name} is a domain-based component, but domains are disabled.`);
-      return;
-    }
-    const [domain, page] = name.split(":");
-    name = `${options.domains}.${domain}.${options.pages}.${page}`;
-  }
-  const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path2) => path2.endsWith(`${name.replaceAll(".", "/")}.vue`));
-  if (!path) {
+async function resolveViewComponent(name, options) {
+  const components = options.imported;
+  const result = options.components.views.find((view) => name === view.identifier);
+  const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path2) => result ? path2.endsWith(result?.path) : false);
+  if (!result || !path) {
+    console.warn(`Page component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
     showPageComponentErrorModal(name);
-    console.warn(`Page component "${name}" could not be found. Available pages:`, Object.keys(components));
     return;
   }
   let component = typeof components[path] === "function" ? await components[path]() : components[path];
@@ -394,6 +385,7 @@ const RouterLink = defineComponent({
   setup(_, { slots, attrs }) {
     return (props) => {
       let data = props.data ?? {};
+      const preloads = props.preload ?? false;
       const url = makeUrl(props.href ?? "");
       const method = props.method?.toUpperCase() ?? "GET";
       const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
@@ -416,6 +408,24 @@ Please specify a more appropriate element using the "as" attribute. For example:
         ...attrs,
         ...as === "a" ? { href: url } : {},
         ...props.disabled ? { disabled: props.disabled } : {},
+        onMouseenter: () => {
+          if (!preloads) {
+            return;
+          }
+          if (props.external) {
+            return;
+          }
+          if (props.disabled) {
+            return;
+          }
+          if (method !== "GET") {
+            return;
+          }
+          router.preload(url, {
+            data,
+            ...props.options
+          });
+        },
         onClick: (event) => {
           if (props.external) {
             return;
@@ -472,6 +482,10 @@ Please specify a more appropriate element using the "as" attribute. For example:
       type: String,
       required: false,
       default: void 0
+    },
+    preload: {
+      type: Boolean,
+      default: false
     }
   }
 });
@@ -672,7 +686,7 @@ function useForm(options) {
     hasDirty,
     submitWithOptions: submit,
     submit: () => submit(),
-    hasErrors: computed(() => Object.values(errors.value).length > 0),
+    hasErrors: computed(() => Object.values(errors.value ?? {}).length > 0),
     initial,
     loaded,
     progress,
@@ -869,4 +883,4 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
   };
 }
 
-export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };
+export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRefinements };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -43,18 +43,17 @@
     "defu": "^6.1.2",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.11.1",
-    "@hybridly/config": "0.3.1",
-    "@hybridly/core": "0.3.1",
-    "@hybridly/progress-plugin": "0.3.1",
-    "@hybridly/utils": "0.3.1"
+    "qs": "^6.11.2",
+    "@hybridly/core": "0.4.1",
+    "@hybridly/progress-plugin": "0.4.1",
+    "@hybridly/utils": "0.4.1"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.194",
+    "@types/lodash": "^4.14.195",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/nprogress": "^0.2.0",
-    "vue": "^3.2.47"
+    "vue": "^3.3.4"
   },
   "scripts": {
     "build": "unbuild",