@olenbetong/appframe-vite 3.1.17 → 4.0.0-rc.1

package/lib/build.js

@@ -1,3 +1,5 @@
+import { exists } from "fs-extra";
+import { resolve } from "node:path";
 import { visualizer } from "rollup-plugin-visualizer";
 import { viteExternalsPlugin } from "vite-plugin-externals";
 import { importJson } from "./importJson.js";
@@ -17,7 +19,15 @@ export async function addAppframeBuildConfig(config) {
             "react-dom": "ReactDOM",
         }));
     }
+    let entry = resolve(process.cwd(), "./src/index.tsx");
+    if (!(await exists(resolve(entry)))) {
+        entry = resolve(process.cwd(), "./src/index.ts");
+    }
+    if (!(await exists(resolve(entry)))) {
+        entry = resolve(process.cwd(), "./src/index.js");
+    }
     config.build.rollupOptions = {
+        input: entry,
         plugins: [visualizer({ filename: "./dist/stats.html", gzipSize: true })],
         output: {
             globals: appframe.build.externals !== false

package/lib/devServer.d.ts

@@ -1,6 +1,8 @@
-import { Application, RequestHandler, Router } from "express";
-import { ViteDevServer } from "vite";
-export declare function createProxyMiddleware(): Router;
-export declare function createHtmlTransformer(): (html: string) => Promise<string>;
-export declare function createDevMiddleware(vite: ViteDevServer): RequestHandler;
-export declare function startDevServer(app: Application): Promise<void>;
+import { Connect, ViteDevServer } from "vite";
+export declare function getLoginInfo(): Promise<{
+    hostname: any;
+    username: string;
+    password: string;
+}>;
+export declare function getProxyRoutes(): string[];
+export declare function createDevMiddleware(vite: ViteDevServer): Connect.NextHandleFunction;

package/lib/devServer.js

@@ -1,31 +1,14 @@
 import { Client } from "@olenbetong/appframe-data";
-import { watch } from "chokidar";
 import dotenv from "dotenv";
-import express from "express";
-import fs from "node:fs/promises";
-import path from "node:path";
-import open from "open";
-import tcpPortUsed from "tcp-port-used";
+import { exists } from "fs-extra";
+import { JSDOM } from "jsdom";
+import { resolve } from "node:path";
 import { importJson } from "./importJson.js";
-import { createAppframeProxy } from "./proxy.js";
 dotenv.config();
 let appPkg = await importJson("./package.json", true);
 let { appframe } = appPkg;
-let userSession = null;
-async function getUserSession() {
-    if (userSession) {
-        return userSession;
-    }
-    let { hostname, username, password } = await getLoginInfo();
-    let client = new Client(hostname);
-    await client.login(username, password);
-    let userResult = await client.afFetch("/api/system/usersession", {
-        timeout: 5000,
-    });
-    userSession = await userResult.json();
-    return userSession;
-}
-function getLoginInfo() {
+export async function getLoginInfo() {
+    let { appframe } = await importJson("./package.json", true);
     const hostname = appframe.proxy?.hostname ?? appframe.deploy?.hostname ?? "dev.obet.no";
     const { APPFRAME_LOGIN: username, APPFRAME_PWD: password } = process.env;
     if (!username || !password) {
@@ -33,173 +16,100 @@ function getLoginInfo() {
     }
     return { hostname, username, password };
 }
-export function createProxyMiddleware() {
-    let { hostname, username, password } = getLoginInfo();
-    const proxy = createAppframeProxy({ hostname, username, password });
-    try {
-        let appPkgUrl = `file://${process.cwd()}/package.json`;
-        watch(appPkgUrl).on("all", async () => {
-            appPkg = await importJson("./package.json", true);
-            appframe = appPkg.appframe;
-            let { hostname } = getLoginInfo();
-            proxy.setHostname(hostname);
-        });
-    }
-    catch (error) {
-        console.log(`Failed to watch package.json: ${error.message}`);
-    }
+export function getProxyRoutes() {
     const proxyRoutes = [
-        "/api/*",
-        "/file/*",
-        "/filestore/*",
-        "/static/dbimages*",
-        "/static/images*",
-        "/destroy/*",
-        "/create/*",
-        "/update/*",
-        "/retrieve/*",
-        "/exec/*",
-        "/report/*",
-        "/rowcount/*",
-        "/lib/*",
+        "^/api/.*",
+        "^/file/.*",
+        "^/filestore/.*",
+        "^/static/dbimages/.*",
+        "^/static/images/.*",
+        "^/static/graphics/.*",
+        "^/destroy/.*",
+        "^/create/.*",
+        "^/update/.*",
+        "^/retrieve/.*",
+        "^/exec/.*",
+        "^/report/.*",
+        "^/rowcount/.*",
+        "^/lib/.*",
+        "^/login",
+        "^/logout",
     ];
     if (appframe.proxy?.routes) {
         proxyRoutes.push(...appframe.proxy.routes);
     }
-    const router = express.Router();
-    proxyRoutes.forEach((route) => {
-        router.use(route, proxy);
-    });
-    return router;
+    return proxyRoutes;
 }
-export function createHtmlTransformer() {
-    return async (html) => {
-        let isPartner = appPkg.appframe?.article?.hostname === "partner.olenbetong.no";
-        let userSession = await getUserSession();
-        return html
-            .replace("<!-- {Appframe} -->", `<script src="/lib/@olenbetong/appframe-core/2.7.3/dist/iife/af.common.js"></script>
-<script src="/lib/@olenbetong/appframe-data/0.8.4/dist/iife/af.data.js"></script>
-<template id="PromptBeforeReloadDialog">
-    <dialog class="do-prompt">
-        <form method="dialog">
-            <article>
-                <p>There are unsaved changes. Would you like to save before reloading data?
-            </article>
-            <footer>
-                <menu>
-                    <li><button value="cancel">Cancel reloading</button></li>
-                    <li><button value="reload">Reload without saving</button></li>
-                    <li><button class="primary" value="save-and-reload">Save and reload</button></li>
-                </menu>
-            </footer>
-        </form>
-    </dialog>
-</template>
-
-<script type="text/javascript">
-function waitForDialog(dialog) {
-    return new Promise((resolve) => {
-        dialog.addEventListener("close", resolve, { once: true });
+async function getArticleHtml() {
+    let { hostname, username, password } = await getLoginInfo();
+    let article = appframe.article?.id;
+    let client = new Client(hostname);
+    await client.login(username, password);
+    let response = await client.afFetch(`/${article}`, {
+        timeout: 30000,
     });
-}
-async function promptBeforeDataObjectReload() {
-    let template = document.querySelector("#PromptBeforeReloadDialog");
-    let dialog = template.content.firstElementChild.cloneNode(true);
-    document.body.appendChild(dialog);
-    dialog.showModal();
-
-    await waitForDialog(dialog);
-    let result = dialog.returnValue || "cancel";
-    document.body.removeChild(dialog);
-
-    if (result === "save-and-reload") {
-        await this.endEdit();
-    }
-
-    return result !== "cancel";
-}
-
-af.DataObject.prototype.beforeReload = promptBeforeDataObjectReload;
-</script>
-<script>
-af = globalThis.af ?? {};
-af.userSession = ${JSON.stringify(userSession)};
-</script>
-<script src="/file/article/static-script/${appframe.article.id}.js"></script>
-<script>
-var l = window.af?.common?.getLocalizedString ?? ((s) => s);
-var SkipToConfig =  {
-  'settings': {
-    'skipTo': {
-      landmarks: 'main, [role="main"], [role="search"], nav, [role="navigation"], aside, [role="complementary"], section',
-      headings: 'main h1, main h2, main h3',
-      colorTheme: 'default',
-      displayOption: "popup",
-      positionLeft: "0",
-      buttonLabel: l("Skip to Content"),
-      buttonTooltipAccesskey: l('Accesskey is "$key"'),
-      menuLabel: l('Landmarks and Headings'),
-      landmarkGroupLabel: l('Landmarks'),
-      headingGroupLabel: l('Headings'),
-      mofnGroupLabel: l('$m of $n'),
-      headingLevelLabel: l('Heading level'),
-      mainLabel: l('main'),
-      searchLabel: l('search'),
-      navLabel: l('navigation'),
-      asideLabel: l('aside'),
-      footerLabel: l('footer'),
-      headerLabel: l('header'),
-      formLabel: l('form'),
-      msgNoLandmarksFound: l('No landmarks to skip to'),
-      msgNoHeadingsFound: l('No main headings to skip to')
+    if (response.ok) {
+        let html = await response.text();
+        let entry;
+        if (await exists(resolve(process.cwd(), "./src/index.tsx"))) {
+            entry = "/src/index.tsx";
+        }
+        else if (await exists(resolve(process.cwd(), "./src/index.ts"))) {
+            entry = "/src/index.ts";
+        }
+        else if (await exists(resolve(process.cwd(), "./src/index.js"))) {
+            entry = "/src/index.js";
+        }
+        let dom = new JSDOM(html);
+        let nodesToRemove = [];
+        dom.window.document.querySelectorAll("script").forEach((script) => {
+            if (script.src?.startsWith(`/file/article/script/${article}/main`)) {
+                let mainScript = dom.window.document.createElement("script");
+                mainScript.type = "module";
+                mainScript.src = entry;
+                script.insertAdjacentElement("beforebegin", mainScript);
+                nodesToRemove.push(script);
+            }
+            else if (script.src?.includes("bugsnag")) {
+                nodesToRemove.push(script);
+            }
+            else if (script.textContent?.includes("bugsnagOptions") ||
+                script.textContent?.includes("web-vitals") ||
+                script.textContent?.includes("serviceWorker.register")) {
+                nodesToRemove.push(script);
+            }
+        });
+        dom.window.document.querySelectorAll("link").forEach((link) => {
+            if (link.rel === "stylesheet" && link.href?.startsWith(`/file/article/style/${article}`)) {
+                nodesToRemove.push(link);
+            }
+            else if (link.rel === "prefetch" && link.href?.startsWith(`/file/article`)) {
+                nodesToRemove.push(link);
+            }
+        });
+        nodesToRemove.forEach((node) => node.remove());
+        return dom.serialize();
     }
-  }
-};
-</script>
-<script src="/lib/paypal-skipto/downloads/js/skipto.min.js" async></script>`)
-            .replace(`<!-- {Theme} -->`, isPartner
-            ? `          
-          <link rel="stylesheet" href="/file/site/style/ob.application.min.css" />
-          <link rel="stylesheet" href="/file/site/style/ob.theme.base.less" />
-          <link rel="stylesheet" href="/file/site/style/ob.theme.betongost.less" />
-          <link rel="stylesheet" href="/file/site/style/ob.theme.olenbetong.less" />
-          <link rel="stylesheet" href="/file/site/style/ob.theme.ribe.less" />
-          <link rel="stylesheet" href="/file/site/style/ob.theme.sjb.less" />
-          `
-            : `      
-      <link rel="stylesheet" href="/file/site/style/ob.theme.base.less" />
-      <link rel="stylesheet" href="/file/site/style/ob.theme.betongost.less" />
-      <link rel="stylesheet" href="/file/site/style/ob.theme.forsand.less" />
-      <link rel="stylesheet" href="/file/site/style/ob.theme.olenbetong.less" />
-      <link rel="stylesheet" href="/file/site/style/ob.theme.ribe.less" />
-      <link rel="stylesheet" href="/file/site/style/ob.theme.sjb.less" />
-      <link rel="stylesheet" href="/file/site/style/ob.es.application.min.css" />`);
-    };
+    throw Error(`Failed to get article '${article}' from '${hostname}': ${response.status} ${response.statusText}`);
 }
 export function createDevMiddleware(vite) {
     return async (req, res, next) => {
-        let transformer = createHtmlTransformer();
         const url = req.originalUrl;
-        try {
-            let template = await fs.readFile(path.resolve(process.cwd(), "index.html"), "utf-8");
-            template = await vite.transformIndexHtml(url, template);
-            let html = await transformer(template);
-            res.status(200).set({ "Content-Type": "text/html" }).end(html);
+        if (url === "/" || url?.startsWith("/" + appPkg.appframe.article.id)) {
+            try {
+                let html = await getArticleHtml();
+                html = await vite.transformIndexHtml(url ?? "", html);
+                res.statusCode = 200;
+                res.setHeader("Content-Type", "text/html");
+                res.end(html);
+            }
+            catch (error) {
+                vite.ssrFixStacktrace(error);
+                next(error);
+            }
         }
-        catch (error) {
-            vite.ssrFixStacktrace(error);
-            next(error);
+        else {
+            next();
         }
     };
 }
-export async function startDevServer(app) {
-    let port = 3000;
-    let used = true;
-    do {
-        used = await tcpPortUsed.check(port);
-        if (used)
-            port++;
-    } while (used);
-    app.listen(port);
-    open(`http://localhost:${port}/${appframe.article.id}`);
-}

package/lib/index.d.ts

@@ -1,6 +1,5 @@
 import { Plugin } from "vite";
 import { addAppframeBuildConfig } from "./build.js";
-import { createDevMiddleware, createProxyMiddleware, startDevServer } from "./devServer.js";
+import { createDevMiddleware } from "./devServer.js";
 export default function appframe(): Plugin;
-export { addAppframeBuildConfig };
-export { createDevMiddleware, createProxyMiddleware, startDevServer };
+export { addAppframeBuildConfig, createDevMiddleware };

package/lib/index.js

@@ -1,15 +1,45 @@
+import { watch } from "chokidar";
 import { addAppframeBuildConfig } from "./build.js";
-import { createDevMiddleware, createHtmlTransformer, createProxyMiddleware, startDevServer } from "./devServer.js";
+import { createDevMiddleware, getLoginInfo, getProxyRoutes } from "./devServer.js";
+import { importJson } from "./importJson.js";
+import { getLastSession, login } from "./proxy.js";
+let interval;
+let server;
+let lastHostname;
+try {
+    let appPkgUrl = `file://${process.cwd()}/package.json`;
+    watch(appPkgUrl).on("all", async () => {
+        if (server) {
+            let appPkg = await importJson("./package.json", true);
+            let config = appPkg.appframe;
+            let { hostname } = await getLoginInfo();
+            if (lastHostname !== hostname) {
+                server.restart(false);
+            }
+        }
+    });
+}
+catch (error) {
+    console.log(`Failed to watch package.json: ${error.message}`);
+}
 export default function appframe() {
-    let transformIndexHtml = createHtmlTransformer();
     return {
         name: "appframe",
+        resolveId(source) {
+            if (source.startsWith("/file/") || source.startsWith("/lib/")) {
+                return false;
+            }
+            return null;
+        },
         async config(currentConfig, env) {
             const { command } = env;
             let config = {
+                ...currentConfig,
                 build: {
+                    ...currentConfig.build,
                     target: currentConfig.build?.target ?? ["chrome90", "safari14"],
                     rollupOptions: {
+                        ...currentConfig.build?.rollupOptions,
                         output: {
                             assetFileNames: (assetInfo) => {
                                 if (assetInfo.name === "style.css")
@@ -20,23 +50,59 @@ export default function appframe() {
                     },
                 },
                 resolve: {
+                    ...currentConfig.resolve,
                     alias: [{ find: "~/", replacement: "/src/" }],
                 },
             };
             if (command === "build") {
                 await addAppframeBuildConfig(config);
             }
+            let proxy = config.server?.proxy ?? {};
+            let routes = getProxyRoutes();
+            let { hostname, username, password } = await getLoginInfo();
+            lastHostname = hostname;
+            await login(hostname, username, password);
+            if (interval)
+                clearInterval(interval);
+            // After changing the plugin to use the Vite proxy instead of a custom
+            // express server with node-http-proxy, we can no longer ensure the requests
+            // have a valid login. To reduce the amount of problems we get with expired
+            // sessions, we run the login procedure every 5 minutes to renew the session.
+            interval = setInterval(async () => {
+                await login(hostname, username, password);
+            }, 1000 * 60 * 5);
+            for (let route of routes) {
+                proxy[route] = {
+                    target: `https://${hostname}`,
+                    changeOrigin: true,
+                    configure(proxy, options) {
+                        proxy.on("proxyReq", (proxyReq, req, res, options) => {
+                            let authCookies = getLastSession(hostname)?.authCookies;
+                            if (authCookies) {
+                                let cookies = [];
+                                cookies.push(`AppframeWebAuth=${authCookies["AppframeWebAuth"]}`);
+                                cookies.push(`AppframeWebSession=${authCookies["AppframeWebSession"]}`);
+                                proxyReq.setHeader("cookie", cookies.join(";"));
+                                // If left unchanged, the origin will be the local IP address, which makes Appframe
+                                // return 403 errors
+                                proxyReq.setHeader("origin", `https://${hostname}`);
+                            }
+                        });
+                    },
+                };
+            }
+            config.server = {
+                ...config.server,
+                proxy,
+            };
             return config;
         },
         async configureServer(_server) {
-            let proxyMiddleware = createProxyMiddleware();
-            _server.middlewares.use(proxyMiddleware);
+            server = _server;
             return () => {
                 _server.middlewares.use(createDevMiddleware(_server));
             };
         },
-        transformIndexHtml,
     };
 }
-export { addAppframeBuildConfig };
-export { createDevMiddleware, createProxyMiddleware, startDevServer };
+export { addAppframeBuildConfig, createDevMiddleware };

package/lib/proxy.d.ts

@@ -1,18 +1,8 @@
-import e from "express";
 type CookieObject = Record<string, string>;
-export declare function login(hostname: string, username: string, password: string): Promise<CookieObject>;
-export type createProxyOptions = {
-    /**
-     * If true, will wait for the first login request to complete before returning.
-     */
-    autoLogin?: boolean;
-    hostname: string;
-    username: string;
-    password: string;
-    protocol?: "http" | "https";
-};
-export type AppframeProxy = e.RequestHandler & {
-    setHostname: (hostname: string) => Promise<void>;
+type LoginCacheEntry = {
+    timestamp: number;
+    authCookies: CookieObject;
 };
-export declare function createAppframeProxy(options: createProxyOptions): AppframeProxy;
+export declare function getLastSession(hostname: any): LoginCacheEntry | undefined;
+export declare function login(hostname: string, username: string, password: string): Promise<CookieObject>;
 export {};

package/lib/proxy.js

@@ -1,7 +1,10 @@
-import expressProxy from "express-http-proxy";
+import chalk from "chalk";
 import https from "node:https";
 const lastLogin = new Map();
 let currentLogin = null;
+export function getLastSession(hostname) {
+    return lastLogin.get(hostname);
+}
 export async function login(hostname, username, password) {
     if (currentLogin) {
         await currentLogin;
@@ -14,7 +17,7 @@ export async function login(hostname, username, password) {
                 return;
             }
             else {
-                console.log("Renewing authentication cookies...");
+                process.stdout.write(`${chalk.bgBlueBright(hostname)}: Renewing authentication cookies...`);
                 lastLogin.delete(hostname);
             }
         }
@@ -30,8 +33,14 @@ export async function login(hostname, username, password) {
                 "Content-Length": data.length,
             },
         };
-        console.log("Authenticating...");
+        process.stdout.clearLine(0);
+        process.stdout.write(`\r${chalk.bgBlueBright(hostname)}: Authenticating`);
+        let start = performance.now();
+        let interval = setInterval(() => {
+            process.stdout.write(`.`);
+        }, 100);
         let request = https.request(options, (response) => {
+            clearInterval(interval);
             let status = response.statusCode ?? 600;
             if (status < 400) {
                 let cookies = response.headers["set-cookie"] ?? [];
@@ -43,7 +52,8 @@ export async function login(hostname, username, password) {
                         cookieObj[key] = value;
                     }
                 }
-                console.log("Authentication successfull.");
+                process.stdout.clearLine(0);
+                process.stdout.write(`\r${chalk.bgBlueBright(hostname)}: Authenticated (${Math.floor(performance.now() - start)}ms)\n`);
                 lastLogin.set(hostname, {
                     timestamp: Date.now(),
                     authCookies: cookieObj,
@@ -51,7 +61,7 @@ export async function login(hostname, username, password) {
                 resolve(cookieObj);
             }
             else {
-                reject(Error(`Authentication failed: ${response.statusCode} ${response.statusMessage}`));
+                reject(Error(`${chalk.bgBlueBright(hostname)}: Authentication failed: ${response.statusCode} ${response.statusMessage}`));
             }
         });
         request.write(data);
@@ -71,32 +81,3 @@ export async function login(hostname, username, password) {
         throw error;
     }
 }
-export function createAppframeProxy(options) {
-    let { hostname, password, protocol = "https", username } = options;
-    // @ts-ignore
-    const proxy = expressProxy(() => `${protocol}://${hostname}`, {
-        memoizeHost: false,
-        proxyReqOptDecorator: async function (proxyReqOpts) {
-            if (!proxyReqOpts.path?.startsWith("/login")) {
-                let authCookies = await login(hostname, username, password);
-                let cookies = [];
-                cookies.push(`AppframeWebAuth=${authCookies["AppframeWebAuth"]}`);
-                cookies.push(`AppframeWebSession=${authCookies["AppframeWebSession"]}`);
-                proxyReqOpts.headers = proxyReqOpts.headers ?? {};
-                proxyReqOpts.headers["cookie"] = cookies.join(";");
-            }
-            return proxyReqOpts;
-        },
-        proxyReqPathResolver: function (req) {
-            return req.originalUrl;
-        },
-    });
-    proxy.setHostname = async (newHostname) => {
-        if (hostname !== newHostname) {
-            hostname = newHostname;
-            console.log(`Changing proxy host to '${newHostname}'...`);
-            await login(hostname, username, password);
-        }
-    };
-    return proxy;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-vite",
-	"version": "3.1.17",
+	"version": "4.0.0-rc.1",
 	"description": "Tools to use and deploy Vite applications to Appframe",
 	"main": "./lib/index.js",
 	"type": "module",
@@ -20,12 +20,15 @@
 	"license": "MIT",
 	"dependencies": {
 		"@olenbetong/appframe-data": "^0.8.10",
+		"chalk": "^5.3.0",
 		"chokidar": "^3.5.3",
 		"dotenv": "^16.3.1",
+		"jsdom": "^22.1.0",
 		"rollup-plugin-visualizer": "^5.9.2",
 		"vite-plugin-externals": "^0.6.2"
 	},
 	"devDependencies": {
+		"@types/jsdom": "^21.1.2",
 		"typescript": "^5.1.6"
 	},
 	"peerDependencies": {
@@ -40,5 +43,5 @@
 		"open": "^9.1.0",
 		"tcp-port-used": "^1.0.2"
 	},
-	"gitHead": "cfb5910e5d7e2159b65a467ee8ba31b31c74370e"
+	"gitHead": "2e06c4e76d3a0e56aec830b06f9dc5491e5291df"
 }