Add a test package for building bundles to assess total bundle size

package.json

@@ -52,5 +52,6 @@
       "@gadgetinc/api-client-core": "workspace:*",
       "@gadgetinc/react": "workspace:*"
     }
-  }
+  },
+  "dependencies": {}
 }

packages/test-bundles/build.ts

@@ -0,0 +1,47 @@
+import react from "@vitejs/plugin-react-swc";
+import fs from "fs";
+import { join, parse } from "path";
+import { visualizer } from "rollup-plugin-visualizer";
+import { fileURLToPath } from "url";
+import { build } from "vite";
+
+const bundleDir = fileURLToPath(new URL("bundles", import.meta.url));
+const entrypoints = fs.readdirSync(bundleDir);
+console.log({ bundleDir, entrypoints });
+
+for (const entrypoint of entrypoints) {
+  const parsed = parse(entrypoint);
+  const name = parsed.name;
+
+  const visualizerPlugin = visualizer({
+    emitFile: true,
+    filename: `${name}-stats.html`,
+    template: "treemap",
+    brotliSize: true,
+    gzipSize: true,
+  });
+  const plugins = parsed.ext.endsWith("x") ? [react(), visualizerPlugin] : [visualizerPlugin];
+
+  await build({
+    plugins,
+    build: {
+      lib: {
+        entry: join(bundleDir, entrypoint),
+        name: `test-bundle-${name}`,
+        fileName: `test-bundle-${name}`,
+        formats: ["es", "cjs"],
+      },
+      emptyOutDir: false,
+      rollupOptions: {
+        external: ["react", "react-dom"],
+        output: {
+          // Provide global variables to use in the UMD build
+          // for externalized deps
+          globals: {
+            react: "React",
+          },
+        },
+      },
+    },
+  });
+}

packages/test-bundles/bundles/api-read.ts

@@ -0,0 +1,6 @@
+import { Client } from "@gadget-client/related-products-example";
+const api = new Client();
+
+export const read = async () => {
+  await api.shopifyProduct.findMany();
+};

packages/test-bundles/bundles/react-read.tsx

@@ -0,0 +1,8 @@
+import { Client } from "@gadget-client/related-products-example";
+import { useFindMany } from "@gadgetinc/react";
+const api = new Client();
+
+export const Reader = () => {
+  const [{ data }] = useFindMany(api.shopifyProduct);
+  return <>{JSON.stringify(data)}</>;
+};

packages/test-bundles/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "test-bundles",
+  "version": "0.1.0",
+  "private": true,
+  "source": "src/index.ts",
+  "repository": "github:gadget-inc/js-clients",
+  "type": "module",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "ts-node --transpileOnly --esm build.ts",
+    "prepublishOnly": "pnpm build",
+    "prerelease": "gitpkg publish"
+  },
+  "dependencies": {
+    "@gadgetinc/api-client-core": "workspace:*",
+    "@gadgetinc/react": "workspace:*",
+    "@gadgetinc/react-shopify-app-bridge": "workspace:*",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "vite": "^4.4.7"
+  },
+  "devDependencies": {
+    "rollup-plugin-visualizer": "^5.9.2"
+  }
+}

packages/test-bundles/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "ESNext",
+    "lib": ["es2020", "DOM"],
+    "noEmit": true,
+    "skipLibCheck": true,
+    "declaration": false
+  }
+}