@alepha/react 0.7.2 → 0.7.4

package/dist/{useRouterState-C2uo0jXu.cjs → ReactBrowserProvider-CXDElhnK.cjs}

@@ -1,10 +1,10 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var core = require('@alepha/core');
-var React = require('react');
 var server = require('@alepha/server');
 var router = require('@alepha/router');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 const KEY = "PAGE";
 const $page = (options) => {
@@ -945,253 +945,16 @@ class ReactBrowserProvider {
   });
 }
 
-class RouterHookApi {
-  constructor(pages, state, layer, browser) {
-    this.pages = pages;
-    this.state = state;
-    this.layer = layer;
-    this.browser = browser;
-  }
-  get current() {
-    return this.state;
-  }
-  get pathname() {
-    return this.state.pathname;
-  }
-  get query() {
-    const query = {};
-    for (const [key, value] of new URLSearchParams(
-      this.state.search
-    ).entries()) {
-      query[key] = String(value);
-    }
-    return query;
-  }
-  async back() {
-    this.browser?.history.back();
-  }
-  async forward() {
-    this.browser?.history.forward();
-  }
-  async invalidate(props) {
-    await this.browser?.invalidate(props);
-  }
-  /**
-   * Create a valid href for the given pathname.
-   *
-   * @param pathname
-   * @param layer
-   */
-  createHref(pathname, layer = this.layer, options = {}) {
-    if (typeof pathname === "object") {
-      pathname = pathname.options.path ?? "";
-    }
-    if (options.params) {
-      for (const [key, value] of Object.entries(options.params)) {
-        pathname = pathname.replace(`:${key}`, String(value));
-      }
-    }
-    return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
-  }
-  async go(path, options) {
-    for (const page of this.pages) {
-      if (page.name === path) {
-        path = page.path ?? "";
-        break;
-      }
-    }
-    await this.browser?.go(this.createHref(path, this.layer, options), options);
-  }
-  anchor(path, options = {}) {
-    for (const page of this.pages) {
-      if (page.name === path) {
-        path = page.path ?? "";
-        break;
-      }
-    }
-    const href = this.createHref(path, this.layer, options);
-    return {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.go(path, options).catch(console.error);
-      }
-    };
-  }
-  /**
-   * Set query params.
-   *
-   * @param record
-   * @param options
-   */
-  setQueryParams(record, options = {}) {
-    const func = typeof record === "function" ? record : () => record;
-    const search = new URLSearchParams(func(this.query)).toString();
-    const state = search ? `${this.pathname}?${search}` : this.pathname;
-    if (options.push) {
-      window.history.pushState({}, "", state);
-    } else {
-      window.history.replaceState({}, "", state);
-    }
-  }
-}
-
-const useRouter = () => {
-  const ctx = React.useContext(RouterContext);
-  const layer = React.useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const pages = React.useMemo(() => {
-    return ctx.alepha.get(PageDescriptorProvider).getPages();
-  }, []);
-  return React.useMemo(
-    () => new RouterHookApi(
-      pages,
-      ctx.state,
-      layer,
-      ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
-    ),
-    [layer]
-  );
-};
-
-const Link = (props) => {
-  React.useContext(RouterContext);
-  const router = useRouter();
-  const to = typeof props.to === "string" ? props.to : props.to[core.OPTIONS].path;
-  if (!to) {
-    return null;
-  }
-  const can = typeof props.to === "string" ? void 0 : props.to[core.OPTIONS].can;
-  if (can && !can()) {
-    return null;
-  }
-  const name = typeof props.to === "string" ? void 0 : props.to[core.OPTIONS].name;
-  const anchorProps = {
-    ...props,
-    to: void 0
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...router.anchor(to), ...anchorProps, children: props.children ?? name });
-};
-
-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;
-  useRouterEvents({
-    onEnd: ({ state }) => setCurrent(state.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 useInject = (clazz) => {
-  const ctx = React.useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useRouter must be used within a <RouterProvider>");
-  }
-  return React.useMemo(() => ctx.alepha.get(clazz), []);
-};
-
-const useClient = (_scope) => {
-  return useInject(server.HttpClient).of();
-};
-
-const useQueryParams = (schema, options = {}) => {
-  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(
-    decode(ctx.alepha, schema, router.query[key])
-  );
-  React.useEffect(() => {
-    setQueryParams(decode(ctx.alepha, schema, querystring));
-  }, [querystring]);
-  return [
-    queryParams,
-    (queryParams2) => {
-      setQueryParams(queryParams2);
-      router.setQueryParams((data) => {
-        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
-      });
-    }
-  ];
-};
-const encode = (alepha, schema, data) => {
-  return btoa(JSON.stringify(alepha.parse(schema, data)));
-};
-const decode = (alepha, schema, data) => {
-  try {
-    return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-  } catch (_error) {
-    return {};
-  }
-};
-
-const useRouterState = () => {
-  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);
-  useRouterEvents({
-    onEnd: ({ state: state2 }) => setState({ ...state2 })
-  });
-  return state;
-};
-
 exports.$page = $page;
 exports.BrowserRouterProvider = BrowserRouterProvider;
 exports.ClientOnly = ClientOnly;
 exports.ErrorBoundary = ErrorBoundary;
-exports.Link = Link;
 exports.NestedView = NestedView;
 exports.PageDescriptorProvider = PageDescriptorProvider;
 exports.ReactBrowserProvider = ReactBrowserProvider;
 exports.RedirectionError = RedirectionError;
 exports.RouterContext = RouterContext;
-exports.RouterHookApi = RouterHookApi;
 exports.RouterLayerContext = RouterLayerContext;
 exports.isPageRoute = isPageRoute;
-exports.useActive = useActive;
 exports.useAlepha = useAlepha;
-exports.useClient = useClient;
-exports.useInject = useInject;
-exports.useQueryParams = useQueryParams;
-exports.useRouter = useRouter;
 exports.useRouterEvents = useRouterEvents;
-exports.useRouterState = useRouterState;

package/dist/{useRouterState-D5__ZcUV.js → ReactBrowserProvider-ufHSOTmv.js}

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { __descriptor, OPTIONS, NotImplementedError, KIND, t, $logger, $inject, Alepha, $hook } from '@alepha/core';
-import React, { useState, useEffect, createContext, useContext, createElement, StrictMode, useMemo } from 'react';
 import { HttpClient } from '@alepha/server';
 import { RouterProvider } from '@alepha/router';
+import React, { useState, useEffect, createContext, useContext, createElement, StrictMode } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const KEY = "PAGE";
 const $page = (options) => {
@@ -943,233 +943,4 @@ class ReactBrowserProvider {
   });
 }
 
-class RouterHookApi {
-  constructor(pages, state, layer, browser) {
-    this.pages = pages;
-    this.state = state;
-    this.layer = layer;
-    this.browser = browser;
-  }
-  get current() {
-    return this.state;
-  }
-  get pathname() {
-    return this.state.pathname;
-  }
-  get query() {
-    const query = {};
-    for (const [key, value] of new URLSearchParams(
-      this.state.search
-    ).entries()) {
-      query[key] = String(value);
-    }
-    return query;
-  }
-  async back() {
-    this.browser?.history.back();
-  }
-  async forward() {
-    this.browser?.history.forward();
-  }
-  async invalidate(props) {
-    await this.browser?.invalidate(props);
-  }
-  /**
-   * Create a valid href for the given pathname.
-   *
-   * @param pathname
-   * @param layer
-   */
-  createHref(pathname, layer = this.layer, options = {}) {
-    if (typeof pathname === "object") {
-      pathname = pathname.options.path ?? "";
-    }
-    if (options.params) {
-      for (const [key, value] of Object.entries(options.params)) {
-        pathname = pathname.replace(`:${key}`, String(value));
-      }
-    }
-    return pathname.startsWith("/") ? pathname : `${layer.path}/${pathname}`.replace(/\/\/+/g, "/");
-  }
-  async go(path, options) {
-    for (const page of this.pages) {
-      if (page.name === path) {
-        path = page.path ?? "";
-        break;
-      }
-    }
-    await this.browser?.go(this.createHref(path, this.layer, options), options);
-  }
-  anchor(path, options = {}) {
-    for (const page of this.pages) {
-      if (page.name === path) {
-        path = page.path ?? "";
-        break;
-      }
-    }
-    const href = this.createHref(path, this.layer, options);
-    return {
-      href,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.go(path, options).catch(console.error);
-      }
-    };
-  }
-  /**
-   * Set query params.
-   *
-   * @param record
-   * @param options
-   */
-  setQueryParams(record, options = {}) {
-    const func = typeof record === "function" ? record : () => record;
-    const search = new URLSearchParams(func(this.query)).toString();
-    const state = search ? `${this.pathname}?${search}` : this.pathname;
-    if (options.push) {
-      window.history.pushState({}, "", state);
-    } else {
-      window.history.replaceState({}, "", state);
-    }
-  }
-}
-
-const useRouter = () => {
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const pages = useMemo(() => {
-    return ctx.alepha.get(PageDescriptorProvider).getPages();
-  }, []);
-  return useMemo(
-    () => new RouterHookApi(
-      pages,
-      ctx.state,
-      layer,
-      ctx.alepha.isBrowser() ? ctx.alepha.get(ReactBrowserProvider) : void 0
-    ),
-    [layer]
-  );
-};
-
-const Link = (props) => {
-  React.useContext(RouterContext);
-  const router = useRouter();
-  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()) {
-    return null;
-  }
-  const name = typeof props.to === "string" ? void 0 : props.to[OPTIONS].name;
-  const anchorProps = {
-    ...props,
-    to: void 0
-  };
-  return /* @__PURE__ */ jsx("a", { ...router.anchor(to), ...anchorProps, children: props.children ?? name });
-};
-
-const useActive = (path) => {
-  const router = useRouter();
-  const ctx = useContext(RouterContext);
-  const layer = 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] = useState(ctx.state.pathname);
-  const href = useMemo(() => router.createHref(path, layer), [path, layer]);
-  const [isPending, setPending] = useState(false);
-  const isActive = current === href;
-  useRouterEvents({
-    onEnd: ({ state }) => setCurrent(state.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 useInject = (clazz) => {
-  const ctx = useContext(RouterContext);
-  if (!ctx) {
-    throw new Error("useRouter must be used within a <RouterProvider>");
-  }
-  return useMemo(() => ctx.alepha.get(clazz), []);
-};
-
-const useClient = (_scope) => {
-  return useInject(HttpClient).of();
-};
-
-const useQueryParams = (schema, options = {}) => {
-  const ctx = 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] = useState(
-    decode(ctx.alepha, schema, router.query[key])
-  );
-  useEffect(() => {
-    setQueryParams(decode(ctx.alepha, schema, querystring));
-  }, [querystring]);
-  return [
-    queryParams,
-    (queryParams2) => {
-      setQueryParams(queryParams2);
-      router.setQueryParams((data) => {
-        return { ...data, [key]: encode(ctx.alepha, schema, queryParams2) };
-      });
-    }
-  ];
-};
-const encode = (alepha, schema, data) => {
-  return btoa(JSON.stringify(alepha.parse(schema, data)));
-};
-const decode = (alepha, schema, data) => {
-  try {
-    return alepha.parse(schema, JSON.parse(atob(decodeURIComponent(data))));
-  } catch (_error) {
-    return {};
-  }
-};
-
-const useRouterState = () => {
-  const ctx = useContext(RouterContext);
-  const layer = useContext(RouterLayerContext);
-  if (!ctx || !layer) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-  const [state, setState] = useState(ctx.state);
-  useRouterEvents({
-    onEnd: ({ state: state2 }) => setState({ ...state2 })
-  });
-  return state;
-};
-
-export { $page as $, BrowserRouterProvider as B, ClientOnly as C, ErrorBoundary as E, Link as L, NestedView as N, PageDescriptorProvider as P, RedirectionError as R, RouterContext as a, RouterLayerContext as b, RouterHookApi as c, useAlepha as d, useClient as e, useInject as f, useQueryParams as g, useRouter as h, useRouterEvents as i, useRouterState as j, isPageRoute as k, ReactBrowserProvider as l, useActive as u };
+export { $page as $, BrowserRouterProvider as B, ClientOnly as C, ErrorBoundary as E, NestedView as N, PageDescriptorProvider as P, RouterContext as R, RouterLayerContext as a, ReactBrowserProvider as b, RedirectionError as c, useAlepha as d, isPageRoute as i, useRouterEvents as u };

package/dist/index.browser.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 var core = require('@alepha/core');
-var useRouterState = require('./useRouterState-C2uo0jXu.cjs');
+var ReactBrowserProvider = require('./ReactBrowserProvider-CXDElhnK.cjs');
 var client = require('react-dom/client');
-require('react/jsx-runtime');
-require('react');
 require('@alepha/server');
 require('@alepha/router');
+require('react');
+require('react/jsx-runtime');
 
 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);
+  browserProvider = core.$inject(ReactBrowserProvider.ReactBrowserProvider);
+  browserRouterProvider = core.$inject(ReactBrowserProvider.BrowserRouterProvider);
   env = core.$inject(envSchema);
   log = core.$logger();
   root;
@@ -45,30 +45,14 @@ class ReactBrowserRenderer {
   });
 }
 
-class ReactModule {
-  alepha = core.$inject(core.Alepha);
-  constructor() {
-    this.alepha.with(useRouterState.PageDescriptorProvider).with(useRouterState.ReactBrowserProvider).with(useRouterState.BrowserRouterProvider).with(ReactBrowserRenderer);
-  }
+class AlephaReact {
+  name = "alepha.react";
+  $services = (alepha) => alepha.with(ReactBrowserProvider.PageDescriptorProvider).with(ReactBrowserProvider.ReactBrowserProvider).with(ReactBrowserProvider.BrowserRouterProvider).with(ReactBrowserRenderer);
 }
-core.__bind(useRouterState.$page, ReactModule);
+core.__bind(ReactBrowserProvider.$page, AlephaReact);
 
-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;
+exports.BrowserRouterProvider = ReactBrowserProvider.BrowserRouterProvider;
+exports.PageDescriptorProvider = ReactBrowserProvider.PageDescriptorProvider;
+exports.ReactBrowserProvider = ReactBrowserProvider.ReactBrowserProvider;
+exports.isPageRoute = ReactBrowserProvider.isPageRoute;
+exports.AlephaReact = AlephaReact;

package/dist/index.browser.js

@@ -1,11 +1,11 @@
-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 { t, $inject, $logger, $hook, __bind } from '@alepha/core';
+import { b as ReactBrowserProvider, B as BrowserRouterProvider, $ as $page, P as PageDescriptorProvider } from './ReactBrowserProvider-ufHSOTmv.js';
+export { i as isPageRoute } from './ReactBrowserProvider-ufHSOTmv.js';
 import { hydrateRoot, createRoot } from 'react-dom/client';
-import 'react/jsx-runtime';
-import 'react';
 import '@alepha/server';
 import '@alepha/router';
+import 'react';
+import 'react/jsx-runtime';
 
 const envSchema = t.object({
   REACT_ROOT_ID: t.string({ default: "root" })
@@ -44,12 +44,10 @@ class ReactBrowserRenderer {
   });
 }
 
-class ReactModule {
-  alepha = $inject(Alepha);
-  constructor() {
-    this.alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
-  }
+class AlephaReact {
+  name = "alepha.react";
+  $services = (alepha) => alepha.with(PageDescriptorProvider).with(ReactBrowserProvider).with(BrowserRouterProvider).with(ReactBrowserRenderer);
 }
-__bind($page, ReactModule);
+__bind($page, AlephaReact);
 
-export { $page, ReactBrowserProvider, ReactModule };
+export { AlephaReact, BrowserRouterProvider, PageDescriptorProvider, ReactBrowserProvider };