@workday/graphiql-plugin-multipart-requests 0.0.1

package/Readme.md

@@ -0,0 +1,89 @@
+# Multipart Requests Plugin
+
+This plugin allows GraphiQL to include files as part of a request to a GraphQL server
+implementing [GraphQL Multipart Request: V3](https://workday.github.io/graphql-multipart-request-spec/graphql-multipart-request-v3.html).
+
+![Demo](./demo.gif)
+
+## Usage
+
+### Using `MultipartFetcher`
+```tsx
+import {
+  MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN,
+  MultipartAttachmentsContext,
+  MultipartAttachmentsProvider,
+} from '@workday/graphiql-plugin-multipart-requests';
+
+function GraphiQLWrapper() {
+  const attachments = useContext(MultipartAttachmentsContext);
+
+  const fetcher = useMemo(() => {
+    // The decoratedFetcher will automatically pass all necessary FormData to the Fetcher
+    return attachments.decoratedFetcher(
+      async (graphQLParams: FetcherParams, formData: FormData | null) => {
+        console.log('Attachments:', formData);
+        
+        // Send the request to the server 
+      }
+    );
+  }, [attachments]);
+
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      plugins={[MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN]}
+    />
+  );
+}
+
+const App = () => (
+  <MultipartAttachmentsProvider>
+    <GraphiQLWrapper />
+  </MultipartAttachmentsProvider>
+);
+```
+
+### Using `fetch` Override
+
+```tsx
+import {
+  MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN,
+  MultipartAttachmentsContext,
+  MultipartAttachmentsProvider
+} from '@workday/graphiql-plugin-multipart-requests';
+
+function GraphiQLWrapper() {
+  const attachments = useContext(MultipartAttachmentsContext);
+
+  const fetcher = useMemo(() => {
+    // attachmentsFetch will automatically include all necessary FormData in the downstream request.
+    const attachmentsFetch = attachments.decoratedFetch();
+    async (graphQLParams: Fetcher) => {
+      const response = await attachmentsFetch('https://example.com/my-graphql', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(graphQLParams)
+        }
+      );
+
+      // Return the response to GraphiQL
+    };
+  }, [attachments]);
+
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      plugins={[MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN]}
+    />
+  );
+}
+
+const App = () => (
+  <MultipartAttachmentsProvider>
+    <GraphiQLWrapper />
+  </MultipartAttachmentsProvider>
+);
+```

package/dist/commonjs/attachment-icon.svg.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/commonjs/attachment-icon.svg.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+exports.default = ((0, jsx_runtime_1.jsx)("svg", { height: '1em', viewBox: '0 0 14 14', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: (0, jsx_runtime_1.jsx)("path", { d: 'M 9 4 L 4.5 8.5 C 3.5 9.5 5 11 6 10 L 11.5 4.5 C 13.5 2.5 11 -0.5 8.5 2 L 2.5 8 C 0 10.5 4 14.5 6.5 12 L 12.5 6', stroke: 'currentColor', strokeWidth: '0.8' }) }));
+//# sourceMappingURL=attachment-icon.svg.js.map

package/dist/commonjs/attachment-icon.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-icon.svg.js","sourceRoot":"","sources":["../../src/attachment-icon.svg.tsx"],"names":[],"mappings":";;;AAAA,kBAAe,CACb,gCAAK,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,YAClF,iCACE,CAAC,EAAC,iHAAiH,EACnH,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,GACjB,GACE,CACP,CAAC","sourcesContent":["export default (\n  <svg height='1em' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>\n    <path\n      d='M 9 4 L 4.5 8.5 C 3.5 9.5 5 11 6 10 L 11.5 4.5 C 13.5 2.5 11 -0.5 8.5 2 L 2.5 8 C 0 10.5 4 14.5 6.5 12 L 12.5 6'\n      stroke='currentColor'\n      strokeWidth='0.8'\n    />\n  </svg>\n);\n"]}

package/dist/commonjs/context.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AttachmentEntry, MultipartAttachments } from './multipart-attachments.js';
+export type AttachmentAddAction = {
+    action: 'add';
+    name?: string;
+};
+export type AttachmentUpdateAction = {
+    action: 'update';
+    id: number;
+    name?: string;
+    value?: File;
+};
+export type AttachmentDeleteAction = {
+    action: 'delete';
+    id: number;
+};
+export type AttachmentsAction = AttachmentAddAction | AttachmentUpdateAction | AttachmentDeleteAction;
+export type InternalAttachmentEntry = {
+    id: number;
+} & (({
+    error?: string;
+} & AttachmentEntry) | {
+    name: string;
+    value: null;
+    error: string;
+});
+export declare const NO_FILE_ERROR = "No File Attached";
+export declare const DUPLICATE_NAME_ERROR = "Duplicate Name";
+export declare class InternalAttachmentState {
+    private readonly attachmentId;
+    readonly attachments: InternalAttachmentEntry[];
+    constructor(attachments?: InternalAttachmentEntry[], attachmentId?: number);
+    get validAttachments(): AttachmentEntry[];
+    map<T>(callback: (value: InternalAttachmentEntry, index: number, array: InternalAttachmentEntry[]) => T): T[];
+    reduce(action: AttachmentsAction): InternalAttachmentState;
+}
+export declare const MultipartAttachmentsContext: React.Context<MultipartAttachments>;
+export declare const MultipartAttachmentsInternalContext: React.Context<[InternalAttachmentState, React.Dispatch<AttachmentsAction>]>;
+export declare function MultipartAttachmentsProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/commonjs/context.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipartAttachmentsProvider = exports.MultipartAttachmentsInternalContext = exports.MultipartAttachmentsContext = exports.InternalAttachmentState = exports.DUPLICATE_NAME_ERROR = exports.NO_FILE_ERROR = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const multipart_attachments_js_1 = require("./multipart-attachments.js");
+exports.NO_FILE_ERROR = 'No File Attached';
+exports.DUPLICATE_NAME_ERROR = 'Duplicate Name';
+class InternalAttachmentState {
+    attachmentId;
+    attachments;
+    constructor(attachments = [], attachmentId = 0) {
+        this.attachments = attachments;
+        this.attachmentId = attachmentId;
+    }
+    get validAttachments() {
+        return this.attachments.filter((attachment) => attachment.value !== null && !attachment.error);
+    }
+    map(callback) {
+        return this.attachments.map(callback);
+    }
+    reduce(action) {
+        let nextAttachments;
+        let nextAttachmentId = this.attachmentId;
+        switch (action.action) {
+            case 'add': {
+                nextAttachments = [
+                    ...this.attachments,
+                    {
+                        id: this.attachmentId,
+                        name: action.name ?? `part${this.attachmentId}`,
+                        value: null,
+                    },
+                ];
+                nextAttachmentId++;
+                break;
+            }
+            case 'update': {
+                nextAttachments = this.attachments.map((attachment) => {
+                    if (attachment.id === action.id) {
+                        return {
+                            ...attachment,
+                            name: action.name ?? attachment.name,
+                            value: action.value !== undefined ? action.value : attachment.value,
+                        };
+                    }
+                    else {
+                        return attachment;
+                    }
+                });
+                break;
+            }
+            case 'delete': {
+                nextAttachments = this.attachments.filter((attachment) => attachment.id !== action.id);
+                break;
+            }
+            default: {
+                throw new Error(`Unknown action ${action}`);
+            }
+        }
+        for (const attachment of nextAttachments) {
+            if (nextAttachments.filter(({ name }) => name === attachment.name).length > 1) {
+                attachment.error = exports.DUPLICATE_NAME_ERROR;
+            }
+            else if (attachment.value === null) {
+                attachment.error = exports.NO_FILE_ERROR;
+            }
+            else {
+                delete attachment.error;
+            }
+        }
+        return new InternalAttachmentState(nextAttachments, nextAttachmentId);
+    }
+}
+exports.InternalAttachmentState = InternalAttachmentState;
+exports.MultipartAttachmentsContext = (0, react_1.createContext)(new multipart_attachments_js_1.MultipartAttachments([]));
+exports.MultipartAttachmentsInternalContext = (0, react_1.createContext)([
+    new InternalAttachmentState(),
+    () => {
+        throw new Error('MultipartAttachmentsProvider not found. Make sure to render it higher up in the tree');
+    },
+]);
+function MultipartAttachmentsProvider({ children }) {
+    const [attachments, setAttachmentStates] = (0, react_1.useReducer)((attachments, action) => attachments.reduce(action), new InternalAttachmentState());
+    return ((0, jsx_runtime_1.jsx)(exports.MultipartAttachmentsContext.Provider, { value: new multipart_attachments_js_1.MultipartAttachments(attachments.validAttachments), children: (0, jsx_runtime_1.jsx)(exports.MultipartAttachmentsInternalContext.Provider, { value: [attachments, setAttachmentStates], children: children }) }));
+}
+exports.MultipartAttachmentsProvider = MultipartAttachmentsProvider;
+//# sourceMappingURL=context.js.map

package/dist/commonjs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createContext, Reducer, useReducer } from 'react';\nimport { AttachmentEntry, MultipartAttachments } from './multipart-attachments.js';\n\nexport type AttachmentAddAction = {\n  action: 'add';\n  name?: string;\n};\n\nexport type AttachmentUpdateAction = {\n  action: 'update';\n  id: number;\n  name?: string;\n  value?: File;\n};\n\nexport type AttachmentDeleteAction = {\n  action: 'delete';\n  id: number;\n};\n\nexport type AttachmentsAction = AttachmentAddAction | AttachmentUpdateAction | AttachmentDeleteAction;\n\nexport type InternalAttachmentEntry = { id: number } & (\n  | ({ error?: string } & AttachmentEntry)\n  | { name: string; value: null; error: string }\n);\n\nexport const NO_FILE_ERROR = 'No File Attached';\nexport const DUPLICATE_NAME_ERROR = 'Duplicate Name';\n\nexport class InternalAttachmentState {\n  private readonly attachmentId;\n  public readonly attachments: InternalAttachmentEntry[];\n\n  constructor(attachments: InternalAttachmentEntry[] = [], attachmentId = 0) {\n    this.attachments = attachments;\n    this.attachmentId = attachmentId;\n  }\n\n  public get validAttachments(): AttachmentEntry[] {\n    return this.attachments.filter(\n      (\n        attachment: InternalAttachmentEntry\n      ): attachment is AttachmentEntry & {\n        id: number;\n      } => attachment.value !== null && !attachment.error\n    );\n  }\n\n  public map<T>(callback: (value: InternalAttachmentEntry, index: number, array: InternalAttachmentEntry[]) => T): T[] {\n    return this.attachments.map(callback);\n  }\n\n  public reduce(action: AttachmentsAction): InternalAttachmentState {\n    let nextAttachments;\n    let nextAttachmentId = this.attachmentId;\n    switch (action.action) {\n      case 'add': {\n        nextAttachments = [\n          ...this.attachments,\n          {\n            id: this.attachmentId,\n            name: action.name ?? `part${this.attachmentId}`,\n            value: null,\n          },\n        ];\n        nextAttachmentId++;\n        break;\n      }\n      case 'update': {\n        nextAttachments = this.attachments.map((attachment) => {\n          if (attachment.id === action.id) {\n            return {\n              ...attachment,\n              name: action.name ?? attachment.name,\n              value: action.value !== undefined ? action.value : attachment.value,\n            };\n          } else {\n            return attachment;\n          }\n        });\n        break;\n      }\n      case 'delete': {\n        nextAttachments = this.attachments.filter((attachment) => attachment.id !== action.id);\n        break;\n      }\n      default: {\n        throw new Error(`Unknown action ${action}`);\n      }\n    }\n\n    for (const attachment of nextAttachments) {\n      if (nextAttachments.filter(({ name }) => name === attachment.name).length > 1) {\n        attachment.error = DUPLICATE_NAME_ERROR;\n      } else if (attachment.value === null) {\n        attachment.error = NO_FILE_ERROR;\n      } else {\n        delete attachment.error;\n      }\n    }\n\n    return new InternalAttachmentState(nextAttachments as InternalAttachmentEntry[], nextAttachmentId);\n  }\n}\n\nexport const MultipartAttachmentsContext = createContext<MultipartAttachments>(new MultipartAttachments([]));\nexport const MultipartAttachmentsInternalContext = createContext<\n  [InternalAttachmentState, React.Dispatch<AttachmentsAction>]\n>([\n  new InternalAttachmentState(),\n  () => {\n    throw new Error('MultipartAttachmentsProvider not found. Make sure to render it higher up in the tree');\n  },\n]);\n\nexport function MultipartAttachmentsProvider({ children }: { children: React.ReactNode }) {\n  const [attachments, setAttachmentStates] = useReducer<Reducer<InternalAttachmentState, AttachmentsAction>>(\n    (attachments, action) => attachments.reduce(action),\n    new InternalAttachmentState()\n  );\n\n  return (\n    <MultipartAttachmentsContext.Provider value={new MultipartAttachments(attachments.validAttachments)}>\n      <MultipartAttachmentsInternalContext.Provider value={[attachments, setAttachmentStates]}>\n        {children}\n      </MultipartAttachmentsInternalContext.Provider>\n    </MultipartAttachmentsContext.Provider>\n  );\n}\n"]}

package/dist/commonjs/index.d.ts

@@ -0,0 +1,3 @@
+export type { MultipartAttachments, MultipartFetcher } from './multipart-attachments.js';
+export { default as MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN } from './plugin.js';
+export { MultipartAttachmentsContext, MultipartAttachmentsProvider } from './context.js';

package/dist/commonjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipartAttachmentsProvider = exports.MultipartAttachmentsContext = exports.MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN = void 0;
+var plugin_js_1 = require("./plugin.js");
+Object.defineProperty(exports, "MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN", { enumerable: true, get: function () { return __importDefault(plugin_js_1).default; } });
+var context_js_1 = require("./context.js");
+Object.defineProperty(exports, "MultipartAttachmentsContext", { enumerable: true, get: function () { return context_js_1.MultipartAttachmentsContext; } });
+Object.defineProperty(exports, "MultipartAttachmentsProvider", { enumerable: true, get: function () { return context_js_1.MultipartAttachmentsProvider; } });
+//# sourceMappingURL=index.js.map

package/dist/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAEA,yCAA+E;AAAtE,mJAAA,OAAO,OAAyC;AACzD,2CAAyF;AAAhF,yHAAA,2BAA2B,OAAA;AAAE,0HAAA,4BAA4B,OAAA","sourcesContent":["export type { MultipartAttachments, MultipartFetcher } from './multipart-attachments.js';\n\nexport { default as MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN } from './plugin.js';\nexport { MultipartAttachmentsContext, MultipartAttachmentsProvider } from './context.js';\n"]}

package/dist/commonjs/multipart-attachments.d.ts

@@ -0,0 +1,20 @@
+import { Fetcher, FetcherOpts, FetcherParams, FetcherReturnType } from '@graphiql/toolkit';
+export type AttachmentEntry = {
+    name: string;
+    value: File;
+};
+export type MultipartFetcher = (graphQLParams: FetcherParams, multipartFormData: FormData | null, opts?: FetcherOpts) => FetcherReturnType;
+export declare class MultipartAttachments {
+    private _attachments;
+    constructor(attachments: AttachmentEntry[]);
+    /**
+     * Returns an implementation of fetch that will transform the request to a multipart request if any files are found
+     */
+    decoratedFetch(fetchOverride?: typeof fetch): typeof fetch;
+    /**
+     * Constructs a GraphiQL Fetcher that provides FormData to the passed in MultipartFetcher
+     */
+    decoratedFetcher(fetcher: MultipartFetcher): Fetcher;
+    get attachments(): Map<string, File>;
+    private asFormData;
+}

package/dist/commonjs/multipart-attachments.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipartAttachments = void 0;
+const OPERATIONS_KEY = 'operations';
+const MAP_KEY = 'map';
+class MultipartAttachments {
+    _attachments;
+    constructor(attachments) {
+        this._attachments = attachments;
+    }
+    /**
+     * Returns an implementation of fetch that will transform the request to a multipart request if any files are found
+     */
+    decoratedFetch(fetchOverride = fetch) {
+        if (this._attachments.length > 0) {
+            return async (input, init) => {
+                const originalRequest = new Request(input, init);
+                // we're going to overwrite the body but firefox complains if we don't clone it
+                const originalBody = await originalRequest.clone().text();
+                if (JSON.parse(originalBody)?.operationName !== 'IntrospectionQuery') {
+                    const body = this.asFormData(originalBody);
+                    const headers = new Headers(originalRequest.headers);
+                    // make sure form data sets the correct content type
+                    headers.delete('content-type');
+                    return await fetchOverride(originalRequest, { body, headers });
+                }
+                else {
+                    // just pass through for an introspection query
+                    return fetchOverride(originalRequest);
+                }
+            };
+        }
+        else {
+            return fetchOverride;
+        }
+    }
+    /**
+     * Constructs a GraphiQL Fetcher that provides FormData to the passed in MultipartFetcher
+     */
+    decoratedFetcher(fetcher) {
+        return (graphQLParams, opts) => {
+            return fetcher(graphQLParams, this.asFormData(graphQLParams), opts);
+        };
+    }
+    get attachments() {
+        return new Map(this._attachments.map(({ name, value }) => [name, value]));
+    }
+    asFormData(operations) {
+        const attachments = this.attachments;
+        // verify our attachments
+        for (const invalidKey of [OPERATIONS_KEY, MAP_KEY]) {
+            if (attachments.has(invalidKey)) {
+                console.error(`Cannot have an attachment named "${invalidKey}"`);
+                return null;
+            }
+        }
+        if (attachments.size > 0) {
+            const formData = new FormData();
+            const encodedOperations = typeof operations === 'string' ? operations : JSON.stringify(operations);
+            formData.set(OPERATIONS_KEY, encodedOperations);
+            attachments.forEach((value, key) => {
+                formData.append(key, value);
+            });
+            return formData;
+        }
+        else {
+            return null;
+        }
+    }
+}
+exports.MultipartAttachments = MultipartAttachments;
+//# sourceMappingURL=multipart-attachments.js.map

package/dist/commonjs/multipart-attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multipart-attachments.js","sourceRoot":"","sources":["../../src/multipart-attachments.ts"],"names":[],"mappings":"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","sourcesContent":["import { Fetcher, FetcherOpts, FetcherParams, FetcherReturnType } from '@graphiql/toolkit';\n\nconst OPERATIONS_KEY = 'operations';\nconst MAP_KEY = 'map';\n\nexport type AttachmentEntry = {\n  name: string;\n  value: File;\n};\n\nexport type MultipartFetcher = (\n  graphQLParams: FetcherParams,\n  multipartFormData: FormData | null,\n  opts?: FetcherOpts\n) => FetcherReturnType;\n\nexport class MultipartAttachments {\n  private _attachments: AttachmentEntry[];\n\n  constructor(attachments: AttachmentEntry[]) {\n    this._attachments = attachments;\n  }\n\n  /**\n   * Returns an implementation of fetch that will transform the request to a multipart request if any files are found\n   */\n  public decoratedFetch(fetchOverride: typeof fetch = fetch): typeof fetch {\n    if (this._attachments.length > 0) {\n      return async (input: RequestInfo | URL, init?: RequestInit) => {\n        const originalRequest = new Request(input, init);\n        // we're going to overwrite the body but firefox complains if we don't clone it\n        const originalBody = await originalRequest.clone().text();\n\n        if (JSON.parse(originalBody)?.operationName !== 'IntrospectionQuery') {\n          const body = this.asFormData(originalBody);\n          const headers = new Headers(originalRequest.headers);\n\n          // make sure form data sets the correct content type\n          headers.delete('content-type');\n\n          return await fetchOverride(originalRequest, { body, headers });\n        } else {\n          // just pass through for an introspection query\n          return fetchOverride(originalRequest);\n        }\n      };\n    } else {\n      return fetchOverride;\n    }\n  }\n\n  /**\n   * Constructs a GraphiQL Fetcher that provides FormData to the passed in MultipartFetcher\n   */\n  public decoratedFetcher(fetcher: MultipartFetcher): Fetcher {\n    return (graphQLParams: FetcherParams, opts?: FetcherOpts) => {\n      return fetcher(graphQLParams, this.asFormData(graphQLParams), opts);\n    };\n  }\n\n  get attachments(): Map<string, File> {\n    return new Map(this._attachments.map(({ name, value }) => [name, value]));\n  }\n\n  private asFormData(operations: FetcherParams | string): FormData | null {\n    const attachments = this.attachments;\n\n    // verify our attachments\n    for (const invalidKey of [OPERATIONS_KEY, MAP_KEY]) {\n      if (attachments.has(invalidKey)) {\n        console.error(`Cannot have an attachment named \"${invalidKey}\"`);\n\n        return null;\n      }\n    }\n\n    if (attachments.size > 0) {\n      const formData = new FormData();\n\n      const encodedOperations = typeof operations === 'string' ? operations : JSON.stringify(operations);\n      formData.set(OPERATIONS_KEY, encodedOperations);\n\n      attachments.forEach((value, key) => {\n        formData.append(key, value);\n      });\n\n      return formData;\n    } else {\n      return null;\n    }\n  }\n}\n"]}

package/dist/commonjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/commonjs/plugin.d.ts

@@ -0,0 +1,21 @@
+import { GraphiQLPlugin } from '@graphiql/react';
+import React from 'react';
+import { AttachmentDeleteAction, AttachmentUpdateAction } from './context.js';
+import '../../style.css';
+type AttachmentContentProps = {
+    name: string;
+    value: File | null;
+    updateAttachment: (action: Omit<AttachmentUpdateAction, 'id'> | Omit<AttachmentDeleteAction, 'id'>) => void;
+    error?: string;
+};
+declare const GRAPHIQL_PLUGIN: GraphiQLPlugin;
+export declare function AttachmentContent({ name, value, updateAttachment, error }: AttachmentContentProps): React.JSX.Element;
+export declare function PartNameComponent({ name, setName }: {
+    name: string;
+    setName: (name: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PartHeadersComponent({ name, value }: {
+    name: string;
+    value: File;
+}): import("react/jsx-runtime").JSX.Element;
+export default GRAPHIQL_PLUGIN;

package/dist/commonjs/plugin.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PartHeadersComponent = exports.PartNameComponent = exports.AttachmentContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@graphiql/react");
+const react_2 = require("react");
+const attachment_icon_svg_js_1 = __importDefault(require("./attachment-icon.svg.js"));
+const context_js_1 = require("./context.js");
+require("../../style.css");
+const GRAPHIQL_PLUGIN = {
+    title: 'Multipart Attachments',
+    icon: () => {
+        const [attachments] = (0, react_2.useContext)(context_js_1.MultipartAttachmentsInternalContext);
+        const pluginContext = (0, react_1.usePluginContext)();
+        const style = {
+            fontFamily: 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-inline-code)',
+            textAlign: 'center',
+            width: 'auto',
+        };
+        if (pluginContext?.visiblePlugin === GRAPHIQL_PLUGIN) {
+            style.fontWeight = 'bold';
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: 'attachments-icon', children: [attachment_icon_svg_js_1.default, attachments.validAttachments.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'attachments-icon-badge', children: attachments.validAttachments.length })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }));
+    },
+    content: () => {
+        const [attachments, attachmentsDispatch] = (0, react_2.useContext)(context_js_1.MultipartAttachmentsInternalContext);
+        return ((0, jsx_runtime_1.jsxs)("div", { className: 'attachments-container', children: [(0, jsx_runtime_1.jsx)("h2", { children: "Multipart Attachments" }), attachments.map(({ id, name, value, error }) => {
+                    return ((0, jsx_runtime_1.jsx)(AttachmentContent, { name: name, value: value, updateAttachment: (action) => attachmentsDispatch({ ...action, id }), error: error }, id));
+                }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center' }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => attachmentsDispatch({ action: 'add' }), children: "Add Part" }) })] }));
+    },
+};
+function AttachmentContent({ name, value, updateAttachment, error }) {
+    const fileInputRef = (0, react_2.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'attachment-content', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'attachment-title', children: [(0, jsx_runtime_1.jsx)(PartNameComponent, { name: name, setName: (name) => updateAttachment({ action: 'update', name }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => updateAttachment({ action: 'delete' }), className: 'attachment-delete', children: (0, jsx_runtime_1.jsx)(react_1.TrashIcon, {}) })] }), error ? (0, jsx_runtime_1.jsx)("div", { className: 'graphiql-doc-explorer-error', children: error }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), value ? (0, jsx_runtime_1.jsx)(PartHeadersComponent, { name: name, value: value }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { style: { marginTop: '0.5em' }, onClick: () => fileInputRef.current?.click(), children: "Attach File" }), (0, jsx_runtime_1.jsx)("input", { type: 'file', ref: fileInputRef, onChange: (event) => {
+                            const file = event.target.files?.[0];
+                            if (file) {
+                                updateAttachment({ action: 'update', value: file });
+                            }
+                        }, style: { display: 'none' } })] })] }));
+}
+exports.AttachmentContent = AttachmentContent;
+function PartNameComponent({ name, setName }) {
+    const [isEditing, setIsEditing] = (0, react_2.useState)(false);
+    const inputRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        if (isEditing) {
+            inputRef.current?.focus();
+        }
+    }, [isEditing]);
+    function endEditing() {
+        setIsEditing(false);
+        if (inputRef.current) {
+            setName(inputRef.current.value);
+        }
+    }
+    function onSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        endEditing();
+    }
+    if (isEditing) {
+        return ((0, jsx_runtime_1.jsx)("form", { onSubmit: onSubmit, children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: 'text', defaultValue: name, onBlur: endEditing, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        onSubmit(e);
+                    }
+                } }) }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { onClick: () => setIsEditing(true), style: { cursor: 'pointer' }, children: [name, "\u00A0", (0, jsx_runtime_1.jsx)(react_1.PenIcon, {})] }) }));
+    }
+}
+exports.PartNameComponent = PartNameComponent;
+function PartHeadersComponent({ name, value }) {
+    const baseContentDisposition = `form-data; name="${encodeURIComponent(name)}"`;
+    let headers;
+    if (typeof value !== 'string') {
+        headers = [
+            ['Content-Disposition', `${baseContentDisposition}; filename="${encodeURIComponent(value.name)}"`],
+            ['Content-Type', value.type.length > 0 ? value.type : 'application/octet-stream'],
+        ];
+    }
+    else {
+        headers = [['Content-Disposition', baseContentDisposition]];
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'attachment-header', children: headers.map(([name, value]) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { style: { color: 'hsl(var(--color-info))' }, children: [name, ": "] }), (0, jsx_runtime_1.jsx)("span", { children: value })] }, name))) }));
+}
+exports.PartHeadersComponent = PartHeadersComponent;
+exports.default = GRAPHIQL_PLUGIN;
+//# sourceMappingURL=plugin.js.map

package/dist/commonjs/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../src/plugin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { GraphiQLPlugin, PenIcon, TrashIcon, usePluginContext } from '@graphiql/react';\nimport React, { CSSProperties, useContext, useEffect, useRef, useState } from 'react';\nimport uploadClipSvg from './attachment-icon.svg.js';\nimport { AttachmentDeleteAction, AttachmentUpdateAction, MultipartAttachmentsInternalContext } from './context.js';\n\nimport '../../style.css';\n\ntype AttachmentContentProps = {\n  name: string;\n  value: File | null;\n  updateAttachment: (action: Omit<AttachmentUpdateAction, 'id'> | Omit<AttachmentDeleteAction, 'id'>) => void;\n  error?: string;\n};\n\nconst GRAPHIQL_PLUGIN: GraphiQLPlugin = {\n  title: 'Multipart Attachments',\n  icon: () => {\n    const [attachments] = useContext(MultipartAttachmentsInternalContext);\n    const pluginContext = usePluginContext();\n\n    const style: CSSProperties = {\n      fontFamily: 'var(--font-family-mono)',\n      fontSize: 'var(--font-size-inline-code)',\n      textAlign: 'center',\n      width: 'auto',\n    };\n    if (pluginContext?.visiblePlugin === GRAPHIQL_PLUGIN) {\n      style.fontWeight = 'bold';\n    }\n\n    return (\n      <div className='attachments-icon'>\n        {uploadClipSvg}\n        {attachments.validAttachments.length > 0 ? (\n          <span className='attachments-icon-badge'>{attachments.validAttachments.length}</span>\n        ) : (\n          <></>\n        )}\n      </div>\n    );\n  },\n  content: () => {\n    const [attachments, attachmentsDispatch] = useContext(MultipartAttachmentsInternalContext);\n\n    return (\n      <div className={'attachments-container'}>\n        <h2>Multipart Attachments</h2>\n        {attachments.map(({ id, name, value, error }) => {\n          return (\n            <AttachmentContent\n              key={id}\n              name={name}\n              value={value}\n              updateAttachment={(action) => attachmentsDispatch({ ...action, id })}\n              error={error}\n            />\n          );\n        })}\n        <div style={{ textAlign: 'center' }}>\n          <button onClick={() => attachmentsDispatch({ action: 'add' })}>Add Part</button>\n        </div>\n      </div>\n    );\n  },\n};\n\nexport function AttachmentContent({ name, value, updateAttachment, error }: AttachmentContentProps): React.JSX.Element {\n  const fileInputRef = useRef<HTMLInputElement | null>(null);\n\n  return (\n    <div className={'attachment-content'}>\n      <div className={'attachment-title'}>\n        <PartNameComponent name={name} setName={(name) => updateAttachment({ action: 'update', name })} />\n        <button onClick={() => updateAttachment({ action: 'delete' })} className={'attachment-delete'}>\n          <TrashIcon />\n        </button>\n      </div>\n      {error ? <div className='graphiql-doc-explorer-error'>{error}</div> : <></>}\n      {value ? <PartHeadersComponent name={name} value={value} /> : <></>}\n      <div>\n        <button style={{ marginTop: '0.5em' }} onClick={() => fileInputRef.current?.click()}>\n          Attach File\n        </button>\n        <input\n          type='file'\n          ref={fileInputRef}\n          onChange={(event) => {\n            const file = event.target.files?.[0];\n            if (file) {\n              updateAttachment({ action: 'update', value: file });\n            }\n          }}\n          style={{ display: 'none' }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport function PartNameComponent({ name, setName }: { name: string; setName: (name: string) => void }) {\n  const [isEditing, setIsEditing] = useState(false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    if (isEditing) {\n      inputRef.current?.focus();\n    }\n  }, [isEditing]);\n\n  function endEditing() {\n    setIsEditing(false);\n    if (inputRef.current) {\n      setName(inputRef.current.value);\n    }\n  }\n  function onSubmit(event: React.BaseSyntheticEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    endEditing();\n  }\n\n  if (isEditing) {\n    return (\n      <form onSubmit={onSubmit}>\n        <input\n          ref={inputRef}\n          type='text'\n          defaultValue={name}\n          onBlur={endEditing}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') {\n              onSubmit(e);\n            }\n          }}\n        />\n      </form>\n    );\n  } else {\n    return (\n      <>\n        <span onClick={() => setIsEditing(true)} style={{ cursor: 'pointer' }}>\n          {name}\n          &nbsp;\n          <PenIcon />\n        </span>\n      </>\n    );\n  }\n}\n\nexport function PartHeadersComponent({ name, value }: { name: string; value: File }) {\n  const baseContentDisposition = `form-data; name=\"${encodeURIComponent(name)}\"`;\n  let headers;\n  if (typeof value !== 'string') {\n    headers = [\n      ['Content-Disposition', `${baseContentDisposition}; filename=\"${encodeURIComponent(value.name)}\"`],\n      ['Content-Type', value.type.length > 0 ? value.type : 'application/octet-stream'],\n    ];\n  } else {\n    headers = [['Content-Disposition', baseContentDisposition]];\n  }\n\n  return (\n    <div className={'attachment-header'}>\n      {headers.map(([name, value]) => (\n        <div key={name}>\n          <span style={{ color: 'hsl(var(--color-info))' }}>{name}: </span>\n          <span>{value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default GRAPHIQL_PLUGIN;\n"]}

package/dist/esm/attachment-icon.svg.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/esm/attachment-icon.svg.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (_jsx("svg", { height: '1em', viewBox: '0 0 14 14', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M 9 4 L 4.5 8.5 C 3.5 9.5 5 11 6 10 L 11.5 4.5 C 13.5 2.5 11 -0.5 8.5 2 L 2.5 8 C 0 10.5 4 14.5 6.5 12 L 12.5 6', stroke: 'currentColor', strokeWidth: '0.8' }) }));
+//# sourceMappingURL=attachment-icon.svg.js.map

package/dist/esm/attachment-icon.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-icon.svg.js","sourceRoot":"","sources":["../../src/attachment-icon.svg.tsx"],"names":[],"mappings":";AAAA,eAAe,CACb,cAAK,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,YAClF,eACE,CAAC,EAAC,iHAAiH,EACnH,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,GACjB,GACE,CACP,CAAC","sourcesContent":["export default (\n  <svg height='1em' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>\n    <path\n      d='M 9 4 L 4.5 8.5 C 3.5 9.5 5 11 6 10 L 11.5 4.5 C 13.5 2.5 11 -0.5 8.5 2 L 2.5 8 C 0 10.5 4 14.5 6.5 12 L 12.5 6'\n      stroke='currentColor'\n      strokeWidth='0.8'\n    />\n  </svg>\n);\n"]}

package/dist/esm/context.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AttachmentEntry, MultipartAttachments } from './multipart-attachments.js';
+export type AttachmentAddAction = {
+    action: 'add';
+    name?: string;
+};
+export type AttachmentUpdateAction = {
+    action: 'update';
+    id: number;
+    name?: string;
+    value?: File;
+};
+export type AttachmentDeleteAction = {
+    action: 'delete';
+    id: number;
+};
+export type AttachmentsAction = AttachmentAddAction | AttachmentUpdateAction | AttachmentDeleteAction;
+export type InternalAttachmentEntry = {
+    id: number;
+} & (({
+    error?: string;
+} & AttachmentEntry) | {
+    name: string;
+    value: null;
+    error: string;
+});
+export declare const NO_FILE_ERROR = "No File Attached";
+export declare const DUPLICATE_NAME_ERROR = "Duplicate Name";
+export declare class InternalAttachmentState {
+    private readonly attachmentId;
+    readonly attachments: InternalAttachmentEntry[];
+    constructor(attachments?: InternalAttachmentEntry[], attachmentId?: number);
+    get validAttachments(): AttachmentEntry[];
+    map<T>(callback: (value: InternalAttachmentEntry, index: number, array: InternalAttachmentEntry[]) => T): T[];
+    reduce(action: AttachmentsAction): InternalAttachmentState;
+}
+export declare const MultipartAttachmentsContext: React.Context<MultipartAttachments>;
+export declare const MultipartAttachmentsInternalContext: React.Context<[InternalAttachmentState, React.Dispatch<AttachmentsAction>]>;
+export declare function MultipartAttachmentsProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/context.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useReducer } from 'react';
+import { MultipartAttachments } from './multipart-attachments.js';
+export const NO_FILE_ERROR = 'No File Attached';
+export const DUPLICATE_NAME_ERROR = 'Duplicate Name';
+export class InternalAttachmentState {
+    attachmentId;
+    attachments;
+    constructor(attachments = [], attachmentId = 0) {
+        this.attachments = attachments;
+        this.attachmentId = attachmentId;
+    }
+    get validAttachments() {
+        return this.attachments.filter((attachment) => attachment.value !== null && !attachment.error);
+    }
+    map(callback) {
+        return this.attachments.map(callback);
+    }
+    reduce(action) {
+        let nextAttachments;
+        let nextAttachmentId = this.attachmentId;
+        switch (action.action) {
+            case 'add': {
+                nextAttachments = [
+                    ...this.attachments,
+                    {
+                        id: this.attachmentId,
+                        name: action.name ?? `part${this.attachmentId}`,
+                        value: null,
+                    },
+                ];
+                nextAttachmentId++;
+                break;
+            }
+            case 'update': {
+                nextAttachments = this.attachments.map((attachment) => {
+                    if (attachment.id === action.id) {
+                        return {
+                            ...attachment,
+                            name: action.name ?? attachment.name,
+                            value: action.value !== undefined ? action.value : attachment.value,
+                        };
+                    }
+                    else {
+                        return attachment;
+                    }
+                });
+                break;
+            }
+            case 'delete': {
+                nextAttachments = this.attachments.filter((attachment) => attachment.id !== action.id);
+                break;
+            }
+            default: {
+                throw new Error(`Unknown action ${action}`);
+            }
+        }
+        for (const attachment of nextAttachments) {
+            if (nextAttachments.filter(({ name }) => name === attachment.name).length > 1) {
+                attachment.error = DUPLICATE_NAME_ERROR;
+            }
+            else if (attachment.value === null) {
+                attachment.error = NO_FILE_ERROR;
+            }
+            else {
+                delete attachment.error;
+            }
+        }
+        return new InternalAttachmentState(nextAttachments, nextAttachmentId);
+    }
+}
+export const MultipartAttachmentsContext = createContext(new MultipartAttachments([]));
+export const MultipartAttachmentsInternalContext = createContext([
+    new InternalAttachmentState(),
+    () => {
+        throw new Error('MultipartAttachmentsProvider not found. Make sure to render it higher up in the tree');
+    },
+]);
+export function MultipartAttachmentsProvider({ children }) {
+    const [attachments, setAttachmentStates] = useReducer((attachments, action) => attachments.reduce(action), new InternalAttachmentState());
+    return (_jsx(MultipartAttachmentsContext.Provider, { value: new MultipartAttachments(attachments.validAttachments), children: _jsx(MultipartAttachmentsInternalContext.Provider, { value: [attachments, setAttachmentStates], children: children }) }));
+}
+//# sourceMappingURL=context.js.map

package/dist/esm/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/context.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAW,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAmB,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AA0BnF,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC;AAChD,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,CAAC;AAErD,MAAM,OAAO,uBAAuB;IACjB,YAAY,CAAC;IACd,WAAW,CAA4B;IAEvD,YAAY,cAAyC,EAAE,EAAE,YAAY,GAAG,CAAC;QACvE,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,IAAW,gBAAgB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAC5B,CACE,UAAmC,EAGnC,EAAE,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CACpD,CAAC;IACJ,CAAC;IAEM,GAAG,CAAI,QAAgG;QAC5G,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAEM,MAAM,CAAC,MAAyB;QACrC,IAAI,eAAe,CAAC;QACpB,IAAI,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC;QACzC,QAAQ,MAAM,CAAC,MAAM,EAAE,CAAC;YACtB,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,eAAe,GAAG;oBAChB,GAAG,IAAI,CAAC,WAAW;oBACnB;wBACE,EAAE,EAAE,IAAI,CAAC,YAAY;wBACrB,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE;wBAC/C,KAAK,EAAE,IAAI;qBACZ;iBACF,CAAC;gBACF,gBAAgB,EAAE,CAAC;gBACnB,MAAM;YACR,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;oBACpD,IAAI,UAAU,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,EAAE,CAAC;wBAChC,OAAO;4BACL,GAAG,UAAU;4BACb,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI;4BACpC,KAAK,EAAE,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK;yBACpE,CAAC;oBACJ,CAAC;yBAAM,CAAC;wBACN,OAAO,UAAU,CAAC;oBACpB,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,MAAM;YACR,CAAC;YACD,KAAK,QAAQ,CAAC,CAAC,CAAC;gBACd,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBACvF,MAAM;YACR,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,MAAM,IAAI,KAAK,CAAC,kBAAkB,MAAM,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QAED,KAAK,MAAM,UAAU,IAAI,eAAe,EAAE,CAAC;YACzC,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9E,UAAU,CAAC,KAAK,GAAG,oBAAoB,CAAC;YAC1C,CAAC;iBAAM,IAAI,UAAU,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;gBACrC,UAAU,CAAC,KAAK,GAAG,aAAa,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,OAAO,UAAU,CAAC,KAAK,CAAC;YAC1B,CAAC;QACH,CAAC;QAED,OAAO,IAAI,uBAAuB,CAAC,eAA4C,EAAE,gBAAgB,CAAC,CAAC;IACrG,CAAC;CACF;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,aAAa,CAAuB,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7G,MAAM,CAAC,MAAM,mCAAmC,GAAG,aAAa,CAE9D;IACA,IAAI,uBAAuB,EAAE;IAC7B,GAAG,EAAE;QACH,MAAM,IAAI,KAAK,CAAC,sFAAsF,CAAC,CAAC;IAC1G,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,4BAA4B,CAAC,EAAE,QAAQ,EAAiC;IACtF,MAAM,CAAC,WAAW,EAAE,mBAAmB,CAAC,GAAG,UAAU,CACnD,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,EACnD,IAAI,uBAAuB,EAAE,CAC9B,CAAC;IAEF,OAAO,CACL,KAAC,2BAA2B,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,oBAAoB,CAAC,WAAW,CAAC,gBAAgB,CAAC,YACjG,KAAC,mCAAmC,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,WAAW,EAAE,mBAAmB,CAAC,YACpF,QAAQ,GACoC,GACV,CACxC,CAAC;AACJ,CAAC","sourcesContent":["import React, { createContext, Reducer, useReducer } from 'react';\nimport { AttachmentEntry, MultipartAttachments } from './multipart-attachments.js';\n\nexport type AttachmentAddAction = {\n  action: 'add';\n  name?: string;\n};\n\nexport type AttachmentUpdateAction = {\n  action: 'update';\n  id: number;\n  name?: string;\n  value?: File;\n};\n\nexport type AttachmentDeleteAction = {\n  action: 'delete';\n  id: number;\n};\n\nexport type AttachmentsAction = AttachmentAddAction | AttachmentUpdateAction | AttachmentDeleteAction;\n\nexport type InternalAttachmentEntry = { id: number } & (\n  | ({ error?: string } & AttachmentEntry)\n  | { name: string; value: null; error: string }\n);\n\nexport const NO_FILE_ERROR = 'No File Attached';\nexport const DUPLICATE_NAME_ERROR = 'Duplicate Name';\n\nexport class InternalAttachmentState {\n  private readonly attachmentId;\n  public readonly attachments: InternalAttachmentEntry[];\n\n  constructor(attachments: InternalAttachmentEntry[] = [], attachmentId = 0) {\n    this.attachments = attachments;\n    this.attachmentId = attachmentId;\n  }\n\n  public get validAttachments(): AttachmentEntry[] {\n    return this.attachments.filter(\n      (\n        attachment: InternalAttachmentEntry\n      ): attachment is AttachmentEntry & {\n        id: number;\n      } => attachment.value !== null && !attachment.error\n    );\n  }\n\n  public map<T>(callback: (value: InternalAttachmentEntry, index: number, array: InternalAttachmentEntry[]) => T): T[] {\n    return this.attachments.map(callback);\n  }\n\n  public reduce(action: AttachmentsAction): InternalAttachmentState {\n    let nextAttachments;\n    let nextAttachmentId = this.attachmentId;\n    switch (action.action) {\n      case 'add': {\n        nextAttachments = [\n          ...this.attachments,\n          {\n            id: this.attachmentId,\n            name: action.name ?? `part${this.attachmentId}`,\n            value: null,\n          },\n        ];\n        nextAttachmentId++;\n        break;\n      }\n      case 'update': {\n        nextAttachments = this.attachments.map((attachment) => {\n          if (attachment.id === action.id) {\n            return {\n              ...attachment,\n              name: action.name ?? attachment.name,\n              value: action.value !== undefined ? action.value : attachment.value,\n            };\n          } else {\n            return attachment;\n          }\n        });\n        break;\n      }\n      case 'delete': {\n        nextAttachments = this.attachments.filter((attachment) => attachment.id !== action.id);\n        break;\n      }\n      default: {\n        throw new Error(`Unknown action ${action}`);\n      }\n    }\n\n    for (const attachment of nextAttachments) {\n      if (nextAttachments.filter(({ name }) => name === attachment.name).length > 1) {\n        attachment.error = DUPLICATE_NAME_ERROR;\n      } else if (attachment.value === null) {\n        attachment.error = NO_FILE_ERROR;\n      } else {\n        delete attachment.error;\n      }\n    }\n\n    return new InternalAttachmentState(nextAttachments as InternalAttachmentEntry[], nextAttachmentId);\n  }\n}\n\nexport const MultipartAttachmentsContext = createContext<MultipartAttachments>(new MultipartAttachments([]));\nexport const MultipartAttachmentsInternalContext = createContext<\n  [InternalAttachmentState, React.Dispatch<AttachmentsAction>]\n>([\n  new InternalAttachmentState(),\n  () => {\n    throw new Error('MultipartAttachmentsProvider not found. Make sure to render it higher up in the tree');\n  },\n]);\n\nexport function MultipartAttachmentsProvider({ children }: { children: React.ReactNode }) {\n  const [attachments, setAttachmentStates] = useReducer<Reducer<InternalAttachmentState, AttachmentsAction>>(\n    (attachments, action) => attachments.reduce(action),\n    new InternalAttachmentState()\n  );\n\n  return (\n    <MultipartAttachmentsContext.Provider value={new MultipartAttachments(attachments.validAttachments)}>\n      <MultipartAttachmentsInternalContext.Provider value={[attachments, setAttachmentStates]}>\n        {children}\n      </MultipartAttachmentsInternalContext.Provider>\n    </MultipartAttachmentsContext.Provider>\n  );\n}\n"]}

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export type { MultipartAttachments, MultipartFetcher } from './multipart-attachments.js';
+export { default as MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN } from './plugin.js';
+export { MultipartAttachmentsContext, MultipartAttachmentsProvider } from './context.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { default as MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN } from './plugin.js';
+export { MultipartAttachmentsContext, MultipartAttachmentsProvider } from './context.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,qCAAqC,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export type { MultipartAttachments, MultipartFetcher } from './multipart-attachments.js';\n\nexport { default as MULTIPART_ATTACHMENTS_GRAPHIQL_PLUGIN } from './plugin.js';\nexport { MultipartAttachmentsContext, MultipartAttachmentsProvider } from './context.js';\n"]}

package/dist/esm/multipart-attachments.d.ts

@@ -0,0 +1,20 @@
+import { Fetcher, FetcherOpts, FetcherParams, FetcherReturnType } from '@graphiql/toolkit';
+export type AttachmentEntry = {
+    name: string;
+    value: File;
+};
+export type MultipartFetcher = (graphQLParams: FetcherParams, multipartFormData: FormData | null, opts?: FetcherOpts) => FetcherReturnType;
+export declare class MultipartAttachments {
+    private _attachments;
+    constructor(attachments: AttachmentEntry[]);
+    /**
+     * Returns an implementation of fetch that will transform the request to a multipart request if any files are found
+     */
+    decoratedFetch(fetchOverride?: typeof fetch): typeof fetch;
+    /**
+     * Constructs a GraphiQL Fetcher that provides FormData to the passed in MultipartFetcher
+     */
+    decoratedFetcher(fetcher: MultipartFetcher): Fetcher;
+    get attachments(): Map<string, File>;
+    private asFormData;
+}

package/dist/esm/multipart-attachments.js

@@ -0,0 +1,68 @@
+const OPERATIONS_KEY = 'operations';
+const MAP_KEY = 'map';
+export class MultipartAttachments {
+    _attachments;
+    constructor(attachments) {
+        this._attachments = attachments;
+    }
+    /**
+     * Returns an implementation of fetch that will transform the request to a multipart request if any files are found
+     */
+    decoratedFetch(fetchOverride = fetch) {
+        if (this._attachments.length > 0) {
+            return async (input, init) => {
+                const originalRequest = new Request(input, init);
+                // we're going to overwrite the body but firefox complains if we don't clone it
+                const originalBody = await originalRequest.clone().text();
+                if (JSON.parse(originalBody)?.operationName !== 'IntrospectionQuery') {
+                    const body = this.asFormData(originalBody);
+                    const headers = new Headers(originalRequest.headers);
+                    // make sure form data sets the correct content type
+                    headers.delete('content-type');
+                    return await fetchOverride(originalRequest, { body, headers });
+                }
+                else {
+                    // just pass through for an introspection query
+                    return fetchOverride(originalRequest);
+                }
+            };
+        }
+        else {
+            return fetchOverride;
+        }
+    }
+    /**
+     * Constructs a GraphiQL Fetcher that provides FormData to the passed in MultipartFetcher
+     */
+    decoratedFetcher(fetcher) {
+        return (graphQLParams, opts) => {
+            return fetcher(graphQLParams, this.asFormData(graphQLParams), opts);
+        };
+    }
+    get attachments() {
+        return new Map(this._attachments.map(({ name, value }) => [name, value]));
+    }
+    asFormData(operations) {
+        const attachments = this.attachments;
+        // verify our attachments
+        for (const invalidKey of [OPERATIONS_KEY, MAP_KEY]) {
+            if (attachments.has(invalidKey)) {
+                console.error(`Cannot have an attachment named "${invalidKey}"`);
+                return null;
+            }
+        }
+        if (attachments.size > 0) {
+            const formData = new FormData();
+            const encodedOperations = typeof operations === 'string' ? operations : JSON.stringify(operations);
+            formData.set(OPERATIONS_KEY, encodedOperations);
+            attachments.forEach((value, key) => {
+                formData.append(key, value);
+            });
+            return formData;
+        }
+        else {
+            return null;
+        }
+    }
+}
+//# sourceMappingURL=multipart-attachments.js.map

package/dist/esm/multipart-attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multipart-attachments.js","sourceRoot":"","sources":["../../src/multipart-attachments.ts"],"names":[],"mappings":"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","sourcesContent":["import { Fetcher, FetcherOpts, FetcherParams, FetcherReturnType } from '@graphiql/toolkit';\n\nconst OPERATIONS_KEY = 'operations';\nconst MAP_KEY = 'map';\n\nexport type AttachmentEntry = {\n  name: string;\n  value: File;\n};\n\nexport type MultipartFetcher = (\n  graphQLParams: FetcherParams,\n  multipartFormData: FormData | null,\n  opts?: FetcherOpts\n) => FetcherReturnType;\n\nexport class MultipartAttachments {\n  private _attachments: AttachmentEntry[];\n\n  constructor(attachments: AttachmentEntry[]) {\n    this._attachments = attachments;\n  }\n\n  /**\n   * Returns an implementation of fetch that will transform the request to a multipart request if any files are found\n   */\n  public decoratedFetch(fetchOverride: typeof fetch = fetch): typeof fetch {\n    if (this._attachments.length > 0) {\n      return async (input: RequestInfo | URL, init?: RequestInit) => {\n        const originalRequest = new Request(input, init);\n        // we're going to overwrite the body but firefox complains if we don't clone it\n        const originalBody = await originalRequest.clone().text();\n\n        if (JSON.parse(originalBody)?.operationName !== 'IntrospectionQuery') {\n          const body = this.asFormData(originalBody);\n          const headers = new Headers(originalRequest.headers);\n\n          // make sure form data sets the correct content type\n          headers.delete('content-type');\n\n          return await fetchOverride(originalRequest, { body, headers });\n        } else {\n          // just pass through for an introspection query\n          return fetchOverride(originalRequest);\n        }\n      };\n    } else {\n      return fetchOverride;\n    }\n  }\n\n  /**\n   * Constructs a GraphiQL Fetcher that provides FormData to the passed in MultipartFetcher\n   */\n  public decoratedFetcher(fetcher: MultipartFetcher): Fetcher {\n    return (graphQLParams: FetcherParams, opts?: FetcherOpts) => {\n      return fetcher(graphQLParams, this.asFormData(graphQLParams), opts);\n    };\n  }\n\n  get attachments(): Map<string, File> {\n    return new Map(this._attachments.map(({ name, value }) => [name, value]));\n  }\n\n  private asFormData(operations: FetcherParams | string): FormData | null {\n    const attachments = this.attachments;\n\n    // verify our attachments\n    for (const invalidKey of [OPERATIONS_KEY, MAP_KEY]) {\n      if (attachments.has(invalidKey)) {\n        console.error(`Cannot have an attachment named \"${invalidKey}\"`);\n\n        return null;\n      }\n    }\n\n    if (attachments.size > 0) {\n      const formData = new FormData();\n\n      const encodedOperations = typeof operations === 'string' ? operations : JSON.stringify(operations);\n      formData.set(OPERATIONS_KEY, encodedOperations);\n\n      attachments.forEach((value, key) => {\n        formData.append(key, value);\n      });\n\n      return formData;\n    } else {\n      return null;\n    }\n  }\n}\n"]}

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/dist/esm/plugin.d.ts

@@ -0,0 +1,21 @@
+import { GraphiQLPlugin } from '@graphiql/react';
+import React from 'react';
+import { AttachmentDeleteAction, AttachmentUpdateAction } from './context.js';
+import '../../style.css';
+type AttachmentContentProps = {
+    name: string;
+    value: File | null;
+    updateAttachment: (action: Omit<AttachmentUpdateAction, 'id'> | Omit<AttachmentDeleteAction, 'id'>) => void;
+    error?: string;
+};
+declare const GRAPHIQL_PLUGIN: GraphiQLPlugin;
+export declare function AttachmentContent({ name, value, updateAttachment, error }: AttachmentContentProps): React.JSX.Element;
+export declare function PartNameComponent({ name, setName }: {
+    name: string;
+    setName: (name: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PartHeadersComponent({ name, value }: {
+    name: string;
+    value: File;
+}): import("react/jsx-runtime").JSX.Element;
+export default GRAPHIQL_PLUGIN;

package/dist/esm/plugin.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PenIcon, TrashIcon, usePluginContext } from '@graphiql/react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import uploadClipSvg from './attachment-icon.svg.js';
+import { MultipartAttachmentsInternalContext } from './context.js';
+import '../../style.css';
+const GRAPHIQL_PLUGIN = {
+    title: 'Multipart Attachments',
+    icon: () => {
+        const [attachments] = useContext(MultipartAttachmentsInternalContext);
+        const pluginContext = usePluginContext();
+        const style = {
+            fontFamily: 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-inline-code)',
+            textAlign: 'center',
+            width: 'auto',
+        };
+        if (pluginContext?.visiblePlugin === GRAPHIQL_PLUGIN) {
+            style.fontWeight = 'bold';
+        }
+        return (_jsxs("div", { className: 'attachments-icon', children: [uploadClipSvg, attachments.validAttachments.length > 0 ? (_jsx("span", { className: 'attachments-icon-badge', children: attachments.validAttachments.length })) : (_jsx(_Fragment, {}))] }));
+    },
+    content: () => {
+        const [attachments, attachmentsDispatch] = useContext(MultipartAttachmentsInternalContext);
+        return (_jsxs("div", { className: 'attachments-container', children: [_jsx("h2", { children: "Multipart Attachments" }), attachments.map(({ id, name, value, error }) => {
+                    return (_jsx(AttachmentContent, { name: name, value: value, updateAttachment: (action) => attachmentsDispatch({ ...action, id }), error: error }, id));
+                }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx("button", { onClick: () => attachmentsDispatch({ action: 'add' }), children: "Add Part" }) })] }));
+    },
+};
+export function AttachmentContent({ name, value, updateAttachment, error }) {
+    const fileInputRef = useRef(null);
+    return (_jsxs("div", { className: 'attachment-content', children: [_jsxs("div", { className: 'attachment-title', children: [_jsx(PartNameComponent, { name: name, setName: (name) => updateAttachment({ action: 'update', name }) }), _jsx("button", { onClick: () => updateAttachment({ action: 'delete' }), className: 'attachment-delete', children: _jsx(TrashIcon, {}) })] }), error ? _jsx("div", { className: 'graphiql-doc-explorer-error', children: error }) : _jsx(_Fragment, {}), value ? _jsx(PartHeadersComponent, { name: name, value: value }) : _jsx(_Fragment, {}), _jsxs("div", { children: [_jsx("button", { style: { marginTop: '0.5em' }, onClick: () => fileInputRef.current?.click(), children: "Attach File" }), _jsx("input", { type: 'file', ref: fileInputRef, onChange: (event) => {
+                            const file = event.target.files?.[0];
+                            if (file) {
+                                updateAttachment({ action: 'update', value: file });
+                            }
+                        }, style: { display: 'none' } })] })] }));
+}
+export function PartNameComponent({ name, setName }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (isEditing) {
+            inputRef.current?.focus();
+        }
+    }, [isEditing]);
+    function endEditing() {
+        setIsEditing(false);
+        if (inputRef.current) {
+            setName(inputRef.current.value);
+        }
+    }
+    function onSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        endEditing();
+    }
+    if (isEditing) {
+        return (_jsx("form", { onSubmit: onSubmit, children: _jsx("input", { ref: inputRef, type: 'text', defaultValue: name, onBlur: endEditing, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        onSubmit(e);
+                    }
+                } }) }));
+    }
+    else {
+        return (_jsx(_Fragment, { children: _jsxs("span", { onClick: () => setIsEditing(true), style: { cursor: 'pointer' }, children: [name, "\u00A0", _jsx(PenIcon, {})] }) }));
+    }
+}
+export function PartHeadersComponent({ name, value }) {
+    const baseContentDisposition = `form-data; name="${encodeURIComponent(name)}"`;
+    let headers;
+    if (typeof value !== 'string') {
+        headers = [
+            ['Content-Disposition', `${baseContentDisposition}; filename="${encodeURIComponent(value.name)}"`],
+            ['Content-Type', value.type.length > 0 ? value.type : 'application/octet-stream'],
+        ];
+    }
+    else {
+        headers = [['Content-Disposition', baseContentDisposition]];
+    }
+    return (_jsx("div", { className: 'attachment-header', children: headers.map(([name, value]) => (_jsxs("div", { children: [_jsxs("span", { style: { color: 'hsl(var(--color-info))' }, children: [name, ": "] }), _jsx("span", { children: value })] }, name))) }));
+}
+export default GRAPHIQL_PLUGIN;
+//# sourceMappingURL=plugin.js.map

package/dist/esm/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../src/plugin.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAc,EAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,aAAa,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAkD,mCAAmC,EAAE,MAAM,cAAc,CAAC;AAEnH,OAAO,iBAAiB,CAAC;AASzB,MAAM,eAAe,GAAmB;IACtC,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,GAAG,EAAE;QACT,MAAM,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,mCAAmC,CAAC,CAAC;QACtE,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QAEzC,MAAM,KAAK,GAAkB;YAC3B,UAAU,EAAE,yBAAyB;YACrC,QAAQ,EAAE,8BAA8B;YACxC,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,MAAM;SACd,CAAC;QACF,IAAI,aAAa,EAAE,aAAa,KAAK,eAAe,EAAE,CAAC;YACrD,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;QAC5B,CAAC;QAED,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,aAC9B,aAAa,EACb,WAAW,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACzC,eAAM,SAAS,EAAC,wBAAwB,YAAE,WAAW,CAAC,gBAAgB,CAAC,MAAM,GAAQ,CACtF,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACG,CACP,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,GAAG,EAAE;QACZ,MAAM,CAAC,WAAW,EAAE,mBAAmB,CAAC,GAAG,UAAU,CAAC,mCAAmC,CAAC,CAAC;QAE3F,OAAO,CACL,eAAK,SAAS,EAAE,uBAAuB,aACrC,iDAA8B,EAC7B,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;oBAC9C,OAAO,CACL,KAAC,iBAAiB,IAEhB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,mBAAmB,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,EACpE,KAAK,EAAE,KAAK,IAJP,EAAE,CAKP,CACH,CAAC;gBACJ,CAAC,CAAC,EACF,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YACjC,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,yBAAmB,GAC5E,IACF,CACP,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAA0B;IAChG,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,OAAO,CACL,eAAK,SAAS,EAAE,oBAAoB,aAClC,eAAK,SAAS,EAAE,kBAAkB,aAChC,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAI,EAClG,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,mBAAmB,YAC3F,KAAC,SAAS,KAAG,GACN,IACL,EACL,KAAK,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,6BAA6B,YAAE,KAAK,GAAO,CAAC,CAAC,CAAC,mBAAK,EAC1E,KAAK,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,EACnE,0BACE,iBAAQ,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,4BAE1E,EACT,gBACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;4BACrC,IAAI,IAAI,EAAE,CAAC;gCACT,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;4BACtD,CAAC;wBACH,CAAC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC1B,IACE,IACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAqD;IACpG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE,CAAC;YACd,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,UAAU;QACjB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IACD,SAAS,QAAQ,CAAC,KAA+B;QAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,UAAU,EAAE,CAAC;IACf,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,eAAM,QAAQ,EAAE,QAAQ,YACtB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,EAClB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;wBACvB,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACd,CAAC;gBACH,CAAC,GACD,GACG,CACR,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CACL,4BACE,gBAAM,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,aAClE,IAAI,YAEL,KAAC,OAAO,KAAG,IACN,GACN,CACJ,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAiC;IACjF,MAAM,sBAAsB,GAAG,oBAAoB,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/E,IAAI,OAAO,CAAC;IACZ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,GAAG;YACR,CAAC,qBAAqB,EAAE,GAAG,sBAAsB,eAAe,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;YAClG,CAAC,cAAc,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC;SAClF,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,CAAC,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC9D,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,mBAAmB,YAChC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC9B,0BACE,gBAAM,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,aAAG,IAAI,UAAU,EACjE,yBAAO,KAAK,GAAQ,KAFZ,IAAI,CAGR,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC","sourcesContent":["import { GraphiQLPlugin, PenIcon, TrashIcon, usePluginContext } from '@graphiql/react';\nimport React, { CSSProperties, useContext, useEffect, useRef, useState } from 'react';\nimport uploadClipSvg from './attachment-icon.svg.js';\nimport { AttachmentDeleteAction, AttachmentUpdateAction, MultipartAttachmentsInternalContext } from './context.js';\n\nimport '../../style.css';\n\ntype AttachmentContentProps = {\n  name: string;\n  value: File | null;\n  updateAttachment: (action: Omit<AttachmentUpdateAction, 'id'> | Omit<AttachmentDeleteAction, 'id'>) => void;\n  error?: string;\n};\n\nconst GRAPHIQL_PLUGIN: GraphiQLPlugin = {\n  title: 'Multipart Attachments',\n  icon: () => {\n    const [attachments] = useContext(MultipartAttachmentsInternalContext);\n    const pluginContext = usePluginContext();\n\n    const style: CSSProperties = {\n      fontFamily: 'var(--font-family-mono)',\n      fontSize: 'var(--font-size-inline-code)',\n      textAlign: 'center',\n      width: 'auto',\n    };\n    if (pluginContext?.visiblePlugin === GRAPHIQL_PLUGIN) {\n      style.fontWeight = 'bold';\n    }\n\n    return (\n      <div className='attachments-icon'>\n        {uploadClipSvg}\n        {attachments.validAttachments.length > 0 ? (\n          <span className='attachments-icon-badge'>{attachments.validAttachments.length}</span>\n        ) : (\n          <></>\n        )}\n      </div>\n    );\n  },\n  content: () => {\n    const [attachments, attachmentsDispatch] = useContext(MultipartAttachmentsInternalContext);\n\n    return (\n      <div className={'attachments-container'}>\n        <h2>Multipart Attachments</h2>\n        {attachments.map(({ id, name, value, error }) => {\n          return (\n            <AttachmentContent\n              key={id}\n              name={name}\n              value={value}\n              updateAttachment={(action) => attachmentsDispatch({ ...action, id })}\n              error={error}\n            />\n          );\n        })}\n        <div style={{ textAlign: 'center' }}>\n          <button onClick={() => attachmentsDispatch({ action: 'add' })}>Add Part</button>\n        </div>\n      </div>\n    );\n  },\n};\n\nexport function AttachmentContent({ name, value, updateAttachment, error }: AttachmentContentProps): React.JSX.Element {\n  const fileInputRef = useRef<HTMLInputElement | null>(null);\n\n  return (\n    <div className={'attachment-content'}>\n      <div className={'attachment-title'}>\n        <PartNameComponent name={name} setName={(name) => updateAttachment({ action: 'update', name })} />\n        <button onClick={() => updateAttachment({ action: 'delete' })} className={'attachment-delete'}>\n          <TrashIcon />\n        </button>\n      </div>\n      {error ? <div className='graphiql-doc-explorer-error'>{error}</div> : <></>}\n      {value ? <PartHeadersComponent name={name} value={value} /> : <></>}\n      <div>\n        <button style={{ marginTop: '0.5em' }} onClick={() => fileInputRef.current?.click()}>\n          Attach File\n        </button>\n        <input\n          type='file'\n          ref={fileInputRef}\n          onChange={(event) => {\n            const file = event.target.files?.[0];\n            if (file) {\n              updateAttachment({ action: 'update', value: file });\n            }\n          }}\n          style={{ display: 'none' }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport function PartNameComponent({ name, setName }: { name: string; setName: (name: string) => void }) {\n  const [isEditing, setIsEditing] = useState(false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    if (isEditing) {\n      inputRef.current?.focus();\n    }\n  }, [isEditing]);\n\n  function endEditing() {\n    setIsEditing(false);\n    if (inputRef.current) {\n      setName(inputRef.current.value);\n    }\n  }\n  function onSubmit(event: React.BaseSyntheticEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    endEditing();\n  }\n\n  if (isEditing) {\n    return (\n      <form onSubmit={onSubmit}>\n        <input\n          ref={inputRef}\n          type='text'\n          defaultValue={name}\n          onBlur={endEditing}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape') {\n              onSubmit(e);\n            }\n          }}\n        />\n      </form>\n    );\n  } else {\n    return (\n      <>\n        <span onClick={() => setIsEditing(true)} style={{ cursor: 'pointer' }}>\n          {name}\n          &nbsp;\n          <PenIcon />\n        </span>\n      </>\n    );\n  }\n}\n\nexport function PartHeadersComponent({ name, value }: { name: string; value: File }) {\n  const baseContentDisposition = `form-data; name=\"${encodeURIComponent(name)}\"`;\n  let headers;\n  if (typeof value !== 'string') {\n    headers = [\n      ['Content-Disposition', `${baseContentDisposition}; filename=\"${encodeURIComponent(value.name)}\"`],\n      ['Content-Type', value.type.length > 0 ? value.type : 'application/octet-stream'],\n    ];\n  } else {\n    headers = [['Content-Disposition', baseContentDisposition]];\n  }\n\n  return (\n    <div className={'attachment-header'}>\n      {headers.map(([name, value]) => (\n        <div key={name}>\n          <span style={{ color: 'hsl(var(--color-info))' }}>{name}: </span>\n          <span>{value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default GRAPHIQL_PLUGIN;\n"]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@workday/graphiql-plugin-multipart-requests",
+  "collaborators": [
+    "Dylan Owen <dylan.owen@workday.com>"
+  ],
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "tsc --project ./tsconfig.dev.json --watch --pretty --incremental --preserveWatchOutput",
+    "test:unit": "jest",
+    "build": "tsc --project ./tsconfig.json",
+    "release": "tshy",
+    "clean": "rimraf dist/"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "dry-run": true
+  },
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/commonjs/index.d.ts",
+        "default": "./dist/commonjs/index.js"
+      }
+    }
+  },
+  "types": "./dist/commonjs/index.d.ts",
+  "main": "./dist/commonjs/index.js",
+  "files": [
+    "dist/**/*.@(js|d.ts|js.map|json)",
+    "style.css"
+  ],
+  "directories": {
+    "src": "src",
+    "test": "tests"
+  },
+  "peerDependencies": {
+    "@graphiql/react": "^0.20.4",
+    "graphql": "^16.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "tshy": {
+    "exports": {
+      "./package.json": "./package.json",
+      ".": "./src/index.ts"
+    }
+  }
+}

package/style.css

@@ -0,0 +1,88 @@
+.attachments-container {
+    display: contents;
+}
+
+.attachments-container h2 {
+    font-size: var(--font-size-h2);
+    font-family: var(--font-family);
+    font-weight: var(--font-weight-medium);
+}
+
+.attachments-container button {
+    all: unset;
+    border-radius: var(--border-radius-4);
+    color: hsla(var(--color-neutral), var(--alpha-secondary));
+    padding: var(--px-8) var(--px-12);
+    cursor: pointer;
+}
+
+.attachments-container button:hover {
+    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
+}
+
+.attachments-container input[type="text"] {
+    color: hsla(var(--color-neutral));
+    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
+    border-radius: var(--border-radius-4);
+    font-family: var(--font-family-mono);
+}
+
+.attachments-container svg {
+    height: var(--px-20);
+    width: var(--px-20);
+}
+
+.attachment-title {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-h3);
+    font-family: var(--font-family-mono);
+}
+
+.attachment-title > :first-child {
+    flex: 1 1 auto
+}
+
+.attachment-title > :last-child {
+    flex: 0 1 auto;
+}
+
+button.attachment-delete {
+    width: 2em;
+    font-size: 0.8em;
+    text-align: center;
+    padding: 0;
+}
+
+.attachment-delete:hover {
+    color: hsl(var(--color-error));
+}
+
+.attachment-header {
+    justify-content: start;
+    font-size: 1em;
+    font-family: var(--font-family-mono);
+}
+
+.attachments-icon {
+    display: inline-block;
+    position: relative;
+}
+
+.attachments-icon svg {
+    height: var(--px-20);
+    width: var(--px-20);
+}
+
+.attachments-icon-badge {
+    background-color: #fa3e3e;
+    border-radius: 2px;
+    color: white;
+
+    padding: 1px 3px;
+    font-size: 10px;
+
+    position: absolute; /* Position the badge within the relatively positioned button */
+    right: 80%;
+    bottom: 80%;
+}