@alepha/react 0.6.1 → 0.6.2

package/dist/index.js

@@ -1,11 +1,12 @@
 import { $logger, $inject, Alepha, t, $hook, autoInject } from '@alepha/core';
-import { FastifyCookieProvider, $cookie, $route, BadRequestError, ServerProvider, ServerModule, ServerLinksProvider } from '@alepha/server';
-import { $ as $auth, R as Router, a as $page, A as Auth, P as PageDescriptorProvider } from './useAuth-i7wbKVrt.js';
-export { L as Link, N as NestedView, l as ReactBrowserProvider, m as RedirectionError, b as RouterContext, d as RouterHookApi, c as RouterLayerContext, p as pageDescriptorKey, j as useActive, k as useAuth, e as useClient, u as useInject, f as useQueryParams, g as useRouter, h as useRouterEvents, i as useRouterState } from './useAuth-i7wbKVrt.js';
+import { ServerCookieProvider, $cookie, $route, BadRequestError, ServerProvider, ServerLinksProvider, ServerModule } from '@alepha/server';
+import { $ as $auth, R as Router, a as $page, A as Auth, P as PageDescriptorProvider } from './useAuth-Ps01oe8e.js';
+export { L as Link, N as NestedView, l as ReactBrowserProvider, m as RedirectionError, b as RouterContext, d as RouterHookApi, c as RouterLayerContext, p as pageDescriptorKey, j as useActive, k as useAuth, e as useClient, u as useInject, f as useQueryParams, g as useRouter, h as useRouterEvents, i as useRouterState } from './useAuth-Ps01oe8e.js';
 import { discovery, allowInsecureRequests, refreshTokenGrant, randomPKCECodeVerifier, calculatePKCECodeChallenge, buildAuthorizationUrl, authorizationCodeGrant, buildEndSessionUrl } from 'openid-client';
 import { existsSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
+import { load } from 'cheerio';
 import { renderToString } from 'react-dom/server';
 import 'react/jsx-runtime';
 import 'react';
@@ -15,7 +16,7 @@ import 'path-to-regexp';
 class ReactAuthProvider {
   log = $logger();
   alepha = $inject(Alepha);
-  fastifyCookieProvider = $inject(FastifyCookieProvider);
+  serverCookieProvider = $inject(ServerCookieProvider);
   authProviders = [];
   authorizationCode = $cookie({
     name: "authorizationCode",
@@ -53,23 +54,30 @@ class ReactAuthProvider {
     name: "configure",
     handler: async () => {
       const auths = this.alepha.getDescriptorValues($auth);
-      for (const auth of auths) {
-        const options = auth.value.options;
+      for (const { value, key, instance } of auths) {
+        const options = value.options;
         if (options.oidc) {
+          this.log.debug(
+            `Discover OIDC auth provider -> ${options.oidc.issuer}`
+          );
+          const client = await discovery(
+            new URL(options.oidc.issuer),
+            options.oidc.clientId,
+            {
+              client_secret: options.oidc.clientSecret
+            },
+            void 0,
+            {
+              execute: [allowInsecureRequests]
+            }
+          );
+          instance[key].jwks = () => {
+            return client.serverMetadata().jwks_uri;
+          };
           this.authProviders.push({
-            name: options.name ?? auth.key,
+            name: options.name ?? key,
             redirectUri: options.oidc.redirectUri ?? "/api/_oauth/callback",
-            client: await discovery(
-              new URL(options.oidc.issuer),
-              options.oidc.clientId,
-              {
-                client_secret: options.oidc.clientSecret
-              },
-              void 0,
-              {
-                execute: [allowInsecureRequests]
-              }
-            )
+            client
           });
         }
       }
@@ -78,21 +86,19 @@ class ReactAuthProvider {
   /**
    * Configure Fastify to forward Session Access Token to Header Authorization.
    */
-  configureFastify = $hook({
-    name: "configure:fastify",
-    after: this.fastifyCookieProvider,
-    handler: async (app) => {
-      app.addHook("onRequest", async (req) => {
-        if (req.cookies && !this.isViteFile(req.url) && !!this.authProviders.length) {
-          const tokens = await this.refresh(req.cookies);
-          if (tokens) {
-            req.headers.authorization = `Bearer ${tokens.access_token}`;
-          }
-          if (this.user.get(req.cookies) && !this.tokens.get(req.cookies)) {
-            this.user.del(req.cookies);
-          }
+  onRequest = $hook({
+    name: "server:onRequest",
+    after: this.serverCookieProvider,
+    handler: async ({ request }) => {
+      if (request.cookies && !this.isViteFile(request.url.pathname) && !!this.authProviders.length) {
+        const tokens = await this.refresh(request.cookies);
+        if (tokens) {
+          request.headers.rep("authorization", `Bearer ${tokens.access_token}`);
         }
-      });
+        if (this.user.get(request.cookies) && !this.tokens.get(request.cookies)) {
+          this.user.del(request.cookies);
+        }
+      }
     }
   });
   /**
@@ -121,7 +127,9 @@ class ReactAuthProvider {
             });
             return newTokens;
           } catch (e) {
-            this.log.warn(e, "Failed to refresh token -");
+            if (e instanceof Error) {
+              this.log.warn("Failed to refresh token", e.message);
+            }
           }
         }
         this.tokens.del(cookies);
@@ -315,13 +323,13 @@ const envSchema$1 = t.object({
   REACT_SERVER_DIST: t.string({ default: "client" }),
   REACT_SERVER_PREFIX: t.string({ default: "" }),
   REACT_SSR_ENABLED: t.boolean({ default: false }),
-  REACT_SSR_OUTLET: t.string({ default: "<!--ssr-outlet-->" })
+  REACT_ROOT_ID: t.string({ default: "root" })
 });
 class ReactServerProvider {
   log = $logger();
   alepha = $inject(Alepha);
   router = $inject(Router);
-  server = $inject(ServerProvider);
+  serverProvider = $inject(ServerProvider);
   env = $inject(envSchema$1);
   configure = $hook({
     name: "configure",
@@ -329,7 +337,9 @@ class ReactServerProvider {
       await this.configureRoutes();
     }
   });
+  id = Math.random().toString(36).substring(2, 7);
   async configureRoutes() {
+    this.alepha.state("ReactServerProvider.ssr", false);
     if (this.alepha.isTest()) {
       this.processDescriptors();
     }
@@ -337,14 +347,15 @@ class ReactServerProvider {
       return;
     }
     if (process.env.VITE_ALEPHA_DEV === "true") {
+      const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
       this.log.info("SSR (vite) OK");
-      const templateUrl = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}/index.html`;
-      this.log.debug(`Fetch template from ${templateUrl}`);
+      this.alepha.state("ReactServerProvider.ssr", true);
+      const templateUrl = `${url}/index.html`;
       const route2 = this.createHandler(
-        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0).then((it) => it ? this.checkTemplate(it) : void 0)
+        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0)
       );
-      await this.server.route(route2);
-      await this.server.route({
+      await this.serverProvider.route(route2);
+      await this.serverProvider.route({
         ...route2,
         url: "*"
       });
@@ -366,37 +377,16 @@ class ReactServerProvider {
         this.log.warn("Missing static files, SSR will be disabled");
         return;
       }
-      await this.server.serve(this.createStaticHandler(root));
+      await this.serverProvider.serve(this.createStaticHandler(root));
     }
-    const template = this.checkTemplate(
-      this.alepha.state("ReactServerProvider.template") ?? await readFile(join(root, "index.html"), "utf-8")
-    );
+    const template = this.alepha.state("ReactServerProvider.template") ?? await readFile(join(root, "index.html"), "utf-8");
     const route = this.createHandler(async () => template);
-    await this.server.route(route);
-    await this.server.route({
+    await this.serverProvider.route(route);
+    await this.serverProvider.route({
       ...route,
       url: "*"
     });
-  }
-  /**
-   * Check if the template contains the outlet.
-   *
-   * @param template
-   * @protected
-   */
-  checkTemplate(template) {
-    if (!template.includes(this.env.REACT_SSR_OUTLET)) {
-      if (!template.includes('<div id="root"></div>')) {
-        throw new Error(
-          `Missing React SSR outlet in index.html, please add ${this.env.REACT_SSR_OUTLET} to the index.html file`
-        );
-      }
-      return template.replace(
-        `<div id="root"></div>`,
-        `<div id="root">${this.env.REACT_SSR_OUTLET}</div>`
-      );
-    }
-    return template;
+    this.alepha.state("ReactServerProvider.ssr", true);
   }
   /**
    *
@@ -437,6 +427,10 @@ class ReactServerProvider {
       }
     };
   }
+  /**
+   *
+   * @protected
+   */
   processDescriptors() {
     const pages = this.alepha.getDescriptorValues($page);
     for (const { key, instance, value } of pages) {
@@ -477,7 +471,20 @@ class ReactServerProvider {
    * @param template
    * @param args
    */
-  async ssr(url, template = this.env.REACT_SSR_OUTLET, args = {}) {
+  async ssr(url, template, args = {}) {
+    const hasAuth = this.alepha.has(ReactAuthProvider);
+    if (!args.user && args.cookies && hasAuth) {
+      const auth = this.alepha.get(ReactAuthProvider);
+      args.user = auth.user.get(args.cookies);
+      if (args.user) {
+        args.user.roles = [];
+      }
+    }
+    if (this.alepha.has(ServerLinksProvider) && hasAuth) {
+      const srv = this.alepha.get(ServerLinksProvider);
+      args.links = await srv.links();
+      this.alepha.als.set("links", args.links);
+    }
     const { element, layers, redirect, context } = await this.router.render(
       url.pathname + url.search,
       {
@@ -492,42 +499,67 @@ class ReactServerProvider {
         }
       });
     }
-    const appHtml = renderToString(element);
+    const html = renderToString(element);
+    const $ = load(template);
     const script = `<script>window.__ssr=${JSON.stringify({
+      links: args.links,
       layers: layers.map((it) => ({
         ...it,
+        error: it.error ? {
+          ...it.error,
+          name: it.error.name,
+          message: it.error.message,
+          stack: it.error.stack
+          // TODO: Hide stack in production ?
+        } : void 0,
         index: void 0,
         path: void 0,
         element: void 0
       }))
     })}<\/script>`;
-    const index = template.indexOf("</body>");
-    if (index !== -1) {
-      template = template.slice(0, index) + script + template.slice(index);
+    const body = $("body");
+    const root = body.find(`#${this.env.REACT_ROOT_ID}`);
+    if (root.length) {
+      root.html(html);
+    } else {
+      body.prepend(`<div id="${this.env.REACT_ROOT_ID}">${html}</div>`);
     }
-    if (context.helmet) {
-      template = this.renderHelmetContext(template, context.helmet);
+    body.append(script);
+    if (context.head) {
+      this.renderHeadContext($, context.head);
     }
-    template = template.replace(this.env.REACT_SSR_OUTLET, appHtml);
-    return new Response(template, {
+    return new Response($.html(), {
       headers: { "Content-Type": "text/html" }
     });
   }
-  renderHelmetContext(template, helmetContext) {
-    if (helmetContext.title) {
-      if (template.includes("<title>")) {
-        template = template.replace(
-          /<title>.*<\/title>/,
-          `<title>${helmetContext.title}</title>`
-        );
-      } else {
-        template = template.replace(
-          "</head>",
-          `<title>${helmetContext.title}</title></head>`
-        );
+  renderHeadContext($, headContext) {
+    const head = $("head");
+    if (head) {
+      if (headContext.title) {
+        head.find("title").remove();
+        head.append(`<title>${headContext.title}</title>`);
+      }
+      if (headContext.meta) {
+        for (const it of headContext.meta) {
+          const meta = head.find(`meta[name="${it.name}"]`);
+          if (meta.length) {
+            meta.attr("content", it.content);
+          } else {
+            head.append(`<meta name="${it.name}" content="${it.content}" />`);
+          }
+        }
+      }
+    }
+    if (headContext.htmlAttributes) {
+      for (const [key, value] of Object.entries(headContext.htmlAttributes)) {
+        $("html").attr(key, value);
+      }
+    }
+    if (headContext.bodyAttributes) {
+      for (const [key, value] of Object.entries(headContext.bodyAttributes)) {
+        $("body").attr(key, value);
       }
     }
-    return template;
   }
 }
 

package/dist/{useAuth-DOVx2kqa.cjs → useAuth-B9ypF48n.cjs}

@@ -12,7 +12,10 @@ const $auth = (options) => {
   core.__descriptor(KEY);
   return {
     [core.KIND]: KEY,
-    options
+    options,
+    jwks: () => {
+      return options.oidc?.issuer ?? "";
+    }
   };
 };
 $auth[core.KIND] = KEY;
@@ -95,10 +98,7 @@ class Router extends core.EventEmitter {
           state,
           router: this,
           alepha: this.alepha,
-          args: {
-            user: context.user,
-            cookies: context.cookies
-          }
+          args: context
         }
       },
       state.layers[0]?.element
@@ -265,6 +265,7 @@ class Router extends core.EventEmitter {
         });
         if (prev === curr) {
           it.props = previous[i].props;
+          it.error = previous[i].error;
           context = {
             ...context,
             ...it.props
@@ -307,7 +308,7 @@ class Router extends core.EventEmitter {
       for (const key of Object.keys(params2)) {
         params2[key] = String(params2[key]);
       }
-      if (it.route.helmet && renderContext) {
+      if (it.route.head && renderContext && !it.error) {
         this.mergeRenderContext(it.route, renderContext, {
           ...props,
           ...context
@@ -318,13 +319,14 @@ class Router extends core.EventEmitter {
       const path = acc.replace(/\/+/, "/");
       if (it.error) {
         const errorHandler = this.getErrorHandler(it.route);
-        const element = errorHandler ? errorHandler({
+        const element = await (errorHandler ? errorHandler({
           ...it.config,
           error: it.error,
           url
-        }) : this.renderError(it.error);
+        }) : this.renderError(it.error));
         layers.push({
           props,
+          error: it.error,
           name: it.route.name,
           part: it.route.path,
           config: it.config,
@@ -388,15 +390,32 @@ class Router extends core.EventEmitter {
    * @protected
    */
   mergeRenderContext(page, ctx, props) {
-    if (page.helmet) {
-      const helmet = typeof page.helmet === "function" ? page.helmet(props) : page.helmet;
-      if (helmet.title) {
-        ctx.helmet ??= {};
-        if (ctx.helmet?.title) {
-          ctx.helmet.title = `${helmet.title} - ${ctx.helmet.title}`;
+    if (page.head) {
+      ctx.head ??= {};
+      const head = typeof page.head === "function" ? page.head(props, ctx.head) : page.head;
+      if (head.title) {
+        ctx.head ??= {};
+        if (ctx.head.titleSeparator) {
+          ctx.head.title = `${head.title}${ctx.head.titleSeparator}${ctx.head.title}`;
         } else {
-          ctx.helmet.title = helmet.title;
+          ctx.head.title = head.title;
         }
+        ctx.head.titleSeparator = head.titleSeparator;
+      }
+      if (head.htmlAttributes) {
+        ctx.head.htmlAttributes = {
+          ...ctx.head.htmlAttributes,
+          ...head.htmlAttributes
+        };
+      }
+      if (head.bodyAttributes) {
+        ctx.head.bodyAttributes = {
+          ...ctx.head.bodyAttributes,
+          ...head.bodyAttributes
+        };
+      }
+      if (head.meta) {
+        ctx.head.meta = [...ctx.head.meta ?? [], ...head.meta ?? []];
       }
     }
   }
@@ -565,10 +584,14 @@ class PageDescriptorProvider {
   }
 }
 
+const envSchema = core.t.object({
+  REACT_ROOT_ID: core.t.string({ default: "root" })
+});
 class ReactBrowserProvider {
   log = core.$logger();
   client = core.$inject(server.HttpClient);
   router = core.$inject(Router);
+  env = core.$inject(envSchema);
   root;
   transitioning;
   state = {
@@ -656,12 +679,49 @@ class ReactBrowserProvider {
       return await this.render({ url: result.redirect });
     }
     this.transitioning = void 0;
-    return { url };
+    return { url, context: result.context };
   }
-  renderHelmetContext(ctx) {
+  /**
+   * Render the helmet context.
+   *
+   * @param ctx
+   * @protected
+   */
+  renderHeadContext(ctx) {
     if (ctx.title) {
       this.document.title = ctx.title;
     }
+    if (ctx.bodyAttributes) {
+      for (const [key, value] of Object.entries(ctx.bodyAttributes)) {
+        if (value) {
+          this.document.body.setAttribute(key, value);
+        } else {
+          this.document.body.removeAttribute(key);
+        }
+      }
+    }
+    if (ctx.htmlAttributes) {
+      for (const [key, value] of Object.entries(ctx.htmlAttributes)) {
+        if (value) {
+          this.document.documentElement.setAttribute(key, value);
+        } else {
+          this.document.documentElement.removeAttribute(key);
+        }
+      }
+    }
+    if (ctx.meta) {
+      for (const [key, value] of Object.entries(ctx.meta)) {
+        const meta = this.document.querySelector(`meta[name="${key}"]`);
+        if (meta) {
+          meta.setAttribute("content", value.content);
+        } else {
+          const newMeta = this.document.createElement("meta");
+          newMeta.setAttribute("name", key);
+          newMeta.setAttribute("content", value.content);
+          this.document.head.appendChild(newMeta);
+        }
+      }
+    }
   }
   /**
    * Get embedded layers from the server.
@@ -682,13 +742,13 @@ class ReactBrowserProvider {
    * @protected
    */
   getRootElement() {
-    const root = this.document.getElementById("root");
+    const root = this.document.getElementById(this.env.REACT_ROOT_ID);
     if (root) {
       return root;
     }
     const div = this.document.createElement("div");
-    div.id = "root";
-    this.document.body.appendChild(div);
+    div.id = this.env.REACT_ROOT_ID;
+    this.document.body.prepend(div);
     return div;
   }
   getUserFromCookies() {
@@ -713,7 +773,13 @@ class ReactBrowserProvider {
     handler: async () => {
       const cache = this.getHydrationState();
       const previous = cache?.layers ?? [];
-      await this.render({ previous });
+      if (cache?.links) {
+        this.client.links = cache.links;
+      }
+      const { context } = await this.render({ previous });
+      if (context.head) {
+        this.renderHeadContext(context.head);
+      }
       const element = this.router.root(this.state, {
         user: cache?.user ?? this.getUserFromCookies()
       });
@@ -721,40 +787,30 @@ class ReactBrowserProvider {
         this.root = client.hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
       } else {
-        this.root = client.createRoot(this.getRootElement());
+        this.root ??= client.createRoot(this.getRootElement());
         this.root.render(element);
         this.log.info("Created root element");
       }
       window.addEventListener("popstate", () => {
         this.render();
       });
-      this.router.on("end", ({ context }) => {
-        if (context.helmet) {
-          this.renderHelmetContext(context.helmet);
+      this.router.on("end", ({ context: context2 }) => {
+        if (context2.head) {
+          this.renderHeadContext(context2.head);
         }
       });
     }
   });
-  /**
-   *
-   * @protected
-   */
-  stop = core.$hook({
-    name: "stop",
-    handler: async () => {
-      if (this.root) {
-        this.root.unmount();
-        this.log.info("Unmounted root element");
-      }
-    }
-  });
 }
 
 class Auth {
   alepha = core.$inject(core.Alepha);
   log = core.$logger();
   client = core.$inject(server.HttpClient);
-  api = "/api/_oauth/login";
+  slugs = {
+    login: "/api/_oauth/login",
+    logout: "/api/_oauth/logout"
+  };
   start = core.$hook({
     name: "start",
     handler: async () => {
@@ -769,16 +825,16 @@ class Auth {
     if (this.alepha.isBrowser()) {
       const browser = this.alepha.get(ReactBrowserProvider);
       const redirect = browser.transitioning ? window.location.origin + browser.transitioning.to : window.location.href;
-      window.location.href = `${this.api}?redirect=${redirect}`;
+      window.location.href = `${this.slugs.login}?redirect=${redirect}`;
       if (browser.transitioning) {
         throw new RedirectionError(browser.state.pathname);
       }
       return;
     }
-    throw new RedirectionError(this.api);
+    throw new RedirectionError(this.slugs.login);
   };
   logout = () => {
-    window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
+    window.location.href = `${this.slugs.logout}?redirect=${encodeURIComponent(window.location.origin)}`;
   };
 }
 
@@ -908,8 +964,18 @@ const useRouter = () => {
 
 const Link = (props) => {
   React.useContext(RouterContext);
+  const to = typeof props.to === "string" ? props.to : props.to.options.path;
+  if (!to) {
+    return null;
+  }
+  const can = typeof props.to === "string" ? void 0 : props.to.options.can;
+  if (can && !can()) {
+    console.log("I cannot go to", to);
+    return null;
+  }
+  const name = typeof props.to === "string" ? void 0 : props.to.options.name;
   const router = useRouter();
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.createAnchorProps(props.to), ...props, children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.createAnchorProps(to), ...props, children: props.children ?? name });
 };
 
 const useInject = (clazz) => {
@@ -917,7 +983,9 @@ const useInject = (clazz) => {
   if (!ctx) {
     throw new Error("useRouter must be used within a <RouterProvider>");
   }
-  return ctx.alepha.get(clazz);
+  return ctx.alepha.get(clazz, {
+    skipRegistration: true
+  });
 };
 
 const useClient = () => {