@tooee/view 0.2.3 → 0.3.0

package/src/content-loader-store.ts

@@ -1,154 +1,186 @@
-import { createStore } from "@xstate/store"
-import type { MarkSet } from "@tooee/marks"
-import type { AnyContent, Content, ContentChunk, ContentFormat, CustomContent } from "./types.js"
+import { createStore } from "@xstate/store";
+import type { MarkSet } from "@tooee/marks";
+import type { AnyContent, Content, ContentChunk, ContentFormat } from "./types.js";
 
-export type ContentLoaderStatus = "idle" | "loading" | "streaming" | "ready" | "error"
+export type ContentLoaderStatus = "idle" | "loading" | "streaming" | "ready" | "error";
 
 export interface ContentLoaderContext {
-  status: ContentLoaderStatus
-  requestId: number
-  loadSeq: number
-  content: AnyContent | null
-  error: string | null
-  providerMarks: MarkSet[]
-  title: string | undefined
+  status: ContentLoaderStatus;
+  requestId: number;
+  loadSeq: number;
+  content: AnyContent | null;
+  error: string | null;
+  providerMarks: MarkSet[];
+  title: string | undefined;
 }
 
-export type ContentLoaderEvents = {
-  loadStarted: { marks: MarkSet[]; title?: string }
-  streamStarted: { requestId: number; format: string }
-  chunkReceived: { requestId: number; chunk: ContentChunk }
-  loaded: { requestId: number; content: AnyContent }
-  streamEnded: { requestId: number }
-  loadFailed: { requestId: number; error: string }
-  loadCancelled: { requestId: number }
-  reloadRequested: {}
+interface ContentLoaderEventPayloads {
+  loadStarted: { marks: MarkSet[]; title?: string };
+  streamStarted: { requestId: number; format: string };
+  chunkReceived: { requestId: number; chunk: ContentChunk };
+  loaded: { requestId: number; content: AnyContent };
+  streamEnded: { requestId: number };
+  loadFailed: { requestId: number; error: string };
+  loadCancelled: { requestId: number };
+  reloadRequested: Record<PropertyKey, never>;
 }
 
-export function isAsyncIterable(value: unknown): value is AsyncIterable<ContentChunk> {
-  return value != null && typeof value === "object" && Symbol.asyncIterator in value
-}
+export type ContentLoaderEvents = {
+  [Event in keyof ContentLoaderEventPayloads]: ContentLoaderEventPayloads[Event];
+};
+
+export const isAsyncIterable = function isAsyncIterable(
+  value: unknown,
+): value is AsyncIterable<ContentChunk> {
+  return (
+    value !== null &&
+    value !== undefined &&
+    typeof value === "object" &&
+    Symbol.asyncIterator in value
+  );
+};
 
-export function createEmptyContent(format: string, title?: string): AnyContent {
+export const createEmptyContent = function createEmptyContent(
+  format: string,
+  title?: string,
+): AnyContent {
   switch (format) {
-    case "markdown":
-      return { format, markdown: "", title }
-    case "code":
-      return { format, code: "", title }
-    case "text":
-      return { format, text: "", title }
-    case "table":
-      return { format, columns: [], rows: [], title }
-    default:
-      return { format, data: undefined, title } as CustomContent
+    case "markdown": {
+      return { format, markdown: "", title };
+    }
+    case "code": {
+      return { code: "", format, title };
+    }
+    case "text": {
+      return { format, text: "", title };
+    }
+    case "table": {
+      return { columns: [], format, rows: [], title };
+    }
+    default: {
+      return { data: undefined, format, title };
+    }
   }
-}
+};
 
-function ensureContentFormat<F extends ContentFormat>(
+const ensureContentFormat = function ensureContentFormat<F extends ContentFormat>(
   current: AnyContent | null,
   format: F,
   title?: string,
 ): Extract<Content, { format: F }> {
   if (!current || current.format !== format) {
-    return createEmptyContent(format, title) as Extract<Content, { format: F }>
+    // Deferred(lint-sweep): add schema-based validation for custom and streamed content formats.
+    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- format-dependent content is trusted at this provider boundary
+    return createEmptyContent(format, title) as Extract<Content, { format: F }>;
   }
-  return current as Extract<Content, { format: F }>
-}
+  // Deferred(lint-sweep): add schema-based validation for custom and streamed content formats.
+  // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the provider contract supplies the matching format
+  return current as Extract<Content, { format: F }>;
+};
 
-export function applyContentChunk(
+export const applyContentChunk = function applyContentChunk(
   current: AnyContent | null,
   chunk: ContentChunk,
   title?: string,
 ): AnyContent {
   switch (chunk.type) {
-    case "replace":
-      return chunk.content
-    case "append":
+    case "replace": {
+      return chunk.content;
+    }
+    case "append": {
       if (chunk.format === "markdown") {
-        const target = ensureContentFormat(current, "markdown", title)
-        return { ...target, markdown: target.markdown + chunk.data }
+        const target = ensureContentFormat(current, "markdown", title);
+        return { ...target, markdown: target.markdown + chunk.data };
       }
       if (chunk.format === "code") {
-        const target = ensureContentFormat(current, "code", title)
+        const target = ensureContentFormat(current, "code", title);
         return {
           ...target,
           code: target.code + chunk.data,
           language: chunk.language ?? target.language,
-        }
+        };
       }
       {
-        const target = ensureContentFormat(current, "text", title)
-        return { ...target, text: target.text + chunk.data }
+        const target = ensureContentFormat(current, "text", title);
+        return { ...target, text: target.text + chunk.data };
       }
-    case "patch":
-      return chunk.apply(current)
-    default:
-      return current ?? createEmptyContent("markdown", title)
+    }
+    case "patch": {
+      return chunk.apply(current);
+    }
+    case "marks": {
+      return current ?? createEmptyContent("markdown", title);
+    }
+    default: {
+      return current ?? createEmptyContent("markdown", title);
+    }
   }
-}
+};
 
-export function normalizeError(error: unknown): string {
-  return error instanceof Error ? error.message : String(error)
-}
+export const normalizeError = function normalizeError(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+};
 
-export function createContentLoaderStore() {
+export const createContentLoaderStore = function createContentLoaderStore() {
   return createStore<ContentLoaderContext, ContentLoaderEvents>({
     context: {
-      status: "idle",
-      requestId: 0,
-      loadSeq: 0,
       content: null,
       error: null,
+      loadSeq: 0,
       providerMarks: [],
+      requestId: 0,
+      status: "idle",
       title: undefined,
     },
     on: {
-      loadStarted: (ctx, event) => ({
-        ...ctx,
-        status: "loading",
-        requestId: ctx.requestId + 1,
-        error: null,
-        providerMarks: event.marks,
-        title: event.title,
-      }),
-      streamStarted: (ctx, event) =>
-        event.requestId !== ctx.requestId
-          ? ctx
-          : {
-              ...ctx,
-              status: "streaming",
-              content: createEmptyContent(event.format, ctx.title),
-            },
       chunkReceived: (ctx, event) => {
-        if (event.requestId !== ctx.requestId) return ctx
+        if (event.requestId !== ctx.requestId) {
+          return ctx;
+        }
         if (event.chunk.type === "marks") {
-          const markSet = event.chunk.set
+          const markSet = event.chunk.set;
           const providerMarks = [
             ...ctx.providerMarks.filter((set) => set.namespace !== markSet.namespace),
             markSet,
-          ]
-          return { ...ctx, providerMarks }
+          ];
+          return { ...ctx, providerMarks };
         }
-        return { ...ctx, content: applyContentChunk(ctx.content, event.chunk, ctx.title) }
+        return { ...ctx, content: applyContentChunk(ctx.content, event.chunk, ctx.title) };
       },
-      loaded: (ctx, event) =>
-        event.requestId !== ctx.requestId
-          ? ctx
-          : { ...ctx, status: "ready", content: event.content },
-      streamEnded: (ctx, event) =>
-        event.requestId !== ctx.requestId ? ctx : { ...ctx, status: "ready" },
-      loadFailed: (ctx, event) =>
-        event.requestId !== ctx.requestId ? ctx : { ...ctx, status: "error", error: event.error },
       loadCancelled: (ctx, event) =>
-        event.requestId !== ctx.requestId ? ctx : { ...ctx, requestId: ctx.requestId + 1 },
+        event.requestId === ctx.requestId ? { ...ctx, requestId: ctx.requestId + 1 } : ctx,
+      loadFailed: (ctx, event) =>
+        event.requestId === ctx.requestId ? { ...ctx, error: event.error, status: "error" } : ctx,
+      loadStarted: (ctx, event) => ({
+        ...ctx,
+        error: null,
+        providerMarks: event.marks,
+        requestId: ctx.requestId + 1,
+        status: "loading",
+        title: event.title,
+      }),
+      loaded: (ctx, event) =>
+        event.requestId === ctx.requestId
+          ? { ...ctx, content: event.content, status: "ready" }
+          : ctx,
       reloadRequested: (ctx) => ({ ...ctx, loadSeq: ctx.loadSeq + 1 }),
+      streamEnded: (ctx, event) =>
+        event.requestId === ctx.requestId ? { ...ctx, status: "ready" } : ctx,
+      streamStarted: (ctx, event) =>
+        event.requestId === ctx.requestId
+          ? {
+              ...ctx,
+              content: createEmptyContent(event.format, ctx.title),
+              status: "streaming",
+            }
+          : ctx,
     },
-  })
-}
+  });
+};
 
-export const selectContent = (ctx: ContentLoaderContext) => ctx.content
-export const selectStatus = (ctx: ContentLoaderContext) => ctx.status
-export const selectStreaming = (ctx: ContentLoaderContext) => ctx.status === "streaming"
-export const selectError = (ctx: ContentLoaderContext) => ctx.error
-export const selectProviderMarks = (ctx: ContentLoaderContext) => ctx.providerMarks
-export const selectLoadSeq = (ctx: ContentLoaderContext) => ctx.loadSeq
+export const selectContent = (ctx: ContentLoaderContext) => ctx.content;
+export const selectStatus = (ctx: ContentLoaderContext) => ctx.status;
+export const selectStreaming = (ctx: ContentLoaderContext) => ctx.status === "streaming";
+export const selectError = (ctx: ContentLoaderContext) => ctx.error;
+export const selectProviderMarks = (ctx: ContentLoaderContext) => ctx.providerMarks;
+export const selectLoadSeq = (ctx: ContentLoaderContext) => ctx.loadSeq;

package/src/default-provider.ts

@@ -1,106 +1,126 @@
-import { parseAuto } from "@tooee/renderers"
-import type { Content, ContentFormat, ContentProvider } from "./types.js"
+import { parseAuto } from "@tooee/renderers";
+import type { Content, ContentFormat, ContentProvider } from "./types.js";
 
 export interface CreateProviderOptions {
-  renderer?: ContentFormat
+  renderer?: ContentFormat;
 }
 
-function detectFormat(filePath: string): { format: ContentFormat; language?: string } {
-  const ext = filePath.split(".").pop()?.toLowerCase()
-  if (!ext) return { format: "text" }
+const detectFormat = function detectFormat(filePath: string): {
+  format: ContentFormat;
+  language?: string;
+} {
+  const ext = filePath.split(".").pop()?.toLowerCase();
+  if (ext === undefined || ext === "") {
+    return { format: "text" };
+  }
 
-  const tableExts = new Set(["csv", "tsv"])
-  if (tableExts.has(ext)) return { format: "table" }
+  const tableExts = new Set(["csv", "tsv"]);
+  if (tableExts.has(ext)) {
+    return { format: "table" };
+  }
 
-  const markdownExts = new Set(["md", "mdx", "markdown"])
-  if (markdownExts.has(ext)) return { format: "markdown" }
+  const markdownExts = new Set(["md", "mdx", "markdown"]);
+  if (markdownExts.has(ext)) {
+    return { format: "markdown" };
+  }
 
   const codeExts: Record<string, string> = {
-    ts: "typescript",
-    tsx: "typescript",
-    js: "javascript",
-    jsx: "javascript",
-    py: "python",
-    rs: "rust",
-    go: "go",
-    rb: "ruby",
-    sh: "bash",
     bash: "bash",
-    zsh: "zsh",
-    json: "json",
-    yaml: "yaml",
-    yml: "yaml",
-    toml: "toml",
-    css: "css",
-    html: "html",
-    sql: "sql",
     c: "c",
     cpp: "cpp",
+    css: "css",
+    go: "go",
     h: "c",
     hpp: "cpp",
+    html: "html",
     java: "java",
+    js: "javascript",
+    json: "json",
+    jsx: "javascript",
     kt: "kotlin",
+    py: "python",
+    rb: "ruby",
+    rs: "rust",
+    sh: "bash",
+    sql: "sql",
     swift: "swift",
-  }
+    toml: "toml",
+    ts: "typescript",
+    tsx: "typescript",
+    yaml: "yaml",
+    yml: "yaml",
+    zsh: "zsh",
+  };
 
-  const language = codeExts[ext]
-  if (language) return { format: "code", language }
+  const language = codeExts[ext];
+  if (typeof language === "string") {
+    return { format: "code", language };
+  }
 
-  return { format: "text" }
-}
+  return { format: "text" };
+};
 
-function contentFromText(
+const contentFromText = function contentFromText(
   text: string,
   format: ContentFormat,
   title: string | undefined,
   language?: string,
 ): Content {
   switch (format) {
-    case "markdown":
-      return { format: "markdown", markdown: text, title }
-    case "code":
-      return { format: "code", code: text, language, title }
+    case "markdown": {
+      return { format: "markdown", markdown: text, title };
+    }
+    case "code": {
+      return { code: text, format: "code", language, title };
+    }
     case "table": {
-      const parsed = parseAuto(text)
-      return { format: "table", columns: parsed.columns, rows: parsed.rows, title }
+      const parsed = parseAuto(text);
+      return { columns: parsed.columns, format: "table", rows: parsed.rows, title };
+    }
+    case "text": {
+      return { format: "text", text, title };
+    }
+    default: {
+      return { format: "text", text, title };
     }
-    case "text":
-    default:
-      return { format: "text", text, title }
   }
-}
+};
 
-export function createFileProvider(
+export const createFileProvider = function createFileProvider(
   filePath: string,
   options: CreateProviderOptions = {},
 ): ContentProvider {
   return {
     async load(): Promise<Content> {
-      const detected = detectFormat(filePath)
-      const format = options.renderer ?? detected.format
-      const title = filePath.split("/").pop()
+      const detected = detectFormat(filePath);
+      const format = options.renderer ?? detected.format;
+      const title = filePath.split("/").pop();
 
-      const file = Bun.file(filePath)
-      const text = await file.text()
-      return contentFromText(text, format, title, detected.language)
+      const file = Bun.file(filePath);
+      const text = await file.text();
+      return contentFromText(text, format, title, detected.language);
     },
-  }
-}
+  };
+};
 
-export function createStdinProvider(options: CreateProviderOptions = {}): ContentProvider {
+export const createStdinProvider = function createStdinProvider(
+  options: CreateProviderOptions = {},
+): ContentProvider {
   return {
     async load(): Promise<Content> {
-      const text = await new Response(Bun.stdin.stream() as unknown as ReadableStream).text()
-      const format = options.renderer ?? "markdown"
-      return contentFromText(text, format, "stdin")
+      const text = await new Response(Bun.stdin.stream()).text();
+      const format = options.renderer ?? "markdown";
+      return contentFromText(text, format, "stdin");
     },
-  }
-}
+  };
+};
 
-export function createTableFileProvider(filePath: string): ContentProvider {
-  return createFileProvider(filePath, { renderer: "table" })
-}
+export const createTableFileProvider = function createTableFileProvider(
+  filePath: string,
+): ContentProvider {
+  return createFileProvider(filePath, { renderer: "table" });
+};
 
-export function createTableStdinProvider(): ContentProvider {
-  return createStdinProvider({ renderer: "table" })
-}
+export const createTableStdinProvider = function createTableStdinProvider(): ContentProvider {
+  return createStdinProvider({ renderer: "table" });
+};

package/src/directory-provider.ts

@@ -1,7 +1,7 @@
-import { readdirSync, statSync } from "fs"
-import { join } from "path"
-import type { ContentProvider } from "./types.js"
-import { createFileProvider } from "./default-provider.js"
+import { readdirSync, statSync } from "node:fs";
+import path from "node:path";
+import type { ContentProvider } from "./types.js";
+import { createFileProvider } from "./default-provider.js";
 
 const SUPPORTED_EXTENSIONS = new Set([
   "md",
@@ -33,35 +33,43 @@ const SUPPORTED_EXTENSIONS = new Set([
   "kt",
   "swift",
   "sql",
-])
+]);
 
 export interface DirectoryEntry {
-  name: string
-  path: string
+  name: string;
+  path: string;
 }
 
-export function listDirectoryFiles(dirPath: string): DirectoryEntry[] {
-  const entries = readdirSync(dirPath)
-  const files: DirectoryEntry[] = []
+export const listDirectoryFiles = function listDirectoryFiles(dirPath: string): DirectoryEntry[] {
+  const entries = readdirSync(dirPath);
+  const files: DirectoryEntry[] = [];
 
   for (const entry of entries) {
-    if (entry.startsWith(".")) continue
-    const fullPath = join(dirPath, entry)
+    if (entry.startsWith(".")) {
+      continue;
+    }
+    const fullPath = path.join(dirPath, entry);
     try {
-      const stat = statSync(fullPath)
-      if (!stat.isFile()) continue
+      const stat = statSync(fullPath);
+      if (!stat.isFile()) {
+        continue;
+      }
     } catch {
-      continue
+      continue;
+    }
+    const ext = entry.split(".").pop()?.toLowerCase();
+    if (ext === undefined || ext === "" || !SUPPORTED_EXTENSIONS.has(ext)) {
+      continue;
     }
-    const ext = entry.split(".").pop()?.toLowerCase()
-    if (!ext || !SUPPORTED_EXTENSIONS.has(ext)) continue
-    files.push({ name: entry, path: fullPath })
+    files.push({ name: entry, path: fullPath });
   }
 
-  files.sort((a, b) => a.name.localeCompare(b.name))
-  return files
-}
+  files.sort((a, b) => a.name.localeCompare(b.name));
+  return files;
+};
 
-export function createDirectoryFileProvider(filePath: string): ContentProvider {
-  return createFileProvider(filePath)
-}
+export const createDirectoryFileProvider = function createDirectoryFileProvider(
+  filePath: string,
+): ContentProvider {
+  return createFileProvider(filePath);
+};

package/src/directory-view.tsx

@@ -0,0 +1,79 @@
+import { useState, useMemo } from "react";
+import { useCommand } from "@tooee/commands";
+import type { ActionDefinition } from "@tooee/commands";
+import { View } from "./view.js";
+import { listDirectoryFiles } from "./directory-provider.js";
+import type { DirectoryEntry } from "./directory-provider.js";
+import type { AnyContent, ContentProvider } from "./types.js";
+import { createFileProvider } from "./default-provider.js";
+
+const createDirectoryFileProvider = function createDirectoryFileProvider(
+  entry: DirectoryEntry,
+  index: number,
+  total: number,
+): ContentProvider {
+  const inner = createFileProvider(entry.path);
+  return {
+    async load(): Promise<AnyContent> {
+      const result = inner.load();
+      // Deferred(lint-sweep): add schema-based validation for custom and streamed content formats.
+      // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- file providers return external content at this boundary
+      const content = result instanceof Promise ? await result : (result as AnyContent);
+      return {
+        ...content,
+        title: `${entry.name}  (${index + 1}/${total})`,
+      };
+    },
+  };
+};
+
+interface DirectoryViewProps {
+  dirPath: string;
+  actions?: ActionDefinition[];
+}
+
+export const DirectoryView = function DirectoryView({
+  dirPath,
+  actions,
+}: DirectoryViewProps): React.ReactNode {
+  const files = useMemo(() => listDirectoryFiles(dirPath), [dirPath]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const contentProvider = useMemo(
+    () =>
+      files.length > 0
+        ? createDirectoryFileProvider(files[currentIndex], currentIndex, files.length)
+        : null,
+    [files, currentIndex],
+  );
+
+  useCommand({
+    handler: () => {
+      setCurrentIndex((i) => Math.min(i + 1, files.length - 1));
+    },
+    hotkey: "l",
+    id: "dir.next-file",
+    modes: ["cursor"],
+    title: "Next file",
+  });
+
+  useCommand({
+    handler: () => {
+      setCurrentIndex((i) => Math.max(i - 1, 0));
+    },
+    hotkey: "h",
+    id: "dir.prev-file",
+    modes: ["cursor"],
+    title: "Previous file",
+  });
+
+  if (files.length === 0 || !contentProvider) {
+    return (
+      <box>
+        <text content="No viewable files in directory" />
+      </box>
+    );
+  }
+
+  return <View contentProvider={contentProvider} actions={actions} />;
+};

package/src/hooks/index.ts

@@ -1,8 +1,11 @@
-export { useContentLoader } from "./useContentLoader.js"
-export { useContentCommands } from "./useContentCommands.js"
-export { createViewCommandContext, useProvideViewCommandContext } from "./useViewCommandContext.js"
+export { useContentLoader } from "./use-content-loader.js";
+export { useContentCommands } from "./use-content-commands.js";
+export {
+  createViewCommandContext,
+  useProvideViewCommandContext,
+} from "./use-view-command-context.js";
 export type {
   CreateViewCommandContextOptions,
   ProvideViewCommandContextOptions,
   ViewCommandContext,
-} from "./useViewCommandContext.js"
+} from "./use-view-command-context.js";