@battlefieldduck/xterm-svelte 1.0.1 → 2.0.1

package/README.md

@@ -3,13 +3,23 @@
 <img align="right" width="100" height="100" src="https://github.com/BattlefieldDuck/xterm-svelte/assets/29337428/e1055940-ae66-48b5-9a1f-1965949b5757">
 
 [![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)
+![NPM Type Definitions](https://img.shields.io/npm/types/%40battlefieldduck%2Fxterm-svelte)
 [![NPM Version](https://img.shields.io/npm/v/%40battlefieldduck%2Fxterm-svelte)](https://www.npmjs.com/package/@battlefieldduck/xterm-svelte)
 ![NPM Downloads](https://img.shields.io/npm/dw/%40battlefieldduck%2Fxterm-svelte)
+![NPM Downloads](https://img.shields.io/npm/d18m/%40battlefieldduck%2Fxterm-svelte)
+![NPM License](https://img.shields.io/npm/l/%40battlefieldduck%2Fxterm-svelte)
 
 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.
 
 Check it out: https://xterm-svelte.pages.dev
 
+## Version Compatibility
+
+| Version | Svelte Version | Branch                                                                    | Demonstration                          |
+| ------- | -------------- | ------------------------------------------------------------------------- | -------------------------------------- |
+| 2.x.x   | Svelte 5       | [`main`](https://github.com/BattlefieldDuck/xterm-svelte)                 | https://xterm-svelte.pages.dev         |
+| 1.x.x   | Svelte 4       | [`svelte4`](https://github.com/BattlefieldDuck/xterm-svelte/tree/svelte4) | https://svelte4.xterm-svelte.pages.dev |
+
 ## Features
 
 - **Full integration with SvelteKit**
@@ -49,9 +59,8 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 		fontFamily: 'Consolas'
 	};
 
-	async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
+	async function onLoad(terminal: Terminal) {
 		console.log('Child component has loaded');
-		const terminal = event.detail.terminal;
 
 		// FitAddon Usage
 		const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
@@ -61,18 +70,16 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 		terminal.write('Hello World');
 	}
 
-	function onData(event: CustomEvent<string>) {
-		const data = event.detail;
+	function onData(data: string) {
 		console.log('onData()', data);
 	}
 
-	function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) {
-		const data = event.detail;
+	function onKey(data: { key: string; domEvent: KeyboardEvent }) {
 		console.log('onKey()', data);
 	}
 </script>
 
-<Xterm {options} on:load={onLoad} on:data={onData} on:key={onKey} />
+<Xterm {options} {onLoad} {onData} {onKey} />
 ```
 
 ## Contributing

package/dist/Xterm.svelte

@@ -1,27 +1,52 @@
-<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 lang="ts">
+	import '@xterm/xterm/css/xterm.css';
+	import { onMount } from 'svelte';
+	import type { XtermProps } from './index.js';
+
+	let parent = $state<HTMLElement>();
+
+	let {
+		options,
+		onBell,
+		onBinary,
+		onCursorMove,
+		onData,
+		onKey,
+		onLineFeed,
+		onRender,
+		onWriteParsed,
+		onResize,
+		onScroll,
+		onSelectionChange,
+		onTitleChange,
+		onLoad,
+		...rest
+	}: XtermProps = $props();
+
+	onMount(async () => {
+		const { Terminal } = await import('@xterm/xterm');
+		const terminal = new Terminal(options);
+
+		terminal.onBell(() => onBell?.());
+		terminal.onBinary((data) => onBinary?.(data));
+		terminal.onCursorMove(() => onCursorMove?.());
+		terminal.onData((data) => onData?.(data));
+		terminal.onKey((data) => onKey?.(data));
+		terminal.onLineFeed(() => onLineFeed?.());
+		terminal.onRender((data) => onRender?.(data));
+		terminal.onWriteParsed(() => onWriteParsed?.());
+		terminal.onResize((data) => onResize?.(data));
+		terminal.onScroll((data) => onScroll?.(data));
+		terminal.onSelectionChange(() => onSelectionChange?.());
+		terminal.onTitleChange((data) => onTitleChange?.(data));
+
+		if (parent) {
+			terminal.open(parent);
+			onLoad?.(terminal);
+		} else {
+			console.error('[xterm-svelte] Parent element not found');
+		}
+	});
 </script>
 
-<div bind:this={parent} class={props.class} style={props.style}></div>
+<div bind:this={parent} {...rest}></div>

package/dist/Xterm.svelte.d.ts

@@ -1,46 +1,5 @@
-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: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-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 {};
+import type { XtermProps } from './index.js';
+declare const Xterm: import("svelte").Component<XtermProps, {}, "">;
+type Xterm = ReturnType<typeof Xterm>;
+export default Xterm;

package/dist/XtermAddon.d.ts

@@ -53,10 +53,6 @@ export declare class XtermAddon {
      *
      * @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.

package/dist/XtermAddon.js

@@ -35,13 +35,14 @@ export class XtermAddon {
      *
      * @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');
-    };
+    // static LigaturesAddon = async () => {
+    //     // @ts-ignore
+    //     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.

package/dist/XtermAddonType.d.ts

@@ -3,7 +3,6 @@ export type * from '@xterm/addon-canvas';
 export type * from '@xterm/addon-clipboard';
 export type * from '@xterm/addon-fit';
 export type * from '@xterm/addon-image';
-export type * from '@xterm/addon-ligatures';
 export type * from '@xterm/addon-search';
 export type * from '@xterm/addon-serialize';
 export type * from '@xterm/addon-unicode11';

package/dist/{XtermEvent.d.ts → XtermProps.d.ts}

@@ -1,17 +1,13 @@
 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;
-    };
+import type { ITerminalOptions, ITerminalInitOnlyOptions } from './index.js';
+import type { HTMLAttributes } from "svelte/elements";
+export type XtermProps = {
+    options?: ITerminalOptions & ITerminalInitOnlyOptions;
     /**
      * Adds an event listener for when the bell is triggered.
      * @returns an `IDisposable` to stop listening.
      */
-    bell: void;
+    onBell?: () => 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.
@@ -21,12 +17,12 @@ export interface XtermEvent {
      * binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`.
      * @returns an `IDisposable` to stop listening.
      */
-    binary: string;
+    onBinary?: (data: string) => void;
     /**
      * Adds an event listener for the cursor moves.
      * @returns an `IDisposable` to stop listening.
      */
-    cursormove: void;
+    onCursorMove?: () => 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
@@ -34,32 +30,32 @@ export interface XtermEvent {
      * on to the backing pty.
      * @returns an `IDisposable` to stop listening.
      */
-    data: string;
+    onData?: (data: string) => void;
     /**
      * 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: {
+    onKey?: (data: {
         key: string;
         domEvent: KeyboardEvent;
-    };
+    }) => void;
     /**
      * Adds an event listener for when a line feed is added.
      * @returns an `IDisposable` to stop listening.
      */
-    linefeed: void;
+    onLineFeed?: () => 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: {
+    onRender?: (data: {
         start: number;
         end: number;
-    };
+    }) => void;
     /**
      * 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
@@ -69,31 +65,36 @@ export interface XtermEvent {
      * that this can fire when there are still writes pending if there is a lot
      * of data.
      */
-    writeparsed: void;
+    onWriteParsed?: () => 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: {
+    onResize?: (data: {
         cols: number;
         rows: number;
-    };
+    }) => void;
     /**
      * 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;
+    onScroll?: (data: number) => void;
     /**
      * Adds an event listener for when a selection change occurs.
      * @returns an `IDisposable` to stop listening.
      */
-    selectionchange: void;
+    onSelectionChange?: () => 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;
-}
+    onTitleChange?: (data: string) => void;
+    /**
+     * Adds an event listener for when the terminal is loaded.
+     * @returns an `IDisposable` to stop listening.
+     */
+    onLoad?: (terminal: Terminal) => void;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import Xterm from './Xterm.svelte';
 import { XtermAddon } from './XtermAddon.js';
-import type { XtermEvent } from './XtermEvent.js';
+import type { XtermProps } from './XtermProps.js';
 export { Xterm, XtermAddon };
 export type * from '@xterm/xterm';
 export type * from './XtermAddonType.js';
-export type { XtermEvent };
+export type { XtermProps };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@battlefieldduck/xterm-svelte",
-	"version": "1.0.1",
+	"version": "2.0.1",
 	"description": "A SvelteKit wrapper for Xterm.js, enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless updates with the latest SvelteKit and Xterm.js versions.",
 	"keywords": [
 		"svelte",
@@ -44,28 +44,28 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.5.7",
+		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.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",
+		"eslint-plugin-svelte": "^2.45.1",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-svelte": "^3.2.6",
 		"publint": "^0.2.7",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.7.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.2.10",
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4",
 		"vitest": "^2.0.3"
 	},
 	"svelte": "./dist/index.js",
@@ -77,7 +77,6 @@
 		"@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",
@@ -85,4 +84,4 @@
 		"@xterm/addon-webgl": "^0.18.0",
 		"@xterm/xterm": "^5.5.0"
 	}
-}
+}