Merge pull request #99 from BattlefieldDuck/svelte5

Add support for additional XtermProps

Author: BattlefieldDuck

package-lock.json

@@ -53,7 +53,6 @@
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^8.56.0",
-		"@types/node": "^22.8.7",
 		"@typescript-eslint/eslint-plugin": "^7.7.1",
 		"@typescript-eslint/parser": "^7.7.1",
 		"eslint": "^8.56.0",
@@ -78,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",

package.json

@@ -19,7 +19,8 @@
 		onScroll,
 		onSelectionChange,
 		onTitleChange,
-		onLoad
+		onLoad,
+		...rest
 	}: XtermProps = $props();
 
 	onMount(async () => {
@@ -48,4 +49,4 @@
 	});
 </script>
 
-<div bind:this={parent}></div>
+<div bind:this={parent} {...rest}></div>

src/lib/Xterm.svelte

@@ -40,14 +40,15 @@ 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');
-        }
+    // 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');
-    }
+    //     return await import('@xterm/addon-ligatures');
+    // }
 
     /**
      * Dynamically imports the 'search' addon from `@xterm/addon-search`.

src/lib/XtermAddon.ts

@@ -3,7 +3,7 @@ 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-ligatures';
 export type * from '@xterm/addon-search';
 export type * from '@xterm/addon-serialize';
 // export type * from '@xterm/addon-unicode-graphemes';

src/lib/XtermAddonType.ts

@@ -1,5 +1,6 @@
 import type { Terminal } from "@xterm/xterm";
 import type { ITerminalOptions, ITerminalInitOnlyOptions } from './index.js';
+import type { HTMLAttributes } from "svelte/elements";
 
 export type XtermProps = {
     options?: ITerminalOptions & ITerminalInitOnlyOptions;
@@ -100,4 +101,4 @@ export type XtermProps = {
      * @returns an `IDisposable` to stop listening.
      */
     onLoad?: (terminal: Terminal) => void;
-};
+} & HTMLAttributes<HTMLDivElement>;

src/lib/XtermProps.ts

@@ -23,6 +23,35 @@
 				xterm-svelte
 			</span>
 		</h1>
+
+		<div class="mb-6 flex items-center justify-center gap-2 flex-wrap">
+			<a href="https://github.com/BattlefieldDuck/xterm-svelte/actions/workflows/node-build.yml">
+				<img
+					src="https://github.com/BattlefieldDuck/xterm-svelte/actions/workflows/node-build.yml/badge.svg"
+					alt="Node.js Build"
+				/>
+			</a>
+			<img
+				src="https://img.shields.io/npm/types/%40battlefieldduck%2Fxterm-svelte"
+				alt="NPM Type Definitions"
+			/>
+			<a href="https://www.npmjs.com/package/@battlefieldduck/xterm-svelte">
+				<img
+					src="https://img.shields.io/npm/v/%40battlefieldduck%2Fxterm-svelte"
+					alt="NPM Version"
+				/>
+			</a>
+			<img
+				src="https://img.shields.io/npm/dw/%40battlefieldduck%2Fxterm-svelte"
+				alt="NPM Downloads"
+			/>
+			<img
+				src="https://img.shields.io/npm/d18m/%40battlefieldduck%2Fxterm-svelte"
+				alt="NPM Downloads"
+			/>
+			<img src="https://img.shields.io/npm/l/%40battlefieldduck%2Fxterm-svelte" alt="NPM License" />
+		</div>
+
 		<p class="mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">
 			A SvelteKit wrapper for
 			<a