@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/hooks/editor/use-occurrences.test.ts

@@ -1,236 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * `useOccurrences` — the ranges behind ⌘D, ⌘⇧L and ⌘⇧D.
- *
- * The rules live in `shared/lib/code/editor/occurrences` and are tested there;
- * what this file covers is the hook's own contract: the caller's copy wins
- * (clearing the ranges in the panel must clear them here), every change is
- * announced so the surface repaints, and the textarea is read rather than
- * assumed.
- *
- * Runs against a real DOM (happy-dom) because it is a Preact hook; the modules
- * below are imported dynamically, after those globals exist.
- */
-
-import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
-import { Window } from 'happy-dom';
-import type { h as PreactH, render as PreactRender } from 'preact';
-import type { act as PreactAct } from 'preact/test-utils';
-import type { OccurrencesApi, useOccurrences as UseOccurrencesHook } from '@/client/hooks/editor/use-occurrences';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
-
-let useOccurrences: typeof UseOccurrencesHook;
-let h: typeof PreactH;
-let render: typeof PreactRender;
-let act: typeof PreactAct;
-
-let api: OccurrencesApi | null = null;
-let container: HTMLElement;
-let textarea: HTMLTextAreaElement;
-/** What the caller passes in as its own copy, changed per test. */
-let controlled: TextRange[] | undefined;
-const announced: Array<readonly TextRange[]> = [];
-const selections: Array<[number, number]> = [];
-
-function Harness() {
-  api = useOccurrences({
-    controlled,
-    onChange: (ranges) => announced.push(ranges),
-  });
-  return null;
-}
-
-async function flush() {
-  for (let i = 0; i < 3; i++) {
-    await act(async () => {
-      for (let turn = 0; turn < 4; turn++) await Promise.resolve();
-    });
-  }
-}
-
-async function rerender() {
-  await act(async () => {
-    render(h(Harness, {}), container);
-  });
-  await flush();
-}
-
-function select(start: number, end = start) {
-  textarea.selectionStart = start;
-  textarea.selectionEnd = end;
-}
-
-/**
- * Stands in for the editor's own `select`: it MOVES the textarea's selection and
- * records it. The hook reads the textarea, so a callback that only recorded the
- * range would leave every later press looking at the original caret.
- */
-function selectingSurface() {
-  return (start: number, end: number) => {
-    selections.push([start, end]);
-    select(start, end);
-  };
-}
-
-function domGlobals(win: Window): Record<string, unknown> {
-  return {
-    window: win,
-    document: win.document,
-    navigator: win.navigator,
-    Node: win.Node,
-    Element: win.Element,
-    HTMLElement: win.HTMLElement,
-    HTMLTextAreaElement: win.HTMLTextAreaElement,
-  };
-}
-
-const installed: Record<string, unknown> = {};
-const displaced: Record<string, unknown> = {};
-
-beforeAll(async () => {
-  const win = new Window({ url: 'http://localhost' });
-  for (const [key, value] of Object.entries(domGlobals(win))) {
-    displaced[key] = (globalThis as Record<string, unknown>)[key];
-    installed[key] = value;
-    (globalThis as Record<string, unknown>)[key] = value;
-  }
-  ({ useOccurrences } = await import('@/client/hooks/editor/use-occurrences'));
-  ({ h, render } = await import('preact'));
-  ({ act } = await import('preact/test-utils'));
-});
-
-afterAll(() => {
-  for (const key of Object.keys(installed)) {
-    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
-    else (globalThis as Record<string, unknown>)[key] = displaced[key];
-  }
-});
-
-beforeEach(async () => {
-  api = null;
-  controlled = undefined;
-  announced.length = 0;
-  selections.length = 0;
-  container = document.createElement('div');
-  document.body.appendChild(container);
-  textarea = document.createElement('textarea');
-  textarea.value = 'alpha beta alpha gamma alpha';
-  container.appendChild(textarea);
-  await rerender();
-});
-
-afterEach(() => {
-  if (container) render(null, container);
-  container?.remove();
-});
-
-describe('useOccurrences', () => {
-  test('starts with no extra ranges', () => {
-    expect(api?.ranges).toEqual([]);
-  });
-
-  test('⌘D selects the word first, then grows one occurrence per press', async () => {
-    select(2);
-    await act(async () => {
-      api?.selectNext(textarea, selectingSurface());
-    });
-    expect(selections.at(-1)).toEqual([0, 5]);
-    expect(api?.ranges).toEqual([]);
-
-    await act(async () => {
-      api?.selectNext(textarea, selectingSurface());
-    });
-    expect(api?.ranges).toEqual([{ start: 11, end: 16 }]);
-  });
-
-  test('⌘⇧L takes every occurrence, primary first', async () => {
-    select(0, 5);
-    await act(async () => {
-      api?.selectAll(textarea, selectingSurface());
-    });
-
-    expect(selections.at(-1)).toEqual([0, 5]);
-    expect(api?.ranges).toEqual([
-      { start: 11, end: 16 },
-      { start: 23, end: 28 },
-    ]);
-  });
-
-  test('every change is announced so the surface can repaint', async () => {
-    select(0, 5);
-    await act(async () => {
-      api?.selectAll(textarea, () => {});
-    });
-
-    expect(announced.at(-1)?.length).toBe(2);
-  });
-
-  test('clear drops every range and says so', async () => {
-    select(0, 5);
-    await act(async () => {
-      api?.selectAll(textarea, () => {});
-    });
-    await act(async () => {
-      api?.clear();
-    });
-
-    expect(api?.ranges).toEqual([]);
-    expect(announced.at(-1)).toEqual([]);
-  });
-
-  test('the caller’s copy is authoritative', async () => {
-    // The panel can clear the ranges without the editor asking (a file switch,
-    // a save); the hook has to follow, not keep its own stale list.
-    controlled = [{ start: 1, end: 3 }];
-    await rerender();
-
-    expect(api?.ranges).toEqual([{ start: 1, end: 3 }]);
-
-    controlled = [];
-    await rerender();
-
-    expect(api?.ranges).toEqual([]);
-  });
-
-  test('⌘⇧D adds a caret below on the same column', async () => {
-    textarea.value = 'one\ntwo\nthree';
-    select(1);
-    await act(async () => {
-      api?.insertCursorBelow(textarea);
-    });
-
-    expect(api?.ranges).toEqual([{ start: 5, end: 5 }]);
-  });
-
-  test('⌘⇧D on the last line adds nothing', async () => {
-    textarea.value = 'one\ntwo';
-    select(5);
-    await act(async () => {
-      api?.insertCursorBelow(textarea);
-    });
-
-    expect(api?.ranges).toEqual([]);
-  });
-
-  test('replicate reports nothing without extra ranges', () => {
-    expect(api?.replicate('abc', 'abXc', { start: 2, end: 2 })).toBeNull();
-  });
-
-  test('replicate replays the browser’s edit at every extra range', async () => {
-    select(0, 5);
-    await act(async () => {
-      api?.selectAll(textarea, () => {});
-    });
-
-    // The browser replaced `alpha` at 0..5 with `Z`; the other two follow.
-    const applied = api?.replicate('alpha beta alpha gamma alpha', 'Z beta alpha gamma alpha', { start: 0, end: 5 });
-
-    expect(applied?.value).toBe('Z beta Z gamma Z');
-    expect(applied?.caret).toBe(1);
-    expect(applied?.rest.length).toBe(2);
-  });
-});

package/src/client/hooks/editor/use-occurrences.ts

@@ -1,98 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The hook that owns the editor's extra selection ranges.
- *
- * It is a thin shell over `shared/lib/code/editor/occurrences`: the rules live
- * there as pure functions, and this holds the ranges in a ref (the keydown and
- * `input` handlers read them synchronously, inside one event) and tells the
- * caller through `onChange` so the surface can paint them.
- *
- * The split is deliberate: a hook that decides where a range goes cannot be
- * tested without a DOM, and every rule here is one a user notices when it is
- * wrong.
- */
-
-import { useRef } from 'preact/hooks';
-
-import {
-  growToNextOccurrence,
-  offsetBelow,
-  replicateAtRanges,
-  selectAllOccurrences,
-} from '@/shared/lib/code/editor/occurrences';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
-
-export interface UseOccurrencesOptions {
-  /** Called with the extra ranges whenever they change, so the surface repaints. */
-  onChange: (ranges: readonly TextRange[]) => void;
-  /** The caller's copy of the ranges — clearing them there must clear them here. */
-  controlled?: readonly TextRange[];
-}
-
-export interface OccurrencesApi {
-  /** The extra ranges, excluding the textarea's own (primary) selection. */
-  readonly ranges: readonly TextRange[];
-  /** Replace the ranges and notify the surface. */
-  set: (ranges: readonly TextRange[]) => void;
-  /** Drop every extra range. */
-  clear: () => void;
-  /** ⌘D — grow the primary selection to the next occurrence of what it covers. */
-  selectNext: (input: HTMLTextAreaElement, select: (start: number, end: number) => void) => void;
-  /** ⌘⇧L — select every occurrence of the selection/word at the caret. */
-  selectAll: (input: HTMLTextAreaElement, select: (start: number, end: number) => void) => void;
-  /** ⌘⇧D — add an empty caret on the line below. */
-  insertCursorBelow: (input: HTMLTextAreaElement) => void;
-  /**
-   * Replay the browser's edit at every extra range. Returns the buffer and
-   * caret the caller should commit, or null when there is nothing to replicate.
-   */
-  replicate: (before: string, after: string, primaryBefore: TextRange) => { value: string; caret: number; rest: TextRange[] } | null;
-}
-
-export function useOccurrences({ onChange, controlled }: UseOccurrencesOptions): OccurrencesApi {
-  const ref = useRef<readonly TextRange[]>([]);
-  // The caller may clear the ranges without the editor asking (a file switch, a
-  // save), so its copy is mirrored into the ref the handlers read.
-  if (controlled && controlled !== ref.current) ref.current = controlled;
-
-  const set = (ranges: readonly TextRange[]) => {
-    ref.current = ranges;
-    onChange(ranges);
-  };
-
-  return {
-    get ranges() {
-      return ref.current;
-    },
-    set,
-    clear: () => set([]),
-
-    selectNext: (input, select) => {
-      const current: TextRange = { start: input.selectionStart, end: input.selectionEnd };
-      const next = growToNextOccurrence(input.value, current, ref.current);
-      if (!next) return;
-      select(next.primary.start, next.primary.end);
-      set(next.extras);
-    },
-
-    selectAll: (input, select) => {
-      const current: TextRange = { start: input.selectionStart, end: input.selectionEnd };
-      const all = selectAllOccurrences(input.value, current);
-      if (!all) return;
-      select(all.primary.start, all.primary.end);
-      set(all.extras);
-    },
-
-    insertCursorBelow: (input) => {
-      const target = offsetBelow(input.value, input.selectionStart);
-      if (target === null) return;
-      set([...ref.current, { start: target, end: target }]);
-    },
-
-    replicate: (before, after, primaryBefore) => replicateAtRanges(before, after, primaryBefore, ref.current),
-  };
-}

package/src/shared/lib/code/editor/commands.test.ts

@@ -1,155 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { describe, expect, test } from 'bun:test';
-
-import {
-  commentSyntaxFor,
-  diffEdit,
-  nextOccurrence,
-  occurrenceRanges,
-  replicateEdit,
-  toggleLineComment,
-  wordRangeAt,
-} from '@/shared/lib/code/editor/commands';
-
-describe('wordRangeAt', () => {
-  test('selects the word the caret sits inside or at the end of', () => {
-    expect(wordRangeAt('const alpha = 1', 8)).toEqual({ start: 6, end: 11 });
-    // A caret just after the word still selects it — that is where ⌘D is
-    // pressed when the user has just typed the identifier.
-    expect(wordRangeAt('const alpha = 1', 11)).toEqual({ start: 6, end: 11 });
-    expect(wordRangeAt('const alpha = 1', 6)).toEqual({ start: 6, end: 11 });
-  });
-
-  test('treats `$` and `_` as word characters', () => {
-    expect(wordRangeAt('$foo_bar baz', 3)).toEqual({ start: 0, end: 8 });
-  });
-
-  test('a caret at the edge of a word takes that word, whitespace alone takes none', () => {
-    // Offset 5 in `alpha beta` is the space right after `alpha` — the position
-    // a caret sits at after typing the word, which is where ⌘D is pressed.
-    expect(wordRangeAt('alpha beta', 5)).toEqual({ start: 0, end: 5 });
-    // Whitespace with no word on either side: nothing to select.
-    expect(wordRangeAt('  foo', 0)).toBeNull();
-    expect(wordRangeAt('', 0)).toBeNull();
-  });
-});
-
-describe('occurrenceRanges and nextOccurrence', () => {
-  test('finds every occurrence in document order', () => {
-    expect(occurrenceRanges('alpha beta alpha', 'alpha')).toEqual([
-      { start: 0, end: 5 },
-      { start: 11, end: 16 },
-    ]);
-  });
-
-  test('the next occurrence is the first one after the selection, then it wraps', () => {
-    const text = 'a a a';
-    const first = occurrenceRanges(text, 'a')[0];
-    expect(nextOccurrence(text, 'a', [first])).toEqual({ start: 2, end: 3 });
-    const all = occurrenceRanges(text, 'a');
-    expect(nextOccurrence(text, 'a', all)).toBeNull();
-  });
-
-  test('skips ranges that are already selected', () => {
-    const all = occurrenceRanges('a a a', 'a');
-    expect(nextOccurrence('a a a', 'a', [all[0], all[2]])).toEqual({ start: 2, end: 3 });
-  });
-});
-
-describe('diffEdit', () => {
-  test('recovers an insertion from two buffers', () => {
-    expect(diffEdit('abc', 'abXc')).toEqual({ start: 2, end: 2, inserted: 'X' });
-  });
-
-  test('recovers a deletion', () => {
-    expect(diffEdit('abXc', 'abc')).toEqual({ start: 2, end: 3, inserted: '' });
-  });
-
-  test('recovers a replacement that swallowed a selection', () => {
-    // `abc` selected and typed over with `Z`: the diff is one replacement, not
-    // a deletion followed by an insertion.
-    expect(diffEdit('hello world', 'hello Z')).toEqual({ start: 6, end: 11, inserted: 'Z' });
-  });
-
-  test('a limit pins the reported region over the caret, not wherever the diff prefers', () => {
-    // On repetitive text a prefix/suffix diff is ambiguous — `aaXa` could be read
-    // as an insertion at offset 2 (where the diff finds it) or at offset 0 (where
-    // the caret was). The limit wins, and the diff stays exact either way.
-    const diff = diffEdit('aaa', 'aaXa', { start: 0, end: 0 });
-
-    expect(diff.start).toBeLessThanOrEqual(0);
-    expect(diff.end).toBeGreaterThanOrEqual(0);
-    expect(diff.start).toBe(0);
-    // Applying the reported edit must reproduce the buffer, whichever shape the
-    // limit forced: that is the property the caller depends on.
-    expect('aaa'.slice(0, diff.start) + diff.inserted + 'aaa'.slice(diff.end)).toBe('aaXa');
-  });
-});
-
-describe('replicateEdit', () => {
-  test('applies one insertion at every range, back to front', () => {
-    // Ranges 0..1 and 2..3 of `ab` — inserting `X` at both must not let the
-    // first insertion shift the second range's offsets.
-    const result = replicateEdit('abcd', [{ start: 0, end: 0 }, { start: 2, end: 2 }], 'X');
-
-    expect(result.value).toBe('XabXcd');
-    expect(result.carets).toEqual([1, 4]);
-  });
-
-  test('replaces the selected text at each range', () => {
-    const result = replicateEdit('foo bar foo', [{ start: 0, end: 3 }, { start: 8, end: 11 }], 'qux');
-
-    expect(result.value).toBe('qux bar qux');
-    expect(result.carets).toEqual([3, 11]);
-  });
-
-  test('ranges given out of order are still applied in document order', () => {
-    const result = replicateEdit('abcd', [{ start: 2, end: 2 }, { start: 0, end: 0 }], 'X');
-
-    expect(result.value).toBe('XabXcd');
-  });
-});
-
-describe('toggleLineComment', () => {
-  test('comments the selected lines at their first non-space character', () => {
-    const result = toggleLineComment('  one\n  two', { start: 0, end: 11 }, { line: '//' });
-
-    expect(result.value).toBe('  // one\n  // two');
-  });
-
-  test('uncomments when every touched line is already commented', () => {
-    const result = toggleLineComment('// one\n// two', { start: 0, end: 13 }, { line: '//' });
-
-    expect(result.value).toBe('one\ntwo');
-  });
-
-  test('a mixed selection comments every line rather than half-uncommenting', () => {
-    const result = toggleLineComment('// one\ntwo', { start: 0, end: 11 }, { line: '//' });
-
-    expect(result.value).toBe('// // one\n// two');
-  });
-
-  test('only the lines the selection touches are affected', () => {
-    const result = toggleLineComment('one\ntwo\nthree', { start: 4, end: 7 }, { line: '//' });
-
-    expect(result.value).toBe('one\n// two\nthree');
-  });
-
-  test('a block-only language wraps the selection once', () => {
-    const result = toggleLineComment('color: red;', { start: 0, end: 11 }, commentSyntaxFor('css'));
-
-    expect(result.value).toBe('/* color: red; */');
-  });
-
-  test('the hash languages use their own token', () => {
-    expect(commentSyntaxFor('python')).toEqual({ line: '#' });
-    expect(commentSyntaxFor('yaml')).toEqual({ line: '#' });
-    expect(commentSyntaxFor('sql')).toEqual({ line: '--' });
-    // The default is the C-family token, which every other grammar here uses.
-    expect(commentSyntaxFor('typescript')).toEqual({ line: '//' });
-  });
-});