@alepha/react 0.7.0 → 0.7.2

package/dist/index.js

@@ -1,15 +1,13 @@
 import { t, $logger, $inject, Alepha, $hook, OPTIONS, __bind } from '@alepha/core';
-import { ServerRouterProvider, ServerLinksProvider, ServerModule } from '@alepha/server';
-import { P as PageDescriptorProvider, $ as $page } from './useActive-BX41CqY8.js';
-export { E as ErrorBoundary, L as Link, N as NestedView, l as ReactBrowserProvider, j as RedirectionError, R as RouterContext, b as RouterHookApi, a as RouterLayerContext, k as isPageRoute, i as useActive, d as useApi, c as useClient, u as useInject, e as useQueryParams, f as useRouter, g as useRouterEvents, h as useRouterState } from './useActive-BX41CqY8.js';
+import { ServerRouterProvider, ServerTimingProvider, ServerLinksProvider, apiLinksResponseSchema, ServerModule } from '@alepha/server';
+import { P as PageDescriptorProvider, $ as $page } from './useRouterState-D5__ZcUV.js';
+export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, l as ReactBrowserProvider, R as RedirectionError, a as RouterContext, c as RouterHookApi, b as RouterLayerContext, k as isPageRoute, u as useActive, d as useAlepha, e as useClient, f as useInject, g as useQueryParams, h as useRouter, i as useRouterEvents, j as useRouterState } from './useRouterState-D5__ZcUV.js';
 import { existsSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { ServerStaticProvider } from '@alepha/server-static';
 import { renderToString } from 'react-dom/server';
 import 'react/jsx-runtime';
 import 'react';
-import 'react-dom/client';
 import '@alepha/router';
 
 class ServerHeadProvider {
@@ -75,9 +73,9 @@ class ServerHeadProvider {
 }
 
 const envSchema = t.object({
-  REACT_SERVER_DIST: t.string({ default: "client" }),
+  REACT_SERVER_DIST: t.string({ default: "public" }),
   REACT_SERVER_PREFIX: t.string({ default: "" }),
-  REACT_SSR_ENABLED: t.boolean({ default: false }),
+  REACT_SSR_ENABLED: t.optional(t.boolean()),
   REACT_ROOT_ID: t.string({ default: "root" })
 });
 class ReactServerProvider {
@@ -87,46 +85,75 @@ class ReactServerProvider {
   serverStaticProvider = $inject(ServerStaticProvider);
   serverRouterProvider = $inject(ServerRouterProvider);
   headProvider = $inject(ServerHeadProvider);
+  serverTimingProvider = $inject(ServerTimingProvider);
   env = $inject(envSchema);
   ROOT_DIV_REGEX = new RegExp(
     `<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`,
     "is"
   );
-  configure = $hook({
+  onConfigure = $hook({
     name: "configure",
     handler: async () => {
       const pages = this.alepha.getDescriptorValues($page);
-      if (pages.length === 0) {
-        return;
-      }
+      const ssrEnabled = pages.length > 0 && this.env.REACT_SSR_ENABLED !== false;
+      this.alepha.state("ReactServerProvider.ssr", ssrEnabled);
       for (const { key, instance, value } of pages) {
         const name = value[OPTIONS].name ?? key;
+        instance[key].prerender = this.createRenderFunction(name, true);
         if (this.alepha.isTest()) {
           instance[key].render = this.createRenderFunction(name);
         }
       }
       if (this.alepha.isServerless() === "vite") {
-        await this.configureVite();
+        await this.configureVite(ssrEnabled);
         return;
       }
       let root = "";
       if (!this.alepha.isServerless()) {
         root = this.getPublicDirectory();
         if (!root) {
-          this.log.warn("Missing static files, SSR will be disabled");
-          return;
+          this.log.warn(
+            "Missing static files, static file server will be disabled"
+          );
+        } else {
+          this.log.debug(`Using static files from: ${root}`);
+          await this.configureStaticServer(root);
         }
-        await this.configureStaticServer(root);
       }
-      const template = this.alepha.state("ReactServerProvider.template") ?? await readFile(join(root, "index.html"), "utf-8");
-      await this.registerPages(async () => template);
-      this.alepha.state("ReactServerProvider.ssr", true);
+      if (ssrEnabled) {
+        await this.registerPages(async () => this.template);
+        this.log.info("SSR OK");
+        return;
+      }
+      this.log.info("SSR is disabled, use History API fallback");
+      await this.serverRouterProvider.route({
+        path: "*",
+        handler: async ({ url, reply }) => {
+          if (url.pathname.includes(".")) {
+            reply.headers["content-type"] = "text/plain";
+            reply.body = "Not Found";
+            reply.status = 404;
+            return;
+          }
+          reply.headers["content-type"] = "text/html";
+          return this.template;
+        }
+      });
     }
   });
+  get template() {
+    return this.alepha.state("ReactServerProvider.template");
+  }
   async registerPages(templateLoader) {
     for (const page of this.pageDescriptorProvider.getPages()) {
+      if (page.children?.length) {
+        continue;
+      }
       this.log.debug(`+ ${page.match} -> ${page.name}`);
       await this.serverRouterProvider.route({
+        ...page,
+        schema: void 0,
+        // 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)
@@ -135,8 +162,8 @@ class ReactServerProvider {
   }
   getPublicDirectory() {
     const maybe = [
-      join(process.cwd(), this.env.REACT_SERVER_DIST),
-      join(process.cwd(), "..", this.env.REACT_SERVER_DIST)
+      join(process.cwd(), `dist/${this.env.REACT_SERVER_DIST}`),
+      join(process.cwd(), this.env.REACT_SERVER_DIST)
     ];
     for (const it of maybe) {
       if (existsSync(it)) {
@@ -151,23 +178,25 @@ class ReactServerProvider {
       path: this.env.REACT_SERVER_PREFIX
     });
   }
-  async configureVite() {
-    const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
+  async configureVite(ssrEnabled) {
+    if (!ssrEnabled) {
+      return;
+    }
     this.log.info("SSR (vite) OK");
-    this.alepha.state("ReactServerProvider.ssr", true);
-    const templateUrl = `${url}/index.html`;
+    const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
     await this.registerPages(
-      () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0)
+      () => fetch(`${url}/index.html`).then((it) => it.text()).catch(() => void 0)
     );
   }
   /**
    * For testing purposes, creates a render function that can be used.
    */
-  createRenderFunction(name) {
+  createRenderFunction(name, withIndex = false) {
     return async (options = {}) => {
       const page = this.pageDescriptorProvider.page(name);
+      const url = new URL(this.pageDescriptorProvider.url(name, options));
       const context = {
-        url: new URL("http://localhost"),
+        url,
         params: options.params ?? {},
         query: options.query ?? {},
         head: {},
@@ -177,7 +206,18 @@ class ReactServerProvider {
         page,
         context
       );
-      return renderToString(this.pageDescriptorProvider.root(state, context));
+      if (!withIndex) {
+        return {
+          context,
+          html: renderToString(
+            this.pageDescriptorProvider.root(state, context)
+          )
+        };
+      }
+      return {
+        context,
+        html: this.renderToHtml(this.template ?? "", state, context)
+      };
     };
   }
   createHandler(page, templateLoader) {
@@ -197,11 +237,24 @@ class ReactServerProvider {
       };
       if (this.alepha.has(ServerLinksProvider)) {
         const srv = this.alepha.get(ServerLinksProvider);
-        context.links = await srv.getLinks({
-          user: serverRequest.user,
-          authorization: serverRequest.headers.authorization
-        });
-        this.alepha.als.set("links", context.links);
+        const schema = apiLinksResponseSchema;
+        context.links = this.alepha.parse(
+          schema,
+          await srv.getLinks({
+            user: serverRequest.user,
+            authorization: serverRequest.headers.authorization
+          })
+        );
+        this.alepha.context.set("links", context.links);
+      }
+      let target = page;
+      while (target) {
+        if (page.can && !page.can()) {
+          reply.status = 403;
+          reply.headers["content-type"] = "text/plain";
+          return "Forbidden";
+        }
+        target = target.parent;
       }
       await this.alepha.emit(
         "react:server:render",
@@ -213,49 +266,63 @@ class ReactServerProvider {
           log: false
         }
       );
+      this.serverTimingProvider.beginTiming("createLayers");
       const state = await this.pageDescriptorProvider.createLayers(
         page,
         context
       );
+      this.serverTimingProvider.endTiming("createLayers");
       if (state.redirect) {
         return reply.redirect(state.redirect);
       }
-      const element = this.pageDescriptorProvider.root(state, context);
-      const app = renderToString(element);
-      const hydrationData = {
-        links: context.links,
-        layers: state.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
-        }))
-      };
-      const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}<\/script>`;
-      const response = {
-        html: template
-      };
-      reply.status = 200;
       reply.headers["content-type"] = "text/html";
       reply.headers["cache-control"] = "no-store, no-cache, must-revalidate, proxy-revalidate";
       reply.headers.pragma = "no-cache";
       reply.headers.expires = "0";
-      this.fillTemplate(response, app, script);
-      if (context.head) {
-        response.html = this.headProvider.renderHead(
-          response.html,
-          context.head
-        );
+      if (page.cache && serverRequest.user) {
+        delete context.links;
       }
-      return response.html;
+      const html = this.renderToHtml(template, state, context);
+      page.afterHandler?.(serverRequest);
+      return html;
+    };
+  }
+  renderToHtml(template, state, context) {
+    const element = this.pageDescriptorProvider.root(state, context);
+    this.serverTimingProvider.beginTiming("renderToString");
+    let app = "";
+    try {
+      app = renderToString(element);
+    } catch (error) {
+      this.log.error("Error during SSR", error);
+      app = renderToString(context.onError(error));
+    }
+    this.serverTimingProvider.endTiming("renderToString");
+    const hydrationData = {
+      links: context.links,
+      layers: state.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
+      }))
+    };
+    const script = `<script>window.__ssr=${JSON.stringify(hydrationData)}<\/script>`;
+    const response = {
+      html: template
     };
+    this.fillTemplate(response, app, script);
+    if (context.head) {
+      response.html = this.headProvider.renderHead(response.html, context.head);
+    }
+    return response.html;
   }
   fillTemplate(response, app, script) {
     if (this.ROOT_DIV_REGEX.test(response.html)) {
@@ -294,4 +361,3 @@ class ReactModule {
 __bind($page, ReactModule);
 
 export { $page, PageDescriptorProvider, ReactModule, ReactServerProvider, envSchema };
-//# sourceMappingURL=index.js.map