@alepha/react 0.13.2 → 0.13.4

package/src/core/components/NotFound.tsx

@@ -4,20 +4,24 @@ export default function NotFoundPage(props: { style?: CSSProperties }) {
   return (
     <div
       style={{
-        height: "100vh",
+        width: "100%",
+        minHeight: "90vh",
+        boxSizing: "border-box",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
         alignItems: "center",
         textAlign: "center",
-        fontFamily: "sans-serif",
-        padding: "1rem",
+        fontFamily:
+          'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        padding: "2rem",
         ...props.style,
       }}
     >
-      <h1 style={{ fontSize: "1rem", marginBottom: "0.5rem" }}>
-        404 - This page does not exist
-      </h1>
+      <div style={{ fontSize: "6rem", fontWeight: 200, lineHeight: 1 }}>404</div>
+      <div style={{ fontSize: "0.875rem", marginTop: "1rem", opacity: 0.6 }}>
+        Page not found
+      </div>
     </div>
   );
 }

package/src/core/providers/ReactBrowserRouterProvider.ts

@@ -77,6 +77,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
         }
       }
 
+      state.name = route?.page.name;
       state.query = query;
       state.params = params ?? {};
 

package/src/core/providers/ReactPageProvider.ts

@@ -694,6 +694,9 @@ export interface ReactRouterState {
    * Optional meta information associated with the current page.
    */
   meta: Record<string, any>;
+
+  //
+  name?: string;
 }
 
 export interface RouterStackItem {

package/src/core/providers/ReactServerProvider.ts

@@ -184,19 +184,17 @@ export class ReactServerProvider {
     }
 
     for (const page of this.pageApi.getPages()) {
-      if (page.children?.length) {
-        continue;
+      if (page.component || page.lazy) {
+        this.log.debug(`+ ${page.match} -> ${page.name}`);
+
+        this.serverRouterProvider.createRoute({
+          ...page,
+          schema: undefined, // schema is handled by the page primitive provider for now (shared by browser and server)
+          method: "GET",
+          path: page.match,
+          handler: this.createHandler(page, templateLoader),
+        });
       }
-
-      this.log.debug(`+ ${page.match} -> ${page.name}`);
-
-      this.serverRouterProvider.createRoute({
-        ...page,
-        schema: undefined, // schema is handled by the page primitive provider for now (shared by browser and server)
-        method: "GET",
-        path: page.match,
-        handler: this.createHandler(page, templateLoader),
-      });
     }
   }
 
@@ -339,6 +337,8 @@ export class ReactServerProvider {
 
       const state = entry as ReactRouterState;
 
+      state.name = route.name;
+
       if (this.alepha.has(ServerLinksProvider)) {
         this.alepha.store.set(
           "alepha.server.request.apiLinks",
@@ -352,6 +352,9 @@ export class ReactServerProvider {
       let target: PageRoute | undefined = route; // TODO: move to PagePrimitiveProvider
       while (target) {
         if (route.can && !route.can()) {
+          this.log.warn(
+            `Access to page '${route.name}' is forbidden by can() check`,
+          )
           // if the page is not accessible, return 403
           reply.status = 403;
           reply.headers["content-type"] = "text/plain";
@@ -383,6 +386,9 @@ export class ReactServerProvider {
       this.serverTimingProvider.endTiming("createLayers");
 
       if (redirect) {
+        this.log.debug("Resolver resulted in redirection", {
+          redirect,
+        });
         return reply.redirect(redirect);
       }
 
@@ -402,9 +408,14 @@ export class ReactServerProvider {
             ? html.redirect
             : this.pageApi.href(html.redirect),
         );
+        this.log.debug("Rendering resulted in redirection", {
+          redirect: html.redirect,
+        });
         return;
       }
 
+      this.log.trace("Page rendered to HTML successfully");
+
       const event = {
         request: serverRequest,
         state,

package/src/core/services/ReactRouter.ts

@@ -51,6 +51,22 @@ export class ReactRouter<T extends object> {
     return isActive;
   }
 
+  public node(
+    name: keyof VirtualRouter<T> | string,
+    config: {
+      params?: Record<string, any>;
+      query?: Record<string, any>;
+    } = {},
+  ) {
+    const page = this.pageApi.page(name as string);
+    return {
+      ...page,
+      label: page.label ?? page.name,
+      href: this.path(name, config),
+      children: undefined,
+    }
+  }
+
   public path(
     name: keyof VirtualRouter<T> | string,
     config: {

package/src/head/interfaces/Head.ts

@@ -43,4 +43,5 @@ export interface SimpleHead {
   htmlAttributes?: Record<string, string>;
   bodyAttributes?: Record<string, string>;
   meta?: Array<{ name: string; content: string }>;
+  link?: Array<{ rel: string; href: string }>;
 }

package/src/head/primitives/$head.ts

@@ -18,7 +18,10 @@ export type HeadPrimitiveOptions = Head | (() => Head);
 export class HeadPrimitive extends Primitive<HeadPrimitiveOptions> {
   protected readonly provider = $inject(HeadProvider);
   protected onInit() {
-    this.provider.global = this.options;
+    this.provider.global = [
+      ...(this.provider.global ?? []),
+      this.options,
+    ];
   }
 }
 

package/src/head/providers/BrowserHeadProvider.ts

@@ -101,5 +101,18 @@ export class BrowserHeadProvider {
         }
       }
     }
+
+    if (head.link) {
+      for (const it of head.link) {
+        const { rel, href } = it;
+        let link = document.querySelector(`link[rel="${rel}"][href="${href}"]`);
+        if (!link) {
+          link = document.createElement("link");
+          link.setAttribute("rel", rel);
+          link.setAttribute("href", href);
+          document.head.appendChild(link);
+        }
+      }
+    }
   }
 }

package/src/head/providers/HeadProvider.ts

@@ -2,21 +2,23 @@ import type { PageRoute, ReactRouterState } from "@alepha/react";
 import type { Head } from "../interfaces/Head.ts";
 
 export class HeadProvider {
-  public global?: Head | (() => Head);
-
-  protected getGlobalHead(): Head | undefined {
-    if (typeof this.global === "function") {
-      return this.global();
-    }
-    return this.global;
-  }
+  public global?: Array<Head | (() => Head)> = [];
 
   public fillHead(state: ReactRouterState) {
     state.head = {
       ...state.head,
-      ...this.getGlobalHead(),
     };
 
+    for (const h of this.global ?? []) {
+      const head =
+        typeof h === "function" ? h() : h;
+      state.head = {
+        ...state.head,
+        ...head,
+        meta: [...(state.head.meta ?? []), ...(head.meta ?? [])],
+      };
+    }
+
     for (const layer of state.layers) {
       if (layer.route?.head && !layer.error) {
         this.fillHeadByPage(layer.route, state, layer.props ?? {});

package/src/head/providers/ServerHeadProvider.ts

@@ -62,6 +62,12 @@ export class ServerHeadProvider {
       }
     }
 
+    if (head.link) {
+      for (const link of head.link) {
+        headContent += `<link rel="${this.escapeHtml(link.rel)}" href="${this.escapeHtml(link.href)}">\n`;
+      }
+    }
+
     // Inject into <head>...</head>
     result = result.replace(
       /<head([^>]*)>(.*?)<\/head>/is,