@battlefieldduck/xterm-svelte 2.0.0 → 2.1.0

package/README.md

@@ -1,4 +1,4 @@
-# xterm-svelte
+# Xterm Svelte
 
 <img align="right" width="100" height="100" src="https://github.com/BattlefieldDuck/xterm-svelte/assets/29337428/e1055940-ae66-48b5-9a1f-1965949b5757">
 
@@ -20,6 +20,8 @@ Check it out: https://xterm-svelte.pages.dev
 | 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 |
 
+For details on migrating from version 1.x.x to 2.x.x, refer to the [Migration Guide](https://github.com/BattlefieldDuck/xterm-svelte/releases/tag/2.0.0).
+
 ## Features
 
 - **Full integration with SvelteKit**
@@ -55,11 +57,13 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 		Terminal
 	} from '@battlefieldduck/xterm-svelte';
 
+	let terminal: Terminal;
+
 	let options: ITerminalOptions & ITerminalInitOnlyOptions = {
 		fontFamily: 'Consolas'
 	};
 
-	async function onLoad(terminal: Terminal) {
+	async function onLoad() {
 		console.log('Child component has loaded');
 
 		// FitAddon Usage
@@ -79,9 +83,25 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
 	}
 </script>
 
-<Xterm {options} {onLoad} {onData} {onKey} />
+<Xterm bind:terminal {options} {onLoad} {onData} {onKey} />
 ```
 
+## FAQ
+
+### When should I use `onLoad()`?
+
+The `onLoad()` function fires when the xterm terminal is first initialized. You can use this function to perform actions such as initializing xterm addons.
+
+### Why is the `terminal` undefined?
+
+One possible cause is that you called the `terminal` function before it was initialized. For example, if you run the `terminal` function in the `onMount` function without wrapping it with `if (terminal !== undefined)`, it can lead to this issue.
+
+## Real-world uses
+
+- [Thymis](https://thymis.io): Thymis is an open-source project that aims to provide a seamless and secure IoT device management solution.
+With Thymis, users can easily configure and manage their devices running on the NixOS operating system.
+- [And much more...](https://github.com/BattlefieldDuck/xterm-svelte/network/dependents)
+
 ## Contributing
 Contributions are welcome! Please feel free to submit pull requests or open issues.
 

package/dist/Xterm.svelte

@@ -6,6 +6,7 @@
 	let parent = $state<HTMLElement>();
 
 	let {
+		terminal = $bindable(),
 		options,
 		onBell,
 		onBinary,
@@ -25,8 +26,8 @@
 
 	onMount(async () => {
 		const { Terminal } = await import('@xterm/xterm');
-		const terminal = new Terminal(options);
 
+		terminal = new Terminal(options);
 		terminal.onBell(() => onBell?.());
 		terminal.onBinary((data) => onBinary?.(data));
 		terminal.onCursorMove(() => onCursorMove?.());

package/dist/Xterm.svelte.d.ts

@@ -1,4 +1,5 @@
 import '@xterm/xterm/css/xterm.css';
 import type { XtermProps } from './index.js';
-declare const Xterm: import("svelte").Component<XtermProps, {}, "">;
+declare const Xterm: import("svelte").Component<XtermProps, {}, "terminal">;
+type Xterm = ReturnType<typeof Xterm>;
 export default Xterm;

package/dist/XtermProps.d.ts

@@ -2,6 +2,13 @@ import type { Terminal } from "@xterm/xterm";
 import type { ITerminalOptions, ITerminalInitOnlyOptions } from './index.js';
 import type { HTMLAttributes } from "svelte/elements";
 export type XtermProps = {
+    /**
+     * Represents an xterm.js terminal.
+     */
+    terminal?: Terminal;
+    /**
+     * An object containing options for the terminal.
+     */
     options?: ITerminalOptions & ITerminalInitOnlyOptions;
     /**
      * Adds an event listener for when the bell is triggered.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@battlefieldduck/xterm-svelte",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"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,7 +44,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",