@alepha/react 0.7.0 → 0.7.2

package/README.md

@@ -1 +1 @@
-# @alepha/react
+# alepha/react

package/dist/index.browser.cjs

@@ -1,37 +1,74 @@
 'use strict';
 
 var core = require('@alepha/core');
-var useActive = require('./useActive-DjpZBEuB.cjs');
+var useRouterState = require('./useRouterState-C2uo0jXu.cjs');
+var client = require('react-dom/client');
 require('react/jsx-runtime');
 require('react');
 require('@alepha/server');
-require('react-dom/client');
 require('@alepha/router');
 
+const envSchema = core.t.object({
+  REACT_ROOT_ID: core.t.string({ default: "root" })
+});
+class ReactBrowserRenderer {
+  browserProvider = core.$inject(useRouterState.ReactBrowserProvider);
+  browserRouterProvider = core.$inject(useRouterState.BrowserRouterProvider);
+  env = core.$inject(envSchema);
+  log = core.$logger();
+  root;
+  getRootElement() {
+    const root = this.browserProvider.document.getElementById(
+      this.env.REACT_ROOT_ID
+    );
+    if (root) {
+      return root;
+    }
+    const div = this.browserProvider.document.createElement("div");
+    div.id = this.env.REACT_ROOT_ID;
+    this.browserProvider.document.body.prepend(div);
+    return div;
+  }
+  ready = core.$hook({
+    name: "react:browser:render",
+    handler: async ({ state, context, hydration }) => {
+      const element = this.browserRouterProvider.root(state, context);
+      if (hydration?.layers) {
+        this.root = client.hydrateRoot(this.getRootElement(), element);
+        this.log.info("Hydrated root element");
+      } else {
+        this.root ??= client.createRoot(this.getRootElement());
+        this.root.render(element);
+        this.log.info("Created root element");
+      }
+    }
+  });
+}
+
 class ReactModule {
   alepha = core.$inject(core.Alepha);
   constructor() {
-    this.alepha.with(useActive.PageDescriptorProvider).with(useActive.ReactBrowserProvider).with(useActive.BrowserRouterProvider);
+    this.alepha.with(useRouterState.PageDescriptorProvider).with(useRouterState.ReactBrowserProvider).with(useRouterState.BrowserRouterProvider).with(ReactBrowserRenderer);
   }
 }
-core.__bind(useActive.$page, ReactModule);
+core.__bind(useRouterState.$page, ReactModule);
 
-exports.$page = useActive.$page;
-exports.ErrorBoundary = useActive.ErrorBoundary;
-exports.Link = useActive.Link;
-exports.NestedView = useActive.NestedView;
-exports.ReactBrowserProvider = useActive.ReactBrowserProvider;
-exports.RedirectionError = useActive.RedirectionError;
-exports.RouterContext = useActive.RouterContext;
-exports.RouterHookApi = useActive.RouterHookApi;
-exports.RouterLayerContext = useActive.RouterLayerContext;
-exports.useActive = useActive.useActive;
-exports.useApi = useActive.useApi;
-exports.useClient = useActive.useClient;
-exports.useInject = useActive.useInject;
-exports.useQueryParams = useActive.useQueryParams;
-exports.useRouter = useActive.useRouter;
-exports.useRouterEvents = useActive.useRouterEvents;
-exports.useRouterState = useActive.useRouterState;
+exports.$page = useRouterState.$page;
+exports.ClientOnly = useRouterState.ClientOnly;
+exports.ErrorBoundary = useRouterState.ErrorBoundary;
+exports.Link = useRouterState.Link;
+exports.NestedView = useRouterState.NestedView;
+exports.ReactBrowserProvider = useRouterState.ReactBrowserProvider;
+exports.RedirectionError = useRouterState.RedirectionError;
+exports.RouterContext = useRouterState.RouterContext;
+exports.RouterHookApi = useRouterState.RouterHookApi;
+exports.RouterLayerContext = useRouterState.RouterLayerContext;
+exports.useActive = useRouterState.useActive;
+exports.useAlepha = useRouterState.useAlepha;
+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;
-//# sourceMappingURL=index.browser.cjs.map

package/dist/index.browser.js

@@ -1,19 +1,55 @@
-import { __bind, $inject, Alepha } from '@alepha/core';
-import { $ as $page, P as PageDescriptorProvider, l as ReactBrowserProvider, B as BrowserRouterProvider } from './useActive-BX41CqY8.js';
-export { E as ErrorBoundary, L as Link, N as NestedView, j as RedirectionError, R as RouterContext, b as RouterHookApi, a as RouterLayerContext, 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 { t, $inject, $logger, $hook, __bind, Alepha } from '@alepha/core';
+import { l as ReactBrowserProvider, B as BrowserRouterProvider, $ as $page, P as PageDescriptorProvider } from './useRouterState-D5__ZcUV.js';
+export { C as ClientOnly, E as ErrorBoundary, L as Link, N as NestedView, R as RedirectionError, a as RouterContext, c as RouterHookApi, b as RouterLayerContext, 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 { hydrateRoot, createRoot } from 'react-dom/client';
 import 'react/jsx-runtime';
 import 'react';
 import '@alepha/server';
-import 'react-dom/client';
 import '@alepha/router';
 
+const envSchema = t.object({
+  REACT_ROOT_ID: t.string({ default: "root" })
+});
+class ReactBrowserRenderer {
+  browserProvider = $inject(ReactBrowserProvider);
+  browserRouterProvider = $inject(BrowserRouterProvider);
+  env = $inject(envSchema);
+  log = $logger();
+  root;
+  getRootElement() {
+    const root = this.browserProvider.document.getElementById(
+      this.env.REACT_ROOT_ID
+    );
+    if (root) {
+      return root;
+    }
+    const div = this.browserProvider.document.createElement("div");
+    div.id = this.env.REACT_ROOT_ID;
+    this.browserProvider.document.body.prepend(div);
+    return div;
+  }
+  ready = $hook({
+    name: "react:browser:render",
+    handler: async ({ state, context, hydration }) => {
+      const element = this.browserRouterProvider.root(state, context);
+      if (hydration?.layers) {
+        this.root = hydrateRoot(this.getRootElement(), element);
+        this.log.info("Hydrated root element");
+      } else {
+        this.root ??= createRoot(this.getRootElement());
+        this.root.render(element);
+        this.log.info("Created root element");
+      }
+    }
+  });
+}
+
 class ReactModule {
   alepha = $inject(Alepha);
   constructor() {
-    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider);
+    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
   }
 }
 __bind($page, ReactModule);
 
 export { $page, ReactBrowserProvider, ReactModule };
-//# sourceMappingURL=index.browser.js.map

package/dist/index.cjs

@@ -2,15 +2,13 @@
 
 var core = require('@alepha/core');
 var server = require('@alepha/server');
-var useActive = require('./useActive-DjpZBEuB.cjs');
+var useRouterState = require('./useRouterState-C2uo0jXu.cjs');
 var node_fs = require('node:fs');
-var promises = require('node:fs/promises');
 var node_path = require('node:path');
 var serverStatic = require('@alepha/server-static');
 var server$1 = require('react-dom/server');
 require('react/jsx-runtime');
 require('react');
-require('react-dom/client');
 require('@alepha/router');
 
 class ServerHeadProvider {
@@ -76,58 +74,87 @@ class ServerHeadProvider {
 }
 
 const envSchema = core.t.object({
-  REACT_SERVER_DIST: core.t.string({ default: "client" }),
+  REACT_SERVER_DIST: core.t.string({ default: "public" }),
   REACT_SERVER_PREFIX: core.t.string({ default: "" }),
-  REACT_SSR_ENABLED: core.t.boolean({ default: false }),
+  REACT_SSR_ENABLED: core.t.optional(core.t.boolean()),
   REACT_ROOT_ID: core.t.string({ default: "root" })
 });
 class ReactServerProvider {
   log = core.$logger();
   alepha = core.$inject(core.Alepha);
-  pageDescriptorProvider = core.$inject(useActive.PageDescriptorProvider);
+  pageDescriptorProvider = core.$inject(useRouterState.PageDescriptorProvider);
   serverStaticProvider = core.$inject(serverStatic.ServerStaticProvider);
   serverRouterProvider = core.$inject(server.ServerRouterProvider);
   headProvider = core.$inject(ServerHeadProvider);
+  serverTimingProvider = core.$inject(server.ServerTimingProvider);
   env = core.$inject(envSchema);
   ROOT_DIV_REGEX = new RegExp(
     `<div([^>]*)\\s+id=["']${this.env.REACT_ROOT_ID}["']([^>]*)>(.*?)<\\/div>`,
     "is"
   );
-  configure = core.$hook({
+  onConfigure = core.$hook({
     name: "configure",
     handler: async () => {
-      const pages = this.alepha.getDescriptorValues(useActive.$page);
-      if (pages.length === 0) {
-        return;
-      }
+      const pages = this.alepha.getDescriptorValues(useRouterState.$page);
+      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[core.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 promises.readFile(node_path.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)
@@ -136,8 +163,8 @@ class ReactServerProvider {
   }
   getPublicDirectory() {
     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}`),
+      node_path.join(process.cwd(), this.env.REACT_SERVER_DIST)
     ];
     for (const it of maybe) {
       if (node_fs.existsSync(it)) {
@@ -152,23 +179,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: {},
@@ -178,7 +207,18 @@ class ReactServerProvider {
         page,
         context
       );
-      return server$1.renderToString(this.pageDescriptorProvider.root(state, context));
+      if (!withIndex) {
+        return {
+          context,
+          html: server$1.renderToString(
+            this.pageDescriptorProvider.root(state, context)
+          )
+        };
+      }
+      return {
+        context,
+        html: this.renderToHtml(this.template ?? "", state, context)
+      };
     };
   }
   createHandler(page, templateLoader) {
@@ -198,11 +238,24 @@ class ReactServerProvider {
       };
       if (this.alepha.has(server.ServerLinksProvider)) {
         const srv = this.alepha.get(server.ServerLinksProvider);
-        context.links = await srv.getLinks({
-          user: serverRequest.user,
-          authorization: serverRequest.headers.authorization
-        });
-        this.alepha.als.set("links", context.links);
+        const schema = server.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",
@@ -214,49 +267,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 = server$1.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 = server$1.renderToString(element);
+    } catch (error) {
+      this.log.error("Error during SSR", error);
+      app = server$1.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)) {
@@ -289,31 +356,31 @@ class ReactServerProvider {
 class ReactModule {
   alepha = core.$inject(core.Alepha);
   constructor() {
-    this.alepha.with(server.ServerModule).with(server.ServerLinksProvider).with(useActive.PageDescriptorProvider).with(ReactServerProvider);
+    this.alepha.with(server.ServerModule).with(server.ServerLinksProvider).with(useRouterState.PageDescriptorProvider).with(ReactServerProvider);
   }
 }
-core.__bind(useActive.$page, ReactModule);
+core.__bind(useRouterState.$page, ReactModule);
 
-exports.$page = useActive.$page;
-exports.ErrorBoundary = useActive.ErrorBoundary;
-exports.Link = useActive.Link;
-exports.NestedView = useActive.NestedView;
-exports.PageDescriptorProvider = useActive.PageDescriptorProvider;
-exports.ReactBrowserProvider = useActive.ReactBrowserProvider;
-exports.RedirectionError = useActive.RedirectionError;
-exports.RouterContext = useActive.RouterContext;
-exports.RouterHookApi = useActive.RouterHookApi;
-exports.RouterLayerContext = useActive.RouterLayerContext;
-exports.isPageRoute = useActive.isPageRoute;
-exports.useActive = useActive.useActive;
-exports.useApi = useActive.useApi;
-exports.useClient = useActive.useClient;
-exports.useInject = useActive.useInject;
-exports.useQueryParams = useActive.useQueryParams;
-exports.useRouter = useActive.useRouter;
-exports.useRouterEvents = useActive.useRouterEvents;
-exports.useRouterState = useActive.useRouterState;
+exports.$page = useRouterState.$page;
+exports.ClientOnly = useRouterState.ClientOnly;
+exports.ErrorBoundary = useRouterState.ErrorBoundary;
+exports.Link = useRouterState.Link;
+exports.NestedView = useRouterState.NestedView;
+exports.PageDescriptorProvider = useRouterState.PageDescriptorProvider;
+exports.ReactBrowserProvider = useRouterState.ReactBrowserProvider;
+exports.RedirectionError = useRouterState.RedirectionError;
+exports.RouterContext = useRouterState.RouterContext;
+exports.RouterHookApi = useRouterState.RouterHookApi;
+exports.RouterLayerContext = useRouterState.RouterLayerContext;
+exports.isPageRoute = useRouterState.isPageRoute;
+exports.useActive = useRouterState.useActive;
+exports.useAlepha = useRouterState.useAlepha;
+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.envSchema = envSchema;
-//# sourceMappingURL=index.cjs.map