improve single page app

apps/restaurant-cashier/cart/cart-product-item.component.js

@@ -1,8 +1,8 @@
 import { compose } from '../utils/functions.js';
-import { reactiveProps } from '../utils/components.js';
 import { withView } from '@cofn/view';
+import { withProps } from '@cofn/controllers';
 
-const compositionPipeline = compose([reactiveProps(['product']), withView]);
+const compositionPipeline = compose([withProps(['product']), withView]);
 
 export const CartProductItem = compositionPipeline(({ html, $host }) => {
   return ({ properties: { product } }) => {

apps/restaurant-cashier/cart/cart.page.js

@@ -33,5 +33,8 @@ export const loadPage = ({ define }) => {
     'app-cart-product-list',
     withCartController(withView(CartProductList)),
   );
-  return template.content.cloneNode(true);
+  return {
+    title: 'Current cart',
+    content: template.content.cloneNode(true),
+  };
 };

apps/restaurant-cashier/components/ui-icon.component.js

@@ -15,6 +15,7 @@ svg {
 </svg>
 `;
 
+// todo add script to cherry pick the icons used
 const spriteURL = `/node_modules/bootstrap-icons/bootstrap-icons.svg`;
 
 export const UIIcon = function* ({ $host, $root }) {

apps/restaurant-cashier/dashboard/dashboard.page.js

@@ -24,5 +24,8 @@ export const loadPage = ({ define }) => {
   define('app-top-items-chart', chart(TopItemsChart));
   define('app-top-items-revenue-chart', chart(TopItemsRevenueChart));
 
-  return template.content.cloneNode(true);
+  return {
+    title: 'Dashboard',
+    content: template.content.cloneNode(true),
+  };
 };

apps/restaurant-cashier/products/edit/edit-product.page.js

@@ -1,10 +1,10 @@
 import { createElement } from '../../utils/dom.js';
 import { productListService } from '../product-list.service.js';
 import { fromForm } from '../product-list.model.js';
-import { reactiveProps } from '../../utils/components.js';
 import { withView } from '@cofn/view';
 import { ImageUploader } from '../image-uploader/image-uploader.component.js';
 import { compose } from '../../utils/functions.js';
+import { withProps } from '@cofn/controllers';
 export const loadPage = async ({ define, state }) => {
   define('app-edit-product', EditProductForm);
   define('app-image-uploader', ImageUploader, {
@@ -23,10 +23,13 @@ export const loadPage = async ({ define, state }) => {
   });
   const el = createElement('app-edit-product');
   el.product = product;
-  return el;
+  return {
+    title: `Edit ${product.title}`,
+    content: el,
+  };
 };
 
-const wrapComponent = compose([reactiveProps(['product']), withView]);
+const wrapComponent = compose([withProps(['product']), withView]);
 
 const EditProductForm = wrapComponent(({ html, router, $host }) => {
   return ({ properties: { product } }) => html`

apps/restaurant-cashier/products/list/product-list-item.component.js

@@ -1,8 +1,8 @@
 import { withView } from '@cofn/view';
 import { compose } from '../../utils/functions.js';
-import { reactiveProps } from '../../utils/components.js';
+import { withProps } from '@cofn/controllers';
 
-const compositionPipeline = compose([reactiveProps(['product']), withView]);
+const compositionPipeline = compose([withProps(['product']), withView]);
 
 export const ProductListItem = compositionPipeline(({ html, $host }) => {
   const onclickHandler = (ev) => {

apps/restaurant-cashier/products/list/product-list.page.js

@@ -19,5 +19,8 @@ export const loadPage = async ({ define, state }) => {
   if (state?.sku) {
     element.setAttribute('target-sku', state.sku);
   }
-  return element;
+  return {
+    title: 'Products',
+    content: element,
+  };
 };

apps/restaurant-cashier/products/new/new-product.page.js

@@ -87,5 +87,8 @@ export const loadPage = async ({ router }) => {
       'image-uploaded',
       ({ detail }) => (form.querySelector('[name=image]').value = detail.url),
     );
-  return page;
+  return {
+    title: 'New product',
+    content: page,
+  };
 };

apps/restaurant-cashier/readme.md

@@ -10,4 +10,3 @@ It solves most of the problematics you can get while building a single page app:
 * form and custom validation
 * user preferences management (theme, animation)
 * advanced components (select list, file upload with drag and drop)
-

apps/restaurant-cashier/router/page-outlet.component.js

@@ -23,7 +23,7 @@ export const PageOutlet = pageOutlet(function* ({ $host, preferencesService }) {
     const { page } = yield;
     if (page) {
       const { motion } = preferencesService.getState();
-      const autofocusElement = page.querySelector('[autofocus]');
+      const autofocusElement = page.content.querySelector('[autofocus]');
       if (
         !document.startViewTransition ||
         motion?.computed === motionSettings.reduced
@@ -44,6 +44,7 @@ export const PageOutlet = pageOutlet(function* ({ $host, preferencesService }) {
   }
 
   function updateDOM({ page }) {
-    $host.replaceChildren(page);
+    $host.replaceChildren(page.content);
+    document.title = page.title;
   }
 });

apps/restaurant-cashier/users/me.page.js

@@ -21,5 +21,8 @@ export const loadPage = async ({ define, preferencesService }) => {
     withPreferencesController(withView(PreferencesComponent)),
   );
 
-  return template.content.cloneNode(true);
+  return {
+    title: 'Settings',
+    content: template.content.cloneNode(true),
+  };
 };