Get the blog example working after pnpm switch

pnpm does not play nice with a workspace package depending on an external package which then depends on a workspace package again by default. To restore the fancy setup that uses this local example package, we can hoist all the packages so they are all sourced from the same root level node-modules folder, which is how yarn worked before. A bit less sealed, but worth it to have a local playground to work with. I couldn't figure out any way to get pnpm to drop the right structure in the example folder such that vite could find api-client-core otherwise.

.github/workflows/test.yml

@@ -12,6 +12,8 @@ jobs:
         run: pnpm build
       - name: Test
         run: pnpm test
+      - name: Build example package
+        run: pnpm --filter=blog-example build-vite
   lint:
     runs-on: ubuntu-latest
     steps:

.npmrc

@@ -1,2 +1,5 @@
+recursive-install = true
 prefer-workspace-packages = true
-recursive-install = true
+link-workspace-packages = deep
+shamefully-hoist = true
+node-linker = hoisted

package.json

@@ -5,12 +5,6 @@
   "author": "Gadget Authors",
   "license": "MIT",
   "private": true,
-  "workspaces": [
-    "packages/api-client-core",
-    "packages/react",
-    "packages/react-shopify-app-bridge",
-    "packages/blog-example"
-  ],
   "scripts": {
     "lint": "pnpm lint:prettier && pnpm lint:eslint",
     "lint:prettier": "NODE_OPTIONS=\"--max-old-space-size=4096\" prettier --check \"(packages|scripts)/**/*.{js,ts,tsx}\"",
@@ -26,8 +20,8 @@
     "preinstall": "npx only-allow pnpm"
   },
   "devDependencies": {
-    "@gadget-client/bulk-actions-test": "^1.101.0",
-    "@gadget-client/related-products-example": "^1.844.0",
+    "@gadget-client/bulk-actions-test": "^1.102.0",
+    "@gadget-client/related-products-example": "^1.848.0",
     "@gadgetinc/eslint-config": "^0.6.1",
     "@gadgetinc/prettier-config": "^0.4.0",
     "@swc/core": "^1.3.42",
@@ -46,7 +40,9 @@
     "semver": "^7.3.8",
     "ts-node": "^10.9.1",
     "typescript": "5.0.4",
-    "zx": "^7.1.1"
+    "zx": "^7.1.1",
+    "@gadgetinc/api-client-core": "workspace:*",
+    "@gadgetinc/react": "workspace:*"
   },
   "pnpm": {
     "overrides": {

packages/blog-example/package.json

@@ -2,6 +2,7 @@
   "name": "blog-example",
   "version": "0.1.0",
   "source": "src/index.ts",
+  "private": "true",
   "files": [
     "README.md",
     "dist/src/**/*"
@@ -11,13 +12,13 @@
   "homepage": "https://github.com/gadget-inc/js-clients/tree/main/packages/blog-example",
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "dev": "vite",
-    "build": "true",
-    "preview": "vite preview"
+    "dev": "rm -rf node_modules/.vite && vite --clearScreen=false",
+    "preview": "vite preview",
+    "build-vite": "vite build"
   },
   "dependencies": {
-    "@gadget-client/simple-blog": "^1.130.0",
-    "@gadgetinc/react": "*",
+    "@gadget-client/blog": "^1.42.0",
+    "@gadgetinc/react": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/blog-example/src/App.tsx

@@ -1,5 +1,5 @@
 import { useFetch, useFindMany } from "@gadgetinc/react";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { api } from "./api";
 import "./styles/App.css";
 
@@ -42,12 +42,49 @@ function ExampleFindMany() {
   );
 }
 
+let suspended = false;
+function SuspenseFallback() {
+  suspended = true;
+  return <div>suspended...</div>;
+}
+function ExampleSuspense() {
+  return (
+    <section className="card">
+      <h2>Example Suspense</h2>
+      <p>Ever suspended: {String(suspended)}</p>
+      <Suspense fallback={<SuspenseFallback />}>
+        <ExampleSuspenseInner />
+      </Suspense>
+    </section>
+  );
+}
+
+function ExampleSuspenseInner() {
+  const [history, setHistory] = useState<any[]>([]);
+  const [result, send] = useFindMany(api.post, { suspense: true, sort: { id: "Descending" } });
+
+  useEffect(() => {
+    const { operation, ...keep } = result;
+    setHistory([...history, keep]);
+  }, [result]);
+
+  return (
+    <>
+      <code>
+        <pre>{JSON.stringify(history, null, 2)}</pre>
+      </code>
+      <button onClick={() => send()}>Refetch</button>
+    </>
+  );
+}
+
 function App() {
   return (
     <div className="App">
       <h1>Vite + Gadget</h1>
-      <ExampleFetch />
-      <ExampleFindMany />
+      {/* <ExampleFetch />
+      <ExampleFindMany /> */}
+      <ExampleSuspense />
     </div>
   );
 }

packages/blog-example/src/api.ts

@@ -1,3 +1,3 @@
-import { Client } from "@gadget-client/simple-blog";
+import { Client } from "@gadget-client/blog";
 
-export const api = new Client();
+export const api = new Client({ environment: "Development" });

scripts/check-dependency-versions.ts

@@ -12,6 +12,7 @@ import { fs, globby } from "zx";
 
 for (const filepath of await globby("packages/*/package.json")) {
   const manifest = await fs.readJSON(filepath);
+  if (manifest.private) continue;
   for (const key of ["dependencies", "peerDependencies"]) {
     for (const [target, requiredVersion] of Object.entries(targets)) {
       const dependencyVersion = manifest[key]?.[target];