react-cheminfo 0.49.0 → 0.50.0

package/README.md

@@ -35,6 +35,7 @@ only when it drags a heavy dependency behind it.
 | `react-cheminfo/core`              | every framework-free helper — 140 value exports   | nothing                                          |
 | `react-cheminfo/ui`                | every React component and hook — 60 value exports | React                                            |
 | `react-cheminfo/vite`              | the prerender plugin and the OG card              | nothing; React on the card                       |
+| `react-cheminfo/pages`             | the Cloudflare Pages analytics middleware         | nothing                                          |
 | `react-cheminfo/orbital`           | the 3D atomic-orbital viewer                      | React, molstar                                   |
 | `react-cheminfo/molecule3d`        | the 3D molecule viewer and its toolbar            | React, molstar                                   |
 | `react-cheminfo/structure`         | the structure editor and renderer                 | React, react-ocl, OCL                            |
@@ -1096,6 +1097,28 @@ disk. A server writing more into the same place composes it itself, with
 `pageHeadTags` and `fill(page, PAGE_BODY_MARKER, noscriptIndex(…))`. All of that
 is `react-cheminfo/core`, so a backend loads no React and no Vite.
 
+### On Cloudflare Pages
+
+Pages serves the build as it is, so there is no server and no entrypoint to put
+the analytics snippet in a page. `onRequest` from `react-cheminfo/pages` adds it
+per request instead, from the project's `TRACKING_SCRIPT` variable, and returns
+everything that is not a page untouched:
+
+```ts
+// functions/_middleware.ts
+export { onRequest } from 'react-cheminfo/pages';
+```
+
+It is a door of its own so the Functions bundler reads two small files and
+never the rest of `core`, whose JSON imports an older esbuild cannot parse.
+
+Keep the bundles out of the function with a `public/_routes.json`, so a page
+view costs one invocation rather than one per asset:
+
+```json
+{ "version": 1, "include": ["/*"], "exclude": ["/assets/*"] }
+```
+
 ## Saying which build is running
 
 A report of something going wrong is worth answering only when we know what was

package/bin/check-seo.mjs

@@ -60,6 +60,7 @@ if (stats === undefined || !stats.isDirectory()) {
   process.exit(usageError(TOOL, `no such build directory: ${root}`));
 }
 
+const named = sitemapAddresses();
 const pages = [];
 collect(root, pages);
 if (pages.length === 0) {
@@ -358,6 +359,11 @@ function exists(path) {
 
 /**
  * Add every built page under a path to the list, with the address it answers.
+ *
+ * A folder's `index.html` is always a page. Any other `.html` file is one only
+ * when the sitemap names its address, as every prerendered `<route>.html` is:
+ * a demo the build emits or a document copied from `public` is not a page of
+ * the site, and holding it to a page's head would report a correct build.
  * @param {string} path - A directory of the build.
  * @param {Array<{ file: string, address: string }>} pages - Collected so far.
  */
@@ -369,8 +375,27 @@ function collect(path, pages) {
       collect(next, pages);
     } else if (entry.name.endsWith('.html')) {
       const page = relative(root, next).replace(/\.html$/, '');
-      const address = `/${page.replace(/(?:^|\/)index$/, '')}`;
-      pages.push({ file: next, address: trimSlash(address) });
+      const address = trimSlash(`/${page.replace(/(?:^|\/)index$/, '')}`);
+      if (entry.name === 'index.html' || named.has(address)) {
+        pages.push({ file: next, address });
+      }
     }
   }
 }
+
+/**
+ * Read which addresses of this build the sitemap names.
+ * @returns {Set<string>} Every address of this build the sitemap names.
+ */
+function sitemapAddresses() {
+  const sitemap = join(root, 'sitemap.xml');
+  const addresses = new Set();
+  if (!exists(sitemap)) return addresses;
+  for (const match of readFileSync(sitemap, 'utf8').matchAll(
+    /<loc>(?<loc>[^<]+)<\/loc>/g,
+  )) {
+    const own = ownPath(match.groups?.loc ?? '');
+    if (own !== undefined) addresses.add(own === '' ? '/' : own);
+  }
+  return addresses;
+}

package/lib/pages.d.ts

@@ -0,0 +1,3 @@
+export type { TrackingMiddlewareContext } from './seo/core/trackingMiddleware.ts';
+export { trackingScriptMiddleware as onRequest } from './seo/core/trackingMiddleware.ts';
+//# sourceMappingURL=pages.d.ts.map

package/lib/pages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages.d.ts","sourceRoot":"","sources":["../src/pages.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,wBAAwB,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC"}

package/lib/pages.js

@@ -0,0 +1,2 @@
+export { trackingScriptMiddleware as onRequest } from "./seo/core/trackingMiddleware.js";
+//# sourceMappingURL=pages.js.map

package/lib/pages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages.js","sourceRoot":"","sources":["../src/pages.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC"}

package/lib/seo/core/trackingMiddleware.d.ts

@@ -0,0 +1,27 @@
+/** What a Cloudflare Pages Function hands its middleware, as far as it is read. */
+export interface TrackingMiddlewareContext {
+    /** The visitor's request. */
+    request: Request;
+    /** The project's variables; `TRACKING_SCRIPT` holds the analytics snippet. */
+    env: {
+        TRACKING_SCRIPT?: string;
+    };
+    /** Serve the request from the build, as Pages would without a function. */
+    next: () => Promise<Response>;
+}
+/**
+ * Put the analytics snippet in every page a Cloudflare Pages site serves.
+ *
+ * Pages has no server and no entrypoint to write the deployment's snippet into
+ * the build, so it is added per request instead, from the project's
+ * `TRACKING_SCRIPT` variable — the deployment owns it, never the build. With
+ * the variable unset, and for anything that is not a page, the response the
+ * build gives is returned untouched. A site wires it in
+ * `functions/_middleware.ts`:
+ *
+ *   export { onRequest } from 'react-cheminfo/pages';
+ * @param context - The Pages Function context.
+ * @returns The response, carrying the snippet when it is an HTML page.
+ */
+export declare function trackingScriptMiddleware(context: TrackingMiddlewareContext): Promise<Response>;
+//# sourceMappingURL=trackingMiddleware.d.ts.map

package/lib/seo/core/trackingMiddleware.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trackingMiddleware.d.ts","sourceRoot":"","sources":["../../../src/seo/core/trackingMiddleware.ts"],"names":[],"mappings":"AAEA,mFAAmF;AACnF,MAAM,WAAW,yBAAyB;IACxC,6BAA6B;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,8EAA8E;IAC9E,GAAG,EAAE;QAAE,eAAe,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,2EAA2E;IAC3E,IAAI,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAsB,wBAAwB,CAC5C,OAAO,EAAE,yBAAyB,GACjC,OAAO,CAAC,QAAQ,CAAC,CAmBnB"}

package/lib/seo/core/trackingMiddleware.js

@@ -0,0 +1,33 @@
+import { injectTrackingScript } from "./trackingScript.js";
+/**
+ * Put the analytics snippet in every page a Cloudflare Pages site serves.
+ *
+ * Pages has no server and no entrypoint to write the deployment's snippet into
+ * the build, so it is added per request instead, from the project's
+ * `TRACKING_SCRIPT` variable — the deployment owns it, never the build. With
+ * the variable unset, and for anything that is not a page, the response the
+ * build gives is returned untouched. A site wires it in
+ * `functions/_middleware.ts`:
+ *
+ *   export { onRequest } from 'react-cheminfo/pages';
+ * @param context - The Pages Function context.
+ * @returns The response, carrying the snippet when it is an HTML page.
+ */
+export async function trackingScriptMiddleware(context) {
+    const response = await context.next();
+    const snippet = context.env.TRACKING_SCRIPT?.trim() ?? '';
+    if (snippet === '' ||
+        context.request.method !== 'GET' ||
+        response.status === 304 ||
+        !response.headers.get('content-type')?.includes('text/html')) {
+        return response;
+    }
+    const headers = new Headers(response.headers);
+    headers.delete('content-length');
+    return new Response(injectTrackingScript(await response.text(), snippet), {
+        status: response.status,
+        statusText: response.statusText,
+        headers,
+    });
+}
+//# sourceMappingURL=trackingMiddleware.js.map

package/lib/seo/core/trackingMiddleware.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trackingMiddleware.js","sourceRoot":"","sources":["../../../src/seo/core/trackingMiddleware.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAY3D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAC5C,OAAkC;IAElC,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,IAAI,EAAE,CAAC;IACtC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC1D,IACE,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,OAAO,CAAC,MAAM,KAAK,KAAK;QAChC,QAAQ,CAAC,MAAM,KAAK,GAAG;QACvB,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,EAC5D,CAAC;QACD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,EAAE,OAAO,CAAC,EAAE;QACxE,MAAM,EAAE,QAAQ,CAAC,MAAM;QACvB,UAAU,EAAE,QAAQ,CAAC,UAAU;QAC/B,OAAO;KACR,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",
@@ -22,6 +22,7 @@
     "./molecule3d": "./lib/molecule3d.js",
     "./molstar/*": "./lib/molstar/*/index.js",
     "./orbital": "./lib/orbital.js",
+    "./pages": "./lib/pages.js",
     "./slides": "./lib/slides.js",
     "./spectra": "./lib/spectra.js",
     "./structure": "./lib/structure.js",

package/src/pages.ts

@@ -0,0 +1,2 @@
+export type { TrackingMiddlewareContext } from './seo/core/trackingMiddleware.ts';
+export { trackingScriptMiddleware as onRequest } from './seo/core/trackingMiddleware.ts';

package/src/seo/core/trackingMiddleware.ts

@@ -0,0 +1,48 @@
+import { injectTrackingScript } from './trackingScript.ts';
+
+/** What a Cloudflare Pages Function hands its middleware, as far as it is read. */
+export interface TrackingMiddlewareContext {
+  /** The visitor's request. */
+  request: Request;
+  /** The project's variables; `TRACKING_SCRIPT` holds the analytics snippet. */
+  env: { TRACKING_SCRIPT?: string };
+  /** Serve the request from the build, as Pages would without a function. */
+  next: () => Promise<Response>;
+}
+
+/**
+ * Put the analytics snippet in every page a Cloudflare Pages site serves.
+ *
+ * Pages has no server and no entrypoint to write the deployment's snippet into
+ * the build, so it is added per request instead, from the project's
+ * `TRACKING_SCRIPT` variable — the deployment owns it, never the build. With
+ * the variable unset, and for anything that is not a page, the response the
+ * build gives is returned untouched. A site wires it in
+ * `functions/_middleware.ts`:
+ *
+ *   export { onRequest } from 'react-cheminfo/pages';
+ * @param context - The Pages Function context.
+ * @returns The response, carrying the snippet when it is an HTML page.
+ */
+export async function trackingScriptMiddleware(
+  context: TrackingMiddlewareContext,
+): Promise<Response> {
+  const response = await context.next();
+  const snippet = context.env.TRACKING_SCRIPT?.trim() ?? '';
+  if (
+    snippet === '' ||
+    context.request.method !== 'GET' ||
+    response.status === 304 ||
+    !response.headers.get('content-type')?.includes('text/html')
+  ) {
+    return response;
+  }
+
+  const headers = new Headers(response.headers);
+  headers.delete('content-length');
+  return new Response(injectTrackingScript(await response.text(), snippet), {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}