@alepha/react 0.5.1 → 0.6.0

package/dist/{useRouterState-BlKHWZwk.cjs → useAuth-DOVx2kqa.cjs}

@@ -1,11 +1,22 @@
 'use strict';
 
 var core = require('@alepha/core');
-var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var server = require('@alepha/server');
 var client = require('react-dom/client');
 var pathToRegexp = require('path-to-regexp');
 
+const KEY = "AUTH";
+const $auth = (options) => {
+  core.__descriptor(KEY);
+  return {
+    [core.KIND]: KEY,
+    options
+  };
+};
+$auth[core.KIND] = KEY;
+
 const pageDescriptorKey = "PAGE";
 const $page = (options) => {
   core.__descriptor(pageDescriptorKey);
@@ -25,35 +36,36 @@ const $page = (options) => {
 };
 $page[core.KIND] = pageDescriptorKey;
 
-const RouterContext = react.createContext(
+const RouterContext = React.createContext(
   void 0
 );
 
-const RouterLayerContext = react.createContext(void 0);
+const RouterLayerContext = React.createContext(void 0);
 
 const NestedView = (props) => {
-  const app = react.useContext(RouterContext);
-  const layer = react.useContext(RouterLayerContext);
+  const app = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
   const index = layer?.index ?? 0;
-  const [view, setView] = react.useState(
+  const [view, setView] = React.useState(
     app?.state.layers[index]?.element
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (app?.alepha.isBrowser()) {
-      return app?.router.on("end", ({ layers }) => {
-        setView(layers[index]?.element);
+      return app?.router.on("end", (state) => {
+        setView(state.layers[index]?.element);
       });
     }
   }, [app]);
   return view ?? props.children ?? null;
 };
 
-class RedirectException extends Error {
+class RedirectionError extends Error {
   constructor(page) {
     super("Redirection");
     this.page = page;
   }
 }
+
 class Router extends core.EventEmitter {
   log = core.$logger();
   alepha = core.$inject(core.Alepha);
@@ -75,15 +87,18 @@ class Router extends core.EventEmitter {
   /**
    *
    */
-  root(state, opts = {}) {
-    return react.createElement(
+  root(state, context = {}) {
+    return React.createElement(
       RouterContext.Provider,
       {
         value: {
           state,
           router: this,
           alepha: this.alepha,
-          session: opts.user ? { user: opts.user } : void 0
+          args: {
+            user: context.user,
+            cookies: context.cookies
+          }
         }
       },
       state.layers[0]?.element
@@ -99,11 +114,12 @@ class Router extends core.EventEmitter {
     const state = {
       pathname,
       search,
-      layers: []
+      layers: [],
+      context: {}
     };
-    this.emit("begin", void 0);
+    await this.emit("begin", void 0);
     try {
-      let layers = await this.match(url, options);
+      let layers = await this.match(url, options, state.context);
       if (layers.length === 0) {
         if (this.notFoundPageRoute) {
           layers = await this.createLayers(url, this.notFoundPageRoute);
@@ -117,13 +133,14 @@ class Router extends core.EventEmitter {
         }
       }
       state.layers = layers;
-      this.emit("success", void 0);
+      await this.emit("success", void 0);
     } catch (e) {
-      if (e instanceof RedirectException) {
+      if (e instanceof RedirectionError) {
         return {
           element: null,
           layers: [],
-          redirect: typeof e.page === "string" ? e.page : this.href(e.page)
+          redirect: typeof e.page === "string" ? e.page : this.href(e.page),
+          context: state.context
         };
       }
       this.log.error(e);
@@ -135,31 +152,35 @@ class Router extends core.EventEmitter {
           path: "/"
         }
       ];
-      this.emit("error", e);
+      await this.emit("error", e);
     }
     if (options.state) {
       options.state.layers = state.layers;
       options.state.pathname = state.pathname;
       options.state.search = state.search;
-      this.emit("end", options.state);
+      options.state.context = state.context;
+      await this.emit("end", options.state);
       return {
-        element: this.root(options.state, options),
-        layers: options.state.layers
+        element: this.root(options.state, options.args),
+        layers: options.state.layers,
+        context: state.context
       };
     }
-    this.emit("end", state);
+    await this.emit("end", state);
     return {
-      element: this.root(state, options),
-      layers: state.layers
+      element: this.root(state, options.args),
+      layers: state.layers,
+      context: state.context
     };
   }
   /**
    *
    * @param url
    * @param options
+   * @param context
    * @protected
    */
-  async match(url, options = {}) {
+  async match(url, options = {}, context = {}) {
     const pages = this.pages;
     const previous = options.previous;
     const [pathname, search] = url.split("?");
@@ -181,7 +202,8 @@ class Router extends core.EventEmitter {
           params,
           query,
           previous,
-          options.user
+          options.args,
+          context
         );
       }
     }
@@ -190,14 +212,16 @@ class Router extends core.EventEmitter {
   /**
    * Create layers for the given route.
    *
+   * @param url
    * @param route
    * @param params
    * @param query
    * @param previous
-   * @param user
+   * @param args
+   * @param renderContext
    * @protected
    */
-  async createLayers(url, route, params = {}, query = {}, previous = [], user) {
+  async createLayers(url, route, params = {}, query = {}, previous = [], args, renderContext) {
     const layers = [];
     let context = {};
     const stack = [{ route }];
@@ -212,13 +236,13 @@ class Router extends core.EventEmitter {
       const route2 = it.route;
       const config = {};
       try {
-        config.query = route2.schema?.query ? this.alepha.parse(route2.schema.query, query) : {};
+        config.query = route2.schema?.query ? this.alepha.parse(route2.schema.query, query) : query;
       } catch (e) {
         it.error = e;
         break;
       }
       try {
-        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, params) : {};
+        config.params = route2.schema?.params ? this.alepha.parse(route2.schema.params, params) : params;
       } catch (e) {
         it.error = e;
         break;
@@ -250,12 +274,15 @@ class Router extends core.EventEmitter {
         forceRefresh = true;
       }
       try {
-        const props = await route2.resolve?.({
-          ...config,
-          ...context,
-          user,
-          url
-        }) ?? {};
+        const props = await route2.resolve?.(
+          {
+            ...config,
+            ...context,
+            context: args,
+            url
+          },
+          args ?? {}
+        ) ?? {};
         it.props = {
           ...props
         };
@@ -264,7 +291,7 @@ class Router extends core.EventEmitter {
           ...props
         };
       } catch (e) {
-        if (e instanceof RedirectException) {
+        if (e instanceof RedirectionError) {
           throw e;
         }
         this.log.error(e);
@@ -280,6 +307,12 @@ class Router extends core.EventEmitter {
       for (const key of Object.keys(params2)) {
         params2[key] = String(params2[key]);
       }
+      if (it.route.helmet && renderContext) {
+        this.mergeRenderContext(it.route, renderContext, {
+          ...props,
+          ...context
+        });
+      }
       acc += "/";
       acc += it.route.path ? pathToRegexp.compile(it.route.path)(params2) : "";
       const path = acc.replace(/\/+/, "/");
@@ -339,20 +372,41 @@ class Router extends core.EventEmitter {
   async createElement(page, props) {
     if (page.lazy) {
       const component = await page.lazy();
-      return react.createElement(component.default, props);
+      return React.createElement(component.default, props);
     }
     if (page.component) {
-      return react.createElement(page.component, props);
+      return React.createElement(page.component, props);
     }
     return void 0;
   }
+  /**
+   * Merge the render context with the page context.
+   *
+   * @param page
+   * @param ctx
+   * @param props
+   * @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}`;
+        } else {
+          ctx.helmet.title = helmet.title;
+        }
+      }
+    }
+  }
   /**
    *
    * @param e
    * @protected
    */
   renderError(e) {
-    return react.createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
+    return React.createElement("pre", { style: { overflow: "auto" } }, `${e.stack}`);
   }
   /**
    * Render an empty view.
@@ -360,7 +414,7 @@ class Router extends core.EventEmitter {
    * @protected
    */
   renderEmptyView() {
-    return react.createElement(NestedView, {});
+    return React.createElement(NestedView, {});
   }
   /**
    * Create a valid href for the given page.
@@ -389,7 +443,7 @@ class Router extends core.EventEmitter {
    * @protected
    */
   renderView(index, path, view = this.renderEmptyView()) {
-    return react.createElement(
+    return React.createElement(
       RouterLayerContext.Provider,
       {
         value: {
@@ -517,7 +571,12 @@ class ReactBrowserProvider {
   router = core.$inject(Router);
   root;
   transitioning;
-  state = { layers: [], pathname: "", search: "" };
+  state = {
+    layers: [],
+    pathname: "",
+    search: "",
+    context: {}
+  };
   /**
    *
    */
@@ -599,12 +658,17 @@ class ReactBrowserProvider {
     this.transitioning = void 0;
     return { url };
   }
+  renderHelmetContext(ctx) {
+    if (ctx.title) {
+      this.document.title = ctx.title;
+    }
+  }
   /**
    * Get embedded layers from the server.
    *
    * @protected
    */
-  getEmbeddedCache() {
+  getHydrationState() {
     try {
       if ("__ssr" in window && typeof window.__ssr === "object") {
         return window.__ssr;
@@ -627,6 +691,18 @@ class ReactBrowserProvider {
     this.document.body.appendChild(div);
     return div;
   }
+  getUserFromCookies() {
+    const cookies = this.document.cookie.split("; ");
+    const userCookie = cookies.find((cookie) => cookie.startsWith("user="));
+    try {
+      if (userCookie) {
+        return JSON.parse(decodeURIComponent(userCookie.split("=")[1]));
+      }
+    } catch (error) {
+      this.log.warn(error, "Failed to parse user cookie");
+    }
+    return void 0;
+  }
   // -------------------------------------------------------------------------------------------------------------------
   /**
    *
@@ -635,11 +711,12 @@ class ReactBrowserProvider {
   ready = core.$hook({
     name: "ready",
     handler: async () => {
-      const cache = this.getEmbeddedCache();
+      const cache = this.getHydrationState();
       const previous = cache?.layers ?? [];
-      const session = cache?.session ?? await this.client.of().session();
       await this.render({ previous });
-      const element = this.router.root(this.state, session);
+      const element = this.router.root(this.state, {
+        user: cache?.user ?? this.getUserFromCookies()
+      });
       if (previous.length > 0) {
         this.root = client.hydrateRoot(this.getRootElement(), element);
         this.log.info("Hydrated root element");
@@ -651,6 +728,11 @@ class ReactBrowserProvider {
       window.addEventListener("popstate", () => {
         this.render();
       });
+      this.router.on("end", ({ context }) => {
+        if (context.helmet) {
+          this.renderHelmetContext(context.helmet);
+        }
+      });
     }
   });
   /**
@@ -668,6 +750,38 @@ class ReactBrowserProvider {
   });
 }
 
+class Auth {
+  alepha = core.$inject(core.Alepha);
+  log = core.$logger();
+  client = core.$inject(server.HttpClient);
+  api = "/api/_oauth/login";
+  start = core.$hook({
+    name: "start",
+    handler: async () => {
+      this.client.on("onError", (err) => {
+        if (err.statusCode === 401) {
+          this.login();
+        }
+      });
+    }
+  });
+  login = (provider) => {
+    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}`;
+      if (browser.transitioning) {
+        throw new RedirectionError(browser.state.pathname);
+      }
+      return;
+    }
+    throw new RedirectionError(this.api);
+  };
+  logout = () => {
+    window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
+  };
+}
+
 class RouterHookApi {
   constructor(state, layer, browser) {
     this.state = state;
@@ -777,12 +891,12 @@ class RouterHookApi {
 }
 
 const useRouter = () => {
-  const ctx = react.useContext(RouterContext);
-  const layer = react.useContext(RouterLayerContext);
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
   if (!ctx || !layer) {
     throw new Error("useRouter must be used within a RouterProvider");
   }
-  return react.useMemo(
+  return React.useMemo(
     () => new RouterHookApi(
       ctx.state,
       layer,
@@ -792,51 +906,18 @@ const useRouter = () => {
   );
 };
 
-const useActive = (path) => {
+const Link = (props) => {
+  React.useContext(RouterContext);
   const router = useRouter();
-  const ctx = react.useContext(RouterContext);
-  const layer = react.useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  let name;
-  if (typeof path === "object" && path.options.name) {
-    name = path.options.name;
-  }
-  const [current, setCurrent] = react.useState(ctx.state.pathname);
-  const href = react.useMemo(() => router.createHref(path, layer), [path, layer]);
-  const [isPending, setPending] = react.useState(false);
-  const isActive = current === href;
-  react.useEffect(
-    () => ctx.router.on("end", ({ pathname }) => setCurrent(pathname)),
-    []
-  );
-  return {
-    name,
-    isPending,
-    isActive,
-    anchorProps: {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        if (isActive) return;
-        if (isPending) return;
-        setPending(true);
-        router.go(href).then(() => {
-          setPending(false);
-        });
-      }
-    }
-  };
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.createAnchorProps(props.to), ...props, children: props.children });
 };
 
-const useInject = (classEntry) => {
-  const ctx = react.useContext(RouterContext);
+const useInject = (clazz) => {
+  const ctx = React.useContext(RouterContext);
   if (!ctx) {
     throw new Error("useRouter must be used within a <RouterProvider>");
   }
-  return ctx.alepha.get(classEntry);
+  return ctx.alepha.get(clazz);
 };
 
 const useClient = () => {
@@ -844,17 +925,17 @@ const useClient = () => {
 };
 
 const useQueryParams = (schema, options = {}) => {
-  const ctx = react.useContext(RouterContext);
+  const ctx = React.useContext(RouterContext);
   if (!ctx) {
     throw new Error("useQueryParams must be used within a RouterProvider");
   }
   const key = options.key ?? "q";
   const router = useRouter();
   const querystring = router.query[key];
-  const [queryParams, setQueryParams] = react.useState(
+  const [queryParams, setQueryParams] = React.useState(
     decode(ctx.alepha, schema, router.query[key])
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     setQueryParams(decode(ctx.alepha, schema, querystring));
   }, [querystring]);
   return [
@@ -882,12 +963,12 @@ const decode = (alepha, schema, data) => {
 };
 
 const useRouterEvents = (opts = {}) => {
-  const ctx = react.useContext(RouterContext);
-  const layer = react.useContext(RouterLayerContext);
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
   if (!ctx || !layer) {
     throw new Error("useRouter must be used within a RouterProvider");
   }
-  react.useEffect(() => {
+  React.useEffect(() => {
     const subs = [];
     const onBegin = opts.onBegin;
     const onEnd = opts.onEnd;
@@ -910,13 +991,13 @@ const useRouterEvents = (opts = {}) => {
 };
 
 const useRouterState = () => {
-  const ctx = react.useContext(RouterContext);
-  const layer = react.useContext(RouterLayerContext);
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
   if (!ctx || !layer) {
     throw new Error("useRouter must be used within a RouterProvider");
   }
-  const [state, setState] = react.useState(ctx.state);
-  react.useEffect(
+  const [state, setState] = React.useState(ctx.state);
+  React.useEffect(
     () => ctx.router.on("end", (it) => {
       setState({ ...it });
     }),
@@ -925,17 +1006,77 @@ const useRouterState = () => {
   return state;
 };
 
+const useActive = (path) => {
+  const router = useRouter();
+  const ctx = React.useContext(RouterContext);
+  const layer = React.useContext(RouterLayerContext);
+  if (!ctx || !layer) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  let name;
+  if (typeof path === "object" && path.options.name) {
+    name = path.options.name;
+  }
+  const [current, setCurrent] = React.useState(ctx.state.pathname);
+  const href = React.useMemo(() => router.createHref(path, layer), [path, layer]);
+  const [isPending, setPending] = React.useState(false);
+  const isActive = current === href;
+  React.useEffect(
+    () => ctx.router.on("end", ({ pathname }) => setCurrent(pathname)),
+    []
+  );
+  return {
+    name,
+    isPending,
+    isActive,
+    anchorProps: {
+      href,
+      onClick: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (isActive) return;
+        if (isPending) return;
+        setPending(true);
+        router.go(href).then(() => {
+          setPending(false);
+        });
+      }
+    }
+  };
+};
+
+const useAuth = () => {
+  const ctx = React.useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within a RouterContext");
+  }
+  const args = ctx.args ?? {};
+  return {
+    user: args.user,
+    logout: () => {
+      ctx.alepha.get(Auth).logout();
+    },
+    login: (provider) => {
+      ctx.alepha.get(Auth).login();
+    }
+  };
+};
+
+exports.$auth = $auth;
 exports.$page = $page;
+exports.Auth = Auth;
+exports.Link = Link;
 exports.NestedView = NestedView;
 exports.PageDescriptorProvider = PageDescriptorProvider;
 exports.ReactBrowserProvider = ReactBrowserProvider;
-exports.RedirectException = RedirectException;
+exports.RedirectionError = RedirectionError;
 exports.Router = Router;
 exports.RouterContext = RouterContext;
 exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
 exports.pageDescriptorKey = pageDescriptorKey;
 exports.useActive = useActive;
+exports.useAuth = useAuth;
 exports.useClient = useClient;
 exports.useInject = useInject;
 exports.useQueryParams = useQueryParams;