@olenbetong/appframe-vite 6.1.2 → 6.3.0

package/lib/devtoolsServer.js

@@ -0,0 +1,240 @@
+import { createReadStream, existsSync, rmSync } from "node:fs";
+import https from "node:https";
+import { createRequire } from "node:module";
+import { dirname, extname, join } from "node:path";
+import bodyParser from "body-parser";
+import { login } from "./proxy.js";
+import { readResourcesConfig, writeResourcesConfig } from "./resourcesConfig.js";
+const require = createRequire(import.meta.url);
+const ALL_SERVERS = ["dev.obet.no", "stage.obet.no", "test.obet.no"];
+const MIME_TYPES = {
+    ".html": "text/html; charset=utf-8",
+    ".js": "application/javascript; charset=utf-8",
+    ".css": "text/css; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
+    ".svg": "image/svg+xml",
+    ".png": "image/png",
+    ".ico": "image/x-icon",
+    ".woff2": "font/woff2",
+    ".woff": "font/woff",
+};
+function getDevtoolsDist() {
+    try {
+        const pkgPath = require.resolve("@olenbetong/appframe-devtools/package.json");
+        return join(dirname(pkgPath), "dist");
+    }
+    catch {
+        return null;
+    }
+}
+function sendJson(res, status, data) {
+    const body = status === 204 ? "" : JSON.stringify(data);
+    res.statusCode = status;
+    res.setHeader("Content-Type", "application/json; charset=utf-8");
+    res.end(body);
+}
+async function addResourceOnServer(hostname, cookies, dbObjectId, name) {
+    const cookieStr = Object.entries(cookies)
+        .map(([k, v]) => `${k}=${v}`)
+        .join("; ");
+    // Name is required by the server; fall back to the DBObjectID itself
+    const body = JSON.stringify({
+        operation: "create",
+        resourceName: "API_Resources",
+        // fields + excludeFieldNames match the format generateApiDataHandler sends, which the server requires
+        fields: ["PrimKey", "Created", "CreatedBy", "Updated", "UpdatedBy", "CUT", "CDL", "DBObjectID", "Name"],
+        excludeFieldNames: true,
+        DBObjectID: dbObjectId,
+        Name: name ?? dbObjectId,
+    });
+    return new Promise((resolve) => {
+        const req = https.request({
+            hostname,
+            port: 443,
+            path: "/api/data",
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+                Cookie: cookieStr,
+                Origin: `https://${hostname}`,
+                "Content-Length": Buffer.byteLength(body),
+            },
+        }, (incoming) => {
+            let raw = "";
+            incoming.on("data", (chunk) => {
+                raw += chunk;
+            });
+            incoming.on("end", () => {
+                try {
+                    const json = JSON.parse(raw);
+                    if (json.error) {
+                        resolve({ hostname, success: false, error: json.error });
+                    }
+                    else {
+                        resolve({ hostname, success: true });
+                    }
+                }
+                catch {
+                    const ok = (incoming.statusCode ?? 0) < 400;
+                    resolve({ hostname, success: ok, error: ok ? undefined : raw.slice(0, 200) });
+                }
+            });
+        });
+        req.on("error", (err) => resolve({ hostname, success: false, error: err.message }));
+        req.write(body);
+        req.end();
+    });
+}
+async function handleApi(req, res, apiPath, hostname, next) {
+    // apiPath is the path after /__appframe_devtools__/api
+    // e.g. /config, /resources or /resources/dsMyObject
+    const segments = apiPath
+        .replace(/^\/resources/, "")
+        .split("/")
+        .filter(Boolean);
+    const method = req.method?.toUpperCase() ?? "GET";
+    if (apiPath === "/config" && method === "GET") {
+        return sendJson(res, 200, { hostname });
+    }
+    // Only handle /resources and /resources/:id
+    if (!apiPath.startsWith("/resources") && apiPath !== "/catalog") {
+        return next();
+    }
+    const id = segments[0]; // undefined for collection-level routes
+    try {
+        if (apiPath === "/catalog" && method === "POST") {
+            const { dbObjectId, name } = req.body;
+            if (!dbObjectId) {
+                return sendJson(res, 400, { error: "dbObjectId is required" });
+            }
+            const username = process.env.APPFRAME_LOGIN ?? "";
+            const password = process.env.APPFRAME_PWD ?? "";
+            if (!username || !password) {
+                return sendJson(res, 500, { error: "APPFRAME_LOGIN and APPFRAME_PWD environment variables must be set" });
+            }
+            const settled = await Promise.allSettled(ALL_SERVERS.map(async (server) => {
+                const cookies = await login(server, username, password, { silent: true });
+                return addResourceOnServer(server, cookies, dbObjectId, name);
+            }));
+            const results = settled.map((r, i) => r.status === "fulfilled"
+                ? r.value
+                : { hostname: ALL_SERVERS[i], success: false, error: String(r.reason) });
+            return sendJson(res, 200, { results });
+        }
+        if (method === "GET" && !id) {
+            const config = await readResourcesConfig();
+            return sendJson(res, 200, config);
+        }
+        if (method === "POST" && !id) {
+            const { type, ...entry } = req.body;
+            const config = await readResourcesConfig();
+            if (type === "procedure") {
+                config.procedures = [...(config.procedures ?? []), entry];
+            }
+            else {
+                config.dataObjects = [...(config.dataObjects ?? []), entry];
+            }
+            await writeResourcesConfig(config);
+            return sendJson(res, 201, entry);
+        }
+        if (method === "PUT" && id) {
+            const updates = req.body;
+            const config = await readResourcesConfig();
+            let found = false;
+            for (const list of [config.dataObjects ?? [], config.procedures ?? []]) {
+                const idx = list.findIndex((e) => e.id === id);
+                if (idx !== -1) {
+                    list[idx] = { ...list[idx], ...updates };
+                    found = true;
+                    break;
+                }
+            }
+            if (!found) {
+                return sendJson(res, 404, { error: `Resource '${id}' not found` });
+            }
+            await writeResourcesConfig(config);
+            return sendJson(res, 200, { id, ...updates });
+        }
+        if (method === "DELETE" && id) {
+            const config = await readResourcesConfig();
+            let found = false;
+            let outputPath;
+            for (const key of ["dataObjects", "procedures"]) {
+                const list = config[key] ?? [];
+                const idx = list.findIndex((e) => e.id === id);
+                if (idx !== -1) {
+                    outputPath = list[idx].output;
+                    list.splice(idx, 1);
+                    found = true;
+                    break;
+                }
+            }
+            if (!found) {
+                return sendJson(res, 404, { error: `Resource '${id}' not found` });
+            }
+            await writeResourcesConfig(config);
+            if (outputPath) {
+                try {
+                    rmSync(outputPath, { force: true });
+                }
+                catch {
+                    // non-fatal — file may not exist yet
+                }
+            }
+            return sendJson(res, 204, null);
+        }
+        return next();
+    }
+    catch (err) {
+        return sendJson(res, 500, { error: err instanceof Error ? err.message : String(err) });
+    }
+}
+/**
+ * Creates a Connect middleware that:
+ * 1. Serves the appframe-devtools static SPA at `/__appframe_devtools__/`
+ * 2. Exposes a REST API at `/__appframe_devtools__/api/resources` for resources.yaml CRUD
+ */
+export function createDevtoolsMiddleware(hostname) {
+    const jsonParser = bodyParser.json();
+    const devtoolsDist = getDevtoolsDist();
+    return (req, res, next) => {
+        // req.url here is the path after /__appframe_devtools__ (Connect strips the prefix)
+        const url = req.url ?? "/";
+        // REST API
+        if (url.startsWith("/api/")) {
+            jsonParser(req, res, () => {
+                handleApi(req, res, url.slice(4), hostname, next).catch(next);
+            });
+            return;
+        }
+        // Static files
+        if (!devtoolsDist) {
+            res.statusCode = 503;
+            res.setHeader("Content-Type", "text/plain");
+            res.end("@olenbetong/appframe-devtools not found or not built.\n" +
+                "Run: pnpm --filter @olenbetong/appframe-devtools build");
+            return;
+        }
+        const safePath = url.split("?")[0] || "/";
+        const filePath = join(devtoolsDist, safePath === "/" ? "index.html" : safePath);
+        if (existsSync(filePath)) {
+            const mime = MIME_TYPES[extname(filePath)] ?? "application/octet-stream";
+            res.setHeader("Content-Type", mime);
+            createReadStream(filePath).pipe(res);
+        }
+        else {
+            // SPA fallback - all unknown paths serve index.html
+            const indexPath = join(devtoolsDist, "index.html");
+            if (existsSync(indexPath)) {
+                res.setHeader("Content-Type", "text/html; charset=utf-8");
+                createReadStream(indexPath).pipe(res);
+            }
+            else {
+                res.statusCode = 404;
+                res.setHeader("Content-Type", "text/plain");
+                res.end("DevTools app not built yet.\n" + "Run: pnpm --filter @olenbetong/appframe-devtools build");
+            }
+        }
+    };
+}

package/lib/index.d.ts

@@ -1,5 +1,15 @@
 import type { Plugin } from "vite";
 import { addAppframeBuildConfig } from "./build.js";
 import { createDevMiddleware } from "./devServer.js";
-export default function appframe(): Plugin;
+export interface AppframePluginOptions {
+    /**
+     * Whether to automatically generate TypeScript types from the Appframe article
+     * when the dev server starts. Set to `false` to skip type generation (e.g. when
+     * running Storybook or another tool that doesn't have an article context).
+     *
+     * @default true
+     */
+    generateTypes?: boolean;
+}
+export default function appframe(options?: AppframePluginOptions): Plugin;
 export { addAppframeBuildConfig, createDevMiddleware };

package/lib/index.js

@@ -1,16 +1,22 @@
+import { resolve } from "node:path";
 import bodyParser from "body-parser";
 import { watch } from "chokidar";
 import { addAppframeBuildConfig } from "./build.js";
+import { generateFromConfig } from "./cli-resources-generate.js";
 import { createDevMiddleware, getLoginInfo, getProxyRoutes } from "./devServer.js";
+import { createDevtoolsMiddleware } from "./devtoolsServer.js";
 import { runGenerateTypes } from "./generateTypes.js";
 import { localizeMiddleware } from "./localization.js";
 import { checkSession, getLastSession, login } from "./proxy.js";
+import { RESOURCES_CONFIG_FILE } from "./resourcesConfig.js";
 import { createLogMessage, getServerName } from "./utils.js";
 let command = "build";
 let interval;
 let server;
 let lastHostname;
 let watcher;
+let resourcesWatcher = null;
+let resourcesDebounce = null;
 try {
     let appPkgUrl = `file://${process.cwd()}/package.json`;
     watcher = watch(appPkgUrl).on("all", async () => {
@@ -26,7 +32,8 @@ catch (error) {
     console.log(createLogMessage(`failed to watch package.json: ${error.message}`, { type: "warn" }));
 }
 const jsonParser = bodyParser.json();
-export default function appframe() {
+export default function appframe(options = {}) {
+    let { generateTypes = true } = options;
     return {
         name: "appframe",
         resolveId(source) {
@@ -138,7 +145,33 @@ export default function appframe() {
             let { appframe, hostname, username, password } = await getLoginInfo();
             server = _server;
             // Run type generation in the background — doesn't block the dev server from starting.
-            runGenerateTypes(hostname, username, password, appframe, _server.config.logger);
+            if (generateTypes) {
+                runGenerateTypes(hostname, username, password, appframe, _server.config.logger);
+            }
+            // Watch resources.yaml and regenerate on change
+            let resourcesConfigPath = resolve(process.cwd(), RESOURCES_CONFIG_FILE);
+            if (resourcesWatcher) {
+                await resourcesWatcher.close();
+            }
+            resourcesWatcher = watch(resourcesConfigPath, { ignoreInitial: true }).on("all", () => {
+                if (resourcesDebounce)
+                    clearTimeout(resourcesDebounce);
+                resourcesDebounce = setTimeout(async () => {
+                    _server.config.logger.info(createLogMessage("resources.yaml changed — regenerating…", { source: hostname }));
+                    try {
+                        await generateFromConfig();
+                        _server.config.logger.info(createLogMessage("resources regenerated", { source: hostname }));
+                    }
+                    catch (error) {
+                        _server.config.logger.error(createLogMessage(`resources regeneration failed: ${error?.message ?? error}`, {
+                            source: hostname,
+                            type: "error",
+                        }));
+                    }
+                }, 300);
+            });
+            // DevTools panel: serve the devtools app + REST API at /__appframe_devtools__/
+            _server.middlewares.use("/__appframe_devtools__", createDevtoolsMiddleware(hostname));
             _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);
@@ -155,6 +188,21 @@ export default function appframe() {
                 _server.middlewares.use(createDevMiddleware(_server));
             };
         },
+        transformIndexHtml(_html, ctx) {
+            // Only inject the toolbar in dev mode
+            if (command !== "serve")
+                return;
+            // Only inject for article pages (not the devtools app itself)
+            if (ctx.originalUrl?.startsWith("/__appframe_devtools__"))
+                return;
+            return [
+                {
+                    tag: "script",
+                    attrs: { src: "/__appframe_devtools__/toolbar.js", defer: true },
+                    injectTo: "body",
+                },
+            ];
+        },
     };
 }
 export { addAppframeBuildConfig, createDevMiddleware };

package/lib/resourceGenerate.d.ts

@@ -0,0 +1,63 @@
+import type { Client } from "@olenbetong/appframe-data";
+/**
+ * Format a file with Biome if available. Searches for `biome` in the nearest
+ * node_modules/.bin up from cwd, then falls back to the global PATH.
+ * Silently skips if Biome is not found or formatting fails.
+ */
+export declare function formatWithBiome(filePath: string): Promise<void>;
+export type CLIOptions = {
+    server: string;
+    types?: boolean;
+    global: boolean;
+    id: string;
+    fields: string | boolean;
+    permissions?: string;
+    maxRecords?: string;
+    sortOrder?: string;
+    master?: string;
+    linkFields?: string;
+    expose?: string | boolean;
+    dynamic: boolean;
+    unique?: string;
+    overrides?: string;
+    distinct?: boolean;
+    aggregates?: string;
+    groupBy?: string;
+    where?: string;
+    output?: string;
+    typesJsonParamOverrides?: Record<string, string>;
+    typesJsonReturnType?: string | null;
+};
+/**
+ * Serialize the generation options to a `/* af:config ... *\/` YAML comment block.
+ * List-type options (fields, sortOrder, etc.) are emitted as proper YAML lists.
+ */
+export declare function buildYamlConfig(resource: string, options: CLIOptions): string;
+/**
+ * Find and parse the `/* af:config ... *\/` block from generated file content.
+ * Returns `{ resource, options }` or `null` if no block is found.
+ */
+export declare function parseYamlConfig(fileContent: string): {
+    resource: string;
+    options: CLIOptions;
+} | null;
+/**
+ * Compute the relative import specifier for "custom" from the given output file.
+ * Returns a POSIX-style path (e.g. "../custom" or "./custom").
+ */
+export declare function getCustomImportPath(outputPath: string): string;
+export declare function getProcedureDefinition(name: string, procDefinition: any, options: CLIOptions): string;
+export declare function getDataObjectDefinition(name: string, viewDefinition: any, options: CLIOptions): string;
+/**
+ * Fetch the resource definition from an authenticated Appframe client.
+ */
+export declare function fetchResourceDefinition(client: Client, resourceName: string): Promise<any>;
+/**
+ * Fetch the resource definition from the server, read types.json overrides, and
+ * return the generated TypeScript content string (without any header comment).
+ *
+ * @param resourceName - Pre-resolved resource database object ID (e.g. `aviw_QA_Documents`)
+ * @param options - Generation options
+ * @param client - Authenticated Appframe client
+ */
+export declare function fetchAndGenerate(resourceName: string, options: CLIOptions, client: Client): Promise<string>;