Switch to PNPM Workspace (#61)

* chore: use pnpm workspace

* ci: use corepack pnpm

* ci: fix ci

* refactor(examples/express): update express example

convert jsx to tsx, improve types, modify compose file for production, add esbuild config for client-entry bundling, improve tsconfigs, update deps

* refactor(examples/next): improve next example, adapt for production, add compose file

* refactor(lib): naming and formatting

* chore(lib): update and clean up deps, improve scripts and tsconfig

* refactor(lib/withESI): improve types, add safeRequireServer, isClient and isServer functions

* chore: improve configs, dockerfile, ci and pnpm workspace

* docs(examples): update examples readme

* perf(docker): optimize dockerfile with a base-deps stage, rename stages

* docs(readme.md): small adjustments

* chore(package.json): add funding field

* chore(package.json): add Github sponsor funding entry

---------

Co-authored-by: JH <je.hu@pm.me>

.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+Dockerfile
+compose.yaml
+.git
+.gitignore
+*.md
+dist
+.github
+.vscode
+.next
+lib/lib

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es2021": true,
@@ -8,9 +9,9 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended"
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,7 +21,7 @@
     },
     "sourceType": "module"
   },
-  "plugins": ["react", "@typescript-eslint"],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "react/display-name": "off"
   },
@@ -29,5 +30,5 @@
       "version": "detect"
     }
   },
-  "ignorePatterns": ["node_modules/", "dist/", ".next/", "lib/"]
+  "ignorePatterns": ["node_modules", "dist", "lib/lib", ".next"]
 }

.github/workflows/test.yml

@@ -11,11 +11,23 @@ jobs:
     name: Run tests with Node.js ${{ matrix.node-version }}
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Setup node
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: yarn install
-      - run: yarn build
-      - run: yarn test
-      - run: yarn lint
+          cache: "pnpm"
+
+      - run: pnpm config --global set dedupe-peer-dependents=false
+      - run: pnpm --filter=react-esi install
+      - run: pnpm --filter=react-esi run lint
+      - run: pnpm --filter=react-esi run typecheck
+      - run: pnpm --filter=react-esi run build
+      - run: pnpm --filter=react-esi run test

.gitignore

@@ -1,5 +1,37 @@
-/lib
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
 node_modules
-/coverage
-yarn-error.log
+.pnp
+.pnp.js
+.pnpm-store
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# production
+build
 dist
+lib/lib
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.npmrc

@@ -0,0 +1 @@
+link-workspace-packages=false

.prettierignore

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

.prettierrc.json

@@ -1,7 +1,3 @@
 {
-  "printWidth": 80,
-  "endOfLine": "auto",
-  "semi": true,
-  "singleQuote": false,
-  "trailingComma": "none"
+  "trailingComma": "es5"
 }

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "orta.vscode-jest"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "jest.outputConfig": {
+    "clearOnRun": "none",
+    "revealOn": "demand",
+    "revealWithFocus": "none"
+  },
+  "testing.openTesting": "neverOpen",
+  "eslint.workingDirectories": ["lib/", "examples/express/", "examples/next/"],
+  "editor.codeActionsOnSave": {
+    "source.eslint.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}

Dockerfile

@@ -0,0 +1,77 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable pnpm
+
+FROM base AS base-deps
+WORKDIR /home/node/repo
+
+COPY ./package.json ./pnpm-*.yaml ./
+COPY ./lib/package.json ./lib/
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+
+
+# Express
+FROM base AS express-deps
+WORKDIR /home/node/repo
+COPY --from=base-deps /home/node/repo ./
+
+COPY ./examples/express/package.json ./examples/express/
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+
+FROM base AS express-build
+WORKDIR /home/node/repo
+COPY --from=express-deps /home/node/repo ./
+COPY . /home/node/repo
+
+RUN pnpm --filter !esi-next run build
+RUN pnpm deploy --filter esi-express --prod /home/node/esi-express
+
+FROM base AS express-prod
+COPY --from=express-build /home/node/esi-express /home/node/esi-express
+WORKDIR /home/node/esi-express
+USER node
+EXPOSE 3000
+CMD [ "node", "dist/server.js" ]
+
+
+
+# Nextjs
+FROM base AS next-deps
+WORKDIR /home/node/repo
+COPY --from=base-deps /home/node/repo ./
+
+COPY ./examples/next/package.json ./examples/next/
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+
+FROM base AS next-build
+WORKDIR /home/node/repo
+COPY --from=next-deps /home/node/repo ./
+COPY . /home/node/repo
+
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN pnpm --filter !esi-express run build
+RUN pnpm deploy --filter esi-next --prod /home/node/esi-next
+
+
+FROM base AS next-prod
+WORKDIR /home/node/esi-next
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown node:node .next
+COPY --from=next-build --chown=node:node /home/node/esi-next/public ./public
+COPY --from=next-build --chown=node:node /home/node/esi-next/node_modules ./node_modules
+COPY --from=next-build --chown=node:node /home/node/esi-next/.next/standalone ./
+COPY --from=next-build --chown=node:node /home/node/esi-next/dist ./dist
+COPY --from=next-build --chown=node:node /home/node/esi-next/.next/static ./.next/static
+
+USER node
+EXPOSE 3000
+CMD [ "node", "dist/server.js" ]

README.md

@@ -19,7 +19,7 @@ Also, React ESI allows the specification of different Time To Live (TTL) per Rea
 The cache server fetches and stores in the cache all the needed fragments (the HTML corresponding to every React component), builds the final page and sends it to the browser.
 React ESI also allows components to (re-)render client-side without any specific configuration.
 
-![ESI example](https://raw.githubusercontent.com/varnish/Varnish-Book/3bd8894181f5e42f628967d04f40116498d1f7f2/ui/img/esi.png )
+![ESI example](https://raw.githubusercontent.com/varnish/Varnish-Book/3bd8894181f5e42f628967d04f40116498d1f7f2/ui/img/esi.png)
 
 > Schema from [The Varnish Book](https://info.varnish-software.com/resources/varnish-6-by-example-book)
 
@@ -40,6 +40,10 @@ Or using Yarn:
 
     $ yarn add react-esi
 
+Or using PNPM:
+
+    $ pnpm add react-esi
+
 ## Usage
 
 React ESI provides a convenient [Higher Order Component](https://reactjs.org/docs/higher-order-components.html) that will:
@@ -57,7 +61,6 @@ If the method hasn't been called server-side, then it will be called client-side
 
 ```javascript
 // pages/App.jsx
-import React from "react";
 import withESI from "react-esi/lib/withESI";
 import MyFragment from "../components/MyFragment";
 
@@ -101,7 +104,7 @@ export default class MyFragment extends React.Component {
         () =>
           resolve({
             ...props, // Props coming from index.js, passed through the internal URL
-            dataFromAnAPI: "Hello there"
+            dataFromAnAPI: "Hello there",
           }),
         2000
       );
@@ -121,7 +124,6 @@ To serve the fragments, React ESI provides a ready-to-use controller compatible
 
 Alternatively, here is a full example using [a Next.js server](https://github.com/dunglas/react-esi/tree/main/examples/next):
 
-
 ## Features
 
 - Support Varnish, Cloudflare Workers, Akamai, Fastly, and any other cache systems having ESI support

examples/express/README.md

@@ -1,19 +1,11 @@
-# Custom server example with Express, Nodemon, Varnish, and react-esi
+# Custom server example with Express, 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 Typescript. 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.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com) or preview live with [StackBlitz](https://stackblitz.com/github/dunglas/react-esi/tree/main/examples/express)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/dunglas/react-esi/tree/main/examples/express)
+The server entry point is `server.tsx` in development and `dist/server.js` in production.
 
 ## 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.
+3. Use `docker compose up -d` to run the example.

examples/express/compose.yaml

@@ -1,3 +1,5 @@
+name: express-esi
+
 services:
   varnish:
     image: varnish:7.4
@@ -7,21 +9,21 @@ services:
       - /var/lib/varnish/varnishd:exec
     ports:
       - "8080:80"
-    restart: always
+    restart: unless-stopped
     depends_on:
       - node
 
   node:
-    image: node:18
-    working_dir: /home/node/app
+    image: express-esi
+    build:
+      context: ../../
+      target: express-prod
     user: node
     init: true
-    volumes:
-      - ./:/home/node/app
-    command: yarn dev
-    ports:
-      - "3000:3000"
+    command: ["node", "dist/server.js"]
+    expose:
+      - "3000"
     environment:
-      - NODE_ENV=development
+      - NODE_ENV=production
       - REACT_ESI_SECRET=${REACT_ESI_SECRET:-ChangeMe}
-    restart: always
+    restart: unless-stopped

examples/express/esbuild.config.mjs

@@ -0,0 +1,14 @@
+import * as esbuild from "esbuild";
+
+await esbuild.build({
+  entryPoints: ["src/entry-client.tsx"],
+  outfile: "dist/entry-client.js",
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+  target: ["es6"],
+  bundle: true,
+  treeShaking: true,
+  minify: true,
+  keepNames: true,
+});