@olenbetong/appframe-vite 4.1.0 → 4.1.2

package/lib/devServer.js

@@ -2,6 +2,7 @@ import { Client } from "@olenbetong/appframe-data";
 import dotenv from "dotenv";
 import { exists } from "fs-extra";
 import { JSDOM } from "jsdom";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
 import { importJson } from "./importJson.js";
 import { getStringCache } from "./localization.js";
@@ -41,6 +42,18 @@ export function getProxyRoutes() {
     }
     return proxyRoutes;
 }
+/**
+ * We want to keep the development environment as close to the production environment as possible,
+ * so we fetch the article HTML from Synergi. There are however some changes we need to do:
+ *
+ *  - Remove any article scripts and styles (they are the production version of the application)
+ *  - Remove Bugsnag (don't want to report all unhandled exceptions in development)
+ *  - Remove the web-vitals (only want production results when measuring performance)
+ *  - Remove the server worker registration
+ *  - Add strings from local string cache to avoid tons of localize requests when starting the application
+ *  - Add the hostname to links with absolute paths (they are not part of the application, and will fail without host)
+ * @returns
+ */
 async function getArticleHtml() {
     let { hostname, username, password } = await getLoginInfo();
     let article = appframe.article?.id;
@@ -104,15 +117,55 @@ async function getArticleHtml() {
     }
     throw Error(`Failed to get article '${article}' from '${hostname}': ${response.status} ${response.statusText}`);
 }
+const cachePath = resolve(process.cwd(), "./node_modules/.appframe");
+const cacheFile = resolve(cachePath, "./index.html");
+async function getCacheAge() {
+    if (await exists(cacheFile)) {
+        let file = await stat(cacheFile);
+        let age = (Date.now() - file.mtime.getTime()) / 1000;
+        return age;
+    }
+    return -1;
+}
+async function getCachedHtml(age) {
+    let maxAge = 3 * 60 * 60; // 3 hours
+    if (age < maxAge) {
+        return await readFile(cacheFile, { encoding: "utf-8" });
+    }
+    return "";
+}
 export function createDevMiddleware(vite) {
     return async (req, res, next) => {
         const url = req.originalUrl;
-        if (url === "/" || url?.startsWith("/" + appPkg.appframe.article.id)) {
+        if (url === "/") {
+            res.statusCode = 302;
+            res.setHeader("Location", `/${appPkg.appframe.article.id}`);
+            res.end("");
+        }
+        else if (url?.startsWith("/" + appPkg.appframe.article.id)) {
             try {
-                let html = await getArticleHtml();
-                html = await vite.transformIndexHtml(url ?? "", html);
+                // Unless the browser is explicitly disabling cache by setting the Cache-Control header
+                // to "no-cache", we cache the generated HTML for up to 3 hours
+                let cacheControl = req.headers["cache-control"];
+                let html = "";
+                let age = await getCacheAge();
+                if (cacheControl !== "no-cache" && age > 0) {
+                    html = await getCachedHtml(age);
+                }
+                if (!html) {
+                    html = await getArticleHtml();
+                    html = await vite.transformIndexHtml(url ?? "", html);
+                    if (!(await exists(cacheFile))) {
+                        await mkdir(cachePath, { recursive: true });
+                    }
+                    await writeFile(cacheFile, html, { encoding: "utf-8" });
+                }
                 res.statusCode = 200;
                 res.setHeader("Content-Type", "text/html");
+                res.setHeader("Cache-Control", "max-age=10800000");
+                if (age >= 0) {
+                    res.setHeader("Age", age);
+                }
                 res.end(html);
             }
             catch (error) {

package/lib/localization.d.ts

@@ -1,6 +1,5 @@
 import { Connect } from "vite";
 export declare function addStringToCache(text: string, translation: string): void;
-export declare function getStringFromCache(text: string): string | undefined;
 export declare const localizeMiddleware: Connect.NextHandleFunction;
 export declare function getStringCache(): {
     [k: string]: string;

package/lib/localization.js

@@ -1,3 +1,15 @@
+/**
+ * There can be potentially many requests to localize strings on startup,
+ * and since the dev server runs on HTTP 1.1, it is limited to just a few
+ * requests at the same time. This means starting the application sometimes
+ * takes a long time, because the data fetch requests are queued behind a lot
+ * of localize requests.
+ *
+ * To fix this, we add a middleware that handles the localize route, and
+ * cache the proxied results in a file under /node_modules/.appframe. In the
+ * handler that generates the article HTML, we then get the cached strings,
+ * and add a script that adds the strings to the client cache.
+ */
 import { exists } from "fs-extra";
 import { mkdir, writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
@@ -27,14 +39,13 @@ async function saveCacheToFile() {
     let data = JSON.stringify(Object.fromEntries(stringCache));
     await writeFile(cacheFile, data, { encoding: "utf-8" });
 }
+// Avoid running 10s to 100s of writes in a row by debouncing the
+// cache save operation.
 const debouncedSaveCacheToFile = debounce(saveCacheToFile, 1000);
 export function addStringToCache(text, translation) {
     stringCache.set(text, translation);
     debouncedSaveCacheToFile();
 }
-export function getStringFromCache(text) {
-    return stringCache.get(text);
-}
 export const localizeMiddleware = async (req, res, next) => {
     // @ts-ignore
     let text = req.body.text;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-vite",
-	"version": "4.1.0",
+	"version": "4.1.2",
 	"description": "Tools to use and deploy Vite applications to Appframe",
 	"main": "./lib/index.js",
 	"type": "module",
@@ -43,5 +43,5 @@
 		"open": "^9.1.0",
 		"tcp-port-used": "^1.0.2"
 	},
-	"gitHead": "ba8b3dc19b519eee6a3732526f4d1c10d0e00649"
+	"gitHead": "9b6e8db4b3161a36eac6dc807095ba3fcea51ca5"
 }