@vantage-ui/client 0.4.3 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +132 -0
  3. package/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.4.4 — 2026-10-13
4
+
5
+ - A README for the npm page, plus `keywords` and `homepage`.
6
+
3
7
  ## 0.4.3 — 2026-10-13
4
8
 
5
9
  - A run delivers to `on`/`useRunMessage` the messages sent while the connection was down or across a `resync`, from the server's `seq` on each message.
package/README.md ADDED
@@ -0,0 +1,132 @@
1
+ # @vantage-ui/client
2
+
3
+ The TypeScript client for a [Vantage](https://vantage-ui.com) API. It turns
4
+ the API into typed models. Reads are lazy and stay current: the server pushes
5
+ changes, and a React component re-renders on exactly the fields it read.
6
+ Writes are optimistic and roll back when the server refuses them.
7
+
8
+ It runs in the browser and in Node 22 or later, and has no runtime
9
+ dependencies. The React bindings need React 18 or later.
10
+
11
+ ```sh
12
+ npm install @vantage-ui/client
13
+ ```
14
+
15
+ ## Generate the models
16
+
17
+ The models come from the API's schema at `/v1/schema`:
18
+
19
+ ```sh
20
+ npx vantage-client generate --from http://127.0.0.1:8090/v1/schema --out src/vantage.gen.ts
21
+ ```
22
+
23
+ `--from` also takes a saved copy of the schema (`schema.json`). Regenerate
24
+ after the API changes; never edit the generated file. Per entity it has
25
+ `XFields` (the record), `XInput` (what `create()` takes) and the model `X`,
26
+ with typed columns, lazy references, has-many collections and a method per
27
+ row action.
28
+
29
+ ## Connect
30
+
31
+ A page served by the API connects to `/v1/ws` on its own origin:
32
+
33
+ ```ts
34
+ import { createVantage } from "@vantage-ui/client";
35
+ import { schema, type Schema } from "./vantage.gen";
36
+
37
+ const db = createVantage<Schema>({ schema, token: () => sessionStorage.getItem("vantage.token") ?? undefined });
38
+ ```
39
+
40
+ Outside a browser, pass `url: "ws://127.0.0.1:8090/v1/ws"`. `db.ready`
41
+ resolves once the API's `instant` entities have loaded, and `db.connection`
42
+ reports `connecting`, `open`, `closed` (reconnecting), `refused` or
43
+ `protocol_mismatch`.
44
+
45
+ ## Read
46
+
47
+ ```ts
48
+ const open = db.issues.where({ status: "open" }).sort("created_at", "desc");
49
+ await open.load();
50
+ const titles = open.map((issue) => issue.title);
51
+
52
+ const page = await db.issues.window(0, 50).whenLoaded(); // one window of a long list
53
+
54
+ const issue = await db.issues.ref("JIR-12").load();
55
+ const project = await issue?.project; // references load on first read
56
+ ```
57
+
58
+ The server filters, sorts and pages; the API decides which columns may be
59
+ filtered and sorted. A refused query never throws: the collection's `error`
60
+ holds the server's message.
61
+
62
+ ## Write
63
+
64
+ ```ts
65
+ const result = await issue.patch({ status: "done" });
66
+ if (!result.ok) console.warn(result.error.message, issue.$errors);
67
+
68
+ const draft = issue.edit();
69
+ draft.title = "Login fails on Safari";
70
+ await draft.$flash();
71
+
72
+ await db.issues.create({ title: "Export to CSV", project: "JIR", status: "open" });
73
+ ```
74
+
75
+ ## Actions and runs
76
+
77
+ Row actions are methods on the model, and `$actions` lists the ones the row
78
+ allows right now. Every action runs as a run, with shared state and messages,
79
+ that survives a reconnect or a page reload without running twice:
80
+
81
+ ```ts
82
+ if (issue.$actions.includes("close_issue")) await issue.close_issue({ resolution: "fixed" });
83
+
84
+ const run = db.run.triage.start({ project: "JIR" });
85
+ run.on("flagged", (m) => console.warn(`${m.issue} has no assignee`));
86
+ const outcome = await run.done;
87
+ ```
88
+
89
+ ## React
90
+
91
+ ```tsx
92
+ import { VantageProvider, observer, useCollection, useVantage } from "@vantage-ui/client/react";
93
+
94
+ const OpenIssues = observer(() => {
95
+ const db = useVantage<Schema>();
96
+ const { items, error } = useCollection(db.issues.where({ status: "open" }));
97
+ if (error) return <p role="alert">{error}</p>;
98
+ return <ul>{items.map((issue) => <li key={issue.id}>{issue.title}</li>)}</ul>;
99
+ });
100
+
101
+ <VantageProvider db={db} fallback={<p>Connecting…</p>}>
102
+ <OpenIssues />
103
+ </VantageProvider>;
104
+ ```
105
+
106
+ There are also hooks for windows (`useWindow`), records, actions, runs
107
+ (`useRun`, `useShared`, `useRunMessage`) and the connection (`useConnection`).
108
+
109
+ ## Testing
110
+
111
+ `@vantage-ui/client/testing` has `MockServer`, an in-memory server with no
112
+ network, for unit tests and Storybook:
113
+
114
+ ```ts
115
+ import { createTestVantage } from "@vantage-ui/client/testing";
116
+
117
+ const { db, server } = createTestVantage<Schema>(schema, {
118
+ tables: { issues: [{ id: "JIR-1", title: "Login fails", status: "open", project: "JIR" }] },
119
+ actions: { "issues.close_issue": () => ({ status: "done" }) },
120
+ });
121
+ ```
122
+
123
+ ## Full documentation
124
+
125
+ The package ships an agent skill that is also its reference documentation:
126
+ `skills/vantage-client/SKILL.md`, with `references/react.md`,
127
+ `references/testing.md` and `references/protocol.md`. Every example in it is
128
+ type-checked and run in this package's tests.
129
+
130
+ ## License
131
+
132
+ MIT
package/package.json CHANGED
@@ -1,7 +1,9 @@
1
1
  {
2
2
  "name": "@vantage-ui/client",
3
- "version": "0.4.3",
3
+ "version": "0.4.4",
4
4
  "description": "A vantage-ui project as a typed, live object graph: lazy references and collections, optimistic edits, server-side actions, React bindings.",
5
+ "keywords": ["vantage", "vantage-ui", "websocket", "realtime", "react", "codegen"],
6
+ "homepage": "https://vantage-ui.com",
5
7
  "license": "MIT",
6
8
  "type": "module",
7
9
  "types": "./dist/index.d.ts",