@moyarich/console-addon-xterm 0.1.0 → 0.2.0

package/README.md

@@ -2,12 +2,18 @@
 
 Render terminal output with xterm.js. Use xterm.js for ANSI/VT terminal rendering, append-only streaming, and terminal-sized scrolling.
 
+[Documentation and live examples](https://moyarich.github.io/console/)
+
 ## Install
 
 ```bash
-npm install @moyarich/console @moyarich/console-addon-xterm
+npm install @moyarich/console @moyarich/console-addon-xterm react
 ```
 
+Configure the `@moyarich` scope and authenticate with GitHub Packages as described in the [installation guide](../../../README.md#installation).
+
+Required peer dependencies: `@moyarich/console-core@^0.2.0`, `@moyarich/console@^0.2.0`, `react@>=18`.
+
 ## Quick start
 
 ```tsx

package/dist/XtermOutput.d.cts

@@ -0,0 +1,12 @@
+import { type AddonTranslations } from "./localization.cjs";
+import type { ConsoleStdoutEntry } from "@moyarich/console";
+
+
+/** Decide when new output can be appended without replaying prior chunks. */
+export declare function isAppendOnly(previous: readonly (ConsoleStdoutEntry | string)[], next: readonly (ConsoleStdoutEntry | string)[]): boolean;
+/** The addon owns terminal creation, updates, and disposal. */
+export declare function XtermOutput({ entries, locale, translations, }: {
+    entries: readonly (ConsoleStdoutEntry | string)[];
+    locale?: string;
+    translations?: AddonTranslations;
+}): import("react").JSX.Element;

package/dist/XtermOutput.d.ts

@@ -1,9 +1,12 @@
+import { type AddonTranslations } from "./localization.js";
 import type { ConsoleStdoutEntry } from "@moyarich/console";
-import "@xterm/xterm/css/xterm.css";
-import "./XtermOutput.css";
+
+
 /** Decide when new output can be appended without replaying prior chunks. */
 export declare function isAppendOnly(previous: readonly (ConsoleStdoutEntry | string)[], next: readonly (ConsoleStdoutEntry | string)[]): boolean;
 /** The addon owns terminal creation, updates, and disposal. */
-export declare function XtermOutput({ entries, }: {
+export declare function XtermOutput({ entries, locale, translations, }: {
     entries: readonly (ConsoleStdoutEntry | string)[];
+    locale?: string;
+    translations?: AddonTranslations;
 }): import("react").JSX.Element;

package/dist/index.cjs

@@ -4,6 +4,31 @@ const jsxRuntime = require("react/jsx-runtime");
 const consoleCore = require("@moyarich/console-core");
 const react = require("react");
 const xterm = require("@xterm/xterm");
+const terminal$3 = "Terminal output";
+const en = {
+  terminal: terminal$3
+};
+const terminal$2 = "Salida del terminal";
+const es = {
+  terminal: terminal$2
+};
+const terminal$1 = "Sortie du terminal";
+const fr = {
+  terminal: terminal$1
+};
+const terminal = "Saída do terminal";
+const pt = {
+  terminal
+};
+const locales = { en, es, fr, pt };
+function resolveAddonMessages(locale = "en", overrides) {
+  const tag = locale.replace(/_/g, "-").toLowerCase();
+  return {
+    ...en,
+    ...locales[tag] ?? locales[tag.split("-")[0]] ?? {},
+    ...overrides
+  };
+}
 function isAppendOnly(previous, next) {
   return previous.length <= next.length && previous.every((entry, i) => {
     const current = next[i];
@@ -11,10 +36,13 @@ function isAppendOnly(previous, next) {
   });
 }
 function XtermOutput({
-  entries
+  entries,
+  locale = "en",
+  translations
 }) {
+  const labels = resolveAddonMessages(locale, translations);
   const element = react.useRef(null);
-  const terminal = react.useRef(null);
+  const terminal2 = react.useRef(null);
   const written = react.useRef([]);
   react.useEffect(() => {
     if (!element.current) return;
@@ -50,17 +78,17 @@ function XtermOutput({
     resizeToContainer();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resizeToContainer);
     observer?.observe(container);
-    terminal.current = instance;
+    terminal2.current = instance;
     written.current = [];
     return () => {
       observer?.disconnect();
-      terminal.current = null;
+      terminal2.current = null;
       written.current = [];
       instance.dispose();
     };
   }, []);
   react.useEffect(() => {
-    const instance = terminal.current;
+    const instance = terminal2.current;
     if (!instance) return;
     const appendOnly = isAppendOnly(written.current, entries);
     if (!appendOnly) instance.reset();
@@ -76,7 +104,7 @@ function XtermOutput({
     {
       ref: element,
       className: "console-xterm-output",
-      "aria-label": "Terminal output"
+      "aria-label": labels.terminal
     }
   );
 }
@@ -88,13 +116,19 @@ const xtermOutputRenderer = {
     return /* @__PURE__ */ jsxRuntime.jsx(XtermOutput, { entries: context.entries });
   }
 };
-function createConsoleXtermAddon() {
+function createConsoleXtermAddon(options = {}) {
   return {
     id: CONSOLE_XTERM_ADDON_ID,
     activate(host) {
       host.extensions.register(
         consoleCore.consoleExtensionPoints.outputRenderer,
-        xtermOutputRenderer,
+        {
+          ...xtermOutputRenderer,
+          render(context) {
+            if (context.mode !== "terminal") return void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(XtermOutput, { entries: context.entries, ...options });
+          }
+        },
         {
           id: `${CONSOLE_XTERM_ADDON_ID}:output-renderer`
         }
@@ -106,4 +140,5 @@ exports.CONSOLE_XTERM_ADDON_ID = CONSOLE_XTERM_ADDON_ID;
 exports.XtermOutput = XtermOutput;
 exports.createConsoleXtermAddon = createConsoleXtermAddon;
 exports.isAppendOnly = isAppendOnly;
+exports.resolveAddonMessages = resolveAddonMessages;
 exports.xtermOutputRenderer = xtermOutputRenderer;

package/dist/index.d.cts

@@ -0,0 +1,11 @@
+import type { AddonTranslations } from "./localization.cjs";
+export { resolveAddonMessages } from "./localization.cjs";
+export type { AddonTranslations } from "./localization.cjs";
+import { type ConsoleAddon, type ConsoleOutputRenderer } from "@moyarich/console-core";
+export declare const CONSOLE_XTERM_ADDON_ID = "@moyarich/console-addon-xterm";
+export declare const xtermOutputRenderer: ConsoleOutputRenderer;
+export declare function createConsoleXtermAddon(options?: {
+    locale?: string;
+    translations?: AddonTranslations;
+}): ConsoleAddon;
+export { XtermOutput, isAppendOnly } from "./XtermOutput.cjs";

package/dist/index.d.ts

@@ -1,5 +1,11 @@
+import type { AddonTranslations } from "./localization.js";
+export { resolveAddonMessages } from "./localization.js";
+export type { AddonTranslations } from "./localization.js";
 import { type ConsoleAddon, type ConsoleOutputRenderer } from "@moyarich/console-core";
 export declare const CONSOLE_XTERM_ADDON_ID = "@moyarich/console-addon-xterm";
 export declare const xtermOutputRenderer: ConsoleOutputRenderer;
-export declare function createConsoleXtermAddon(): ConsoleAddon;
-export { XtermOutput, isAppendOnly } from "./XtermOutput";
+export declare function createConsoleXtermAddon(options?: {
+    locale?: string;
+    translations?: AddonTranslations;
+}): ConsoleAddon;
+export { XtermOutput, isAppendOnly } from "./XtermOutput.js";

package/dist/index.js

@@ -2,6 +2,31 @@ import { jsx } from "react/jsx-runtime";
 import { consoleExtensionPoints } from "@moyarich/console-core";
 import { useRef, useEffect } from "react";
 import { Terminal } from "@xterm/xterm";
+const terminal$3 = "Terminal output";
+const en = {
+  terminal: terminal$3
+};
+const terminal$2 = "Salida del terminal";
+const es = {
+  terminal: terminal$2
+};
+const terminal$1 = "Sortie du terminal";
+const fr = {
+  terminal: terminal$1
+};
+const terminal = "Saída do terminal";
+const pt = {
+  terminal
+};
+const locales = { en, es, fr, pt };
+function resolveAddonMessages(locale = "en", overrides) {
+  const tag = locale.replace(/_/g, "-").toLowerCase();
+  return {
+    ...en,
+    ...locales[tag] ?? locales[tag.split("-")[0]] ?? {},
+    ...overrides
+  };
+}
 function isAppendOnly(previous, next) {
   return previous.length <= next.length && previous.every((entry, i) => {
     const current = next[i];
@@ -9,10 +34,13 @@ function isAppendOnly(previous, next) {
   });
 }
 function XtermOutput({
-  entries
+  entries,
+  locale = "en",
+  translations
 }) {
+  const labels = resolveAddonMessages(locale, translations);
   const element = useRef(null);
-  const terminal = useRef(null);
+  const terminal2 = useRef(null);
   const written = useRef([]);
   useEffect(() => {
     if (!element.current) return;
@@ -48,17 +76,17 @@ function XtermOutput({
     resizeToContainer();
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resizeToContainer);
     observer?.observe(container);
-    terminal.current = instance;
+    terminal2.current = instance;
     written.current = [];
     return () => {
       observer?.disconnect();
-      terminal.current = null;
+      terminal2.current = null;
       written.current = [];
       instance.dispose();
     };
   }, []);
   useEffect(() => {
-    const instance = terminal.current;
+    const instance = terminal2.current;
     if (!instance) return;
     const appendOnly = isAppendOnly(written.current, entries);
     if (!appendOnly) instance.reset();
@@ -74,7 +102,7 @@ function XtermOutput({
     {
       ref: element,
       className: "console-xterm-output",
-      "aria-label": "Terminal output"
+      "aria-label": labels.terminal
     }
   );
 }
@@ -86,13 +114,19 @@ const xtermOutputRenderer = {
     return /* @__PURE__ */ jsx(XtermOutput, { entries: context.entries });
   }
 };
-function createConsoleXtermAddon() {
+function createConsoleXtermAddon(options = {}) {
   return {
     id: CONSOLE_XTERM_ADDON_ID,
     activate(host) {
       host.extensions.register(
         consoleExtensionPoints.outputRenderer,
-        xtermOutputRenderer,
+        {
+          ...xtermOutputRenderer,
+          render(context) {
+            if (context.mode !== "terminal") return void 0;
+            return /* @__PURE__ */ jsx(XtermOutput, { entries: context.entries, ...options });
+          }
+        },
         {
           id: `${CONSOLE_XTERM_ADDON_ID}:output-renderer`
         }
@@ -105,5 +139,6 @@ export {
   XtermOutput,
   createConsoleXtermAddon,
   isAppendOnly,
+  resolveAddonMessages,
   xtermOutputRenderer
 };

package/dist/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "terminal": "Terminal output"
+}

package/dist/locales/es.json

@@ -0,0 +1,3 @@
+{
+  "terminal": "Salida del terminal"
+}

package/dist/locales/fr.json

@@ -0,0 +1,3 @@
+{
+  "terminal": "Sortie du terminal"
+}

package/dist/locales/pt.json

@@ -0,0 +1,3 @@
+{
+  "terminal": "Saída do terminal"
+}

package/dist/localization.d.cts

@@ -0,0 +1,3 @@
+import en from "./locales/en.json";
+export type AddonTranslations = Partial<typeof en>;
+export declare function resolveAddonMessages(locale?: string, overrides?: AddonTranslations): typeof en;

package/dist/localization.d.ts

@@ -0,0 +1,3 @@
+import en from "./locales/en.json";
+export type AddonTranslations = Partial<typeof en>;
+export declare function resolveAddonMessages(locale?: string, overrides?: AddonTranslations): typeof en;

package/dist/styles.css

@@ -0,0 +1,33 @@
+/* src/XtermOutput.css */
+.console-panel .console-surface:has(.console-xterm-output) {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.console-panel
+  .console-surface:has(.console-xterm-output)
+  > .console-scroll-end-spacer {
+  display: none;
+}
+
+.console-xterm-output {
+  --_console-xterm-background: var(--console-xterm-background, transparent);
+  box-sizing: border-box;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  background: var(--_console-xterm-background);
+}
+
+.console-xterm-output .xterm {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  padding: var(--console-xterm-padding, 0.5rem);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moyarich/console-addon-xterm",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Optional xterm.js terminal renderer for Console",
   "license": "MIT",
   "type": "module",
@@ -9,11 +9,16 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "development": "./src/index.tsx",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
@@ -22,20 +27,20 @@
     "registry": "https://npm.pkg.github.com"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
+    "build": "vite build && tsc -p tsconfig.build.json && node ../../../scripts/prepare-cjs-types.mjs && node ../../../scripts/prepare-addon-styles.mjs",
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@moyarich/console-core": "^0.1.0",
-    "@moyarich/console": "^0.1.0",
+    "@moyarich/console-core": "^0.2.0",
+    "@moyarich/console": "^0.2.0",
     "react": ">=18"
   },
   "dependencies": {
     "@xterm/xterm": "^6.0.0"
   },
   "devDependencies": {
-    "@moyarich/console-core": "0.1.0",
-    "@moyarich/console": "0.1.0",
+    "@moyarich/console-core": "0.2.0",
+    "@moyarich/console": "0.2.0",
     "@types/react": "^19.1.12",
     "react": "^19.2.7",
     "typescript": "^5.9.2",
@@ -50,14 +55,22 @@
     "./src/index.tsx",
     "./src/XtermOutput.css",
     "./dist/index.js",
-    "./dist/index.cjs"
+    "./dist/index.cjs",
+    "./dist/styles.css"
   ],
   "publisher": "moyarich",
   "author": "Moya Richards",
+  "engines": {
+    "node": ">=24"
+  },
   "private": false,
   "keywords": [
     "console",
     "addon",
     "xterm"
-  ]
+  ],
+  "homepage": "https://moyarich.github.io/console/",
+  "bugs": {
+    "url": "https://github.com/moyarich/console/issues"
+  }
 }