@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/state/state.spec.ts

@@ -0,0 +1,214 @@
+import { afterEach, beforeEach, describe, expect, it } from 'bun:test';
+import { TaStateImpl } from './state';
+import type { StateSpec } from './state-protocol';
+import { StateUtil } from './state-protocol';
+
+function memory(): Storage {
+    const items = new Map<string, string>();
+    return {
+        getItem: (key: string) => items.get(key) ?? null,
+        setItem: (key: string, value: string) => void items.set(key, value),
+        removeItem: (key: string) => void items.delete(key),
+    } as Storage;
+}
+
+const NAME: StateSpec<string> = { key: 'name', tier: 'user', initial: '', parse: StateUtil.string };
+const WIDTH: StateSpec<number> = { key: 'width', tier: 'device', initial: 300, parse: value => (typeof value === 'number' ? value : undefined) };
+const PAGE: StateSpec<string> = { key: 'page', tier: 'tab', initial: '', parse: StateUtil.string };
+
+function setup(status = 'online') {
+    const data = new Map<string, unknown>();
+    const writes: [string, unknown, string | undefined][] = [];
+    let failWrites = false;
+    const stateListeners = new Set<(state: { status: string }) => void>();
+    const dataListeners = new Set<(name: string, keys: string[], cwd?: string) => void>();
+    const workbench = {
+        state: { status },
+        packages: {
+            async getExtensionData(name: string, key: string, cwd?: string) {
+                expect(name).toBe(StateUtil.DATA_NAME);
+                expect(cwd).toBeUndefined();
+                return data.get(key) ?? null;
+            },
+            async setExtensionData(name: string, key: string, value: unknown, cwd?: string) {
+                expect(name).toBe(StateUtil.DATA_NAME);
+                if (failWrites) {
+                    throw new Error('Not connected to ta serve.');
+                }
+                writes.push([key, value, cwd]);
+                data.set(key, value);
+            },
+        },
+        subscribe(listener: (state: { status: string }) => void) {
+            stateListeners.add(listener);
+            return () => stateListeners.delete(listener);
+        },
+        onExtensionData(listener: (name: string, keys: string[], cwd?: string) => void) {
+            dataListeners.add(listener);
+            return () => dataListeners.delete(listener);
+        },
+    };
+    const state = new TaStateImpl();
+    Object.assign(state, { workbench });
+    return {
+        state,
+        data,
+        writes,
+        failWrites(fail: boolean) {
+            failWrites = fail;
+        },
+        setStatus(next: string) {
+            workbench.state = { status: next };
+            for (const listener of stateListeners) {
+                listener(workbench.state);
+            }
+        },
+        changed(keys: string[], cwd?: string, name = StateUtil.DATA_NAME) {
+            for (const listener of dataListeners) {
+                listener(name, keys, cwd);
+            }
+        },
+    };
+}
+
+const tick = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('TaStateImpl', () => {
+    let local: Storage;
+    let session: Storage;
+    beforeEach(() => {
+        local = memory();
+        session = memory();
+        Object.assign(globalThis, { localStorage: local, sessionStorage: session });
+    });
+    afterEach(() => {
+        Object.assign(globalThis, { localStorage: undefined, sessionStorage: undefined });
+    });
+
+    it('keeps a tab value in this tab and a device value in this browser, never on the server', async () => {
+        const env = setup();
+        expect(env.state.get(PAGE)).toBe('');
+        env.state.set(PAGE, 'notes/page');
+        env.state.set(WIDTH, 420);
+        expect(session.getItem('ta.page')).toBe('"notes/page"');
+        expect(local.getItem('ta.width')).toBe('420');
+        // Back to the initial value: nothing is kept.
+        env.state.set(WIDTH, 300);
+        expect(local.getItem('ta.width')).toBeNull();
+        env.state.flush();
+        await tick();
+        expect(env.writes).toEqual([]);
+        expect(setup().state.get(PAGE)).toBe('notes/page');
+    });
+
+    it('reads what older versions kept as bare text, and drops what it cannot read', () => {
+        local.setItem('ta.name', '/home/me');
+        local.setItem('ta.width', '"wide"');
+        const env = setup('signed-out');
+        expect(env.state.get(NAME)).toBe('/home/me');
+        expect(env.state.get(WIDTH)).toBe(300);
+    });
+
+    it('shows what this browser has at once, then what the server has, and tells the listeners', async () => {
+        local.setItem('ta.name', '"here"');
+        const env = setup();
+        env.data.set('name', 'there');
+        let heard = 0;
+        env.state.subscribe(() => heard++);
+        expect(env.state.get(NAME)).toBe('here');
+        await tick();
+        expect(env.state.get(NAME)).toBe('there');
+        expect(local.getItem('ta.name')).toBe('"there"');
+        expect(heard).toBe(1);
+        expect(await env.state.load(NAME)).toBe('there');
+    });
+
+    it('writes user values to the server together, a moment after they are set', async () => {
+        const env = setup();
+        await env.state.load(NAME);
+        env.state.set(NAME, 'a');
+        env.state.set(NAME, 'b');
+        expect(env.writes).toEqual([]);
+        await tick(350);
+        expect(env.writes).toEqual([['name', 'b', undefined]]);
+        // The same value again writes nothing.
+        env.state.set(NAME, 'b');
+        env.state.flush();
+        await tick();
+        expect(env.writes).toHaveLength(1);
+    });
+
+    it('does not take what the server answers for a value set meanwhile', async () => {
+        const env = setup();
+        env.data.set('name', 'old');
+        const loading = env.state.load(NAME);
+        env.state.set(NAME, 'mine');
+        await loading;
+        expect(env.state.get(NAME)).toBe('mine');
+        env.state.flush();
+        await tick();
+        expect(env.data.get('name')).toBe('mine');
+    });
+
+    it('moves to the server what only this browser kept', async () => {
+        local.setItem('ta.name', '"from before"');
+        const env = setup();
+        expect(await env.state.load(NAME)).toBe('from before');
+        await tick(350);
+        expect(env.writes).toEqual([['name', 'from before', undefined]]);
+    });
+
+    it('writes at once when the page hides, and keeps what it could not write until the connection is back', async () => {
+        const env = setup();
+        await env.state.load(NAME);
+        env.state.set(NAME, 'now');
+        env.state.flush();
+        await tick();
+        expect(env.writes).toEqual([['name', 'now', undefined]]);
+
+        env.setStatus('offline');
+        env.state.set(NAME, 'offline');
+        env.state.flush();
+        await tick();
+        expect(env.writes).toHaveLength(1);
+        env.setStatus('online');
+        await tick();
+        expect(env.writes.at(-1)).toEqual(['name', 'offline', undefined]);
+
+        env.failWrites(true);
+        env.state.set(NAME, 'lost?');
+        env.state.flush();
+        await tick();
+        env.failWrites(false);
+        env.state.flush();
+        await tick();
+        expect(env.writes.at(-1)).toEqual(['name', 'lost?', undefined]);
+    });
+
+    it('reads again a key another browser changed, unless one set here waits to be written', async () => {
+        const env = setup();
+        await env.state.load(NAME);
+        env.data.set('name', 'elsewhere');
+        env.changed(['name'], '/work');
+        env.changed(['name'], undefined, 'other-package');
+        await tick();
+        expect(env.state.get(NAME)).toBe('');
+        env.changed(['name']);
+        await tick();
+        expect(env.state.get(NAME)).toBe('elsewhere');
+        env.state.set(NAME, 'here');
+        env.data.set('name', 'again elsewhere');
+        env.changed(['name']);
+        await tick();
+        expect(env.state.get(NAME)).toBe('here');
+    });
+
+    it('asks the server only once signed in', async () => {
+        const env = setup('connecting');
+        env.data.set('name', 'kept');
+        expect(env.state.get(NAME)).toBe('');
+        env.setStatus('online');
+        await tick();
+        expect(env.state.get(NAME)).toBe('kept');
+    });
+});

package/src/browser/state/state.ts

@@ -0,0 +1,217 @@
+import { Autowired, Component } from '@celljs/core';
+import { TaWorkbench } from '../workbench-protocol';
+import { type StateSpec, StateUtil, TaState } from './state-protocol';
+
+/** Values set within this time go to the server together. */
+const WRITE_MS = 300;
+
+interface Slot {
+    spec: StateSpec<unknown>;
+    value: unknown;
+    /** One more for each value set here: what the server answers for an older one is not taken. */
+    version: number;
+    /** The server has answered since the page last connected; always for what is not kept there. */
+    loaded: boolean;
+    loading?: Promise<void>;
+    /** Set here and not written to the server yet. */
+    dirty: boolean;
+}
+
+@Component(TaState)
+export class TaStateImpl implements TaState {
+    @Autowired(TaWorkbench)
+    protected readonly workbench: TaWorkbench;
+
+    /** By key. */
+    protected readonly slots = new Map<string, Slot>();
+    protected readonly listeners = new Set<() => void>();
+    protected timer?: ReturnType<typeof setTimeout>;
+    protected watching = false;
+    protected online = false;
+
+    get<T>(spec: StateSpec<T>): T {
+        const slot = this.slot(spec);
+        if (!slot.loaded && !slot.loading && this.isOnline()) {
+            void this.fetch(slot);
+        }
+        return slot.value as T;
+    }
+
+    async load<T>(spec: StateSpec<T>): Promise<T> {
+        const slot = this.slot(spec);
+        if (!slot.loaded && this.isOnline()) {
+            await (slot.loading ?? this.fetch(slot));
+        }
+        return slot.value as T;
+    }
+
+    set<T>(spec: StateSpec<T>, value: T): void {
+        const slot = this.slot(spec);
+        if (StateUtil.same(slot.value, value)) {
+            return;
+        }
+        slot.value = value;
+        slot.version++;
+        this.writeLocal(slot);
+        if (spec.tier === 'user') {
+            slot.dirty = true;
+            this.schedule();
+        }
+        this.notify();
+    }
+
+    subscribe(listener: () => void): () => void {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+
+    flush(): void {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        if (!this.isOnline()) {
+            // Written when the connection is back.
+            return;
+        }
+        for (const slot of this.slots.values()) {
+            if (!slot.dirty) {
+                continue;
+            }
+            slot.dirty = false;
+            const { version } = slot;
+            this.workbench.packages.setExtensionData(StateUtil.DATA_NAME, slot.spec.key, slot.value ?? null).catch(() => {
+                if (slot.version === version) {
+                    slot.dirty = true;
+                }
+            });
+        }
+    }
+
+    protected slot<T>(spec: StateSpec<T>): Slot {
+        this.watch();
+        let slot = this.slots.get(spec.key);
+        if (!slot) {
+            const local = this.readLocal(spec as StateSpec<unknown>);
+            slot = { spec: spec as StateSpec<unknown>, value: local ?? spec.initial, version: 0, loaded: spec.tier !== 'user', dirty: false };
+            this.slots.set(spec.key, slot);
+        }
+        return slot;
+    }
+
+    protected schedule(): void {
+        this.timer ??= setTimeout(() => this.flush(), WRITE_MS);
+    }
+
+    /** What the server has: taken unless set here meanwhile; what only this browser had goes there. */
+    protected fetch(slot: Slot): Promise<void> {
+        const { version } = slot;
+        const loading = this.workbench.packages
+            .getExtensionData(StateUtil.DATA_NAME, slot.spec.key)
+            .then(
+                remote => {
+                    slot.loaded = true;
+                    if (slot.version !== version) {
+                        return;
+                    }
+                    const value = remote === undefined || remote === null ? undefined : slot.spec.parse(remote);
+                    if (value === undefined) {
+                        // Kept in this browser before the server kept it: the server keeps it from now on.
+                        if (!StateUtil.same(slot.value, slot.spec.initial)) {
+                            slot.dirty = true;
+                            this.schedule();
+                        }
+                    } else if (!StateUtil.same(value, slot.value)) {
+                        slot.value = value;
+                        this.writeLocal(slot);
+                        this.notify();
+                    }
+                },
+                () => undefined,
+            )
+            .finally(() => {
+                if (slot.loading === loading) {
+                    slot.loading = undefined;
+                }
+            });
+        slot.loading = loading;
+        return loading;
+    }
+
+    /** Follows the connection and the server: what changed elsewhere, and what was missed while offline. */
+    protected watch(): void {
+        if (this.watching) {
+            return;
+        }
+        this.watching = true;
+        this.online = this.isOnline();
+        this.workbench.subscribe(state => {
+            const online = state.status === 'online';
+            if (online && !this.online) {
+                for (const slot of this.slots.values()) {
+                    if (slot.spec.tier === 'user') {
+                        slot.loaded = false;
+                        if (!slot.dirty) {
+                            void this.fetch(slot);
+                        }
+                    }
+                }
+                this.flush();
+            }
+            this.online = online;
+        });
+        this.workbench.onExtensionData((name, keys, cwd) => {
+            if (name !== StateUtil.DATA_NAME || cwd !== undefined) {
+                return;
+            }
+            for (const key of keys) {
+                const slot = this.slots.get(key);
+                if (slot && slot.spec.tier === 'user' && !slot.dirty) {
+                    void this.fetch(slot);
+                }
+            }
+        });
+        if (typeof document !== 'undefined') {
+            document.addEventListener('visibilitychange', () => document.visibilityState === 'hidden' && this.flush());
+            window.addEventListener('pagehide', () => this.flush());
+        }
+    }
+
+    protected isOnline(): boolean {
+        return this.workbench.state.status === 'online';
+    }
+
+    protected storage(spec: StateSpec<unknown>): Storage | undefined {
+        if (spec.tier === 'tab') {
+            return typeof sessionStorage === 'undefined' ? undefined : sessionStorage;
+        }
+        return typeof localStorage === 'undefined' ? undefined : localStorage;
+    }
+
+    protected readLocal(spec: StateSpec<unknown>): unknown {
+        try {
+            const value = StateUtil.decode(this.storage(spec)?.getItem(`ta.${spec.key}`) ?? null);
+            return value === undefined ? undefined : spec.parse(value);
+        } catch {
+            return undefined;
+        }
+    }
+
+    protected writeLocal(slot: Slot): void {
+        const storage = this.storage(slot.spec);
+        const key = `ta.${slot.spec.key}`;
+        try {
+            if (slot.value === undefined || StateUtil.same(slot.value, slot.spec.initial)) {
+                storage?.removeItem(key);
+            } else {
+                storage?.setItem(key, JSON.stringify(slot.value));
+            }
+        } catch {
+            // Full, or not allowed: the value stays for this page, and on the server.
+        }
+    }
+
+    protected notify(): void {
+        for (const listener of this.listeners) {
+            listener();
+        }
+    }
+}

package/src/browser/style/base.ts

@@ -0,0 +1,139 @@
+/** Tokens of the theme, controls, levels. */
+export const BASE_STYLE = `
+:root, :root[data-theme='dark'] {
+    --ta-main: #141416;
+    --ta-side: #1c1c1e;
+    --ta-card: #1a1a1c;
+    --ta-input: #1a1a1a;
+    --ta-raised: #242426;
+    --ta-user: #2a2a2d;
+    --ta-hover: #2a2a2e;
+    --ta-hover-strong: #333338;
+    --ta-selected: #2c2c31;
+    --ta-chip: #2a2a2e;
+    --ta-border: #2e2e33;
+    --ta-border-muted: #232328;
+    --ta-border-field: #3d3d45;
+    --ta-border-focus: #8a8a96;
+    --ta-text: #e5e5e5;
+    --ta-body: #d4d4d6;
+    --ta-secondary: #a3a3a3;
+    --ta-muted: #7c7c82;
+    --ta-brand: #e5e5e5;
+    --ta-brand-text: #1a1a1a;
+    --ta-accent: #34d399;
+    --ta-link: #4dabf7;
+    --ta-green: #4ade80;
+    --ta-red: #f87171;
+    --ta-yellow: #fbbf24;
+    --ta-blue: #60a5fa;
+    --ta-code: #161618;
+    --ta-add: rgba(74, 222, 128, 0.1);
+    --ta-remove: rgba(248, 113, 113, 0.1);
+    --ta-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    --ta-shadow-composer: 0 12px 32px rgba(0, 0, 0, 0.32);
+    --ta-scrollbar: rgba(255, 255, 255, 0.12);
+    color-scheme: dark;
+}
+:root[data-theme='light'] {
+    --ta-main: #ffffff;
+    --ta-side: #f5f5f7;
+    --ta-card: #ffffff;
+    --ta-input: #ffffff;
+    --ta-raised: #f3f3f5;
+    --ta-user: #f2f2f2;
+    --ta-hover: #ebebf0;
+    --ta-hover-strong: #e2e2e8;
+    --ta-selected: #e6e6ea;
+    --ta-chip: #ececf0;
+    --ta-border: #dcdee3;
+    --ta-border-muted: #e8eaed;
+    --ta-border-field: #c9ccd4;
+    --ta-border-focus: #6b6e76;
+    --ta-text: #1a1a1a;
+    --ta-body: #33363b;
+    --ta-secondary: #5c5c5c;
+    --ta-muted: #8e8e93;
+    --ta-brand: #1a1a1a;
+    --ta-brand-text: #ffffff;
+    --ta-accent: #10a372;
+    --ta-link: #1677ff;
+    --ta-green: #16a34a;
+    --ta-red: #e5484d;
+    --ta-yellow: #d97706;
+    --ta-blue: #1677ff;
+    --ta-code: #f7f8fa;
+    --ta-add: rgba(34, 197, 94, 0.1);
+    --ta-remove: rgba(239, 68, 68, 0.08);
+    --ta-shadow-pop: 0 16px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.05);
+    --ta-shadow-composer: 0 8px 24px rgba(15, 23, 42, 0.07);
+    --ta-scrollbar: rgba(0, 0, 0, 0.14);
+    color-scheme: light;
+}
+:root {
+    /** The height of the title bar the page draws itself; see .ta-titlebar. */
+    --ta-titlebar: 0px;
+    --ta-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+    --ta-mono: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
+    --ta-col: 760px;
+    --ta-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+* { box-sizing: border-box; }
+html, body, #cell-root, #root { height: 100%; margin: 0; }
+* { overscroll-behavior: none; }
+body { background: var(--ta-main); color: var(--ta-text); font: 14px/1.6 var(--ta-sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
+button, input, select, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; }
+code, pre { font-family: var(--ta-mono); font-size: 12.5px; }
+a { color: var(--ta-link); text-decoration: none; }
+* { scrollbar-width: thin; scrollbar-color: var(--ta-scrollbar) transparent; }
+:focus-visible { outline: 2px solid var(--ta-blue); outline-offset: 1px; }
+.ta-muted { color: var(--ta-muted); }
+.ta-small { font-size: 12px; }
+.ta-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ta-path { font-family: var(--ta-mono); font-size: 12px; }
+.ta-spacer { flex: 1; }
+.ta-icon { flex: none; }
+.ta-narrow-only { display: none !important; }
+.ta-glass { background: var(--ta-card); border: 1px solid var(--ta-border); }
+
+/* Controls */
+.ta-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ta-border); background: transparent; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ta-text); transition: background 120ms, border-color 120ms; }
+.ta-button:hover:not(:disabled) { background: var(--ta-hover); }
+.ta-button:disabled { opacity: 0.45; cursor: default; }
+.ta-primary { background: var(--ta-brand); border-color: var(--ta-brand); color: var(--ta-brand-text); }
+.ta-primary:hover:not(:disabled) { background: var(--ta-brand); opacity: 0.88; }
+.ta-danger, .ta-stop { color: var(--ta-red); }
+.ta-quiet { border-color: transparent; color: var(--ta-secondary); }
+.ta-wide { width: 100%; height: 38px; }
+.ta-link { background: none; border: 0; padding: 0; color: var(--ta-link); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
+.ta-icon-button { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; border: 0; background: transparent; color: var(--ta-secondary); transition: background 120ms, color 120ms; }
+.ta-icon-button:hover:not(:disabled) { background: var(--ta-hover); color: var(--ta-text); }
+.ta-icon-button:disabled { opacity: 0.4; }
+.ta-icon-button.ta-on { color: var(--ta-text); background: var(--ta-hover); }
+.ta-icon-button-boxed { border: 1px solid var(--ta-border-field); height: 34px; width: 34px; }
+.ta-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--ta-red); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; }
+.ta-input, .ta-field { width: 100%; height: 36px; border: 1px solid var(--ta-border-field); background: var(--ta-input); border-radius: 8px; padding: 0 10px; outline: none; transition: border-color 120ms; }
+.ta-field { display: flex; align-items: center; gap: 8px; color: var(--ta-muted); }
+.ta-field-small { height: 34px; }
+.ta-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--ta-text); padding: 0; font-size: 13px; }
+.ta-input:focus, .ta-field:focus-within { border-color: var(--ta-border-focus); }
+.ta-editor { height: auto; min-height: 140px; padding: 8px 10px; font-family: var(--ta-mono); resize: vertical; }
+.ta-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
+/* Levels: the colour of the icon tells the level; the text stays in the colours of text. */
+.ta-level-info { --ta-level: var(--ta-blue); }
+.ta-level-success { --ta-level: var(--ta-green); }
+.ta-level-warning { --ta-level: var(--ta-yellow); }
+.ta-level-error { --ta-level: var(--ta-red); }
+.ta-level-icon { color: var(--ta-level, var(--ta-muted)); }
+/* In its place: a soft tint of its level, the text in the colours of text. */
+.ta-callout { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; text-align: left; color: var(--ta-body); background: color-mix(in srgb, var(--ta-level) 7%, var(--ta-card)); border: 1px solid color-mix(in srgb, var(--ta-level) 18%, var(--ta-border-muted)); }
+.ta-callout > .ta-level-icon { margin-top: 2px; }
+.ta-callout-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ta-callout-message { white-space: pre-wrap; overflow-wrap: anywhere; }
+.ta-callout-detail { color: var(--ta-secondary); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.ta-empty .ta-callout { max-width: min(520px, 100%); }
+.ta-spinner { width: 13px; height: 13px; border: 1.8px solid var(--ta-border-field); border-top-color: var(--ta-text); border-radius: 50%; animation: ta-spin 0.8s linear infinite; flex: none; display: inline-block; }
+.ta-empty { color: var(--ta-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; text-align: center; flex: 1; }
+
+`;