@olenbetong/appframe-vite 6.5.0 → 6.7.0

package/README.md

@@ -40,6 +40,17 @@ Make sure your Appframe credentials are available as environment variables:
 
 On first run, the plugin logs in, configures Vite’s proxy for Appframe routes, and serves the article HTML with your local entry injected.
 
+### MUI X license key
+
+The plugin injects the MUI X Pro license key into the bundle as the global `__MUI_X_LICENSE_KEY__`, for both `serve` and `build`. `@olenbetong/appframe-ds/grid` reads it and registers the license itself, so an app using the Designsystemet `AfGrid` does not need its own `LicenseInfo.setLicenseKey()` call.
+
+The key is resolved from, in order:
+
+1. the `MUI_X_LICENSE_KEY` environment variable (CI, a local `.env`, or the shell),
+2. the `MUI_X_LICENSE_KEY` constant declared in the app's `src/shared/licenses.ts`.
+
+The fallback keeps existing apps working with no changes; setting the environment variable is the forward path for getting the key out of the repository.
+
 ## Project configuration (package.json)
 
 This package reads `package.json.appframe` to know what to proxy and how to build.
@@ -48,37 +59,37 @@ This package reads `package.json.appframe` to know what to proxy and how to buil
 {
 	"appframe": {
 		"article": {
-			"id": "my-article",            // Required
-			"altNames": ["my-article-dev"]   // Optional: alternate root paths
+			"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
+			"hostname": "dev.obet.no", // Optional override for dev proxy
+			"routes": ["^/custom/.*"], // Optional: extra proxied routes
 		},
 		"build": {
-			"externals": true                // Map React and ReactDOM to globals
-		}
-	}
+			"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.
+  - 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`.
+  - 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`.
+  - Adds the alias `~/` to `/src/` so imports like `~/components/Button` resolve to `src/components/Button`.
 
 ## CLI — `appframe-vite`
 
@@ -120,6 +131,34 @@ appframe-vite resources edit dsAccountGroups
 appframe-vite resources edit
 ```
 
+### `resources migrate [id]`
+
+Migrates data objects and procedures that are configured on the article in the appdesigner over to `resources.yaml`. The article's data sources and their fields are read from the CMS, converted to `resources.yaml` entries, and the output files are generated.
+
+Each migrated view/procedure is also registered as a Data API resource if needed (the same thing `af resources add` does), because `af.data.generateApiDataObject` and `af.ProcedureAPI` go through `/api/data` instead of the article's data sources.
+
+```sh
+# migrate everything on the article
+appframe-vite resources migrate
+# migrate a single data object or procedure
+appframe-vite resources migrate dsVouchers
+# preview without changing anything
+appframe-vite resources migrate --dry-run
+```
+
+Options:
+
+| Option                   | Description                                                    |
+| ------------------------ | -------------------------------------------------------------- |
+| `-c, --config <path>`    | Path to the resources config file (default: `resources.yaml`)  |
+| `-o, --output-dir <dir>` | Directory for the generated files (default: `src/data`)        |
+| `--dry-run`              | Show what would be migrated without writing anything           |
+| `--no-generate`          | Only update `resources.yaml`, do not generate the output files |
+
+Existing `resources.yaml` entries with the same id are updated in place. Field aliases have no `resources.yaml` equivalent and are reported as warnings.
+
+After migrating, import the generated files from your app, remove the data objects and procedures from the article in the appdesigner, and run `pnpm generate-types`.
+
 ## `resources.yaml` config file
 
 Place `resources.yaml` at the project root to declare all data objects and procedures for an app. The Vite dev server watches this file and auto-regenerates all output files when it changes.
@@ -169,27 +208,27 @@ procedures:
 
 **Supported fields per entry:**
 
-| Field | Type | Description |
-|---|---|---|
-| `id` | `string` | Variable name used in generated code (e.g. `dsAccountGroups`) |
-| `resource` | `string` | Database object ID (e.g. `atbv_Accounting_SubsidiaryLedgerGroups`) |
-| `output` | `string` | Output file path relative to project root |
-| `global` | `boolean` | Use `af.data.generateApiDataObject` / `new af.ProcedureAPI` globals |
-| `types` | `boolean` | Emit TypeScript type definitions |
-| `permissions` | `string` | Permissions: I = insert, U = update, D = delete (e.g. `IUD`) |
-| `maxRecords` | `number` | Max records to fetch (default `50`; `-1` for all) |
-| `sortOrder` | `string \| string[]` | Sort order, e.g. `Created:Desc` or `[Created:Desc, Name]` |
-| `master` | `string` | Master data object name (or `name:importPath`) |
-| `linkFields` | `string \| string[]` | Fields linking child to master |
-| `expose` | `boolean \| string` | Expose on `af.article.dataObjects` / `af.article.procedures` |
-| `dynamic` | `boolean` | Enable dynamic loading |
-| `unique` | `string` | Unique table name for update/delete |
-| `overrides` | `string \| string[]` | Type overrides, e.g. `MyField:string[]` |
-| `distinct` | `boolean` | Fetch distinct rows |
-| `aggregates` | `string \| string[]` | Aggregate bindings, e.g. `Qty:SUM` |
-| `groupBy` | `string \| string[]` | Group-by fields |
-| `where` | `string` | Initial where clause |
-| `fields` | `string \| string[]` | Fields to include (all if omitted) |
+| Field         | Type                 | Description                                                         |
+| ------------- | -------------------- | ------------------------------------------------------------------- |
+| `id`          | `string`             | Variable name used in generated code (e.g. `dsAccountGroups`)       |
+| `resource`    | `string`             | Database object ID (e.g. `atbv_Accounting_SubsidiaryLedgerGroups`)  |
+| `output`      | `string`             | Output file path relative to project root                           |
+| `global`      | `boolean`            | Use `af.data.generateApiDataObject` / `new af.ProcedureAPI` globals |
+| `types`       | `boolean`            | Emit TypeScript type definitions                                    |
+| `permissions` | `string`             | Permissions: I = insert, U = update, D = delete (e.g. `IUD`)        |
+| `maxRecords`  | `number`             | Max records to fetch (default `50`; `-1` for all)                   |
+| `sortOrder`   | `string \| string[]` | Sort order, e.g. `Created:Desc` or `[Created:Desc, Name]`           |
+| `master`      | `string`             | Master data object name (or `name:importPath`)                      |
+| `linkFields`  | `string \| string[]` | Fields linking child to master                                      |
+| `expose`      | `boolean \| string`  | Expose on `af.article.dataObjects` / `af.article.procedures`        |
+| `dynamic`     | `boolean`            | Enable dynamic loading                                              |
+| `unique`      | `string`             | Unique table name for update/delete                                 |
+| `overrides`   | `string \| string[]` | Type overrides, e.g. `MyField:string[]`                             |
+| `distinct`    | `boolean`            | Fetch distinct rows                                                 |
+| `aggregates`  | `string \| string[]` | Aggregate bindings, e.g. `Qty:SUM`                                  |
+| `groupBy`     | `string \| string[]` | Group-by fields                                                     |
+| `where`       | `string`             | Initial where clause                                                |
+| `fields`      | `string \| string[]` | Fields to include (all if omitted)                                  |
 
 A top-level `server` key can override the hostname (defaults to `appframe.proxy.hostname` from `package.json`).
 
@@ -201,12 +240,11 @@ Shared code generation utilities for Node.js consumers:
 
 ```ts
 import {
-  fetchAndGenerate,
-  buildYamlConfig,
-  parseYamlConfig,
-  formatWithBiome,
-  getCustomImportPath,
-  type CLIOptions,
+	fetchAndGenerate,
+	buildYamlConfig,
+	parseYamlConfig,
+	formatWithBiome,
+	getCustomImportPath,
+	type CLIOptions,
 } from "@olenbetong/appframe-vite/resources";
 ```
-

package/lib/appframeDataGlobal.d.ts

@@ -0,0 +1,14 @@
+import type { Plugin } from "vite";
+/**
+ * Redirects imports of `@olenbetong/appframe-data` to the `af.data` global the article
+ * already loads.
+ *
+ * Apps themselves mostly use the globals directly, but the `@olenbetong/*` packages they
+ * depend on import the package by name. Without this, every app ships a second copy of
+ * appframe-data whose module-scoped `defaultClient` is never assigned — the assignment
+ * lives in a bare side effect at the end of `browser/Client.js`, which tree shaking drops
+ * because the package declares `sideEffects: false` and nothing imports that module's only
+ * export. Anything reaching `getDefaultClient()` through that copy then fails with
+ * "No default client has been set". The dev server hid this by not tree shaking.
+ */
+export declare function appframeDataGlobal(): Plugin;

package/lib/appframeDataGlobal.js

@@ -0,0 +1,114 @@
+import path from "node:path";
+const PACKAGE_ID = "@olenbetong/appframe-data";
+const VIRTUAL_ID = "\0appframe-data-global";
+/**
+ * Names the framework puts on the `af.data` global. These are the exports shared by
+ * `bundle-entries/browser.esm.ts` and `bundle-entries/browser-compat.esm.ts` — which of
+ * the two a page loads depends on the user's UserMode, so only names present in *both*
+ * are safe to read off the global.
+ */
+const GLOBAL_EXPORTS = [
+    "Client",
+    "DataHandler",
+    "DataObject",
+    "DataProviderHandler",
+    "DataProviderHandlerAPI",
+    "FileUploader",
+    "MemoryStorage",
+    "Paging",
+    "Procedure",
+    "ProcedureAPI",
+    "SortOrder",
+    "generateApiDataHandler",
+    "generateApiDataObject",
+    "getDefaultClient",
+    "setDefaultClient",
+    "uid",
+];
+/**
+ * Helpers the `af.data` bundles do not expose, mapped to the module they live in. These
+ * are pure functions whose only dependencies on the rest of the package are types, so
+ * bundling them creates no second client, data object or event bus — the state that must
+ * stay single-instance still comes from the global. Move an entry up to GLOBAL_EXPORTS
+ * once the browser bundle entries export it and the new af.data has been deployed.
+ */
+const LOCAL_EXPORTS = {
+    "formDataToObject.js": ["formDataToDataObjectRecord", "formDataToObject", "formDataToProcedureParameters"],
+    "exportDataObject.js": ["exportOptionsFromDataObject", "getDataObjectReportRequest", "openDataObjectReport"],
+    "DataHandler.js": ["isRequestError"],
+};
+const MISSING_GLOBAL_MESSAGE = "af.data is not available. Appframe articles load it before the app bundle, so this " +
+    "usually means the page was opened outside an article context.";
+function renderModule(esDir) {
+    let lines = [
+        `// Generated by @olenbetong/appframe-vite (appframeDataGlobal.ts).`,
+        `// ${PACKAGE_ID} is provided by the article as the af.data global and must not be`,
+        `// bundled: a bundled copy has its own default client, which nothing ever sets.`,
+        ``,
+    ];
+    for (let [file, names] of Object.entries(LOCAL_EXPORTS)) {
+        let id = path.join(esDir, file).replace(/\\/g, "/");
+        lines.push(`export { ${names.join(", ")} } from ${JSON.stringify(id)};`);
+    }
+    lines.push(``, `let data = globalThis.af && globalThis.af.data;`, `if (!data) {`, `\tthrow new Error(${JSON.stringify(MISSING_GLOBAL_MESSAGE)});`, `}`, ``);
+    for (let name of GLOBAL_EXPORTS) {
+        lines.push(`export const ${name} = data.${name};`);
+    }
+    return `${lines.join("\n")}\n`;
+}
+/**
+ * Redirects imports of `@olenbetong/appframe-data` to the `af.data` global the article
+ * already loads.
+ *
+ * Apps themselves mostly use the globals directly, but the `@olenbetong/*` packages they
+ * depend on import the package by name. Without this, every app ships a second copy of
+ * appframe-data whose module-scoped `defaultClient` is never assigned — the assignment
+ * lives in a bare side effect at the end of `browser/Client.js`, which tree shaking drops
+ * because the package declares `sideEffects: false` and nothing imports that module's only
+ * export. Anything reaching `getDefaultClient()` through that copy then fails with
+ * "No default client has been set". The dev server hid this by not tree shaking.
+ */
+export function appframeDataGlobal() {
+    let root = process.cwd();
+    let esDir;
+    /**
+     * Locates the package's `es` directory, where the helpers below are read from.
+     * Resolved on demand rather than cached from `resolveId`, because the dev server can
+     * load a module straight from a warm module graph without resolving its id first.
+     */
+    async function resolveEsDir(importer) {
+        if (esDir)
+            return esDir;
+        // skipSelf avoids recursing into this plugin's own resolveId. The result is the
+        // package's browser entry (es/index.js), so its directory is what we want.
+        let resolved = await this.resolve(PACKAGE_ID, importer ?? path.join(root, "index.html"), { skipSelf: true });
+        if (resolved)
+            esDir = path.dirname(resolved.id);
+        return esDir;
+    }
+    return {
+        name: "appframe:data-global",
+        // Must beat Vite's own resolver, and keep the dep optimizer from pre-bundling a
+        // copy in dev before this hook ever runs.
+        enforce: "pre",
+        config() {
+            return { optimizeDeps: { exclude: [PACKAGE_ID] } };
+        },
+        configResolved(config) {
+            root = config.root;
+        },
+        async resolveId(source, importer) {
+            if (source !== PACKAGE_ID)
+                return null;
+            return (await resolveEsDir.call(this, importer)) ? VIRTUAL_ID : null;
+        },
+        async load(id) {
+            if (id !== VIRTUAL_ID)
+                return null;
+            let dir = await resolveEsDir.call(this, undefined);
+            if (!dir)
+                throw new Error(`Could not resolve ${PACKAGE_ID} from ${root}.`);
+            return renderModule(dir);
+        },
+    };
+}

package/lib/build.js

@@ -25,6 +25,19 @@ export async function addAppframeBuildConfig(config) {
         // Cast visualizer plugin to any to avoid Rollup type version clashes
         plugins: [visualizer({ filename: "./dist/stats.html", gzipSize: true })],
         external: appframe.build.externals !== false ? ["react", "react-dom", "react-dom/client"] : [],
+        treeshake: {
+            /*
+             * `@digdir/designsystemet-react` does not declare `sideEffects: false`, so the
+             * bundler has to assume every module reached through its barrel is needed and
+             * ships all ~140 components (Combobox, Table, Suggestion, …) even when an app
+             * renders a handful. None of its modules have import-time side effects, so opt
+             * them in to tree shaking explicitly.
+             *
+             * Deliberately scoped to `designsystemet-react`: `designsystemet-web` registers
+             * custom elements on import and must keep its side effects.
+             */
+            moduleSideEffects: (id) => !/[\\/]node_modules[\\/].*designsystemet-react[\\/]/.test(id.replace(/\?.*$/, "")),
+        },
         output: {
             globals: appframe.build.externals !== false
                 ? {

package/lib/cli-resources-migrate.d.ts

@@ -0,0 +1,7 @@
+export type MigrateOptions = {
+    config?: string;
+    outputDir?: string;
+    dryRun?: boolean;
+    generate?: boolean;
+};
+export declare function migrateArticleResources(id?: string, options?: MigrateOptions): Promise<void>;

package/lib/cli-resources-migrate.js

@@ -0,0 +1,341 @@
+import { resolve } from "node:path";
+import { Client, generateApiDataHandler } from "@olenbetong/appframe-data";
+import { config } from "dotenv";
+import { getLoginInfo } from "./devServer.js";
+import { fetchAndGenerate, writeGeneratedFile } from "./resourceGenerate.js";
+import { entryToCLIOptions, readResourcesConfig, writeResourcesConfig, } from "./resourcesConfig.js";
+config({ quiet: true });
+/** Views holding the CMS article configuration. They are registered on demand. */
+const CMS_DATASOURCES_VIEW = "stbv_WebSiteCMS_Datasources";
+const CMS_DATASOURCE_FIELDS_VIEW = "stbv_WebSiteCMS_DatasourcesFields";
+const CMS_PROCEDURES_VIEW = "stbv_WebSiteCMS_Procedures";
+// ---------------------------------------------------------------------------
+// Data handlers
+// ---------------------------------------------------------------------------
+function field(name, type, nullable = true) {
+    return { name, type, nullable, computed: false, identity: false, hasDefault: false };
+}
+function createApiResourcesHandler(client) {
+    return generateApiDataHandler({
+        client,
+        resource: "API_Resources",
+        fields: [field("PrimKey", "string", false), field("DBObjectID", "string", false), field("Name", "string")],
+    });
+}
+function createDatasourcesHandler(client) {
+    return generateApiDataHandler({
+        client,
+        resource: CMS_DATASOURCES_VIEW,
+        fields: [
+            field("ID", "string", false),
+            field("ViewName", "string"),
+            field("UniqueTableName", "string"),
+            field("WhereClause", "string"),
+            field("AllowInsert", "boolean", false),
+            field("AllowUpdate", "boolean", false),
+            field("AllowDelete", "boolean", false),
+            field("MaxRecords", "number", false),
+            field("MasterID", "string"),
+            field("MasterLinkFields", "string"),
+            field("ChildLinkFields", "string"),
+            field("DynamicLoading", "boolean", false),
+            field("DistinctRows", "boolean", false),
+        ],
+    });
+}
+function createDatasourceFieldsHandler(client) {
+    return generateApiDataHandler({
+        client,
+        resource: CMS_DATASOURCE_FIELDS_VIEW,
+        fields: [
+            field("Datasource", "string", false),
+            field("FieldName", "string", false),
+            field("OrderBy", "number"),
+            field("AscDesc", "string"),
+            field("GroupBy", "number"),
+            field("Alias", "string"),
+            field("Aggregate", "string"),
+            field("FieldOrder", "number", false),
+        ],
+    });
+}
+function createProceduresHandler(client) {
+    return generateApiDataHandler({
+        client,
+        resource: CMS_PROCEDURES_VIEW,
+        fields: [field("ID", "string", false), field("ProcedureName", "string", false)],
+    });
+}
+// ---------------------------------------------------------------------------
+// Data API resource registration
+// ---------------------------------------------------------------------------
+/**
+ * Make sure `dbObjectId` is exposed through the data API. Article data sources
+ * are resolved by the CMS at runtime, but `af.data.generateApiDataObject` and
+ * `af.ProcedureAPI` go through `/api/data`, which only serves registered
+ * resources. Mirrors what `af resources add` does.
+ */
+async function ensureApiResource(dsApiResources, dbObjectId, cache, dryRun) {
+    if (cache.get(dbObjectId)) {
+        return "exists";
+    }
+    let existing = await dsApiResources.retrieve({
+        whereClause: `[DBObjectID] = '${escapeSqlString(dbObjectId)}'`,
+        maxRecords: 1,
+    });
+    if (existing.length > 0) {
+        cache.set(dbObjectId, true);
+        return "exists";
+    }
+    if (dryRun) {
+        cache.set(dbObjectId, true);
+        return "would-add";
+    }
+    await dsApiResources.create({ DBObjectID: dbObjectId });
+    cache.set(dbObjectId, true);
+    return "added";
+}
+function escapeSqlString(value) {
+    return value.replace(/'/g, "''");
+}
+/**
+ * The server caches its list of data API resources, so a resource registered a
+ * moment ago may still be reported as missing. Retry a few times before failing.
+ */
+async function retryOnMissingResource(action, attempts = 5) {
+    for (let attempt = 1;; attempt++) {
+        try {
+            return await action();
+        }
+        catch (error) {
+            let message = error?.message ?? String(error);
+            let isStaleResourceCache = /does not exist/i.test(message) || /\b400 Bad Request\b/.test(message);
+            if (attempt >= attempts || !isStaleResourceCache) {
+                throw error;
+            }
+            await new Promise((r) => setTimeout(r, 2_000 * attempt));
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// CMS record → ResourceEntry
+// ---------------------------------------------------------------------------
+/** Split a comma separated CMS link field list into trimmed field names. */
+function splitList(value) {
+    if (!value)
+        return [];
+    return value
+        .split(",")
+        .map((v) => v.trim())
+        .filter(Boolean);
+}
+function buildLinkFields(datasource) {
+    let childFields = splitList(datasource.ChildLinkFields);
+    let masterFields = splitList(datasource.MasterLinkFields);
+    return childFields.map((childField, index) => {
+        let masterField = masterFields[index] ?? childField;
+        return masterField === childField ? childField : `${childField}:${masterField}`;
+    });
+}
+function dataObjectToEntry(datasource, fields, outputDir, warnings) {
+    let sorted = [...fields].sort((a, b) => a.FieldOrder - b.FieldOrder);
+    let permissions = `${datasource.AllowInsert ? "I" : ""}${datasource.AllowUpdate ? "U" : ""}${datasource.AllowDelete ? "D" : ""}`;
+    let entry = {
+        id: datasource.ID,
+        resource: datasource.ViewName,
+        output: `${outputDir}/${datasource.ID}.ts`,
+        global: true,
+        types: true,
+        expose: true,
+    };
+    if (permissions)
+        entry.permissions = permissions;
+    if (datasource.MaxRecords !== 50)
+        entry.maxRecords = datasource.MaxRecords;
+    if (datasource.WhereClause)
+        entry.where = datasource.WhereClause;
+    if (datasource.UniqueTableName && datasource.UniqueTableName !== datasource.ViewName) {
+        entry.unique = datasource.UniqueTableName;
+    }
+    if (datasource.DynamicLoading)
+        entry.dynamic = true;
+    if (datasource.DistinctRows)
+        entry.distinct = true;
+    if (datasource.MasterID) {
+        let linkFields = buildLinkFields(datasource);
+        if (linkFields.length > 0) {
+            entry.master = datasource.MasterID;
+            entry.linkFields = linkFields.length > 1 ? linkFields : linkFields[0];
+        }
+        else {
+            warnings.push(`${datasource.ID}: master '${datasource.MasterID}' has no link fields — master was skipped`);
+        }
+    }
+    let fieldNames = sorted.map((f) => f.FieldName);
+    if (fieldNames.length > 0) {
+        entry.fields = fieldNames.length > 1 ? fieldNames : fieldNames[0];
+    }
+    let sortFields = sorted
+        .filter((f) => f.OrderBy !== null && f.OrderBy !== undefined)
+        .sort((a, b) => a.OrderBy - b.OrderBy);
+    if (sortFields.length > 0) {
+        entry.sortOrder = sortFields.map((f) => {
+            let direction = (f.AscDesc ?? "asc").toLowerCase();
+            return direction.startsWith("desc") ? { field: f.FieldName, direction: "desc" } : { field: f.FieldName };
+        });
+    }
+    let groupByFields = sorted
+        .filter((f) => f.GroupBy !== null && f.GroupBy !== undefined)
+        .sort((a, b) => a.GroupBy - b.GroupBy);
+    if (groupByFields.length > 0) {
+        entry.groupBy = groupByFields.map((f) => f.FieldName);
+    }
+    let aggregateFields = sorted.filter((f) => !!f.Aggregate);
+    if (aggregateFields.length > 0) {
+        entry.aggregates = aggregateFields.map((f) => ({ field: f.FieldName, aggregate: f.Aggregate }));
+    }
+    let aliased = sorted.filter((f) => f.Alias && f.Alias !== f.FieldName);
+    if (aliased.length > 0) {
+        warnings.push(`${datasource.ID}: field aliases are not supported by resources.yaml (${aliased
+            .map((f) => `${f.FieldName} → ${f.Alias}`)
+            .join(", ")})`);
+    }
+    return entry;
+}
+function procedureToEntry(procedure, outputDir) {
+    return {
+        id: procedure.ID,
+        resource: procedure.ProcedureName,
+        output: `${outputDir}/${procedure.ID}.ts`,
+        global: true,
+        types: true,
+        expose: true,
+    };
+}
+/** Replace an entry with the same id, or append it when it is new. */
+function upsertEntry(entries, entry) {
+    let index = entries.findIndex((e) => e.id === entry.id);
+    if (index === -1) {
+        entries.push(entry);
+        return "added";
+    }
+    entries[index] = { ...entries[index], ...entry };
+    return "updated";
+}
+export async function migrateArticleResources(id, options = {}) {
+    let { hostname, username, password, appframe } = await getLoginInfo();
+    let articleId = appframe.article?.id ?? appframe.article;
+    let articleHost = appframe.article?.hostname ?? hostname;
+    if (!articleId) {
+        throw new Error("No article id found in package.json (appframe.article.id)");
+    }
+    let outputDir = (options.outputDir ?? "src/data").replace(/\\/g, "/").replace(/\/$/, "");
+    let dryRun = options.dryRun ?? false;
+    let client = new Client(hostname);
+    await client.login(username, password);
+    let dsApiResources = createApiResourcesHandler(client);
+    let registered = new Map();
+    // The CMS configuration views are not exposed through the data API by default.
+    for (let view of [CMS_DATASOURCES_VIEW, CMS_DATASOURCE_FIELDS_VIEW, CMS_PROCEDURES_VIEW]) {
+        let result = await ensureApiResource(dsApiResources, view, registered, false);
+        if (result === "added") {
+            console.log(`Registered '${view}' as a data API resource`);
+        }
+    }
+    let articleFilter = `[HostName] = '${escapeSqlString(articleHost)}' AND [ArticleId] = '${escapeSqlString(articleId)}'`;
+    let [datasources, datasourceFields, procedures] = await retryOnMissingResource(() => Promise.all([
+        createDatasourcesHandler(client).retrieve({
+            whereClause: `${articleFilter} AND [ArticleVersion] IS NULL`,
+            maxRecords: -1,
+        }),
+        createDatasourceFieldsHandler(client).retrieve({
+            whereClause: articleFilter,
+            maxRecords: -1,
+        }),
+        createProceduresHandler(client).retrieve({
+            whereClause: `${articleFilter} AND [ArticleVersion] IS NULL`,
+            maxRecords: -1,
+        }),
+    ]));
+    if (id) {
+        datasources = datasources.filter((d) => d.ID.toLowerCase() === id.toLowerCase());
+        procedures = procedures.filter((p) => p.ID.toLowerCase() === id.toLowerCase());
+        if (datasources.length === 0 && procedures.length === 0) {
+            throw new Error(`No data object or procedure named '${id}' found on article '${articleId}' (${articleHost})`);
+        }
+    }
+    if (datasources.length === 0 && procedures.length === 0) {
+        console.log(`No article data objects or procedures found on '${articleId}' (${articleHost})`);
+        return;
+    }
+    let warnings = [];
+    let migrated = [];
+    for (let datasource of datasources) {
+        if (!datasource.ViewName) {
+            warnings.push(`${datasource.ID}: no view name — skipped`);
+            continue;
+        }
+        let fields = datasourceFields.filter((f) => f.Datasource === datasource.ID);
+        migrated.push({ type: "dataObject", entry: dataObjectToEntry(datasource, fields, outputDir, warnings) });
+    }
+    for (let procedure of procedures) {
+        migrated.push({ type: "procedure", entry: procedureToEntry(procedure, outputDir) });
+    }
+    // Every migrated resource has to be reachable through /api/data.
+    for (let { entry } of migrated) {
+        let result = await ensureApiResource(dsApiResources, entry.resource, registered, dryRun);
+        if (result === "added") {
+            console.log(`Registered '${entry.resource}' as a data API resource`);
+        }
+        else if (result === "would-add") {
+            console.log(`Would register '${entry.resource}' as a data API resource`);
+        }
+    }
+    let resourcesConfig = await readResourcesConfig(options.config);
+    let dataObjects = resourcesConfig.dataObjects ?? [];
+    let procedureEntries = resourcesConfig.procedures ?? [];
+    for (let { type, entry } of migrated) {
+        let target = type === "dataObject" ? dataObjects : procedureEntries;
+        let result = upsertEntry(target, entry);
+        console.log(`  ${dryRun ? "○" : "✓"} ${entry.id} → ${entry.resource} (${result})`);
+    }
+    if (dataObjects.length > 0)
+        resourcesConfig.dataObjects = dataObjects;
+    if (procedureEntries.length > 0)
+        resourcesConfig.procedures = procedureEntries;
+    if (dryRun) {
+        for (let warning of warnings) {
+            console.warn(`  ! ${warning}`);
+        }
+        console.log(`\nDry run — resources.yaml was not modified (${migrated.length} resource(s) would be migrated)`);
+        return;
+    }
+    await writeResourcesConfig(resourcesConfig, options.config);
+    console.log(`\nUpdated resources.yaml with ${migrated.length} resource(s)`);
+    if (options.generate !== false) {
+        let errors = [];
+        for (let { entry } of migrated) {
+            let cliOptions = entryToCLIOptions(entry, resourcesConfig.server ?? hostname);
+            let outputPath = resolve(process.cwd(), entry.output);
+            cliOptions.output = outputPath;
+            try {
+                let content = await retryOnMissingResource(() => fetchAndGenerate(entry.resource, cliOptions, client));
+                await writeGeneratedFile(outputPath, content);
+                console.log(`  ✓ generated ${entry.output}`);
+            }
+            catch (error) {
+                let message = error?.message ?? String(error);
+                console.error(`  ✗ ${entry.id}: ${message}`);
+                errors.push(`${entry.id}: ${message}`);
+            }
+        }
+        if (errors.length > 0) {
+            throw new Error(`${errors.length} resource(s) failed to generate:\n${errors.map((e) => `  ${e}`).join("\n")}`);
+        }
+    }
+    for (let warning of warnings) {
+        console.warn(`  ! ${warning}`);
+    }
+    console.log("\nRemember to import the generated files from your app, remove the migrated data objects and procedures\n" +
+        "from the article in the appdesigner, and run 'pnpm generate-types' afterwards.");
+}

package/lib/cli.js

@@ -49,6 +49,23 @@ resources
     let { addResource } = await import("./cli-resources-add.js");
     await addResource();
 });
+resources
+    .command("migrate [id]")
+    .description("Migrate article data objects and procedures from the appdesigner to resources.yaml")
+    .option("-c, --config <path>", "Path to resources config file (default: resources.yaml)")
+    .option("-o, --output-dir <path>", "Directory for generated files (default: src/data)")
+    .option("--dry-run", "Show what would be migrated without writing anything")
+    .option("--no-generate", "Only update resources.yaml, do not generate the output files")
+    .action(async (id, opts) => {
+    let { migrateArticleResources } = await import("./cli-resources-migrate.js");
+    try {
+        await migrateArticleResources(id, opts);
+    }
+    catch (error) {
+        console.error(`\n${error?.message ?? error}`);
+        process.exit(1);
+    }
+});
 resources
     .command("edit [id]")
     .description("Interactively edit an existing resource in resources.yaml")

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vite";
+import { appframeDataGlobal } from "./appframeDataGlobal.js";
 import { addAppframeBuildConfig } from "./build.js";
 import { createDevMiddleware } from "./devServer.js";
 import { publishSafeOutput } from "./publishSafeOutput.js";
@@ -19,6 +20,14 @@ export interface AppframePluginOptions {
      * @default true
      */
     devtools?: boolean;
+    /**
+     * Whether to resolve `@olenbetong/appframe-data` to the `af.data` global the article
+     * loads, instead of bundling a second copy of the package. Set to `false` only when
+     * running outside an article context, where the global does not exist.
+     *
+     * @default true
+     */
+    dataGlobal?: boolean;
 }
 export default function appframe(options?: AppframePluginOptions): Plugin[];
-export { addAppframeBuildConfig, createDevMiddleware, publishSafeOutput };
+export { addAppframeBuildConfig, appframeDataGlobal, createDevMiddleware, publishSafeOutput };

package/lib/index.js

@@ -1,11 +1,13 @@
 import { resolve } from "node:path";
 import bodyParser from "body-parser";
 import { watch } from "chokidar";
+import { appframeDataGlobal } from "./appframeDataGlobal.js";
 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 { getMuiXLicenseKey } from "./licenses.js";
 import { localizeMiddleware } from "./localization.js";
 import { checkSession, getLastSession, login } from "./proxy.js";
 import { RESOURCES_CONFIG_FILE } from "./resourcesConfig.js";
@@ -34,7 +36,7 @@ catch (error) {
 }
 const jsonParser = bodyParser.json();
 export default function appframe(options = {}) {
-    let { generateTypes = true, devtools = true } = options;
+    let { generateTypes = true, devtools = true, dataGlobal = true } = options;
     let plugin = {
         name: "appframe",
         resolveId(source) {
@@ -90,6 +92,30 @@ export default function appframe(options = {}) {
                 resolve: {
                     ...currentConfig.resolve,
                     alias: [{ find: "~/", replacement: "/src/" }],
+                    /*
+                     * Apps depend on the published `@olenbetong/*` packages, while workspace
+                     * packages (e.g. appframe-ds) depend on their workspace siblings. Without
+                     * deduplication the production build ends up with two copies of, for
+                     * instance, appframe-react, which means two distinct `DataObjectContext`
+                     * instances: `DataObjectProvider` writes to one, `useField` reads the
+                     * empty default of the other and crashes with "currentRow is not a
+                     * function". The dev server hides this because linked packages resolve to
+                     * the same optimized dependency.
+                     */
+                    dedupe: [
+                        ...(currentConfig.resolve?.dedupe ?? []),
+                        "@olenbetong/appframe-core",
+                        "@olenbetong/appframe-data",
+                        "@olenbetong/appframe-ds",
+                        "@olenbetong/appframe-mui",
+                        "@olenbetong/appframe-react",
+                    ],
+                },
+                define: {
+                    ...currentConfig.define,
+                    // Lets `@olenbetong/appframe-ds/grid` register the MUI X license
+                    // itself, so apps don't have to call `LicenseInfo.setLicenseKey`.
+                    __MUI_X_LICENSE_KEY__: JSON.stringify(getMuiXLicenseKey()),
                 },
             };
             if (command === "build") {
@@ -214,6 +240,6 @@ export default function appframe(options = {}) {
             ];
         },
     };
-    return [plugin, publishSafeOutput()];
+    return [...(dataGlobal ? [appframeDataGlobal()] : []), plugin, publishSafeOutput()];
 }
-export { addAppframeBuildConfig, createDevMiddleware, publishSafeOutput };
+export { addAppframeBuildConfig, appframeDataGlobal, createDevMiddleware, publishSafeOutput };

package/lib/licenses.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Reads the MUI X license key that should be injected into the bundle.
+ *
+ * The key is looked for in this order:
+ *
+ * 1. The `MUI_X_LICENSE_KEY` environment variable, so it can be supplied by CI
+ *    or a local `.env` without being committed.
+ * 2. The `MUI_X_LICENSE_KEY` constant exported from the app's
+ *    `src/shared/licenses.ts` — the `shared` folder symlinked into every app.
+ *
+ * Returns an empty string when no key is found. `@olenbetong/appframe-ds/grid`
+ * then falls back to `import.meta.env.VITE_MUI_X_LICENSE_KEY`, and warns in dev
+ * if that is missing too.
+ */
+export declare function getMuiXLicenseKey(root?: string): string;

package/lib/licenses.js

@@ -0,0 +1,35 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+/**
+ * Reads the MUI X license key that should be injected into the bundle.
+ *
+ * The key is looked for in this order:
+ *
+ * 1. The `MUI_X_LICENSE_KEY` environment variable, so it can be supplied by CI
+ *    or a local `.env` without being committed.
+ * 2. The `MUI_X_LICENSE_KEY` constant exported from the app's
+ *    `src/shared/licenses.ts` — the `shared` folder symlinked into every app.
+ *
+ * Returns an empty string when no key is found. `@olenbetong/appframe-ds/grid`
+ * then falls back to `import.meta.env.VITE_MUI_X_LICENSE_KEY`, and warns in dev
+ * if that is missing too.
+ */
+export function getMuiXLicenseKey(root = process.cwd()) {
+    let fromEnvironment = process.env.MUI_X_LICENSE_KEY?.trim();
+    if (fromEnvironment) {
+        return fromEnvironment;
+    }
+    for (let candidate of ["src/shared/licenses.ts", "shared/licenses.ts"]) {
+        try {
+            let source = readFileSync(resolve(root, candidate), "utf-8");
+            let match = source.match(/MUI_X_LICENSE_KEY\s*=\s*["'`]([^"'`]+)["'`]/);
+            if (match) {
+                return match[1];
+            }
+        }
+        catch {
+            // Try the next candidate.
+        }
+    }
+    return "";
+}

package/lib/resourceGenerate.js

@@ -579,7 +579,8 @@ export async function fetchResourceDefinition(client, resourceName) {
         }),
     });
     if (!response.ok) {
-        throw new Error(`Failed to fetch resource definition for '${resourceName}': ${response.status} ${response.statusText}`);
+        let details = await response.text().catch(() => "");
+        throw new Error(`Failed to fetch resource definition for '${resourceName}': ${response.status} ${response.statusText}${details ? ` — ${details}` : ""}`);
     }
     const json = await response.json();
     return json.success ?? json;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-vite",
-  "version": "6.5.0",
+  "version": "6.7.0",
   "description": "Tools to use and deploy Vite applications to Appframe",
   "main": "./lib/index.js",
   "type": "module",
@@ -29,25 +29,25 @@
   "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
   "license": "MIT",
   "dependencies": {
-    "@olenbetong/appframe-data": "1.5.0",
     "body-parser": "^2.3.0",
-    "chalk": "5.6.2",
+    "chalk": "6.0.0",
     "chokidar": "^5.0.0",
     "commander": "15.0.0",
     "dotenv": "^17.4.2",
     "fuzzy": "^0.1.3",
     "inquirer": "^14.0.2",
     "inquirer-autocomplete-standalone": "^0.8.1",
-    "jsdom": "29.1.1",
+    "jsdom": "30.0.1",
     "rollup-plugin-visualizer": "^7.0.1",
     "yaml": "^2.9.0",
+    "@olenbetong/appframe-data": "1.6.1",
     "@olenbetong/appframe-devtools": "0.3.0"
   },
   "devDependencies": {
     "@types/jsdom": "^27.0.0",
-    "@types/node": "26.1.2",
+    "@types/node": "26.2.0",
     "typescript": "7.0.2",
-    "vite": "8.2.0"
+    "vite": "8.2.1"
   },
   "peerDependencies": {
     "vite": ">=8.1.5"