@alepha/react 0.5.0 → 0.5.1

package/dist/index.browser.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var core = require('@alepha/core');
+var useRouterState = require('./useRouterState-BlKHWZwk.cjs');
+require('react');
+require('@alepha/server');
+require('react-dom/client');
+require('path-to-regexp');
+
+class ReactModule {
+  alepha = core.$inject(core.Alepha);
+  constructor() {
+    this.alepha.with(useRouterState.PageDescriptorProvider).with(useRouterState.ReactBrowserProvider);
+  }
+}
+core.autoInject(useRouterState.$page, ReactModule);
+
+exports.$page = useRouterState.$page;
+exports.NestedView = useRouterState.NestedView;
+exports.ReactBrowserProvider = useRouterState.ReactBrowserProvider;
+exports.RedirectException = useRouterState.RedirectException;
+exports.Router = useRouterState.Router;
+exports.RouterContext = useRouterState.RouterContext;
+exports.RouterHookApi = useRouterState.RouterHookApi;
+exports.RouterLayerContext = useRouterState.RouterLayerContext;
+exports.pageDescriptorKey = useRouterState.pageDescriptorKey;
+exports.useActive = useRouterState.useActive;
+exports.useClient = useRouterState.useClient;
+exports.useInject = useRouterState.useInject;
+exports.useQueryParams = useRouterState.useQueryParams;
+exports.useRouter = useRouterState.useRouter;
+exports.useRouterEvents = useRouterState.useRouterEvents;
+exports.useRouterState = useRouterState.useRouterState;
+exports.ReactModule = ReactModule;

package/dist/index.browser.mjs

@@ -0,0 +1,17 @@
+import { autoInject, $inject, Alepha } from '@alepha/core';
+import { $ as $page, P as PageDescriptorProvider, k as ReactBrowserProvider } from './useRouterState-CvFCmaq7.mjs';
+export { N as NestedView, j as RedirectException, R as Router, a as RouterContext, f as RouterHookApi, b as RouterLayerContext, p as pageDescriptorKey, u as useActive, c as useClient, d as useInject, e as useQueryParams, g as useRouter, h as useRouterEvents, i as useRouterState } from './useRouterState-CvFCmaq7.mjs';
+import 'react';
+import '@alepha/server';
+import 'react-dom/client';
+import 'path-to-regexp';
+
+class ReactModule {
+  alepha = $inject(Alepha);
+  constructor() {
+    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider);
+  }
+}
+autoInject($page, ReactModule);
+
+export { $page, ReactBrowserProvider, ReactModule };

package/dist/index.cjs

@@ -0,0 +1,500 @@
+'use strict';
+
+var core = require('@alepha/core');
+var server = require('@alepha/server');
+var useRouterState = require('./useRouterState-BlKHWZwk.cjs');
+var node_fs = require('node:fs');
+var promises = require('node:fs/promises');
+var node_path = require('node:path');
+var server$1 = require('react-dom/server');
+var crypto = require('node:crypto');
+var cache = require('@alepha/cache');
+var security = require('@alepha/security');
+var openidClient = require('openid-client');
+require('react');
+require('react-dom/client');
+require('path-to-regexp');
+
+const envSchema$1 = core.t.object({
+  REACT_SERVER_DIST: core.t.string({ default: "client" }),
+  REACT_SERVER_PREFIX: core.t.string({ default: "" }),
+  REACT_SSR_ENABLED: core.t.boolean({ default: false }),
+  REACT_SSR_OUTLET: core.t.string({ default: "<!--ssr-outlet-->" })
+});
+class ReactServerProvider {
+  log = core.$logger();
+  alepha = core.$inject(core.Alepha);
+  router = core.$inject(useRouterState.Router);
+  server = core.$inject(server.ServerProvider);
+  env = core.$inject(envSchema$1);
+  configure = core.$hook({
+    name: "configure",
+    handler: async () => {
+      await this.configureRoutes();
+    }
+  });
+  async configureRoutes() {
+    if (this.alepha.isTest()) {
+      this.processDescriptors();
+    }
+    if (this.router.empty()) {
+      return;
+    }
+    if (process.env.VITE_ALEPHA_DEV === "true") {
+      this.log.info("SSR starting in development mode");
+      const templateUrl = `${this.server.hostname}/index.html`;
+      this.log.debug(`Fetch template from ${templateUrl}`);
+      const route2 = this.createHandler(
+        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0)
+      );
+      await this.server.route(route2);
+      await this.server.route({
+        url: "/*",
+        // alias for "not found handler"
+        handler: route2.handler
+      });
+      return;
+    }
+    const maybe = [
+      node_path.join(process.cwd(), this.env.REACT_SERVER_DIST),
+      node_path.join(process.cwd(), "..", this.env.REACT_SERVER_DIST),
+      node_path.join(process.cwd(), "dist", this.env.REACT_SERVER_DIST)
+    ];
+    let root = "";
+    for (const it of maybe) {
+      if (node_fs.existsSync(it)) {
+        root = it;
+        break;
+      }
+    }
+    if (!root) {
+      this.log.warn("Missing static files, SSR will be disabled");
+      return;
+    }
+    await this.server.serve(this.createStaticHandler(root));
+    const template = await promises.readFile(node_path.join(root, "index.html"), "utf-8");
+    const route = this.createHandler(async () => template);
+    await this.server.route(route);
+    await this.server.route({
+      url: "/*",
+      // alias for "not found handler"
+      handler: route.handler
+    });
+  }
+  /**
+   *
+   * @param root
+   * @protected
+   */
+  createStaticHandler(root) {
+    return {
+      root,
+      prefix: this.env.REACT_SERVER_PREFIX,
+      logLevel: "warn",
+      cacheControl: true,
+      immutable: true,
+      preCompressed: true,
+      maxAge: "30d",
+      index: false
+    };
+  }
+  /**
+   *
+   * @param templateLoader
+   * @protected
+   */
+  createHandler(templateLoader) {
+    return {
+      url: "/",
+      handler: async ({ url, user }) => {
+        const template = await templateLoader();
+        if (!template) {
+          return new Response("Not found", { status: 404 });
+        }
+        const response = this.notFoundHandler(url);
+        if (response) {
+          return response;
+        }
+        return await this.ssr(url, template, user);
+      }
+    };
+  }
+  processDescriptors() {
+    const pages = this.alepha.getDescriptorValues(useRouterState.$page);
+    for (const { key, instance, value } of pages) {
+      instance[key].render = async (options = {}) => {
+        const name = value.options.name ?? key;
+        const page = this.router.page(name);
+        const layers = await this.router.createLayers(
+          "",
+          page,
+          options.params ?? {},
+          options.query ?? {},
+          []
+        );
+        return server$1.renderToString(
+          this.router.root({
+            layers,
+            pathname: "",
+            search: ""
+          })
+        );
+      };
+    }
+  }
+  /**
+   *
+   * @param url
+   * @protected
+   */
+  notFoundHandler(url) {
+    if (url.match(/\.\w+$/)) {
+      return new Response("Not found", { status: 404 });
+    }
+  }
+  /**
+   *
+   * @param url
+   * @param template
+   * @param user
+   */
+  async ssr(url, template = this.env.REACT_SSR_OUTLET, user) {
+    const { element, layers, redirect } = await this.router.render(url, {
+      user
+    });
+    if (redirect) {
+      return new Response("", {
+        status: 302,
+        headers: {
+          Location: redirect
+        }
+      });
+    }
+    const appHtml = server$1.renderToString(element);
+    const script = `<script>window.__ssr=${JSON.stringify({
+      layers: layers.map((it) => ({
+        ...it,
+        index: void 0,
+        path: void 0,
+        element: void 0
+      })),
+      session: {
+        user: user ? {
+          id: user.id,
+          name: user.name
+        } : void 0
+      }
+    })}<\/script>`;
+    const index = template.indexOf("</body>");
+    if (index !== -1) {
+      template = template.slice(0, index) + script + template.slice(index);
+    }
+    return new Response(template.replace(this.env.REACT_SSR_OUTLET, appHtml), {
+      headers: { "Content-Type": "text/html" }
+    });
+  }
+}
+
+const sessionUserSchema = core.t.object({
+  id: core.t.string(),
+  name: core.t.optional(core.t.string())
+});
+const sessionSchema = core.t.object({
+  user: core.t.optional(sessionUserSchema)
+});
+const envSchema = core.t.object({
+  REACT_OIDC_ISSUER: core.t.optional(core.t.string()),
+  REACT_OIDC_CLIENT_ID: core.t.optional(core.t.string()),
+  REACT_OIDC_CLIENT_SECRET: core.t.optional(core.t.string()),
+  REACT_OIDC_REDIRECT_URI: core.t.optional(core.t.string())
+});
+class ReactSessionProvider {
+  SSID = "ssid";
+  log = core.$logger();
+  env = core.$inject(envSchema);
+  serverProvider = core.$inject(server.ServerProvider);
+  securityProvider = core.$inject(security.SecurityProvider);
+  sessions = cache.$cache();
+  clients = [];
+  get redirectUri() {
+    return this.env.REACT_OIDC_REDIRECT_URI ?? `${this.serverProvider.hostname}/api/callback`;
+  }
+  configure = core.$hook({
+    name: "configure",
+    priority: 100,
+    handler: async () => {
+      const issuer = this.env.REACT_OIDC_ISSUER;
+      const clientId = this.env.REACT_OIDC_CLIENT_ID;
+      if (!issuer || !clientId) {
+        return;
+      }
+      const client = await openidClient.discovery(
+        new URL(issuer),
+        clientId,
+        {
+          client_secret: this.env.REACT_OIDC_CLIENT_SECRET
+        },
+        void 0,
+        {
+          execute: [openidClient.allowInsecureRequests]
+        }
+      );
+      this.clients = [client];
+    }
+  });
+  /**
+   *
+   * @param sessionId
+   * @param session
+   * @protected
+   */
+  async setSession(sessionId, session) {
+    await this.sessions.set(sessionId, session, {
+      days: 1
+    });
+  }
+  /**
+   *
+   * @param sessionId
+   * @protected
+   */
+  async getSession(sessionId) {
+    const session = await this.sessions.get(sessionId);
+    if (!session) {
+      return;
+    }
+    const now = Date.now();
+    if (session.expires_in && session.issued_at) {
+      const expiresAt = session.issued_at + (session.expires_in - 10) * 1e3;
+      if (expiresAt < now) {
+        if (session.refresh_token) {
+          try {
+            const newTokens = await openidClient.refreshTokenGrant(
+              this.clients[0],
+              session.refresh_token
+            );
+            await this.setSession(sessionId, {
+              ...newTokens,
+              issued_at: Date.now()
+            });
+            return newTokens;
+          } catch (e) {
+            this.log.error(e, "Failed to refresh token");
+          }
+        }
+        await this.sessions.invalidate(sessionId);
+        return;
+      }
+    }
+    if (!session.issued_at && session.access_token) {
+      await this.sessions.invalidate(sessionId);
+      return;
+    }
+    return session;
+  }
+  /**
+   *
+   * @protected
+   */
+  beforeRequest = core.$hook({
+    name: "configure:fastify",
+    priority: 100,
+    handler: async (app) => {
+      app.decorateRequest("session");
+      app.addHook("onRequest", async (req) => {
+        const sessionId = req.cookies[this.SSID];
+        if (sessionId && !isViteFile(req.url)) {
+          const session = await this.getSession(sessionId);
+          if (session) {
+            req.session = session;
+            if (session.access_token) {
+              req.headers.authorization = `Bearer ${session.access_token}`;
+            }
+          }
+        }
+      });
+    }
+  });
+  /**
+   *
+   */
+  login = server.$route({
+    security: false,
+    url: "/login",
+    method: "GET",
+    schema: {
+      query: core.t.object({
+        redirect: core.t.optional(core.t.string())
+      })
+    },
+    handler: async ({ query }) => {
+      const client = this.clients[0];
+      const codeVerifier = openidClient.randomPKCECodeVerifier();
+      const codeChallenge = await openidClient.calculatePKCECodeChallenge(codeVerifier);
+      const scope = "openid profile email";
+      const parameters = {
+        redirect_uri: this.redirectUri,
+        scope,
+        code_challenge: codeChallenge,
+        code_challenge_method: "S256"
+      };
+      const sessionId = crypto.randomUUID();
+      await this.setSession(sessionId, {
+        authorizationCodeGrant: {
+          codeVerifier,
+          redirectUri: query.redirect ?? "/"
+          // TODO: add nonce, max_age, state
+        }
+      });
+      return new Response("", {
+        status: 302,
+        headers: {
+          "Set-Cookie": `${this.SSID}=${sessionId}; HttpOnly; Path=/; SameSite=Lax;`,
+          Location: openidClient.buildAuthorizationUrl(client, parameters).toString()
+        }
+      });
+    }
+  });
+  /**
+   *
+   */
+  callback = server.$route({
+    security: false,
+    url: "/callback",
+    method: "GET",
+    schema: {
+      headers: core.t.record(core.t.string(), core.t.string()),
+      cookies: core.t.object({
+        ssid: core.t.string()
+      })
+    },
+    handler: async ({ cookies, url }) => {
+      const sessionId = cookies.ssid;
+      const session = await this.getSession(sessionId);
+      if (!session) {
+        throw new server.BadRequestError("Missing session");
+      }
+      if (!session.authorizationCodeGrant) {
+        throw new server.BadRequestError("Invalid session - missing code verifier");
+      }
+      const [, search] = url.split("?");
+      const tokens = await openidClient.authorizationCodeGrant(
+        this.clients[0],
+        new URL(`${this.redirectUri}?${search}`),
+        {
+          pkceCodeVerifier: session.authorizationCodeGrant.codeVerifier,
+          expectedNonce: session.authorizationCodeGrant.nonce,
+          expectedState: session.authorizationCodeGrant.state,
+          maxAge: session.authorizationCodeGrant.max_age
+        }
+      );
+      await this.setSession(sessionId, {
+        ...tokens,
+        issued_at: Date.now()
+      });
+      return new Response("", {
+        status: 302,
+        headers: {
+          Location: session.authorizationCodeGrant.redirectUri ?? "/"
+        }
+      });
+    }
+  });
+  logout = server.$route({
+    security: false,
+    url: "/logout",
+    method: "GET",
+    schema: {
+      query: core.t.object({
+        redirect: core.t.optional(core.t.string())
+      }),
+      cookies: core.t.object({
+        ssid: core.t.string()
+      })
+    },
+    handler: async ({ query, cookies }, { fastify }) => {
+      const session = fastify?.req.session;
+      await this.sessions.invalidate(cookies.ssid);
+      const redirect = query.redirect ?? "/";
+      const params = new URLSearchParams();
+      params.set("post_logout_redirect_uri", redirect);
+      if (session?.id_token) {
+        params.set("id_token_hint", session.id_token);
+      }
+      return new Response("", {
+        status: 302,
+        headers: {
+          "Set-Cookie": `${this.SSID}=; HttpOnly; Path=/; SameSite=Lax;`,
+          Location: openidClient.buildEndSessionUrl(this.clients[0], params).toString()
+        }
+      });
+    }
+  });
+  session = server.$route({
+    security: false,
+    url: "/_session",
+    method: "GET",
+    schema: {
+      headers: core.t.object({
+        authorization: core.t.string()
+      }),
+      response: sessionSchema
+    },
+    handler: async ({ headers }) => {
+      try {
+        return {
+          user: await this.securityProvider.createUserFromToken(
+            headers.authorization
+          )
+        };
+      } catch (e) {
+        return {};
+      }
+    }
+  });
+}
+const isViteFile = (file) => {
+  const [pathname] = file.split("?");
+  if (pathname.startsWith("/docs")) {
+    return false;
+  }
+  if (pathname.match(/\.\w{2,5}$/)) {
+    return true;
+  }
+  if (pathname.startsWith("/@")) {
+    return true;
+  }
+  return false;
+};
+
+class ReactModule {
+  alepha = core.$inject(core.Alepha);
+  constructor() {
+    this.alepha.with(server.ServerModule).with(server.ServerLinksProvider).with(ReactServerProvider).with(ReactSessionProvider).with(useRouterState.PageDescriptorProvider);
+  }
+}
+core.autoInject(useRouterState.$page, ReactModule);
+
+exports.$page = useRouterState.$page;
+exports.NestedView = useRouterState.NestedView;
+exports.PageDescriptorProvider = useRouterState.PageDescriptorProvider;
+exports.ReactBrowserProvider = useRouterState.ReactBrowserProvider;
+exports.RedirectException = useRouterState.RedirectException;
+exports.Router = useRouterState.Router;
+exports.RouterContext = useRouterState.RouterContext;
+exports.RouterHookApi = useRouterState.RouterHookApi;
+exports.RouterLayerContext = useRouterState.RouterLayerContext;
+exports.pageDescriptorKey = useRouterState.pageDescriptorKey;
+exports.useActive = useRouterState.useActive;
+exports.useClient = useRouterState.useClient;
+exports.useInject = useRouterState.useInject;
+exports.useQueryParams = useRouterState.useQueryParams;
+exports.useRouter = useRouterState.useRouter;
+exports.useRouterEvents = useRouterState.useRouterEvents;
+exports.useRouterState = useRouterState.useRouterState;
+exports.ReactModule = ReactModule;
+exports.ReactServerProvider = ReactServerProvider;
+exports.ReactSessionProvider = ReactSessionProvider;
+exports.envSchema = envSchema$1;
+exports.sessionSchema = sessionSchema;
+exports.sessionUserSchema = sessionUserSchema;