@olenbetong/appframe-vite 4.0.4 → 4.1.1

package/lib/devServer.d.ts

@@ -3,6 +3,7 @@ export declare function getLoginInfo(): Promise<{
     hostname: any;
     username: string;
     password: string;
+    appframe: any;
 }>;
 export declare function getProxyRoutes(): string[];
 export declare function createDevMiddleware(vite: ViteDevServer): Connect.NextHandleFunction;

package/lib/devServer.js

@@ -2,8 +2,10 @@ import { Client } from "@olenbetong/appframe-data";
 import dotenv from "dotenv";
 import { exists } from "fs-extra";
 import { JSDOM } from "jsdom";
+import { readFile, stat, writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
 import { importJson } from "./importJson.js";
+import { getStringCache } from "./localization.js";
 dotenv.config();
 let appPkg = await importJson("./package.json", true);
 let { appframe } = appPkg;
@@ -14,7 +16,7 @@ export async function getLoginInfo() {
     if (!username || !password) {
         throw new Error("Your Appframe credentials are not set in the environment variables. Username should be set in APPFRAME_LOGIN and password in APPFRAME_PWD.");
     }
-    return { hostname, username, password };
+    return { hostname, username, password, appframe };
 }
 export function getProxyRoutes() {
     const proxyRoutes = [
@@ -40,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;
@@ -78,6 +92,12 @@ async function getArticleHtml() {
                 script.textContent?.includes("serviceWorker.register")) {
                 nodesToRemove.push(script);
             }
+            else if (script.textContent?.includes("af.article.i18n")) {
+                let cachedStrings = getStringCache();
+                let localizeScript = dom.window.document.createElement("script");
+                localizeScript.textContent = `Object.assign(af.article.i18n, ${JSON.stringify(cachedStrings)})`;
+                script.insertAdjacentElement("afterend", localizeScript);
+            }
         });
         dom.window.document.querySelectorAll("link").forEach((link) => {
             if (link.rel === "stylesheet" && link.href?.startsWith(`/file/article/style/${article}`)) {
@@ -97,15 +117,52 @@ 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);
+                    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/index.js

@@ -2,6 +2,8 @@ import bodyParser from "body-parser";
 import { watch } from "chokidar";
 import { addAppframeBuildConfig } from "./build.js";
 import { createDevMiddleware, getLoginInfo, getProxyRoutes } from "./devServer.js";
+import { importJson } from "./importJson.js";
+import { localizeMiddleware } from "./localization.js";
 import { getLastSession, login } from "./proxy.js";
 let interval;
 let server;
@@ -101,7 +103,10 @@ export default function appframe() {
             return config;
         },
         async configureServer(_server) {
+            let { appframe } = await importJson("./package.json", true);
             server = _server;
+            _server.middlewares.use(`/api/user/localize/new/${appframe.article.id}`, jsonParser);
+            _server.middlewares.use(`/api/user/localize/new/${appframe.article.id}`, localizeMiddleware);
             _server.middlewares.use("/data/Logger/LogError", jsonParser);
             _server.middlewares.use("/data/Logger/LogError", (req, res) => {
                 // @ts-ignore

package/lib/localization.d.ts

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

package/lib/localization.js

@@ -0,0 +1,82 @@
+/**
+ * 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";
+import { getLoginInfo } from "./devServer.js";
+import { importJson } from "./importJson.js";
+import { getLastSession } from "./proxy.js";
+function debounce(callback, delay = 300) {
+    let timeout;
+    return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => callback(...args), delay);
+    };
+}
+const stringCache = new Map();
+const cachePath = resolve(process.cwd(), "./node_modules/.appframe");
+const cacheFile = resolve(cachePath, "./localizeCache.json");
+if (await exists(cacheFile)) {
+    let cache = await importJson(cacheFile, true);
+    for (let text in cache) {
+        stringCache.set(text, cache[text]);
+    }
+}
+async function saveCacheToFile() {
+    if (!(await exists(cacheFile))) {
+        await mkdir(cachePath, { recursive: true });
+    }
+    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 const localizeMiddleware = async (req, res, next) => {
+    // @ts-ignore
+    let text = req.body.text;
+    let { hostname, appframe } = await getLoginInfo();
+    let authCookies = getLastSession(hostname)?.authCookies;
+    if (authCookies) {
+        let cookies = [];
+        cookies.push(`AppframeWebAuth=${authCookies["AppframeWebAuth"]}`);
+        cookies.push(`AppframeWebSession=${authCookies["AppframeWebSession"]}`);
+        let cookieHeader = cookies.join(";");
+        let uri = `https://${hostname}/api/user/localize/new/${appframe.article.id}`;
+        let result = await fetch(uri, {
+            body: JSON.stringify({ text }),
+            method: "POST",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+                Cookie: cookieHeader,
+                "X-Requested-With": "XMLHttpRequest",
+            },
+        });
+        let data = await result.json();
+        addStringToCache(text, data);
+        res.statusCode = 200;
+        res.end(JSON.stringify(data));
+    }
+    else {
+        res.statusCode = 200;
+        res.end(text);
+    }
+};
+export function getStringCache() {
+    return Object.fromEntries(stringCache);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-vite",
-	"version": "4.0.4",
+	"version": "4.1.1",
 	"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": "dee9e5d023b626a1ad73a94ab880ab875832cdf6"
+	"gitHead": "cd010cf9dcd40cda3f30d89fc48d26de17cf2812"
 }