migrate @graphiql/toolkit to tsup (#3746)

* aa

* removes unneeded `undefined`

* try

* fix

* fix vitest

.changeset/silent-ghosts-fix.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': minor
+---
+
+compile with `tsup` instead of `tsc`

packages/graphiql-toolkit/docs/create-fetcher.md

@@ -67,10 +67,7 @@ const url = 'https://my-schema.com/graphql';
 
 const subscriptionUrl = 'wss://my-schema.com/graphql';
 
-const fetcher = createGraphiQLFetcher({
-  url,
-  subscriptionUrl,
-});
+const fetcher = createGraphiQLFetcher({ url, subscriptionUrl });
 
 export const App = () => <GraphiQL fetcher={fetcher} />;
 
@@ -209,10 +206,7 @@ import { createGraphiQLFetcher } from '@graphiql/toolkit';
 
 const url = 'https://my-schema.com/graphql';
 
-const fetcher = createGraphiQLFetcher({
-  url,
-  fetch,
-});
+const fetcher = createGraphiQLFetcher({ url, fetch });
 
 export const App = () => <GraphiQL fetcher={fetcher} />;
 

packages/graphiql-toolkit/package.json

@@ -15,10 +15,15 @@
     "url": "https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/toolkit"
   },
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "typings": "dist/index.d.ts",
-  "scripts": {},
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "typings": "dist/esm/index.d.mts",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prebuild": "yarn types:check",
+    "types:check": "tsc --noEmit"
+  },
   "dependencies": {
     "@n1ru4l/push-pull-async-iterable-iterator": "^3.1.0",
     "meros": "^1.1.4"
@@ -27,7 +32,8 @@
     "graphql": "^17.0.0-alpha.7",
     "graphql-ws": "^5.5.5",
     "isomorphic-fetch": "^3.0.0",
-    "subscriptions-transport-ws": "0.11.0"
+    "subscriptions-transport-ws": "0.11.0",
+    "tsup": "^8.2.4"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0-alpha.2",

packages/graphiql-toolkit/src/create-fetcher/__tests__/lib.spec.ts

@@ -68,30 +68,21 @@ describe('getWsFetcher', () => {
   });
   it('provides an observable wsClient when custom wsClient option is provided', () => {
     createClient.mockReturnValue(true);
-    getWsFetcher({
-      url: '',
-      wsClient: true,
-    });
+    getWsFetcher({ url: '', wsClient: true });
     // @ts-ignore
     expect(createClient.mock.calls).toHaveLength(0);
   });
   it('creates a subscriptions-transports-ws observable when custom legacyClient option is provided', () => {
     createClient.mockReturnValue(true);
-    getWsFetcher({
-      url: '',
-      legacyClient: true,
-    });
+    getWsFetcher({ url: '', legacyClient: true });
     // @ts-ignore
     expect(createClient.mock.calls).toHaveLength(0);
     expect(SubscriptionClient.mock.calls).toHaveLength(0);
   });
 
   it('if subscriptionsUrl is provided, create a client on the fly', () => {
     createClient.mockReturnValue(true);
-    getWsFetcher({
-      url: '',
-      subscriptionUrl: 'wss://example',
-    });
+    getWsFetcher({ url: '', subscriptionUrl: 'wss://example' });
     expect(createClient.mock.calls[0]).toEqual([
       { connectionParams: {}, url: 'wss://example' },
     ]);

packages/graphiql-toolkit/src/create-fetcher/createFetcher.ts

@@ -11,27 +11,15 @@ import {
  * build a GraphiQL fetcher that is:
  * - backwards compatible
  * - optionally supports graphql-ws or `
- *
- * @param options {CreateFetcherOptions}
- * @returns {Fetcher}
  */
 export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
-  let httpFetch;
-  if (typeof window !== 'undefined' && window.fetch) {
-    httpFetch = window.fetch;
-  }
-  if (
-    options?.enableIncrementalDelivery === null ||
-    options.enableIncrementalDelivery !== false
-  ) {
-    options.enableIncrementalDelivery = true;
-  }
-  if (options.fetch) {
-    httpFetch = options.fetch;
-  }
+  const httpFetch =
+    options.fetch || (typeof window !== 'undefined' && window.fetch);
   if (!httpFetch) {
     throw new Error('No valid fetcher implementation available');
   }
+  options.enableIncrementalDelivery =
+    options.enableIncrementalDelivery !== false;
   // simpler fetcher for schema requests
   const simpleFetcher = createSimpleFetcher(options, httpFetch);
 

packages/graphiql-toolkit/src/create-fetcher/lib.ts

@@ -32,7 +32,7 @@ const errorHasCode = (err: unknown): err is { code: string } => {
  */
 export const isSubscriptionWithName = (
   document: DocumentNode,
-  name: string | undefined,
+  name?: string,
 ): boolean => {
   let isSubscription = false;
   visit(document, {
@@ -79,10 +79,7 @@ export const createWebsocketsFetcherFromUrl = (
     };
 
     // TODO: defaults?
-    wsClient = createClient({
-      url,
-      connectionParams,
-    });
+    wsClient = createClient({ url, connectionParams });
     return createWebsocketsFetcherFromClient(wsClient);
   } catch (err) {
     if (errorHasCode(err) && err.code === 'MODULE_NOT_FOUND') {
@@ -97,12 +94,10 @@ export const createWebsocketsFetcherFromUrl = (
 
 /**
  * Create ws/s fetcher using provided wsClient implementation
- *
- * @param wsClient {Client}
- * @returns {Fetcher}
  */
 export const createWebsocketsFetcherFromClient =
-  (wsClient: Client) => (graphQLParams: FetcherParams) =>
+  (wsClient: Client): Fetcher =>
+  (graphQLParams: FetcherParams) =>
     makeAsyncIterableIteratorFromSink<ExecutionResult>(sink =>
       wsClient.subscribe(graphQLParams, {
         ...sink,
@@ -125,12 +120,9 @@ export const createWebsocketsFetcherFromClient =
 /**
  * Allow legacy websockets protocol client, but no definitions for it,
  * as the library is deprecated and has security issues
- *
- * @param legacyWsClient
- * @returns
  */
 export const createLegacyWebsocketsFetcher =
-  (legacyWsClient: { request: (params: FetcherParams) => unknown }) =>
+  (legacyWsClient: { request: (params: FetcherParams) => unknown }): Fetcher =>
   (graphQLParams: FetcherParams) => {
     const observable = legacyWsClient.request(graphQLParams);
     return makeAsyncIterableIteratorFromSink<ExecutionResult>(
@@ -139,11 +131,8 @@ export const createLegacyWebsocketsFetcher =
     );
   };
 /**
- * create a fetcher with the `IncrementalDelivery` HTTP/S spec for
+ * Create a fetcher with the `IncrementalDelivery` HTTP/S spec for
  * `@stream` and `@defer` support using `fetch-multipart-graphql`
- *
- * @param options {CreateFetcherOptions}
- * @returns {Fetcher}
  */
 export const createMultipartFetcher = (
   options: CreateFetcherOptions,
@@ -187,13 +176,11 @@ export const createMultipartFetcher = (
 
 /**
  * If `wsClient` or `legacyClient` are provided, then `subscriptionUrl` is overridden.
- * @param options {CreateFetcherOptions}
- * @returns
  */
 export const getWsFetcher = (
   options: CreateFetcherOptions,
-  fetcherOpts: FetcherOpts | undefined,
-) => {
+  fetcherOpts?: FetcherOpts,
+): Fetcher | void => {
   if (options.wsClient) {
     return createWebsocketsFetcherFromClient(options.wsClient);
   }

packages/graphiql-toolkit/src/graphql-helpers/auto-complete.ts

@@ -200,7 +200,7 @@ function getIndentation(str: string, index: number) {
 }
 
 function isFieldType(
-  fieldType: GraphQLOutputType | null | undefined,
+  fieldType?: GraphQLOutputType | null,
 ): GraphQLOutputType | void {
   if (fieldType) {
     return fieldType;

packages/graphiql-toolkit/src/graphql-helpers/operation-name.ts

@@ -5,7 +5,7 @@ import { OperationDefinitionNode } from 'graphql';
  * operations, determine what the next selected operation should be.
  */
 export function getSelectedOperationName(
-  prevOperations?: OperationDefinitionNode[] | undefined,
+  prevOperations?: OperationDefinitionNode[],
   prevSelectedOperationName?: string,
   operations?: OperationDefinitionNode[],
 ) {

packages/graphiql-toolkit/tsconfig.json

@@ -1,21 +1,16 @@
 {
-  "extends": "../../resources/tsconfig.base.cjs.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "composite": true,
-    "jsx": "react",
-    "target": "es5",
-    "baseUrl": ".",
-    "strictPropertyInitialization": false
+    "target": "es2016",
+    "module": "ESNext",
+    "declaration": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "lib": ["es2022", "dom"],
+    "moduleResolution": "node"
   },
-  "include": ["src"],
-  "exclude": [
-    "**/__tests__/**",
-    "**/dist/**.*",
-    "**/*.spec.ts",
-    "**/*.spec.js",
-    "**/*-test.ts",
-    "**/*-test.js"
-  ]
+  "include": ["src", "tsup.config.ts"],
+  "exclude": ["**/*.spec.ts"]
 }

packages/graphiql-toolkit/tsup.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, Options } from 'tsup';
+
+const opts: Options = {
+  entry: ['src/**/*.ts', '!**/__tests__'],
+  bundle: false,
+  clean: true,
+  dts: true,
+};
+
+export default defineConfig([
+  {
+    ...opts,
+    format: 'esm',
+    outDir: 'dist/esm',
+    outExtension: () => ({ js: '.js' }),
+  },
+  {
+    ...opts,
+    format: 'cjs',
+    outDir: 'dist/cjs',
+  },
+]);

packages/graphiql/test/beforeDevServer.js

@@ -0,0 +1,31 @@
+/**
+ *  Copyright (c) 2021 GraphQL Contributors.
+ *
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ */
+
+const express = require('express');
+const path = require('node:path');
+// eslint-disable-next-line import-x/no-extraneous-dependencies
+const { createHandler } = require('graphql-http/lib/use/express');
+const schema = require('./schema');
+const badSchema = require('../cypress/fixtures/bad-schema.json');
+
+module.exports = function beforeDevServer(app, _server, _compiler) {
+  // GraphQL Server
+  app.post('/graphql', createHandler({ schema }));
+  app.get('/graphql', createHandler({ schema }));
+
+  app.post('/bad/graphql', (_req, res, next) => {
+    res.json({ data: badSchema });
+    next();
+  });
+
+  app.use('/images', express.static(path.join(__dirname, 'images')));
+
+  app.use(
+    '/resources/renderExample.js',
+    express.static(path.join(__dirname, '../resources/renderExample.js')),
+  );
+};

packages/graphiql/tsconfig.esm.json

@@ -21,9 +21,6 @@
     {
       "path": "../codemirror-graphql"
     },
-    {
-      "path": "../graphiql-toolkit"
-    },
     {
       "path": "../graphql-language-service"
     }

packages/graphiql/tsconfig.json

@@ -11,9 +11,6 @@
   "include": ["src"],
   "exclude": ["**/__tests__/**", "**/dist/**.*", "cypress/**"],
   "references": [
-    {
-      "path": "../graphiql-toolkit"
-    },
     {
       "path": "../codemirror-graphql"
     },

packages/monaco-graphql/test/monaco-editor.test.ts

@@ -15,7 +15,7 @@ describe('monaco-editor', () => {
     // expect(lines[1]).toMatch(' building for production...');
     // expect(lines[2]).toBe('transforming...');
     expect(lines[3]).toMatch(
-      `✓ ${parseInt(version, 10) > 16 ? 856 : 843} modules transformed.`,
+      `✓ ${parseInt(version, 10) > 16 ? 857 : 843} modules transformed.`,
     );
     // expect(lines[4]).toBe('rendering chunks...');
     // expect(lines[5]).toBe('computing gzip size...');

resources/tsconfig.build.cjs.json

@@ -5,9 +5,6 @@
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "../packages/graphiql-toolkit"
-    },
     {
       "path": "../packages/monaco-graphql"
     },

resources/tsconfig.build.esm.json

@@ -5,9 +5,6 @@
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "../packages/graphiql-toolkit/tsconfig.esm.json"
-    },
     {
       "path": "../packages/cm6-graphql/tsconfig.esm.json"
     },