@battlefieldduck/xterm-svelte 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 TatLead
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# xterm-svelte
+
+[![Node.js Build](https://github.com/BattlefieldDuck/xterm-svelte/actions/workflows/node-build.yml/badge.svg)](https://github.com/BattlefieldDuck/xterm-svelte/actions/workflows/node-build.yml)
+
+
+xterm-svelte is a wrapper for the [xterm.js](https://github.com/xtermjs/xterm.js) library, designed to work seamlessly with SvelteKit. This library allows you to embed a fully functional terminal in your SvelteKit application.
+
+Live Demo: https://xterm-svelte.pages.dev
+
+## Features
+
+- Full integration with SvelteKit.
+- Xterm addons is managed in xterm-svelte
+- Continuous package updates: xterm-svelte is regularly updated to ensure compatibility with the latest versions of SvelteKit and Xterm.js.
+
+## Installation
+
+To install Xterm-Svelte, run the following command in your project directory:
+
+```bash
+npm install @battlefieldduck/xterm-svelte
+```
+
+## Usage
+
+Here's a basic example of how to use xterm-svelte in your SvelteKit application:
+
+```svelte
+<script lang="ts">
+    import { Xterm } from '@battlefieldduck/xterm-svelte';
+    import type { ITerminalOptions, ITerminalInitOnlyOptions, Terminal } from '@battlefieldduck/xterm-svelte';
+
+    let options: ITerminalOptions & ITerminalInitOnlyOptions = {};
+
+    async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
+        console.log('Child component has loaded');
+        const terminal = event.detail.terminal;
+
+        // FitAddon Usage
+        const { FitAddon } = await XtermAddon.FitAddon();
+        const fitAddon = new FitAddon();
+        terminal.loadAddon(fitAddon);
+        fitAddon.fit();
+
+        terminal.write('Hello World');
+    }
+
+    function onData(event: CustomEvent<string>) {
+        const data = event.detail;
+        console.log('onData()', data);
+    }
+
+    function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) {
+        const data = event.detail;
+        console.log('onKey()', data);
+    }
+</script>
+
+<Xterm {options} on:load={onLoad} on:data={onData} on:key={onKey} />
+```
+
+## Contributing
+Contributions are welcome! Please feel free to submit pull requests or open issues.
+
+![https://github.com/BattlefieldDuck/xterm-svelte/graphs/contributors](https://contrib.rocks/image?repo=BattlefieldDuck/xterm-svelte)
+
+## License
+xterm-svelte is licensed under the MIT License. See the `LICENSE` file for more details.
+
+## Stargazers over time
+[![Stargazers over time](https://starchart.cc/BattlefieldDuck/xterm-svelte.svg?variant=adaptive)](https://starchart.cc/BattlefieldDuck/xterm-svelte)

package/dist/Xterm.svelte

@@ -0,0 +1,27 @@
+<script>import "@xterm/xterm/css/xterm.css";
+import { onMount, createEventDispatcher } from "svelte";
+let parent;
+let props = { ...$$restProps };
+export let options = void 0;
+const dispatch = createEventDispatcher();
+onMount(async () => {
+  const { Terminal } = await import("@xterm/xterm");
+  const terminal = new Terminal(options);
+  terminal.onBell(() => dispatch("bell"));
+  terminal.onBinary((data) => dispatch("binary", data));
+  terminal.onCursorMove(() => dispatch("cursormove"));
+  terminal.onData((data) => dispatch("data", data));
+  terminal.onKey((data) => dispatch("key", data));
+  terminal.onLineFeed(() => dispatch("linefeed"));
+  terminal.onRender((data) => dispatch("render", data));
+  terminal.onWriteParsed(() => dispatch("writeparsed"));
+  terminal.onResize((data) => dispatch("resize", data));
+  terminal.onScroll((data) => dispatch("scroll", data));
+  terminal.onSelectionChange(() => dispatch("selectionchange"));
+  terminal.onTitleChange((data) => dispatch("titlechange", data));
+  terminal.open(parent);
+  dispatch("load", { terminal });
+});
+</script>
+
+<div bind:this={parent} class={props.class} style={props.style}></div>

package/dist/Xterm.svelte.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="@xterm/xterm" />
+import { SvelteComponent } from "svelte";
+import '@xterm/xterm/css/xterm.css';
+import type { ITerminalOptions, ITerminalInitOnlyOptions } from './index.js';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        options?: (ITerminalOptions & ITerminalInitOnlyOptions) | undefined;
+    };
+    events: {
+        load: CustomEvent<{
+            terminal: import("@xterm/xterm").Terminal;
+        }>;
+        bell: CustomEvent<void>;
+        binary: CustomEvent<string>;
+        cursormove: CustomEvent<void>;
+        data: CustomEvent<string>;
+        key: CustomEvent<{
+            key: string;
+            domEvent: KeyboardEvent;
+        }>;
+        linefeed: CustomEvent<void>;
+        render: CustomEvent<{
+            start: number;
+            end: number;
+        }>;
+        writeparsed: CustomEvent<void>;
+        resize: CustomEvent<{
+            cols: number;
+            rows: number;
+        }>;
+        scroll: CustomEvent<number>;
+        selectionchange: CustomEvent<void>;
+        titlechange: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type XtermProps = typeof __propDef.props;
+export type XtermEvents = typeof __propDef.events;
+export type XtermSlots = typeof __propDef.slots;
+export default class Xterm extends SvelteComponent<XtermProps, XtermEvents, XtermSlots> {
+}
+export {};

package/dist/XtermAddon.d.ts

@@ -0,0 +1,100 @@
+/**
+ * The `XtermAddon` class provides static methods to dynamically import various addons for the xterm.js library.
+ */
+export declare class XtermAddon {
+    /**
+     * Dynamically imports the 'attach' addon from `@xterm/addon-attach`.
+     * @returns A promise that resolves to the 'attach' addon module.
+     */
+    static AttachAddon: () => Promise<{
+        default: typeof import("@xterm/addon-attach");
+        AttachAddon: typeof import("@xterm/addon-attach").AttachAddon;
+    }>;
+    /**
+     * Dynamically imports the 'canvas' addon from `@xterm/addon-canvas`.
+     * For more details, visit: https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas
+     * @returns A promise that resolves to the 'canvas' addon module.
+     */
+    static CanvasAddon: () => Promise<{
+        default: typeof import("@xterm/addon-canvas");
+        CanvasAddon: typeof import("@xterm/addon-canvas").CanvasAddon;
+    }>;
+    /**
+     * Dynamically imports the 'clipboard' addon from `@xterm/addon-clipboard`.
+     * @returns A promise that resolves to the 'clipboard' addon module.
+     */
+    static ClipboardAddon: () => Promise<{
+        default: typeof import("@xterm/addon-clipboard");
+        ClipboardAddon: typeof import("@xterm/addon-clipboard").ClipboardAddon;
+        ClipboardSelectionType: typeof import("@xterm/addon-clipboard").ClipboardSelectionType;
+        Base64: typeof import("@xterm/addon-clipboard").Base64;
+        BrowserClipboardProvider: typeof import("@xterm/addon-clipboard").BrowserClipboardProvider;
+    }>;
+    /**
+     * Dynamically imports the 'fit' addon from `@xterm/addon-fit`.
+     * @returns A promise that resolves to the 'fit' addon module.
+     */
+    static FitAddon: () => Promise<{
+        default: typeof import("@xterm/addon-fit");
+        FitAddon: typeof import("@xterm/addon-fit").FitAddon;
+    }>;
+    /**
+     * Dynamically imports the 'image' addon from `@xterm/addon-image`.
+     * @returns A promise that resolves to the 'image' addon module.
+     */
+    static ImageAddon: () => Promise<{
+        default: typeof import("@xterm/addon-image");
+        ImageAddon: typeof import("@xterm/addon-image").ImageAddon;
+    }>;
+    /**
+     * Dynamically imports the 'ligatures' addon from `@xterm/addon-ligatures`.
+     *
+     * This addon is designed to be used in environments with access to Node.js APIs (such as Electron).
+     *
+     * @returns A promise that resolves to the 'ligatures' addon module.
+     */
+    static LigaturesAddon: () => Promise<{
+        default: typeof import("@xterm/addon-ligatures");
+        LigaturesAddon: typeof import("@xterm/addon-ligatures").LigaturesAddon;
+    }>;
+    /**
+     * Dynamically imports the 'search' addon from `@xterm/addon-search`.
+     * @returns A promise that resolves to the 'search' addon module.
+     */
+    static SearchAddon: () => Promise<{
+        default: typeof import("@xterm/addon-search");
+        SearchAddon: typeof import("@xterm/addon-search").SearchAddon;
+    }>;
+    /**
+     * Dynamically imports the 'serialize' addon from `@xterm/addon-serialize`.
+     * @returns A promise that resolves to the 'serialize' addon module.
+     */
+    static SerializeAddon: () => Promise<{
+        default: typeof import("@xterm/addon-serialize");
+        SerializeAddon: typeof import("@xterm/addon-serialize").SerializeAddon;
+    }>;
+    /**
+     * Dynamically imports the 'unicode11' addon from `@xterm/addon-unicode11`.
+     * @returns A promise that resolves to the 'unicode11' addon module.
+     */
+    static Unicode11Addon: () => Promise<{
+        default: typeof import("@xterm/addon-unicode11");
+        Unicode11Addon: typeof import("@xterm/addon-unicode11").Unicode11Addon;
+    }>;
+    /**
+     * Dynamically imports the 'web-links' addon from `@xterm/addon-web-links`.
+     * @returns A promise that resolves to the 'web-links' addon module.
+     */
+    static WebLinksAddon: () => Promise<{
+        default: typeof import("@xterm/addon-web-links");
+        WebLinksAddon: typeof import("@xterm/addon-web-links").WebLinksAddon;
+    }>;
+    /**
+     * Dynamically imports the 'webgl' addon from `@xterm/addon-webgl`.
+     * @returns A promise that resolves to the 'webgl' addon module.
+     */
+    static WebglAddon: () => Promise<{
+        default: typeof import("@xterm/addon-webgl");
+        WebglAddon: typeof import("@xterm/addon-webgl").WebglAddon;
+    }>;
+}

package/dist/XtermAddon.js

@@ -0,0 +1,73 @@
+/**
+ * The `XtermAddon` class provides static methods to dynamically import various addons for the xterm.js library.
+ */
+export class XtermAddon {
+    /**
+     * Dynamically imports the 'attach' addon from `@xterm/addon-attach`.
+     * @returns A promise that resolves to the 'attach' addon module.
+     */
+    static AttachAddon = async () => await import('@xterm/addon-attach');
+    /**
+     * Dynamically imports the 'canvas' addon from `@xterm/addon-canvas`.
+     * For more details, visit: https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas
+     * @returns A promise that resolves to the 'canvas' addon module.
+     */
+    static CanvasAddon = async () => await import('@xterm/addon-canvas');
+    /**
+     * Dynamically imports the 'clipboard' addon from `@xterm/addon-clipboard`.
+     * @returns A promise that resolves to the 'clipboard' addon module.
+     */
+    static ClipboardAddon = async () => await import('@xterm/addon-clipboard');
+    /**
+     * Dynamically imports the 'fit' addon from `@xterm/addon-fit`.
+     * @returns A promise that resolves to the 'fit' addon module.
+     */
+    static FitAddon = async () => await import('@xterm/addon-fit');
+    /**
+     * Dynamically imports the 'image' addon from `@xterm/addon-image`.
+     * @returns A promise that resolves to the 'image' addon module.
+     */
+    static ImageAddon = async () => await import('@xterm/addon-image');
+    /**
+     * Dynamically imports the 'ligatures' addon from `@xterm/addon-ligatures`.
+     *
+     * This addon is designed to be used in environments with access to Node.js APIs (such as Electron).
+     *
+     * @returns A promise that resolves to the 'ligatures' addon module.
+     */
+    static LigaturesAddon = async () => {
+        if (typeof process === 'undefined' || process.versions == null || process.versions.node == null) {
+            // This is not a Node.js environment
+            throw new Error('This module can only be imported in a Node.js environment');
+        }
+        return await import('@xterm/addon-ligatures');
+    };
+    /**
+     * Dynamically imports the 'search' addon from `@xterm/addon-search`.
+     * @returns A promise that resolves to the 'search' addon module.
+     */
+    static SearchAddon = async () => await import('@xterm/addon-search');
+    /**
+     * Dynamically imports the 'serialize' addon from `@xterm/addon-serialize`.
+     * @returns A promise that resolves to the 'serialize' addon module.
+     */
+    static SerializeAddon = async () => await import('@xterm/addon-serialize');
+    // This addon is not yet published to npm
+    // https://github.com/xtermjs/xterm.js/tree/master/addons/addon-unicode-graphemes
+    // static UnicodeGraphemesAddon = async () => await import('@xterm/addon-unicode-graphemes');
+    /**
+     * Dynamically imports the 'unicode11' addon from `@xterm/addon-unicode11`.
+     * @returns A promise that resolves to the 'unicode11' addon module.
+     */
+    static Unicode11Addon = async () => await import('@xterm/addon-unicode11');
+    /**
+     * Dynamically imports the 'web-links' addon from `@xterm/addon-web-links`.
+     * @returns A promise that resolves to the 'web-links' addon module.
+     */
+    static WebLinksAddon = async () => await import('@xterm/addon-web-links');
+    /**
+     * Dynamically imports the 'webgl' addon from `@xterm/addon-webgl`.
+     * @returns A promise that resolves to the 'webgl' addon module.
+     */
+    static WebglAddon = async () => await import('@xterm/addon-webgl');
+}

package/dist/XtermEvent.d.ts

@@ -0,0 +1,99 @@
+import type { Terminal } from "@xterm/xterm";
+export interface XtermEvent {
+    /**
+     * Adds an event listener for when the terminal is loaded.
+     * @returns an `IDisposable` to stop listening.
+     */
+    load: {
+        terminal: Terminal;
+    };
+    /**
+     * Adds an event listener for when the bell is triggered.
+     * @returns an `IDisposable` to stop listening.
+     */
+    bell: void;
+    /**
+     * Adds an event listener for when a binary event fires. This is used to
+     * enable non UTF-8 conformant binary messages to be sent to the backend.
+     * Currently this is only used for a certain type of mouse reports that
+     * happen to be not UTF-8 compatible.
+     * The event value is a JS string, pass it to the underlying pty as
+     * binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`.
+     * @returns an `IDisposable` to stop listening.
+     */
+    binary: string;
+    /**
+     * Adds an event listener for the cursor moves.
+     * @returns an `IDisposable` to stop listening.
+     */
+    cursormove: void;
+    /**
+     * Adds an event listener for when a data event fires. This happens for
+     * example when the user types or pastes into the terminal. The event value
+     * is whatever `string` results, in a typical setup, this should be passed
+     * on to the backing pty.
+     * @returns an `IDisposable` to stop listening.
+     */
+    data: string;
+    /**
+     * Adds an event listener for when a key is pressed. The event value
+     * contains the string that will be sent in the data event as well as the
+     * DOM event that triggered it.
+     * @returns an `IDisposable` to stop listening.
+     */
+    key: {
+        key: string;
+        domEvent: KeyboardEvent;
+    };
+    /**
+     * Adds an event listener for when a line feed is added.
+     * @returns an `IDisposable` to stop listening.
+     */
+    linefeed: void;
+    /**
+     * Adds an event listener for when rows are rendered. The event value
+     * contains the start row and end rows of the rendered area (ranges from `0`
+     * to `Terminal.rows - 1`).
+     * @returns an `IDisposable` to stop listening.
+     */
+    render: {
+        start: number;
+        end: number;
+    };
+    /**
+     * Adds an event listener for when data has been parsed by the terminal,
+     * after {@link write} is called. This event is useful to listen for any
+     * changes in the buffer.
+     *
+     * This fires at most once per frame, after data parsing completes. Note
+     * that this can fire when there are still writes pending if there is a lot
+     * of data.
+     */
+    writeparsed: void;
+    /**
+     * Adds an event listener for when the terminal is resized. The event value
+     * contains the new size.
+     * @returns an `IDisposable` to stop listening.
+     */
+    resize: {
+        cols: number;
+        rows: number;
+    };
+    /**
+     * Adds an event listener for when a scroll occurs. The event value is the
+     * new position of the viewport.
+     * @returns an `IDisposable` to stop listening.
+     */
+    scroll: number;
+    /**
+     * Adds an event listener for when a selection change occurs.
+     * @returns an `IDisposable` to stop listening.
+     */
+    selectionchange: void;
+    /**
+     * Adds an event listener for when an OSC 0 or OSC 2 title change occurs.
+     * The event value is the new title.
+     * @returns an `IDisposable` to stop listening.
+     */
+    titlechange: string;
+}

package/dist/XtermEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="@xterm/xterm" />
+import Xterm from './Xterm.svelte';
+import { XtermAddon } from './XtermAddon.js';
+import type { XtermEvent } from './XtermEvent.js';
+export { Xterm, XtermAddon };
+export type * from '@xterm/xterm';
+export type { XtermEvent };

package/dist/index.js

@@ -0,0 +1,3 @@
+import Xterm from './Xterm.svelte';
+import { XtermAddon } from './XtermAddon.js';
+export { Xterm, XtermAddon };

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@battlefieldduck/xterm-svelte",
+	"version": "0.0.5",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"test": "npm run test:integration && npm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.5.7",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.0",
+		"@typescript-eslint/eslint-plugin": "^7.7.1",
+		"@typescript-eslint/parser": "^7.7.1",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.38.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.2.7",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.7.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.2.10",
+		"vitest": "^1.5.2"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@xterm/addon-attach": "^0.11.0",
+		"@xterm/addon-canvas": "^0.7.0",
+		"@xterm/addon-clipboard": "^0.1.0",
+		"@xterm/addon-fit": "^0.10.0",
+		"@xterm/addon-image": "^0.8.0",
+		"@xterm/addon-ligatures": "^0.9.0",
+		"@xterm/addon-search": "^0.15.0",
+		"@xterm/addon-serialize": "^0.13.0",
+		"@xterm/addon-unicode11": "^0.8.0",
+		"@xterm/addon-web-links": "^0.11.0",
+		"@xterm/addon-webgl": "^0.18.0",
+		"@xterm/xterm": "^5.5.0"
+	}
+}