gemi 0.16.0 → 0.16.2

package/dist/client/index.js

@@ -10,7 +10,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _i, _n, _t, _e, _s, _l, _o, _d, _p, _g, _H_instances, r_fn, R_fn, b_fn, u_fn, m_fn, a_fn, P_fn, E_fn, S_fn, O_fn, k_fn, x_fn, h_fn, f_fn, T_fn, A_fn, y_fn, w_fn, c_fn, C_fn, _a, _i2, _n2, _t2, _e2, _s2, _l2, _b;
-import require$$1, { createContext, useRef, useContext, useState, useEffect, useCallback, useMemo, useSyncExternalStore, lazy, memo, StrictMode, useTransition, isValidElement, createElement, Fragment as Fragment$1 } from "react";
+import require$$1, { createContext, useRef, useContext, useState, useEffect, useCallback, useMemo, useSyncExternalStore, memo, lazy, StrictMode, useTransition, isValidElement, createElement, Fragment as Fragment$1 } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import require$$2, { createPortal } from "react-dom";
 class Subject {
@@ -356,6 +356,64 @@ function useMutation(method, url, ...args) {
     () => new AbortController()
   );
   const formData = useRef(new FormData());
+  async function trigger(input) {
+    setState({
+      data: state.data,
+      error: state.error,
+      loading: true
+    });
+    const [inputs = {}, options = defaultOptions] = args ?? [];
+    const params = "params" in inputs ? { ..._params, ...inputs.params } : _params;
+    const finalUrl = applyParams(String(url).replace(`${method}:`, ""), params);
+    let body = null;
+    const contentType = typeof input === "undefined" || input instanceof FormData ? {} : { "Content-Type": "application/json" };
+    if (input instanceof FormData) {
+      body = input;
+    } else if (typeof input === "undefined") {
+      body = formData.current;
+    } else if (input) {
+      body = JSON.stringify(input);
+    }
+    try {
+      const response = await fetch2(`${host}/api${finalUrl}`, {
+        method,
+        headers: {
+          ...contentType
+        },
+        ...body ? { body } : {},
+        signal: abortController.signal
+      });
+      formData.current = new FormData();
+      const data = await response.json();
+      if (!response.ok) {
+        setState({
+          data: null,
+          error: data.error,
+          loading: false
+        });
+        options.onError(data);
+        return;
+      }
+      options.onSuccess(data);
+      setState({
+        data,
+        error: null,
+        loading: false
+      });
+      return data;
+    } catch (error) {
+      formData.current = new FormData();
+      options.onError(error);
+      setState({
+        data: null,
+        error,
+        loading: false
+      });
+    }
+  }
+  trigger.formData = (formData2) => {
+    return trigger(formData2);
+  };
   return {
     data: state.data,
     error: state.error,
@@ -373,64 +431,7 @@ function useMutation(method, url, ...args) {
       formData.current = new FormData();
       options.onCanceled();
     },
-    trigger: async (input) => {
-      setState({
-        data: state.data,
-        error: state.error,
-        loading: true
-      });
-      const [inputs = {}, options = defaultOptions] = args ?? [];
-      const params = "params" in inputs ? { ..._params, ...inputs.params } : _params;
-      const finalUrl = applyParams(
-        String(url).replace(`${method}:`, ""),
-        params
-      );
-      let body = null;
-      const contentType = typeof input === "undefined" || input instanceof FormData ? {} : { "Content-Type": "application/json" };
-      if (input instanceof FormData) {
-        body = input;
-      } else if (typeof input === "undefined") {
-        body = formData.current;
-      } else if (input) {
-        body = JSON.stringify(input);
-      }
-      try {
-        const response = await fetch2(`${host}/api${finalUrl}`, {
-          method,
-          headers: {
-            ...contentType
-          },
-          ...body ? { body } : {},
-          signal: abortController.signal
-        });
-        formData.current = new FormData();
-        const data = await response.json();
-        if (!response.ok) {
-          setState({
-            data: null,
-            error: data.error,
-            loading: false
-          });
-          options.onError(data);
-          return;
-        }
-        options.onSuccess(data);
-        setState({
-          data,
-          error: null,
-          loading: false
-        });
-        return data;
-      } catch (error) {
-        formData.current = new FormData();
-        options.onError(error);
-        setState({
-          data: null,
-          error,
-          loading: false
-        });
-      }
-    }
+    trigger
   };
 }
 function usePost(url, ...args) {
@@ -2103,13 +2104,42 @@ function useBreadcrumbs() {
   }
   return breadcrumbs.filter((breadcrumb) => (breadcrumb == null ? void 0 : breadcrumb.label.length) > 0);
 }
+const RouteTransitionContext = createContext({
+  isTransitioning: false,
+  targetPath: "",
+  currentPath: ""
+});
+const RouteTransitionProvider = (props) => {
+  const { isPending, isFetching, transitionPath } = props;
+  return /* @__PURE__ */ jsx(
+    RouteTransitionContext.Provider,
+    {
+      value: {
+        isTransitioning: isPending || isFetching,
+        targetPath: transitionPath[1],
+        currentPath: transitionPath[0] || ""
+      },
+      children: props.children
+    }
+  );
+};
+function useRouteTransition() {
+  const context = useContext(RouteTransitionContext);
+  if (!context) {
+    throw new Error(
+      "useRouteTransition must be used within a RouteTransitionProvider"
+    );
+  }
+  return context;
+}
 function normalizeSearch(search) {
   return Object.fromEntries(
     Object.entries(search).filter(([_k, v2]) => v2 !== void 0 && v2 !== null).map(([k2, v2]) => [k2, String(v2)])
   );
 }
-const Link = (props) => {
+const Link = memo((props) => {
   const _params = useParams();
+  const { isTransitioning, targetPath } = useRouteTransition();
   const {
     href,
     onClick,
@@ -2119,7 +2149,7 @@ const Link = (props) => {
     search = {},
     ...rest
   } = { params: _params, search: {}, ...props };
-  const { defaultLocale, ...i18 } = useContext(I18nContext);
+  const { defaultLocale } = useContext(I18nContext);
   const { push } = useNavigate();
   const location = useLocation();
   const searchParams = new URLSearchParams(normalizeSearch(search));
@@ -2138,7 +2168,7 @@ const Link = (props) => {
     "a",
     {
       "data-active": active || currentHref === targetHref,
-      "data-current": currentHref,
+      "data-pending": href === targetPath && isTransitioning,
       href: targetHref,
       onClick: (e) => {
         if (typeof window !== "undefined") {
@@ -2164,7 +2194,7 @@ const Link = (props) => {
       ...rest
     }
   );
-};
+});
 const Redirect = (props) => {
   const { href, params = {}, search = {}, action } = props;
   const { push, replace } = useNavigate();
@@ -31826,9 +31856,14 @@ const Tree = memo(
 );
 const Routes = (props) => {
   const { componentTree } = props;
-  const [, startTransition] = useTransition();
+  const [isPending, startTransition] = useTransition();
+  const [isFetching, setIsFetching] = useState(false);
   const { fetch: fetch2, host } = useContext(HttpClientContext);
   const { routerSubject, fetchRouteCSS } = useContext(ClientRouterContext);
+  const [transitionPath, setTransitionPath] = useState([
+    null,
+    routerSubject.getValue().pathname
+  ]);
   const { breadcrumbs, pageData, i18n, prefetchedData } = useContext(ServerDataContext);
   const [routeState, setRouteState] = useState({
     params: routerSubject.getValue().params,
@@ -31849,6 +31884,10 @@ const Routes = (props) => {
   useEffect(() => {
     return routerSubject.subscribe(async (routerState) => {
       const { pathname, search, state, views } = routerState;
+      setTransitionPath((current) => {
+        const [, prevTarget] = current;
+        return [prevTarget, pathname];
+      });
       if (routerState.views.length === 0) {
         setRouteState((routerState2) => ({
           ...routerState2,
@@ -31867,6 +31906,7 @@ const Routes = (props) => {
       const _pathname = localeSegment.length > 0 && pathname === "/" ? "" : pathname;
       const pathnameWithLocaleSegment = `${localeSegment}${_pathname}`;
       const url = `${host}${pathnameWithLocaleSegment}.json${search}`;
+      setIsFetching(true);
       const [res] = await Promise.all([
         fetch2(url),
         fetchRouteCSS(pathname),
@@ -31912,17 +31952,26 @@ const Routes = (props) => {
           });
         });
       }
+      setIsFetching(false);
     });
   }, [routerSubject, fetchRouteCSS, fetch2, host, replace]);
-  return /* @__PURE__ */ jsx(RouteStateProvider, { state: routeState, children: /* @__PURE__ */ jsx(
-    Tree,
+  return /* @__PURE__ */ jsx(
+    RouteTransitionProvider,
     {
-      action: routeState.action,
-      pathname: applyParams$1(routeState.pathname ?? "/", routeState.params),
-      tree: componentTree,
-      entries: routeState.pathname ? routeState.views : ["404"]
+      isPending,
+      isFetching,
+      transitionPath,
+      children: /* @__PURE__ */ jsx(RouteStateProvider, { state: routeState, children: /* @__PURE__ */ jsx(
+        Tree,
+        {
+          action: routeState.action,
+          pathname: applyParams$1(routeState.pathname ?? "/", routeState.params),
+          tree: componentTree,
+          entries: routeState.pathname ? routeState.views : ["404"]
+        }
+      ) })
     }
-  ) });
+  );
 };
 const ClientRouter = (props) => {
   const { RootLayout } = props;
@@ -32231,9 +32280,9 @@ function useTranslator(component) {
   };
   return parse;
 }
-const deleteLocaleCookie = async (locale) => {
+const setCookie = async (locale) => {
   try {
-    return await globalThis.cookieStore.delete("i18n-locale");
+    return await globalThis.cookieStore.set("i18n-locale", locale);
   } catch (err) {
     return await fetch(`/api/__gemi__/services/i18n/set-locale/${locale}`);
   }
@@ -32245,7 +32294,7 @@ function useLocale() {
   const params = useParams();
   const setLocale = async (locale) => {
     const urlSearchParams = new URLSearchParams(search);
-    deleteLocaleCookie(locale).then(() => {
+    setCookie(locale).then(() => {
       replace(pathname, {
         locale,
         // TODO: fix: this conversion is wrong, because there can be multiple
@@ -32327,6 +32376,7 @@ export {
   useQuery,
   useResetPassword,
   useRoute,
+  useRouteTransition,
   useSearchParams,
   useSignIn,
   useSignOut,