@olenbetong/appframe-vite 5.1.33 → 5.1.35

package/README.md

@@ -0,0 +1,91 @@
+# @olenbetong/appframe-vite
+
+Tools to develop and build Vite applications that run inside Appframe articles.
+
+- Provides a Vite plugin you add in `vite.config.*`.
+- Proxies API and static routes to an Appframe server during `pnpm start`.
+- Logs in automatically and refreshes the session on an interval.
+- Serves real article HTML from Appframe in dev, but swaps production assets for your local entry.
+- Caches i18n strings locally to speed up development loads.
+- Shapes production builds to Appframe paths and filenames, with optional React externals.
+
+## Installation
+
+```sh
+pnpm add -D @olenbetong/appframe-vite
+```
+
+## Usage (Vite)
+
+```ts
+// vite.config.mjs or vite.config.ts
+import appframe from "@olenbetong/appframe-vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [appframe()],
+});
+```
+
+Then run your app:
+
+```sh
+pnpm --filter <app> start
+```
+
+Make sure your Appframe credentials are available as environment variables:
+
+- `APPFRAME_LOGIN`: username
+- `APPFRAME_PWD`: password
+
+On first run, the plugin logs in, configures Vite’s proxy for Appframe routes, and serves the article HTML with your local entry injected.
+
+## Project configuration (package.json)
+
+This package reads `package.json.appframe` to know what to proxy and how to build.
+
+```jsonc
+{
+	"appframe": {
+		"article": {
+			"id": "my-article",            // Required
+			"altNames": ["my-article-dev"]   // Optional: alternate root paths
+		},
+		"deploy": { "hostname": "dev.obet.no" }, // Default server if proxy not set
+		"proxy": {
+			"hostname": "dev.obet.no",       // Optional override for dev proxy
+			"routes": ["^/custom/.*"]         // Optional: extra proxied routes
+		},
+		"build": {
+			"externals": true                // Map React and ReactDOM to globals
+		}
+	}
+}
+```
+
+## What it does (at a glance)
+
+- Dev server
+	- Proxies Appframe routes (e.g. `/api`, `/file`, `/lib`, etc.) to the configured hostname.
+	- Performs an initial login and refreshes the session every 5 minutes to prevent 403 errors.
+	- Serves the real article HTML from Appframe, but removes production assets and injects your local entry (`/src/index.*`).
+	- Caches localized strings under `node_modules/.appframe/localizeCache.json` and injects them into the page to avoid many small HTTP 1.1 requests.
+- Build
+	- Enables `manifest` and `sourcemap`.
+	- Writes filenames to Appframe paths, using the article ID, e.g.:
+		- `file/article/script/<ARTICLE_ID>/main.[hash].min.js`
+		- `file/article/style/<ARTICLE_ID>/style.[hash].min.css`
+	- Optionally treats `react` and `react-dom` as externals and maps them to `React` and `ReactDOM` globals.
+	- Adds a Rollup visualizer report at `dist/stats.html`.
+- Resolve
+	- Adds the alias `~/` to `/src/` so imports like `~/components/Button` resolve to `src/components/Button`.
+
+## Exported helpers
+
+Although most users only need the default plugin, the package also exports:
+
+- `addAppframeBuildConfig(config)`: applies the Appframe build defaults (paths, externals, visualizer).
+- `createDevMiddleware(server)`: serves transformed article HTML and injects cached i18n strings.
+
+See `docs/reference/appframe-vite/` for a deeper dive into internals and configuration.
+

package/lib/build.js

@@ -28,6 +28,7 @@ export async function addAppframeBuildConfig(config) {
     }
     config.build.rollupOptions = {
         input: entry,
+        // Cast visualizer plugin to any to avoid Rollup type version clashes
         plugins: [visualizer({ filename: "./dist/stats.html", gzipSize: true })],
         output: {
             globals: appframe.build.externals !== false

package/lib/devServer.js

@@ -36,6 +36,7 @@ export function getProxyRoutes() {
         "^/lib/.*",
         "^/login",
         "^/logout",
+        "^/media/.*",
     ];
     if (appframe.proxy?.routes) {
         proxyRoutes.push(...appframe.proxy.routes);
@@ -128,7 +129,7 @@ async function getArticleHtml() {
     let { hostname, username, password } = await getLoginInfo();
     let article = appframe.article?.id;
     let client = new Client(hostname);
-    let re = await client.login(username, password);
+    await client.login(username, password);
     let response = await client.fetch(`/${article}`, {
         timeout: 30_000,
         method: "GET",

package/lib/importJson.d.ts

@@ -3,4 +3,4 @@
  * function that reads a JSON file from disk and returns the parsed
  * content.
  */
-export declare function importJson(url: any, useCwd?: boolean): Promise<any>;
+export declare function importJson(url: string, useCwd?: boolean): Promise<any>;

package/lib/index.js

@@ -5,6 +5,22 @@ import { createDevMiddleware, getLoginInfo, getProxyRoutes } from "./devServer.j
 import { importJson } from "./importJson.js";
 import { localizeMiddleware } from "./localization.js";
 import { getLastSession, login } from "./proxy.js";
+// type AppframeDevConfig = {
+// 	article: {
+// 		id: string;
+// 		hostname: string;
+// 	};
+// 	deploy: {
+// 		hostname: string;
+// 	};
+// 	build: {
+// 		externals: true;
+// 	};
+// 	proxy?: {
+// 		hostname?: string;
+// 		routes?: string[];
+// 	};
+// };
 let interval;
 let server;
 let lastHostname;
@@ -79,8 +95,8 @@ export default function appframe() {
                     proxy[route] = {
                         target: `https://${hostname}`,
                         changeOrigin: true,
-                        configure(proxy, options) {
-                            proxy.on("proxyReq", (proxyReq, req, res, options) => {
+                        configure(proxy) {
+                            proxy.on("proxyReq", (proxyReq) => {
                                 let authCookies = getLastSession(hostname)?.authCookies;
                                 if (authCookies) {
                                     let cookies = [];
@@ -109,9 +125,9 @@ export default function appframe() {
             _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
+                // @ts-expect-error
                 if (req.body?.error) {
-                    // @ts-ignore
+                    // @ts-expect-error
                     console.log("[Client error]", req.body?.error);
                 }
                 res.statusCode = 200;

package/lib/proxy.d.ts

@@ -3,6 +3,6 @@ type LoginCacheEntry = {
     timestamp: number;
     authCookies: CookieObject;
 };
-export declare function getLastSession(hostname: any): LoginCacheEntry | undefined;
+export declare function getLastSession(hostname: string): LoginCacheEntry | undefined;
 export declare function login(hostname: string, username: string, password: string): Promise<CookieObject>;
 export {};

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@olenbetong/appframe-vite",
-  "version": "5.1.33",
+  "version": "5.1.35",
   "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"
+    "default": "./lib/index.js",
+    "./proxy": {
+      "import": "./lib/proxy.js",
+      "types": "./lib/proxy.d.ts"
+    }
   },
   "files": [
     "lib"
@@ -25,7 +29,7 @@
     "jsdom": "^26.1.0",
     "rollup-plugin-visualizer": "^5.14.0",
     "vite-plugin-externals": "^0.6.2",
-    "@olenbetong/appframe-data": "1.0.14"
+    "@olenbetong/appframe-data": "1.1.1"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
@@ -42,5 +46,8 @@
     "tcp-port-used": "^1.0.2"
   },
   "gitHead": "ef3839cfde6097aa12488f72913680b3ce22706e",
-  "scripts": {}
+  "scripts": {
+    "build": "pnpm run build:tsc",
+    "build:tsc": "rm -rf ./lib tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json"
+  }
 }