Merge pull request #262 from gadget-inc/smaller-bundle

Smaller bundle size

Author: airhorns

Contributing.md

@@ -16,6 +16,16 @@ It can be annoying to work with these packages via `pnpm link` sometimes, so we
 - push that to the remote git repo
 - and log out a version you can then refer to from other repos
 
+# Checking test bundle sizes
+
+We have a small project setup for evaluating what the bundled size of these dependencies might be together. Run:
+
+```shell
+pnpm -F=test-bundles test-build
+```
+
+to build the test bundles
+
 # Releasing
 
 Releasing is done automatically via [our release workflow](.github/workflows/release.yml). Any commits to the main branch that changes one of our `packages/**/package.json` versions will automatically be published.

packages/api-client-core/build/replace-version-constant.ts

@@ -0,0 +1,18 @@
+import fs from "fs/promises";
+import globby from "globby";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// replace version constant strings with the version we're about to release
+
+const version = JSON.parse(await fs.readFile(path.join(__dirname, "..", "package.json"), "utf-8")).version;
+
+for (const file of await globby(path.join(__dirname, "..", "dist"), { onlyFiles: true })) {
+  const content = await fs.readFile(file, "utf-8");
+  if (content.includes("<prerelease>")) {
+    await fs.writeFile(file, content.replace("<prerelease>", version));
+  }
+}

packages/api-client-core/package.json

@@ -19,35 +19,34 @@
   },
   "source": "src/index.ts",
   "main": "dist/cjs/index.js",
+  "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "rm -rf dist && tsc -b tsconfig.cjs.json tsconfig.esm.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/package.json && echo '{\"type\": \"module\"}' > dist/esm/package.json",
+    "build": "rm -rf dist && tsc -b tsconfig.cjs.json tsconfig.esm.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/package.json && echo '{\"type\": \"module\"}' > dist/esm/package.json && node --loader ts-node/esm build/replace-version-constant.ts",
     "watch": "rm -rf dist && tsc --watch --preserveWatchOutput",
     "prepublishOnly": "pnpm build",
     "prerelease": "gitpkg publish"
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.4.0",
     "@urql/core": "^4.0.10",
     "cross-fetch": "^3.1.5",
-    "tiny-graphql-query-compiler": "^0.2.2",
     "graphql": "~16.6.0",
     "graphql-ws": "^5.13.1",
     "isomorphic-ws": "^5.0.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.isequal": "^4.5.0",
+    "klona": "^2.0.6",
+    "tiny-graphql-query-compiler": "^0.2.2",
     "ws": "^8.13.0"
   },
   "devDependencies": {
-    "tiny-graphql-query-compiler": "*",
-    "@types/lodash.clonedeep": "^4.5.6",
-    "@types/lodash.isequal": "^4.5.5",
     "@types/node": "^16.11.7",
     "conditional-type-checks": "^1.0.6",
+    "globby": "^11.0.4",
     "gql-tag": "^1.0.1",
+    "nock": "^13.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "nock": "^13.3.1",
+    "tiny-graphql-query-compiler": "workspace:*",
+    "ts-node": "^10.9.1",
     "type-fest": "^3.3.0",
     "typescript": "5.0.4"
   }

packages/api-client-core/src/GadgetConnection.ts

@@ -1,6 +1,6 @@
 import type { ClientOptions, RequestPolicy } from "@urql/core";
 import { Client, cacheExchange, fetchExchange, subscriptionExchange } from "@urql/core";
-import fetchPolyfill from "cross-fetch";
+
 import type { ExecutionResult } from "graphql";
 import type { Sink, Client as SubscriptionClient, ClientOptions as SubscriptionClientOptions } from "graphql-ws";
 import { CloseCode, createClient as createSubscriptionClient } from "graphql-ws";
@@ -11,16 +11,8 @@ import { GadgetTransaction, TransactionRolledBack } from "./GadgetTransaction.js
 import type { BrowserStorage } from "./InMemoryStorage.js";
 import { InMemoryStorage } from "./InMemoryStorage.js";
 import { operationNameExchange } from "./exchanges/operationNameExchange.js";
-import { otelExchange } from "./exchanges/otelExchange.js";
 import { urlParamExchange } from "./exchanges/urlParamExchange.js";
-import {
-  GadgetUnexpectedCloseError,
-  GadgetWebsocketConnectionTimeoutError,
-  getCurrentSpan,
-  isCloseEvent,
-  storageAvailable,
-  traceFunction,
-} from "./support.js";
+import { GadgetUnexpectedCloseError, GadgetWebsocketConnectionTimeoutError, isCloseEvent, storageAvailable } from "./support.js";
 
 export type TransactionRun<T> = (transaction: GadgetTransaction) => Promise<T>;
 export interface GadgetSubscriptionClientOptions extends Partial<SubscriptionClientOptions> {
@@ -47,7 +39,7 @@ export interface GadgetConnectionOptions {
   websocketsEndpoint?: string;
   subscriptionClientOptions?: GadgetSubscriptionClientOptions;
   websocketImplementation?: any;
-  fetchImplementation?: typeof fetchPolyfill;
+  fetchImplementation?: typeof globalThis.fetch;
   environment?: "Development" | "Production";
   requestPolicy?: ClientOptions["requestPolicy"];
   applicationId?: string;
@@ -74,12 +66,14 @@ export enum AuthenticationMode {
  * Manages transactions and the connection to a Gadget API
  */
 export class GadgetConnection {
+  version = "<prerelease>" as const;
+
   // Options used when generating new GraphQL clients for the base connection and for for transactions
   private endpoint: string;
   private subscriptionClientOptions?: SubscriptionClientOptions;
   private websocketsEndpoint: string;
   private websocketImplementation: any;
-  private _fetchImplementation: typeof fetchPolyfill;
+  private _fetchImplementation: typeof globalThis.fetch;
   private environment: "Development" | "Production";
   private exchanges: Required<Exchanges>;
 
@@ -103,7 +97,10 @@ export class GadgetConnection {
     } else if (typeof window != "undefined" && window.fetch) {
       this._fetchImplementation = window.fetch.bind(window);
     } else {
-      this._fetchImplementation = fetchPolyfill;
+      this._fetchImplementation = async (...args: [any]) => {
+        const { fetch } = await import("cross-fetch");
+        return await fetch(...args);
+      };
     }
     this.websocketImplementation = options.websocketImplementation ?? globalThis?.WebSocket ?? WebSocket;
     this.websocketsEndpoint = options.websocketsEndpoint ?? options.endpoint + "/batch";
@@ -132,7 +129,7 @@ export class GadgetConnection {
     return this.currentTransaction?.client || this.baseClient;
   }
 
-  set fetchImplementation(implementation: typeof fetchPolyfill) {
+  set fetchImplementation(implementation: typeof globalThis.fetch) {
     this._fetchImplementation = implementation;
     this.resetClients();
   }
@@ -182,96 +179,90 @@ export class GadgetConnection {
   transaction: {
     <T>(options: GadgetSubscriptionClientOptions, run: TransactionRun<T>): Promise<T>;
     <T>(run: TransactionRun<T>): Promise<T>;
-  } = traceFunction(
-    "api-client.transaction",
-    async <T>(optionsOrRun: GadgetSubscriptionClientOptions | TransactionRun<T>, maybeRun?: TransactionRun<T>): Promise<T> => {
-      let run: TransactionRun<T>;
-      let options: GadgetSubscriptionClientOptions;
-
-      if (maybeRun) {
-        run = maybeRun;
-        options = optionsOrRun as GadgetSubscriptionClientOptions;
-      } else {
-        run = optionsOrRun as TransactionRun<T>;
-        options = {};
-      }
+  } = async <T>(optionsOrRun: GadgetSubscriptionClientOptions | TransactionRun<T>, maybeRun?: TransactionRun<T>): Promise<T> => {
+    let run: TransactionRun<T>;
+    let options: GadgetSubscriptionClientOptions;
 
-      if (this.currentTransaction) {
-        return await run(this.currentTransaction);
-      }
+    if (maybeRun) {
+      run = maybeRun;
+      options = optionsOrRun as GadgetSubscriptionClientOptions;
+    } else {
+      run = optionsOrRun as TransactionRun<T>;
+      options = {};
+    }
 
-      getCurrentSpan()?.setAttributes({ applicationId: this.options.applicationId, environmentName: this.environment });
+    if (this.currentTransaction) {
+      return await run(this.currentTransaction);
+    }
 
-      let subscriptionClient: SubscriptionClient | null = null;
-      let transaction;
+    let subscriptionClient: SubscriptionClient | null = null;
+    let transaction;
+    try {
+      // The server will error if it receives any operations before the auth dance has been completed, so we block on that happening before sending our first operation. It's important that this happens synchronously after instantiating the client so we don't miss any messages
+      subscriptionClient = await this.waitForOpenedConnection({
+        isFatalConnectionProblem(errorOrCloseEvent) {
+          // any interruption of the transaction is fatal to the transaction
+          console.warn("Transport error encountered during transaction processing", errorOrCloseEvent);
+          return true;
+        },
+        connectionAckWaitTimeout: DEFAULT_CONN_ACK_TIMEOUT,
+        ...options,
+        lazy: false,
+        // super ultra critical option that ensures graphql-ws doesn't automatically close the websocket connection when there are no outstanding operations. this is key so we can start a transaction then make mutations within it
+        lazyCloseTimeout: 100000,
+        retryAttempts: 0,
+      });
+
+      const client = new Client({
+        url: "/-", // not used because there's no fetch exchange, set for clarity
+        requestPolicy: "network-only", // skip any cached data during transactions
+        exchanges: [
+          ...this.exchanges.beforeAll,
+          operationNameExchange,
+          ...this.exchanges.beforeAsync,
+          subscriptionExchange({
+            forwardSubscription(request) {
+              const input = { ...request, query: request.query || "" };
+              return {
+                subscribe: (sink) => {
+                  const dispose = subscriptionClient!.subscribe(input, sink as Sink<ExecutionResult>);
+                  return {
+                    unsubscribe: dispose,
+                  };
+                },
+              };
+            },
+            enableAllOperations: true,
+          }),
+          ...this.exchanges.afterAll,
+        ],
+      });
+      (client as any)[$gadgetConnection] = this;
+
+      transaction = new GadgetTransaction(client, subscriptionClient);
+      this.currentTransaction = transaction;
+      await transaction.start();
+      const result = await run(transaction);
+      await transaction.commit();
+      return result;
+    } catch (error) {
       try {
-        // The server will error if it receives any operations before the auth dance has been completed, so we block on that happening before sending our first operation. It's important that this happens synchronously after instantiating the client so we don't miss any messages
-        subscriptionClient = await this.waitForOpenedConnection({
-          isFatalConnectionProblem(errorOrCloseEvent) {
-            // any interruption of the transaction is fatal to the transaction
-            console.warn("Transport error encountered during transaction processing", errorOrCloseEvent);
-            return true;
-          },
-          connectionAckWaitTimeout: DEFAULT_CONN_ACK_TIMEOUT,
-          ...options,
-          lazy: false,
-          // super ultra critical option that ensures graphql-ws doesn't automatically close the websocket connection when there are no outstanding operations. this is key so we can start a transaction then make mutations within it
-          lazyCloseTimeout: 100000,
-          retryAttempts: 0,
-        });
-
-        const client = new Client({
-          url: "/-", // not used because there's no fetch exchange, set for clarity
-          requestPolicy: "network-only", // skip any cached data during transactions
-          exchanges: [
-            ...this.exchanges.beforeAll,
-            operationNameExchange,
-            otelExchange,
-            ...this.exchanges.beforeAsync,
-            subscriptionExchange({
-              forwardSubscription(request) {
-                const input = { ...request, query: request.query || "" };
-                return {
-                  subscribe: (sink) => {
-                    const dispose = subscriptionClient!.subscribe(input, sink as Sink<ExecutionResult>);
-                    return {
-                      unsubscribe: dispose,
-                    };
-                  },
-                };
-              },
-              enableAllOperations: true,
-            }),
-            ...this.exchanges.afterAll,
-          ],
-        });
-        (client as any)[$gadgetConnection] = this;
-
-        transaction = new GadgetTransaction(client, subscriptionClient);
-        this.currentTransaction = transaction;
-        await transaction.start();
-        const result = await run(transaction);
-        await transaction.commit();
-        return result;
-      } catch (error) {
-        try {
-          if (transaction?.open) await transaction.rollback();
-        } catch (rollbackError) {
-          if (!(rollbackError instanceof TransactionRolledBack)) {
-            console.warn("Encountered another error while rolling back a Gadget transaction that errored. The other error:", rollbackError);
-          }
-        }
-        if (isCloseEvent(error)) {
-          throw new GadgetUnexpectedCloseError(error);
-        } else {
-          throw error;
+        if (transaction?.open) await transaction.rollback();
+      } catch (rollbackError) {
+        if (!(rollbackError instanceof TransactionRolledBack)) {
+          console.warn("Encountered another error while rolling back a Gadget transaction that errored. The other error:", rollbackError);
         }
-      } finally {
-        await subscriptionClient?.dispose();
-        this.currentTransaction = null;
       }
+      if (isCloseEvent(error)) {
+        throw new GadgetUnexpectedCloseError(error);
+      } else {
+        throw error;
+      }
+    } finally {
+      await subscriptionClient?.dispose();
+      this.currentTransaction = null;
     }
-  );
+  };
 
   close() {
     this.disposeClient(this.baseSubscriptionClient);
@@ -290,7 +281,7 @@ export class GadgetConnection {
    * // fetch a relative URL from the endpoint this API client is configured to fetch from
    * await api.connection.fetch("/foo/bar");
    **/
-  fetch = traceFunction("api-client.fetch", async (input: RequestInfo | URL, init: RequestInit = {}) => {
+  fetch = async (input: RequestInfo | URL, init: RequestInit = {}) => {
     input = processMaybeRelativeInput(input, this.options.baseRouteURL ?? this.options.endpoint);
 
     if (this.isGadgetRequest(input)) {
@@ -311,7 +302,7 @@ export class GadgetConnection {
     }
 
     return response;
-  });
+  };
 
   private isGadgetRequest(input: RequestInfo | URL) {
     let requestUrl;
@@ -345,7 +336,7 @@ export class GadgetConnection {
   }
 
   private newBaseClient() {
-    const exchanges = [...this.exchanges.beforeAll, operationNameExchange, otelExchange, urlParamExchange];
+    const exchanges = [...this.exchanges.beforeAll, operationNameExchange, urlParamExchange];
 
     // apply urql's default caching behaviour when client side (but skip it server side)
     if (typeof window != "undefined") {

packages/api-client-core/src/GadgetRecord.ts

@@ -1,7 +1,6 @@
-import cloneDeep from "lodash.clonedeep";
-import isEqual from "lodash.isequal";
+import { klona as cloneDeep } from "klona";
 import type { Jsonify } from "type-fest";
-import { toPrimitiveObject } from "./support.js";
+import { isEqual, toPrimitiveObject } from "./support.js";
 
 export enum ChangeTracking {
   SinceLoaded,