@hybridly/vue 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -280,14 +280,12 @@ 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) => {
@@ -346,21 +344,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.imported) {
+      throw new Error("No component loaded. Did you initialize Hybridly? Does `php artisan hybridly:config` return an error?");
     }
-    if (options.components) {
-      return await resolvePageComponent(name, options);
-    }
-    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 +372,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];
@@ -645,15 +634,15 @@ function useForm(options) {
     if (keys.length === 0) {
       return isDirty.value;
     }
-    return keys.some((key) => !isEqual__default(vue.toRaw(fields[key]), vue.toRaw(initial[key])));
+    return keys.some((key) => !isEqual__default(vue.toRaw(dotDiver.getByPath(fields, key)), vue.toRaw(dotDiver.getByPath(initial, key))));
   }
   function clearError(key) {
-    delete errors.value[key];
+    utils.unsetPropertyAtPath(errors.value, key);
   }
   function setErrors(incoming) {
     clearErrors();
-    Object.entries(incoming).forEach(([key, value]) => {
-      errors.value[key] = value;
+    Object.entries(incoming).forEach(([path, value]) => {
+      utils.setValueAtPath(errors.value, path, value);
     });
   }
   function abort() {
@@ -680,7 +669,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 +874,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,16 @@ 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: {
-        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 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: {
@@ -178,7 +140,7 @@ declare const RouterLink: vue.DefineComponent<{
     as: string | Record<string, any>;
     external: boolean;
     disabled: boolean;
-}>;
+}, {}>;
 
 /** Accesses all current properties. */
 declare function useProperties<T extends object, Global extends GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
@@ -218,7 +180,7 @@ interface RequestHooks {
     /**
      * Called when a request is successful but there were errors.
      */
-    error: (errors: Errors, context: InternalRouterContext) => MaybePromise<any>;
+    error: (errors: Errors$1, context: InternalRouterContext) => MaybePromise<any>;
     /**
      * Called when a request has been aborted.
      */
@@ -406,9 +368,7 @@ interface Progress {
     /** Computed percentage. */
     percentage: Readonly<number>;
 }
-interface Errors {
-    [key: string]: string;
-}
+type Errors$1 = any;
 
 interface Plugin extends Partial<Hooks> {
     /** Identifier of the plugin. */
@@ -475,8 +435,10 @@ interface Serializer {
 /** Accesses the hybridly context. */
 declare function useContext(): vue.ComputedRef<Readonly<InternalRouterContext> | undefined>;
 
-type Fields = Record<string, any>;
-interface FormOptions<T extends Fields> extends Omit<HybridRequestOptions$1, 'data' | 'url'> {
+type Errors<T extends SearchableObject> = {
+    [K in keyof T]?: T[K] extends Record<string, any> ? Errors<T[K]> : string;
+};
+interface FormOptions<T extends SearchableObject> extends Omit<HybridRequestOptions$1, 'data' | 'url'> {
     fields: T;
     url?: UrlResolvable$1 | (() => UrlResolvable$1);
     key?: string | false;
@@ -497,18 +459,18 @@ interface FormOptions<T extends Fields> extends Omit<HybridRequestOptions$1, 'da
     /**
      * Callback executed before the form submission for transforming the fields.
      */
-    transform?: (fields: T) => Fields;
+    transform?: (fields: T) => any;
 }
-declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
-    reset: (...keys: (keyof T)[]) => void;
-    clear: (...keys: (keyof T)[]) => void;
-    fields: vue.UnwrapRef<vue.UnwrapNestedRefs<T>>;
+declare function useForm<T extends SearchableObject, P extends Path<T> & string = Path<T> & string>(options: FormOptions<T>): {
+    reset: (...keys: P[]) => void;
+    clear: (...keys: P[]) => void;
+    fields: vue.UnwrapRef<T>;
     abort: () => void;
-    setErrors: (incoming: Record<string, string>) => void;
-    clearErrors: (...keys: (keyof T)[]) => void;
-    clearError: (key: keyof T) => void;
+    setErrors: (incoming: Errors<T>) => void;
+    clearErrors: (...keys: P[]) => void;
+    clearError: (key: P) => void;
     setInitial: (newInitial: Partial<T>) => void;
-    hasDirty: (...keys: (keyof T)[]) => boolean;
+    hasDirty: (...keys: P[]) => boolean;
     submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions$1, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
@@ -529,7 +491,7 @@ declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
         readonly percentage: number;
     } | undefined;
     isDirty: boolean;
-    errors: vue.UnwrapRef<DeepReadonly<[Record<keyof T, string>] extends [vue.Ref<any>] ? vue.Ref<any> & Record<keyof T, string> : vue.Ref<vue.UnwrapRef<Record<keyof T, string>>>>>;
+    errors: DeepReadonly<vue.UnwrapRef<Errors<T>>>;
     processing: boolean;
     successful: boolean;
     failed: boolean;
@@ -817,4 +779,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 } 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';
@@ -272,14 +272,12 @@ 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) => {
@@ -338,21 +336,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.imported) {
+      throw new Error("No component loaded. Did you initialize Hybridly? Does `php artisan hybridly:config` return an error?");
     }
-    if (options.components) {
-      return await resolvePageComponent(name, options);
-    }
-    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 +364,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];
@@ -637,15 +626,15 @@ function useForm(options) {
     if (keys.length === 0) {
       return isDirty.value;
     }
-    return keys.some((key) => !isEqual(toRaw(fields[key]), toRaw(initial[key])));
+    return keys.some((key) => !isEqual(toRaw(getByPath(fields, key)), toRaw(getByPath(initial, key))));
   }
   function clearError(key) {
-    delete errors.value[key];
+    unsetPropertyAtPath(errors.value, key);
   }
   function setErrors(incoming) {
     clearErrors();
-    Object.entries(incoming).forEach(([key, value]) => {
-      errors.value[key] = value;
+    Object.entries(incoming).forEach(([path, value]) => {
+      setValueAtPath(errors.value, path, value);
     });
   }
   function abort() {
@@ -672,7 +661,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 +858,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.0",
+  "version": "0.4.0",
   "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.0",
-    "@hybridly/core": "0.3.0",
-    "@hybridly/progress-plugin": "0.3.0",
-    "@hybridly/utils": "0.3.0"
+    "qs": "^6.11.2",
+    "@hybridly/core": "0.4.0",
+    "@hybridly/utils": "0.4.0",
+    "@hybridly/progress-plugin": "0.4.0"
   },
   "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",