@websolutespa/bom-mixer-models 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-models
 
+## 1.5.0
+
+### Minor Changes
+
+- Added getDecoratedComponents, getPageProps.
+
+## 1.4.0
+
+### Minor Changes
+
+- Modified: RouteService, LayoutService.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import { ILayout, IPage, IRouteParams, ISchema, IEquatable, IMedia, QueryParams, ICategory, ICategorized, IOption, INamedEntity, ILabel, ILocale, IMarket, IMenu, ValueOf, IPageResult, IRoute, IRouteLink, IQuerable, IRedirect, IEntity } from '@websolutespa/bom-core';
+import { ILayout, IPage, IRouteParams, ISchema, IEquatable, IMedia, QueryParams, ICategory, ICategorized, IOption, INamedEntity, ILabel, PageProps, ILocale, IMarket, IMenu, ValueOf, IPageResult, IRoute, IRouteLink, IQuerable, IRedirect, IEntity } from '@websolutespa/bom-core';
 import { AppProps } from 'next/app';
 import { FC, ReactNode, ComponentType } from 'react';
+import { DynamicOptions, Loader } from 'next/dynamic';
 import { HtmlProps } from 'next/dist/shared/lib/html-context';
 import { RenderPageResult } from 'next/dist/shared/lib/utils';
 import { NextRequest, NextFetchEvent, NextResponse } from 'next/server';
@@ -194,6 +195,15 @@ type ILazyComponentProps = {
     index: number;
 };
 type ILazyModules = Record<string, ComponentType<ILazyProps<any>>>;
+type ILazyComponentFunc<P = {}> = DynamicOptions<P> | Loader<P>;
+type ILazyFuncProps<T> = PageProps & {
+    component: T & ILazyComponent;
+};
+type ILazyStaticPropsFunc<T = any> = (props: ILazyFuncProps<T>) => Promise<T & ILazyComponent>;
+type ILazyStaticProps = Record<string, ILazyStaticPropsFunc>;
+declare const LAZY_PROPS: ILazyStaticProps;
+declare function withLazyProps<T>(key: string, getComponentProps: ILazyStaticPropsFunc<T>): void;
+declare function getDecoratedComponents(props: PageProps): Promise<void>;
 
 type ILink = {
     href: string;
@@ -264,6 +274,8 @@ declare function getErrorPageLayout(): Promise<{
     layout: ILayout;
     page: IPage;
 }>;
+type PartialPageProps<T extends ICategorized, B> = Omit<PageProps<T>, 'page'> & Partial<Pick<PageProps<T>, 'page'>> & B;
+declare function getPageProps<T extends ICategorized, B = any>(props: PartialPageProps<T, B>): Promise<PageProps<T> & B>;
 
 declare function getProvinces(locale?: string): Promise<INamedEntity[]>;
 declare function getProvince(id: IEquatable, params?: QueryParams): Promise<INamedEntity | undefined>;
@@ -291,6 +303,7 @@ declare function getRoutesForTemplates(templates: string[], market?: string, loc
 declare function getStaticPathsForSchema(schema: string): Promise<StaticPath[]>;
 declare function getBreadcrumbFromSegments(segments: ICategory[], market?: string, locale?: string): Promise<IRouteLink[]>;
 declare function getRouteLinkTree(market?: string, locale?: string): Promise<IRouteLink | undefined>;
+declare function newRouteLink(category: ICategory, route?: IRoute, locale?: string): IRouteLink;
 declare function categoryToRouteLink(routes: IRoute[], categories: ICategory[], category: ICategory, locale?: string): IRouteLink;
 declare function resolveRoute(route: IRoute & {
     splat?: string;
@@ -324,4 +337,4 @@ type IModelStore = {
     [key: string]: IQuerable<IEntity>;
 };
 
-export { IAddress, IAddressOptions, IAppProps, IApplication, IApplicationProps, ICartAddItem, ICartItem, ICheckout, ICheckoutDelivery, ICheckoutDiscount, ICheckoutInfo, ICheckoutItem, ICheckoutPartial, ICheckoutPayment, ICheckoutPaymentRedirect, ICheckoutStore, ICompanyAddress, IFeatureType, IKeyedList, ILazyComponent, ILazyComponentProps, ILazyModules, ILazyProps, ILazyableProps, ILazyedProps, ILink, IList, IModelStore, IOrder, IOrderDetail, IOrderStatus, IOrderStatusValue, ISiteMap, IUser, IUserAddress, IUserChangePassword, IUserForgot, IUserLogin, IUserRegister, StaticPath, categoryToRouteLink, findManyPages, findOnePage, getBreadcrumbFromSegments, getCategories, getCategory, getCountries, getCountry, getDeliveries, getErrorPageLayout, getFeatureType, getFeatureTypes, getInfo, getItems, getLabel, getLabels, getLayout, getListByKeys, getLists, getLocale, getLocaleFromProps, getLocales, getMarket, getMarkets, getMenu, getMenus, getOrder, getOrders, getPage, getPageCategory, getPageRoutes, getPayment, getPayments, getProvince, getProvinces, getRegion, getRegions, getRoute, getRouteLinkTree, getRoutes, getRoutesForSchemas, getRoutesForTemplates, getSegments, getSiteMapIndex, getSiteMapIndexProps, getSiteMapXML, getSiteMapXMLProps, getSiteMapXSL, getSiteMapXSLProps, getStaticPathsForSchema, getStores, resolveLabel, resolveRoute, routeInterceptor, routeRevalidateHandler, setDiscountCode, updateCheckout };
+export { IAddress, IAddressOptions, IAppProps, IApplication, IApplicationProps, ICartAddItem, ICartItem, ICheckout, ICheckoutDelivery, ICheckoutDiscount, ICheckoutInfo, ICheckoutItem, ICheckoutPartial, ICheckoutPayment, ICheckoutPaymentRedirect, ICheckoutStore, ICompanyAddress, IFeatureType, IKeyedList, ILazyComponent, ILazyComponentFunc, ILazyComponentProps, ILazyFuncProps, ILazyModules, ILazyProps, ILazyStaticProps, ILazyStaticPropsFunc, ILazyableProps, ILazyedProps, ILink, IList, IModelStore, IOrder, IOrderDetail, IOrderStatus, IOrderStatusValue, ISiteMap, IUser, IUserAddress, IUserChangePassword, IUserForgot, IUserLogin, IUserRegister, LAZY_PROPS, PartialPageProps, StaticPath, categoryToRouteLink, findManyPages, findOnePage, getBreadcrumbFromSegments, getCategories, getCategory, getCountries, getCountry, getDecoratedComponents, getDeliveries, getErrorPageLayout, getFeatureType, getFeatureTypes, getInfo, getItems, getLabel, getLabels, getLayout, getListByKeys, getLists, getLocale, getLocaleFromProps, getLocales, getMarket, getMarkets, getMenu, getMenus, getOrder, getOrders, getPage, getPageCategory, getPageProps, getPageRoutes, getPayment, getPayments, getProvince, getProvinces, getRegion, getRegions, getRoute, getRouteLinkTree, getRoutes, getRoutesForSchemas, getRoutesForTemplates, getSegments, getSiteMapIndex, getSiteMapIndexProps, getSiteMapXML, getSiteMapXMLProps, getSiteMapXSL, getSiteMapXSLProps, getStaticPathsForSchema, getStores, newRouteLink, resolveLabel, resolveRoute, routeInterceptor, routeRevalidateHandler, setDiscountCode, updateCheckout, withLazyProps };

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   IOrderStatus: () => IOrderStatus,
+  LAZY_PROPS: () => LAZY_PROPS,
   categoryToRouteLink: () => categoryToRouteLink,
   findManyPages: () => findManyPages,
   findOnePage: () => findOnePage,
@@ -29,6 +30,7 @@ __export(src_exports, {
   getCategory: () => getCategory,
   getCountries: () => getCountries,
   getCountry: () => getCountry,
+  getDecoratedComponents: () => getDecoratedComponents,
   getDeliveries: () => getDeliveries,
   getErrorPageLayout: () => getErrorPageLayout,
   getFeatureType: () => getFeatureType,
@@ -51,6 +53,7 @@ __export(src_exports, {
   getOrders: () => getOrders,
   getPage: () => getPage,
   getPageCategory: () => getPageCategory,
+  getPageProps: () => getPageProps,
   getPageRoutes: () => getPageRoutes,
   getPayment: () => getPayment,
   getPayments: () => getPayments,
@@ -72,12 +75,14 @@ __export(src_exports, {
   getSiteMapXSLProps: () => getSiteMapXSLProps,
   getStaticPathsForSchema: () => getStaticPathsForSchema,
   getStores: () => getStores,
+  newRouteLink: () => newRouteLink,
   resolveLabel: () => resolveLabel,
   resolveRoute: () => resolveRoute,
   routeInterceptor: () => routeInterceptor,
   routeRevalidateHandler: () => routeRevalidateHandler,
   setDiscountCode: () => setDiscountCode,
-  updateCheckout: () => updateCheckout
+  updateCheckout: () => updateCheckout,
+  withLazyProps: () => withLazyProps
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -225,18 +230,15 @@ async function getBreadcrumbFromSegments(segments, market = "ww", locale = "en")
     const route = routes.find(
       (r) => r.category === segment.id
     );
-    const href = route ? route.id.toString() : "/#";
-    return { segment, href };
-  }).map((x) => {
-    const segment = x.segment;
-    const href = x.href;
-    const title = (0, import_bom_core2.localize)(segment.title || "untitled", locale);
     return {
-      id: segment.id,
-      title,
-      href,
-      items: []
+      segment,
+      route
     };
+  }).map((x) => {
+    const category = x.segment;
+    const route = x.route;
+    const routeLink = newRouteLink(category, route, locale);
+    return routeLink;
   });
   return tree;
 }
@@ -262,24 +264,35 @@ async function getRouteLinkTree(market = "ww", locale = "en") {
   }
   return void 0;
 }
+function newRouteLink(category, route, locale = "en") {
+  const href = route && route.id ? route.id.toString() : "/";
+  const id = route?.page || category.id;
+  const media = category.media || route?.media;
+  const schema = route?.schema || category?.schema || "unknown";
+  const title = (0, import_bom_core2.localize)(category.title || route?.title || "untitled", locale);
+  const routeLink = {
+    category: category.id,
+    href,
+    id,
+    items: [],
+    media,
+    schema,
+    title
+  };
+  return routeLink;
+}
 function categoryToRouteLink(routes, categories, category, locale = "en") {
   const route = routes.find(
     (r) => r.category === category.id
   );
-  const href = route && route.id ? route.id.toString() : "/";
-  const title = (0, import_bom_core2.localize)(category.title || "untitled", locale);
   const rootCategory = (0, import_bom_core2.getRootCategory)(categories);
   const childCategories = categories.filter((x) => {
     const parentId = x.category && typeof x.category === "object" ? x.category["id"] : x.category;
     return rootCategory && category.id === rootCategory.id ? x.id !== rootCategory.id && (parentId === category.id || !parentId) : parentId === category.id;
   });
-  return {
-    id: category.id,
-    title,
-    href,
-    media: category.media,
-    items: childCategories.map((x) => categoryToRouteLink(routes, categories, x, locale))
-  };
+  const routeLink = newRouteLink(category, route, locale);
+  routeLink.items = childCategories.map((x) => categoryToRouteLink(routes, categories, x, locale));
+  return routeLink;
 }
 function resolveRoute(route) {
   const routepath = route.template ? route.template : route.schema;
@@ -677,13 +690,13 @@ async function getLayout(market, locale) {
   const tree = await getRouteLinkTree(market, locale);
   const firstLevelRoutes = tree?.items || [];
   const flatTopLevelRoutes = tree ? [tree, ...firstLevelRoutes] : [];
-  const topLevelRoutes = flatTopLevelRoutes.reduce((object, route) => {
-    object[route.id] = route;
+  const topLevelRoutes = flatTopLevelRoutes.reduce((object, routeLink) => {
+    object[routeLink.schema] = routeLink;
     return object;
   }, {});
-  const topLevelHrefs = flatTopLevelRoutes.reduce((object, route) => {
-    if (route.href) {
-      object[route.id] = route.href;
+  const topLevelHrefs = flatTopLevelRoutes.reduce((object, routeLink) => {
+    if (routeLink.href) {
+      object[routeLink.schema] = routeLink.href;
     }
     return object;
   }, {});
@@ -705,6 +718,28 @@ async function getLayout(market, locale) {
   };
 }
 
+// src/lazy/lazy.ts
+var LAZY_PROPS = {};
+function withLazyProps(key, getComponentProps) {
+  LAZY_PROPS[key] = getComponentProps;
+}
+async function getDecoratedComponents(props) {
+  const page = props.page;
+  if (page.components) {
+    const decoratedComponents = [];
+    for (const component of page.components) {
+      const getComponentProps = LAZY_PROPS[component.schema];
+      if (typeof getComponentProps === "function") {
+        const decoratedComponent = await getComponentProps({ ...props, component });
+        decoratedComponents.push(decoratedComponent);
+      } else {
+        decoratedComponents.push(component);
+      }
+    }
+    page.components = decoratedComponents;
+  }
+}
+
 // src/list/list.service.ts
 var import_bom_mixer_store11 = require("@websolutespa/bom-mixer-store");
 async function getLists(locale) {
@@ -1045,6 +1080,7 @@ async function getOrder(id, market, locale) {
 }
 
 // src/page/page.service.ts
+var import_bom_core3 = require("@websolutespa/bom-core");
 var import_bom_mixer_store12 = require("@websolutespa/bom-mixer-store");
 async function findOnePage(schema, id, params) {
   const store = await (0, import_bom_mixer_store12.getStore)();
@@ -1179,6 +1215,12 @@ async function getErrorPageLayout() {
   };
   return { layout, page };
 }
+async function getPageProps(props) {
+  if (props.page) {
+    await getDecoratedComponents(props);
+  }
+  return (0, import_bom_core3.asServerProps)(props);
+}
 
 // src/route/route-revalidate.handler.ts
 var import_bom_mixer_store13 = require("@websolutespa/bom-mixer-store");
@@ -1243,7 +1285,7 @@ async function routeInterceptor(request, next) {
 }
 
 // src/sitemap/sitemap.service.ts
-var import_bom_core3 = require("@websolutespa/bom-core");
+var import_bom_core4 = require("@websolutespa/bom-core");
 async function getSiteMapIndex(origin) {
   let markets = await getMarkets();
   let locales = await getLocales();
@@ -1254,7 +1296,7 @@ async function getSiteMapIndex(origin) {
   const getTime = (date) => {
     return typeof date !== "undefined" ? (typeof date === "string" ? new Date(date) : date).getTime() : 0;
   };
-  (0, import_bom_core3.eachMarketLocale)(markets, locales, (market, locale, markets2, locales2) => {
+  (0, import_bom_core4.eachMarketLocale)(markets, locales, (market, locale, markets2, locales2) => {
     const sitemapRoutes = routes.filter((x) => x.market === market.id && x.locale === locale.id);
     sitemapRoutes.sort((a, b) => getTime(a.updatedAt) - getTime(b.updatedAt));
     sitemaps.push({
@@ -1546,6 +1588,7 @@ var getSiteMapXSLProps = async (context) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   IOrderStatus,
+  LAZY_PROPS,
   categoryToRouteLink,
   findManyPages,
   findOnePage,
@@ -1554,6 +1597,7 @@ var getSiteMapXSLProps = async (context) => {
   getCategory,
   getCountries,
   getCountry,
+  getDecoratedComponents,
   getDeliveries,
   getErrorPageLayout,
   getFeatureType,
@@ -1576,6 +1620,7 @@ var getSiteMapXSLProps = async (context) => {
   getOrders,
   getPage,
   getPageCategory,
+  getPageProps,
   getPageRoutes,
   getPayment,
   getPayments,
@@ -1597,10 +1642,12 @@ var getSiteMapXSLProps = async (context) => {
   getSiteMapXSLProps,
   getStaticPathsForSchema,
   getStores,
+  newRouteLink,
   resolveLabel,
   resolveRoute,
   routeInterceptor,
   routeRevalidateHandler,
   setDiscountCode,
-  updateCheckout
+  updateCheckout,
+  withLazyProps
 });

package/dist/index.mjs

@@ -142,18 +142,15 @@ async function getBreadcrumbFromSegments(segments, market = "ww", locale = "en")
     const route = routes.find(
       (r) => r.category === segment.id
     );
-    const href = route ? route.id.toString() : "/#";
-    return { segment, href };
-  }).map((x) => {
-    const segment = x.segment;
-    const href = x.href;
-    const title = localize(segment.title || "untitled", locale);
     return {
-      id: segment.id,
-      title,
-      href,
-      items: []
+      segment,
+      route
     };
+  }).map((x) => {
+    const category = x.segment;
+    const route = x.route;
+    const routeLink = newRouteLink(category, route, locale);
+    return routeLink;
   });
   return tree;
 }
@@ -179,24 +176,35 @@ async function getRouteLinkTree(market = "ww", locale = "en") {
   }
   return void 0;
 }
+function newRouteLink(category, route, locale = "en") {
+  const href = route && route.id ? route.id.toString() : "/";
+  const id = route?.page || category.id;
+  const media = category.media || route?.media;
+  const schema = route?.schema || category?.schema || "unknown";
+  const title = localize(category.title || route?.title || "untitled", locale);
+  const routeLink = {
+    category: category.id,
+    href,
+    id,
+    items: [],
+    media,
+    schema,
+    title
+  };
+  return routeLink;
+}
 function categoryToRouteLink(routes, categories, category, locale = "en") {
   const route = routes.find(
     (r) => r.category === category.id
   );
-  const href = route && route.id ? route.id.toString() : "/";
-  const title = localize(category.title || "untitled", locale);
   const rootCategory = getRootCategory(categories);
   const childCategories = categories.filter((x) => {
     const parentId = x.category && typeof x.category === "object" ? x.category["id"] : x.category;
     return rootCategory && category.id === rootCategory.id ? x.id !== rootCategory.id && (parentId === category.id || !parentId) : parentId === category.id;
   });
-  return {
-    id: category.id,
-    title,
-    href,
-    media: category.media,
-    items: childCategories.map((x) => categoryToRouteLink(routes, categories, x, locale))
-  };
+  const routeLink = newRouteLink(category, route, locale);
+  routeLink.items = childCategories.map((x) => categoryToRouteLink(routes, categories, x, locale));
+  return routeLink;
 }
 function resolveRoute(route) {
   const routepath = route.template ? route.template : route.schema;
@@ -594,13 +602,13 @@ async function getLayout(market, locale) {
   const tree = await getRouteLinkTree(market, locale);
   const firstLevelRoutes = tree?.items || [];
   const flatTopLevelRoutes = tree ? [tree, ...firstLevelRoutes] : [];
-  const topLevelRoutes = flatTopLevelRoutes.reduce((object, route) => {
-    object[route.id] = route;
+  const topLevelRoutes = flatTopLevelRoutes.reduce((object, routeLink) => {
+    object[routeLink.schema] = routeLink;
     return object;
   }, {});
-  const topLevelHrefs = flatTopLevelRoutes.reduce((object, route) => {
-    if (route.href) {
-      object[route.id] = route.href;
+  const topLevelHrefs = flatTopLevelRoutes.reduce((object, routeLink) => {
+    if (routeLink.href) {
+      object[routeLink.schema] = routeLink.href;
     }
     return object;
   }, {});
@@ -622,6 +630,28 @@ async function getLayout(market, locale) {
   };
 }
 
+// src/lazy/lazy.ts
+var LAZY_PROPS = {};
+function withLazyProps(key, getComponentProps) {
+  LAZY_PROPS[key] = getComponentProps;
+}
+async function getDecoratedComponents(props) {
+  const page = props.page;
+  if (page.components) {
+    const decoratedComponents = [];
+    for (const component of page.components) {
+      const getComponentProps = LAZY_PROPS[component.schema];
+      if (typeof getComponentProps === "function") {
+        const decoratedComponent = await getComponentProps({ ...props, component });
+        decoratedComponents.push(decoratedComponent);
+      } else {
+        decoratedComponents.push(component);
+      }
+    }
+    page.components = decoratedComponents;
+  }
+}
+
 // src/list/list.service.ts
 import { getStore as getStore11 } from "@websolutespa/bom-mixer-store";
 async function getLists(locale) {
@@ -962,6 +992,7 @@ async function getOrder(id, market, locale) {
 }
 
 // src/page/page.service.ts
+import { asServerProps } from "@websolutespa/bom-core";
 import { getStore as getStore12 } from "@websolutespa/bom-mixer-store";
 async function findOnePage(schema, id, params) {
   const store = await getStore12();
@@ -1096,6 +1127,12 @@ async function getErrorPageLayout() {
   };
   return { layout, page };
 }
+async function getPageProps(props) {
+  if (props.page) {
+    await getDecoratedComponents(props);
+  }
+  return asServerProps(props);
+}
 
 // src/route/route-revalidate.handler.ts
 import { apiHandler } from "@websolutespa/bom-mixer-store";
@@ -1462,6 +1499,7 @@ var getSiteMapXSLProps = async (context) => {
 };
 export {
   IOrderStatus,
+  LAZY_PROPS,
   categoryToRouteLink,
   findManyPages,
   findOnePage,
@@ -1470,6 +1508,7 @@ export {
   getCategory,
   getCountries,
   getCountry,
+  getDecoratedComponents,
   getDeliveries,
   getErrorPageLayout,
   getFeatureType,
@@ -1492,6 +1531,7 @@ export {
   getOrders,
   getPage,
   getPageCategory,
+  getPageProps,
   getPageRoutes,
   getPayment,
   getPayments,
@@ -1513,10 +1553,12 @@ export {
   getSiteMapXSLProps,
   getStaticPathsForSchema,
   getStores,
+  newRouteLink,
   resolveLabel,
   resolveRoute,
   routeInterceptor,
   routeRevalidateHandler,
   setDiscountCode,
-  updateCheckout
+  updateCheckout,
+  withLazyProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-models",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Mixer Models module of the BOM Repository",
   "keywords": [
     "bom",

package/src/layout/layout.service.ts

@@ -18,17 +18,17 @@ export async function getLayout(market: string, locale: string): Promise<ILayout
   // console.log('firstLevelRoutes', firstLevelRoutes);
   const flatTopLevelRoutes = tree ? [tree, ...firstLevelRoutes] : [];
   // console.log('flatTopLevelRoutes', flatTopLevelRoutes);
-  const topLevelRoutes = flatTopLevelRoutes.reduce((object, route: IRouteLink) => {
-    object[route.id] = route;
+  const topLevelRoutes = flatTopLevelRoutes.reduce((object, routeLink: IRouteLink) => {
+    object[routeLink.schema] = routeLink;
     return object;
-  }, {} as { [key: string]: IRouteLink });
+  }, {} as Record<string, IRouteLink>);
   // console.log('topLevelRoutes', topLevelRoutes);
-  const topLevelHrefs = flatTopLevelRoutes.reduce((object, route: IRouteLink) => {
-    if (route.href) {
-      object[route.id] = route.href;
+  const topLevelHrefs = flatTopLevelRoutes.reduce((object, routeLink: IRouteLink) => {
+    if (routeLink.href) {
+      object[routeLink.schema] = routeLink.href;
     }
     return object;
-  }, {} as { [key: string]: string });
+  }, {} as Record<string, string>);
   // console.log('topLevelHrefs', topLevelHrefs);
   const menu: Record<string, IMenu> = {};
   // console.log('menu', menu);

package/src/lazy/lazy.ts

@@ -1,3 +1,5 @@
+import { PageProps } from '@websolutespa/bom-core';
+import { DynamicOptions, Loader } from 'next/dynamic';
 import { ComponentType, ReactNode } from 'react';
 
 export type ILazyComponent = {
@@ -25,3 +27,51 @@ export type ILazyComponentProps = {
 };
 
 export type ILazyModules = Record<string, ComponentType<ILazyProps<any>>>;
+
+export type ILazyComponentFunc<P = {}> = DynamicOptions<P> | Loader<P>;
+
+export type ILazyFuncProps<T> = PageProps & { component: T & ILazyComponent };
+
+export type ILazyStaticPropsFunc<T = any> = (props: ILazyFuncProps<T>) => Promise<T & ILazyComponent>;
+
+export type ILazyStaticProps = Record<string, ILazyStaticPropsFunc>;
+
+export const LAZY_PROPS: ILazyStaticProps = {};
+
+export function withLazyProps<T>(key: string, getComponentProps: ILazyStaticPropsFunc<T>) {
+  LAZY_PROPS[key] = getComponentProps;
+}
+
+export async function getDecoratedComponents(props: PageProps) {
+  const page = props.page;
+  if (page.components) {
+    const decoratedComponents: ILazyComponent[] = [];
+    for (const component of page.components) {
+      const getComponentProps = LAZY_PROPS[component.schema];
+      if (typeof getComponentProps === 'function') {
+        const decoratedComponent = await getComponentProps({ ...(props as PageProps), component });
+        decoratedComponents.push(decoratedComponent);
+      } else {
+        decoratedComponents.push(component);
+      }
+    }
+    page.components = decoratedComponents;
+  }
+}
+
+/*
+export const LAZY_MODULES: ILazyModules = {};
+
+export function withLazyModule<T>(key: string, callback: ILazyComponentFunc<ILazyProps<T>>) {
+  const module = dynamic<ILazyProps<T>>(callback);
+  LAZY_MODULES[key] = module;
+  return module;
+}
+
+export function withLazyModules(modules: Record<string, ILazyComponentFunc<ILazyProps<any>>>) {
+  Object.entries(modules).forEach(([key, callback]) => {
+    withLazyModule(key, callback);
+  });
+  return LAZY_MODULES;
+}
+*/

package/src/page/page.service.ts

@@ -1,8 +1,9 @@
-import { ICategorized, ICategory, IEquatable, ILayout, IPage, IPageResult, IRoute, IRouteLink, QueryParams, SchemaType } from '@websolutespa/bom-core';
+import { ICategorized, ICategory, IEquatable, ILayout, IPage, IPageResult, IRoute, IRouteLink, PageProps, QueryParams, SchemaType, asServerProps } from '@websolutespa/bom-core';
 import { getStore } from '@websolutespa/bom-mixer-store';
 import { getSegments } from '../category/category.service';
 import { resolveLabel } from '../label/label.service';
 import { getLayout } from '../layout/layout.service';
+import { getDecoratedComponents } from '../lazy/lazy';
 import { getBreadcrumbFromSegments } from '../route/route.service';
 import { IModelStore } from '../store/store';
 
@@ -147,3 +148,11 @@ export async function getErrorPageLayout(): Promise<{ layout: ILayout, page: IPa
   return { layout, page };
 }
 
+export type PartialPageProps<T extends ICategorized, B> = Omit<PageProps<T>, 'page'> & Partial<Pick<PageProps<T>, 'page'>> & B;
+
+export async function getPageProps<T extends ICategorized, B = any>(props: PartialPageProps<T, B>) {
+  if (props.page) {
+    await getDecoratedComponents(props as PageProps<T> & B);
+  }
+  return asServerProps(props) as PageProps<T> & B;
+}

package/src/route/route.service.ts

@@ -94,18 +94,15 @@ export async function getBreadcrumbFromSegments(segments: ICategory[], market: s
     const route = routes.find(r =>
       r.category === segment.id
     );
-    const href = route ? route.id.toString() : '/#';
-    return { segment, href };
-  }).map(x => {
-    const segment: ICategory = x.segment;
-    const href: string = x.href;
-    const title = localize(segment.title || 'untitled', locale);
     return {
-      id: segment.id,
-      title: title,
-      href,
-      items: [],
+      segment,
+      route,
     };
+  }).map(x => {
+    const category = x.segment;
+    const route = x.route;
+    const routeLink = newRouteLink(category, route, locale);
+    return routeLink;
   });
   return tree;
 }
@@ -136,13 +133,28 @@ export async function getRouteLinkTree(market: string = 'ww', locale: string = '
   return undefined;
 }
 
+export function newRouteLink(category: ICategory, route?: IRoute, locale: string = 'en'): IRouteLink {
+  const href = (route && route.id) ? route.id.toString() : '/';
+  const id = route?.page || category.id;
+  const media = category.media || route?.media;
+  const schema = route?.schema || category?.schema || 'unknown';
+  const title = localize(category.title || route?.title || 'untitled', locale);
+  const routeLink = {
+    category: category.id,
+    href,
+    id,
+    items: [],
+    media,
+    schema,
+    title,
+  };
+  return routeLink;
+}
+
 export function categoryToRouteLink(routes: IRoute[], categories: ICategory[], category: ICategory, locale: string = 'en'): IRouteLink {
   const route = routes.find(r =>
     r.category === category.id
   );
-  const href = (route && route.id) ? route.id.toString() : '/';
-  // console.log('categoryToRouteLink', href, category.id, route);
-  const title = localize(category.title || 'untitled', locale);
   const rootCategory = getRootCategory(categories);
   const childCategories = categories.filter(x => {
     const parentId = x.category && typeof x.category === 'object' ? x.category['id'] : x.category;
@@ -151,13 +163,12 @@ export function categoryToRouteLink(routes: IRoute[], categories: ICategory[], c
       parentId === category.id;
   });
   // console.log('childCategories', category.id, childCategories);
-  return {
-    id: category.id,
-    title,
-    href,
-    media: category.media,
-    items: childCategories.map(x => categoryToRouteLink(routes, categories, x, locale)),
-  };
+  const routeLink = newRouteLink(category, route, locale);
+  // const title = localize(category.title || 'untitled', locale);
+  // const href = (route && route.id) ? route.id.toString() : '/';
+  // console.log('categoryToRouteLink', href, category.id, route);
+  routeLink.items = childCategories.map(x => categoryToRouteLink(routes, categories, x, locale));
+  return routeLink;
 }
 
 export function resolveRoute(route: IRoute & { splat?: string }) {