@battlefieldduck/xterm-svelte 2.0.1 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +25 -6
  2. package/dist/Xterm.svelte +4 -3
  3. package/dist/Xterm.svelte.d.ts +1 -1
  4. package/dist/XtermProps.d.ts +9 -2
  5. package/package.json +43 -40
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # xterm-svelte
1
+ # Xterm Svelte
2
2
 
3
3
  <img align="right" width="100" height="100" src="https://github.com/BattlefieldDuck/xterm-svelte/assets/29337428/e1055940-ae66-48b5-9a1f-1965949b5757">
4
4
 
@@ -20,6 +20,8 @@ Check it out: https://xterm-svelte.pages.dev
20
20
  | 2.x.x | Svelte 5 | [`main`](https://github.com/BattlefieldDuck/xterm-svelte) | https://xterm-svelte.pages.dev |
21
21
  | 1.x.x | Svelte 4 | [`svelte4`](https://github.com/BattlefieldDuck/xterm-svelte/tree/svelte4) | https://svelte4.xterm-svelte.pages.dev |
22
22
 
23
+ 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).
24
+
23
25
  ## Features
24
26
 
25
27
  - **Full integration with SvelteKit**
@@ -55,19 +57,21 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
55
57
  Terminal
56
58
  } from '@battlefieldduck/xterm-svelte';
57
59
 
58
- let options: ITerminalOptions & ITerminalInitOnlyOptions = {
60
+ let terminal = $state<Terminal>();
61
+
62
+ const options: ITerminalOptions & ITerminalInitOnlyOptions = {
59
63
  fontFamily: 'Consolas'
60
64
  };
61
65
 
62
- async function onLoad(terminal: Terminal) {
66
+ async function onLoad() {
63
67
  console.log('Child component has loaded');
64
68
 
65
69
  // FitAddon Usage
66
70
  const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
67
- terminal.loadAddon(fitAddon);
71
+ terminal?.loadAddon(fitAddon);
68
72
  fitAddon.fit();
69
73
 
70
- terminal.write('Hello World');
74
+ terminal?.write('Hello World');
71
75
  }
72
76
 
73
77
  function onData(data: string) {
@@ -79,16 +83,31 @@ Here's a basic example of how to use xterm-svelte in your SvelteKit application:
79
83
  }
80
84
  </script>
81
85
 
82
- <Xterm {options} {onLoad} {onData} {onKey} />
86
+ <Xterm bind:terminal {options} {onLoad} {onData} {onKey} />
83
87
  ```
84
88
 
89
+ ## FAQ
90
+
91
+ ### When should I use `onLoad()`?
92
+
93
+ The `onLoad()` function fires when the xterm terminal is first initialized. You can use this function to perform actions such as initializing xterm addons.
94
+
95
+ ## Real-world uses
96
+ - [Bitor](https://github.com/bitorscanner/Bitor): Bitor Scanning Software
97
+ - [Asm editor](https://github.com/Specy/asm-editor): A modern webapp to write, run and learn M68K, MIPS, RISC-V, X86 assembly
98
+ - [Sylve](https://github.com/AlchemillaHQ/Sylve): Lightweight GUI for managing Bhyve, Jails, ZFS, networking, and more on FreeBSD
99
+ - [And much more...](https://github.com/BattlefieldDuck/xterm-svelte/network/dependents)
100
+
85
101
  ## Contributing
102
+
86
103
  Contributions are welcome! Please feel free to submit pull requests or open issues.
87
104
 
88
105
  ![https://github.com/BattlefieldDuck/xterm-svelte/graphs/contributors](https://contrib.rocks/image?repo=BattlefieldDuck/xterm-svelte)
89
106
 
90
107
  ## License
108
+
91
109
  xterm-svelte is licensed under the MIT License. See the `LICENSE` file for more details.
92
110
 
93
111
  ## Stargazers over time
112
+
94
113
  [![Stargazers over time](https://starchart.cc/BattlefieldDuck/xterm-svelte.svg?variant=adaptive)](https://starchart.cc/BattlefieldDuck/xterm-svelte)
package/dist/Xterm.svelte CHANGED
@@ -1,11 +1,12 @@
1
1
  <script lang="ts">
2
2
  import '@xterm/xterm/css/xterm.css';
3
3
  import { onMount } from 'svelte';
4
- import type { XtermProps } from './index.js';
4
+ import type { Terminal, XtermProps } from './index.js';
5
5
 
6
6
  let parent = $state<HTMLElement>();
7
7
 
8
8
  let {
9
+ terminal = $bindable<Terminal | undefined>(),
9
10
  options,
10
11
  onBell,
11
12
  onBinary,
@@ -24,9 +25,9 @@
24
25
  }: XtermProps = $props();
25
26
 
26
27
  onMount(async () => {
27
- const { Terminal } = await import('@xterm/xterm');
28
- const terminal = new Terminal(options);
28
+ const Terminal = (await import('@xterm/xterm')).Terminal;
29
29
 
30
+ terminal = new Terminal(options);
30
31
  terminal.onBell(() => onBell?.());
31
32
  terminal.onBinary((data) => onBinary?.(data));
32
33
  terminal.onCursorMove(() => onCursorMove?.());
package/dist/Xterm.svelte.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import '@xterm/xterm/css/xterm.css';
2
2
  import type { XtermProps } from './index.js';
3
- declare const Xterm: import("svelte").Component<XtermProps, {}, "">;
3
+ declare const Xterm: import("svelte").Component<XtermProps, {}, "terminal">;
4
4
  type Xterm = ReturnType<typeof Xterm>;
5
5
  export default Xterm;
package/dist/XtermProps.d.ts CHANGED
@@ -1,7 +1,14 @@
1
- import type { Terminal } from "@xterm/xterm";
1
+ import type { Terminal } from '@xterm/xterm';
2
2
  import type { ITerminalOptions, ITerminalInitOnlyOptions } from './index.js';
3
- import type { HTMLAttributes } from "svelte/elements";
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
4
  export type XtermProps = {
5
+ /**
6
+ * Represents an xterm.js terminal.
7
+ */
8
+ terminal?: Terminal;
9
+ /**
10
+ * An object containing options for the terminal.
11
+ */
5
12
  options?: ITerminalOptions & ITerminalInitOnlyOptions;
6
13
  /**
7
14
  * Adds an event listener for when the bell is triggered.
package/package.json CHANGED
@@ -1,14 +1,7 @@
1
1
  {
2
2
  "name": "@battlefieldduck/xterm-svelte",
3
- "version": "2.0.1",
3
+ "version": "2.1.1",
4
4
  "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.",
5
- "keywords": [
6
- "svelte",
7
- "xterm",
8
- "xterm-js",
9
- "sveltekit",
10
- "xterm-svelte"
11
- ],
12
5
  "repository": {
13
6
  "type": "git",
14
7
  "url": "git+https://github.com/BattlefieldDuck/xterm-svelte.git"
@@ -20,57 +13,67 @@
20
13
  "license": "MIT",
21
14
  "scripts": {
22
15
  "dev": "vite dev",
23
- "build": "vite build && npm run package",
16
+ "build": "vite build && npm run prepack",
24
17
  "preview": "vite preview",
25
- "package": "svelte-kit sync && svelte-package && publint",
26
- "prepublishOnly": "npm run package",
27
- "test": "npm run test:integration && npm run test:unit",
18
+ "prepare": "svelte-kit sync || echo ''",
19
+ "prepack": "svelte-kit sync && svelte-package && publint",
28
20
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
29
21
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
30
- "lint": "prettier --check . && eslint .",
31
22
  "format": "prettier --write .",
32
- "test:integration": "playwright test",
33
- "test:unit": "vitest"
23
+ "lint": "prettier --check . && eslint .",
24
+ "test:e2e": "playwright test",
25
+ "test": "npm run test:e2e"
34
26
  },
27
+ "files": [
28
+ "dist",
29
+ "!dist/**/*.test.*",
30
+ "!dist/**/*.spec.*"
31
+ ],
32
+ "sideEffects": [
33
+ "**/*.css"
34
+ ],
35
+ "svelte": "./dist/index.js",
36
+ "types": "./dist/index.d.ts",
37
+ "type": "module",
35
38
  "exports": {
36
39
  ".": {
37
40
  "types": "./dist/index.d.ts",
38
41
  "svelte": "./dist/index.js"
39
42
  }
40
43
  },
41
- "files": [
42
- "dist",
43
- "!dist/**/*.test.*",
44
- "!dist/**/*.spec.*"
45
- ],
46
44
  "peerDependencies": {
47
45
  "svelte": "^5.0.0"
48
46
  },
49
47
  "devDependencies": {
50
- "@playwright/test": "^1.28.1",
51
- "@sveltejs/adapter-auto": "^3.0.0",
52
- "@sveltejs/kit": "^2.5.27",
48
+ "@eslint/compat": "^1.2.5",
49
+ "@eslint/js": "^9.22.0",
50
+ "@playwright/test": "^1.49.1",
51
+ "@sveltejs/adapter-auto": "^6.0.0",
52
+ "@sveltejs/kit": "^2.22.0",
53
53
  "@sveltejs/package": "^2.0.0",
54
- "@sveltejs/vite-plugin-svelte": "^4.0.0",
55
- "@types/eslint": "^8.56.0",
56
- "@typescript-eslint/eslint-plugin": "^7.7.1",
57
- "@typescript-eslint/parser": "^7.7.1",
58
- "eslint": "^8.56.0",
59
- "eslint-config-prettier": "^9.1.0",
60
- "eslint-plugin-svelte": "^2.45.1",
61
- "prettier": "^3.1.1",
62
- "prettier-plugin-svelte": "^3.2.6",
63
- "publint": "^0.2.7",
54
+ "@sveltejs/vite-plugin-svelte": "^6.0.0",
55
+ "@types/node": "^24",
56
+ "eslint": "^9.22.0",
57
+ "eslint-config-prettier": "^10.0.1",
58
+ "eslint-plugin-svelte": "^3.0.0",
59
+ "globals": "^16.0.0",
60
+ "prettier": "^3.4.2",
61
+ "prettier-plugin-svelte": "^3.3.3",
62
+ "publint": "^0.3.2",
64
63
  "svelte": "^5.0.0",
65
64
  "svelte-check": "^4.0.0",
66
- "tslib": "^2.4.1",
67
- "typescript": "^5.5.0",
68
- "vite": "^5.4.4",
69
- "vitest": "^2.0.3"
65
+ "typescript": "^5.0.0",
66
+ "typescript-eslint": "^8.20.0",
67
+ "vite": "^7.0.4",
68
+ "vite-plugin-devtools-json": "^1.0.0"
70
69
  },
71
- "svelte": "./dist/index.js",
72
- "types": "./dist/index.d.ts",
73
- "type": "module",
70
+ "keywords": [
71
+ "svelte",
72
+ "xterm",
73
+ "xterm-js",
74
+ "sveltekit",
75
+ "xterm-svelte"
76
+ ],
74
77
  "dependencies": {
75
78
  "@xterm/addon-attach": "^0.11.0",
76
79
  "@xterm/addon-canvas": "^0.7.0",