@olenbetong/appframe-vite 1.0.0-alpha.0

package/lib/build.d.ts

@@ -0,0 +1,8 @@
+import { UserConfig } from "vite";
+/**
+ * Node.js doesn't support JSON imports yet, so this is a simple
+ * function that reads a JSON file from disk and returns the parsed
+ * content.
+ */
+export declare function importJson(url: string, useCwd?: boolean): Promise<any>;
+export declare function addAppframeBuildConfig(config: UserConfig): Promise<UserConfig>;

package/lib/build.js

@@ -0,0 +1,55 @@
+import { viteExternalsPlugin } from "vite-plugin-externals";
+import { visualizer } from "rollup-plugin-visualizer";
+import { readFile } from "node:fs/promises";
+/**
+ * Node.js doesn't support JSON imports yet, so this is a simple
+ * function that reads a JSON file from disk and returns the parsed
+ * content.
+ */
+export async function importJson(url, useCwd = false) {
+    let completeUrl = new URL(url, useCwd ? `file://${process.cwd()}/` : import.meta.url);
+    console.log(completeUrl);
+    return JSON.parse(await readFile(completeUrl, "utf-8"));
+}
+export async function addAppframeBuildConfig(config) {
+    var _a, _b;
+    let appPkg = await importJson("./package.json", true);
+    let { appframe } = appPkg;
+    config.build = (_a = config.build) !== null && _a !== void 0 ? _a : {};
+    config.build = {
+        ...config.build,
+        manifest: true,
+        sourcemap: true,
+        cssCodeSplit: false,
+    };
+    config.plugins = (_b = config.plugins) !== null && _b !== void 0 ? _b : [];
+    if (appframe.build.externals !== false) {
+        config.plugins.push(viteExternalsPlugin({
+            react: "React",
+            "react-dom": "ReactDOM",
+        }));
+    }
+    config.plugins.push(visualizer({ filename: "./dist/stats.html", gzipSize: true }));
+    config.build.rollupOptions = {
+        output: {
+            globals: appframe.build.externals !== false
+                ? {
+                    react: "React",
+                    "react-dom": "ReactDOM",
+                    "react-dom/client": "ReactDOM",
+                }
+                : {},
+            entryFileNames: (info) => {
+                return `file/article/script/${appframe.article.id}/main.[hash].min.js`;
+            },
+            chunkFileNames: (chunkInfo) => {
+                let { name } = chunkInfo;
+                if (name === "main") {
+                    return `file/article/script/${appframe.article.id}/[name].[hash].min.js`;
+                }
+                return `file/article/script/${appframe.article.id}/[name].[hash].chunk.min.js`;
+            },
+        },
+    };
+    return config;
+}

package/lib/devServer.d.ts

@@ -0,0 +1,5 @@
+import { Application } from "express";
+import { ViteDevServer } from "vite";
+export declare function addProxyRoutes(app: Application): Promise<void>;
+export declare function addAppframeDevRoutes(app: Application, vite: ViteDevServer): Promise<void>;
+export declare function startDevServer(app: Application): Promise<void>;

package/lib/devServer.js

@@ -0,0 +1,99 @@
+import dotenv from "dotenv";
+import fs from "node:fs/promises";
+import path from "node:path";
+import open from "open";
+import tcpPortUsed from "tcp-port-used";
+import { Client } from "@olenbetong/data-object";
+import { importJson } from "./importJson.js";
+import { createAppframeProxy } from "./proxy.js";
+dotenv.config();
+let appPkg = await importJson("./package.json");
+let { appframe } = appPkg;
+let userSession = null;
+async function getUserSession(hostname, username, password) {
+    if (userSession) {
+        return userSession;
+    }
+    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;
+}
+export async function addProxyRoutes(app) {
+    var _a, _b, _c, _d, _e;
+    const hostname = (_d = (_b = (_a = appframe.proxy) === null || _a === void 0 ? void 0 : _a.hostname) !== null && _b !== void 0 ? _b : (_c = appframe.deploy) === null || _c === void 0 ? void 0 : _c.hostname) !== null && _d !== void 0 ? _d : "dev.obet.no";
+    const { APPFRAME_LOGIN: username, APPFRAME_PWD: password } = process.env;
+    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.");
+    }
+    const proxy = await createAppframeProxy({ hostname, username, password });
+    const proxyRoutes = [
+        "/api/*",
+        "/file/*",
+        "/filestore/*",
+        "/static/dbimages*",
+        "/static/images*",
+        "/destroy/*",
+        "/create/*",
+        "/update/*",
+        "/retrieve/*",
+        "/exec/*",
+        "/report/*",
+        "/rowcount/*",
+        "/lib/*"
+    ];
+    if ((_e = appframe.proxy) === null || _e === void 0 ? void 0 : _e.routes) {
+        proxyRoutes.push(...appframe.proxy.routes);
+    }
+    proxyRoutes.forEach(route => {
+        app.use(route, proxy);
+    });
+}
+export async function addAppframeDevRoutes(app, vite) {
+    var _a, _b, _c, _d;
+    const hostname = (_d = (_b = (_a = appframe.proxy) === null || _a === void 0 ? void 0 : _a.hostname) !== null && _b !== void 0 ? _b : (_c = appframe.deploy) === null || _c === void 0 ? void 0 : _c.hostname) !== null && _d !== void 0 ? _d : "dev.obet.no";
+    const { APPFRAME_LOGIN: username, APPFRAME_PWD: password } = process.env;
+    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.");
+    }
+    app.use("*", async (req, res, next) => {
+        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 userSession = await getUserSession(hostname, username, password);
+            let html = template
+                .replace("<!-- {Appframe} -->", `<script>
+af = globalThis.af ?? {};
+af.userSession = ${JSON.stringify(userSession)};
+</script>
+<script src="/file/article/static-script/${appframe.article.id}.js"></script>`)
+                .replace(`<!-- {Theme} -->`, `<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" />`);
+            res.status(200).set({ "Content-Type": "text/html" }).end(html);
+        }
+        catch (error) {
+            vite.ssrFixStacktrace(error);
+            next(error);
+        }
+    });
+}
+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/importJson.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Node.js doesn't support JSON imports yet, so this is a simple
+ * function that reads a JSON file from disk and returns the parsed
+ * content.
+ */
+export declare function importJson(url: any, useCwd?: boolean): Promise<any>;

package/lib/importJson.js

@@ -0,0 +1,10 @@
+import fs from "node:fs/promises";
+/**
+ * Node.js doesn't support JSON imports yet, so this is a simple
+ * function that reads a JSON file from disk and returns the parsed
+ * content.
+ */
+export async function importJson(url, useCwd = false) {
+    let completeUrl = new URL(url, useCwd ? `file://${process.cwd()}/` : import.meta.url);
+    return JSON.parse(await fs.readFile(completeUrl, "utf-8"));
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./build.js";
+export * from "./devServer.js";

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from "./build.js";
+export * from "./devServer.js";

package/lib/proxy.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="qs" />
+/// <reference types="express" />
+export declare function login(hostname: string, username: string, password: string): Promise<Record<string, string>>;
+export declare 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 declare function createAppframeProxy(options: createProxyOptions): Promise<import("express").RequestHandler<import("express-serve-static-core").ParamsDictionary, any, any, import("qs").ParsedQs, Record<string, any>>>;

package/lib/proxy.js

@@ -0,0 +1,89 @@
+import expressProxy from "express-http-proxy";
+import https from "node:https";
+const lastLogin = new Map();
+let currentLogin = null;
+export async function login(hostname, username, password) {
+    if (currentLogin) {
+        return await currentLogin;
+    }
+    let loginPromise = new Promise((resolve, reject) => {
+        if (lastLogin.has(hostname)) {
+            let { timestamp, authCookies } = lastLogin.get(hostname);
+            if (Date.now() - timestamp < 1000 * 60 * 15) {
+                resolve(authCookies);
+                return;
+            }
+            else {
+                console.log("Renewing authentication cookies...");
+                lastLogin.delete(hostname);
+            }
+        }
+        let data = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&remember=true&RequireTwoFactor=0`;
+        let options = {
+            hostname,
+            port: 443,
+            path: "/login",
+            method: "POST",
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/x-www-form-urlencoded",
+                "Content-Length": data.length
+            }
+        };
+        console.log("Authenticating...");
+        let request = https.request(options, response => {
+            var _a, _b;
+            let status = (_a = response.statusCode) !== null && _a !== void 0 ? _a : 600;
+            if (status < 400) {
+                let cookies = (_b = response.headers["set-cookie"]) !== null && _b !== void 0 ? _b : [];
+                let cookieObj = {};
+                for (let cookie of cookies) {
+                    let [keyValue] = cookie.split(";");
+                    let [key, value] = keyValue.split("=");
+                    if (["AppframeWebSession", "AppframeWebAuth"].includes(key)) {
+                        cookieObj[key] = value;
+                    }
+                }
+                console.log("Authentication successfull.");
+                lastLogin.set(hostname, {
+                    timestamp: Date.now(),
+                    authCookies: cookieObj
+                });
+                resolve(cookieObj);
+            }
+            else {
+                reject(Error(`Authentication failed: ${response.statusCode} ${response.statusMessage}`));
+            }
+        });
+        request.write(data);
+        request.end();
+    });
+    currentLogin = loginPromise;
+    let result = await loginPromise;
+    currentLogin = null;
+    return result;
+}
+export async function createAppframeProxy(options) {
+    const { autoLogin = true, hostname, password, protocol = "https", username } = options;
+    const proxy = expressProxy(`${protocol}://${hostname}`, {
+        proxyReqOptDecorator: async function (proxyReqOpts) {
+            var _a, _b;
+            if (!((_a = proxyReqOpts.path) === null || _a === void 0 ? void 0 : _a.startsWith("/login"))) {
+                let authCookies = await login(hostname, username, password);
+                let cookies = [];
+                cookies.push(`AppframeWebAuth=${authCookies["AppframeWebAuth"]}`);
+                cookies.push(`AppframeWebSession=${authCookies["AppframeWebSession"]}`);
+                proxyReqOpts.headers = (_b = proxyReqOpts.headers) !== null && _b !== void 0 ? _b : {};
+                proxyReqOpts.headers["cookie"] = cookies.join(";");
+            }
+            return proxyReqOpts;
+        },
+        proxyReqPathResolver: function (req) {
+            return req.originalUrl;
+        }
+    });
+    if (autoLogin) {
+        await login(hostname, username, password);
+    }
+    return proxy;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@olenbetong/appframe-vite",
+  "version": "1.0.0-alpha.0",
+  "description": "Tools to use and deploy Vite applications to Appframe",
+  "main": "./lib/index.js",
+  "type": "module",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    "default": "./lib/index.js"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "prepack": "npm run build:tsc",
+    "build": "npm run build:tsc",
+    "build:tsc": "rm -rf ./lib && tsc"
+  },
+  "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
+  "license": "MIT",
+  "dependencies": {
+    "dotenv": "^16.0.1",
+    "rollup-plugin-visualizer": "^5.6.0",
+    "vite-plugin-externals": "^0.5.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "express": "^4.18.1",
+    "vite": "^2.9.9"
+  },
+  "optionalDependencies": {
+    "@olenbetong/data-object": "^1.0.0-alpha.65",
+    "@types/express": "^4.17.13",
+    "@types/express-http-proxy": "^1.6.3",
+    "@types/tcp-port-used": "^1.0.1",
+    "express-http-proxy": "^1.6.3",
+    "open": "^8.4.0",
+    "tcp-port-used": "^1.0.2"
+  }
+}