@hybridly/core 0.4.0 → 0.4.1

package/dist/index.cjs

@@ -160,7 +160,7 @@ async function restoreScrollPositions() {
     utils.debug.scroll("No region found to restore.");
     return;
   }
-  context.adapter.onWaitingForMount(() => {
+  context.adapter.executeOnMounted(() => {
     utils.debug.scroll(`Restoring ${regions.length}/${context.scrollRegions.length} region(s).`);
     regions.forEach((el, i) => el.scrollTo({
       top: context.scrollRegions.at(i)?.top ?? el.scrollTop,
@@ -500,6 +500,7 @@ async function initializeContext(options) {
     plugins: options.plugins ?? [],
     axios: options.axios ?? axios__default.create(),
     routing: options.routing,
+    preloadCache: /* @__PURE__ */ new Map(),
     hooks: {},
     memo: {}
   };
@@ -590,6 +591,52 @@ async function closeDialog(options) {
   });
 }
 
+function isPreloaded(targetUrl) {
+  const context = getInternalRouterContext();
+  return context.preloadCache.has(targetUrl.toString()) ?? false;
+}
+function getPreloadedRequest(targetUrl) {
+  const context = getInternalRouterContext();
+  return context.preloadCache.get(targetUrl.toString());
+}
+function storePreloadRequest(targetUrl, response) {
+  const context = getInternalRouterContext();
+  context.preloadCache.set(targetUrl.toString(), response);
+}
+function discardPreloadedRequest(targetUrl) {
+  const context = getInternalRouterContext();
+  return context.preloadCache.delete(targetUrl.toString());
+}
+async function performPreloadRequest(options) {
+  const context = getRouterContext();
+  const url = makeUrl(options.url ?? context.url);
+  if (isPreloaded(url)) {
+    utils.debug.router("This request is already preloaded.");
+    return false;
+  }
+  if (context.pendingNavigation) {
+    utils.debug.router("A navigation is pending, preload aborted.");
+    return false;
+  }
+  if (options.method !== "GET") {
+    utils.debug.router("Cannot preload non-GET requests.");
+    return false;
+  }
+  utils.debug.router(`Preloading response for [${url.toString()}]`);
+  try {
+    const response = await performHybridRequest(url, options);
+    if (!isHybridResponse(response)) {
+      utils.debug.router("Preload result was invalid.");
+      return false;
+    }
+    storePreloadRequest(url, response);
+    return true;
+  } catch (error) {
+    utils.debug.router("Preloading failed.");
+    return false;
+  }
+}
+
 const router = {
   abort: async () => getRouterContext().pendingNavigation?.controller.abort(),
   active: () => !!getRouterContext().pendingNavigation,
@@ -601,6 +648,7 @@ const router = {
   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),
+  preload: async (url, options = {}) => await performPreloadRequest({ ...options, url, method: "GET" }),
   external: (url, data = {}) => navigateToExternalUrl(url, data),
   to: async (name, parameters, options) => {
     const url = generateRouteFromName(name, parameters);
@@ -632,11 +680,6 @@ async function performHybridNavigation(options) {
     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);
@@ -645,6 +688,19 @@ async function performHybridNavigation(options) {
       });
       options.data = {};
     }
+    if (["PUT", "PATCH", "DELETE"].includes(options.method) && options.spoof !== false) {
+      utils.debug.router(`Automatically spoofing method ${options.method}.`);
+      if (options.data instanceof FormData) {
+        options.data.append("_method", options.method);
+      } else if (Object.keys(options.data ?? {}).length) {
+        Object.assign(options.data, { _method: options.method });
+      } else if (typeof options.data === "undefined") {
+        options.data = { _method: options.method };
+      } else {
+        utils.debug.router("Could not spoof method because body type is not supported.", options.data);
+      }
+      options.method = "POST";
+    }
     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.');
@@ -670,35 +726,7 @@ async function performHybridNavigation(options) {
     });
     await runHooks("start", options.hooks, context);
     utils.debug.router("Making request with axios.");
-    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: 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.component,
-          ...utils.when(options.only, { [ONLY_DATA_HEADER]: JSON.stringify(options.only) }, {}),
-          ...utils.when(options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(options.except) }, {})
-        }, {}),
-        ...utils.when(options.errorBag, { [ERROR_BAG_HEADER]: options.errorBag }, {}),
-        ...utils.when(context.version, { [VERSION_HEADER]: context.version }, {}),
-        [HYBRIDLY_HEADER]: true,
-        "X-Requested-With": "XMLHttpRequest",
-        "Accept": "text/html, application/xhtml+xml"
-      },
-      validateStatus: () => true,
-      onUploadProgress: async (event) => {
-        await runHooks("progress", options.hooks, {
-          event,
-          percentage: Math.round(event.loaded / (event.total ?? 0) * 100)
-        }, context);
-      }
-    });
+    const response = await performHybridRequest(targetUrl, options, abortController);
     await runHooks("data", options.hooks, response, context);
     if (isExternalResponse(response)) {
       utils.debug.router("The response is explicitely external.");
@@ -842,6 +870,47 @@ async function navigate(options) {
     resetScrollPositions();
   }
   await runHooks("navigated", {}, options, context);
+  context.adapter.executeOnMounted(() => {
+    runHooks("mounted", {}, context);
+  });
+}
+async function performHybridRequest(targetUrl, options, abortController) {
+  const context = getInternalRouterContext();
+  const preloaded = getPreloadedRequest(targetUrl);
+  if (preloaded) {
+    utils.debug.router(`Found a pre-loaded request for [${targetUrl}]`);
+    discardPreloadedRequest(targetUrl);
+    return preloaded;
+  }
+  return await context.axios.request({
+    url: targetUrl.toString(),
+    method: options.method,
+    data: options.method === "GET" ? {} : options.data,
+    params: options.method === "GET" ? options.data : {},
+    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.component,
+        ...utils.when(options.only, { [ONLY_DATA_HEADER]: JSON.stringify(options.only) }, {}),
+        ...utils.when(options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(options.except) }, {})
+      }, {}),
+      ...utils.when(options.errorBag, { [ERROR_BAG_HEADER]: options.errorBag }, {}),
+      ...utils.when(context.version, { [VERSION_HEADER]: context.version }, {}),
+      [HYBRIDLY_HEADER]: true,
+      "X-Requested-With": "XMLHttpRequest",
+      "Accept": "text/html, application/xhtml+xml"
+    },
+    validateStatus: () => true,
+    onUploadProgress: async (event) => {
+      await runHooks("progress", options.hooks, {
+        event,
+        percentage: Math.round(event.loaded / (event.total ?? 0) * 100)
+      }, context);
+    }
+  });
 }
 async function initializeRouter() {
   const context = getRouterContext();

package/dist/index.d.ts

@@ -70,6 +70,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 HookOptions {
     /** Executes the hook only once. */
@@ -228,6 +232,8 @@ interface Router {
     external: (url: UrlResolvable, data?: HybridRequestOptions['data']) => void;
     /** Navigates to the given URL without a server round-trip. */
     local: (url: UrlResolvable, options: ComponentNavigationOptions) => Promise<void>;
+    /** Preloads the given URL. The next time this URL is navigated to, it will be loaded from the cache. */
+    preload: (url: UrlResolvable, options?: Omit<HybridRequestOptions, 'method' | 'url'>) => Promise<boolean>;
     /** Access the dialog router. */
     dialog: DialogRouter;
     /** Access the history state. */
@@ -368,6 +374,8 @@ interface InternalRouterContext {
     routing?: RoutingConfiguration;
     /** Whether to display response error modals. */
     responseErrorModals?: boolean;
+    /** Cache of preload requests. */
+    preloadCache: Map<string, AxiosResponse>;
 }
 /** Router context. */
 type RouterContext = Readonly<InternalRouterContext>;
@@ -382,7 +390,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;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { debug, merge, removeTrailingSlash, debounce, random, hasFiles, objectToFormData, when, match, showResponseErrorModal } from '@hybridly/utils';
+import { debug, merge, removeTrailingSlash, debounce, random, hasFiles, objectToFormData, match, showResponseErrorModal, when } from '@hybridly/utils';
 import axios from 'axios';
 import { stringify, parse } from 'superjson';
 import qs from 'qs';
@@ -151,7 +151,7 @@ async function restoreScrollPositions() {
     debug.scroll("No region found to restore.");
     return;
   }
-  context.adapter.onWaitingForMount(() => {
+  context.adapter.executeOnMounted(() => {
     debug.scroll(`Restoring ${regions.length}/${context.scrollRegions.length} region(s).`);
     regions.forEach((el, i) => el.scrollTo({
       top: context.scrollRegions.at(i)?.top ?? el.scrollTop,
@@ -491,6 +491,7 @@ async function initializeContext(options) {
     plugins: options.plugins ?? [],
     axios: options.axios ?? axios.create(),
     routing: options.routing,
+    preloadCache: /* @__PURE__ */ new Map(),
     hooks: {},
     memo: {}
   };
@@ -581,6 +582,52 @@ async function closeDialog(options) {
   });
 }
 
+function isPreloaded(targetUrl) {
+  const context = getInternalRouterContext();
+  return context.preloadCache.has(targetUrl.toString()) ?? false;
+}
+function getPreloadedRequest(targetUrl) {
+  const context = getInternalRouterContext();
+  return context.preloadCache.get(targetUrl.toString());
+}
+function storePreloadRequest(targetUrl, response) {
+  const context = getInternalRouterContext();
+  context.preloadCache.set(targetUrl.toString(), response);
+}
+function discardPreloadedRequest(targetUrl) {
+  const context = getInternalRouterContext();
+  return context.preloadCache.delete(targetUrl.toString());
+}
+async function performPreloadRequest(options) {
+  const context = getRouterContext();
+  const url = makeUrl(options.url ?? context.url);
+  if (isPreloaded(url)) {
+    debug.router("This request is already preloaded.");
+    return false;
+  }
+  if (context.pendingNavigation) {
+    debug.router("A navigation is pending, preload aborted.");
+    return false;
+  }
+  if (options.method !== "GET") {
+    debug.router("Cannot preload non-GET requests.");
+    return false;
+  }
+  debug.router(`Preloading response for [${url.toString()}]`);
+  try {
+    const response = await performHybridRequest(url, options);
+    if (!isHybridResponse(response)) {
+      debug.router("Preload result was invalid.");
+      return false;
+    }
+    storePreloadRequest(url, response);
+    return true;
+  } catch (error) {
+    debug.router("Preloading failed.");
+    return false;
+  }
+}
+
 const router = {
   abort: async () => getRouterContext().pendingNavigation?.controller.abort(),
   active: () => !!getRouterContext().pendingNavigation,
@@ -592,6 +639,7 @@ const router = {
   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),
+  preload: async (url, options = {}) => await performPreloadRequest({ ...options, url, method: "GET" }),
   external: (url, data = {}) => navigateToExternalUrl(url, data),
   to: async (name, parameters, options) => {
     const url = generateRouteFromName(name, parameters);
@@ -623,11 +671,6 @@ async function performHybridNavigation(options) {
     if ((hasFiles(options.data) || options.useFormData) && !(options.data instanceof FormData)) {
       options.data = objectToFormData(options.data);
       debug.router("Converted data to FormData.", options.data);
-      if (options.method && ["PUT", "PATCH", "DELETE"].includes(options.method) && options.spoof !== false) {
-        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) {
       debug.router("Transforming data to query parameters.", options.data);
@@ -636,6 +679,19 @@ async function performHybridNavigation(options) {
       });
       options.data = {};
     }
+    if (["PUT", "PATCH", "DELETE"].includes(options.method) && options.spoof !== false) {
+      debug.router(`Automatically spoofing method ${options.method}.`);
+      if (options.data instanceof FormData) {
+        options.data.append("_method", options.method);
+      } else if (Object.keys(options.data ?? {}).length) {
+        Object.assign(options.data, { _method: options.method });
+      } else if (typeof options.data === "undefined") {
+        options.data = { _method: options.method };
+      } else {
+        debug.router("Could not spoof method because body type is not supported.", options.data);
+      }
+      options.method = "POST";
+    }
     if (!await runHooks("before", options.hooks, options, context)) {
       debug.router('"before" event returned false, aborting the navigation.');
       throw new NavigationCancelledError('The navigation was cancelled by the "before" event.');
@@ -661,35 +717,7 @@ async function performHybridNavigation(options) {
     });
     await runHooks("start", options.hooks, context);
     debug.router("Making request with axios.");
-    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: abortController.signal,
-      headers: {
-        ...options.headers,
-        ...context.dialog ? { [DIALOG_KEY_HEADER]: context.dialog.key } : {},
-        ...context.dialog ? { [DIALOG_REDIRECT_HEADER]: context.dialog.redirectUrl ?? "" } : {},
-        ...when(options.only !== void 0 || options.except !== void 0, {
-          [PARTIAL_COMPONENT_HEADER]: context.view.component,
-          ...when(options.only, { [ONLY_DATA_HEADER]: JSON.stringify(options.only) }, {}),
-          ...when(options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(options.except) }, {})
-        }, {}),
-        ...when(options.errorBag, { [ERROR_BAG_HEADER]: options.errorBag }, {}),
-        ...when(context.version, { [VERSION_HEADER]: context.version }, {}),
-        [HYBRIDLY_HEADER]: true,
-        "X-Requested-With": "XMLHttpRequest",
-        "Accept": "text/html, application/xhtml+xml"
-      },
-      validateStatus: () => true,
-      onUploadProgress: async (event) => {
-        await runHooks("progress", options.hooks, {
-          event,
-          percentage: Math.round(event.loaded / (event.total ?? 0) * 100)
-        }, context);
-      }
-    });
+    const response = await performHybridRequest(targetUrl, options, abortController);
     await runHooks("data", options.hooks, response, context);
     if (isExternalResponse(response)) {
       debug.router("The response is explicitely external.");
@@ -833,6 +861,47 @@ async function navigate(options) {
     resetScrollPositions();
   }
   await runHooks("navigated", {}, options, context);
+  context.adapter.executeOnMounted(() => {
+    runHooks("mounted", {}, context);
+  });
+}
+async function performHybridRequest(targetUrl, options, abortController) {
+  const context = getInternalRouterContext();
+  const preloaded = getPreloadedRequest(targetUrl);
+  if (preloaded) {
+    debug.router(`Found a pre-loaded request for [${targetUrl}]`);
+    discardPreloadedRequest(targetUrl);
+    return preloaded;
+  }
+  return await context.axios.request({
+    url: targetUrl.toString(),
+    method: options.method,
+    data: options.method === "GET" ? {} : options.data,
+    params: options.method === "GET" ? options.data : {},
+    signal: abortController?.signal,
+    headers: {
+      ...options.headers,
+      ...context.dialog ? { [DIALOG_KEY_HEADER]: context.dialog.key } : {},
+      ...context.dialog ? { [DIALOG_REDIRECT_HEADER]: context.dialog.redirectUrl ?? "" } : {},
+      ...when(options.only !== void 0 || options.except !== void 0, {
+        [PARTIAL_COMPONENT_HEADER]: context.view.component,
+        ...when(options.only, { [ONLY_DATA_HEADER]: JSON.stringify(options.only) }, {}),
+        ...when(options.except, { [EXCEPT_DATA_HEADER]: JSON.stringify(options.except) }, {})
+      }, {}),
+      ...when(options.errorBag, { [ERROR_BAG_HEADER]: options.errorBag }, {}),
+      ...when(context.version, { [VERSION_HEADER]: context.version }, {}),
+      [HYBRIDLY_HEADER]: true,
+      "X-Requested-With": "XMLHttpRequest",
+      "Accept": "text/html, application/xhtml+xml"
+    },
+    validateStatus: () => true,
+    onUploadProgress: async (event) => {
+      await runHooks("progress", options.hooks, {
+        event,
+        percentage: Math.round(event.loaded / (event.total ?? 0) * 100)
+      }, context);
+    }
+  });
 }
 async function initializeRouter() {
   const context = getRouterContext();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/core",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Core functionality of Hybridly",
   "keywords": [
     "hybridly",
@@ -38,7 +38,7 @@
   "dependencies": {
     "qs": "^6.11.2",
     "superjson": "^1.12.3",
-    "@hybridly/utils": "0.4.0"
+    "@hybridly/utils": "0.4.1"
   },
   "devDependencies": {
     "defu": "^6.1.2"