@tooee/view 0.2.4 → 0.3.0

package/src/hooks/{useContentCommands.ts → use-content-commands.ts}

@@ -1,11 +1,11 @@
-import { useState } from "react"
-import { useCopyCommand, useToggleLineNumbersCommand } from "@tooee/shell"
-import { useConfig } from "@tooee/config"
-import type { AnyContent } from "../types.js"
+import { useState } from "react";
+import { useCopyCommand, useToggleLineNumbersCommand } from "@tooee/shell";
+import { useConfig } from "@tooee/config";
+import type { AnyContent } from "../types.js";
 
 interface UseContentCommandsParams {
-  content: AnyContent | null
-  textContent: string
+  content: AnyContent | null;
+  textContent: string;
 }
 
 /**
@@ -13,17 +13,22 @@ interface UseContentCommandsParams {
  * whole document and toggling the line-number gutter. Theme, quit, actions and
  * every row-level command belong to the document controller and its screen.
  */
-export function useContentCommands({ content, textContent }: UseContentCommandsParams) {
-  const config = useConfig()
-  const [showLineNumbers, setShowLineNumbers] = useState(config.view?.gutter ?? true)
+export const useContentCommands = function useContentCommands({
+  content,
+  textContent,
+}: UseContentCommandsParams) {
+  const config = useConfig();
+  const [showLineNumbers, setShowLineNumbers] = useState(config.view?.gutter ?? true);
 
   useCopyCommand({
     getText: () => (content ? textContent : undefined),
-  })
+  });
   useToggleLineNumbersCommand({
+    onToggle: () => {
+      setShowLineNumbers((v) => !v);
+    },
     showLineNumbers,
-    onToggle: () => setShowLineNumbers((v) => !v),
-  })
+  });
 
-  return { showLineNumbers }
-}
+  return { showLineNumbers };
+};

package/src/hooks/use-content-loader.ts

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { useSelector } from "@xstate/store-react";
+import type { ContentProvider } from "../types.js";
+import {
+  createContentLoaderStore,
+  isAsyncIterable,
+  normalizeError,
+  selectContent,
+  selectError,
+  selectLoadSeq,
+  selectProviderMarks,
+  selectStatus,
+  selectStreaming,
+} from "../content-loader-store.js";
+
+export const useContentLoader = function useContentLoader(contentProvider: ContentProvider) {
+  const store = useMemo(createContentLoaderStore, []);
+  const loadSeq = useSelector(store, (snapshot) => selectLoadSeq(snapshot.context));
+
+  useEffect(() => {
+    store.trigger.loadStarted({
+      marks: contentProvider.marks ?? [],
+      title: contentProvider.title,
+    });
+    const { requestId } = store.getSnapshot().context;
+    const loaded = contentProvider.load();
+    let cleanup: () => void = () => {
+      // Synchronous providers have no pending work to cancel.
+    };
+
+    if (isAsyncIterable(loaded)) {
+      store.trigger.streamStarted({
+        format: contentProvider.format ?? "markdown",
+        requestId,
+      });
+      const iterator = loaded[Symbol.asyncIterator]();
+      void (async () => {
+        try {
+          while (true) {
+            // Deferred(lint-sweep): preserve sequential stream consumption for ordered backpressure.
+            // oxlint-disable-next-line no-await-in-loop -- each chunk must be consumed in iterator order
+            const result = await iterator.next();
+            if (result.done === true) {
+              break;
+            }
+            store.trigger.chunkReceived({ chunk: result.value, requestId });
+          }
+          store.trigger.streamEnded({ requestId });
+        } catch (error) {
+          store.trigger.loadFailed({ error: normalizeError(error), requestId });
+        }
+      })();
+      cleanup = () => {
+        store.trigger.loadCancelled({ requestId });
+        void (async () => {
+          try {
+            await iterator.return?.();
+          } catch {
+            // Iterator cleanup is best-effort during effect disposal.
+          }
+        })();
+      };
+    } else if (loaded instanceof Promise) {
+      void (async () => {
+        try {
+          const content = await loaded;
+          store.trigger.loaded({ content, requestId });
+        } catch (error) {
+          store.trigger.loadFailed({ error: normalizeError(error), requestId });
+        }
+      })();
+      cleanup = () => {
+        store.trigger.loadCancelled({ requestId });
+      };
+    } else {
+      store.trigger.loaded({ content: loaded, requestId });
+    }
+
+    return cleanup;
+  }, [contentProvider, loadSeq, store]);
+
+  const content = useSelector(store, (snapshot) => selectContent(snapshot.context));
+  const streaming = useSelector(store, (snapshot) => selectStreaming(snapshot.context));
+  const error = useSelector(store, (snapshot) => selectError(snapshot.context));
+  const providerMarks = useSelector(store, (snapshot) => selectProviderMarks(snapshot.context));
+  const status = useSelector(store, (snapshot) => selectStatus(snapshot.context));
+  const reload = useCallback(() => {
+    store.trigger.reloadRequested({});
+  }, [store]);
+
+  return { content, error, providerMarks, reload, status, streaming };
+};

package/src/hooks/{useViewCommandContext.ts → use-view-command-context.ts}

@@ -1,6 +1,6 @@
-import { useProvideCommandContextKey } from "@tooee/commands"
-import type { MarkSet } from "@tooee/marks"
-import type { AnyContent } from "../types.js"
+import { useProvideCommandContextKey } from "@tooee/commands";
+import type { MarkSet } from "@tooee/marks";
+import type { AnyContent } from "../types.js";
 
 /**
  * The `view` field contributed to the command context (see augmentation below).
@@ -10,45 +10,47 @@ import type { AnyContent } from "../types.js"
  * which `DocumentScreen` provides alongside this.
  */
 export interface ViewCommandContext {
-  content: AnyContent
-  format: string
-  title?: string
-  data?: unknown
+  content: AnyContent;
+  format: string;
+  title?: string;
+  data?: unknown;
   /** Reload the content from its provider. */
-  reload: () => void
+  reload: () => void;
   marks: {
-    setMarkSet: (set: MarkSet) => void
-    clearNamespace: (namespace: string) => void
-    clearAll: () => void
-    userMarks: MarkSet[]
-    providerMarks: MarkSet[]
-  }
+    setMarkSet: (set: MarkSet) => void;
+    clearNamespace: (namespace: string) => void;
+    clearAll: () => void;
+    userMarks: MarkSet[];
+    providerMarks: MarkSet[];
+  };
 }
 
 declare module "@tooee/commands" {
   interface CommandContext {
-    view: ViewCommandContext
+    view: ViewCommandContext;
   }
 }
 
-const noop = () => {}
+const noop = () => {
+  // Optional command-context operations default to intentional no-ops.
+};
 
 export interface CreateViewCommandContextOptions {
   /**
    * Content represented by this command context. Custom/headless surfaces may
    * omit it; the builder will synthesize a minimal custom content object.
    */
-  content?: AnyContent
-  format?: string
-  title?: string
-  data?: unknown
-  reload?: () => void
-  marks?: Partial<ViewCommandContext["marks"]>
+  content?: AnyContent;
+  format?: string;
+  title?: string;
+  data?: unknown;
+  reload?: () => void;
+  marks?: Partial<ViewCommandContext["marks"]>;
 }
 
-export type ProvideViewCommandContextOptions = CreateViewCommandContextOptions
+export type ProvideViewCommandContextOptions = CreateViewCommandContextOptions;
 
-export function createViewCommandContext({
+export const createViewCommandContext = function createViewCommandContext({
   content,
   format,
   title,
@@ -56,35 +58,35 @@ export function createViewCommandContext({
   reload,
   marks,
 }: CreateViewCommandContextOptions): ViewCommandContext {
-  const resolvedFormat = format ?? content?.format ?? "custom"
+  const resolvedFormat = format ?? content?.format ?? "custom";
   const resolvedContent: AnyContent =
     content ??
     ({
-      format: resolvedFormat,
       data,
+      format: resolvedFormat,
       title,
-    } satisfies AnyContent)
+    } satisfies AnyContent);
 
   return {
     content: resolvedContent,
-    format: resolvedFormat,
-    title: title ?? content?.title,
     data: data ?? ("data" in resolvedContent ? resolvedContent.data : undefined),
-    reload: reload ?? noop,
+    format: resolvedFormat,
     marks: {
-      setMarkSet: marks?.setMarkSet ?? noop,
-      clearNamespace: marks?.clearNamespace ?? noop,
       clearAll: marks?.clearAll ?? noop,
-      userMarks: marks?.userMarks ?? [],
+      clearNamespace: marks?.clearNamespace ?? noop,
       providerMarks: marks?.providerMarks ?? [],
+      setMarkSet: marks?.setMarkSet ?? noop,
+      userMarks: marks?.userMarks ?? [],
     },
-  }
-}
+    reload: reload ?? noop,
+    title: title ?? content?.title,
+  };
+};
 
-export function useProvideViewCommandContext(
+export const useProvideViewCommandContext = function useProvideViewCommandContext(
   options: ProvideViewCommandContextOptions | (() => ProvideViewCommandContextOptions),
 ) {
   useProvideCommandContextKey("view", () =>
     createViewCommandContext(typeof options === "function" ? options() : options),
-  )
-}
+  );
+};

package/src/index.ts

@@ -1,25 +1,25 @@
-export { View } from "./View.js"
-export { DirectoryView } from "./DirectoryView.js"
-export { launch, launchDirectory } from "./launch.js"
-export type { ViewLaunchOptions } from "./launch.js"
+export { View } from "./view.js";
+export { DirectoryView } from "./directory-view.js";
+export { launch, launchDirectory } from "./launch.js";
+export type { ViewLaunchOptions } from "./launch.js";
 export {
   createFileProvider,
   createStdinProvider,
   createTableFileProvider,
   createTableStdinProvider,
-} from "./default-provider.js"
-export type { CreateProviderOptions } from "./default-provider.js"
-export { listDirectoryFiles } from "./directory-provider.js"
-export type { DirectoryEntry } from "./directory-provider.js"
+} from "./default-provider.js";
+export type { CreateProviderOptions } from "./default-provider.js";
+export { listDirectoryFiles } from "./directory-provider.js";
+export type { DirectoryEntry } from "./directory-provider.js";
 export {
   createViewCommandContext,
   useProvideViewCommandContext,
-} from "./hooks/useViewCommandContext.js"
+} from "./hooks/use-view-command-context.js";
 export type {
   CreateViewCommandContextOptions,
   ProvideViewCommandContextOptions,
   ViewCommandContext,
-} from "./hooks/useViewCommandContext.js"
+} from "./hooks/use-view-command-context.js";
 export type {
   AnyContent,
   Content,
@@ -33,7 +33,7 @@ export type {
   ViewContentProvider,
   ColumnDef,
   TableRow,
-} from "./types.js"
-export { getTextContent, isBuiltinContent, isCustomContent } from "./types.js"
-export { CodeBlockChrome } from "@tooee/renderers"
-export type { CodeBlockRenderer, CodeBlockRendererProps, CodeBlockHScroll } from "@tooee/renderers"
+} from "./types.js";
+export { getTextContent, isBuiltinContent, isCustomContent } from "./types.js";
+export { CodeBlockChrome } from "@tooee/renderers";
+export type { CodeBlockRenderer, CodeBlockRendererProps, CodeBlockHScroll } from "@tooee/renderers";

package/src/launch.tsx

@@ -1,28 +1,28 @@
-import { launchCli } from "@tooee/shell"
-import type { ActionDefinition } from "@tooee/commands"
-import type { CodeBlockRenderer } from "@tooee/renderers"
-import { View } from "./View.js"
-import { DirectoryView } from "./DirectoryView.js"
-import type { ContentProvider, ContentRenderer } from "./types.js"
+import { launchCli } from "@tooee/shell";
+import type { ActionDefinition } from "@tooee/commands";
+import type { CodeBlockRenderer } from "@tooee/renderers";
+import { View } from "./view.js";
+import { DirectoryView } from "./directory-view.js";
+import type { ContentProvider, ContentRenderer } from "./types.js";
 
 export interface ViewLaunchOptions {
-  contentProvider: ContentProvider
-  actions?: ActionDefinition[]
-  renderers?: Record<string, ContentRenderer>
+  contentProvider: ContentProvider;
+  actions?: ActionDefinition[];
+  renderers?: Record<string, ContentRenderer>;
   /**
    * Custom renderers for fenced code blocks in markdown content, keyed by
    * fence type (first word of the fence info string, case-insensitive).
    * Unmatched types fall back to the default syntax-highlighted code block.
    */
-  codeBlockRenderers?: Record<string, CodeBlockRenderer>
+  codeBlockRenderers?: Record<string, CodeBlockRenderer>;
 }
 
 export interface DirectoryLaunchOptions {
-  dirPath: string
-  actions?: ActionDefinition[]
+  dirPath: string;
+  actions?: ActionDefinition[];
 }
 
-export async function launch(options: ViewLaunchOptions): Promise<void> {
+export const launch = async function launch(options: ViewLaunchOptions): Promise<void> {
   await launchCli(
     <View
       contentProvider={options.contentProvider}
@@ -30,9 +30,11 @@ export async function launch(options: ViewLaunchOptions): Promise<void> {
       renderers={options.renderers}
       codeBlockRenderers={options.codeBlockRenderers}
     />,
-  )
-}
+  );
+};
 
-export async function launchDirectory(options: DirectoryLaunchOptions): Promise<void> {
-  await launchCli(<DirectoryView dirPath={options.dirPath} actions={options.actions} />)
-}
+export const launchDirectory = async function launchDirectory(
+  options: DirectoryLaunchOptions,
+): Promise<void> {
+  await launchCli(<DirectoryView dirPath={options.dirPath} actions={options.actions} />);
+};

package/src/types.ts

@@ -1,57 +1,57 @@
-import type { ReactNode } from "react"
-import type { ColumnDef, SourceLineRow, TableRow } from "@tooee/renderers"
-import type { DocumentController } from "@tooee/shell"
-import type { MarkSet } from "@tooee/marks"
+import type { ReactNode } from "react";
+import type { ColumnDef, SourceLineRow, TableRow } from "@tooee/renderers";
+import type { DocumentController } from "@tooee/shell";
+import type { MarkSet } from "@tooee/marks";
 
 // === Built-in content types ===
 
-export type Content = MarkdownContent | CodeContent | TextContent | TableContent
+export type Content = MarkdownContent | CodeContent | TextContent | TableContent;
 
-export type ContentFormat = Content["format"]
+export type ContentFormat = Content["format"];
 
 interface BaseContent {
-  title?: string
-  getTextContent?: () => string
+  title?: string;
+  getTextContent?: () => string;
 }
 
 export interface MarkdownContent extends BaseContent {
-  format: "markdown"
-  markdown: string
+  format: "markdown";
+  markdown: string;
 }
 
 export interface CodeContent extends BaseContent {
-  format: "code"
-  code: string
-  language?: string
+  format: "code";
+  code: string;
+  language?: string;
 }
 
 export interface TextContent extends BaseContent {
-  format: "text"
-  text: string
+  format: "text";
+  text: string;
 }
 
 export interface TableContent extends BaseContent {
-  format: "table"
-  columns: ColumnDef[]
-  rows: TableRow[]
+  format: "table";
+  columns: ColumnDef[];
+  rows: TableRow[];
 }
 
 // === Custom content ===
 
 export interface CustomContent<T = unknown> {
-  format: string
-  data: T
-  title?: string
-  getTextContent?: () => string
+  format: string;
+  data: T;
+  title?: string;
+  getTextContent?: () => string;
 }
 
 /** Content or custom content — used where custom formats are accepted */
-export type AnyContent = Content | CustomContent
+export type AnyContent = Content | CustomContent;
 
 // === Custom renderers ===
 
 export interface ContentRendererProps {
-  content: CustomContent
+  content: CustomContent;
   /**
    * The host's document controller. Its rows are the content's source lines
    * (`SourceLineRow`), which is also the unit navigation, search and copy work
@@ -65,98 +65,127 @@ export interface ContentRendererProps {
    * `selectRow` stands down while a modal overlay is open, so it can be wired
    * unconditionally.
    */
-  document: DocumentController<SourceLineRow>
+  document: DocumentController<SourceLineRow>;
 }
 
-export type ContentRenderer = (props: ContentRendererProps) => ReactNode
+export type ContentRenderer = (props: ContentRendererProps) => ReactNode;
 
 // === Streaming ===
 
-export type AppendableFormat = Extract<ContentFormat, "markdown" | "code" | "text">
+export type AppendableFormat = Extract<ContentFormat, "markdown" | "code" | "text">;
 
 export type ContentChunk =
   | {
-      type: "append"
-      format: AppendableFormat
-      data: string
-      language?: string
+      type: "append";
+      format: AppendableFormat;
+      data: string;
+      language?: string;
     }
   | {
-      type: "replace"
-      content: AnyContent
+      type: "replace";
+      content: AnyContent;
     }
   | {
-      type: "patch"
-      apply: (current: AnyContent | null) => AnyContent
+      type: "patch";
+      apply: (current: AnyContent | null) => AnyContent;
     }
   | {
-      type: "marks"
-      set: MarkSet
-    }
+      type: "marks";
+      set: MarkSet;
+    };
 
 // === Provider ===
 
 export interface ContentProvider {
-  load(): AnyContent | Promise<AnyContent> | AsyncIterable<ContentChunk>
-  format?: string
-  title?: string
+  load: () => AnyContent | Promise<AnyContent> | AsyncIterable<ContentChunk>;
+  format?: string;
+  title?: string;
   /** Static marks to apply to the content. Merged with nav marks in View. */
-  marks?: MarkSet[]
+  marks?: MarkSet[];
 }
 
 // === Compat aliases ===
 
-export type ViewContent = Content
-export type ViewContentProvider = ContentProvider
-export type { ColumnDef, TableRow } from "@tooee/renderers"
+export type ViewContent = Content;
+export type ViewContentProvider = ContentProvider;
+export type { ColumnDef, TableRow } from "@tooee/renderers";
 
 // === Utilities ===
 
-const BUILTIN_FORMATS: Set<string> = new Set(["markdown", "code", "text", "table"])
+const BUILTIN_FORMATS = new Set<string>(["markdown", "code", "text", "table"]);
 
-export function isBuiltinContent(content: AnyContent): content is Content {
-  return BUILTIN_FORMATS.has(content.format)
-}
+export const isBuiltinContent = function isBuiltinContent(content: AnyContent): content is Content {
+  return BUILTIN_FORMATS.has(content.format);
+};
 
-export function isCustomContent(content: AnyContent): content is CustomContent {
-  return !BUILTIN_FORMATS.has(content.format)
-}
+export const isCustomContent = function isCustomContent(
+  content: AnyContent,
+): content is CustomContent {
+  return !BUILTIN_FORMATS.has(content.format);
+};
+
+const stringifyCell = function stringifyCell(value: unknown): string {
+  if (value === null || value === undefined) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (
+    typeof value === "number" ||
+    typeof value === "bigint" ||
+    typeof value === "boolean" ||
+    typeof value === "symbol"
+  ) {
+    return value.toString();
+  }
+  if (value === null || value === undefined) {
+    return String(value);
+  }
+  if (typeof value === "function") {
+    return Function.prototype.toString.call(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return Array.isArray(value) ? value.join(",") : Object.prototype.toString.call(value);
+  }
+};
 
-export function getTextContent(content: AnyContent): string {
+export const getTextContent = function getTextContent(content: AnyContent): string {
   if (content.getTextContent) {
-    return content.getTextContent()
+    return content.getTextContent();
   }
 
   if (isCustomContent(content)) {
-    return ""
+    return "";
   }
 
   switch (content.format) {
-    case "markdown":
-      return content.markdown
-    case "code":
-      return content.code
-    case "text":
-      return content.text
+    case "markdown": {
+      return content.markdown;
+    }
+    case "code": {
+      return content.code;
+    }
+    case "text": {
+      return content.text;
+    }
     case "table": {
-      const headers = content.columns.map((column) => column.header ?? column.key)
+      const headers = content.columns.map((column) => column.header ?? column.key);
       const rowLines = content.rows.map((row) =>
         content.columns.map((column) => stringifyCell(row[column.key])).join("\t"),
-      )
-      return [headers.join("\t"), ...rowLines].join("\n")
+      );
+      return [headers.join("\t"), ...rowLines].join("\n");
+    }
+    default: {
+      return "";
     }
-    default:
-      return ""
-  }
-}
-
-function stringifyCell(value: unknown): string {
-  if (value == null) return ""
-  if (typeof value === "string") return value
-  if (typeof value === "number" || typeof value === "boolean") return String(value)
-  try {
-    return JSON.stringify(value)
-  } catch {
-    return String(value)
   }
-}
+};