@alepha/react 0.13.1 → 0.13.3

package/src/core/providers/ReactServerProvider.ts

@@ -23,9 +23,9 @@ import { ServerStaticProvider } from "alepha/server/static";
 import { renderToString } from "react-dom/server";
 import {
   $page,
-  type PageDescriptorRenderOptions,
-  type PageDescriptorRenderResult,
-} from "../descriptors/$page.ts";
+  type PagePrimitiveRenderOptions,
+  type PagePrimitiveRenderResult,
+} from "../primitives/$page.ts";
 import { Redirection } from "../errors/Redirection.ts";
 import type { ReactHydrationState } from "./ReactBrowserProvider.ts";
 import {
@@ -112,12 +112,12 @@ export class ReactServerProvider {
   public readonly onConfigure = $hook({
     on: "configure",
     handler: async () => {
-      const pages = this.alepha.descriptors($page);
+      const pages = this.alepha.primitives($page);
 
       const ssrEnabled =
         pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
 
-      this.alepha.state.set("alepha.react.server.ssr", ssrEnabled);
+      this.alepha.store.set("alepha.react.server.ssr", ssrEnabled);
 
       // development mode
       if (this.alepha.isViteDev()) {
@@ -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 descriptor provider for now (shared by browser and server)
-        method: "GET",
-        path: page.match,
-        handler: this.createHandler(page, templateLoader),
-      });
     }
   }
 
@@ -257,8 +255,8 @@ export class ReactServerProvider {
    */
   public async render(
     name: string,
-    options: PageDescriptorRenderOptions = {},
-  ): Promise<PageDescriptorRenderResult> {
+    options: PagePrimitiveRenderOptions = {},
+  ): Promise<PagePrimitiveRenderResult> {
     const page = this.pageApi.page(name);
     const url = new URL(this.pageApi.url(name, options));
     const entry: Partial<ReactRouterState> = {
@@ -289,7 +287,7 @@ export class ReactServerProvider {
     }
 
     if (!options.html) {
-      this.alepha.state.set("alepha.react.router.state", state);
+      this.alepha.store.set("alepha.react.router.state", state);
 
       return {
         state,
@@ -339,8 +337,10 @@ export class ReactServerProvider {
 
       const state = entry as ReactRouterState;
 
+      state.name = route.name;
+
       if (this.alepha.has(ServerLinksProvider)) {
-        this.alepha.state.set(
+        this.alepha.store.set(
           "alepha.server.request.apiLinks",
           await this.alepha.inject(ServerLinksProvider).getUserApiLinks({
             user: (serverRequest as any).user, // TODO: fix type
@@ -349,9 +349,12 @@ export class ReactServerProvider {
         );
       }
 
-      let target: PageRoute | undefined = route; // TODO: move to PageDescriptorProvider
+      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,
@@ -431,7 +442,7 @@ export class ReactServerProvider {
     const element = this.pageApi.root(state);
 
     // attach react router state to the http request context
-    this.alepha.state.set("alepha.react.router.state", state);
+    this.alepha.store.set("alepha.react.router.state", state);
 
     this.serverTimingProvider.beginTiming("renderToString");
     let app = "";

package/src/core/services/ReactPageServerService.ts

@@ -1,9 +1,9 @@
 import { $inject, AlephaError } from "alepha";
 import { ServerProvider } from "alepha/server";
 import type {
-  PageDescriptorRenderOptions,
-  PageDescriptorRenderResult,
-} from "../descriptors/$page.ts";
+  PagePrimitiveRenderOptions,
+  PagePrimitiveRenderResult,
+} from "../primitives/$page.ts";
 import { ReactServerProvider } from "../providers/ReactServerProvider.ts";
 import { ReactPageService } from "./ReactPageService.ts";
 
@@ -13,14 +13,14 @@ export class ReactPageServerService extends ReactPageService {
 
   public async render(
     name: string,
-    options: PageDescriptorRenderOptions = {},
-  ): Promise<PageDescriptorRenderResult> {
+    options: PagePrimitiveRenderOptions = {},
+  ): Promise<PagePrimitiveRenderResult> {
     return this.reactServerProvider.render(name, options);
   }
 
   public async fetch(
     pathname: string,
-    options: PageDescriptorRenderOptions = {},
+    options: PagePrimitiveRenderOptions = {},
   ): Promise<{
     html: string;
     response: Response;

package/src/core/services/ReactPageService.ts

@@ -1,13 +1,13 @@
 import { AlephaError } from "alepha";
 import type {
-  PageDescriptorRenderOptions,
-  PageDescriptorRenderResult,
-} from "../descriptors/$page.ts";
+  PagePrimitiveRenderOptions,
+  PagePrimitiveRenderResult,
+} from "../primitives/$page.ts";
 
 export class ReactPageService {
   public fetch(
     pathname: string,
-    options: PageDescriptorRenderOptions = {},
+    options: PagePrimitiveRenderOptions = {},
   ): Promise<{
     html: string;
     response: Response;
@@ -17,8 +17,8 @@ export class ReactPageService {
 
   public render(
     name: string,
-    options: PageDescriptorRenderOptions = {},
-  ): Promise<PageDescriptorRenderResult> {
+    options: PagePrimitiveRenderOptions = {},
+  ): Promise<PagePrimitiveRenderResult> {
     throw new AlephaError("Render is not available for this environment.");
   }
 }

package/src/core/services/ReactRouter.ts

@@ -1,5 +1,5 @@
 import { $inject, Alepha } from "alepha";
-import type { PageDescriptor } from "../descriptors/$page.ts";
+import type { PagePrimitive } from "../primitives/$page.ts";
 import {
   ReactBrowserProvider,
   type RouterGoOptions,
@@ -15,7 +15,7 @@ export class ReactRouter<T extends object> {
   protected readonly pageApi = $inject(ReactPageProvider);
 
   public get state(): ReactRouterState {
-    return this.alepha.state.get("alepha.react.router.state")!;
+    return this.alepha.store.get("alepha.react.router.state")!;
   }
 
   public get pages() {
@@ -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: {
@@ -220,5 +236,5 @@ export class ReactRouter<T extends object> {
 }
 
 export type VirtualRouter<T> = {
-  [K in keyof T as T[K] extends PageDescriptor ? K : never]: T[K];
+  [K in keyof T as T[K] extends PagePrimitive ? K : never]: T[K];
 };

package/src/head/index.browser.ts

@@ -1,11 +1,11 @@
 import { AlephaReact } from "@alepha/react";
 import { $module } from "alepha";
-import { $head } from "./descriptors/$head.ts";
+import { $head } from "./primitives/$head.ts";
 import { BrowserHeadProvider } from "./providers/BrowserHeadProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export * from "./descriptors/$head.ts";
+export * from "./primitives/$head.ts";
 export * from "./hooks/useHead.ts";
 export * from "./interfaces/Head.ts";
 export * from "./providers/BrowserHeadProvider.ts";
@@ -20,6 +20,6 @@ export * from "./providers/BrowserHeadProvider.ts";
  */
 export const AlephaReactHead = $module({
   name: "alepha.react.head",
-  descriptors: [$head],
+  primitives: [$head],
   services: [AlephaReact, BrowserHeadProvider],
 });

package/src/head/index.ts

@@ -5,13 +5,13 @@ import {
   type TPropsParentDefault,
 } from "@alepha/react";
 import { $module } from "alepha";
-import { $head } from "./descriptors/$head.ts";
+import { $head } from "./primitives/$head.ts";
 import type { Head } from "./interfaces/Head.ts";
 import { ServerHeadProvider } from "./providers/ServerHeadProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export * from "./descriptors/$head.ts";
+export * from "./primitives/$head.ts";
 export * from "./hooks/useHead.ts";
 export * from "./interfaces/Head.ts";
 export * from "./providers/ServerHeadProvider.ts";
@@ -19,7 +19,7 @@ export * from "./providers/ServerHeadProvider.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 declare module "@alepha/react" {
-  interface PageDescriptorOptions<
+  interface PagePrimitiveOptions<
     TConfig extends PageConfigSchema = PageConfigSchema,
     TProps extends object = TPropsDefault,
     TPropsParent extends object = TPropsParentDefault,
@@ -42,6 +42,6 @@ declare module "@alepha/react" {
  */
 export const AlephaReactHead = $module({
   name: "alepha.react.head",
-  descriptors: [$head],
+  primitives: [$head],
   services: [AlephaReact, ServerHeadProvider],
 });

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/{descriptors → primitives}/$head.ts

@@ -1,25 +1,28 @@
-import { $inject, createDescriptor, Descriptor, KIND } from "alepha";
+import { $inject, createPrimitive, Primitive, KIND } from "alepha";
 import type { Head } from "../interfaces/Head.ts";
 import { HeadProvider } from "../providers/HeadProvider.ts";
 
 /**
  * Set global `<head>` options for the application.
  */
-export const $head = (options: HeadDescriptorOptions) => {
-  return createDescriptor(HeadDescriptor, options);
+export const $head = (options: HeadPrimitiveOptions) => {
+  return createPrimitive(HeadPrimitive, options);
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export type HeadDescriptorOptions = Head | (() => Head);
+export type HeadPrimitiveOptions = Head | (() => Head);
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export class HeadDescriptor extends Descriptor<HeadDescriptorOptions> {
+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,
+    ];
   }
 }
 
-$head[KIND] = HeadDescriptor;
+$head[KIND] = HeadPrimitive;

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,

package/src/i18n/hooks/useI18n.ts

@@ -1,5 +1,5 @@
 import { useInject, useStore } from "@alepha/react";
-import type { DictionaryDescriptor } from "../descriptors/$dictionary.ts";
+import type { DictionaryPrimitive } from "../primitives/$dictionary.ts";
 import { I18nProvider } from "../providers/I18nProvider.ts";
 
 /**
@@ -14,5 +14,5 @@ export const useI18n = <
 };
 
 export type ServiceDictionary<T extends object> = {
-  [K in keyof T]: T[K] extends DictionaryDescriptor<infer U> ? U : never;
+  [K in keyof T]: T[K] extends DictionaryPrimitive<infer U> ? U : never;
 };

package/src/i18n/index.ts

@@ -1,12 +1,12 @@
 import { $module } from "alepha";
-import { $dictionary } from "./descriptors/$dictionary.ts";
+import { $dictionary } from "./primitives/$dictionary.ts";
 import { I18nProvider } from "./providers/I18nProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 export type { LocalizeProps } from "./components/Localize.tsx";
 export { default as Localize } from "./components/Localize.tsx";
-export * from "./descriptors/$dictionary.ts";
+export * from "./primitives/$dictionary.ts";
 export * from "./hooks/useI18n.ts";
 export * from "./providers/I18nProvider.ts";
 
@@ -29,6 +29,6 @@ declare module "alepha" {
  */
 export const AlephaReactI18n = $module({
   name: "alepha.react.i18n",
-  descriptors: [$dictionary],
+  primitives: [$dictionary],
   services: [I18nProvider],
 });

package/src/i18n/{descriptors → primitives}/$dictionary.ts

@@ -1,4 +1,4 @@
-import { $inject, type Async, createDescriptor, Descriptor, KIND } from "alepha";
+import { $inject, type Async, createPrimitive, Primitive, KIND } from "alepha";
 import { I18nProvider } from "../providers/I18nProvider.ts";
 
 /**
@@ -33,14 +33,14 @@ import { I18nProvider } from "../providers/I18nProvider.ts";
  * ```
  */
 export const $dictionary = <T extends Record<string, string>>(
-  options: DictionaryDescriptorOptions<T>,
-): DictionaryDescriptor<T> => {
-  return createDescriptor(DictionaryDescriptor<T>, options);
+  options: DictionaryPrimitiveOptions<T>,
+): DictionaryPrimitive<T> => {
+  return createPrimitive(DictionaryPrimitive<T>, options);
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export interface DictionaryDescriptorOptions<T extends Record<string, string>> {
+export interface DictionaryPrimitiveOptions<T extends Record<string, string>> {
   lang?: string;
   name?: string;
   lazy: () => Async<{ default: T }>;
@@ -48,9 +48,9 @@ export interface DictionaryDescriptorOptions<T extends Record<string, string>> {
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export class DictionaryDescriptor<
+export class DictionaryPrimitive<
   T extends Record<string, string>,
-> extends Descriptor<DictionaryDescriptorOptions<T>> {
+> extends Primitive<DictionaryPrimitiveOptions<T>> {
   protected provider = $inject(I18nProvider);
   protected onInit() {
     this.provider.registry.push({
@@ -66,4 +66,4 @@ export class DictionaryDescriptor<
   }
 }
 
-$dictionary[KIND] = DictionaryDescriptor;
+$dictionary[KIND] = DictionaryPrimitive;

package/src/i18n/providers/I18nProvider.ts

@@ -54,7 +54,7 @@ export class I18nProvider<
     on: "server:onRequest",
     priority: "last",
     handler: async ({ request }) => {
-      this.alepha.state.set("alepha.react.i18n.lang", this.cookie.get(request));
+      this.alepha.store.set("alepha.react.i18n.lang", this.cookie.get(request));
     },
   });
 
@@ -65,7 +65,7 @@ export class I18nProvider<
         // get cookie lang
         const cookieLang = this.cookie.get();
         if (cookieLang) {
-          this.alepha.state.set("alepha.react.i18n.lang", cookieLang);
+          this.alepha.store.set("alepha.react.i18n.lang", cookieLang);
         }
 
         for (const item of this.registry) {
@@ -110,7 +110,7 @@ export class I18nProvider<
       this.cookie.set(lang);
     }
 
-    this.alepha.state.set("alepha.react.i18n.lang", lang);
+    this.alepha.store.set("alepha.react.i18n.lang", lang);
     this.refreshLocale();
   };
 
@@ -132,7 +132,7 @@ export class I18nProvider<
         this.refreshLocale();
 
         if (hasChanged) {
-          this.alepha.state.set("alepha.react.i18n.lang", value);
+          this.alepha.store.set("alepha.react.i18n.lang", value);
         }
       }
     },
@@ -140,7 +140,7 @@ export class I18nProvider<
 
   public get lang(): string {
     return (
-      this.alepha.state.get("alepha.react.i18n.lang") ||
+      this.alepha.store.get("alepha.react.i18n.lang") ||
       this.options.fallbackLang
     );
   }

package/src/websocket/hooks/useRoom.tsx

@@ -1,6 +1,6 @@
 import { useAlepha, useInject } from "@alepha/react";
 import type { Static } from "alepha";
-import type { ChannelDescriptor, TWSObject } from "alepha/websocket";
+import type { ChannelPrimitive, TWSObject } from "alepha/websocket";
 import { WebSocketClient } from "alepha/websocket";
 import { useEffect, useRef, useState } from "react";
 
@@ -17,9 +17,9 @@ export interface UseRoomOptions<
   roomId: string;
 
   /**
-   * Channel descriptor defining the schemas
+   * Channel primitive defining the schemas
    */
-  channel: ChannelDescriptor<TClient, TServer>;
+  channel: ChannelPrimitive<TClient, TServer>;
 
   /**
    * Handler for incoming messages from the server