@olenbetong/appframe-vite 5.1.34 → 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/devServer.js

@@ -36,6 +36,7 @@ export function getProxyRoutes() {
         "^/lib/.*",
         "^/login",
         "^/logout",
+        "^/media/.*",
     ];
     if (appframe.proxy?.routes) {
         proxyRoutes.push(...appframe.proxy.routes);

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-vite",
-  "version": "5.1.34",
+  "version": "5.1.35",
   "description": "Tools to use and deploy Vite applications to Appframe",
   "main": "./lib/index.js",
   "type": "module",
@@ -29,7 +29,7 @@
     "jsdom": "^26.1.0",
     "rollup-plugin-visualizer": "^5.14.0",
     "vite-plugin-externals": "^0.6.2",
-    "@olenbetong/appframe-data": "1.1.0"
+    "@olenbetong/appframe-data": "1.1.1"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",