From 8c0bb224f25448a1b18cf8cd897b1a4e2b4217f0 Mon Sep 17 00:00:00 2001 From: Harry Brundage Date: Sat, 24 Jun 2023 01:08:58 +0000 Subject: [PATCH] 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 | 2 ++ .npmrc | 5 +++- package.json | 14 ++++----- packages/blog-example/package.json | 11 +++---- packages/blog-example/src/App.tsx | 43 ++++++++++++++++++++++++++-- packages/blog-example/src/api.ts | 4 +-- pnpm-lock.yaml | 36 +++++++++++++---------- scripts/check-dependency-versions.ts | 1 + 8 files changed, 81 insertions(+), 35 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 98c6ce419..80c3affe5 100644 --- a/.github/workflows/test.yml +++ b/.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: diff --git a/.npmrc b/.npmrc index dd892e3a4..0d1e62d9b 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1,5 @@ +recursive-install = true prefer-workspace-packages = true -recursive-install = true \ No newline at end of file +link-workspace-packages = deep +shamefully-hoist = true +node-linker = hoisted \ No newline at end of file diff --git a/package.json b/package.json index 416bd4c0e..3ffc39262 100644 --- a/package.json +++ b/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": { diff --git a/packages/blog-example/package.json b/packages/blog-example/package.json index cec5218f6..fa8359e9a 100644 --- a/packages/blog-example/package.json +++ b/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" }, diff --git a/packages/blog-example/src/App.tsx b/packages/blog-example/src/App.tsx index 53d6a5b55..11cad66d5 100644 --- a/packages/blog-example/src/App.tsx +++ b/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
suspended...
; +} +function ExampleSuspense() { + return ( +
+

Example Suspense

+

Ever suspended: {String(suspended)}

+ }> + + +
+ ); +} + +function ExampleSuspenseInner() { + const [history, setHistory] = useState([]); + const [result, send] = useFindMany(api.post, { suspense: true, sort: { id: "Descending" } }); + + useEffect(() => { + const { operation, ...keep } = result; + setHistory([...history, keep]); + }, [result]); + + return ( + <> + + 
{JSON.stringify(history, null, 2)}
+ + + + ); +} + function App() { return (

Vite + Gadget

- - + {/* + */} +
); } diff --git a/packages/blog-example/src/api.ts b/packages/blog-example/src/api.ts index c022ae200..f2f15656d 100644 --- a/packages/blog-example/src/api.ts +++ b/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" }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 486b8bb5c..79e9dcb84 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,17 +13,23 @@ importers: .: devDependencies: '@gadget-client/bulk-actions-test': - specifier: ^1.101.0 - version: 1.101.0 + specifier: ^1.102.0 + version: 1.102.0 '@gadget-client/related-products-example': - specifier: ^1.844.0 - version: 1.844.0 + specifier: ^1.848.0 + version: 1.848.0 + '@gadgetinc/api-client-core': + specifier: workspace:* + version: link:packages/api-client-core '@gadgetinc/eslint-config': specifier: ^0.6.1 version: 0.6.1(@gadgetinc/prettier-config@0.4.0)(eslint@8.39.0)(jest@29.3.1)(lodash@4.17.21)(typescript@5.0.4) '@gadgetinc/prettier-config': specifier: ^0.4.0 version: 0.4.0(prettier@2.8.8)(typescript@5.0.4) + '@gadgetinc/react': + specifier: workspace:* + version: link:packages/react '@swc/core': specifier: ^1.3.42 version: 1.3.42 @@ -139,9 +145,9 @@ importers: packages/blog-example: dependencies: - '@gadget-client/simple-blog': - specifier: ^1.130.0 - version: 1.130.0 + '@gadget-client/blog': + specifier: ^1.42.0 + version: 1.42.0 '@gadgetinc/react': specifier: workspace:* version: link:../react @@ -871,23 +877,23 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@gadget-client/bulk-actions-test@1.101.0: - resolution: {integrity: sha1-8uchVsFapMqCqFvjQxeYeYYmwe4=, tarball: https://registry.gadget.dev/npm/_/tarball/6681/12076/2621} + /@gadget-client/blog@1.42.0: + resolution: {integrity: sha1-D6c1trEJX9V3JInnV/Pl1YEPbRA=, tarball: https://registry.gadget.dev/npm/_/tarball/6679/12072/4891} dependencies: '@gadgetinc/api-client-core': link:packages/api-client-core - dev: true + dev: false - /@gadget-client/related-products-example@1.844.0: - resolution: {integrity: sha1-cRCxmsRzJSs/OWa+dEVLCCJsqgQ=, tarball: https://registry.gadget.dev/npm/_/tarball/1268/1361/4716} + /@gadget-client/bulk-actions-test@1.102.0: + resolution: {integrity: sha1-kQ7bYUcqKhQFJDl6ZR1DfFRqtCE=, tarball: https://registry.gadget.dev/npm/_/tarball/6681/12076/3597} dependencies: '@gadgetinc/api-client-core': link:packages/api-client-core dev: true - /@gadget-client/simple-blog@1.130.0: - resolution: {integrity: sha1-eOg3lKovxEXOfkzeo3BU1eGP50A=, tarball: https://registry.gadget.dev/npm/_/tarball/1324/1473/4412} + /@gadget-client/related-products-example@1.848.0: + resolution: {integrity: sha1-BPOBUF9tSsu1woidZ+hU55/Cz5c=, tarball: https://registry.gadget.dev/npm/_/tarball/1268/1361/4809} dependencies: '@gadgetinc/api-client-core': link:packages/api-client-core - dev: false + dev: true /@gadgetinc/eslint-config@0.6.1(@gadgetinc/prettier-config@0.4.0)(eslint@8.39.0)(jest@29.3.1)(lodash@4.17.21)(typescript@5.0.4): resolution: {integrity: sha512-RFxEUYbQS9feOikGDphXWdHTkMHtO3g8x6XYwo9FPRK1VuzRpRhsiU1QXA1yU+KEGW5kMNU02t/iCFLoXkdl3g==} diff --git a/scripts/check-dependency-versions.ts b/scripts/check-dependency-versions.ts index 1ada9a29b..a25a1970e 100644 --- a/scripts/check-dependency-versions.ts +++ b/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];