overmux 0.0.1 → 0.0.2

package/src/internal/client/overmux-react.ts

@@ -0,0 +1,283 @@
+import type { ContractInputArguments } from "../../public/index";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+} from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { z } from "zod";
+
+import { skipToken, type SkipToken, useRuntime } from "./commands";
+
+type Resources<TConfig> = TConfig extends { resources?: infer TResources }
+  ? NonNullable<TResources>
+  : never;
+type Operations<TConfig> = TConfig extends { operations?: infer TOperations }
+  ? NonNullable<TOperations>
+  : never;
+type Streams<TConfig> = TConfig extends { streams?: infer TStreams }
+  ? NonNullable<TStreams>
+  : never;
+type ContractOf<T> = T extends { contract: infer TContract }
+  ? TContract
+  : never;
+type InputOf<T> = T extends { input: infer TInput extends z.ZodType }
+  ? TInput
+  : never;
+type OutputOf<T> = T extends { output: infer TOutput extends z.ZodType }
+  ? z.output<TOutput>
+  : never;
+type ClientMessageOf<T> =
+  ContractOf<T> extends {
+    clientMessage: infer TMessage extends z.ZodType;
+  }
+    ? z.input<TMessage>
+    : never;
+type ServerMessageOf<T> =
+  ContractOf<T> extends {
+    serverMessage: infer TMessage extends z.ZodType;
+  }
+    ? z.output<TMessage>
+    : never;
+type InputProperty<TInput extends z.ZodType> =
+  undefined extends z.input<TInput>
+    ? { input?: Exclude<z.input<TInput>, undefined> }
+    : { input: z.input<TInput> };
+type OperationOptions<TId extends string, TInput extends z.ZodType> = {
+  id: TId;
+} & InputProperty<TInput>;
+type UseResource<TServerConfig> = {
+  <TId extends Extract<keyof Resources<TServerConfig>, string>>(
+    options: OperationOptions<
+      TId,
+      InputOf<ContractOf<Resources<TServerConfig>[TId]>>
+    >,
+  ): ResourceResult<OutputOf<ContractOf<Resources<TServerConfig>[TId]>>>;
+  <TId extends Extract<keyof Resources<TServerConfig>, string>>(options: {
+    id: TId;
+    input: SkipToken;
+  }): undefined;
+  <TId extends Extract<keyof Resources<TServerConfig>, string>>(options: {
+    id: TId;
+    input:
+      | z.input<InputOf<ContractOf<Resources<TServerConfig>[TId]>>>
+      | SkipToken;
+  }):
+    | ResourceResult<OutputOf<ContractOf<Resources<TServerConfig>[TId]>>>
+    | undefined;
+};
+
+export type ResourceResult<T> =
+  | {
+      data?: never;
+      error?: never;
+      refetch: () => void;
+      status: "pending";
+    }
+  | {
+      data?: T;
+      error: Error;
+      refetch: () => void;
+      status: "error";
+    }
+  | {
+      data: T;
+      error?: never;
+      refetch: () => void;
+      status: "success";
+    };
+
+export type StreamResult<TClientMessage, TServerMessage> = {
+  close: () => void;
+  error?: Error;
+  send: (message: TClientMessage) => boolean;
+  status: "closed" | "open" | "opening";
+  subscribe: (listener: (message: TServerMessage) => void) => () => void;
+};
+
+type OperationResult<TInputSchema extends z.ZodType, TOutput> = Omit<
+  UseMutationResult<TOutput, Error, z.input<TInputSchema>>,
+  "mutate" | "mutateAsync"
+> & {
+  mutate: (...args: ContractInputArguments<TInputSchema>) => void;
+  mutateAsync: (
+    ...args: ContractInputArguments<TInputSchema>
+  ) => Promise<TOutput>;
+};
+
+const inputKey = (input: unknown) => JSON.stringify(input) ?? "";
+
+const useCanonicalInput = (input: unknown) => {
+  const key = inputKey(input);
+  return useMemo(() => (key ? JSON.parse(key) : undefined), [key]);
+};
+
+const useResourceById = <TOutput>(
+  id: string,
+  input: unknown,
+  skipped: boolean,
+): ResourceResult<TOutput> | undefined => {
+  const { manifest, overmuxServerApi } = useRuntime();
+  const queryClient = useQueryClient();
+  const canonicalInput = useCanonicalInput(input);
+  const queryKey = useMemo(
+    () => [id, canonicalInput] as const,
+    [canonicalInput, id],
+  );
+  const query = useQuery<TOutput, Error>({
+    enabled: !skipped,
+    queryFn: () =>
+      overmuxServerApi.readResource({
+        id,
+        input: canonicalInput,
+      }) as Promise<TOutput>,
+    queryKey,
+  });
+  useEffect(
+    () =>
+      !skipped && manifest.resources.includes(id)
+        ? overmuxServerApi.subscribeResource({
+            id,
+            input: canonicalInput,
+            onError: () =>
+              void queryClient.invalidateQueries({ exact: true, queryKey }),
+            onInvalidate: () =>
+              void queryClient.invalidateQueries({ exact: true, queryKey }),
+          })
+        : undefined,
+    [
+      manifest.resources,
+      canonicalInput,
+      id,
+      overmuxServerApi,
+      queryClient,
+      queryKey,
+      skipped,
+    ],
+  );
+  const refetch = useCallback(() => {
+    void queryClient.invalidateQueries({ exact: true, queryKey });
+  }, [queryClient, queryKey]);
+  if (skipped) {
+    return undefined;
+  }
+  if (query.status === "pending") {
+    return { refetch, status: "pending" };
+  }
+  if (query.status === "error") {
+    return query.data === undefined
+      ? { error: query.error, refetch, status: "error" }
+      : { data: query.data, error: query.error, refetch, status: "error" };
+  }
+  return { data: query.data, refetch, status: "success" };
+};
+
+const useOperationById = <TInputSchema extends z.ZodType, TOutput>(
+  id: string,
+  signal?: AbortSignal,
+): OperationResult<TInputSchema, TOutput> => {
+  const { overmuxServerApi } = useRuntime();
+  return useMutation<TOutput, Error, z.input<TInputSchema>>({
+    mutationFn: (input) =>
+      overmuxServerApi.executeOperation(id, input, signal) as Promise<TOutput>,
+  }) as OperationResult<TInputSchema, TOutput>;
+};
+
+const useStreamById = <TClientMessage, TServerMessage>(
+  id: string,
+  input: unknown,
+): StreamResult<TClientMessage, TServerMessage> => {
+  const { manifest, overmuxServerApi } = useRuntime();
+  const streamAvailable = manifest.streams.includes(id);
+  const [state, setState] = useState<{
+    error?: Error;
+    status: "closed" | "open" | "opening";
+  }>({ status: "opening" });
+  const listeners = useMemo(
+    () => new Set<(message: TServerMessage) => void>(),
+    [],
+  );
+  const canonicalInput = useCanonicalInput(input);
+  const streamRef = useRef<
+    ReturnType<typeof overmuxServerApi.openStream> | undefined
+  >(undefined);
+  useEffect(() => {
+    streamRef.current?.close();
+    streamRef.current = undefined;
+    if (!streamAvailable) {
+      setState({ status: "closed" });
+      return;
+    }
+    setState({ status: "opening" });
+    const stream = overmuxServerApi.openStream({
+      id,
+      input: canonicalInput,
+      onClose: () => setState({ status: "closed" }),
+      onError: (error) => setState({ error, status: "closed" }),
+      onOpen: () => setState({ status: "open" }),
+      onMessage: (message) =>
+        listeners.forEach((listener) => listener(message as TServerMessage)),
+    });
+    streamRef.current = stream;
+    return () => {
+      stream.close();
+      if (streamRef.current === stream) {
+        streamRef.current = undefined;
+      }
+    };
+  }, [canonicalInput, id, listeners, overmuxServerApi, streamAvailable]);
+  const close = useCallback(() => {
+    streamRef.current?.close();
+    streamRef.current = undefined;
+    setState({ status: "closed" });
+  }, []);
+  const send = useCallback(
+    (message: TClientMessage) => streamRef.current?.send(message) ?? false,
+    [],
+  );
+  const subscribe = useCallback(
+    (listener: (message: TServerMessage) => void) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    [listeners],
+  );
+  return {
+    close,
+    error: streamAvailable
+      ? state.error
+      : new Error(`Stream is not available: ${id}`),
+    send,
+    status: streamAvailable ? state.status : "closed",
+    subscribe,
+  };
+};
+
+export const createOvermuxHooks = <TServerConfig>() => ({
+  useOperation: <TId extends Extract<keyof Operations<TServerConfig>, string>>({
+    id,
+    signal,
+  }: {
+    id: TId;
+    signal?: AbortSignal;
+  }) => {
+    type TInputSchema = InputOf<Operations<TServerConfig>[TId]>;
+    type TOutput = OutputOf<Operations<TServerConfig>[TId]>;
+    return useOperationById<TInputSchema, TOutput>(id, signal);
+  },
+  useResource: (({ id, input }: { id: string; input?: unknown }) =>
+    useResourceById(
+      id,
+      input,
+      input === skipToken,
+    )) as UseResource<TServerConfig>,
+  useStream: <TId extends Extract<keyof Streams<TServerConfig>, string>>({
+    id,
+    input,
+  }: OperationOptions<TId, InputOf<ContractOf<Streams<TServerConfig>[TId]>>>) =>
+    useStreamById<
+      ClientMessageOf<Streams<TServerConfig>[TId]>,
+      ServerMessageOf<Streams<TServerConfig>[TId]>
+    >(id, input),
+});

package/src/internal/client/shortcuts.tsx

@@ -0,0 +1,373 @@
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type RefObject,
+} from "react";
+import {
+  matchesKeyBinding,
+  platformBinding,
+  type KeyBinding,
+} from "@overmux/keybindings";
+
+import {
+  activeCommandBindings,
+  configuredCommandBindings,
+  shortcutMediaQueries,
+  type ClientAppDefinition,
+  type CommandHandle,
+  type ShortcutBinding,
+} from "./client-definition";
+import {
+  CommandsContext,
+  createCommandEntries,
+  executeCommand,
+  selectCommandRegistration,
+  type RegisteredCommand,
+} from "./commands";
+
+const bindingSequence = (binding: ShortcutBinding): KeyBinding[] =>
+  typeof binding === "string" ? [binding] : [...binding];
+
+const normalizedBinding = (binding: ShortcutBinding): string[] =>
+  bindingSequence(binding).map((key) => platformBinding(key));
+
+const sequenceMatches = (
+  binding: ShortcutBinding,
+  pending: string[],
+  event: KeyboardEvent,
+) => {
+  const sequence = normalizedBinding(binding);
+  return (
+    sequence.length > pending.length &&
+    pending.every((key, index) => sequence[index] === key) &&
+    matchesKeyBinding(sequence[pending.length] as KeyBinding, event)
+  );
+};
+
+const isTextInput = (element: Element | null) =>
+  element instanceof HTMLInputElement ||
+  element instanceof HTMLSelectElement ||
+  element instanceof HTMLTextAreaElement ||
+  (element instanceof HTMLElement &&
+    (element.isContentEditable || element.getAttribute("role") === "textbox"));
+
+const acceptsTextInput = (bindings: readonly ShortcutBinding[]) => {
+  if (!(document.activeElement instanceof Element)) {
+    return false;
+  }
+  const terminal = document.activeElement.closest(".xterm");
+  if (!terminal) {
+    return false;
+  }
+  if (terminal.closest("[data-copy-mode]")) {
+    return true;
+  }
+  return bindings.some((binding) => {
+    const sequence = bindingSequence(binding);
+    return (
+      sequence.length > 1 ||
+      sequence[0]?.startsWith("F") ||
+      sequence[0]?.includes("+")
+    );
+  });
+};
+
+type Shortcut = {
+  bindings: readonly [ShortcutBinding, ...ShortcutBinding[]];
+  command: CommandHandle;
+};
+
+const flattenShortcuts = (
+  definition: ClientAppDefinition,
+  matchesMedia: (media: string) => boolean,
+): Shortcut[] =>
+  Object.values(definition.commands).flatMap((command) => {
+    const bindings = activeCommandBindings(
+      configuredCommandBindings(definition, command),
+      matchesMedia,
+    );
+    return bindings.length
+      ? [
+          {
+            bindings: bindings as [ShortcutBinding, ...ShortcutBinding[]],
+            command,
+          },
+        ]
+      : [];
+  });
+
+const canRunShortcut = (
+  shortcut: Shortcut,
+  event: KeyboardEvent,
+  registrations: ReadonlySet<RegisteredCommand>,
+) => {
+  const selected = selectCommandRegistration(
+    shortcut.command,
+    registrations,
+    document.activeElement,
+  );
+  return Boolean(
+    selected?.enabled() &&
+    !event.repeat &&
+    !(
+      isTextInput(document.activeElement) &&
+      !acceptsTextInput(shortcut.bindings)
+    ),
+  );
+};
+
+const runShortcut = (
+  shortcut: Shortcut,
+  event: KeyboardEvent,
+  registrations: ReadonlySet<RegisteredCommand>,
+) => {
+  if (!canRunShortcut(shortcut, event, registrations)) {
+    return false;
+  }
+  void executeCommand(shortcut.command, registrations);
+  event.preventDefault();
+  return true;
+};
+
+export type ShortcutInputTarget = {
+  container: RefObject<HTMLElement | null>;
+  input: RefObject<HTMLElement | null>;
+};
+type RegisterShortcutInputTarget = (target: ShortcutInputTarget) => () => void;
+
+const ShortcutInputTargetsContext = createContext<
+  RegisterShortcutInputTarget | undefined
+>(undefined);
+
+export const useShortcutInputTarget = (target: ShortcutInputTarget) => {
+  const register = useContext(ShortcutInputTargetsContext);
+  const { container, input } = target;
+  useEffect(
+    () => register?.({ container, input }),
+    [container, input, register],
+  );
+};
+
+const elementDepth = (element: HTMLElement) => {
+  let depth = 0;
+  for (
+    let current: HTMLElement | null = element;
+    current;
+    current = current.parentElement
+  ) {
+    depth += 1;
+  }
+  return depth;
+};
+
+const selectShortcutInputTarget = (
+  targets: ReadonlySet<ShortcutInputTarget>,
+  activeElement: Element | null,
+) =>
+  [...targets]
+    .filter((target) => {
+      const container = target.container.current;
+      return Boolean(
+        container && activeElement && container.contains(activeElement),
+      );
+    })
+    .reduce<ShortcutInputTarget | undefined>((selected, candidate) => {
+      const selectedElement = selected?.container.current;
+      const candidateElement = candidate.container.current;
+      if (!selectedElement || !candidateElement) {
+        return candidate;
+      }
+      return elementDepth(candidateElement) >= elementDepth(selectedElement)
+        ? candidate
+        : selected;
+    }, undefined);
+
+const replayedKeyboardEvents = new WeakSet<KeyboardEvent>();
+const keyboardEventProperties = ["charCode", "keyCode", "which"] as const;
+
+const replayKeyboardEvent = (target: HTMLElement, source: KeyboardEvent) => {
+  const replay = new KeyboardEvent(source.type, {
+    altKey: source.altKey,
+    bubbles: true,
+    cancelable: true,
+    code: source.code,
+    composed: true,
+    ctrlKey: source.ctrlKey,
+    key: source.key,
+    location: source.location,
+    metaKey: source.metaKey,
+    repeat: source.repeat,
+    shiftKey: source.shiftKey,
+  });
+  keyboardEventProperties.forEach((property) =>
+    Object.defineProperty(replay, property, { value: source[property] }),
+  );
+  replayedKeyboardEvents.add(replay);
+  target.dispatchEvent(replay);
+};
+
+const replayChord = (
+  target: ShortcutInputTarget | undefined,
+  events: readonly KeyboardEvent[],
+) => {
+  const input = target?.input.current;
+  if (!input) {
+    return;
+  }
+  events.forEach((event) => replayKeyboardEvent(input, event));
+};
+
+export const ShortcutHost = ({
+  children,
+  definition,
+  registrations,
+  registrationRevision,
+}: {
+  children: ReactNode;
+  definition: ClientAppDefinition;
+  registrations: Set<RegisteredCommand>;
+  registrationRevision: number;
+}) => {
+  const [, setFocusRevision] = useState(0);
+  const [inputTargets] = useState(() => new Set<ShortcutInputTarget>());
+  const [mediaRevision, setMediaRevision] = useState(0);
+  const registerInputTarget = useCallback(
+    (target: ShortcutInputTarget) => {
+      inputTargets.add(target);
+      return () => {
+        inputTargets.delete(target);
+      };
+    },
+    [inputTargets],
+  );
+  useEffect(() => {
+    const refreshMedia = () => setMediaRevision((revision) => revision + 1);
+    const queries = shortcutMediaQueries(definition).map((media) =>
+      window.matchMedia(media),
+    );
+    queries.forEach((query) => query.addEventListener("change", refreshMedia));
+    return () =>
+      queries.forEach((query) =>
+        query.removeEventListener("change", refreshMedia),
+      );
+  }, [definition]);
+  useEffect(() => {
+    const refreshFocus = () => setFocusRevision((revision) => revision + 1);
+    window.addEventListener("focusin", refreshFocus);
+    return () => window.removeEventListener("focusin", refreshFocus);
+  }, []);
+  useEffect(() => {
+    const shortcuts = flattenShortcuts(
+      definition,
+      (media) => window.matchMedia(media).matches,
+    );
+    let pending: string[] = [];
+    let pendingEvents: KeyboardEvent[] = [];
+    let pendingTarget: ShortcutInputTarget | undefined;
+    let timeout: number | undefined;
+    const clearPending = () => {
+      pending = [];
+      pendingEvents = [];
+      pendingTarget = undefined;
+      if (timeout !== undefined) {
+        window.clearTimeout(timeout);
+        timeout = undefined;
+      }
+    };
+    const replayPending = (events = pendingEvents) => {
+      replayChord(pendingTarget, events);
+      clearPending();
+    };
+    const scheduleTimeout = () => {
+      if (timeout !== undefined) {
+        window.clearTimeout(timeout);
+      }
+      timeout = window.setTimeout(() => replayPending(), 1_000);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (replayedKeyboardEvents.has(event)) {
+        return;
+      }
+      if (pending.length && event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        clearPending();
+        return;
+      }
+      const matches = shortcuts.flatMap((shortcut) =>
+        shortcut.bindings
+          .filter(
+            (binding) =>
+              sequenceMatches(binding, pending, event) &&
+              canRunShortcut(shortcut, event, registrations),
+          )
+          .map((binding) => ({ binding, shortcut })),
+      );
+      if (!matches.length) {
+        if (pending.length) {
+          event.preventDefault();
+          event.stopPropagation();
+          replayPending([...pendingEvents, event]);
+        }
+        return;
+      }
+      const complete = matches.find(
+        ({ binding }) =>
+          normalizedBinding(binding).length === pending.length + 1,
+      );
+      if (complete) {
+        clearPending();
+        if (runShortcut(complete.shortcut, event, registrations)) {
+          event.stopPropagation();
+        }
+        return;
+      }
+      if (!pending.length) {
+        const shouldReplay = definition.chordPrefixes?.some((prefix) =>
+          matchesKeyBinding(prefix.binding, event),
+        );
+        pendingTarget = shouldReplay
+          ? selectShortcutInputTarget(inputTargets, document.activeElement)
+          : undefined;
+      }
+      pending = [
+        ...pending,
+        normalizedBinding(matches[0]!.binding)[pending.length]!,
+      ];
+      pendingEvents = [...pendingEvents, event];
+      event.preventDefault();
+      event.stopPropagation();
+      scheduleTimeout();
+    };
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", onKeyDown, { capture: true });
+      if (timeout !== undefined) {
+        window.clearTimeout(timeout);
+      }
+    };
+  }, [
+    definition,
+    inputTargets,
+    mediaRevision,
+    registrationRevision,
+    registrations,
+  ]);
+  const commands = createCommandEntries(
+    definition,
+    registrations,
+    () => document.activeElement,
+    (media) => window.matchMedia(media).matches,
+  );
+  return (
+    <ShortcutInputTargetsContext.Provider value={registerInputTarget}>
+      <CommandsContext.Provider value={commands}>
+        {children}
+      </CommandsContext.Provider>
+    </ShortcutInputTargetsContext.Provider>
+  );
+};