@alignable/bifrost-fastify 0.0.2

package/index.ts

@@ -0,0 +1,200 @@
+// Note that this file isn't processed by Vite, see https://github.com/brillout/vite-plugin-ssr/issues/562
+import { FastifyReply, RawServerBase, FastifyPluginAsync } from "fastify";
+import { FastifyRequest, RequestGenericInterface } from "fastify/types/request";
+import proxy from "@fastify/http-proxy";
+import accepts from "@fastify/accepts";
+import { type PageContextProxy, type Proxy } from "../bifrost/types/internal";
+import forwarded from "@fastify/forwarded";
+import { Writable } from "stream";
+import jsdom from "jsdom";
+import { IncomingHttpHeaders, IncomingMessage } from "http";
+import {
+  Http2ServerRequest,
+  IncomingHttpHeaders as Http2IncomingHttpHeaders,
+} from "http2";
+import { renderPage } from "vite-plugin-ssr/server";
+
+type RequestExtendedWithProxy = FastifyRequest<
+  RequestGenericInterface,
+  RawServerBase
+> & { _proxy?: { isPageContext: boolean; originalUrl?: string } };
+
+function streamToString(stream: Writable): Promise<string> {
+  const chunks: Buffer[] = [];
+  return new Promise((resolve, reject) => {
+    stream.on("data", (chunk) => chunks.push(Buffer.from(chunk)));
+    stream.on("error", (err) => reject(err));
+    stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
+  });
+}
+
+async function replyWithPage(
+  reply: FastifyReply<RawServerBase>,
+  pageContext: Awaited<ReturnType<typeof renderPage>>
+): Promise<FastifyReply> {
+  const { httpResponse } = pageContext;
+
+  if (!httpResponse) {
+    return reply.code(404).type("text/html").send("Not Found");
+  }
+
+  const { body, statusCode, contentType } = httpResponse;
+
+  return reply.status(statusCode).type(contentType).send(body);
+}
+
+const proxyPageId = "/proxy/pages";
+
+interface ViteProxyPluginOptions {
+  upstream: URL;
+  host: URL;
+  getLayout: (reply: FastifyReply<RawServerBase>) => {
+    layout: string;
+    layoutProps: any;
+  };
+  /// Use to signal to legacy backend to return special results (eg. remove navbar etc)
+  rewriteRequestHeaders?: (
+    req: Http2ServerRequest | IncomingMessage,
+    headers: Http2IncomingHttpHeaders | IncomingHttpHeaders
+  ) => Http2IncomingHttpHeaders | IncomingHttpHeaders;
+}
+/**
+ * Fastify plugin that wraps @fasitfy/http-proxy to proxy Rails/Turbolinks server into a Vite-Plugin-SSR site.
+ */
+export const viteProxyPlugin: FastifyPluginAsync<
+  ViteProxyPluginOptions
+> = async (fastify, { upstream, host, rewriteRequestHeaders, getLayout }) => {
+  await fastify.register(accepts);
+  await fastify.register(proxy, {
+    upstream: upstream.href,
+    async preHandler(req, reply) {
+      if (req.method === "GET" && req.accepts().type(["html"]) === "html") {
+        const pageContextInit = {
+          urlOriginal: req.url,
+        };
+
+        const pageContext = await renderPage<
+          { _pageId: string },
+          typeof pageContextInit
+        >(pageContextInit);
+
+        const proxy = pageContext._pageId === proxyPageId;
+
+        if (!proxy) {
+          return replyWithPage(reply, pageContext);
+        } else {
+          // pageContext.json is added on client navigations to indicate we are returning just json for the client router
+          // we have to remove it before proxying though.
+          (req as RequestExtendedWithProxy)._proxy = {
+            isPageContext: req.raw.url!.includes("/index.pageContext.json"),
+            originalUrl: req.raw.url,
+          };
+          req.raw.url = req.raw.url!.replace("/index.pageContext.json", "");
+        }
+      }
+    },
+    replyOptions: {
+      rewriteRequestHeaders(request, headers) {
+        // Delete cache headers
+        delete headers["if-modified-since"];
+        delete headers["if-none-match"];
+        delete headers["if-unmodified-since"];
+        delete headers["if-none-match"];
+        delete headers["if-range"];
+
+        const fwd = forwarded(request as IncomingMessage).reverse();
+        // fwd.push(request.ip); TODO: not sure if this is needed
+        headers["X-Forwarded-For"] = fwd.join(", ");
+        headers["X-Forwarded-Host"] = host.host;
+        headers["X-Forwarded-Protocol"] = host.protocol;
+        if (rewriteRequestHeaders) {
+          return rewriteRequestHeaders(request, headers);
+        }
+        return headers;
+      },
+      async onResponse(req, reply: FastifyReply<RawServerBase>, res) {
+        const { isPageContext = false, originalUrl = undefined } =
+          (req as RequestExtendedWithProxy)._proxy || {};
+        if (isPageContext && originalUrl) {
+          // restore url rewrite
+          req.raw.url = originalUrl;
+        }
+
+        if ([301, 302, 303, 307, 308].includes(reply.statusCode)) {
+          const location = reply.getHeader("location") as string;
+          if (location) {
+            const url = new URL(location);
+            if (url.host === upstream.host) {
+              // rewrite redirect on upstream's host to the proxy host
+              url.host = host.host;
+            }
+            reply.header("location", url);
+            if (isPageContext) {
+              reply
+                .status(200)
+                .type("application/json")
+                .send(
+                  JSON.stringify({
+                    pageContext: {
+                      // A bit hacky, but we manually construct the VPS pageContext here
+                      _pageId: proxyPageId,
+                      redirectTo: url,
+                    },
+                  })
+                );
+            } else {
+              return reply.send(res);
+            }
+          }
+        }
+
+        const { layout, layoutProps } = getLayout(reply);
+        if (!layout) {
+          return reply.send(res);
+        }
+
+        const html = await streamToString(res);
+        const dom = new jsdom.JSDOM(html);
+        const doc = dom.window.document;
+        const bodyEl = doc.querySelector("body");
+        const head = doc.querySelector("head");
+
+        if (!bodyEl || !head) {
+          return reply.code(404).type("text/html").send("proxy failed");
+        }
+
+        // disable vite-plugin-ssr link interceptor. May not be neccessary in future:
+        // https://github.com/brillout/vite-plugin-ssr/discussions/728#discussioncomment-5634111
+        bodyEl
+          .querySelectorAll("a[rel='external']")
+          .forEach((e) => e.setAttribute("data-turbolinks", "false"));
+        bodyEl.querySelectorAll("a").forEach((e) => (e.rel = "external"));
+
+        const bodyAttrs: Record<string, string> = {};
+        bodyEl.getAttributeNames().forEach((name) => {
+          bodyAttrs[name] = bodyEl.getAttribute(name)!;
+        });
+
+        const proxy: Proxy = {
+          body: bodyEl.innerHTML,
+          head: head.innerHTML,
+          bodyAttrs,
+        };
+
+        const pageContextInit: Partial<PageContextProxy> = {
+          urlOriginal: req.url,
+          layout,
+          layoutProps,
+        };
+        // proxySendClient is serialized and sent to client on subsequent navigation. proxy is ONLY included server-side to avoid doubling page size
+        if (isPageContext) { //TODO: send whole string instead of parsing and let browser do the parsing (turbolinks bridge lib)
+          Object.assign(pageContextInit, { proxySendClient: proxy });
+        } else {
+          Object.assign(pageContextInit, { proxy });
+        }
+        const pageContext = await renderPage(pageContextInit);
+        return replyWithPage(reply, pageContext);
+      },
+    },
+  });
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@alignable/bifrost-fastify",
+  "repository": "https://github.com/Alignable/bifrost.git",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@fastify/accepts": "^4.1.0",
+    "@fastify/forwarded": "^2.2.0",
+    "@fastify/http-proxy": "^8.4.0",
+    "@fastify/reply-from": "^9.0.1",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "fastify": "^4.9.2",
+    "jsdom": "^21.1.1",
+    "sirv": "^2.0.2",
+    "ts-node": "^10.9.1",
+    "vite": "^4.0.3"
+  },
+  "peerDependencies": {
+    "fastify": "^4.9.2",
+    "vite-plugin-ssr": "^0.4.120"
+  },
+  "devDependencies": {
+    "@types/connect": "^3.4.35",
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "nodemon": "^2.0.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.4"
+  },
+  "scripts": {
+    "build": "yarn tsup"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ES2020",
+    "declaration": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noEmit": true
+  },
+  "files": ["./index.ts"],
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: [
+    './index.ts',
+  ],
+  format: 'esm',
+  clean: true,
+  sourcemap: true,
+  dts: true
+})