@hybridly/core 0.0.1-dev.3 → 0.1.0-alpha.0

package/dist/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const utils = require('@hybridly/utils');
 const axios = require('axios');
 const qs = require('qs');
-const utils = require('@hybridly/utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -12,10 +12,12 @@ const axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 const qs__default = /*#__PURE__*/_interopDefaultLegacy(qs);
 
 const STORAGE_EXTERNAL_KEY = "hybridly:external";
-const HYBRIDLY_HEADER = "x-hybridly";
-const EXTERNAL_VISIT_HEADER = `${HYBRIDLY_HEADER}-external`;
+const HYBRIDLY_HEADER = "x-hybrid";
+const EXTERNAL_NAVIGATION_HEADER = `${HYBRIDLY_HEADER}-external`;
 const PARTIAL_COMPONENT_HEADER = `${HYBRIDLY_HEADER}-partial-component`;
 const ONLY_DATA_HEADER = `${HYBRIDLY_HEADER}-only-data`;
+const DIALOG_KEY_HEADER = `${HYBRIDLY_HEADER}-dialog-key`;
+const DIALOG_REDIRECT_HEADER = `${HYBRIDLY_HEADER}-dialog-redirect`;
 const EXCEPT_DATA_HEADER = `${HYBRIDLY_HEADER}-except-data`;
 const CONTEXT_HEADER = `${HYBRIDLY_HEADER}-context`;
 const VERSION_HEADER = `${HYBRIDLY_HEADER}-version`;
@@ -26,9 +28,11 @@ const constants = {
 	__proto__: null,
 	STORAGE_EXTERNAL_KEY: STORAGE_EXTERNAL_KEY,
 	HYBRIDLY_HEADER: HYBRIDLY_HEADER,
-	EXTERNAL_VISIT_HEADER: EXTERNAL_VISIT_HEADER,
+	EXTERNAL_NAVIGATION_HEADER: EXTERNAL_NAVIGATION_HEADER,
 	PARTIAL_COMPONENT_HEADER: PARTIAL_COMPONENT_HEADER,
 	ONLY_DATA_HEADER: ONLY_DATA_HEADER,
+	DIALOG_KEY_HEADER: DIALOG_KEY_HEADER,
+	DIALOG_REDIRECT_HEADER: DIALOG_REDIRECT_HEADER,
 	EXCEPT_DATA_HEADER: EXCEPT_DATA_HEADER,
 	CONTEXT_HEADER: CONTEXT_HEADER,
 	VERSION_HEADER: VERSION_HEADER,
@@ -36,13 +40,90 @@ const constants = {
 	SCROLL_REGION_ATTRIBUTE: SCROLL_REGION_ATTRIBUTE
 };
 
-class NotAHybridlyResponseError extends Error {
+class NotAHybridResponseError extends Error {
   constructor(response) {
     super();
     this.response = response;
   }
 }
-class VisitCancelledError extends Error {
+class NavigationCancelledError extends Error {
+}
+class RoutingNotInitialized extends Error {
+  constructor() {
+    super("Routing is not initialized. Make sure the Vite plugin is enabled and that `php artisan route:list` returns no error.");
+  }
+}
+class RouteNotFound extends Error {
+  constructor(name) {
+    super(`Route [${name}] does not exist.`);
+  }
+}
+class MissingRouteParameter extends Error {
+  constructor(parameter, routeName) {
+    super(`Parameter [${parameter}] is required for route [${routeName}].`);
+  }
+}
+
+function definePlugin(plugin) {
+  return plugin;
+}
+async function forEachPlugin(cb) {
+  const { plugins } = getRouterContext();
+  for (const plugin of plugins) {
+    await cb(plugin);
+  }
+}
+async function runPluginHooks(hook, ...args) {
+  let result = true;
+  await forEachPlugin(async (plugin) => {
+    if (plugin[hook]) {
+      utils.debug.plugin(plugin.name, `Calling "${hook}" hook.`);
+      result && (result = await plugin[hook]?.(...args) !== false);
+    }
+  });
+  return result;
+}
+async function runGlobalHooks(hook, ...args) {
+  const { hooks } = getRouterContext();
+  if (!hooks[hook]) {
+    return true;
+  }
+  let result = true;
+  for (const fn of hooks[hook]) {
+    utils.debug.hook(`Calling global "${hook}" hooks.`);
+    result = await fn(...args) ?? result;
+  }
+  return result;
+}
+async function runHooks(hook, requestHooks, ...args) {
+  const result = await Promise.all([
+    requestHooks?.[hook]?.(...args),
+    runGlobalHooks(hook, ...args),
+    runPluginHooks(hook, ...args)
+  ]);
+  utils.debug.hook(`Called all hooks for [${hook}],`, result);
+  return !result.includes(false);
+}
+
+function appendCallbackToHooks(hook, fn) {
+  const hooks = getRouterContext().hooks;
+  hooks[hook] = [...hooks[hook] ?? [], fn];
+  return () => {
+    const index = hooks[hook].indexOf(fn);
+    if (index !== -1) {
+      hooks[hook]?.splice(index, 1);
+    }
+  };
+}
+function registerHook(hook, fn, options) {
+  if (options?.once) {
+    const unregister = appendCallbackToHooks(hook, async (...args) => {
+      await fn(...args);
+      unregister();
+    });
+    return unregister;
+  }
+  return appendCallbackToHooks(hook, fn);
 }
 
 function saveScrollPositions() {
@@ -61,10 +142,10 @@ function getScrollRegions() {
 }
 function resetScrollPositions() {
   utils.debug.scroll("Resetting scroll positions.");
-  getScrollRegions().concat(document.documentElement, document.body).forEach((element) => {
-    element.scrollTop = 0;
-    element.scrollLeft = 0;
-  });
+  getScrollRegions().concat(document.documentElement, document.body).forEach((element) => element.scrollTo({
+    top: 0,
+    left: 0
+  }));
   saveScrollPositions();
   if (window.location.hash) {
     utils.debug.scroll(`Hash is present, scrolling to the element of ID ${window.location.hash}.`);
@@ -76,10 +157,14 @@ async function restoreScrollPositions() {
   const context = getRouterContext();
   const regions = getScrollRegions();
   if (!context.scrollRegions) {
+    utils.debug.scroll("No region found to restore.");
     return;
   }
   let tries = 0;
-  const timer = setInterval(() => {
+  const timer = setInterval(restore, 50);
+  restore();
+  function restore() {
+    utils.debug.scroll(`Restoring ${regions.length}/${context.scrollRegions.length} region(s).`);
     if (context.scrollRegions.length !== regions.length) {
       if (++tries > 20) {
         utils.debug.scroll("The limit of tries has been reached. Cancelling scroll restoration.");
@@ -94,17 +179,31 @@ async function restoreScrollPositions() {
       top: context.scrollRegions.at(i)?.top ?? el.scrollTop,
       left: context.scrollRegions.at(i)?.top ?? el.scrollLeft
     }));
-  }, 50);
+  }
 }
 
-function normalizeUrl(href) {
-  return makeUrl(href).toString();
+function normalizeUrl(href, trailingSlash) {
+  return makeUrl(href, { trailingSlash }).toString();
 }
 function makeUrl(href, transformations = {}) {
   try {
     const base = document?.location?.href === "//" ? void 0 : document.location.href;
     const url = new URL(String(href), base);
-    Object.entries(transformations ?? {}).forEach(([key, value]) => Reflect.set(url, key, value));
+    transformations = typeof transformations === "function" ? transformations(url) ?? {} : transformations ?? {};
+    Object.entries(transformations).forEach(([key, value]) => {
+      if (key === "query") {
+        key = "search";
+        value = qs__default.stringify(utils.merge(qs__default.parse(url.search, { ignoreQueryPrefix: true }), value), {
+          encodeValuesOnly: true,
+          arrayFormat: "brackets"
+        });
+      }
+      Reflect.set(url, key, value);
+    });
+    if (transformations.trailingSlash === false) {
+      const _url = utils.removeTrailingSlash(url.toString().replace(/\/\?/, "?"));
+      url.toString = () => _url;
+    }
     return url;
   } catch (error) {
     throw new TypeError(`${href} is not resolvable to a valid URL.`);
@@ -159,6 +258,11 @@ async function registerEventListeners() {
   utils.debug.history("Registering [popstate] and [scroll] event listeners.");
   window?.addEventListener("popstate", async (event) => {
     utils.debug.history("Navigation detected (popstate event). State:", { state: event.state });
+    if (context.pendingNavigation) {
+      utils.debug.router("Aborting current navigation.", context.pendingNavigation);
+      context.pendingNavigation?.controller?.abort();
+    }
+    await runHooks("backForward", {}, event.state, context);
     if (!event.state) {
       utils.debug.history("There is no state. Adding hash if any and restoring scroll positions.");
       return await navigate({
@@ -174,7 +278,7 @@ async function registerEventListeners() {
     await navigate({
       payload: event.state,
       preserveScroll: true,
-      preserveState: false,
+      preserveState: !!getInternalRouterContext().dialog || !!event.state.dialog,
       updateHistoryState: false,
       isBackForward: true
     });
@@ -185,18 +289,21 @@ async function registerEventListeners() {
     }
   }, 100), true);
 }
-function isBackForwardVisit() {
+function isBackForwardNavigation() {
   if (!window.history.state) {
     return false;
   }
   return window.performance?.getEntriesByType("navigation").at(0)?.type === "back_forward";
 }
-async function handleBackForwardVisit() {
-  utils.debug.router("Handling a back/forward visit.");
+async function handleBackForwardNavigation() {
+  utils.debug.router("Handling a back/forward navigation.");
   window.history.state.version = getRouterContext().version;
   await navigate({
+    payload: window.history.state,
     preserveScroll: true,
-    preserveState: true
+    preserveState: false,
+    updateHistoryState: false,
+    isBackForward: true
   });
 }
 function remember(key, value) {
@@ -232,6 +339,118 @@ function createSerializer(options) {
   };
 }
 
+function generateRouteFromName(name, parameters, absolute, shouldThrow) {
+  const url = getUrlFromName(name, parameters, shouldThrow);
+  return absolute === false ? url.toString().replace(url.origin, "") : url.toString();
+}
+function getUrlFromName(name, parameters, shouldThrow) {
+  const routing = getRouting();
+  const definition = getRouteDefinition(name);
+  const transforms = getRouteTransformable(name, parameters, shouldThrow);
+  const url = makeUrl(routing.url, (url2) => ({
+    hostname: definition.domain || url2.hostname,
+    port: routing.port?.toString() || url2.port,
+    trailingSlash: false,
+    ...transforms
+  }));
+  return url;
+}
+function getRouteTransformable(routeName, routeParameters, shouldThrow) {
+  const routing = getRouting();
+  const definition = getRouteDefinition(routeName);
+  const parameters = routeParameters || {};
+  const missing = Object.keys(parameters);
+  const replaceParameter = (match, parameterName) => {
+    const optional = /\?}$/.test(match);
+    const value = (() => {
+      const value2 = parameters[parameterName];
+      const bindingProperty = definition.bindings?.[parameterName];
+      if (bindingProperty && typeof value2 === "object") {
+        return value2[bindingProperty];
+      }
+      return value2;
+    })();
+    missing.splice(missing.indexOf(parameterName), 1);
+    if (value) {
+      const where = definition.wheres?.[parameterName];
+      if (where && !new RegExp(where).test(value)) {
+        console.warn(`[hybridly:routing] Parameter [${parameterName}] does not match the required format [${where}] for route [${routeName}].`);
+      }
+      return value;
+    }
+    if (routing.defaults?.[parameterName]) {
+      return routing.defaults?.[parameterName];
+    }
+    if (optional) {
+      return "";
+    }
+    if (shouldThrow === false) {
+      return "";
+    }
+    throw new MissingRouteParameter(parameterName, routeName);
+  };
+  const path = definition.uri.replace(/{([^}?]+)\??}/g, replaceParameter);
+  const domain = definition.domain?.replace(/{([^}?]+)\??}/g, replaceParameter);
+  const remaining = Object.keys(parameters).filter((key) => missing.includes(key)).reduce((obj, key) => ({
+    ...obj,
+    [key]: parameters[key]
+  }), {});
+  return {
+    ...domain && { hostname: domain },
+    pathname: path,
+    search: qs__default.stringify(remaining, {
+      encodeValuesOnly: true,
+      arrayFormat: "indices",
+      addQueryPrefix: true
+    })
+  };
+}
+function getRouteDefinition(name) {
+  const routing = getRouting();
+  const definition = routing.routes[name];
+  if (!definition) {
+    throw new RouteNotFound(name);
+  }
+  return definition;
+}
+function getRouting() {
+  const { routing } = getInternalRouterContext();
+  if (!routing) {
+    throw new RoutingNotInitialized();
+  }
+  return routing;
+}
+
+function isCurrentFromName(name, parameters, mode = "loose") {
+  const location = window.location;
+  const matchee = (() => {
+    try {
+      return makeUrl(generateRouteFromName(name, parameters, true, false));
+    } catch (error) {
+    }
+  })();
+  if (!matchee) {
+    return false;
+  }
+  if (mode === "strict") {
+    return location.href === matchee.href;
+  }
+  return location.href.startsWith(matchee.href);
+}
+
+function route(name, parameters, absolute) {
+  return generateRouteFromName(name, parameters, absolute);
+}
+function current(name, parameters, mode = "loose") {
+  return isCurrentFromName(name, parameters, mode);
+}
+function updateRoutingConfiguration(routing) {
+  if (!routing) {
+    return;
+  }
+  setContext({ routing });
+}
+
 const state = {
   initialized: false,
   context: {}
@@ -249,18 +468,21 @@ async function initializeContext(options) {
   state.initialized = true;
   state.context = {
     ...options.payload,
+    responseErrorModals: options.responseErrorModals,
     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: {}
   };
-  for (const plugin of state.context.plugins) {
-    utils.debug.plugin(plugin.name, 'Calling "initialized" hook.');
-    await plugin.initialized?.(state.context);
-  }
+  await runHooks("initialized", {}, state.context);
   return getInternalRouterContext();
 }
 function setContext(merge = {}, options = {}) {
@@ -268,7 +490,7 @@ function setContext(merge = {}, options = {}) {
     Reflect.set(state.context, key, merge[key]);
   });
   if (options.propagate !== false) {
-    state.context.adapter.update?.(state.context);
+    state.context.adapter.onContextUpdate?.(state.context);
   }
   utils.debug.context("Updated context:", { context: state.context, added: merge });
 }
@@ -281,8 +503,8 @@ function payloadFromContext() {
   };
 }
 
-async function performExternalVisit(options) {
-  utils.debug.external("Making a hard navigation for an external visit:", options);
+async function performExternalNavigation(options) {
+  utils.debug.external("Navigating to an external URL:", options);
   window.sessionStorage.setItem(STORAGE_EXTERNAL_KEY, JSON.stringify(options));
   window.location.href = options.url;
   if (sameUrls(window.location, options.url)) {
@@ -290,11 +512,19 @@ async function performExternalVisit(options) {
     window.location.reload();
   }
 }
+function navigateToExternalUrl(url, data) {
+  document.location.href = makeUrl(url, {
+    search: qs__default.stringify(data, {
+      encodeValuesOnly: true,
+      arrayFormat: "brackets"
+    })
+  }).toString();
+}
 function isExternalResponse(response) {
-  return response?.status === 409 && !!response?.headers?.[EXTERNAL_VISIT_HEADER];
+  return response?.status === 409 && !!response?.headers?.[EXTERNAL_NAVIGATION_HEADER];
 }
-async function handleExternalVisit() {
-  utils.debug.external("Handling an external visit.");
+async function handleExternalNavigation() {
+  utils.debug.external("Handling an external navigation.");
   const options = JSON.parse(window.sessionStorage.getItem(STORAGE_EXTERNAL_KEY) || "{}");
   window.sessionStorage.removeItem(STORAGE_EXTERNAL_KEY);
   utils.debug.external("Options from the session storage:", options);
@@ -306,7 +536,7 @@ async function handleExternalVisit() {
     preserveState: true
   });
 }
-function isExternalVisit() {
+function isExternalNavigation() {
   try {
     return window.sessionStorage.getItem(STORAGE_EXTERNAL_KEY) !== null;
   } catch {
@@ -314,65 +544,41 @@ function isExternalVisit() {
   return false;
 }
 
-function definePlugin(plugin) {
-  return plugin;
-}
-async function runPluginHooks(hook, ...args) {
-  const { plugins } = getRouterContext();
-  let result = true;
-  for (const plugin of plugins) {
-    if (plugin.hooks[hook]) {
-      utils.debug.plugin(plugin.name, `Calling "${hook}" hooks.`);
-      result = await plugin.hooks[hook]?.(...args) ?? result;
-    }
-  }
-  return result;
-}
-async function runGlobalHooks(hook, ...args) {
-  const { hooks } = getRouterContext();
-  if (!hooks[hook]) {
-    return true;
-  }
-  let result = true;
-  for (const fn of hooks[hook]) {
-    utils.debug.hook(`Calling global "${hook}" hooks.`);
-    result = await fn(...args) ?? result;
+async function closeDialog(options) {
+  const context = getInternalRouterContext();
+  const url = context.dialog?.redirectUrl ?? context.dialog?.baseUrl;
+  if (!url) {
+    return;
   }
-  return result;
-}
-async function runHooks(hook, requestHooks, ...args) {
-  const result = await Promise.all([
-    requestHooks?.[hook]?.(...args),
-    runGlobalHooks(hook, ...args),
-    runPluginHooks(hook, ...args)
-  ]);
-  return !result.includes(false);
-}
-
-function registerHook(hook, fn) {
-  const hooks = getRouterContext().hooks;
-  hooks[hook] = [...hooks[hook] ?? [], fn];
-  return () => hooks[hook]?.splice(hooks[hook].indexOf(fn), 1);
-}
-function registerHookOnce(hook, fn) {
-  const unregister = registerHook(hook, async (...args) => {
-    await fn(...args);
-    unregister();
+  context.adapter.onDialogClose?.(context);
+  return await performHybridNavigation({
+    url,
+    preserveScroll: true,
+    preserveState: true,
+    ...options
   });
 }
 
 const router = {
-  abort: async () => getRouterContext().activeVisit?.controller.abort(),
-  active: () => !!getRouterContext().activeVisit,
-  visit: async (options) => await visit(options),
-  reload: async (options) => await visit({ preserveScroll: true, preserveState: true, ...options }),
-  get: async (url, options = {}) => await visit({ ...options, url, method: "GET" }),
-  post: async (url, options = {}) => await visit({ preserveState: true, ...options, url, method: "POST" }),
-  put: async (url, options = {}) => await visit({ preserveState: true, ...options, url, method: "PUT" }),
-  patch: async (url, options = {}) => await visit({ preserveState: true, ...options, url, method: "PATCH" }),
-  delete: async (url, options = {}) => await visit({ preserveState: true, ...options, url, method: "DELETE" }),
-  local: async (url, options) => await performLocalComponentVisit(url, options),
-  external: (url, data = {}) => performLocalExternalVisit(url, data),
+  abort: async () => getRouterContext().pendingNavigation?.controller.abort(),
+  active: () => !!getRouterContext().pendingNavigation,
+  navigate: async (options) => await performHybridNavigation(options),
+  reload: async (options) => await performHybridNavigation({ preserveScroll: true, preserveState: true, ...options }),
+  get: async (url, options = {}) => await performHybridNavigation({ ...options, url, method: "GET" }),
+  post: async (url, options = {}) => await performHybridNavigation({ preserveState: true, ...options, url, method: "POST" }),
+  put: async (url, options = {}) => await performHybridNavigation({ preserveState: true, ...options, url, method: "PUT" }),
+  patch: async (url, options = {}) => await performHybridNavigation({ preserveState: true, ...options, url, method: "PATCH" }),
+  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 = generateRouteFromName(name, parameters);
+    const method = getRouteDefinition(name).method.at(0);
+    return await performHybridNavigation({ url, ...options, method });
+  },
+  dialog: {
+    close: (options) => closeDialog(options)
+  },
   history: {
     get: (key) => getKeyFromHistory(key),
     remember: (key, value) => remember(key, value)
@@ -382,47 +588,69 @@ async function createRouter(options) {
   await initializeContext(options);
   return await initializeRouter();
 }
-async function visit(options) {
-  const visitId = utils.random();
+async function performHybridNavigation(options) {
+  const navigationId = utils.random();
   const context = getRouterContext();
-  utils.debug.router("Making a visit:", { context, options, visitId });
+  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);
+      if (options.method && ["PUT", "PATCH", "DELETE"].includes(options.method) && options.spoof !== false) {
+        utils.debug.router(`Automatically spoofing method ${options.method}.`);
+        options.data.append("_method", options.method);
+        options.method = "POST";
+      }
+    }
+    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, {
+        query: options.data
+      });
+      options.data = {};
     }
-    if (!await runHooks("before", options.hooks, options)) {
-      utils.debug.router('"before" event returned false, aborting the visit.');
-      throw new VisitCancelledError('The visit was cancelled by the "before" event.');
+    if (!await runHooks("before", options.hooks, options, context)) {
+      utils.debug.router('"before" event returned false, aborting the navigation.');
+      throw new NavigationCancelledError('The navigation was cancelled by the "before" event.');
     }
-    if (context.activeVisit) {
-      utils.debug.router("Aborting current visit.", context.activeVisit);
-      context.activeVisit?.controller.abort();
+    if (context.pendingNavigation) {
+      utils.debug.router("Aborting current navigation.", context.pendingNavigation);
+      context.pendingNavigation?.controller?.abort();
     }
     saveScrollPositions();
     if (options.url && options.transformUrl) {
       options.url = makeUrl(options.url, options.transformUrl);
     }
+    const targetUrl = makeUrl(options.url ?? context.url);
+    const abortController = new AbortController();
     setContext({
-      activeVisit: {
-        id: visitId,
-        url: makeUrl(options.url ?? context.url),
-        controller: new AbortController(),
+      pendingNavigation: {
+        id: navigationId,
+        url: targetUrl,
+        controller: abortController,
+        status: "pending",
         options
       }
     });
     await runHooks("start", options.hooks, context);
     utils.debug.router("Making request with axios.");
-    const response = await axios__default.request({
-      url: context.activeVisit.url.toString(),
-      method: options.method ?? "GET",
+    const response = await context.axios.request({
+      url: targetUrl.toString(),
+      method: options.method,
       data: options.method === "GET" ? {} : options.data,
       params: options.method === "GET" ? options.data : {},
-      signal: context.activeVisit.controller.signal,
+      signal: abortController.signal,
       headers: {
         ...options.headers,
+        ...context.dialog ? { [DIALOG_KEY_HEADER]: context.dialog.key } : {},
+        ...context.dialog ? { [DIALOG_REDIRECT_HEADER]: context.dialog.redirectUrl ?? "" } : {},
         ...utils.when(options.only !== void 0 || options.except !== void 0, {
-          [PARTIAL_COMPONENT_HEADER]: context.view.name,
+          [PARTIAL_COMPONENT_HEADER]: context.view.component,
           ...utils.when(options.only, { [ONLY_DATA_HEADER]: JSON.stringify(options.only) }, {}),
           ...utils.when(options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(options.except) }, {})
         }, {}),
@@ -437,24 +665,24 @@ async function visit(options) {
         await runHooks("progress", options.hooks, {
           event,
           percentage: Math.round(event.loaded / (event.total ?? 0) * 100)
-        });
+        }, context);
       }
     });
-    await runHooks("data", options.hooks, response);
+    await runHooks("data", options.hooks, response, context);
     if (isExternalResponse(response)) {
       utils.debug.router("The response is explicitely external.");
-      await performExternalVisit({
-        url: fillHash(context.activeVisit.url, response.headers[EXTERNAL_VISIT_HEADER]),
+      await performExternalNavigation({
+        url: fillHash(targetUrl, response.headers[EXTERNAL_NAVIGATION_HEADER]),
         preserveScroll: options.preserveScroll === true
       });
       return { response };
     }
-    if (!isHybridlyResponse(response)) {
-      throw new NotAHybridlyResponseError(response);
+    if (!isHybridResponse(response)) {
+      throw new NotAHybridResponseError(response);
     }
-    utils.debug.router("The response respects the hybridly protocol.");
+    utils.debug.router("The response respects the Hybridly protocol.");
     const payload = response.data;
-    if ((options.only?.length ?? options.except?.length) && payload.view.name === context.view.name) {
+    if ((options.only?.length ?? options.except?.length) && payload.view.component === context.view.component) {
       utils.debug.router(`Merging ${options.only ? '"only"' : '"except"'} properties.`, payload.view.properties);
       payload.view.properties = utils.merge(context.view.properties, payload.view.properties);
       utils.debug.router("Merged properties:", payload.view.properties);
@@ -462,7 +690,7 @@ async function visit(options) {
     await navigate({
       payload: {
         ...payload,
-        url: fillHash(context.activeVisit.url, payload.url)
+        url: fillHash(targetUrl, payload.url)
       },
       preserveScroll: options.preserveScroll === true,
       preserveState: options.preserveState,
@@ -477,45 +705,50 @@ async function visit(options) {
         return context.view.properties.errors;
       })();
       utils.debug.router("The request returned validation errors.", errors);
-      await runHooks("error", options.hooks, errors);
       setContext({
-        activeVisit: {
-          ...context.activeVisit,
+        pendingNavigation: {
+          ...context.pendingNavigation,
           status: "error"
         }
       });
+      await runHooks("error", options.hooks, errors, context);
     } else {
-      await runHooks("success", options.hooks, payload);
       setContext({
-        activeVisit: {
-          ...context.activeVisit,
+        pendingNavigation: {
+          ...context.pendingNavigation,
           status: "success"
         }
       });
+      await runHooks("success", options.hooks, payload, context);
     }
     return { response };
   } catch (error) {
     await utils.match(error.constructor.name, {
-      VisitCancelledError: async () => {
+      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);
+        utils.debug.router("The request was aborted.", error);
         await runHooks("abort", options.hooks, context);
       },
-      NotAHybridlyResponseError: async () => {
+      NotAHybridResponseError: async () => {
         utils.debug.router("The request was not hybridly.");
         console.error(error);
-        await runHooks("invalid", options.hooks, error);
-        utils.showResponseErrorModal(error.response.data);
+        await runHooks("invalid", options.hooks, error, context);
+        if (context.responseErrorModals) {
+          utils.showResponseErrorModal(error.response.data);
+        }
       },
       default: async () => {
-        utils.debug.router("An unknown error occured.", error);
-        console.error(error);
-        await runHooks("exception", options.hooks, error);
+        if (error?.name === "CanceledError") {
+          utils.debug.router("The request was cancelled.", error);
+          await runHooks("abort", options.hooks, context);
+        } else {
+          utils.debug.router("An unknown error occured.", error);
+          console.error(error);
+          await runHooks("exception", options.hooks, error, context);
+        }
       }
     });
     await runHooks("fail", options.hooks, context);
@@ -526,26 +759,28 @@ async function visit(options) {
       }
     };
   } finally {
-    utils.debug.router("Ending visit.");
+    utils.debug.router("Ending navigation.");
     await runHooks("after", options.hooks, context);
-    if (context.activeVisit?.id === visitId) {
-      setContext({ activeVisit: void 0 });
+    if (context.pendingNavigation?.id === navigationId) {
+      setContext({ pendingNavigation: void 0 });
     }
   }
 }
-function isHybridlyResponse(response) {
+function isHybridResponse(response) {
   return !!response?.headers[HYBRIDLY_HEADER];
 }
 async function navigate(options) {
   const context = getRouterContext();
   utils.debug.router("Making an internal navigation:", { context, options });
+  await runHooks("navigating", {}, options, context);
   options.payload ?? (options.payload = payloadFromContext());
   const evaluateConditionalOption = (option) => typeof option === "function" ? option(options.payload) : option;
   const shouldPreserveState = evaluateConditionalOption(options.preserveState);
   const shouldPreserveScroll = evaluateConditionalOption(options.preserveScroll);
   const shouldReplaceHistory = evaluateConditionalOption(options.replace);
   const shouldReplaceUrl = evaluateConditionalOption(options.preserveUrl);
-  if (shouldPreserveState && getHistoryState() && options.payload.view.name === context.view.name) {
+  if (shouldPreserveState && getHistoryState() && options.payload.view.component === context.view.component) {
+    utils.debug.history("Setting the history from this entry into the context.");
     setContext({ state: getHistoryState() });
   }
   if (shouldReplaceUrl) {
@@ -555,41 +790,34 @@ async function navigate(options) {
   setContext({
     ...options.payload,
     state: {}
-  }, { propagate: false });
+  });
   if (options.updateHistoryState !== false) {
     utils.debug.router(`Target URL is ${context.url}, current window URL is ${window.location.href}.`, { shouldReplaceHistory });
     setHistoryState({ replace: shouldReplaceHistory });
   }
-  const viewComponent = await context.adapter.resolveComponent(context.view.name);
-  utils.debug.router(`Component [${context.view.name}] resolved to:`, viewComponent);
-  await context.adapter.swapView({
+  const viewComponent = await context.adapter.resolveComponent(context.view.component);
+  utils.debug.router(`Component [${context.view.component}] resolved to:`, viewComponent);
+  await context.adapter.onViewSwap({
     component: viewComponent,
+    dialog: context.dialog,
+    properties: options.payload?.view.properties,
     preserveState: shouldPreserveState
   });
-  if (context.dialog) {
-    const dialogComponent = await context.adapter.resolveComponent(context.dialog.name);
-    utils.debug.router(`Dialog [${context.view.name}] resolved to:`, dialogComponent);
-    await context.adapter.swapDialog({
-      component: dialogComponent,
-      preserveState: shouldPreserveState
-    });
-  }
-  setContext();
   if (!shouldPreserveScroll) {
     resetScrollPositions();
   } else {
     restoreScrollPositions();
   }
-  await runHooks("navigate", {}, options);
+  await runHooks("navigated", {}, options, context);
 }
 async function initializeRouter() {
   const context = getRouterContext();
-  if (isBackForwardVisit()) {
-    handleBackForwardVisit();
-  } else if (isExternalVisit()) {
-    handleExternalVisit();
+  if (isBackForwardNavigation()) {
+    handleBackForwardNavigation();
+  } else if (isExternalNavigation()) {
+    handleExternalNavigation();
   } else {
-    utils.debug.router("Handling the initial page visit.");
+    utils.debug.router("Handling the initial page navigation.");
     setContext({
       url: makeUrl(context.url, { hash: window.location.hash }).toString()
     });
@@ -599,9 +827,10 @@ async function initializeRouter() {
     });
   }
   registerEventListeners();
+  await runHooks("ready", {}, context);
   return context;
 }
-async function performLocalComponentVisit(targetUrl, options) {
+async function performLocalNavigation(targetUrl, options) {
   const context = getRouterContext();
   const url = normalizeUrl(targetUrl);
   return await navigate({
@@ -611,20 +840,12 @@ async function performLocalComponentVisit(targetUrl, options) {
       dialog: context.dialog,
       url,
       view: {
-        name: options.component ?? context.view.name,
-        properties: options.properties
+        component: options.component ?? context.view.component,
+        properties: options.properties ?? {}
       }
     }
   });
 }
-function performLocalExternalVisit(url, data) {
-  document.location.href = makeUrl(url, {
-    search: qs__default.stringify(data, {
-      encodeValuesOnly: true,
-      arrayFormat: "brackets"
-    })
-  }).toString();
-}
 
 function can(resource, action) {
   return resource.authorization?.[action] ?? false;
@@ -633,10 +854,11 @@ function can(resource, action) {
 exports.can = can;
 exports.constants = constants;
 exports.createRouter = createRouter;
+exports.current = current;
 exports.definePlugin = definePlugin;
 exports.getRouterContext = getRouterContext;
 exports.makeUrl = makeUrl;
 exports.registerHook = registerHook;
-exports.registerHookOnce = registerHookOnce;
+exports.route = route;
 exports.router = router;
 exports.sameUrls = sameUrls;