@hybridly/core 0.0.1-alpha.13 → 0.0.1-alpha.15

package/dist/index.cjs

@@ -306,6 +306,139 @@ function createSerializer(options) {
   };
 }
 
+class Route {
+  constructor(name, absolute) {
+    this.name = name;
+    this.absolute = absolute;
+    this.definition = Route.getDefinition(name);
+  }
+  static getDefinition(name) {
+    const context = getInternalRouterContext();
+    if (!context.routing) {
+      throw new Error("Routing is not initialized. Make sure the Vite plugin is enabled and that `virtual:hybridly/router` is imported and that `php artisan route:list` returns no error.");
+    }
+    const route = context.routing?.routes?.[name];
+    if (!route) {
+      throw new Error(`Route ${name.toString()} does not exist.`);
+    }
+    return route;
+  }
+  get template() {
+    const context = getInternalRouterContext();
+    const origin = !this.absolute ? "" : this.definition.domain ? `${context.routing?.url.match(/^\w+:\/\//)?.[0]}${this.definition.domain}${context.routing?.port ? `:${context.routing?.port}` : ""}` : context.routing?.url;
+    return `${origin}/${this.definition.uri}`.replace(/\/+$/, "");
+  }
+  get parameterSegments() {
+    return this.template.match(/{[^}?]+\??}/g)?.map((segment) => ({
+      name: segment.replace(/{|\??}/g, ""),
+      required: !/\?}$/.test(segment)
+    })) ?? [];
+  }
+  matchesUrl(url) {
+    if (!this.definition.method.includes("GET")) {
+      return false;
+    }
+    const pattern = this.template.replace(/(\/?){([^}?]*)(\??)}/g, (_, slash, segment, optional) => {
+      const regex = `(?<${segment}>${this.definition.wheres?.[segment]?.replace(/(^\^)|(\$$)/g, "") || "[^/?]+"})`;
+      return optional ? `(${slash}${regex})?` : `${slash}${regex}`;
+    }).replace(/^\w+:\/\//, "");
+    const [location, query] = url.replace(/^\w+:\/\//, "").split("?");
+    const matches = new RegExp(`^${pattern}/?$`).exec(location);
+    return matches ? { params: matches.groups, query: qs.parse(query) } : false;
+  }
+  compile(params) {
+    const segments = this.parameterSegments;
+    if (!segments.length) {
+      return this.template;
+    }
+    return this.template.replace(/{([^}?]+)(\??)}/g, (_, segment, optional) => {
+      if (!optional && [null, void 0].includes(params?.[segment])) {
+        throw new Error(`Router error: [${segment}] parameter is required for route [${this.name}].`);
+      }
+      if (segments[segments.length - 1].name === segment && this.definition?.wheres?.[segment] === ".*") {
+        return encodeURIComponent(params[segment] ?? "").replace(/%2F/g, "/");
+      }
+      if (this.definition?.wheres?.[segment] && !new RegExp(`^${optional ? `(${this.definition?.wheres?.[segment]})?` : this.definition?.wheres?.[segment]}$`).test(params[segment] ?? "")) {
+        throw new Error(`Router error: [${segment}] parameter does not match required format [${this.definition?.wheres?.[segment]}] for route [${this.name}].`);
+      }
+      return encodeURIComponent(params[segment] ?? "");
+    }).replace(/\/+$/, "");
+  }
+}
+
+class Router extends String {
+  constructor(name, parameters, absolute = true) {
+    super();
+    const context = getInternalRouterContext();
+    this.route = new Route(name, absolute);
+    this.routing = context.routing;
+    this.setParameters(parameters);
+  }
+  toString() {
+    const unhandled = Object.keys(this.parameters).filter((key) => !this.route.parameterSegments.some(({ name }) => name === key)).filter((key) => key !== "_query").reduce((result, current) => ({ ...result, [current]: this.parameters[current] }), {});
+    return this.route.compile(this.parameters) + qs.stringify({ ...unhandled, ...this.parameters._query }, {
+      addQueryPrefix: true,
+      arrayFormat: "indices",
+      encodeValuesOnly: true,
+      skipNulls: true,
+      encoder: (value, encoder) => typeof value === "boolean" ? Number(value).toString() : encoder(value)
+    });
+  }
+  static has(name) {
+    try {
+      Route.getDefinition(name);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  setParameters(parameters) {
+    this.parameters = parameters ?? {};
+    this.parameters = ["string", "number"].includes(typeof this.parameters) ? [this.parameters] : this.parameters;
+    const segments = this.route.parameterSegments.filter(({ name }) => !this.routing.defaults[name]);
+    if (Array.isArray(this.parameters)) {
+      this.parameters = this.parameters.reduce((result, current, i) => segments[i] ? { ...result, [segments[i].name]: current } : typeof current === "object" ? { ...result, ...current } : { ...result, [current]: "" }, {});
+    } else if (segments.length === 1 && !this.parameters[segments[0].name] && (Reflect.has(this.parameters, Object.values(this.route.definition.bindings)[0]) || Reflect.has(this.parameters, "id"))) {
+      this.parameters = { [segments[0].name]: this.parameters };
+    }
+    this.parameters = {
+      ...this.getDefaults(),
+      ...this.substituteBindings()
+    };
+  }
+  getDefaults() {
+    return this.route.parameterSegments.filter(({ name }) => this.routing.defaults[name]).reduce((result, { name }) => ({ ...result, [name]: this.routing.defaults[name] }), {});
+  }
+  substituteBindings() {
+    return Object.entries(this.parameters).reduce((result, [key, value]) => {
+      if (!value || typeof value !== "object" || Array.isArray(value) || !this.route.parameterSegments.some(({ name }) => name === key)) {
+        return { ...result, [key]: value };
+      }
+      if (!Reflect.has(value, this.route.definition.bindings[key])) {
+        if (Reflect.has(value, "id")) {
+          this.route.definition.bindings[key] = "id";
+        } else {
+          throw new Error(`Router error: object passed as [${key}] parameter is missing route model binding key [${this.route.definition.bindings?.[key]}].`);
+        }
+      }
+      return { ...result, [key]: value[this.route.definition.bindings[key]] };
+    }, {});
+  }
+  valueOf() {
+    return this.toString();
+  }
+}
+
+function route(name, parameters, absolute) {
+  return new Router(name, parameters, absolute).toString();
+}
+function updateRoutingConfiguration(routing) {
+  if (!routing) {
+    return;
+  }
+  setContext({ routing });
+}
+
 const state = {
   initialized: false,
   context: {}
@@ -325,10 +458,14 @@ async function initializeContext(options) {
     ...options.payload,
     serializer: createSerializer(options),
     url: makeUrl(options.payload.url).toString(),
-    adapter: options.adapter,
+    adapter: {
+      ...options.adapter,
+      updateRoutingConfiguration
+    },
     scrollRegions: [],
     plugins: options.plugins ?? [],
     axios: options.axios ?? axios__default.create(),
+    routing: options.routing,
     hooks: {},
     state: {}
   };
@@ -409,6 +546,11 @@ const router = {
   delete: async (url, options = {}) => await performHybridNavigation({ preserveState: true, ...options, url, method: "DELETE" }),
   local: async (url, options) => await performLocalNavigation(url, options),
   external: (url, data = {}) => navigateToExternalUrl(url, data),
+  to: async (name, parameters, options) => {
+    const url = new Router(name, parameters).toString();
+    const method = Route.getDefinition(name).method.at(0);
+    return await performHybridNavigation({ url, ...options, method });
+  },
   history: {
     get: (key) => getKeyFromHistory(key),
     remember: (key, value) => remember(key, value)
@@ -423,6 +565,11 @@ async function performHybridNavigation(options) {
   const context = getRouterContext();
   utils.debug.router("Making a hybrid navigation:", { context, options, navigationId });
   try {
+    if (!options.method) {
+      utils.debug.router("Setting method to GET because none was provided.");
+      options.method = "GET";
+    }
+    options.method = options.method.toUpperCase();
     if ((utils.hasFiles(options.data) || options.useFormData) && !(options.data instanceof FormData)) {
       options.data = utils.objectToFormData(options.data);
       utils.debug.router("Converted data to FormData.", options.data);
@@ -432,10 +579,6 @@ async function performHybridNavigation(options) {
         options.method = "POST";
       }
     }
-    if (!options.method) {
-      utils.debug.router("Setting method to GET because none was provided.");
-      options.method = "GET";
-    }
     if (!(options.data instanceof FormData) && options.method === "GET" && Object.keys(options.data ?? {}).length) {
       utils.debug.router("Transforming data to query parameters.", options.data);
       options.url = makeUrl(options.url ?? context.url, {
@@ -551,12 +694,10 @@ async function performHybridNavigation(options) {
     await utils.match(error.constructor.name, {
       NavigationCancelledError: async () => {
         utils.debug.router('The request was cancelled through the "before" hook.', error);
-        console.warn(error);
         await runHooks("abort", options.hooks, context);
       },
       AbortError: async () => {
         utils.debug.router("The request was cancelled.", error);
-        console.warn(error);
         await runHooks("abort", options.hooks, context);
       },
       NotAHybridResponseError: async () => {
@@ -683,5 +824,6 @@ exports.definePlugin = definePlugin;
 exports.getRouterContext = getRouterContext;
 exports.makeUrl = makeUrl;
 exports.registerHook = registerHook;
+exports.route = route;
 exports.router = router;
 exports.sameUrls = sameUrls;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { RequestData } from '@hybridly/utils';
-import { AxiosResponse, Axios, AxiosProgressEvent } from 'axios';
+import { AxiosResponse, AxiosProgressEvent, Axios } from 'axios';
 
 type MaybePromise<T> = T | Promise<T>;
 
@@ -72,72 +72,6 @@ interface Plugin extends Partial<Hooks> {
 }
 declare function definePlugin(plugin: Plugin): Plugin;
 
-/** Options for creating a router context. */
-interface RouterContextOptions {
-    /** The initial payload served by the browser. */
-    payload: HybridPayload;
-    /** Adapter-specific functions. */
-    adapter: Adapter;
-    /** History state serializer. */
-    serializer?: Serializer;
-    /** List of plugins. */
-    plugins?: Plugin[];
-    /** The Axios instance. */
-    axios?: Axios;
-}
-/** Router context. */
-interface InternalRouterContext {
-    /** The current, normalized URL. */
-    url: string;
-    /** The current view. */
-    view: View;
-    /** The current, optional dialog. */
-    dialog?: View;
-    /** The current local asset version. */
-    version: string;
-    /** The current adapter's functions. */
-    adapter: Adapter;
-    /** Scroll positions of the current page's DOM elements. */
-    scrollRegions: ScrollRegion[];
-    /** Arbitrary state. */
-    state: Record<string, any>;
-    /** Currently pending navigation. */
-    pendingNavigation?: PendingNavigation;
-    /** History state serializer. */
-    serializer: Serializer;
-    /** List of plugins. */
-    plugins: Plugin[];
-    /** Global hooks. */
-    hooks: Partial<Record<keyof Hooks, Array<Function>>>;
-    /** The Axios instance. */
-    axios: Axios;
-}
-/** Router context. */
-type RouterContext = Readonly<InternalRouterContext>;
-/** Adapter-specific functions. */
-interface Adapter {
-    /** Resolves a component from the given name. */
-    resolveComponent: ResolveComponent;
-    /** Swaps to the given view. */
-    swapView: SwapView;
-    /** Swaps to the given dialog. */
-    swapDialog: SwapDialog;
-    /** Called when the context is updated. */
-    update?: (context: InternalRouterContext) => void;
-}
-interface ScrollRegion {
-    top: number;
-    left: number;
-}
-/** Provides methods to serialize the state into the history state. */
-interface Serializer {
-    serialize: <T>(view: T) => any;
-    unserialize: <T>(state: any) => T;
-}
-
-/** Gets the current context. */
-declare function getRouterContext(): RouterContext;
-
 type UrlResolvable = string | URL | Location;
 type UrlTransformable = Partial<Omit<URL, 'searchParams' | 'toJSON' | 'toString'>> & {
     query?: any;
@@ -207,7 +141,7 @@ interface HybridRequestOptions extends Omit<NavigationOptions, 'payload'> {
     /** The URL to navigation. */
     url?: UrlResolvable;
     /** HTTP verb to use for the request. */
-    method?: Method;
+    method?: Method | Lowercase<Method>;
     /** Body of the request. */
     data?: RequestData;
     /** Which properties to update for this navigation. Other properties will be ignored. */
@@ -248,6 +182,8 @@ interface Router {
     navigate: (options: HybridRequestOptions) => Promise<NavigationResponse>;
     /** Reloads the current page. */
     reload: (options?: HybridRequestOptions) => Promise<NavigationResponse>;
+    /** Makes a request to given named route. The HTTP verb is determined automatically but can be overriden. */
+    to: <T extends RouteName>(name: T, parameters?: RouteParameters<T>, options?: Omit<HybridRequestOptions, 'url'>) => Promise<NavigationResponse>;
     /** Makes a GET request to the given URL. */
     get: (url: UrlResolvable, options?: Omit<HybridRequestOptions, 'method' | 'url'>) => Promise<NavigationResponse>;
     /** Makes a POST request to the given URL. */
@@ -324,6 +260,97 @@ interface Errors {
     [key: string]: string;
 }
 
+interface RoutingConfiguration {
+    url: string;
+    port?: number;
+    defaults: Record<string, any>;
+    routes: Record<string, RouteDefinition>;
+}
+interface RouteDefinition {
+    uri: string;
+    method: Method[];
+    bindings: Record<string, string>;
+    domain?: string;
+    wheres?: Record<string, string>;
+}
+interface GlobalRouteCollection extends RoutingConfiguration {
+}
+type RouteName = keyof GlobalRouteCollection['routes'];
+type RouteParameters<T extends RouteName> = Record<keyof GlobalRouteCollection['routes'][T]['bindings'], any> & Record<string, any>;
+
+/** Options for creating a router context. */
+interface RouterContextOptions {
+    /** The initial payload served by the browser. */
+    payload: HybridPayload;
+    /** Adapter-specific functions. */
+    adapter: Adapter;
+    /** History state serializer. */
+    serializer?: Serializer;
+    /** List of plugins. */
+    plugins?: Plugin[];
+    /** The Axios instance. */
+    axios?: Axios;
+    /** Initial routing configuration. */
+    routing?: RoutingConfiguration;
+}
+/** Router context. */
+interface InternalRouterContext {
+    /** The current, normalized URL. */
+    url: string;
+    /** The current view. */
+    view: View;
+    /** The current, optional dialog. */
+    dialog?: View;
+    /** The current local asset version. */
+    version: string;
+    /** The current adapter's functions. */
+    adapter: ResolvedAdapter;
+    /** Scroll positions of the current page's DOM elements. */
+    scrollRegions: ScrollRegion[];
+    /** Arbitrary state. */
+    state: Record<string, any>;
+    /** Currently pending navigation. */
+    pendingNavigation?: PendingNavigation;
+    /** History state serializer. */
+    serializer: Serializer;
+    /** List of plugins. */
+    plugins: Plugin[];
+    /** Global hooks. */
+    hooks: Partial<Record<keyof Hooks, Array<Function>>>;
+    /** The Axios instance. */
+    axios: Axios;
+    /** Routing configuration. */
+    routing?: RoutingConfiguration;
+}
+/** Router context. */
+type RouterContext = Readonly<InternalRouterContext>;
+/** Adapter-specific functions. */
+interface Adapter {
+    /** Resolves a component from the given name. */
+    resolveComponent: ResolveComponent;
+    /** Swaps to the given view. */
+    swapView: SwapView;
+    /** Swaps to the given dialog. */
+    swapDialog: SwapDialog;
+    /** Called when the context is updated. */
+    update?: (context: InternalRouterContext) => void;
+}
+interface ResolvedAdapter extends Adapter {
+    updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;
+}
+interface ScrollRegion {
+    top: number;
+    left: number;
+}
+/** Provides methods to serialize the state into the history state. */
+interface Serializer {
+    serialize: <T>(view: T) => any;
+    unserialize: <T>(state: any) => T;
+}
+
+/** Gets the current context. */
+declare function getRouterContext(): RouterContext;
+
 /**
  * The hybridly router.
  * This is the core function that you can use to navigate in
@@ -346,6 +373,11 @@ interface Authorizable<Authorizations extends Record<string, boolean>> {
  */
 declare function can<Authorizations extends Record<string, boolean>, Data extends Authorizable<Authorizations>, Action extends keyof Data['authorization']>(resource: Data, action: Action): Authorizations[Action];
 
+/**
+ * Generates a route from the given route name.
+ */
+declare function route<T extends RouteName>(name: T, parameters?: RouteParameters<T>, absolute?: boolean): string;
+
 declare const STORAGE_EXTERNAL_KEY = "hybridly:external";
 declare const HYBRIDLY_HEADER = "x-hybrid";
 declare const EXTERNAL_NAVIGATION_HEADER: string;
@@ -382,4 +414,4 @@ declare namespace constants {
   };
 }
 
-export { Authorizable, HybridPayload, HybridRequestOptions, MaybePromise, Method, NavigationResponse, Plugin, Progress, ResolveComponent, Router, RouterContext, RouterContextOptions, UrlResolvable, can, constants, createRouter, definePlugin, getRouterContext, makeUrl, registerHook, router, sameUrls };
+export { Authorizable, GlobalRouteCollection, HybridPayload, HybridRequestOptions, MaybePromise, Method, NavigationResponse, Plugin, Progress, ResolveComponent, RouteDefinition, RouteName, RouteParameters, Router, RouterContext, RouterContextOptions, RoutingConfiguration, UrlResolvable, can, constants, createRouter, definePlugin, getRouterContext, makeUrl, registerHook, route, router, sameUrls };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import qs from 'qs';
+import qs, { parse, stringify } from 'qs';
 import { debug, merge, debounce, random, hasFiles, objectToFormData, when, match, showResponseErrorModal } from '@hybridly/utils';
 import axios from 'axios';
 
@@ -297,6 +297,139 @@ function createSerializer(options) {
   };
 }
 
+class Route {
+  constructor(name, absolute) {
+    this.name = name;
+    this.absolute = absolute;
+    this.definition = Route.getDefinition(name);
+  }
+  static getDefinition(name) {
+    const context = getInternalRouterContext();
+    if (!context.routing) {
+      throw new Error("Routing is not initialized. Make sure the Vite plugin is enabled and that `virtual:hybridly/router` is imported and that `php artisan route:list` returns no error.");
+    }
+    const route = context.routing?.routes?.[name];
+    if (!route) {
+      throw new Error(`Route ${name.toString()} does not exist.`);
+    }
+    return route;
+  }
+  get template() {
+    const context = getInternalRouterContext();
+    const origin = !this.absolute ? "" : this.definition.domain ? `${context.routing?.url.match(/^\w+:\/\//)?.[0]}${this.definition.domain}${context.routing?.port ? `:${context.routing?.port}` : ""}` : context.routing?.url;
+    return `${origin}/${this.definition.uri}`.replace(/\/+$/, "");
+  }
+  get parameterSegments() {
+    return this.template.match(/{[^}?]+\??}/g)?.map((segment) => ({
+      name: segment.replace(/{|\??}/g, ""),
+      required: !/\?}$/.test(segment)
+    })) ?? [];
+  }
+  matchesUrl(url) {
+    if (!this.definition.method.includes("GET")) {
+      return false;
+    }
+    const pattern = this.template.replace(/(\/?){([^}?]*)(\??)}/g, (_, slash, segment, optional) => {
+      const regex = `(?<${segment}>${this.definition.wheres?.[segment]?.replace(/(^\^)|(\$$)/g, "") || "[^/?]+"})`;
+      return optional ? `(${slash}${regex})?` : `${slash}${regex}`;
+    }).replace(/^\w+:\/\//, "");
+    const [location, query] = url.replace(/^\w+:\/\//, "").split("?");
+    const matches = new RegExp(`^${pattern}/?$`).exec(location);
+    return matches ? { params: matches.groups, query: parse(query) } : false;
+  }
+  compile(params) {
+    const segments = this.parameterSegments;
+    if (!segments.length) {
+      return this.template;
+    }
+    return this.template.replace(/{([^}?]+)(\??)}/g, (_, segment, optional) => {
+      if (!optional && [null, void 0].includes(params?.[segment])) {
+        throw new Error(`Router error: [${segment}] parameter is required for route [${this.name}].`);
+      }
+      if (segments[segments.length - 1].name === segment && this.definition?.wheres?.[segment] === ".*") {
+        return encodeURIComponent(params[segment] ?? "").replace(/%2F/g, "/");
+      }
+      if (this.definition?.wheres?.[segment] && !new RegExp(`^${optional ? `(${this.definition?.wheres?.[segment]})?` : this.definition?.wheres?.[segment]}$`).test(params[segment] ?? "")) {
+        throw new Error(`Router error: [${segment}] parameter does not match required format [${this.definition?.wheres?.[segment]}] for route [${this.name}].`);
+      }
+      return encodeURIComponent(params[segment] ?? "");
+    }).replace(/\/+$/, "");
+  }
+}
+
+class Router extends String {
+  constructor(name, parameters, absolute = true) {
+    super();
+    const context = getInternalRouterContext();
+    this.route = new Route(name, absolute);
+    this.routing = context.routing;
+    this.setParameters(parameters);
+  }
+  toString() {
+    const unhandled = Object.keys(this.parameters).filter((key) => !this.route.parameterSegments.some(({ name }) => name === key)).filter((key) => key !== "_query").reduce((result, current) => ({ ...result, [current]: this.parameters[current] }), {});
+    return this.route.compile(this.parameters) + stringify({ ...unhandled, ...this.parameters._query }, {
+      addQueryPrefix: true,
+      arrayFormat: "indices",
+      encodeValuesOnly: true,
+      skipNulls: true,
+      encoder: (value, encoder) => typeof value === "boolean" ? Number(value).toString() : encoder(value)
+    });
+  }
+  static has(name) {
+    try {
+      Route.getDefinition(name);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  setParameters(parameters) {
+    this.parameters = parameters ?? {};
+    this.parameters = ["string", "number"].includes(typeof this.parameters) ? [this.parameters] : this.parameters;
+    const segments = this.route.parameterSegments.filter(({ name }) => !this.routing.defaults[name]);
+    if (Array.isArray(this.parameters)) {
+      this.parameters = this.parameters.reduce((result, current, i) => segments[i] ? { ...result, [segments[i].name]: current } : typeof current === "object" ? { ...result, ...current } : { ...result, [current]: "" }, {});
+    } else if (segments.length === 1 && !this.parameters[segments[0].name] && (Reflect.has(this.parameters, Object.values(this.route.definition.bindings)[0]) || Reflect.has(this.parameters, "id"))) {
+      this.parameters = { [segments[0].name]: this.parameters };
+    }
+    this.parameters = {
+      ...this.getDefaults(),
+      ...this.substituteBindings()
+    };
+  }
+  getDefaults() {
+    return this.route.parameterSegments.filter(({ name }) => this.routing.defaults[name]).reduce((result, { name }) => ({ ...result, [name]: this.routing.defaults[name] }), {});
+  }
+  substituteBindings() {
+    return Object.entries(this.parameters).reduce((result, [key, value]) => {
+      if (!value || typeof value !== "object" || Array.isArray(value) || !this.route.parameterSegments.some(({ name }) => name === key)) {
+        return { ...result, [key]: value };
+      }
+      if (!Reflect.has(value, this.route.definition.bindings[key])) {
+        if (Reflect.has(value, "id")) {
+          this.route.definition.bindings[key] = "id";
+        } else {
+          throw new Error(`Router error: object passed as [${key}] parameter is missing route model binding key [${this.route.definition.bindings?.[key]}].`);
+        }
+      }
+      return { ...result, [key]: value[this.route.definition.bindings[key]] };
+    }, {});
+  }
+  valueOf() {
+    return this.toString();
+  }
+}
+
+function route(name, parameters, absolute) {
+  return new Router(name, parameters, absolute).toString();
+}
+function updateRoutingConfiguration(routing) {
+  if (!routing) {
+    return;
+  }
+  setContext({ routing });
+}
+
 const state = {
   initialized: false,
   context: {}
@@ -316,10 +449,14 @@ async function initializeContext(options) {
     ...options.payload,
     serializer: createSerializer(options),
     url: makeUrl(options.payload.url).toString(),
-    adapter: options.adapter,
+    adapter: {
+      ...options.adapter,
+      updateRoutingConfiguration
+    },
     scrollRegions: [],
     plugins: options.plugins ?? [],
     axios: options.axios ?? axios.create(),
+    routing: options.routing,
     hooks: {},
     state: {}
   };
@@ -400,6 +537,11 @@ const router = {
   delete: async (url, options = {}) => await performHybridNavigation({ preserveState: true, ...options, url, method: "DELETE" }),
   local: async (url, options) => await performLocalNavigation(url, options),
   external: (url, data = {}) => navigateToExternalUrl(url, data),
+  to: async (name, parameters, options) => {
+    const url = new Router(name, parameters).toString();
+    const method = Route.getDefinition(name).method.at(0);
+    return await performHybridNavigation({ url, ...options, method });
+  },
   history: {
     get: (key) => getKeyFromHistory(key),
     remember: (key, value) => remember(key, value)
@@ -414,6 +556,11 @@ async function performHybridNavigation(options) {
   const context = getRouterContext();
   debug.router("Making a hybrid navigation:", { context, options, navigationId });
   try {
+    if (!options.method) {
+      debug.router("Setting method to GET because none was provided.");
+      options.method = "GET";
+    }
+    options.method = options.method.toUpperCase();
     if ((hasFiles(options.data) || options.useFormData) && !(options.data instanceof FormData)) {
       options.data = objectToFormData(options.data);
       debug.router("Converted data to FormData.", options.data);
@@ -423,10 +570,6 @@ async function performHybridNavigation(options) {
         options.method = "POST";
       }
     }
-    if (!options.method) {
-      debug.router("Setting method to GET because none was provided.");
-      options.method = "GET";
-    }
     if (!(options.data instanceof FormData) && options.method === "GET" && Object.keys(options.data ?? {}).length) {
       debug.router("Transforming data to query parameters.", options.data);
       options.url = makeUrl(options.url ?? context.url, {
@@ -542,12 +685,10 @@ async function performHybridNavigation(options) {
     await match(error.constructor.name, {
       NavigationCancelledError: async () => {
         debug.router('The request was cancelled through the "before" hook.', error);
-        console.warn(error);
         await runHooks("abort", options.hooks, context);
       },
       AbortError: async () => {
         debug.router("The request was cancelled.", error);
-        console.warn(error);
         await runHooks("abort", options.hooks, context);
       },
       NotAHybridResponseError: async () => {
@@ -667,4 +808,4 @@ function can(resource, action) {
   return resource.authorization?.[action] ?? false;
 }
 
-export { can, constants, createRouter, definePlugin, getRouterContext, makeUrl, registerHook, router, sameUrls };
+export { can, constants, createRouter, definePlugin, getRouterContext, makeUrl, registerHook, route, router, sameUrls };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/core",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.15",
   "description": "A solution to develop server-driven, client-rendered applications",
   "keywords": [
     "hybridly",
@@ -36,8 +36,8 @@
     "axios": "^1"
   },
   "dependencies": {
-    "@hybridly/utils": "0.0.1-alpha.13",
-    "qs": "^6.11.0"
+    "qs": "^6.11.0",
+    "@hybridly/utils": "0.0.1-alpha.15"
   },
   "devDependencies": {
     "defu": "^6.1.1"