@hybridly/core 0.0.1-alpha.20 → 0.0.1-alpha.21

package/dist/index.cjs

@@ -16,6 +16,8 @@ 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`;
@@ -29,6 +31,8 @@ const constants = {
 	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,
@@ -270,7 +274,7 @@ async function registerEventListeners() {
     await navigate({
       payload: event.state,
       preserveScroll: true,
-      preserveState: false,
+      preserveState: !!getInternalRouterContext().dialog || !!event.state.dialog,
       updateHistoryState: false,
       isBackForward: true
     });
@@ -478,7 +482,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 });
 }
@@ -532,6 +536,21 @@ function isExternalNavigation() {
   return false;
 }
 
+async function closeDialog(options) {
+  const context = getInternalRouterContext();
+  const url = context.dialog?.redirectUrl ?? context.dialog?.baseUrl;
+  if (!url) {
+    return;
+  }
+  context.adapter.onDialogClose?.(context);
+  return await performHybridNavigation({
+    url,
+    preserveScroll: true,
+    preserveState: true,
+    ...options
+  });
+}
+
 const router = {
   abort: async () => getRouterContext().pendingNavigation?.controller.abort(),
   active: () => !!getRouterContext().pendingNavigation,
@@ -549,6 +568,9 @@ const router = {
     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)
@@ -590,7 +612,7 @@ async function performHybridNavigation(options) {
     }
     if (context.pendingNavigation) {
       utils.debug.router("Aborting current navigation.", context.pendingNavigation);
-      context.pendingNavigation?.controller.abort();
+      context.pendingNavigation?.controller?.abort();
     }
     saveScrollPositions();
     if (options.url && options.transformUrl) {
@@ -603,6 +625,7 @@ async function performHybridNavigation(options) {
         id: navigationId,
         url: targetUrl,
         controller: abortController,
+        status: "pending",
         options
       }
     });
@@ -616,8 +639,10 @@ async function performHybridNavigation(options) {
       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) }, {})
         }, {}),
@@ -649,7 +674,7 @@ async function performHybridNavigation(options) {
     }
     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);
@@ -672,21 +697,21 @@ async function performHybridNavigation(options) {
         return context.view.properties.errors;
       })();
       utils.debug.router("The request returned validation errors.", errors);
-      await runHooks("error", options.hooks, errors, context);
       setContext({
         pendingNavigation: {
           ...context.pendingNavigation,
           status: "error"
         }
       });
+      await runHooks("error", options.hooks, errors, context);
     } else {
-      await runHooks("success", options.hooks, payload, context);
       setContext({
         pendingNavigation: {
           ...context.pendingNavigation,
           status: "success"
         }
       });
+      await runHooks("success", options.hooks, payload, context);
     }
     return { response };
   } catch (error) {
@@ -739,7 +764,7 @@ async function navigate(options) {
   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() });
   }
@@ -755,22 +780,14 @@ async function navigate(options) {
     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,
-      properties: options.payload?.dialog?.properties,
-      preserveState: shouldPreserveState
-    });
-  }
   if (!shouldPreserveScroll) {
     resetScrollPositions();
   } else {
@@ -808,7 +825,7 @@ async function performLocalNavigation(targetUrl, options) {
       dialog: context.dialog,
       url,
       view: {
-        name: options.component ?? context.view.name,
+        component: options.component ?? context.view.component,
         properties: options.properties ?? {}
       }
     }

package/dist/index.d.ts

@@ -86,6 +86,9 @@ interface Plugin extends Partial<Hooks> {
 }
 declare function definePlugin(plugin: Plugin): Plugin;
 
+interface CloseDialogOptions extends HybridRequestOptions {
+}
+
 type UrlResolvable = string | URL | Location;
 type UrlTransformable = BaseUrlTransformable | ((string: URL) => BaseUrlTransformable);
 type BaseUrlTransformable = Partial<Omit<URL, 'searchParams' | 'toJSON' | 'toString'>> & {
@@ -189,6 +192,10 @@ interface NavigationResponse {
         actual: Error;
     };
 }
+interface DialogRouter {
+    /** Closes the current dialog. */
+    close: (options?: CloseDialogOptions) => void;
+}
 interface Router {
     /** Aborts the currently pending navigate, if any. */
     abort: () => Promise<void>;
@@ -214,6 +221,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>;
+    /** Access the dialog router. */
+    dialog: DialogRouter;
     /** Access the history state. */
     history: {
         /** Remembers a value for the given route. */
@@ -232,14 +241,24 @@ interface PendingNavigation {
     options: HybridRequestOptions;
     /** Navigation identifier. */
     id: string;
+    /** Current status. */
+    status: 'pending' | 'success' | 'error';
 }
 /** A page or dialog component. */
 interface View {
     /** Name of the component to use. */
-    name: string;
+    component: string;
     /** Properties to apply to the component. */
     properties: Properties;
 }
+interface Dialog extends View {
+    /** URL that is the base background page when navigating to the dialog directly. */
+    baseUrl: string;
+    /** URL to which the dialog should redirect when closed. */
+    redirectUrl: string;
+    /** Unique identifier for this modal's lifecycle. */
+    key: string;
+}
 type Property = null | string | number | boolean | Property[] | {
     [name: string]: Property;
 };
@@ -251,18 +270,18 @@ interface SwapOptions<T> {
     properties?: any;
     /** Whether to preserve the state of the component. */
     preserveState?: boolean;
+    /** Current dialog. */
+    dialog?: Dialog;
 }
 type ViewComponent = any;
-type DialogComponent = any;
 type ResolveComponent = (name: string) => Promise<ViewComponent>;
 type SwapView = (options: SwapOptions<ViewComponent>) => Promise<void>;
-type SwapDialog = (options: SwapOptions<DialogComponent>) => Promise<void>;
 /** The payload of a navigation request from the server. */
 interface HybridPayload {
     /** The view to use in this request. */
     view: View;
     /** An optional dialog. */
-    dialog?: View;
+    dialog?: Dialog;
     /** The current page URL. */
     url: string;
     /** The current asset version. */
@@ -319,7 +338,7 @@ interface InternalRouterContext {
     /** The current view. */
     view: View;
     /** The current, optional dialog. */
-    dialog?: View;
+    dialog?: Dialog;
     /** The current local asset version. */
     version: string;
     /** The current adapter's functions. */
@@ -347,12 +366,12 @@ type RouterContext = Readonly<InternalRouterContext>;
 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 view is swapped. */
+    onViewSwap: SwapView;
     /** Called when the context is updated. */
-    update?: (context: InternalRouterContext) => void;
+    onContextUpdate?: (context: InternalRouterContext) => void;
+    /** Called when a dialog is closed. */
+    onDialogClose?: (context: InternalRouterContext) => void;
 }
 interface ResolvedAdapter extends Adapter {
     updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;
@@ -406,6 +425,8 @@ declare const HYBRIDLY_HEADER = "x-hybrid";
 declare const EXTERNAL_NAVIGATION_HEADER: string;
 declare const PARTIAL_COMPONENT_HEADER: string;
 declare const ONLY_DATA_HEADER: string;
+declare const DIALOG_KEY_HEADER: string;
+declare const DIALOG_REDIRECT_HEADER: string;
 declare const EXCEPT_DATA_HEADER: string;
 declare const CONTEXT_HEADER: string;
 declare const VERSION_HEADER: string;
@@ -417,6 +438,8 @@ declare const constants_HYBRIDLY_HEADER: typeof HYBRIDLY_HEADER;
 declare const constants_EXTERNAL_NAVIGATION_HEADER: typeof EXTERNAL_NAVIGATION_HEADER;
 declare const constants_PARTIAL_COMPONENT_HEADER: typeof PARTIAL_COMPONENT_HEADER;
 declare const constants_ONLY_DATA_HEADER: typeof ONLY_DATA_HEADER;
+declare const constants_DIALOG_KEY_HEADER: typeof DIALOG_KEY_HEADER;
+declare const constants_DIALOG_REDIRECT_HEADER: typeof DIALOG_REDIRECT_HEADER;
 declare const constants_EXCEPT_DATA_HEADER: typeof EXCEPT_DATA_HEADER;
 declare const constants_CONTEXT_HEADER: typeof CONTEXT_HEADER;
 declare const constants_VERSION_HEADER: typeof VERSION_HEADER;
@@ -429,6 +452,8 @@ declare namespace constants {
     constants_EXTERNAL_NAVIGATION_HEADER as EXTERNAL_NAVIGATION_HEADER,
     constants_PARTIAL_COMPONENT_HEADER as PARTIAL_COMPONENT_HEADER,
     constants_ONLY_DATA_HEADER as ONLY_DATA_HEADER,
+    constants_DIALOG_KEY_HEADER as DIALOG_KEY_HEADER,
+    constants_DIALOG_REDIRECT_HEADER as DIALOG_REDIRECT_HEADER,
     constants_EXCEPT_DATA_HEADER as EXCEPT_DATA_HEADER,
     constants_CONTEXT_HEADER as CONTEXT_HEADER,
     constants_VERSION_HEADER as VERSION_HEADER,

package/dist/index.mjs

@@ -7,6 +7,8 @@ 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`;
@@ -20,6 +22,8 @@ const constants = {
 	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,
@@ -261,7 +265,7 @@ async function registerEventListeners() {
     await navigate({
       payload: event.state,
       preserveScroll: true,
-      preserveState: false,
+      preserveState: !!getInternalRouterContext().dialog || !!event.state.dialog,
       updateHistoryState: false,
       isBackForward: true
     });
@@ -469,7 +473,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);
   }
   debug.context("Updated context:", { context: state.context, added: merge });
 }
@@ -523,6 +527,21 @@ function isExternalNavigation() {
   return false;
 }
 
+async function closeDialog(options) {
+  const context = getInternalRouterContext();
+  const url = context.dialog?.redirectUrl ?? context.dialog?.baseUrl;
+  if (!url) {
+    return;
+  }
+  context.adapter.onDialogClose?.(context);
+  return await performHybridNavigation({
+    url,
+    preserveScroll: true,
+    preserveState: true,
+    ...options
+  });
+}
+
 const router = {
   abort: async () => getRouterContext().pendingNavigation?.controller.abort(),
   active: () => !!getRouterContext().pendingNavigation,
@@ -540,6 +559,9 @@ const router = {
     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)
@@ -581,7 +603,7 @@ async function performHybridNavigation(options) {
     }
     if (context.pendingNavigation) {
       debug.router("Aborting current navigation.", context.pendingNavigation);
-      context.pendingNavigation?.controller.abort();
+      context.pendingNavigation?.controller?.abort();
     }
     saveScrollPositions();
     if (options.url && options.transformUrl) {
@@ -594,6 +616,7 @@ async function performHybridNavigation(options) {
         id: navigationId,
         url: targetUrl,
         controller: abortController,
+        status: "pending",
         options
       }
     });
@@ -607,8 +630,10 @@ async function performHybridNavigation(options) {
       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.name,
+          [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) }, {})
         }, {}),
@@ -640,7 +665,7 @@ async function performHybridNavigation(options) {
     }
     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) {
       debug.router(`Merging ${options.only ? '"only"' : '"except"'} properties.`, payload.view.properties);
       payload.view.properties = merge(context.view.properties, payload.view.properties);
       debug.router("Merged properties:", payload.view.properties);
@@ -663,21 +688,21 @@ async function performHybridNavigation(options) {
         return context.view.properties.errors;
       })();
       debug.router("The request returned validation errors.", errors);
-      await runHooks("error", options.hooks, errors, context);
       setContext({
         pendingNavigation: {
           ...context.pendingNavigation,
           status: "error"
         }
       });
+      await runHooks("error", options.hooks, errors, context);
     } else {
-      await runHooks("success", options.hooks, payload, context);
       setContext({
         pendingNavigation: {
           ...context.pendingNavigation,
           status: "success"
         }
       });
+      await runHooks("success", options.hooks, payload, context);
     }
     return { response };
   } catch (error) {
@@ -730,7 +755,7 @@ async function navigate(options) {
   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) {
     debug.history("Setting the history from this entry into the context.");
     setContext({ state: getHistoryState() });
   }
@@ -746,22 +771,14 @@ async function navigate(options) {
     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);
-  debug.router(`Component [${context.view.name}] resolved to:`, viewComponent);
-  await context.adapter.swapView({
+  const viewComponent = await context.adapter.resolveComponent(context.view.component);
+  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);
-    debug.router(`Dialog [${context.view.name}] resolved to:`, dialogComponent);
-    await context.adapter.swapDialog({
-      component: dialogComponent,
-      properties: options.payload?.dialog?.properties,
-      preserveState: shouldPreserveState
-    });
-  }
   if (!shouldPreserveScroll) {
     resetScrollPositions();
   } else {
@@ -799,7 +816,7 @@ async function performLocalNavigation(targetUrl, options) {
       dialog: context.dialog,
       url,
       view: {
-        name: options.component ?? context.view.name,
+        component: options.component ?? context.view.component,
         properties: options.properties ?? {}
       }
     }

package/package.json

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