@txstate-mws/sveltekit-utils 1.2.2 → 1.2.4

package/dist/api.d.ts

@@ -1,4 +1,5 @@
 import type { InteractionEvent, ValidatedResponse } from '@txstate-mws/fastify-shared';
+import type { Feedback, SubmitResponse } from '@txstate-mws/svelte-forms';
 export type APIBaseQueryPayload = string | Record<string, undefined | string | number | (string | number)[]>;
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 export interface APIUploadInfo {
@@ -13,6 +14,16 @@ export type APIBaseProgressFn = (info: {
     total: number;
     ratio: number;
 } | undefined) => void;
+export interface MessageFromAPI {
+    arg: string;
+    message: string;
+    type: 'error' | 'warning' | 'success';
+}
+export interface MutationResponseFromAPI {
+    success: boolean;
+    messages: MessageFromAPI[];
+    [key: string]: any;
+}
 /**
  * Provided for convenience in case you are not using APIBase but still want to record navigations
  *
@@ -105,5 +116,43 @@ export declare class APIBase {
      * be called in your global +layout.svelte
      */
     recordNavigations(): void;
+    /**
+     * This function is used to convert MutationMessageType[] that comes from our standard
+     * graphql servers into the Feedback[] type expected by svelte-forms.
+     *
+     * It will also remove a prefix from the arg property if you pass one in. This is useful
+     * because your graphql service should always be creating paths relative to the mutation's
+     * argument root, but the UI may not care how that's done.
+     *
+     * For example, consider the difference between `{ updateUser(id: ID!, name: String!, email: String!) {...} }`
+     * and `{ updateUser(id: ID!, user: UserInfo!) {...} }`. The first one should be sending back messages
+     * with `arg` like `name` or `email`, while the second one should be sending back messages with `arg`
+     * like `user.name` or `user.email` - because any user of the GraphQL API should expect that format after
+     * seeing the mutation signature.
+     *
+     * If your UI form for editing the user uses paths like `name` and `email`, you can pass `user` as the
+     * prefix to the second example and this function will remove it from the `arg` property when it creates
+     * the `path` property.
+     */
+    messageForDialog(messages: MessageFromAPI[], prefix?: string): Feedback[];
+    /**
+     * This function is used to convert MutationResponseFromAPI into the SubmitResponse
+     * type expected by svelte-forms.
+     *
+     * It will also remove a prefix from the arg property if you pass one in. See messageForDialog
+     * for more details.
+     *
+     * If you pass a dataName, it will be used to extract the data object from the response. It's typical
+     * in graphql to name the data for what is is, for instance, updateUser probably returns success, messages,
+     * and user. However, SubmitResponse always expects a `data` property. You can pass `user` as the dataName
+     * and it will be returned as the `data` property.
+     */
+    mutationForDialog(resp: MutationResponseFromAPI, { prefix }: {
+        prefix?: string;
+    }): SubmitResponse<undefined>;
+    mutationForDialog<T = any>(resp: MutationResponseFromAPI, { prefix, dataName }: {
+        prefix?: string;
+        dataName: string;
+    }): SubmitResponse<T>;
 }
 export {};

package/dist/api.js

@@ -1,7 +1,7 @@
 import { toasts } from '@txstate-mws/svelte-components';
 import { error } from '@sveltejs/kit';
 import { get } from 'svelte/store';
-import { pick, rescue, toArray } from 'txstate-utils';
+import { isNotBlank, isNull, omit, pick, rescue, toArray } from 'txstate-utils';
 import { page } from '$app/stores';
 import { afterNavigate } from '$app/navigation';
 import { unifiedAuth } from './unifiedauth.js';
@@ -40,7 +40,7 @@ function replaceFiles(variables, files) {
         const val = variables[key];
         if (val instanceof File) {
             files.push(val);
-            newVariables ??= { ...variables };
+            newVariables ??= Array.isArray(variables) ? [...variables] : { ...variables };
             newVariables[key] = { _type: 'APIUploadInfo', multipartIndex: files.length - 1, name: val.name, mime: val.type, size: val.size };
         }
         else if (val instanceof Object) {
@@ -279,4 +279,30 @@ export class APIBase {
     recordNavigations() {
         recordNavigations(this.recordInteraction.bind(this));
     }
+    /**
+     * This function is used to convert MutationMessageType[] that comes from our standard
+     * graphql servers into the Feedback[] type expected by svelte-forms.
+     *
+     * It will also remove a prefix from the arg property if you pass one in. This is useful
+     * because your graphql service should always be creating paths relative to the mutation's
+     * argument root, but the UI may not care how that's done.
+     *
+     * For example, consider the difference between `{ updateUser(id: ID!, name: String!, email: String!) {...} }`
+     * and `{ updateUser(id: ID!, user: UserInfo!) {...} }`. The first one should be sending back messages
+     * with `arg` like `name` or `email`, while the second one should be sending back messages with `arg`
+     * like `user.name` or `user.email` - because any user of the GraphQL API should expect that format after
+     * seeing the mutation signature.
+     *
+     * If your UI form for editing the user uses paths like `name` and `email`, you can pass `user` as the
+     * prefix to the second example and this function will remove it from the `arg` property when it creates
+     * the `path` property.
+     */
+    messageForDialog(messages, prefix) {
+        return messages.map(m => {
+            return { ...omit(m, 'arg'), path: isNull(m.arg) ? null : isNotBlank(prefix) ? m.arg.replace(RegExp('^' + prefix + '\\.'), '') : m.arg };
+        });
+    }
+    mutationForDialog(resp, { prefix, dataName }) {
+        return { success: resp.success, messages: this.messageForDialog(resp.messages, prefix), data: (dataName ? resp[dataName] : undefined) };
+    }
 }

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/api.ts","../src/index.ts","../src/unifiedauth.ts"],"version":"5.7.3"}
+{"root":["../src/api.ts","../src/index.ts","../src/unifiedauth.ts"],"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/sveltekit-utils",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Shared library for code that is specifically tied to sveltekit in addition to svelte.",
   "type": "module",
   "exports": {
@@ -15,6 +15,7 @@
     "@sveltejs/kit": "^2.5.4",
     "@txstate-mws/fastify-shared": "^1.0.4",
     "@txstate-mws/svelte-components": "^1.6.1",
+    "@txstate-mws/svelte-forms": "^1.5.8",
     "txstate-utils": "^1.8.15"
   },
   "devDependencies": {