@metaobjectsdev/runtime-web 0.9.0 → 0.11.0-rc.1

package/dist/grid-from-metadata.d.ts

@@ -0,0 +1,25 @@
+import type { MetaObject } from "@metaobjectsdev/metadata";
+import type { GridConfig } from "./fetcher.js";
+/** A neutral, framework-agnostic column descriptor derived from metadata. */
+export interface MetaColumn {
+    /** The field's logical name (the data accessor key). */
+    field: string;
+    /** Display header — the field view's `label`, else the humanized field name. */
+    header: string;
+    /** Cell-renderer hint — the field's view subtype, else the field subtype. */
+    viewKind: string;
+}
+export interface MetaGrid {
+    config: GridConfig;
+    columns: MetaColumn[];
+}
+/**
+ * Build a grid (config + columns) from a MetaObject at runtime.
+ *
+ * If the object declares a `dataGrid` layout (optionally selected by `gridName`),
+ * its `@columns`, `@pageSize`, sort and `@filterable` attrs drive the result.
+ * Otherwise every field becomes a column with sensible defaults — so it works
+ * for ANY object, with or without a declared grid.
+ */
+export declare function buildGrid(meta: MetaObject, gridName?: string): MetaGrid;
+//# sourceMappingURL=grid-from-metadata.d.ts.map

package/dist/grid-from-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-from-metadata.d.ts","sourceRoot":"","sources":["../src/grid-from-metadata.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,0BAA0B,CAAC;AAShF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ/C,6EAA6E;AAC7E,MAAM,WAAW,UAAU;IACzB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,MAAM,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,UAAU,EAAE,CAAC;CACvB;AAoBD;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CA8BvE"}

package/dist/grid-from-metadata.js

@@ -0,0 +1,54 @@
+import { LAYOUT_SUBTYPE_DATA_GRID, LAYOUT_DATA_GRID_ATTR_COLUMNS, LAYOUT_DATA_GRID_ATTR_PAGE_SIZE, LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_FIELD, LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_ORDER, LAYOUT_DATA_GRID_ATTR_FILTERABLE, } from "@metaobjectsdev/metadata";
+const DEFAULT_PAGE_SIZE = 25;
+const DEFAULT_GRID_NAME = "default";
+// The view's display-label attr. Mirrors the literal used by the columns-file
+// codegen; there is no exported constant for it in @metaobjectsdev/metadata.
+const VIEW_ATTR_LABEL = "label";
+/** camelCase / PascalCase → "Title Case" (matches the codegen `humanize`). */
+function humanize(s) {
+    return s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+}
+function firstView(field) {
+    return field.ownViews()[0];
+}
+function header(field) {
+    const label = firstView(field)?.ownAttr(VIEW_ATTR_LABEL);
+    return typeof label === "string" ? label : humanize(field.name);
+}
+function viewKind(field) {
+    return firstView(field)?.subType ?? field.subType;
+}
+/**
+ * Build a grid (config + columns) from a MetaObject at runtime.
+ *
+ * If the object declares a `dataGrid` layout (optionally selected by `gridName`),
+ * its `@columns`, `@pageSize`, sort and `@filterable` attrs drive the result.
+ * Otherwise every field becomes a column with sensible defaults — so it works
+ * for ANY object, with or without a declared grid.
+ */
+export function buildGrid(meta, gridName) {
+    const layouts = meta.layouts().filter((l) => l.subType === LAYOUT_SUBTYPE_DATA_GRID);
+    const layout = gridName ? layouts.find((l) => l.name === gridName) : layouts[0];
+    const fieldsByName = new Map(meta.fields().map((f) => [f.name, f]));
+    const columnsAttr = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_COLUMNS);
+    const names = Array.isArray(columnsAttr)
+        ? columnsAttr.filter((x) => typeof x === "string")
+        : meta.fields().map((f) => f.name);
+    const columns = names
+        .map((n) => fieldsByName.get(n))
+        .filter((f) => f !== undefined)
+        .map((f) => ({ field: f.name, header: header(f), viewKind: viewKind(f) }));
+    const pageSizeAttr = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_PAGE_SIZE);
+    const sortField = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_FIELD);
+    const sortOrder = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_ORDER);
+    const config = {
+        name: layout?.name ?? gridName ?? DEFAULT_GRID_NAME,
+        pageSize: typeof pageSizeAttr === "number" ? pageSizeAttr : DEFAULT_PAGE_SIZE,
+        filterable: layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_FILTERABLE) === true,
+        ...(typeof sortField === "string"
+            ? { defaultSort: { field: sortField, order: sortOrder === "desc" ? "desc" : "asc" } }
+            : {}),
+    };
+    return { config, columns };
+}
+//# sourceMappingURL=grid-from-metadata.js.map

package/dist/grid-from-metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-from-metadata.js","sourceRoot":"","sources":["../src/grid-from-metadata.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { formatCurrency, parseCurrency, minorUnitsFor } from "./currency.js";
 export { buildFilterQs } from "./filter-qs.js";
 export type { EntityFetcher, GridConfig } from "./fetcher.js";
+export { buildGrid } from "./grid-from-metadata.js";
+export type { MetaColumn, MetaGrid } from "./grid-from-metadata.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 // Public API surface for @metaobjectsdev/runtime-web.
 export { formatCurrency, parseCurrency, minorUnitsFor } from "./currency.js";
 export { buildFilterQs } from "./filter-qs.js";
+export { buildGrid } from "./grid-from-metadata.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metaobjectsdev/runtime-web",
-  "version": "0.9.0",
+  "version": "0.11.0-rc.1",
   "description": "Pure framework-agnostic browser core for metaobjects: currency, filter URL serialization, fetcher contract types.",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,7 +12,12 @@
       "default": "./dist/index.js"
     }
   },
-  "files": ["dist", "src", "README.md", "LICENSE"],
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.typecheck.json",
@@ -22,24 +27,30 @@
   "author": "Doug Mealing <doug@dougmealing.com>",
   "homepage": "https://metaobjects.dev",
   "bugs": {
-  "url": "https://github.com/metaobjectsdev/metaobjects/issues"
-},
-"repository": {
-  "type": "git",
-  "url": "https://github.com/metaobjectsdev/metaobjects.git",
-  "directory": "client/web/packages/runtime-web"
-},
-"keywords": ["metaobjects", "runtime", "browser", "currency", "filter"],
-"publishConfig": {
-"access": "public"
-},
-"dependencies": {
-  "@metaobjectsdev/metadata": "0.9.0",
-  "qs": "^6.13.0"
-},
-"devDependencies": {
-  "@types/qs": "^6.9.0",
-  "bun-types": "latest",
-  "typescript": "^5.6.0"
-}
+    "url": "https://github.com/metaobjectsdev/metaobjects/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/metaobjectsdev/metaobjects.git",
+    "directory": "client/web/packages/runtime-web"
+  },
+  "keywords": [
+    "metaobjects",
+    "runtime",
+    "browser",
+    "currency",
+    "filter"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@metaobjectsdev/metadata": "0.11.0-rc.1",
+    "qs": "^6.13.0"
+  },
+  "devDependencies": {
+    "@types/qs": "^6.9.0",
+    "bun-types": "latest",
+    "typescript": "^5.6.0"
+  }
 }

package/src/grid-from-metadata.ts

@@ -0,0 +1,100 @@
+// Metadata-driven grid — the runtime twin of the `tanstackGrid()` codegen.
+//
+// Builds grid columns + config by walking a loaded MetaObject's fields and
+// views at RUNTIME. Fully generic: no object or field names are hardcoded, so
+// one call renders any object you've described in metadata. Pass any MetaObject
+// (e.g. obtained from a loader, or via a MetaObjectAware row's getMetaData()).
+//
+// Mirrors the derivation in codegen-ts-tanstack's columns-file (humanized
+// headers, the field's view subtype as the cell-renderer hint, @columns / grid
+// attrs from the dataGrid layout) so a runtime-built grid matches a generated
+// one. Browser-safe: depends only on @metaobjectsdev/metadata.
+import type { MetaObject, MetaField, MetaView } from "@metaobjectsdev/metadata";
+import {
+  LAYOUT_SUBTYPE_DATA_GRID,
+  LAYOUT_DATA_GRID_ATTR_COLUMNS,
+  LAYOUT_DATA_GRID_ATTR_PAGE_SIZE,
+  LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_FIELD,
+  LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_ORDER,
+  LAYOUT_DATA_GRID_ATTR_FILTERABLE,
+} from "@metaobjectsdev/metadata";
+import type { GridConfig } from "./fetcher.js";
+
+const DEFAULT_PAGE_SIZE = 25;
+const DEFAULT_GRID_NAME = "default";
+// The view's display-label attr. Mirrors the literal used by the columns-file
+// codegen; there is no exported constant for it in @metaobjectsdev/metadata.
+const VIEW_ATTR_LABEL = "label";
+
+/** A neutral, framework-agnostic column descriptor derived from metadata. */
+export interface MetaColumn {
+  /** The field's logical name (the data accessor key). */
+  field: string;
+  /** Display header — the field view's `label`, else the humanized field name. */
+  header: string;
+  /** Cell-renderer hint — the field's view subtype, else the field subtype. */
+  viewKind: string;
+}
+
+export interface MetaGrid {
+  config: GridConfig;
+  columns: MetaColumn[];
+}
+
+/** camelCase / PascalCase → "Title Case" (matches the codegen `humanize`). */
+function humanize(s: string): string {
+  return s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+}
+
+function firstView(field: MetaField): MetaView | undefined {
+  return field.ownViews()[0];
+}
+
+function header(field: MetaField): string {
+  const label = firstView(field)?.ownAttr(VIEW_ATTR_LABEL);
+  return typeof label === "string" ? label : humanize(field.name);
+}
+
+function viewKind(field: MetaField): string {
+  return firstView(field)?.subType ?? field.subType;
+}
+
+/**
+ * Build a grid (config + columns) from a MetaObject at runtime.
+ *
+ * If the object declares a `dataGrid` layout (optionally selected by `gridName`),
+ * its `@columns`, `@pageSize`, sort and `@filterable` attrs drive the result.
+ * Otherwise every field becomes a column with sensible defaults — so it works
+ * for ANY object, with or without a declared grid.
+ */
+export function buildGrid(meta: MetaObject, gridName?: string): MetaGrid {
+  const layouts = meta.layouts().filter((l) => l.subType === LAYOUT_SUBTYPE_DATA_GRID);
+  const layout = gridName ? layouts.find((l) => l.name === gridName) : layouts[0];
+
+  const fieldsByName = new Map(meta.fields().map((f) => [f.name, f] as const));
+
+  const columnsAttr = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_COLUMNS);
+  const names: string[] = Array.isArray(columnsAttr)
+    ? columnsAttr.filter((x): x is string => typeof x === "string")
+    : meta.fields().map((f) => f.name);
+
+  const columns: MetaColumn[] = names
+    .map((n) => fieldsByName.get(n))
+    .filter((f): f is MetaField => f !== undefined)
+    .map((f) => ({ field: f.name, header: header(f), viewKind: viewKind(f) }));
+
+  const pageSizeAttr = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_PAGE_SIZE);
+  const sortField = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_FIELD);
+  const sortOrder = layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_DEFAULT_SORT_ORDER);
+
+  const config: GridConfig = {
+    name: layout?.name ?? gridName ?? DEFAULT_GRID_NAME,
+    pageSize: typeof pageSizeAttr === "number" ? pageSizeAttr : DEFAULT_PAGE_SIZE,
+    filterable: layout?.ownAttr(LAYOUT_DATA_GRID_ATTR_FILTERABLE) === true,
+    ...(typeof sortField === "string"
+      ? { defaultSort: { field: sortField, order: sortOrder === "desc" ? "desc" : "asc" } }
+      : {}),
+  };
+
+  return { config, columns };
+}

package/src/index.ts

@@ -2,3 +2,5 @@
 export { formatCurrency, parseCurrency, minorUnitsFor } from "./currency.js";
 export { buildFilterQs } from "./filter-qs.js";
 export type { EntityFetcher, GridConfig } from "./fetcher.js";
+export { buildGrid } from "./grid-from-metadata.js";
+export type { MetaColumn, MetaGrid } from "./grid-from-metadata.js";