dunglas · J3m5 · Feb 26, 2024 · Aug 3, 2023 · Aug 3, 2023 · Aug 4, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,7 +9,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "prettier"
+    "prettier",
+    "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 /lib
-/node_modules
+node_modules
 /coverage
diff --git a/examples/express/built/app.js b/examples/express/built/app.js
diff --git a/examples/express/index.html b/examples/express/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/express/package.json b/examples/express/package.json
@@ -0,0 +1,23 @@
+{
+  "author": "Kévin Dunglas",
+  "dependencies": {
+    "express": "^4.18.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-esi": "file:../../"
+  },
+  "description": "An example project to demonstrate usage of ESI with Express",
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.4",
+    "vite": "^4.4.8"
+  },
+  "license": "MIT",
+  "main": "index.js",
+  "name": "esi-express-example",
+  "repository": "https://github.com/dunglas/react-esi/examples/express",
+  "scripts": {
+    "dev": "vite",
+    "server": "node src/server.mjs"
+  },
+  "version": "1.0.0"
+}
diff --git a/examples/express/src/components/MyFragment.jsx b/examples/express/src/components/MyFragment.jsx
@@ -0,0 +1,34 @@
+// components/MyFragment.js
+import React from 'react';
+
+export default class MyFragment extends React.Component {
+  render() {
+    return (
+      <section>
+        <h1>A fragment that can have its own TTL</h1>
+
+        <div>{this.props.greeting /* access to the props as usual */}</div>
+        <div>{this.props.dataFromAnAPI}</div>
+      </section>
+    );
+  }
+
+  static async getInitialProps({ props, res }) {
+    return new Promise(resolve => {
+      if (res) {
+        // Set a TTL for this fragment
+        res.set('Cache-Control', 's-maxage=60, max-age=30');
+      }
+
+      // Simulate a delay (call to a remote service such as a web API)
+      setTimeout(
+        () =>
+          resolve({
+            ...props, // Props coming from index.js, passed through the internal URL
+            dataFromAnAPI: 'Hello there'
+          }),
+        2000
+      );
+    });
+  }
+}
diff --git a/examples/express/src/main.jsx b/examples/express/src/main.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { App } from "./pages/App";
+
+hydrateRoot(document.getElementById("root"), <App />);
diff --git a/examples/express/src/pages/App.jsx b/examples/express/src/pages/App.jsx
@@ -0,0 +1,15 @@
+// pages/index.js
+import React from 'react';
+import withESI from 'react-esi/lib/withESI';
+import MyFragment from '../components/MyFragment';
+
+const MyFragmentESI = withESI(MyFragment, 'MyFragment');
+// The second parameter is an unique ID identifying this fragment.
+// If you use different instances of the same component, use a different ID per instance.
+
+export const App = () => (
+  <div>
+    <h1>React ESI demo app</h1>
+    <MyFragmentESI greeting="Hello!" />
+  </div>
+);
diff --git a/examples/express/src/server.jsx b/examples/express/src/server.jsx
@@ -0,0 +1,46 @@
+// server.js
+import express from "express";
+import { path, serveFragment } from "react-esi/lib/server";
+import * as ReactDOMServer from 'react-dom/server';
+import { App } from "./pages/App";
+import React from "react";
+
+const server = express();
+server.use((req, res, next) => {
+  // Send the Surrogate-Control header to announce ESI support to proxies (optional with Varnish, depending of your config)
+  res.set("Surrogate-Control", 'content="ESI/1.0"');
+  next();
+});
+
+server.get('/', (req, res) => {
+  const app = ReactDOMServer.renderToString(<App />);
+
+  const html = `
+      <html lang="en">
+      <head>
+          <script src="app.js" async defer></script>
+      </head>
+      <body>
+          <div id="root">${app}</div>
+      </body>
+      </html>
+  `
+  res.send(html);
+})
+
+// "path" default to /_fragment, change it using the REACT_ESI_PATH env var
+server.get(path, (req, res) => {
+  return serveFragment(
+    req,
+    res,
+    // "fragmentID" is the second parameter passed to the "WithESI" HOC, the root component used for this fragment must be returned
+    (fragmentID) => require(`./components/${fragmentID}`).default
+  );
+});
+
+// ...
+// Other Express routes come here
+
+server.use(express.static("./built"));
+
+server.listen(8080);
diff --git a/examples/express/vite.config.js b/examples/express/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    include: ['react-esi'],
+  },
+  build: {
+    commonjsOptions: {
+      include: [/react-esi/, /node_modules/],
+    },
+  },
+  // define: {'process.env': process.env}
+})
diff --git a/examples/express/yarn-error.log b/examples/express/yarn-error.log
@@ -0,0 +1,43 @@
+Arguments: 
+  /home/jeremy/.asdf/installs/nodejs/18.16.1/bin/node /home/jeremy/.cache/node/corepack/yarn/1.22.19/bin/yarn.js install
+
+PATH: 
+  /home/jeremy/.asdf/plugins/nodejs/shims:/home/jeremy/.asdf/installs/nodejs/18.16.1/bin:/home/jeremy/.local/share/pnpm:/home/jeremy/.asdf/shims:/home/jeremy/.asdf/bin:/home/jeremy/.local/bin:/home/jeremy/.local/share/pnpm:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  18.16.1
+
+Platform: 
+  linux x64
+
+Trace: 
+  Error: ENOENT: no such file or directory, stat '/home/jeremy/dev/tilleuls/interne/react-esi/examples/express/node_modules/react-esi'
+
+npm manifest: 
+  {
+    "author": "Kévin Dunglas",
+    "dependencies": {
+      "react-esi": "link: ../../lib"
+    },
+    "description": "An example project to demonstrate usage of ESI with Express",
+    "license": "MIT",
+    "main": "index.js",
+    "name": "esi-express-example",
+    "repository": "https://github.com/dunglas/react-esi/examples/express",
+    "version": "1.0.0"
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+  # yarn lockfile v1
+
+
+  "react-esi@link:lib":
+    version "0.0.0"
+    uid ""