chore: use pnpm workspace

.eslintrc.json

@@ -7,7 +7,7 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended",
     "prettier",
     "plugin:prettier/recommended"
@@ -29,5 +29,5 @@
       "version": "detect"
     }
   },
-  "ignorePatterns": ["node_modules/", "dist/", ".next/", "lib/"]
+  "ignorePatterns": ["node_modules/", "dist/", "lib/", ".next/"]
 }

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - run: yarn install
-      - run: yarn build
-      - run: yarn test
-      - run: yarn lint
+      - run: pnpm --filter react-esi install --frozen-lockfile
+      - run: pnpm --filter react-esi build
+      - run: pnpm --filter react-esi test
+      - run: pnpm --filter react-esi lint

.gitignore

@@ -1,5 +1,5 @@
-/lib
 node_modules
 /coverage
-yarn-error.log
 dist
+lib/lib
+.pnpm-store

.prettierignore

@@ -3,3 +3,5 @@
 **/.hg
 **/node_modules
 **/.next
+**/dist
+**/lib/lib

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:20 AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run -r build
+
+FROM base AS lib
+COPY --from=prod-deps /app/lib/node_modules/ /app/lib/node_modules
+COPY --from=build /app/lib/dist /app/lib/dist
+
+FROM lib AS express
+COPY --from=prod-deps /app/examples/express/node_modules/ /app/examples/express/node_modules
+COPY --from=build /app/examples/express/dist /app/examples/express/dist
+WORKDIR /app/examples/express
+EXPOSE 3000
+CMD [ "pnpm", "start" ]
+
+FROM lib AS next
+COPY --from=prod-deps /app/packages/app2/node_modules/ /app/packages/app2/node_modules
+COPY --from=build /app/packages/app2/dist /app/packages/app2/dist
+WORKDIR /app/packages/app2
+EXPOSE 30001
+CMD [ "pnpm", "start" ]

examples/express/README.md

@@ -1,7 +1,6 @@
 # Custom server example with Express, Nodemon, Varnish, and react-esi
 
-This example demonstrates how to set up an [Express](https://expressjs.com/) server using JavaScript and how to leverage [Nodemon](https://nodemon.io/) for live reloading of the server code. Additionally, it introduces caching optimization with a [Varnish](https://varnish-cache.org/intro/) server and the `react-esi` library using `esi:include` tags.
-
+This example demonstrates how to set up an [Express](https://expressjs.com/) server using JavaScript. Additionally, it introduces caching optimization with a [Varnish](https://varnish-cache.org/intro/) server and the `react-esi` library using `esi:include` tags.
 
 The server entry point is `server.jsx` in development and `dist/server.js` in production.
 
@@ -14,6 +13,5 @@ Deploy the example using [Vercel](https://vercel.com) or preview live with [Stac
 ## How to use
 
 1. Clone this repository.
-2. Navigate to the examples/express folder.
-3. Run `yarn install` to install the dependencies.
-4. Use `docker compose` to run the example.
+2. Run `pnpm install` to install the dependencies.
+3. Use `docker compose up -d` to run the example.

examples/express/compose.yaml

@@ -1,28 +1,33 @@
 services:
   varnish:
-    image: varnish:7.3
+    image: varnish:stable
+    container_name: varnish
     volumes:
       - ./default.vcl:/etc/varnish/default.vcl:ro
     tmpfs:
       - /var/lib/varnish/varnishd:exec
     ports:
       - "8080:80"
-    restart: always
+    restart: unless-stopped
     depends_on:
       - node
 
   node:
-    image: node:18
+    image: node:20
     working_dir: /home/node/app
-    user: node
+    # user: node
     init: true
     volumes:
-      - ./:/home/node/app
-    command: yarn dev
-    ports:
-      - "3000:3000"
+      - ../../:/home/node/app
+    command: corepack pnpm --filter esi-express dev
+    # ports:
+    #   - "3000:3000"
     environment:
       - NODE_ENV=development
       - REACT_ESI_SECRET=secret
-    restart: always
-
+    restart: unless-stopped
+
+volumes:
+  node_modules:
+  node_modules-lib:
+  node_modules-express:

examples/express/entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+# entrypoint.sh
+
+# Install dependencies
+corepack pnpm --filter=!esi-next install --frozen-lockfile --force
+
+# Start the application
+corepack pnpm --filter esi-express run dev

examples/express/package.json

@@ -1,31 +1,35 @@
 {
+  "name": "esi-express",
+  "version": "1.0.0",
+  "private": true,
+  "description": "An example project to demonstrate usage of ESI with Express",
+  "repository": "https://github.com/dunglas/react-esi/examples/express",
+  "license": "MIT",
   "author": "Kévin Dunglas",
+  "main": "dist/app.js",
+  "scripts": {
+    "build": "esbuild src/main.jsx --bundle --outfile=dist/app.js",
+    "dev": "tsx src/server.jsx",
+    "postinstall": "corepack pnpm build",
+    "start": "cross-env NODE_ENV=production tsx src/server.jsx"
+  },
   "dependencies": {
     "express": "^4.18.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-esi": "latest"
+    "react-esi": "workspace:*"
   },
-  "description": "An example project to demonstrate usage of ESI with Express",
   "devDependencies": {
+    "@types/express": "^4.17.20",
     "@types/node": "^18.17.4",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "esbuild": "^0.19.0",
-    "nodemon": "^3.0.1",
+    "@types/prop-types": "^15.7.9",
+    "@types/react": "^18.2.30",
+    "@types/react-dom": "^18.2.14",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.19.5",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
-  },
-  "license": "MIT",
-  "main": "index.js",
-  "name": "esi-express-example",
-  "repository": "https://github.com/dunglas/react-esi/examples/express",
-  "scripts": {
-    "dev": "nodemon",
-    "start": "cross-env NODE_ENV=production ts-node --project tsconfig.server.json src/server.jsx",
-    "build": "esbuild src/main.jsx --bundle --outfile=dist/app.js",
-    "postinstall": "yarn build"
-  },
-  "version": "1.0.0"
-}
+    "tsx": "^3.14.0",
+    "typescript": "^5.2.2"
+  }
+}

examples/express/src/main.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { hydrateRoot } from "react-dom/client";
 import App from "./pages/App";
 

examples/express/src/pages/App.jsx

@@ -1,5 +1,4 @@
-import React from "react";
-import withESI from "react-esi/lib/withESI";
+import withESI from "react-esi/withESI";
 import MyFragment from "../components/MyFragment";
 
 const MyFragmentESI = withESI(MyFragment, "MyFragment");

examples/express/src/server.jsx

@@ -2,7 +2,6 @@ import express from "express";
 import { path, serveFragment } from "react-esi/lib/server";
 import { renderToString } from "react-dom/server";
 import App from "./pages/App";
-import React from "react";
 
 const port = Number.parseInt(process.env.PORT || "3000", 10);
 

examples/express/tsconfig.json

@@ -1,24 +1,18 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES5",
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "allowSyntheticDefaultImports": true,
-    "incremental": true,
-    "paths": {
-      "react-esi/*": ["../../src/*"]
-    }
+    "jsx": "react-jsx",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../../src/*"],
+  "include": ["**/*.jsx"],
   "exclude": ["node_modules"]
 }