@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/client/resource/internal.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { createApiClient } from '../../utils.mjs';
+import { buildQueryKey, runResourceMutation } from './queries.mjs';
+import { useStack, usePluginOverrides } from '../../../context/provider.mjs';
+
+function useResourceContext(plugin) {
+  const { api, router } = useStack();
+  const { headers } = usePluginOverrides(plugin);
+  const client = createApiClient({
+    baseURL: api?.baseURL,
+    basePath: api?.basePath
+  });
+  return {
+    client,
+    headers,
+    navigate: router?.navigate,
+    refresh: router?.refresh
+  };
+}
+function invalidateTargetToKey(target) {
+  const dotIndex = target.indexOf(".");
+  if (dotIndex === -1) return [target];
+  return [target.slice(0, dotIndex), target.slice(dotIndex + 1)];
+}
+function useResourceMutationForDef(context, resourceName, mutationName, resource, def) {
+  const queryClient = useQueryClient();
+  const { client, headers, refresh } = context;
+  return useMutation({
+    mutationKey: [resourceName, mutationName],
+    mutationFn: (vars) => {
+      if (!def) {
+        throw new Error(
+          `Resource "${resourceName}" has no "${mutationName}" mutation declared`
+        );
+      }
+      return runResourceMutation(client, def, vars, headers);
+    },
+    onSuccess: async (result, variables) => {
+      if (!def) return;
+      if (def.setData) {
+        const keyArgs = def.setData.args(result);
+        const targetName = def.setData.query ?? "detail";
+        const targetDef = resource.queries[targetName];
+        if (keyArgs && targetDef) {
+          const key = buildQueryKey(
+            resourceName,
+            targetName,
+            targetDef,
+            keyArgs
+          );
+          queryClient.setQueryData(
+            key,
+            (previous) => def.setData?.updater ? def.setData.updater(previous, result) : result
+          );
+        }
+      }
+      if (def.removeData) {
+        const keyArgs = def.removeData.args(result, variables);
+        const targetName = def.removeData.query ?? "detail";
+        const targetDef = resource.queries[targetName];
+        if (keyArgs && targetDef) {
+          queryClient.removeQueries({
+            queryKey: buildQueryKey(
+              resourceName,
+              targetName,
+              targetDef,
+              keyArgs
+            ),
+            exact: true
+          });
+        }
+      }
+      for (const target of def.invalidates ?? []) {
+        await queryClient.invalidateQueries({
+          queryKey: invalidateTargetToKey(target),
+          refetchType: def.refetchType
+        });
+      }
+      if (refresh && def.refresh !== false) {
+        await refresh();
+      }
+    }
+  });
+}
+
+export { useResourceContext, useResourceMutationForDef };

package/dist/packages/stack/src/plugins/client/resource/queries.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+const errors = require('./errors.cjs');
+
+function resolvePageSize(def, args) {
+  if (typeof def.pageSize === "function") return def.pageSize(...args);
+  return def.pageSize ?? 10;
+}
+function buildQueryKey(resourceName, queryName, def, args) {
+  const cells = def.key ? def.key(...args) : args;
+  return [resourceName, queryName, ...cells];
+}
+async function runResourceQuery(client, def, args, pageParam, headers) {
+  if (def.skip?.(...args)) return null;
+  const baseQuery = def.query?.(...args);
+  const query = def.infinite ? { ...baseQuery, [def.offsetParam ?? "offset"]: pageParam ?? 0 } : baseQuery;
+  const params = def.params?.(...args);
+  const response = await client(def.path, {
+    method: "GET",
+    ...params !== void 0 ? { params } : {},
+    ...query !== void 0 ? { query } : {},
+    ...headers !== void 0 ? { headers } : {}
+  });
+  if (errors.isErrorResponse(response)) {
+    throw errors.toError(response.error);
+  }
+  const data = response.data;
+  return def.select ? def.select(data, ...args) : data;
+}
+async function runResourceMutation(client, def, vars, headers) {
+  const { body, params, query } = def.input ? def.input(vars) : { body: vars, params: void 0, query: void 0 };
+  const response = await client(def.path, {
+    method: def.method,
+    ...body !== void 0 ? { body } : {},
+    ...params !== void 0 ? { params } : {},
+    ...query !== void 0 ? { query } : {},
+    ...headers !== void 0 ? { headers } : {}
+  });
+  if (errors.isErrorResponse(response)) {
+    throw errors.toError(response.error);
+  }
+  const data = response.data;
+  return def.select ? def.select(data) : data;
+}
+function createResourceQueryKeys(client, resources, headers) {
+  const store = {};
+  for (const [resourceName, resource] of Object.entries(resources)) {
+    const resourceStore = {
+      _def: [resourceName]
+    };
+    for (const [queryName, def] of Object.entries(resource.queries)) {
+      const entry = (...args) => ({
+        queryKey: buildQueryKey(resourceName, queryName, def, args),
+        queryFn: (context) => runResourceQuery(client, def, args, context?.pageParam, headers)
+      });
+      entry._def = [resourceName, queryName];
+      resourceStore[queryName] = entry;
+    }
+    store[resourceName] = resourceStore;
+  }
+  return store;
+}
+
+exports.buildQueryKey = buildQueryKey;
+exports.createResourceQueryKeys = createResourceQueryKeys;
+exports.resolvePageSize = resolvePageSize;
+exports.runResourceMutation = runResourceMutation;
+exports.runResourceQuery = runResourceQuery;

package/dist/packages/stack/src/plugins/client/resource/queries.mjs

@@ -0,0 +1,62 @@
+import { isErrorResponse, toError } from './errors.mjs';
+
+function resolvePageSize(def, args) {
+  if (typeof def.pageSize === "function") return def.pageSize(...args);
+  return def.pageSize ?? 10;
+}
+function buildQueryKey(resourceName, queryName, def, args) {
+  const cells = def.key ? def.key(...args) : args;
+  return [resourceName, queryName, ...cells];
+}
+async function runResourceQuery(client, def, args, pageParam, headers) {
+  if (def.skip?.(...args)) return null;
+  const baseQuery = def.query?.(...args);
+  const query = def.infinite ? { ...baseQuery, [def.offsetParam ?? "offset"]: pageParam ?? 0 } : baseQuery;
+  const params = def.params?.(...args);
+  const response = await client(def.path, {
+    method: "GET",
+    ...params !== void 0 ? { params } : {},
+    ...query !== void 0 ? { query } : {},
+    ...headers !== void 0 ? { headers } : {}
+  });
+  if (isErrorResponse(response)) {
+    throw toError(response.error);
+  }
+  const data = response.data;
+  return def.select ? def.select(data, ...args) : data;
+}
+async function runResourceMutation(client, def, vars, headers) {
+  const { body, params, query } = def.input ? def.input(vars) : { body: vars, params: void 0, query: void 0 };
+  const response = await client(def.path, {
+    method: def.method,
+    ...body !== void 0 ? { body } : {},
+    ...params !== void 0 ? { params } : {},
+    ...query !== void 0 ? { query } : {},
+    ...headers !== void 0 ? { headers } : {}
+  });
+  if (isErrorResponse(response)) {
+    throw toError(response.error);
+  }
+  const data = response.data;
+  return def.select ? def.select(data) : data;
+}
+function createResourceQueryKeys(client, resources, headers) {
+  const store = {};
+  for (const [resourceName, resource] of Object.entries(resources)) {
+    const resourceStore = {
+      _def: [resourceName]
+    };
+    for (const [queryName, def] of Object.entries(resource.queries)) {
+      const entry = (...args) => ({
+        queryKey: buildQueryKey(resourceName, queryName, def, args),
+        queryFn: (context) => runResourceQuery(client, def, args, context?.pageParam, headers)
+      });
+      entry._def = [resourceName, queryName];
+      resourceStore[queryName] = entry;
+    }
+    store[resourceName] = resourceStore;
+  }
+  return store;
+}
+
+export { buildQueryKey, createResourceQueryKeys, resolvePageSize, runResourceMutation, runResourceQuery };

package/dist/packages/stack/src/plugins/client/resource/use-debounce.cjs

@@ -0,0 +1,17 @@
+"use client";
+'use strict';
+
+const React = require('react');
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+exports.useDebounce = useDebounce;

package/dist/packages/stack/src/plugins/client/resource/use-debounce.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export { useDebounce };

package/dist/packages/stack/src/plugins/client/resource/use-form.cjs

@@ -0,0 +1,116 @@
+"use client";
+'use strict';
+
+const reactQuery = require('@tanstack/react-query');
+const React = require('react');
+const errors = require('./errors.cjs');
+const queries = require('./queries.cjs');
+const internal = require('./internal.cjs');
+const notify = require('../../../context/notify.cjs');
+
+function createUseForm(plugin, resourceName, resource) {
+  return function useForm(config) {
+    const context = internal.useResourceContext(plugin);
+    const notify$1 = notify.useNotify();
+    const { action } = config;
+    const detailName = config.detailQuery ?? "detail";
+    const detailDef = resource.queries[detailName];
+    const hasExternalRecord = config.record !== void 0;
+    const detailArgs = config.id !== void 0 ? [config.id] : [];
+    const detailEnabled = action === "edit" && !hasExternalRecord && config.id !== void 0 && !!detailDef;
+    const recordQuery = reactQuery.useQuery({
+      queryKey: detailDef ? queries.buildQueryKey(resourceName, detailName, detailDef, detailArgs) : [resourceName, detailName],
+      queryFn: () => {
+        if (!detailDef) {
+          throw new Error(
+            `Resource "${resourceName}" has no "${detailName}" query declared`
+          );
+        }
+        return queries.runResourceQuery(
+          context.client,
+          detailDef,
+          detailArgs,
+          void 0,
+          context.headers
+        );
+      },
+      ...errors.SHARED_QUERY_CONFIG,
+      enabled: detailEnabled
+    });
+    const record = hasExternalRecord ? config.record ?? null : recordQuery.data ?? null;
+    const defaultsRef = React.useRef(config.defaults);
+    defaultsRef.current = config.defaults;
+    const defaultValues = React.useMemo(() => {
+      const defaults = defaultsRef.current;
+      if (typeof defaults === "function") {
+        return defaults(record);
+      }
+      return defaults;
+    }, [record]);
+    const createName = config.createMutation ?? "create";
+    const updateName = config.updateMutation ?? "update";
+    const createMutation = internal.useResourceMutationForDef(
+      context,
+      resourceName,
+      createName,
+      resource,
+      resource.mutations?.[createName]
+    );
+    const updateMutation = internal.useResourceMutationForDef(
+      context,
+      resourceName,
+      updateName,
+      resource,
+      resource.mutations?.[updateName]
+    );
+    const [error, setError] = React.useState(null);
+    const submit = async (values) => {
+      setError(null);
+      try {
+        const isEdit = action === "edit";
+        const vars = isEdit ? config.toUpdateVars ? config.toUpdateVars(values, record) : values : config.toCreateVars ? config.toCreateVars(values) : values;
+        const mutation = isEdit ? updateMutation : createMutation;
+        const result = await mutation.mutateAsync(vars);
+        if (config.successMessage) {
+          notify$1.success(
+            typeof config.successMessage === "function" ? config.successMessage(result, action) : config.successMessage
+          );
+        }
+        if (config.onSuccess) {
+          await config.onSuccess(result);
+        }
+        if (config.redirect) {
+          const path = typeof config.redirect === "function" ? config.redirect(result, action) : config.redirect;
+          if (path) {
+            await context.navigate?.(path);
+          }
+        }
+        return result;
+      } catch (e) {
+        const stackError = errors.toError(e);
+        setError(stackError);
+        if (!stackError.errors && config.errorMessage) {
+          notify$1.error(
+            typeof config.errorMessage === "function" ? config.errorMessage(stackError) : config.errorMessage
+          );
+        }
+        return void 0;
+      }
+    };
+    const fieldErrors = React.useMemo(() => error?.errors ?? {}, [error]);
+    return {
+      action,
+      record,
+      isLoadingRecord: detailEnabled ? recordQuery.isLoading : false,
+      recordError: detailEnabled ? recordQuery.error : null,
+      defaultValues,
+      submit,
+      isSubmitting: createMutation.isPending || updateMutation.isPending,
+      error,
+      fieldErrors,
+      clearErrors: () => setError(null)
+    };
+  };
+}
+
+exports.createUseForm = createUseForm;

package/dist/packages/stack/src/plugins/client/resource/use-form.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { useQuery } from '@tanstack/react-query';
+import { useRef, useMemo, useState } from 'react';
+import { SHARED_QUERY_CONFIG, toError } from './errors.mjs';
+import { buildQueryKey, runResourceQuery } from './queries.mjs';
+import { useResourceContext, useResourceMutationForDef } from './internal.mjs';
+import { useNotify } from '../../../context/notify.mjs';
+
+function createUseForm(plugin, resourceName, resource) {
+  return function useForm(config) {
+    const context = useResourceContext(plugin);
+    const notify = useNotify();
+    const { action } = config;
+    const detailName = config.detailQuery ?? "detail";
+    const detailDef = resource.queries[detailName];
+    const hasExternalRecord = config.record !== void 0;
+    const detailArgs = config.id !== void 0 ? [config.id] : [];
+    const detailEnabled = action === "edit" && !hasExternalRecord && config.id !== void 0 && !!detailDef;
+    const recordQuery = useQuery({
+      queryKey: detailDef ? buildQueryKey(resourceName, detailName, detailDef, detailArgs) : [resourceName, detailName],
+      queryFn: () => {
+        if (!detailDef) {
+          throw new Error(
+            `Resource "${resourceName}" has no "${detailName}" query declared`
+          );
+        }
+        return runResourceQuery(
+          context.client,
+          detailDef,
+          detailArgs,
+          void 0,
+          context.headers
+        );
+      },
+      ...SHARED_QUERY_CONFIG,
+      enabled: detailEnabled
+    });
+    const record = hasExternalRecord ? config.record ?? null : recordQuery.data ?? null;
+    const defaultsRef = useRef(config.defaults);
+    defaultsRef.current = config.defaults;
+    const defaultValues = useMemo(() => {
+      const defaults = defaultsRef.current;
+      if (typeof defaults === "function") {
+        return defaults(record);
+      }
+      return defaults;
+    }, [record]);
+    const createName = config.createMutation ?? "create";
+    const updateName = config.updateMutation ?? "update";
+    const createMutation = useResourceMutationForDef(
+      context,
+      resourceName,
+      createName,
+      resource,
+      resource.mutations?.[createName]
+    );
+    const updateMutation = useResourceMutationForDef(
+      context,
+      resourceName,
+      updateName,
+      resource,
+      resource.mutations?.[updateName]
+    );
+    const [error, setError] = useState(null);
+    const submit = async (values) => {
+      setError(null);
+      try {
+        const isEdit = action === "edit";
+        const vars = isEdit ? config.toUpdateVars ? config.toUpdateVars(values, record) : values : config.toCreateVars ? config.toCreateVars(values) : values;
+        const mutation = isEdit ? updateMutation : createMutation;
+        const result = await mutation.mutateAsync(vars);
+        if (config.successMessage) {
+          notify.success(
+            typeof config.successMessage === "function" ? config.successMessage(result, action) : config.successMessage
+          );
+        }
+        if (config.onSuccess) {
+          await config.onSuccess(result);
+        }
+        if (config.redirect) {
+          const path = typeof config.redirect === "function" ? config.redirect(result, action) : config.redirect;
+          if (path) {
+            await context.navigate?.(path);
+          }
+        }
+        return result;
+      } catch (e) {
+        const stackError = toError(e);
+        setError(stackError);
+        if (!stackError.errors && config.errorMessage) {
+          notify.error(
+            typeof config.errorMessage === "function" ? config.errorMessage(stackError) : config.errorMessage
+          );
+        }
+        return void 0;
+      }
+    };
+    const fieldErrors = useMemo(() => error?.errors ?? {}, [error]);
+    return {
+      action,
+      record,
+      isLoadingRecord: detailEnabled ? recordQuery.isLoading : false,
+      recordError: detailEnabled ? recordQuery.error : null,
+      defaultValues,
+      submit,
+      isSubmitting: createMutation.isPending || updateMutation.isPending,
+      error,
+      fieldErrors,
+      clearErrors: () => setError(null)
+    };
+  };
+}
+
+export { createUseForm };

package/dist/packages/stack/src/plugins/client/resource/use-select.cjs

@@ -0,0 +1,104 @@
+"use client";
+'use strict';
+
+const reactQuery = require('@tanstack/react-query');
+const React = require('react');
+const errors = require('./errors.cjs');
+const queries = require('./queries.cjs');
+const internal = require('./internal.cjs');
+const useDebounce = require('./use-debounce.cjs');
+
+function createUseSelect(plugin, resourceName, resource) {
+  return function useSelect(config) {
+    const context = internal.useResourceContext(plugin);
+    const enabled = config.enabled ?? true;
+    const [search, setSearch] = React.useState("");
+    const debouncedSearch = useDebounce.useDebounce(search, config.debounceMs ?? 300);
+    const listName = config.query ?? "list";
+    const listDef = resource.queries[listName];
+    if (!listDef) {
+      throw new Error(
+        `Resource "${resourceName}" has no "${listName}" query declared`
+      );
+    }
+    if (listDef.infinite) {
+      throw new Error(
+        `useSelect requires a non-infinite query, but "${resourceName}.${listName}" is declared infinite`
+      );
+    }
+    const listArgs = config.searchArgs(debouncedSearch);
+    const listQuery = reactQuery.useQuery({
+      queryKey: queries.buildQueryKey(resourceName, listName, listDef, listArgs),
+      queryFn: () => queries.runResourceQuery(
+        context.client,
+        listDef,
+        listArgs,
+        void 0,
+        context.headers
+      ),
+      ...errors.SHARED_QUERY_CONFIG,
+      enabled
+    });
+    const items = listQuery.data ?? [];
+    const values = config.value === void 0 ? [] : Array.isArray(config.value) ? config.value : [config.value];
+    const { getOptionValue, getOptionLabel } = config;
+    const fetchedValues = new Set(items.map((item) => getOptionValue(item)));
+    const preloadName = config.preload?.query ?? "detail";
+    const preloadDef = config.preload ? resource.queries[preloadName] : void 0;
+    const missingValues = preloadDef && enabled && !listQuery.isLoading ? values.filter((value) => !fetchedValues.has(value)) : [];
+    const preloadQueries = reactQuery.useQueries({
+      queries: missingValues.map((value) => {
+        const args = config.preload.args(value);
+        return {
+          queryKey: queries.buildQueryKey(
+            resourceName,
+            preloadName,
+            preloadDef,
+            args
+          ),
+          queryFn: () => queries.runResourceQuery(
+            context.client,
+            preloadDef,
+            args,
+            void 0,
+            context.headers
+          ),
+          ...errors.SHARED_QUERY_CONFIG
+        };
+      })
+    });
+    const preloadedItems = preloadQueries.map((query) => query.data).filter((item) => item !== null && item !== void 0);
+    const toOption = (item) => ({
+      value: getOptionValue(item),
+      label: getOptionLabel(item),
+      item
+    });
+    const options = items.map(toOption);
+    const seen = new Set(options.map((option) => option.value));
+    for (const item of preloadedItems) {
+      const option = toOption(item);
+      if (!seen.has(option.value)) {
+        seen.add(option.value);
+        options.push(option);
+      }
+    }
+    const selectedOptions = values.map(
+      (value) => options.find((option) => option.value === value) ?? {
+        value,
+        label: value
+      }
+    );
+    const isDebouncing = search !== debouncedSearch;
+    return {
+      options,
+      selectedOptions,
+      search,
+      setSearch,
+      isLoading: listQuery.isLoading || preloadQueries.some((query) => query.isLoading),
+      isSearching: enabled && (isDebouncing || listQuery.isFetching),
+      error: listQuery.error
+    };
+  };
+}
+
+exports.createUseSelect = createUseSelect;

package/dist/packages/stack/src/plugins/client/resource/use-select.mjs

@@ -0,0 +1,102 @@
+"use client";
+import { useQuery, useQueries } from '@tanstack/react-query';
+import { useState } from 'react';
+import { SHARED_QUERY_CONFIG } from './errors.mjs';
+import { runResourceQuery, buildQueryKey } from './queries.mjs';
+import { useResourceContext } from './internal.mjs';
+import { useDebounce } from './use-debounce.mjs';
+
+function createUseSelect(plugin, resourceName, resource) {
+  return function useSelect(config) {
+    const context = useResourceContext(plugin);
+    const enabled = config.enabled ?? true;
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, config.debounceMs ?? 300);
+    const listName = config.query ?? "list";
+    const listDef = resource.queries[listName];
+    if (!listDef) {
+      throw new Error(
+        `Resource "${resourceName}" has no "${listName}" query declared`
+      );
+    }
+    if (listDef.infinite) {
+      throw new Error(
+        `useSelect requires a non-infinite query, but "${resourceName}.${listName}" is declared infinite`
+      );
+    }
+    const listArgs = config.searchArgs(debouncedSearch);
+    const listQuery = useQuery({
+      queryKey: buildQueryKey(resourceName, listName, listDef, listArgs),
+      queryFn: () => runResourceQuery(
+        context.client,
+        listDef,
+        listArgs,
+        void 0,
+        context.headers
+      ),
+      ...SHARED_QUERY_CONFIG,
+      enabled
+    });
+    const items = listQuery.data ?? [];
+    const values = config.value === void 0 ? [] : Array.isArray(config.value) ? config.value : [config.value];
+    const { getOptionValue, getOptionLabel } = config;
+    const fetchedValues = new Set(items.map((item) => getOptionValue(item)));
+    const preloadName = config.preload?.query ?? "detail";
+    const preloadDef = config.preload ? resource.queries[preloadName] : void 0;
+    const missingValues = preloadDef && enabled && !listQuery.isLoading ? values.filter((value) => !fetchedValues.has(value)) : [];
+    const preloadQueries = useQueries({
+      queries: missingValues.map((value) => {
+        const args = config.preload.args(value);
+        return {
+          queryKey: buildQueryKey(
+            resourceName,
+            preloadName,
+            preloadDef,
+            args
+          ),
+          queryFn: () => runResourceQuery(
+            context.client,
+            preloadDef,
+            args,
+            void 0,
+            context.headers
+          ),
+          ...SHARED_QUERY_CONFIG
+        };
+      })
+    });
+    const preloadedItems = preloadQueries.map((query) => query.data).filter((item) => item !== null && item !== void 0);
+    const toOption = (item) => ({
+      value: getOptionValue(item),
+      label: getOptionLabel(item),
+      item
+    });
+    const options = items.map(toOption);
+    const seen = new Set(options.map((option) => option.value));
+    for (const item of preloadedItems) {
+      const option = toOption(item);
+      if (!seen.has(option.value)) {
+        seen.add(option.value);
+        options.push(option);
+      }
+    }
+    const selectedOptions = values.map(
+      (value) => options.find((option) => option.value === value) ?? {
+        value,
+        label: value
+      }
+    );
+    const isDebouncing = search !== debouncedSearch;
+    return {
+      options,
+      selectedOptions,
+      search,
+      setSearch,
+      isLoading: listQuery.isLoading || preloadQueries.some((query) => query.isLoading),
+      isSearching: enabled && (isDebouncing || listQuery.isFetching),
+      error: listQuery.error
+    };
+  };
+}
+
+export { createUseSelect };