@moyarich/console-addon-search 0.0.0-stage → 0.2.0

package/dist/index.cjs

@@ -0,0 +1,523 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const consoleCore = require("@moyarich/console-core");
+const jsxRuntime = require("react/jsx-runtime");
+const search$3 = "Console search";
+const searchOutput$3 = "Search output";
+const searchConsoleOutput$3 = "Search console output";
+const caseSensitive$3 = "Case sensitive";
+const wholeWord$3 = "Whole word";
+const regex$3 = "Regex";
+const noMatches$3 = "No matches";
+const matchCount$3 = "{current} of {total} matches";
+const previousResult$3 = "Previous search result";
+const nextResult$3 = "Next search result";
+const previous$3 = "Previous";
+const next$3 = "Next";
+const en = {
+  search: search$3,
+  searchOutput: searchOutput$3,
+  searchConsoleOutput: searchConsoleOutput$3,
+  caseSensitive: caseSensitive$3,
+  wholeWord: wholeWord$3,
+  regex: regex$3,
+  noMatches: noMatches$3,
+  matchCount: matchCount$3,
+  previousResult: previousResult$3,
+  nextResult: nextResult$3,
+  previous: previous$3,
+  next: next$3
+};
+const search$2 = "Buscar en la consola";
+const searchOutput$2 = "Buscar en la salida";
+const searchConsoleOutput$2 = "Buscar en la salida de la consola";
+const caseSensitive$2 = "Distinguir mayúsculas";
+const wholeWord$2 = "Palabra completa";
+const regex$2 = "Expresión regular";
+const noMatches$2 = "Sin resultados";
+const matchCount$2 = "{current} de {total} resultados";
+const previousResult$2 = "Resultado anterior";
+const nextResult$2 = "Resultado siguiente";
+const previous$2 = "Anterior";
+const next$2 = "Siguiente";
+const es = {
+  search: search$2,
+  searchOutput: searchOutput$2,
+  searchConsoleOutput: searchConsoleOutput$2,
+  caseSensitive: caseSensitive$2,
+  wholeWord: wholeWord$2,
+  regex: regex$2,
+  noMatches: noMatches$2,
+  matchCount: matchCount$2,
+  previousResult: previousResult$2,
+  nextResult: nextResult$2,
+  previous: previous$2,
+  next: next$2
+};
+const search$1 = "Recherche dans la console";
+const searchOutput$1 = "Rechercher dans la sortie";
+const searchConsoleOutput$1 = "Rechercher dans la sortie de la console";
+const caseSensitive$1 = "Respecter la casse";
+const wholeWord$1 = "Mot entier";
+const regex$1 = "Expression régulière";
+const noMatches$1 = "Aucun résultat";
+const matchCount$1 = "{current} sur {total} résultats";
+const previousResult$1 = "Résultat précédent";
+const nextResult$1 = "Résultat suivant";
+const previous$1 = "Précédent";
+const next$1 = "Suivant";
+const fr = {
+  search: search$1,
+  searchOutput: searchOutput$1,
+  searchConsoleOutput: searchConsoleOutput$1,
+  caseSensitive: caseSensitive$1,
+  wholeWord: wholeWord$1,
+  regex: regex$1,
+  noMatches: noMatches$1,
+  matchCount: matchCount$1,
+  previousResult: previousResult$1,
+  nextResult: nextResult$1,
+  previous: previous$1,
+  next: next$1
+};
+const search = "Pesquisar no console";
+const searchOutput = "Pesquisar na saída";
+const searchConsoleOutput = "Pesquisar na saída do console";
+const caseSensitive = "Diferenciar maiúsculas de minúsculas";
+const wholeWord = "Palavra inteira";
+const regex = "Expressão regular";
+const noMatches = "Nenhuma correspondência";
+const matchCount = "{current} de {total} correspondências";
+const previousResult = "Resultado anterior";
+const nextResult = "Próximo resultado";
+const previous = "Anterior";
+const next = "Próximo";
+const pt = {
+  search,
+  searchOutput,
+  searchConsoleOutput,
+  caseSensitive,
+  wholeWord,
+  regex,
+  noMatches,
+  matchCount,
+  previousResult,
+  nextResult,
+  previous,
+  next
+};
+const dictionaries = { en, es, fr, pt };
+function resolveAddonMessages(locale = "en", overrides) {
+  const tag = locale.replace(/_/g, "-").toLowerCase();
+  return {
+    ...en,
+    ...dictionaries[tag] ?? dictionaries[tag.split("-")[0]] ?? {},
+    ...overrides
+  };
+}
+function ConsoleSearchControls({
+  controller,
+  locale = "en",
+  translations
+}) {
+  const state = react.useSyncExternalStore(
+    controller.subscribe,
+    controller.getState,
+    controller.getState
+  );
+  const errorId = react.useId();
+  const count = state.matches.length;
+  const t = resolveAddonMessages(locale, translations);
+  const selectFirstMatch = () => {
+    const next2 = controller.getState();
+    if (next2.matches.length && next2.activeIndex < 0) controller.next();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "console-search-controls", "aria-label": t.search, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "console-search-controls-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "console-search-controls-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 16 4 4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            placeholder: t.searchOutput,
+            "aria-invalid": !!state.error,
+            "aria-describedby": state.error ? errorId : void 0,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                event.stopPropagation();
+                if (event.shiftKey) controller.previous();
+                else controller.next();
+              }
+            },
+            value: state.query,
+            onChange: (event) => {
+              controller.setQuery(event.target.value);
+              selectFirstMatch();
+            },
+            "aria-label": t.searchConsoleOutput
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", children: !state.query ? "" : count === 0 ? t.noMatches : t.matchCount.replace("{current}", String(state.activeIndex + 1)).replace("{total}", String(count)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => controller.previous(),
+          disabled: !count,
+          "aria-label": t.previousResult,
+          title: t.previousResult,
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "↑" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => controller.next(),
+          disabled: !count,
+          "aria-label": t.nextResult,
+          title: t.nextResult,
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "↓" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "console-search-controls-options", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!state.options.caseSensitive,
+            onChange: (event) => {
+              controller.setOptions({
+                ...state.options,
+                caseSensitive: event.target.checked
+              });
+              selectFirstMatch();
+            }
+          }
+        ),
+        " ",
+        t.caseSensitive
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!state.options.wholeWord,
+            onChange: (event) => {
+              controller.setOptions({
+                ...state.options,
+                wholeWord: event.target.checked
+              });
+              selectFirstMatch();
+            }
+          }
+        ),
+        " ",
+        t.wholeWord
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!state.options.regex,
+            onChange: (event) => {
+              controller.setOptions({
+                ...state.options,
+                regex: event.target.checked
+              });
+              selectFirstMatch();
+            }
+          }
+        ),
+        " ",
+        t.regex
+      ] })
+    ] }),
+    state.error && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "console-search-controls-error",
+        id: errorId,
+        role: "alert",
+        children: state.error
+      }
+    )
+  ] });
+}
+function ConsoleSearchHighlight({
+  controller,
+  index
+}) {
+  const state = react.useSyncExternalStore(
+    controller.subscribe,
+    controller.getState,
+    controller.getState
+  );
+  const matches = state.matches.map((match, matchIndex) => ({ match, matchIndex })).filter(({ match }) => match.index === index);
+  if (!matches.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "console-search-matches",
+      "aria-label": `${matches.length} matches in this message`,
+      children: matches.map(({ match, matchIndex }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "mark",
+        {
+          className: "console-search-highlight",
+          "data-active": state.activeIndex === matchIndex ? "" : void 0,
+          "aria-label": state.activeIndex === matchIndex ? "Current search match" : "Search match",
+          children: match.text || "Zero-width match"
+        },
+        `${match.start}-${match.end}-${matchIndex}`
+      ))
+    }
+  );
+}
+const CONSOLE_SEARCH_ADDON_ID = "@moyarich/console-addon-search";
+const consoleSearchService = consoleCore.createConsoleServiceToken(
+  `${CONSOLE_SEARCH_ADDON_ID}.controller`
+);
+function findConsoleSearchMatches(entries, query, options = {}) {
+  if (!query) return { matches: [] };
+  let pattern;
+  try {
+    pattern = new RegExp(
+      options.regex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+      options.caseSensitive ? "g" : "gi"
+    );
+  } catch (error) {
+    return {
+      matches: [],
+      error: error instanceof Error ? error.message : "Invalid pattern"
+    };
+  }
+  const matches = [];
+  for (const [index, entry] of entries.entries()) {
+    pattern.lastIndex = 0;
+    let hit;
+    while ((hit = pattern.exec(entry.text)) !== null) {
+      const before = entry.text[hit.index - 1] ?? "";
+      const after = entry.text[hit.index + hit[0].length] ?? "";
+      if (!options.wholeWord || !/\w/.test(before) && !/\w/.test(after)) {
+        matches.push({
+          id: entry.id ?? String(index),
+          index,
+          text: hit[0],
+          start: hit.index,
+          end: hit.index + hit[0].length
+        });
+      }
+      if (hit[0].length === 0) pattern.lastIndex++;
+    }
+  }
+  return { matches };
+}
+function valueSearchText(value) {
+  if (typeof value === "string") return value;
+  if (value instanceof Error) return value.stack || value.message;
+  if (typeof value === "object" && value !== null) {
+    try {
+      return JSON.stringify(value) ?? String(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function visibleTerminalText(value) {
+  return value.replace(
+    new RegExp(String.raw`\x1b\[[0-?]*[ -/]*[@-~]`, "g"),
+    ""
+  );
+}
+function createConsoleSearchAddon(options = {}) {
+  let data;
+  let viewport;
+  let state = {
+    query: "",
+    options: {},
+    matches: [],
+    activeIndex: -1
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const listener of listeners) listener();
+  };
+  const controller = {
+    getState: () => state,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    setQuery(query) {
+      state = { ...state, query };
+      controller.refresh();
+    },
+    setOptions(options2) {
+      state = { ...state, options: options2 };
+      controller.refresh();
+    },
+    refresh() {
+      const snapshot = data?.getSnapshot();
+      const entries = snapshot?.mode === "console" ? snapshot.visible.map((message, index) => ({
+        id: message.id ?? `console-${index}`,
+        text: [
+          message.method,
+          message.source,
+          ...message.data.map(valueSearchText)
+        ].join(" ")
+      })) : snapshot?.mode === "terminal" ? snapshot.visible.map((entry, index) => ({
+        id: entry.entry.id ?? `terminal-${index}`,
+        text: visibleTerminalText(entry.output.data)
+      })) : [];
+      const result = findConsoleSearchMatches(
+        entries,
+        state.query,
+        state.options
+      );
+      const activeMatch = state.matches[state.activeIndex];
+      const nextIndex = result.matches.findIndex(
+        (match) => match.id === activeMatch?.id && match.index === activeMatch.index && match.text === activeMatch.text && match.start === activeMatch.start
+      );
+      state = {
+        ...state,
+        ...result,
+        error: result.error,
+        activeIndex: nextIndex
+      };
+      emit();
+    },
+    next() {
+      controller.refresh();
+      if (!state.matches.length) return void 0;
+      const activeIndex = (state.activeIndex + 1) % state.matches.length;
+      state = { ...state, activeIndex };
+      emit();
+      const match = state.matches[activeIndex];
+      viewport?.scrollToMessage(match.id);
+      return match;
+    },
+    previous() {
+      controller.refresh();
+      if (!state.matches.length) return void 0;
+      const activeIndex = (state.activeIndex + state.matches.length - 1) % state.matches.length;
+      state = { ...state, activeIndex };
+      emit();
+      const match = state.matches[activeIndex];
+      viewport?.scrollToMessage(match.id);
+      return match;
+    }
+  };
+  return {
+    id: CONSOLE_SEARCH_ADDON_ID,
+    controller,
+    activate(host) {
+      data = host.services.get(consoleCore.consoleServices.data);
+      viewport = host.services.get(consoleCore.consoleServices.viewport);
+      host.services.provide(consoleSearchService, controller);
+      const textHighlightProvider = {
+        subscribe: controller.subscribe,
+        getSnapshot: controller.getState,
+        getRanges(text, context) {
+          if (!state.query) return [];
+          const matches = findConsoleSearchMatches(
+            [{ id: context.id ?? "local", text }],
+            state.query,
+            state.options
+          ).matches;
+          const active = state.matches[state.activeIndex];
+          return matches.filter((match) => match.end > match.start).map((match, index) => ({
+            start: match.start,
+            end: match.end,
+            active: active?.id === context.id && active?.text === match.text && state.matches.filter(
+              (item) => item.id === active?.id && item.text === active?.text
+            ).findIndex((item) => item.start === active?.start) === index
+          }));
+        }
+      };
+      host.extensions.register(
+        consoleCore.consoleExtensionPoints.textHighlightProvider,
+        textHighlightProvider,
+        { id: CONSOLE_SEARCH_ADDON_ID + ":inline" }
+      );
+      const highlight = {
+        id: CONSOLE_SEARCH_ADDON_ID + ":highlight",
+        placement: "badge",
+        render: ({ index }) => react.createElement(ConsoleSearchHighlight, { controller, index })
+      };
+      host.extensions.register(
+        consoleCore.consoleExtensionPoints.messageDecoration,
+        highlight,
+        { id: highlight.id }
+      );
+      const panel = {
+        id: CONSOLE_SEARCH_ADDON_ID + ":controls",
+        placement: "before-output",
+        render: () => react.createElement(ConsoleSearchControls, { controller, ...options })
+      };
+      host.extensions.register(consoleCore.consoleExtensionPoints.panelElement, panel, {
+        id: panel.id
+      });
+      for (const shortcut of [
+        {
+          id: CONSOLE_SEARCH_ADDON_ID + ":next",
+          key: "F3",
+          onTrigger: () => {
+            controller.next();
+          }
+        },
+        {
+          id: CONSOLE_SEARCH_ADDON_ID + ":previous",
+          key: "F3",
+          shiftKey: true,
+          onTrigger: () => {
+            controller.previous();
+          }
+        }
+      ])
+        host.extensions.register(
+          consoleCore.consoleExtensionPoints.keyboardShortcut,
+          shortcut,
+          { id: shortcut.id }
+        );
+      const subscription = data?.subscribe(() => controller.refresh());
+      return () => {
+        subscription?.dispose();
+        data = void 0;
+        viewport = void 0;
+      };
+    }
+  };
+}
+exports.CONSOLE_SEARCH_ADDON_ID = CONSOLE_SEARCH_ADDON_ID;
+exports.ConsoleSearchControls = ConsoleSearchControls;
+exports.ConsoleSearchHighlight = ConsoleSearchHighlight;
+exports.consoleSearchService = consoleSearchService;
+exports.createConsoleSearchAddon = createConsoleSearchAddon;
+exports.findConsoleSearchMatches = findConsoleSearchMatches;
+exports.resolveConsoleSearchMessages = resolveAddonMessages;

package/dist/index.d.cts

@@ -0,0 +1,50 @@
+import type { AddonTranslations } from "./localization.cjs";
+export { resolveAddonMessages as resolveConsoleSearchMessages } from "./localization.cjs";
+export type { AddonTranslations as ConsoleSearchTranslations } from "./localization.cjs";
+export { ConsoleSearchHighlight } from "./components/ConsoleSearchHighlight/ConsoleSearchHighlight.cjs";
+export { ConsoleSearchControls } from "./components/ConsoleSearchControls/ConsoleSearchControls.cjs";
+import { type ConsoleAddon } from "@moyarich/console-core";
+export declare const CONSOLE_SEARCH_ADDON_ID = "@moyarich/console-addon-search";
+export interface ConsoleSearchOptions {
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    regex?: boolean;
+}
+export interface ConsoleSearchMatch {
+    id: string;
+    index: number;
+    text: string;
+    /** Offset of this occurrence within the searchable text. */
+    start: number;
+    end: number;
+}
+export interface ConsoleSearchState {
+    query: string;
+    options: ConsoleSearchOptions;
+    matches: readonly ConsoleSearchMatch[];
+    activeIndex: number;
+    error?: string;
+}
+export interface ConsoleSearchController {
+    getState(): ConsoleSearchState;
+    subscribe(listener: () => void): () => void;
+    setQuery(query: string): void;
+    setOptions(options: ConsoleSearchOptions): void;
+    refresh(): void;
+    next(): ConsoleSearchMatch | undefined;
+    previous(): ConsoleSearchMatch | undefined;
+}
+export declare const consoleSearchService: import("@moyarich/console-core").ConsoleServiceToken<ConsoleSearchController>;
+export declare function findConsoleSearchMatches(entries: readonly {
+    id?: string;
+    text: string;
+}[], query: string, options?: ConsoleSearchOptions): {
+    matches: ConsoleSearchMatch[];
+    error?: string;
+};
+export declare function createConsoleSearchAddon(options?: {
+    locale?: string;
+    translations?: AddonTranslations;
+}): ConsoleAddon & {
+    controller: ConsoleSearchController;
+};

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import type { AddonTranslations } from "./localization.js";
+export { resolveAddonMessages as resolveConsoleSearchMessages } from "./localization.js";
+export type { AddonTranslations as ConsoleSearchTranslations } from "./localization.js";
+export { ConsoleSearchHighlight } from "./components/ConsoleSearchHighlight/ConsoleSearchHighlight.js";
+export { ConsoleSearchControls } from "./components/ConsoleSearchControls/ConsoleSearchControls.js";
+import { type ConsoleAddon } from "@moyarich/console-core";
+export declare const CONSOLE_SEARCH_ADDON_ID = "@moyarich/console-addon-search";
+export interface ConsoleSearchOptions {
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    regex?: boolean;
+}
+export interface ConsoleSearchMatch {
+    id: string;
+    index: number;
+    text: string;
+    /** Offset of this occurrence within the searchable text. */
+    start: number;
+    end: number;
+}
+export interface ConsoleSearchState {
+    query: string;
+    options: ConsoleSearchOptions;
+    matches: readonly ConsoleSearchMatch[];
+    activeIndex: number;
+    error?: string;
+}
+export interface ConsoleSearchController {
+    getState(): ConsoleSearchState;
+    subscribe(listener: () => void): () => void;
+    setQuery(query: string): void;
+    setOptions(options: ConsoleSearchOptions): void;
+    refresh(): void;
+    next(): ConsoleSearchMatch | undefined;
+    previous(): ConsoleSearchMatch | undefined;
+}
+export declare const consoleSearchService: import("@moyarich/console-core").ConsoleServiceToken<ConsoleSearchController>;
+export declare function findConsoleSearchMatches(entries: readonly {
+    id?: string;
+    text: string;
+}[], query: string, options?: ConsoleSearchOptions): {
+    matches: ConsoleSearchMatch[];
+    error?: string;
+};
+export declare function createConsoleSearchAddon(options?: {
+    locale?: string;
+    translations?: AddonTranslations;
+}): ConsoleAddon & {
+    controller: ConsoleSearchController;
+};