mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-08-25 04:44:12 +02:00
Run the desktop's model layer in the browser
The browser host now stores data through yaak-models compiled to wasm — the same queries, migrations, cascade rules, duplicate naming and first-run bootstrap the desktop and CLI use — instead of a TypeScript port of them. - crates/yaak-web: the wasm crate. boot() registers an IndexedDB-backed VFS and calls init_standalone; rpc(cmd, payload, label) answers the models_* commands via ClientDb and returns the model_writes it caused; blob get/put through blob_manager. Built like yaak-templates (pkg/ committed); the build script keeps pkg/ and says so when no wasm-capable clang is present, so a desktop bootstrap never depends on one. - models_ops moves from crates/yaak into yaak-models so the wasm crate can use it without the send engine. - The database lives in a SharedWorker (packages/platform/src/web/worker.ts): one process holds the data and pushes writes to every tab, as on the desktop. Where SharedWorker is missing or its script cannot be fetched, a dedicated worker guarded by a Web Lock takes over and a second tab is told so. The worker imports the wasm lazily so a tab's connect is answered instantly; the tab reconnects if it isn't. - packages/platform/src/web loses models.ts, schema.ts, db.ts and the BroadcastChannel; commands.ts forwards model commands to the worker and keeps the fixed answers and refusals. Verified in Chrome, dev and production builds: bootstrap, CRUD across every model type, serde defaults, engine-format ids, Rust copy naming, folder cascade with per-descendant events, single-event workspace delete, reload persistence, two tabs coherent, Send declined with a toast, 8/8 reloads rendering in ~100 ms.
This commit is contained in:
Gregory Schier
@@ -9,6 +9,8 @@
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@yaakapp-internal/rpc-schema": "^1.0.0",
|
||||
"@yaakapp-internal/web": "^1.0.0",
|
||||
"@tauri-apps/api": "^2.11.0",
|
||||
"@tauri-apps/plugin-clipboard-manager": "^2.3.2",
|
||||
"@tauri-apps/plugin-dialog": "^2.7.1",
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { setPlatform } from "./registry";
|
||||
import { createTauriPlatform } from "./tauri";
|
||||
|
||||
// Desktop is the only host today, so it is installed unconditionally and
|
||||
// synchronously — several modules call commands while the module graph is still
|
||||
// evaluating, so there is no later moment to do this in.
|
||||
// The desktop entry. Installed unconditionally and synchronously — several
|
||||
// modules call commands while the module graph is still evaluating, so there is
|
||||
// no later moment to do this in.
|
||||
//
|
||||
// This line is the swap point. A browser build selects its own host here, and
|
||||
// because nothing else in the app imports a host directly, that is the whole
|
||||
// change.
|
||||
// This line is the swap point, and a browser build swaps it by resolving the
|
||||
// package to `index.web.ts` instead of this file. Because nothing else in the
|
||||
// app imports a host directly, that is the whole change.
|
||||
setPlatform(createTauriPlatform());
|
||||
|
||||
export * from "./capabilities";
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import { setPlatform } from "./registry";
|
||||
import { createWebPlatform } from "./web";
|
||||
|
||||
/**
|
||||
* The package entry for browser builds, selected by aliasing
|
||||
* `@yaakapp-internal/platform` to this file (see `YAAK_TARGET=web` in the
|
||||
* client's vite.config.ts).
|
||||
*
|
||||
* A separate entry rather than a branch inside `index.ts`, because a branch
|
||||
* would still leave `import "@tauri-apps/api"` in the module graph: the folded
|
||||
* `if` disappears, but the imports it guarded do not, and those modules cannot
|
||||
* be proven side-effect free. Splitting the entry means a web build never
|
||||
* mentions Tauri at all — and it keeps `index.ts` exactly as the desktop has
|
||||
* always had it.
|
||||
*
|
||||
* Like `index.ts`, this must install the host eagerly and synchronously:
|
||||
* boot-time modules call commands while the module graph is still evaluating.
|
||||
*/
|
||||
setPlatform(createWebPlatform());
|
||||
|
||||
export * from "./capabilities";
|
||||
export { platform, setPlatform } from "./registry";
|
||||
export * from "./types";
|
||||
@@ -0,0 +1,189 @@
|
||||
# The browser host
|
||||
|
||||
Yaak running in a plain tab: no install, no local process. The desktop's own
|
||||
model layer — `yaak-models`, SQLite included — runs compiled to wasm inside a
|
||||
worker the tab talks to, so a browser stores exactly what a desktop install
|
||||
stores, migrations and all.
|
||||
|
||||
Select it at build time and run the frontend alone:
|
||||
|
||||
```shell
|
||||
YAAK_TARGET=web npm run dev --workspace @yaakapp/yaak-client
|
||||
```
|
||||
|
||||
The flag resolves `@yaakapp-internal/platform` to `../index.web.ts`, which
|
||||
installs this host instead of the Tauri one. It is a separate entry rather than
|
||||
a branch inside `index.ts` so that a web build never pulls `@tauri-apps/*` into
|
||||
the module graph at all — a folded branch would drop the code but keep the
|
||||
imports it guarded.
|
||||
|
||||
Desktop builds are untouched: without the flag, `packages/platform/src/index.ts`
|
||||
installs the Tauri host exactly as before.
|
||||
|
||||
## How it fits together
|
||||
|
||||
```
|
||||
tab (index.ts, commands.ts) ──MessagePort──▶ worker.ts ──▶ @yaakapp-internal/web (wasm)
|
||||
◀── model_writes ── crates/yaak-web → yaak-models → SQLite
|
||||
└─ pages in IndexedDB
|
||||
```
|
||||
|
||||
| File | What it is |
|
||||
| --- | --- |
|
||||
| `index.ts` | The `Platform` implementation. |
|
||||
| `commands.ts` | The command table: model commands forward to the worker; the rest is fixed answers and refusals-with-a-reason. |
|
||||
| `connection.ts` | A tab's end of the wire: request/response over a `MessagePort`, event delivery, and the tab's identity (`label`). |
|
||||
| `worker.ts` | The process that owns the database. Loads the wasm, opens the DB once, answers each port, fans `model_writes` out to every port. |
|
||||
| `protocol.ts` | The message shapes both sides import. |
|
||||
| `errors.ts` | `UnsupportedCommandError`, the structured refusal. |
|
||||
| `storage.ts` | `navigator.storage.persist()`. |
|
||||
|
||||
The Rust side is `crates/yaak-web` (`@yaakapp-internal/web`): `boot()`,
|
||||
`rpc(cmd, payload, label)` returning `{ result, events }`, and blob get/put.
|
||||
Its `pkg/` is committed; rebuilding needs a clang with a WebAssembly backend
|
||||
(`brew install llvm`), and `build-wasm.cjs` skips with a notice when there
|
||||
isn't one, so a desktop `npm run bootstrap` never depends on it.
|
||||
|
||||
Behaviours worth knowing before changing anything:
|
||||
|
||||
- **The worker is a `SharedWorker`**, which is what makes "one database, many
|
||||
tabs" true by construction — and makes the browser look like the desktop:
|
||||
one process holds the data, every window talks to it, it pushes writes to
|
||||
all of them. Where `SharedWorker` is missing (Android Chrome) or its script
|
||||
can't be fetched (some embedded browsers), the connection falls back to a
|
||||
dedicated worker that takes a Web Lock; a second tab then gets a clear
|
||||
"already open in another tab" instead of a second SQLite over the same pages.
|
||||
- **Every write is stamped with the calling tab's `label`** as
|
||||
`UpdateSource::Window`, exactly like a desktop window label, so the frontend
|
||||
store's echo handling is unchanged.
|
||||
- **Cascade rules, duplicate naming, id generation, serde defaults, and the
|
||||
lazy first-run bootstrap are all the Rust code's.** Nothing about what a
|
||||
model *is* is decided in TypeScript.
|
||||
- **Persistence is `relaxed-idb`**: SQLite pages live in IndexedDB, writes land
|
||||
in memory and flush shortly after. A tab closing mid-flush loses at most the
|
||||
last few writes.
|
||||
|
||||
## Commands
|
||||
|
||||
109 commands are declared in `@yaakapp-internal/rpc-schema`. This host answers
|
||||
31, declines 44 by name with a reason, and refuses the remaining 34 generically.
|
||||
|
||||
### Implemented (31)
|
||||
|
||||
| Group | Commands |
|
||||
| --- | --- |
|
||||
| Models | `models_workspace_models`, `models_upsert`, `models_delete`, `models_duplicate`, `models_get_settings`, `models_get_graphql_introspection`, `models_upsert_graphql_introspection`, `models_grpc_events`, `models_websocket_events` |
|
||||
| App | `cmd_metadata`, `cmd_get_workspace_meta`, `cmd_default_headers`, `cmd_get_themes`, `cmd_check_for_updates`, `cmd_dismiss_notification`, `cmd_plugin_init_errors` |
|
||||
| Bodies | `cmd_http_response_body`, `cmd_http_response_body_path`, `cmd_http_request_body`, `cmd_get_http_response_events`, `cmd_get_sse_events` |
|
||||
| Plugin surfaces (empty results) | `cmd_http_request_actions`, `cmd_websocket_request_actions`, `cmd_grpc_request_actions`, `cmd_workspace_actions`, `cmd_folder_actions`, `cmd_template_function_summaries`, `cmd_get_http_authentication_summaries`, `cmd_get_http_authentication_config` |
|
||||
| Text | `cmd_format_json`, `cmd_render_template` |
|
||||
|
||||
Some of these answer honestly rather than fully, and the difference matters:
|
||||
|
||||
- `cmd_render_template` returns the template **unrendered**. Resolving variables
|
||||
and calling template functions is plugin work. The preview shows the raw
|
||||
`${[…]}` rather than a wrong value.
|
||||
- `cmd_get_http_authentication_summaries` returns the auth methods Yaak ships as
|
||||
plugins, so the picker is truthful about the product — but
|
||||
`cmd_get_http_authentication_config` returns an empty form, because the plugin
|
||||
that defines the form isn't running.
|
||||
- `cmd_template_function_summaries` returns one provider contributing no
|
||||
functions. Both summary commands are polled every second until they return
|
||||
something, so an empty list is a poll that never stops rather than a quiet no.
|
||||
- `cmd_metadata` reports empty strings for the data, log, plugin and project
|
||||
directories. There is no filesystem behind this host.
|
||||
|
||||
### Declined by name (44)
|
||||
|
||||
Each returns an `UnsupportedCommandError` carrying `cmd`, a user-facing
|
||||
`message`, and the `capability` a caller should have checked. The UI turns it
|
||||
into a toast.
|
||||
|
||||
| Reason | Commands |
|
||||
| --- | --- |
|
||||
| Sending isn't available yet (slice 2) | `cmd_send_http_request`, `cmd_send_ephemeral_request`, `cmd_delete_send_history`, `cmd_delete_all_http_responses`, `cmd_import_url` |
|
||||
| No plugin runtime | `cmd_reload_plugins`, `cmd_plugin_info`, `cmd_plugins_search`, `cmd_plugins_install`, `cmd_plugins_install_from_directory`, `cmd_plugins_uninstall`, `cmd_plugins_updates`, `cmd_plugins_update_all`, `cmd_template_function_config`, `cmd_template_tokens_to_string`, `cmd_call_http_request_action`, `cmd_call_websocket_request_action`, `cmd_call_grpc_request_action`, `cmd_call_workspace_action`, `cmd_call_folder_action`, `cmd_call_http_authentication_action`, `cmd_curl_to_request`, `cmd_format_graphql` |
|
||||
| No filesystem | `cmd_import_data`, `cmd_export_data`, `cmd_save_response`, `cmd_save_base64_to_binary` |
|
||||
| Needs a real socket | `cmd_grpc_reflect`, `cmd_grpc_go`, `cmd_delete_all_grpc_connections`, `cmd_ws_connect`, `cmd_ws_send`, `cmd_ws_close`, `cmd_ws_delete_connections` |
|
||||
| Workspace encryption | `cmd_enable_encryption`, `cmd_disable_encryption`, `cmd_reveal_workspace_key`, `cmd_set_workspace_key`, `cmd_secure_template`, `cmd_decrypt_template` |
|
||||
| One tab, no windows | `cmd_new_child_window`, `cmd_new_main_window`, `cmd_restart` |
|
||||
| Other | `cmd_send_feedback` |
|
||||
|
||||
### Refused generically (34)
|
||||
|
||||
The 30 `cmd_git_*` commands and `cmd_sync_calculate`, `cmd_sync_calculate_fs`,
|
||||
`cmd_sync_apply`, `cmd_sync_watch`. Nothing in the app reaches them unless a
|
||||
workspace has a sync directory, which a browser tab cannot set.
|
||||
|
||||
Anything added to the schema later also lands here, and the error names the
|
||||
command — an unlisted command is a gap in `commands.ts`, and whoever hits it
|
||||
should be able to see which.
|
||||
|
||||
## Capabilities
|
||||
|
||||
Reported honestly, so callers gate on the question rather than on the host:
|
||||
|
||||
| True | False |
|
||||
| --- | --- |
|
||||
| `cookieJar` (the jar stores and edits here; only filling it needs the sender) | `grpc`, `websocket`, `git`, `sync`, `tlsOptions`, `localFiles`, `timeline`, `multiWindow`, `plugins`, `encryption`, `updater`, `clipboardRead`, `systemFonts`, `license` |
|
||||
|
||||
`multiWindow: false` means the host cannot open a *second window* on demand —
|
||||
what `cmd_new_child_window` does for Settings and workspace switching. It is not
|
||||
a claim that nothing else is looking: other tabs may well be open on the same
|
||||
worker, and it pushes every write to all of them regardless.
|
||||
|
||||
## Multiple tabs
|
||||
|
||||
Each tab mints a label at load (`tab_xxxxxxxx`) and sends it with every command;
|
||||
the worker stamps writes with it as `UpdateSource::Window { label }`, standing in
|
||||
for the desktop's window label. The worker fans each write out to every
|
||||
connected tab, and the receiving tab's store applies or ignores it exactly as a
|
||||
desktop window would.
|
||||
|
||||
The label is deliberately *not* kept in `sessionStorage`: duplicating a tab
|
||||
copies session storage, and two tabs sharing one identity would each mistake the
|
||||
other's writes for an echo of their own and drop them.
|
||||
|
||||
## Known gaps
|
||||
|
||||
- **Storage persistence is requested, not guaranteed.** `navigator.storage.persist()`
|
||||
runs at boot; browsers grant it on their own heuristics and often decline on
|
||||
`localhost`.
|
||||
- **`pkg/yaak_web_bg.wasm` is 3.8 MB and committed** (no `wasm-opt`, matching
|
||||
`yaak-templates`). It will churn on every model-layer change; a CI-built
|
||||
artifact is the real answer.
|
||||
- **Settings opens in the same tab** and is left with the browser's Back button.
|
||||
- **Settings shows Data Directory / Logs Directory rows** with empty values; the
|
||||
Create Workspace dialog offers directory sync and encryption. Should be gated
|
||||
on `localFiles` / `sync` / `encryption`.
|
||||
- **`cmd_render_template` returns the template unrendered.** Resolving variables
|
||||
and calling template functions is plugin work.
|
||||
- **A declined command logs an unhandled rejection** next to its toast — the
|
||||
app's own `createFastMutation.mutate`, same on desktop.
|
||||
- **`yaak-rpc-schema` does not come to wasm** (it pulls the git/gRPC/plugin
|
||||
crates for their types), so the crate declares the handful of request shapes
|
||||
it needs locally, and `commands.ts` stays typed against `RpcSchema`.
|
||||
|
||||
## What slice 2 (the send proxy) will need from this layer
|
||||
|
||||
Sending becomes a stateless hosted service; this layer stays the only place data
|
||||
lives. Concretely:
|
||||
|
||||
1. **A rendered request to send.** The client assembles `HttpSendInputs` and
|
||||
posts it. Nothing about the workspace is uploaded except what this request
|
||||
needs.
|
||||
2. **Cookies out, cookies in.** The active `cookie_jar` model's `cookies` array
|
||||
goes up with the request; the proxy returns the jar as the exchange left it,
|
||||
and the client upserts it back through `models_upsert` like any other write.
|
||||
The proxy keeps nothing.
|
||||
3. **A response body sink.** `blob_put(responseId, bytes)` in the worker
|
||||
writes through the desktop's `blob_manager`, chunked the way it chunks.
|
||||
Streaming will want an append path rather than one whole-body write.
|
||||
4. **A request body sink** under `${responseId}.request`, which
|
||||
`cmd_http_request_body` already reads.
|
||||
5. **Response and timeline models.** `cmd_send_http_request` currently declines;
|
||||
it will instead upsert an `http_response` as the exchange progresses, plus
|
||||
`http_response_event` rows once `timeline` becomes true. Both flow through
|
||||
the same `write()` helper, so other tabs see a send land live.
|
||||
6. **Blob cleanup is the desktop's.** `delete_http_response` and
|
||||
`delete_workspace` in `yaak-models` already remove blob chunks.
|
||||
@@ -0,0 +1,341 @@
|
||||
/**
|
||||
* The command table: what this host answers, and what it declines and why.
|
||||
*
|
||||
* The model commands are forwarded to the worker, where the desktop's own
|
||||
* model layer answers them — same queries, same migrations, same cascade
|
||||
* rules — so nothing about *what a model is* is decided in this file. What is
|
||||
* decided here is the rest of the desktop's command surface: a handful of
|
||||
* fixed answers that are true of a browser tab, and the refusals. The refusals
|
||||
* are the important half: a command that silently returns nothing leaves the
|
||||
* UI showing something that isn't true, whereas a refusal with a reason becomes
|
||||
* a toast the user can act on. So each unsupported command is listed by name
|
||||
* with the reason, and anything not listed at all is refused generically
|
||||
* rather than guessed at.
|
||||
*
|
||||
* The command names are `keyof RpcSchema`, the same generated wire schema the
|
||||
* desktop's router is built from, so a command renamed or added in Rust shows
|
||||
* up here as a type error rather than as a runtime surprise.
|
||||
*/
|
||||
|
||||
import type { RpcSchema } from "@yaakapp-internal/rpc-schema";
|
||||
import type { CapabilityName, RpcPayload } from "../types";
|
||||
import type { WorkerConnection } from "./connection";
|
||||
import { unsupported } from "./errors";
|
||||
|
||||
export type AppCmd = keyof RpcSchema;
|
||||
|
||||
type Handler = (payload: RpcPayload, db: WorkerConnection) => Promise<unknown>;
|
||||
|
||||
/** Placeholder shown wherever the desktop would show a real filesystem path. */
|
||||
const NO_PATH = "";
|
||||
|
||||
function str(payload: RpcPayload, key: string): string | null {
|
||||
const value = payload[key];
|
||||
return typeof value === "string" && value !== "" ? value : null;
|
||||
}
|
||||
|
||||
/** Like `str`, but for fields where an empty string is a legitimate value. */
|
||||
function text(payload: RpcPayload, key: string): string {
|
||||
const value = payload[key];
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Commands this host answers itself.
|
||||
*
|
||||
* Anything here either reads and writes the browser's own database, or is a
|
||||
* fixed answer that is true of this host — not a stub standing in for something
|
||||
* that should work.
|
||||
*/
|
||||
const HANDLERS: Partial<Record<AppCmd, Handler>> = {
|
||||
/* ------------------------------- models -------------------------------- */
|
||||
|
||||
// Answered by the model layer itself, in the worker. The payload goes over
|
||||
// untouched and the answer comes back untouched: this file has no opinion
|
||||
// about models, and it would be wrong for it to grow one.
|
||||
models_workspace_models: (payload, db) => db.rpc("models_workspace_models", payload),
|
||||
models_upsert: (payload, db) => db.rpc("models_upsert", payload),
|
||||
models_delete: (payload, db) => db.rpc("models_delete", payload),
|
||||
models_duplicate: (payload, db) => db.rpc("models_duplicate", payload),
|
||||
models_get_settings: (payload, db) => db.rpc("models_get_settings", payload),
|
||||
models_get_graphql_introspection: (payload, db) =>
|
||||
db.rpc("models_get_graphql_introspection", payload),
|
||||
models_upsert_graphql_introspection: (payload, db) =>
|
||||
db.rpc("models_upsert_graphql_introspection", payload),
|
||||
models_grpc_events: (payload, db) => db.rpc("models_grpc_events", payload),
|
||||
models_websocket_events: (payload, db) => db.rpc("models_websocket_events", payload),
|
||||
cmd_get_workspace_meta: (payload, db) => db.rpc("cmd_get_workspace_meta", payload),
|
||||
|
||||
/* -------------------------------- app ---------------------------------- */
|
||||
|
||||
async cmd_metadata() {
|
||||
return {
|
||||
isDev: true,
|
||||
version: "0.0.0-web",
|
||||
cliVersion: null,
|
||||
name: "Yaak",
|
||||
// The desktop hands out real directories here and the UI offers to open
|
||||
// them. There is no filesystem behind this host, and the capability flags
|
||||
// are what the UI should be gating those affordances on.
|
||||
appDataDir: NO_PATH,
|
||||
appLogDir: NO_PATH,
|
||||
vendoredPluginDir: NO_PATH,
|
||||
defaultProjectDir: NO_PATH,
|
||||
featureUpdater: false,
|
||||
featureLicense: false,
|
||||
};
|
||||
},
|
||||
|
||||
// The theme package ships its own defaults, so an empty list is a complete
|
||||
// answer rather than a degraded one — themes beyond those come from plugins.
|
||||
async cmd_get_themes() {
|
||||
return [];
|
||||
},
|
||||
|
||||
async cmd_default_headers() {
|
||||
// Mirrors `default_headers()` in crates/yaak-models/src/queries/workspaces.rs
|
||||
return [
|
||||
{ enabled: true, name: "User-Agent", value: "yaak", id: null },
|
||||
{ enabled: true, name: "Accept", value: "*/*", id: null },
|
||||
];
|
||||
},
|
||||
|
||||
async cmd_plugin_init_errors() {
|
||||
return [];
|
||||
},
|
||||
|
||||
async cmd_check_for_updates() {
|
||||
return false;
|
||||
},
|
||||
|
||||
async cmd_dismiss_notification() {
|
||||
return null;
|
||||
},
|
||||
|
||||
// Plugin-contributed menus. Empty is honest: no plugin runtime, no actions.
|
||||
async cmd_http_request_actions() {
|
||||
return [];
|
||||
},
|
||||
async cmd_websocket_request_actions() {
|
||||
return [];
|
||||
},
|
||||
async cmd_grpc_request_actions() {
|
||||
return [];
|
||||
},
|
||||
async cmd_workspace_actions() {
|
||||
return [];
|
||||
},
|
||||
async cmd_folder_actions() {
|
||||
return [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Both of these are polled once a second until they answer with something, so
|
||||
* an empty list is not a quiet no — it is a poll that never stops.
|
||||
*
|
||||
* The auth list names what Yaak actually offers, so the picker tells the
|
||||
* truth about the product even though the form behind each entry stays empty
|
||||
* until plugins run here. Template functions get the opposite treatment: one
|
||||
* provider contributing no functions. That settles the poll while putting
|
||||
* nothing in the autocomplete, which is the honest answer — a function the
|
||||
* user could insert but nothing could evaluate would be worse than none.
|
||||
*/
|
||||
async cmd_get_http_authentication_summaries() {
|
||||
return HTTP_AUTHENTICATION_SUMMARIES;
|
||||
},
|
||||
async cmd_template_function_summaries() {
|
||||
return [{ pluginRefId: "web", functions: [] }];
|
||||
},
|
||||
|
||||
async cmd_get_http_authentication_config() {
|
||||
return { args: [], pluginRefId: "web" };
|
||||
},
|
||||
|
||||
async cmd_format_json(payload) {
|
||||
const source = text(payload, "text");
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(source), null, 2);
|
||||
} catch {
|
||||
// Formatting invalid JSON is a no-op, not an error: the editor calls this
|
||||
// while the user is still typing.
|
||||
return source;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Rendering resolves variables and calls template functions, and the
|
||||
* functions live in plugins. Handing the template back unrendered is what the
|
||||
* preview then shows — the raw `${[...]}`, which is at least the thing the
|
||||
* user typed rather than a wrong value.
|
||||
*/
|
||||
async cmd_render_template(payload) {
|
||||
return text(payload, "template");
|
||||
},
|
||||
|
||||
/* ------------------------------- bodies -------------------------------- */
|
||||
|
||||
async cmd_http_response_body(payload, db) {
|
||||
const responseId = str(payload, "responseId");
|
||||
if (responseId == null) return { content: "" };
|
||||
|
||||
if (str(payload, "filter") != null) {
|
||||
return {
|
||||
content: "",
|
||||
error: "Response filters come from a plugin, which this host doesn't run yet",
|
||||
};
|
||||
}
|
||||
|
||||
const bytes = await db.blobGet(responseId);
|
||||
return { content: bytes == null ? "" : new TextDecoder().decode(bytes) };
|
||||
},
|
||||
|
||||
// Bodies live in this database, not on a disk, so there is no path to give.
|
||||
async cmd_http_response_body_path() {
|
||||
return null;
|
||||
},
|
||||
|
||||
async cmd_http_request_body(payload, db) {
|
||||
const responseId = str(payload, "responseId");
|
||||
if (responseId == null) return null;
|
||||
// Keyed the way the desktop keys it: the request bytes belong to the
|
||||
// response that recorded them.
|
||||
const bytes = await db.blobGet(`${responseId}.request`);
|
||||
return bytes == null ? null : Array.from(bytes);
|
||||
},
|
||||
|
||||
async cmd_get_http_response_events() {
|
||||
return [];
|
||||
},
|
||||
|
||||
async cmd_get_sse_events() {
|
||||
return [];
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* The auth methods Yaak ships as plugins today (plugins/auth-*). Listed so the
|
||||
* picker is truthful about the product; choosing one currently yields an empty
|
||||
* config form, because the plugin that defines the form isn't running.
|
||||
*/
|
||||
const HTTP_AUTHENTICATION_SUMMARIES = [
|
||||
{ name: "apikey", label: "API Key", shortLabel: "API Key" },
|
||||
{ name: "aws", label: "AWS SigV4", shortLabel: "AWS" },
|
||||
{ name: "basic", label: "Basic Auth", shortLabel: "Basic" },
|
||||
{ name: "bearer", label: "Bearer Token", shortLabel: "Bearer" },
|
||||
{ name: "jwt", label: "JWT Bearer", shortLabel: "JWT" },
|
||||
{ name: "ntlm", label: "NTLM", shortLabel: "NTLM" },
|
||||
{ name: "oauth1", label: "OAuth 1.0", shortLabel: "OAuth 1" },
|
||||
{ name: "oauth2", label: "OAuth 2.0", shortLabel: "OAuth 2" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Commands this host declines, each with the reason a user would need.
|
||||
*
|
||||
* Naming them individually rather than letting them fall through to a generic
|
||||
* refusal is deliberate: "sending is not available yet" and "Yaak in a browser
|
||||
* has no filesystem" are different situations, and the second is permanent
|
||||
* while the first is a slice away.
|
||||
*/
|
||||
const DECLINED: Partial<Record<AppCmd, [reason: string, capability: CapabilityName | null]>> = {
|
||||
// Sending — the next slice. Everything else about a request works today;
|
||||
// only the part that puts bytes on the network is missing.
|
||||
cmd_send_http_request: [
|
||||
"Sending isn't available in the browser yet — everything else about this request is saved",
|
||||
null,
|
||||
],
|
||||
cmd_send_ephemeral_request: [
|
||||
"Sending isn't available in the browser yet — everything else about this request is saved",
|
||||
null,
|
||||
],
|
||||
cmd_curl_to_request: ["Importing from cURL needs a plugin, which this host doesn't run", null],
|
||||
|
||||
// Protocols that need a real socket.
|
||||
cmd_grpc_reflect: ["gRPC isn't available in the browser", "grpc"],
|
||||
cmd_grpc_go: ["gRPC isn't available in the browser", "grpc"],
|
||||
cmd_delete_all_grpc_connections: ["gRPC isn't available in the browser", "grpc"],
|
||||
cmd_ws_connect: ["WebSocket requests aren't available in the browser yet", "websocket"],
|
||||
cmd_ws_send: ["WebSocket requests aren't available in the browser yet", "websocket"],
|
||||
cmd_ws_close: ["WebSocket requests aren't available in the browser yet", "websocket"],
|
||||
cmd_ws_delete_connections: ["WebSocket requests aren't available in the browser yet", "websocket"],
|
||||
|
||||
// Anything that needs files the page can't reach.
|
||||
cmd_import_data: ["Importing from a file needs a filesystem, which a browser tab has no", "localFiles"],
|
||||
cmd_import_url: ["Importing from a URL needs the send proxy, which isn't available yet", null],
|
||||
cmd_export_data: ["Exporting to a file isn't available in the browser yet", "localFiles"],
|
||||
cmd_save_response: ["Saving a response to disk isn't available in the browser", "localFiles"],
|
||||
cmd_save_base64_to_binary: ["Saving to disk isn't available in the browser", "localFiles"],
|
||||
cmd_format_graphql: ["Formatting GraphQL needs a plugin, which this host doesn't run", null],
|
||||
|
||||
// Windows. A tab is the window, and there is only ever one of it.
|
||||
cmd_new_child_window: ["Yaak in a browser uses one tab", "multiWindow"],
|
||||
cmd_new_main_window: ["Yaak in a browser uses one tab", "multiWindow"],
|
||||
cmd_restart: ["Reload the page to restart Yaak", null],
|
||||
|
||||
// Workspace encryption is backed by a key the host keeps for you; a page has
|
||||
// nowhere to keep one that a page couldn't also read.
|
||||
cmd_enable_encryption: ["Workspace encryption isn't available in the browser", "encryption"],
|
||||
cmd_disable_encryption: ["Workspace encryption isn't available in the browser", "encryption"],
|
||||
cmd_reveal_workspace_key: ["Workspace encryption isn't available in the browser", "encryption"],
|
||||
cmd_set_workspace_key: ["Workspace encryption isn't available in the browser", "encryption"],
|
||||
cmd_secure_template: ["Workspace encryption isn't available in the browser", "encryption"],
|
||||
cmd_decrypt_template: ["Workspace encryption isn't available in the browser", "encryption"],
|
||||
|
||||
// The plugin runtime is a Node process. Nothing here runs one.
|
||||
cmd_reload_plugins: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugin_info: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugins_search: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugins_install: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugins_install_from_directory: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugins_uninstall: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugins_updates: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_plugins_update_all: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_template_function_config: ["Template functions come from plugins, which this host doesn't run", "plugins"],
|
||||
cmd_template_tokens_to_string: ["Template functions come from plugins, which this host doesn't run", "plugins"],
|
||||
cmd_call_http_request_action: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_call_websocket_request_action: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_call_grpc_request_action: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_call_workspace_action: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_call_folder_action: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
cmd_call_http_authentication_action: ["Plugins aren't available in the browser yet", "plugins"],
|
||||
|
||||
// Sending history and its bookkeeping belong to the send slice.
|
||||
cmd_delete_send_history: ["Sending isn't available in the browser yet", null],
|
||||
cmd_delete_all_http_responses: ["Sending isn't available in the browser yet", null],
|
||||
|
||||
cmd_send_feedback: ["Feedback goes through the desktop app for now", null],
|
||||
};
|
||||
|
||||
/**
|
||||
* The support table, for documentation and for the console.
|
||||
*
|
||||
* Derived from the two maps above rather than written alongside them, so it
|
||||
* cannot drift from what the host actually does.
|
||||
*/
|
||||
export function commandSupport(): {
|
||||
implemented: string[];
|
||||
declined: { cmd: string; reason: string; capability: CapabilityName | null }[];
|
||||
} {
|
||||
return {
|
||||
implemented: Object.keys(HANDLERS).sort(),
|
||||
declined: Object.entries(DECLINED)
|
||||
.map(([cmd, [reason, capability]]) => ({ cmd, reason, capability }))
|
||||
.sort((a, b) => a.cmd.localeCompare(b.cmd)),
|
||||
};
|
||||
}
|
||||
|
||||
export async function runCommand(
|
||||
cmd: string,
|
||||
payload: RpcPayload,
|
||||
db: WorkerConnection,
|
||||
): Promise<unknown> {
|
||||
const handler = HANDLERS[cmd as AppCmd];
|
||||
if (handler != null) return handler(payload, db);
|
||||
|
||||
const declined = DECLINED[cmd as AppCmd];
|
||||
if (declined != null) throw unsupported(cmd, declined[0], declined[1]);
|
||||
|
||||
// Git and sync land here, along with anything added to the schema since. The
|
||||
// message names the command because an unlisted one is a gap in this file,
|
||||
// and whoever hits it should be able to see which.
|
||||
throw unsupported(cmd, `\`${cmd}\` isn't available when Yaak runs in a browser`);
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* A tab's end of the wire to the worker that owns the database.
|
||||
*
|
||||
* Constructible synchronously and usable immediately, which is the hard
|
||||
* requirement: boot-time modules call commands while the module graph is still
|
||||
* evaluating, so there is no later moment to connect in. Messages posted before
|
||||
* the worker has opened the database sit in the port until it has, and the
|
||||
* app's own top-level await then doubles as the boot gate — nothing renders
|
||||
* until the first command has answered, and it can only answer once the
|
||||
* database is open.
|
||||
*/
|
||||
|
||||
import type { Unsubscribe } from "../types";
|
||||
import { type FromWorker, type ToWorker, WORKER_NAME } from "./protocol";
|
||||
|
||||
/**
|
||||
* How long a freshly connected worker gets to say hello.
|
||||
*
|
||||
* A live worker answers in the same turn it is connected — the worker script
|
||||
* is tiny and imports the model layer lazily, so this measures liveness, not
|
||||
* load time. The one thing that can push it past this is a slow first fetch of
|
||||
* the script itself, and the cost of a false alarm there is a second connect
|
||||
* that the browser resolves to the same, now-live worker. The cost of guessing
|
||||
* high is a user staring at a blank page, so err low.
|
||||
*/
|
||||
const HELLO_TIMEOUT_MS = 400;
|
||||
/** Shared-worker connects to try before settling for a dedicated worker. */
|
||||
const MAX_SHARED_ATTEMPTS = 3;
|
||||
|
||||
type Pending = {
|
||||
resolve: (value: unknown) => void;
|
||||
reject: (reason: Error) => void;
|
||||
/** Kept so the request can be re-sent if the worker has to be replaced. */
|
||||
message: ToWorker;
|
||||
transfer: Transferable[];
|
||||
};
|
||||
|
||||
export class WorkerConnection {
|
||||
private port: MessagePort | Worker;
|
||||
private readonly pending = new Map<number, Pending>();
|
||||
private readonly listeners = new Map<string, Set<(payload: unknown) => void>>();
|
||||
private nextId = 1;
|
||||
private bootError: string | null = null;
|
||||
|
||||
/**
|
||||
* This tab's identity, standing in for the desktop's window label. Stamped
|
||||
* on every write this tab makes, so the store can tell an echo of its own
|
||||
* write from another tab's. Minted per page load, not kept in
|
||||
* `sessionStorage`, on purpose: duplicating a tab copies session storage,
|
||||
* and two tabs claiming one identity would each drop the other's writes as
|
||||
* echoes.
|
||||
*/
|
||||
readonly label = `tab_${crypto.randomUUID().slice(0, 8)}`;
|
||||
|
||||
/** Whether the database is shared with other tabs, or this tab holds it alone. */
|
||||
shared: boolean;
|
||||
|
||||
/** True once the worker has said anything at all; after that, no fallback. */
|
||||
private heard = false;
|
||||
|
||||
/** How many times a shared worker was tried before giving up on sharing. */
|
||||
private sharedAttempts = 0;
|
||||
|
||||
constructor() {
|
||||
if (typeof SharedWorker !== "undefined") {
|
||||
this.port = this.connectShared();
|
||||
this.shared = true;
|
||||
} else {
|
||||
// No SharedWorker (Android Chrome). One tab owns the database; the
|
||||
// worker takes a lock and a second tab is told so.
|
||||
this.port = this.connectDedicated();
|
||||
this.shared = false;
|
||||
}
|
||||
|
||||
// Let the worker forget this port. Not load-bearing — a SharedWorker port
|
||||
// that never says goodbye is a leaked entry in a Set — but tidy.
|
||||
window.addEventListener("pagehide", () => this.post({ type: "goodbye" }));
|
||||
}
|
||||
|
||||
/*
|
||||
* `new URL("./worker.ts", import.meta.url)` is written out inline at each
|
||||
* constructor on purpose: that exact syntax is what the bundler pattern-
|
||||
* matches to know it must bundle a worker entry. Hoisted into a variable it
|
||||
* becomes an asset URL and ships as raw TypeScript.
|
||||
*/
|
||||
|
||||
private connectShared(): MessagePort {
|
||||
this.sharedAttempts += 1;
|
||||
const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
|
||||
type: "module",
|
||||
name: WORKER_NAME,
|
||||
});
|
||||
// A SharedWorker whose script fails to load fires `error` on the
|
||||
// SharedWorker object and nothing else — the port just goes quiet. Some
|
||||
// embedded browsers can't fetch shared-worker scripts at all.
|
||||
worker.onerror = () => {
|
||||
if (!this.heard) this.replaceWorker("script failed to load");
|
||||
};
|
||||
this.attach(worker.port);
|
||||
this.expectHello(worker.port);
|
||||
return worker.port;
|
||||
}
|
||||
|
||||
private connectDedicated(): Worker {
|
||||
const worker = new Worker(new URL("./worker.ts", import.meta.url), {
|
||||
type: "module",
|
||||
name: WORKER_NAME,
|
||||
});
|
||||
this.attach(worker);
|
||||
this.expectHello(worker);
|
||||
return worker;
|
||||
}
|
||||
|
||||
private attach(port: MessagePort | Worker): void {
|
||||
this.heard = false;
|
||||
port.onmessage = (e: MessageEvent<FromWorker>) => this.receive(e.data);
|
||||
if (port instanceof MessagePort) port.start();
|
||||
}
|
||||
|
||||
/**
|
||||
* The worker says hello synchronously on connect. If it doesn't, the port is
|
||||
* attached to nothing that will ever answer — most often a shared worker
|
||||
* caught mid-teardown, which is what a tab reloading itself hands to the
|
||||
* next document — and the only move is to connect again.
|
||||
*/
|
||||
private expectHello(port: MessagePort | Worker): void {
|
||||
// Passed in rather than read from `this.port`, which the constructor has
|
||||
// not assigned yet the first time this runs.
|
||||
setTimeout(() => {
|
||||
if (!this.heard && this.port === port) this.replaceWorker("no reply from worker");
|
||||
}, HELLO_TIMEOUT_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace a worker that never answered. Tries sharing again a few times —
|
||||
* a torn-down shared worker is gone by then and a fresh one comes up — and
|
||||
* only then gives up on sharing and takes a dedicated worker.
|
||||
*/
|
||||
private replaceWorker(why: string): void {
|
||||
if (this.sharedAttempts < MAX_SHARED_ATTEMPTS) {
|
||||
console.warn(`Reconnecting to the database worker (${why})`);
|
||||
this.port = this.connectShared();
|
||||
this.shared = true;
|
||||
} else {
|
||||
console.warn(`Falling back to a dedicated database worker (${why})`);
|
||||
this.port = this.connectDedicated();
|
||||
this.shared = false;
|
||||
}
|
||||
// Whatever was posted to the dead port never arrived. Bodies were copied,
|
||||
// not transferred, precisely so they can be re-sent from here.
|
||||
for (const p of this.pending.values()) {
|
||||
this.post(p.message, p.transfer);
|
||||
}
|
||||
}
|
||||
|
||||
private post(message: ToWorker, transfer: Transferable[] = []): void {
|
||||
this.port.postMessage(message, transfer);
|
||||
}
|
||||
|
||||
private receive(message: FromWorker): void {
|
||||
this.heard = true;
|
||||
switch (message.type) {
|
||||
case "hello":
|
||||
case "ready":
|
||||
return;
|
||||
case "boot_error":
|
||||
this.bootError = message.message;
|
||||
// Nothing will ever answer, and the app cannot render without an
|
||||
// answer, so say what happened where the user can see it. This is the
|
||||
// page's whole content at this point.
|
||||
showBootError(message.message);
|
||||
for (const [id, p] of this.pending) {
|
||||
this.pending.delete(id);
|
||||
p.reject(new Error(message.message));
|
||||
}
|
||||
return;
|
||||
case "result": {
|
||||
const p = this.pending.get(message.id);
|
||||
this.pending.delete(message.id);
|
||||
p?.resolve(message.result);
|
||||
return;
|
||||
}
|
||||
case "error": {
|
||||
const p = this.pending.get(message.id);
|
||||
this.pending.delete(message.id);
|
||||
p?.reject(new Error(message.message));
|
||||
return;
|
||||
}
|
||||
case "event":
|
||||
this.deliver(message.event, message.payload);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
private request<T>(build: (id: number) => ToWorker, transfer: Transferable[] = []): Promise<T> {
|
||||
if (this.bootError != null) return Promise.reject(new Error(this.bootError));
|
||||
const id = this.nextId++;
|
||||
const message = build(id);
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
this.pending.set(id, { resolve: resolve as (v: unknown) => void, reject, message, transfer });
|
||||
this.post(message, transfer);
|
||||
});
|
||||
}
|
||||
|
||||
rpc<T>(cmd: string, payload: unknown): Promise<T> {
|
||||
return this.request<T>((id) => ({ type: "rpc", id, cmd, payload, label: this.label }));
|
||||
}
|
||||
|
||||
async blobGet(blobId: string): Promise<Uint8Array<ArrayBuffer> | null> {
|
||||
const buf = await this.request<ArrayBuffer | null>((id) => ({ type: "blob_get", id, blobId }));
|
||||
return buf == null ? null : new Uint8Array(buf);
|
||||
}
|
||||
|
||||
blobPut(blobId: string, bytes: Uint8Array): Promise<void> {
|
||||
// Copied rather than transferred: transferring would detach the caller's
|
||||
// buffer, and would leave nothing to re-send if the worker is replaced.
|
||||
// Bodies are small enough that the copy is cheaper than the bookkeeping.
|
||||
const copy = new Uint8Array(bytes.byteLength);
|
||||
copy.set(bytes);
|
||||
return this.request<void>((id) => ({ type: "blob_put", id, blobId, bytes: copy.buffer }));
|
||||
}
|
||||
|
||||
blobDelete(blobId: string): Promise<void> {
|
||||
return this.request<void>((id) => ({ type: "blob_delete", id, blobId }));
|
||||
}
|
||||
|
||||
/* ------------------------------- events -------------------------------- */
|
||||
|
||||
listen(event: string, callback: (payload: unknown) => void): Unsubscribe {
|
||||
let set = this.listeners.get(event);
|
||||
if (set == null) {
|
||||
set = new Set();
|
||||
this.listeners.set(event, set);
|
||||
}
|
||||
set.add(callback);
|
||||
return () => {
|
||||
set.delete(callback);
|
||||
if (set.size === 0) this.listeners.delete(event);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Deliver an event to this tab's listeners.
|
||||
*
|
||||
* Used for what the worker pushes, and for the app's own local emits (a
|
||||
* plugin round trip, a stream teardown). Local emits stay local: every
|
||||
* emitter in the app is replying to something *this* tab is doing.
|
||||
*/
|
||||
deliver(event: string, payload: unknown): void {
|
||||
const set = this.listeners.get(event);
|
||||
if (set == null) return;
|
||||
// Copied because a listener may unsubscribe itself while being called
|
||||
for (const callback of Array.from(set)) {
|
||||
try {
|
||||
callback(payload);
|
||||
} catch (err) {
|
||||
console.error(`Listener for \`${event}\` threw`, err);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showBootError(message: string): void {
|
||||
const root = document.getElementById("root");
|
||||
if (root == null || root.childElementCount > 0) return;
|
||||
const el = document.createElement("div");
|
||||
el.style.cssText =
|
||||
"font: 15px/1.5 system-ui, sans-serif; max-width: 32rem; margin: 20vh auto; padding: 0 1rem; color: inherit";
|
||||
el.textContent = message;
|
||||
root.appendChild(el);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { CapabilityName } from "../types";
|
||||
|
||||
/**
|
||||
* What this host says when it is asked for something it doesn't have.
|
||||
*
|
||||
* A rejected command reaches the user as a toast built from `message`, so the
|
||||
* message is the user-facing text and has to read like one. The structured
|
||||
* fields alongside it are for code: `capability` names the switch a caller
|
||||
* should have checked first, and `cmd` identifies the command without anyone
|
||||
* having to parse prose back out of the message.
|
||||
*/
|
||||
export class UnsupportedCommandError extends Error {
|
||||
readonly name = "UnsupportedCommandError";
|
||||
/** Stable discriminator, so a caller can branch without matching on text. */
|
||||
readonly code = "unsupported_command";
|
||||
readonly cmd: string;
|
||||
readonly capability: CapabilityName | null;
|
||||
|
||||
constructor(cmd: string, message: string, capability: CapabilityName | null = null) {
|
||||
super(message);
|
||||
this.cmd = cmd;
|
||||
this.capability = capability;
|
||||
}
|
||||
}
|
||||
|
||||
export function unsupported(
|
||||
cmd: string,
|
||||
reason: string,
|
||||
capability: CapabilityName | null = null,
|
||||
): UnsupportedCommandError {
|
||||
return new UnsupportedCommandError(cmd, reason, capability);
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
/**
|
||||
* The browser host: Yaak in a tab, with no install and nothing running locally.
|
||||
*
|
||||
* The desktop host forwards to a Rust process. This one forwards to a worker
|
||||
* running the same model layer compiled to wasm, over a `MessagePort` instead
|
||||
* of Tauri's IPC. The worker owns the database and is shared by every tab on
|
||||
* the origin, so two tabs stay coherent for the same reason two desktop windows
|
||||
* do: one process holds the data and pushes every write to all of them.
|
||||
*
|
||||
* What a page genuinely cannot do is not faked. There is no file dialog, no
|
||||
* second window, no clipboard read without a prompt, and — in this slice — no
|
||||
* sending. Those report false through `capabilities` and refuse with a reason
|
||||
* if called anyway, so a missing feature shows up as a disabled control or a
|
||||
* toast that explains itself, never as a silent no-op.
|
||||
*/
|
||||
|
||||
import type {
|
||||
DragDropEvent,
|
||||
OsType,
|
||||
Platform,
|
||||
PlatformCapabilities,
|
||||
PlatformWindow,
|
||||
RpcPayload,
|
||||
RpcStreamHandle,
|
||||
Unsubscribe,
|
||||
} from "../types";
|
||||
import { commandSupport, runCommand } from "./commands";
|
||||
import { WorkerConnection } from "./connection";
|
||||
import { unsupported } from "./errors";
|
||||
import { requestPersistence } from "./storage";
|
||||
|
||||
/** What this host can do, reported honestly. */
|
||||
function capabilitiesFor(): PlatformCapabilities {
|
||||
return {
|
||||
grpc: false,
|
||||
websocket: false,
|
||||
git: false,
|
||||
sync: false,
|
||||
// Certificates and proxies are decided by whoever puts the bytes on the
|
||||
// wire. Nothing in the browser does yet.
|
||||
tlsOptions: false,
|
||||
// The jar can be edited and stored here; only filling it needs the sender.
|
||||
cookieJar: true,
|
||||
localFiles: false,
|
||||
timeline: false,
|
||||
// Whether the host can put a *second window* on this data on demand — what
|
||||
// `cmd_new_child_window` does for Settings and workspace switching. A tab
|
||||
// can't, so those open in place instead. This is not a claim that nothing
|
||||
// else is looking: other tabs may well be open on the same worker, and it
|
||||
// pushes every write to all of them regardless of this flag.
|
||||
multiWindow: false,
|
||||
plugins: false,
|
||||
encryption: false,
|
||||
updater: false,
|
||||
// Reading needs a permission prompt at first paint, which is a bad ask for
|
||||
// an app people paste bearer tokens into. Pasting still works everywhere.
|
||||
clipboardRead: false,
|
||||
systemFonts: false,
|
||||
license: false,
|
||||
};
|
||||
}
|
||||
|
||||
/** Match `@tauri-apps/plugin-os` spellings so layout code needs no new branch. */
|
||||
function detectOsType(): OsType {
|
||||
const ua = navigator.userAgent;
|
||||
if (/Mac|iPhone|iPad|iPod/.test(ua)) return "macos";
|
||||
if (/Win/.test(ua)) return "windows";
|
||||
if (/Android/.test(ua)) return "android";
|
||||
return "linux";
|
||||
}
|
||||
|
||||
/**
|
||||
* The Tauri host-plugin commands, which ride outside the RPC envelope.
|
||||
*
|
||||
* `set_title` has a real browser equivalent. `set_theme` paints the native
|
||||
* window frame behind the webview, which a tab has neither of. The license and
|
||||
* font plugins answer with "nothing", which is true and keeps the settings
|
||||
* screens rendering instead of erroring.
|
||||
*/
|
||||
async function hostPluginCommand<T>(cmd: string, payload?: RpcPayload): Promise<T> {
|
||||
switch (cmd) {
|
||||
case "plugin:yaak-mac-window|set_title": {
|
||||
const title = payload?.title;
|
||||
document.title = typeof title === "string" ? title : "Yaak";
|
||||
return undefined as T;
|
||||
}
|
||||
case "plugin:yaak-mac-window|set_theme":
|
||||
return undefined as T;
|
||||
case "plugin:yaak-fonts|list":
|
||||
// Enumerating installed fonts is a fingerprinting surface browsers don't
|
||||
// offer. The pickers fall back to their bundled families.
|
||||
return { editorFonts: [], uiFonts: [] } as T;
|
||||
default:
|
||||
throw unsupported(cmd, `\`${cmd}\` isn't available when Yaak runs in a browser`);
|
||||
}
|
||||
}
|
||||
|
||||
function createWindow(db: WorkerConnection): PlatformWindow {
|
||||
const noop = async () => {};
|
||||
|
||||
return {
|
||||
// Stands in for the desktop's window label: the identity model writes carry
|
||||
// so a tab can tell its own echo from another tab's write.
|
||||
label: db.label,
|
||||
|
||||
// A tab manages its own frame. These exist because the interface names
|
||||
// them; the UI only reaches for them behind `multiWindow`.
|
||||
show: noop,
|
||||
close: noop,
|
||||
minimize: noop,
|
||||
maximize: noop,
|
||||
unmaximize: noop,
|
||||
isMaximized: async () => false,
|
||||
isFullscreen: async () => document.fullscreenElement != null,
|
||||
setZoom: noop,
|
||||
|
||||
// Null means "no opinion, let CSS decide". The desktop returns a real value
|
||||
// because applying a theme forces the window appearance and poisons the
|
||||
// media query; nothing does that here, so `prefers-color-scheme` is the
|
||||
// honest answer and the theme package already falls back to it.
|
||||
theme: async () => null,
|
||||
|
||||
onThemeChanged(callback) {
|
||||
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const listener = () => callback(media.matches ? "dark" : "light");
|
||||
media.addEventListener("change", listener);
|
||||
return () => media.removeEventListener("change", listener);
|
||||
},
|
||||
|
||||
onFocusChanged(callback) {
|
||||
const onFocus = () => callback(true);
|
||||
const onBlur = () => callback(false);
|
||||
window.addEventListener("focus", onFocus);
|
||||
window.addEventListener("blur", onBlur);
|
||||
return () => {
|
||||
window.removeEventListener("focus", onFocus);
|
||||
window.removeEventListener("blur", onBlur);
|
||||
};
|
||||
},
|
||||
|
||||
// Native drag-and-drop reports OS paths, which a page never sees. The DOM's
|
||||
// own drag events are a different thing, and the components that need those
|
||||
// use them directly.
|
||||
onDragDrop(_callback: (event: DragDropEvent) => void): Unsubscribe {
|
||||
return () => {};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function createWebPlatform(): Platform {
|
||||
const db = new WorkerConnection();
|
||||
const capabilities = capabilitiesFor();
|
||||
|
||||
// Without this, IndexedDB is best-effort storage and a browser reclaiming
|
||||
// space may drop someone's workspaces. Asking is all we can do, and there is
|
||||
// nothing useful to do about a refusal.
|
||||
void requestPersistence();
|
||||
|
||||
// Enough to answer "what does this host actually do?" from the console
|
||||
// without reading the source.
|
||||
(window as unknown as Record<string, unknown>).__YAAK_WEB__ = {
|
||||
label: db.label,
|
||||
// A getter: the connection may fall back from shared to dedicated after
|
||||
// this object is built.
|
||||
get sharedWorker() {
|
||||
return db.shared;
|
||||
},
|
||||
capabilities,
|
||||
commands: commandSupport,
|
||||
};
|
||||
|
||||
return {
|
||||
capabilities,
|
||||
window: createWindow(db),
|
||||
|
||||
clipboard: {
|
||||
writeText: (text) => navigator.clipboard.writeText(text),
|
||||
readText: async () => {
|
||||
throw unsupported("clipboard.readText", "Paste instead — Yaak in a browser can't read the clipboard on its own", "clipboardRead");
|
||||
},
|
||||
clear: async () => {
|
||||
throw unsupported("clipboard.clear", "Yaak in a browser can't modify the clipboard", "clipboardRead");
|
||||
},
|
||||
},
|
||||
|
||||
// Returning null rather than throwing: null is what a cancelled dialog
|
||||
// returns, which every caller already handles.
|
||||
dialog: {
|
||||
open: (async () => null) as Platform["dialog"]["open"],
|
||||
save: async () => null,
|
||||
},
|
||||
|
||||
files: {
|
||||
readDir: async () => {
|
||||
throw unsupported("files.readDir", "A browser tab can't browse your filesystem", "localFiles");
|
||||
},
|
||||
readText: async () => {
|
||||
throw unsupported("files.readText", "A browser tab can't read local files", "localFiles");
|
||||
},
|
||||
// No filesystem here, so a path is just a string this host echoes back.
|
||||
url: (path) => path,
|
||||
basename: async (path) => path.split(/[/\\]/).pop() ?? path,
|
||||
resolveResource: async (path) => path,
|
||||
},
|
||||
|
||||
/**
|
||||
* Bodies live in the worker's blob database, addressed by the id they were
|
||||
* stored under. A page hands over an id and never a location, which is what
|
||||
* keeps it from naming bytes the app never wrote.
|
||||
*/
|
||||
blobs: {
|
||||
read: (id) => db.blobGet(id),
|
||||
|
||||
async url(id) {
|
||||
const bytes = await db.blobGet(id);
|
||||
// An object URL, the tab's equivalent of Tauri's `convertFileSrc`. The
|
||||
// caller keys a query on it and drops it on the next response, so it is
|
||||
// left to be reclaimed when the document goes rather than revoked here
|
||||
// while an <img> may still be loading it.
|
||||
return bytes == null ? null : URL.createObjectURL(new Blob([bytes]));
|
||||
},
|
||||
},
|
||||
|
||||
rpc<T>(cmd: string, payload?: RpcPayload): Promise<T> {
|
||||
// `plugin:` commands are Tauri host plugins, not engine commands, and
|
||||
// never reached the router even on the desktop.
|
||||
if (cmd.startsWith("plugin:")) return hostPluginCommand<T>(cmd, payload);
|
||||
return runCommand(cmd, payload ?? {}, db) as Promise<T>;
|
||||
},
|
||||
|
||||
async rpcStream<T, M>(
|
||||
cmd: string,
|
||||
payload: RpcPayload,
|
||||
onMessage: (message: M) => void,
|
||||
): Promise<RpcStreamHandle<T>> {
|
||||
// Same shape as the desktop — subscribe first, then dispatch — so that a
|
||||
// command which grows the ability to stream here needs no caller changes.
|
||||
const streamId = crypto.randomUUID();
|
||||
const unlisten = db.listen(`stream_${streamId}`, (p) => onMessage(p as M));
|
||||
try {
|
||||
const result = (await runCommand(cmd, { ...payload, streamId }, db)) as T;
|
||||
return { result, unlisten };
|
||||
} catch (err) {
|
||||
unlisten();
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
listen<T>(event: string, callback: (payload: T) => void): Unsubscribe {
|
||||
return db.listen(event, (payload) => callback(payload as T));
|
||||
},
|
||||
|
||||
// Local only. Every emitter in the app is replying to something this tab is
|
||||
// doing — a plugin round trip, a stream teardown — and telling other tabs
|
||||
// about it would answer a question they never asked.
|
||||
emit: async (event, payload) => db.deliver(event, payload),
|
||||
|
||||
openUrl: async (url) => {
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
},
|
||||
|
||||
revealItemInDir: async () => {
|
||||
throw unsupported("revealItemInDir", "A browser tab can't open your file manager", "localFiles");
|
||||
},
|
||||
|
||||
osType: detectOsType,
|
||||
appIdentifier: async () => "app.yaak.web",
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* The messages that cross between a tab and the worker that owns the database.
|
||||
*
|
||||
* Declared once and imported from both sides, so a change to the shape is a
|
||||
* type error in whichever side forgot. Kept deliberately small: commands in,
|
||||
* results or errors out, and events pushed the other way — the same envelope
|
||||
* the desktop's IPC uses, because that is what the frontend is written against.
|
||||
*/
|
||||
|
||||
/** Tab → worker */
|
||||
export type ToWorker =
|
||||
| { type: "rpc"; id: number; cmd: string; payload: unknown; label: string }
|
||||
| { type: "blob_get"; id: number; blobId: string }
|
||||
| { type: "blob_put"; id: number; blobId: string; bytes: ArrayBuffer }
|
||||
| { type: "blob_delete"; id: number; blobId: string }
|
||||
/** The tab is going away; the worker can forget its port. */
|
||||
| { type: "goodbye" };
|
||||
|
||||
/** Worker → tab */
|
||||
export type FromWorker =
|
||||
/**
|
||||
* Sent synchronously the moment a port connects, before anything else. Its
|
||||
* only job is to prove the worker is alive: a tab that connects during a
|
||||
* shared worker's teardown gets a port that is accepted and then never
|
||||
* serviced, and this is how it tells that apart from a slow boot.
|
||||
*/
|
||||
| { type: "hello" }
|
||||
/** The database is open. Sent to each port once boot has finished. */
|
||||
| { type: "ready" }
|
||||
/** The database could not be opened; every command will fail with this. */
|
||||
| { type: "boot_error"; message: string }
|
||||
| { type: "result"; id: number; result: unknown }
|
||||
| { type: "error"; id: number; message: string }
|
||||
/** A backend event for the app — today only `model_writes`. Sent to every port. */
|
||||
| { type: "event"; event: string; payload: unknown };
|
||||
|
||||
/** What the worker registers itself under. Tabs on one origin share it. */
|
||||
export const WORKER_NAME = "yaak-db";
|
||||
|
||||
/**
|
||||
* The Web Lock a dedicated (non-shared) worker takes so a second tab cannot
|
||||
* open a second SQLite over the same pages. Shared workers don't need it: the
|
||||
* browser guarantees one of them.
|
||||
*/
|
||||
export const DB_LOCK_NAME = "yaak-db";
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Ask the browser not to evict this origin's data under storage pressure.
|
||||
*
|
||||
* Without it IndexedDB — where the worker's SQLite pages live — is "best
|
||||
* effort", and a browser clearing space can drop a user's workspaces. Granting
|
||||
* is the browser's call; it typically says yes once a site looks installed or
|
||||
* engaged, and often says no on localhost. This is a request, not a guarantee,
|
||||
* and there is nothing useful to do when it declines.
|
||||
*/
|
||||
export async function requestPersistence(): Promise<boolean> {
|
||||
try {
|
||||
if (navigator.storage?.persist == null) return false;
|
||||
if (await navigator.storage.persisted()) return true;
|
||||
return await navigator.storage.persist();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/// <reference lib="webworker" />
|
||||
|
||||
/**
|
||||
* The process that owns the database.
|
||||
*
|
||||
* On the desktop that is the Rust binary: it holds SQLite, every window talks
|
||||
* to it, and it pushes model writes to all of them. In a browser this worker
|
||||
* plays that part. It loads the model layer compiled to wasm, opens the one
|
||||
* database, answers each tab's commands over its port, and fans every
|
||||
* `model_writes` out to every port — so two tabs are coherent for the same
|
||||
* reason two desktop windows are, not because of a side channel.
|
||||
*
|
||||
* It runs as a SharedWorker where the browser has one, which is what makes
|
||||
* "one database, many tabs" true by construction. Where it doesn't (Android
|
||||
* Chrome), it runs as a dedicated worker and takes a Web Lock so a second tab
|
||||
* fails to open loudly instead of opening a second SQLite over the same pages.
|
||||
*/
|
||||
|
||||
import { DB_LOCK_NAME, type FromWorker, type ToWorker } from "./protocol";
|
||||
|
||||
/**
|
||||
* The wasm is imported lazily, inside `boot()`, rather than at the top of the
|
||||
* module. That keeps this script's own evaluation instant, so a tab's connect
|
||||
* gets its `hello` immediately regardless of how long the model layer takes to
|
||||
* download and compile — and the tab can therefore tell "this worker is dead"
|
||||
* from "this worker is busy" with a short timeout.
|
||||
*/
|
||||
type Engine = typeof import("@yaakapp-internal/web");
|
||||
let engine: Engine | null = null;
|
||||
|
||||
const ports = new Set<MessagePort>();
|
||||
|
||||
/** Resolves once `boot()` has, or rejects with why it couldn't. */
|
||||
let booted: Promise<void> | null = null;
|
||||
let bootError: string | null = null;
|
||||
|
||||
function send(port: MessagePort, message: FromWorker, transfer: Transferable[] = []): void {
|
||||
port.postMessage(message, transfer);
|
||||
}
|
||||
|
||||
function broadcast(message: FromWorker): void {
|
||||
for (const port of ports) send(port, message);
|
||||
}
|
||||
|
||||
function errorMessage(err: unknown): string {
|
||||
if (err instanceof Error) return err.message;
|
||||
return String(err);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the database, once, for everyone.
|
||||
*
|
||||
* In a dedicated worker this also takes the lock. `ifAvailable` returns null
|
||||
* rather than queueing, because queueing would mean a second tab silently
|
||||
* hangs until the first closes — worse than telling it what is going on.
|
||||
*/
|
||||
function bootOnce(isShared: boolean): Promise<void> {
|
||||
if (booted != null) return booted;
|
||||
|
||||
booted = (async () => {
|
||||
if (!isShared) {
|
||||
if (typeof navigator.locks === "undefined") {
|
||||
// No way to guarantee exclusivity; proceed and hope. This is old
|
||||
// browsers only, and they will get one tab working.
|
||||
const loaded = await import("@yaakapp-internal/web");
|
||||
await loaded.boot();
|
||||
engine = loaded;
|
||||
return;
|
||||
}
|
||||
const held = await new Promise<boolean>((resolve) => {
|
||||
void navigator.locks.request(DB_LOCK_NAME, { ifAvailable: true }, (lock) => {
|
||||
if (lock == null) {
|
||||
resolve(false);
|
||||
return;
|
||||
}
|
||||
resolve(true);
|
||||
// Hold the lock for as long as this worker lives
|
||||
return new Promise<void>(() => {});
|
||||
});
|
||||
});
|
||||
if (!held) {
|
||||
throw new Error(
|
||||
"Yaak is already open in another tab, and this browser can't share a database between tabs. Close the other tab, or use it instead.",
|
||||
);
|
||||
}
|
||||
}
|
||||
const loaded = await import("@yaakapp-internal/web");
|
||||
await loaded.boot();
|
||||
engine = loaded;
|
||||
})();
|
||||
|
||||
booted.catch((err) => {
|
||||
bootError = errorMessage(err);
|
||||
});
|
||||
|
||||
return booted;
|
||||
}
|
||||
|
||||
async function handle(port: MessagePort, message: ToWorker): Promise<void> {
|
||||
if (message.type === "goodbye") {
|
||||
ports.delete(port);
|
||||
return;
|
||||
}
|
||||
|
||||
// Every command waits for boot rather than the tab having to. Tabs post
|
||||
// the moment they load; the port queues; this drains once the DB is open.
|
||||
try {
|
||||
await booted;
|
||||
} catch {
|
||||
send(port, { type: "error", id: message.id, message: bootError ?? "Database failed to open" });
|
||||
return;
|
||||
}
|
||||
const { rpc, blob_get, blob_put, blob_delete } = engine!;
|
||||
|
||||
try {
|
||||
switch (message.type) {
|
||||
case "rpc": {
|
||||
const outcome = rpc(message.cmd, message.payload, message.label) as {
|
||||
result: unknown;
|
||||
events: unknown[];
|
||||
};
|
||||
// Result first, to the caller; then the writes, to everyone including
|
||||
// the caller. The store applies its own echo the same as any other
|
||||
// window's, so it must arrive — and the caller's `await` resolving
|
||||
// before its echo lands is fine, because it resolves on the same tick
|
||||
// and the store reads on the next.
|
||||
send(port, { type: "result", id: message.id, result: outcome.result });
|
||||
if (outcome.events.length > 0) {
|
||||
broadcast({ type: "event", event: "model_writes", payload: outcome.events });
|
||||
}
|
||||
return;
|
||||
}
|
||||
case "blob_get": {
|
||||
const bytes = blob_get(message.blobId);
|
||||
if (bytes == null) {
|
||||
send(port, { type: "result", id: message.id, result: null });
|
||||
} else {
|
||||
// Copy into a fresh buffer we can transfer: the wasm's memory
|
||||
// cannot leave the worker.
|
||||
const out = new Uint8Array(bytes.byteLength);
|
||||
out.set(bytes);
|
||||
send(port, { type: "result", id: message.id, result: out.buffer }, [out.buffer]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case "blob_put": {
|
||||
blob_put(message.blobId, new Uint8Array(message.bytes));
|
||||
send(port, { type: "result", id: message.id, result: null });
|
||||
return;
|
||||
}
|
||||
case "blob_delete": {
|
||||
blob_delete(message.blobId);
|
||||
send(port, { type: "result", id: message.id, result: null });
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
send(port, { type: "error", id: message.id, message: errorMessage(err) });
|
||||
}
|
||||
}
|
||||
|
||||
function attach(port: MessagePort, isShared: boolean): void {
|
||||
ports.add(port);
|
||||
port.onmessage = (e: MessageEvent<ToWorker>) => void handle(port, e.data);
|
||||
port.start?.();
|
||||
|
||||
// Proof of life, before boot: the tab is timing this.
|
||||
send(port, { type: "hello" });
|
||||
|
||||
bootOnce(isShared).then(
|
||||
() => send(port, { type: "ready" }),
|
||||
(err) => send(port, { type: "boot_error", message: errorMessage(err) }),
|
||||
);
|
||||
}
|
||||
|
||||
// A SharedWorker sees each tab arrive as a connect event; a dedicated worker
|
||||
// *is* its one tab's port.
|
||||
const scope = self as unknown as { onconnect?: unknown };
|
||||
if ("onconnect" in scope) {
|
||||
(self as unknown as SharedWorkerGlobalScope).onconnect = (e: MessageEvent) => {
|
||||
attach(e.ports[0]!, true);
|
||||
};
|
||||
} else {
|
||||
attach(self as unknown as MessagePort, false);
|
||||
}
|
||||
Reference in New Issue
Block a user