gemi 0.4.13 → 0.4.14

package/dist/client/index.js

@@ -10,303 +10,305 @@ 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, useContext, useState, useEffect, useRef, lazy, startTransition, StrictMode, Suspense } from "react";
+import require$$1, { createContext, useState, useEffect, useContext, useSyncExternalStore, useRef, lazy, startTransition, StrictMode, Suspense } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
 import require$$2 from "react-dom";
-const ServerDataContext = createContext({});
-const ServerDataProvider = (props) => {
-  let _value = props.value;
-  if (props.value) {
-    _value = props.value;
-  } else {
-    _value = window.__GEMI_DATA__;
+class Subject {
+  constructor(initialValue) {
+    __publicField(this, "subscribers", /* @__PURE__ */ new Set());
+    __publicField(this, "value");
+    this.value = initialValue;
   }
-  return /* @__PURE__ */ jsx(ServerDataContext.Provider, { value: _value, children: props.children });
-};
-function useUser() {
-  const { auth } = useContext(ServerDataContext);
-  const [user, setUser] = useState((auth == null ? void 0 : auth.user) ?? {});
-  useEffect(() => {
-    if (auth == null ? void 0 : auth.user) {
-      setUser(auth == null ? void 0 : auth.user);
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+  next(value) {
+    this.value = value;
+    this.subscribers.forEach((subscriber) => subscriber(value));
+  }
+  getValue() {
+    return this.value;
+  }
+}
+function applyParams$1(url, params = {}) {
+  let out = url;
+  for (const segment of url.split("/")) {
+    if (segment.includes(":")) {
+      const key = segment.split(":")[1];
+      out = out.replace(`:${key}`, params[key]);
     }
-  }, [auth == null ? void 0 : auth.user]);
-  return user;
+  }
+  return out;
 }
-function useQuery(url, options) {
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    async function execute() {
-      setLoading(true);
-      try {
-        const [, _url] = String(url).split(":");
-        const res = await fetch(`/api${url}`);
-        if (res.ok) {
-          const json = await res.json();
-          setData(json);
-        }
-      } catch (err) {
-        setError(JSON.stringify(err));
-      } finally {
-        setLoading(false);
+class Resource {
+  constructor(key, fallbackData = null) {
+    __publicField(this, "key");
+    __publicField(this, "state");
+    __publicField(this, "stale", true);
+    __publicField(this, "staleTimer", null);
+    this.key = key;
+    this.state = new Subject({
+      data: fallbackData,
+      error: null,
+      loading: false
+    });
+    if (fallbackData) {
+      this.stale = false;
+    }
+  }
+  mutate(fn) {
+    const data = fn(this.state.getValue().data);
+    this.state.next({
+      data,
+      error: null,
+      loading: false
+    });
+  }
+  fetch() {
+    const { loading, data, error } = this.state.getValue();
+    if (loading) {
+      return this.state;
+    }
+    if (!data) {
+      this.state.next({
+        data,
+        error,
+        loading: true
+      });
+      this.resolve();
+    } else {
+      if (this.stale) {
+        this.resolve();
+        return this.state;
       }
     }
-    execute();
-  }, [url, options]);
-  return { data, loading, error };
+    return this.state;
+  }
+  resolve() {
+    const { key, options } = JSON.parse(this.key);
+    const { query, params } = options;
+    const url = key.split("GET:")[1];
+    const searchParams = new URLSearchParams(query);
+    const finalUrl = [applyParams$1(url, params), searchParams.toString()].filter((s) => s.length > 0).join("?");
+    fetch(`/api${finalUrl}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    }).then((res) => {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw new Error("Failed to fetch");
+      }
+    }).then((data) => {
+      this.stale = false;
+      this.mutate(() => data);
+      clearTimeout(this.staleTimer);
+      this.staleTimer = setTimeout(() => {
+        this.stale = true;
+      }, 1e3 * 60);
+    }).catch((err) => {
+      this.state.next({
+        data: null,
+        error: err,
+        loading: false
+      });
+    });
+  }
+}
+class QueryManager {
+  constructor() {
+    __publicField(this, "resources", /* @__PURE__ */ new Map());
+  }
+  createResourceKey(key, options = {}) {
+    return JSON.stringify({ key, options });
+  }
+  fetch(key, options = {}, config = {}) {
+    const resourceKey = this.createResourceKey(key, options);
+    if (!this.resources.has(resourceKey)) {
+      this.resources.set(
+        resourceKey,
+        new Resource(resourceKey, config.fallbackData)
+      );
+    }
+    const resource = this.resources.get(resourceKey);
+    resource.fetch.call(resource);
+    return resource;
+  }
+}
+const QueryManagerContext = createContext(
+  {}
+);
+const QueryManagerProvider = ({ children }) => {
+  const [manager] = useState(() => new QueryManager());
+  useEffect(() => {
+    if (typeof window !== void 0) {
+      window.qm = manager;
+    }
+  }, [manager]);
+  return /* @__PURE__ */ jsx(QueryManagerContext.Provider, { value: { manager }, children });
+};
+const defaultConfig = {
+  pathPrefix: "",
+  fallbackData: null
+};
+function useQuery(url, ...args) {
+  const defaultOptions2 = {
+    params: {},
+    query: {}
+  };
+  const [options = defaultOptions2, config = defaultConfig] = args;
+  const { manager } = useContext(QueryManagerContext);
+  const [, path] = url.split("GET:");
+  const fullUrl = ["GET:", config.pathPrefix, path].join("");
+  const [resource] = useState(
+    () => manager.fetch(fullUrl, options, { fallbackData: config.fallbackData })
+  );
+  const state = useSyncExternalStore(
+    resource.state.subscribe.bind(resource.state),
+    resource.state.getValue.bind(resource.state),
+    resource.state.getValue.bind(resource.state)
+  );
+  return {
+    data: state.data,
+    loading: state.loading,
+    error: state.error,
+    mutate: resource.mutate.bind(resource)
+  };
 }
 function applyParams(url, params = {}) {
   let out = url;
   for (const [key, value] of Object.entries(params)) {
-    out.replace(`:${key}?`, value);
-    out.replace(`:${key}`, value);
+    out = out.replace(`:${key}?`, value).replace(`:${key}`, value);
   }
   return out;
 }
+const defaultOptions = {
+  autoInvalidate: false,
+  pathPrefix: "",
+  onSuccess: () => {
+  },
+  onError: () => {
+  }
+};
 function useMutation(url, ...args) {
-  const [loading, setIsPending] = useState(false);
-  const [data, setData] = useState(null);
+  const [state, setState] = useState({
+    data: null,
+    error: null,
+    loading: false
+  });
   return {
-    data,
-    loading,
-    error: {},
+    ...state,
     trigger: async (input) => {
-      setIsPending(true);
-      const [inputs, _options] = args;
+      setState((state2) => ({
+        data: state2.data,
+        error: state2.error,
+        loading: true
+      }));
+      const [inputs = { params: {}, query: {} }, options = defaultOptions] = args ?? [];
+      const { pathPrefix } = options;
+      const { query = {} } = inputs ?? {};
       const params = "params" in inputs ? inputs.params : {};
-      const [method, _url] = String(url).split(":");
-      const finalUrl = applyParams(_url, params);
-      const response = await fetch(`/api${finalUrl}`, {
+      const [method] = String(url).split(":");
+      const finalUrl = [
+        applyParams(String(url).replace(`${method}:`, ""), params),
+        new URLSearchParams(query).toString()
+      ].join("?");
+      let body = null;
+      const contentType = input instanceof FormData ? {} : { "Content-Type": "application/json" };
+      if (input instanceof FormData) {
+        body = input;
+      } else if (input) {
+        body = JSON.stringify(input);
+      }
+      const response = await fetch(`/api${pathPrefix}${finalUrl}`, {
         method,
         headers: {
-          "Content-Type": "application/json"
+          ...contentType
         },
-        ...input ? { body: JSON.stringify(input) } : {}
-      });
-      const data2 = await response.json();
-      setData(data2);
-      setIsPending(false);
-      return data2;
-    }
-  };
-}
-class InputSubject {
-  constructor(initialValue, type, autoFocus = false, validateFn) {
-    __publicField(this, "type");
-    __publicField(this, "state", {
-      isDirty: false,
-      value: null,
-      error: null,
-      isFocused: false,
-      isTouched: false,
-      isInvalid: false
-    });
-    __publicField(this, "subscribers", /* @__PURE__ */ new Set());
-    __publicField(this, "validateFn");
-    __publicField(this, "subscribe", (fn) => {
-      this.subscribers.add(fn);
-      return () => {
-        this.subscribers.delete(fn);
-      };
-    });
-    __publicField(this, "getState", () => {
-      return this.state;
-    });
-    __publicField(this, "next", (state) => {
-      this.state = {
-        ...this.state,
-        ...state,
-        isInvalid: !!state.error
-      };
-      this.subscribers.forEach((subscriber) => {
-        subscriber(this.state);
+        ...body ? { body } : {}
       });
-    });
-    this.state.isFocused = autoFocus;
-    this.state.value = initialValue;
-    this.validateFn = validateFn ?? (() => null);
-    this.type = type;
-  }
-}
-const FormContext = createContext({});
-const inputTypeInitialValueMap = {
-  text: "",
-  number: 0,
-  checkbox: false,
-  email: "",
-  password: ""
-};
-function Form(props) {
-  const { onSubmit, schema, ...rest } = props;
-  const inputSubjectsRef = useRef(/* @__PURE__ */ new Map());
-  const getInputValueSubject = (props2) => {
-    if (!inputSubjectsRef.current.has(props2.name)) {
-      const initialValue = props2.value ?? props2.defaultValue ?? (inputTypeInitialValueMap == null ? void 0 : inputTypeInitialValueMap[props2.type]) ?? "";
-      inputSubjectsRef.current.set(
-        props2.name,
-        new InputSubject(
-          initialValue,
-          props2.type ?? "text",
-          props2.autoFocus,
-          props2.validate
-        )
-      );
-    }
-    return inputSubjectsRef.current.get(props2.name);
-  };
-  const getInputValueSubjectByName = (name) => {
-    return inputSubjectsRef.current.get(name);
-  };
-  const validateSingleField = (name, value) => {
-    let values = {};
-    for (const [name2, inputSubject2] of inputSubjectsRef.current.entries()) {
-      const { value: value2 } = inputSubject2.getState();
-      values[name2] = value2;
-    }
-    values[name] = value;
-    const inputSubject = inputSubjectsRef.current.get(name);
-    if (inputSubject) {
-      const error = inputSubject.validateFn(value);
-      if (error) {
-        return error;
-      }
-      if (schema) {
-        const result = schema.safeParse(values);
-        if (!result.success) {
-          for (let schemaError of result.error.errors) {
-            if (schemaError.path[0] === name) {
-              return schemaError.message;
-            }
-          }
+      try {
+        const data = await response.json();
+        if (!response.ok) {
+          setState(() => ({
+            data: null,
+            error: data.error,
+            loading: false
+          }));
+          return;
         }
-      }
-    }
-    return null;
-  };
-  const beforeSubmit = () => {
-    let values = {};
-    let errors = {};
-    for (const [name, inputSubject] of inputSubjectsRef.current.entries()) {
-      const { value } = inputSubject.getState();
-      const error = inputSubject.validateFn(values[name]);
-      values[name] = value;
-      errors[name] = error;
-    }
-    if (schema) {
-      const result = schema.safeParse(values);
-      if (!result.success) {
-        result.error.errors.reverse().forEach((schemaError) => {
-          errors[String(schemaError.path[0])] = schemaError.message;
+        options.onSuccess(data);
+        setState({
+          data,
+          error: null,
+          loading: false
         });
+        return data;
+      } catch (error) {
+        setState((state2) => ({
+          data: state2.data,
+          error,
+          loading: false
+        }));
       }
     }
-    for (const [name, inputSubject] of inputSubjectsRef.current.entries()) {
-      const error = errors[name] ? errors[name] : null;
-      inputSubject == null ? void 0 : inputSubject.next({ error, isTouched: true });
-    }
-    return {
-      errors,
-      values
-    };
   };
-  const reset = () => {
-    for (const [, inputSubject] of inputSubjectsRef.current.entries()) {
-      inputSubject.next({
-        error: null,
-        isDirty: false,
-        isTouched: false,
-        isInvalid: false,
-        value: (inputTypeInitialValueMap == null ? void 0 : inputTypeInitialValueMap[inputSubject.type]) ?? ""
-      });
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    FormContext.Provider,
-    {
-      value: {
-        getInputValueSubject,
-        getInputValueSubjectByName,
-        validateSingleField
-      },
-      children: /* @__PURE__ */ jsx(
-        "form",
-        {
-          ...rest,
-          onSubmit: (e) => {
-            e.preventDefault();
-            const { errors, values } = beforeSubmit();
-            const hasErrors = Object.values(errors).some((error) => error);
-            if (!hasErrors) {
-              onSubmit(e, { values, reset });
-            }
-          }
-        }
-      )
-    }
-  );
 }
 const MutationContext = createContext({
   isPending: false,
   result: null
 });
-const Mutation = (props) => {
-  const { method = "POST" } = props;
-  const [isPending, setIsPending] = useState(false);
+function Form(props) {
+  const {
+    action,
+    pathPrefix,
+    onSuccess,
+    onError,
+    params,
+    className,
+    ...formProps
+  } = "params" in props ? props : { ...props, params: {} };
   const formRef = useRef(null);
-  const [result, setResult] = useState(null);
-  const [formError, setFormError] = useState(null);
-  const [validationErrors, setValidationErrors] = useState({});
-  const action = async (e) => {
-    e.preventDefault();
-    const formData = new FormData(formRef.current);
-    setIsPending(true);
-    setResult(null);
-    try {
-      const res = await fetch(`/api${props.url}`, {
-        method,
-        body: formData
-      });
-      const data = await res.json();
-      if (!res.ok) {
-        if ("error" in data) {
-          if (data.error.kind === "validation_error") {
-            setValidationErrors(data.error.messages);
-          }
-          if (data.error.kind === "form_error") {
-            console.log(data.error.message);
-            setFormError(data.error.message);
-          }
-        }
-      } else {
-        if (props.onSuccess) {
-          props.onSuccess(data);
-        }
-        setResult(data);
-      }
-    } catch (err) {
-      console.log(err);
+  const { trigger, data, error, loading } = useMutation(
+    action,
+    {
+      params
+    },
+    {
+      pathPrefix,
+      onSuccess,
+      onError
     }
-    setIsPending(false);
+  );
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    trigger(new FormData(formRef.current));
   };
+  const validationErrors = (error == null ? void 0 : error.kind) === "validation_error" ? error.messages : {};
+  const formError = (error == null ? void 0 : error.kind) === "form_error" ? error.message : null;
   return /* @__PURE__ */ jsx(
     MutationContext.Provider,
     {
-      value: { isPending, result, validationErrors, formError },
+      value: { isPending: loading, result: data, validationErrors, formError },
       children: /* @__PURE__ */ jsx(
         "form",
         {
-          className: "group",
-          "data-pending": isPending,
+          className: ["group", className].filter(Boolean).join(" "),
+          "data-loading": loading,
           ref: formRef,
-          onSubmit: action,
+          onSubmit: handleSubmit,
+          ...formProps,
           children: props.children
         }
       )
     }
   );
-};
+}
 function useMutationStatus() {
   const { isPending } = useContext(MutationContext);
   return { isPending };
@@ -326,6 +328,12 @@ const ValidationErrors = (props) => {
   }
   return null;
 };
+const FormField = (props) => {
+  const { name, children, ...rest } = props;
+  const { validationErrors } = useContext(MutationContext);
+  const errors = validationErrors[name] || [];
+  return /* @__PURE__ */ jsx("div", { "data-hasError": errors.length > 0, ...rest, children });
+};
 const FormError = (props) => {
   const { formError } = useContext(MutationContext);
   if (formError) {
@@ -586,26 +594,6 @@ function parsePath(path) {
   }
   return parsedPath;
 }
-class Subject {
-  constructor(initialValue) {
-    __publicField(this, "subscribers", /* @__PURE__ */ new Set());
-    __publicField(this, "value");
-    this.value = initialValue;
-  }
-  subscribe(subscriber) {
-    this.subscribers.add(subscriber);
-    return () => {
-      this.subscribers.delete(subscriber);
-    };
-  }
-  next(value) {
-    this.value = value;
-    this.subscribers.forEach((subscriber) => subscriber(value));
-  }
-  getValue() {
-    return this.value;
-  }
-}
 function flattenComponentTree(componentTree) {
   let out = [];
   for (const [root, branches] of componentTree) {
@@ -1344,7 +1332,8 @@ const ClientRouterProvider = (props) => {
     is404,
     routeManifest,
     pageData,
-    params
+    params,
+    searchParams
   } = props;
   const [parameters, setParameters] = useState(params);
   const pageDataRef = useRef(structuredClone(pageData));
@@ -1355,7 +1344,7 @@ const ClientRouterProvider = (props) => {
     () => new Subject({
       hash: "",
       pathname: currentPath,
-      search: "",
+      search: searchParams,
       state: {},
       key: ""
     })
@@ -1450,12 +1439,30 @@ function useParams() {
   const { params } = useContext(ClientRouterContext);
   return params;
 }
+function useSearchParams() {
+  const { locationSubject, history } = useContext(ClientRouterContext);
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const setSearchParams = (newSearchParams) => {
+    let nextSearchParams = newSearchParams;
+    if (typeof newSearchParams === "function") {
+      nextSearchParams = newSearchParams(searchParams);
+    }
+    locationSubject.next({
+      ...locationSubject.getValue(),
+      search: nextSearchParams.toString()
+    });
+    history == null ? void 0 : history.push({
+      search: nextSearchParams.toString()
+    });
+  };
+  return [searchParams, setSearchParams];
+}
 function useRouter() {
   const { updatePageData, history, getViewPathsFromPathname } = useContext(ClientRouterContext);
   useContext(ComponentsContext);
   return {
     push: async (to, state) => {
-      var _a2;
       let path = "";
       let urlSearchParams;
       let hash = "";
@@ -1478,8 +1485,7 @@ function useRouter() {
         ...components.map((component) => window.loaders[component]())
       ]);
       if (res.ok) {
-        const { data } = await res.json();
-        const is404 = ((_a2 = Object.values(data[to])[0]) == null ? void 0 : _a2.status) === 404;
+        const { data, is404 = false } = await res.json();
         updatePageData(data);
         history == null ? void 0 : history.push(to, is404 ? { status: 404 } : state);
         window.scrollTo(0, 0);
@@ -30151,6 +30157,16 @@ if (process.env.NODE_ENV === "production") {
   client.exports = requireReactDomClient_development();
 }
 var clientExports = client.exports;
+const ServerDataContext = createContext({});
+const ServerDataProvider = (props) => {
+  let _value = props.value;
+  if (props.value) {
+    _value = props.value;
+  } else {
+    _value = window.__GEMI_DATA__;
+  }
+  return /* @__PURE__ */ jsx(ServerDataContext.Provider, { value: _value, children: props.children });
+};
 const Route = (props) => {
   const { componentPath } = props;
   const { viewImportMap: viewImportMap2 } = useContext(ComponentsContext);
@@ -30190,9 +30206,10 @@ const Routes = (props) => {
 const ClientRouter = (props) => {
   const { RootLayout } = props;
   const { routeManifest, router, componentTree, pageData, auth } = useContext(ServerDataContext);
-  return /* @__PURE__ */ jsx(ComponentsProvider, { viewImportMap: props.viewImportMap, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(QueryManagerProvider, { children: /* @__PURE__ */ jsx(ComponentsProvider, { viewImportMap: props.viewImportMap, children: /* @__PURE__ */ jsx(
     ClientRouterProvider,
     {
+      searchParams: router.searchParams,
       params: router.params,
       pageData,
       is404: router.is404,
@@ -30201,7 +30218,7 @@ const ClientRouter = (props) => {
       routeManifest,
       children: /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(RootLayout, { children: /* @__PURE__ */ jsx(Routes, { componentTree }) }) })
     }
-  ) });
+  ) }) });
 };
 function init(RootLayout) {
   clientExports.hydrateRoot(
@@ -30268,20 +30285,117 @@ const Image = (props) => {
   );
   return /* @__PURE__ */ jsx("img", { ...srcProps, width, ...rest });
 };
+const defaultArgs$3 = {
+  onSuccess: () => {
+  }
+};
+function useForgotPassword(args = defaultArgs$3) {
+  return useMutation(
+    "POST:/forgot-password",
+    {},
+    {
+      pathPrefix: "/auth",
+      onSuccess: () => {
+        args.onSuccess();
+      }
+    }
+  );
+}
+const defaultArgs$2 = {
+  onSuccess: () => {
+  }
+};
+function useSignIn(args = defaultArgs$2) {
+  const { mutate } = useQuery(
+    "GET:/me",
+    { params: {}, query: {} },
+    { pathPrefix: "/auth" }
+  );
+  return useMutation(
+    "POST:/sign-in",
+    {},
+    {
+      pathPrefix: "/auth",
+      onSuccess: ({ user }) => {
+        args.onSuccess(user);
+        mutate(user);
+      }
+    }
+  );
+}
+function useSignUp() {
+  return useMutation("POST:/sign-up", {}, { pathPrefix: "/auth" });
+}
+const defaultArgs$1 = {
+  onSuccess: () => {
+  }
+};
+function useSignOut(args = defaultArgs$1) {
+  const { mutate } = useQuery(
+    "GET:/me",
+    { params: {}, query: {} },
+    { pathPrefix: "/auth" }
+  );
+  return useMutation(
+    "POST:/sign-out",
+    {},
+    {
+      pathPrefix: "/auth",
+      onSuccess: () => {
+        args.onSuccess();
+        mutate(null);
+      }
+    }
+  );
+}
+const defaultArgs = {
+  onSuccess: () => {
+  }
+};
+function useResetPassword(args = defaultArgs) {
+  return useMutation(
+    "POST:/reset-password",
+    {},
+    {
+      pathPrefix: "/auth",
+      onSuccess: () => {
+        args.onSuccess();
+      }
+    }
+  );
+}
+function useUser() {
+  const { auth } = useContext(ServerDataContext);
+  const { data, loading } = useQuery(
+    "GET:/me",
+    { params: {}, query: {} },
+    { fallbackData: { user: auth.user }, pathPrefix: "/auth" }
+  );
+  if (loading) {
+    return null;
+  }
+  return data.user;
+}
 export {
   Form,
   FormError,
+  FormField,
   Image,
   Link,
-  Mutation,
   ValidationErrors,
   createRoot,
   init,
+  useForgotPassword,
   useLocation,
   useMutation,
   useMutationStatus,
   useParams,
   useQuery,
+  useResetPassword,
   useRouter,
+  useSearchParams,
+  useSignIn,
+  useSignOut,
+  useSignUp,
   useUser
 };