npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@battlefieldduck/xterm-svelte

v1.0.0

Published

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.

Downloads

202

Readme

xterm-svelte

Node.js Build NPM Version NPM Downloads

xterm-svelte is a wrapper for the 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

Features

  • Full integration with SvelteKit

    Xterm-Svelte is designed to work seamlessly with SvelteKit, allowing you to easily incorporate terminal functionality into your SvelteKit projects.

  • Xterm addons management

    Xterm addons are managed within Xterm-Svelte, providing a unified and consistent interface for working with Xterm and its addons.

  • Continuous package updates

    Xterm-Svelte is regularly updated to ensure compatibility with the latest versions of SvelteKit and Xterm.js. This means you can always use the latest features and improvements from these libraries in your projects.

Installation

To install Xterm-Svelte, run the following command in your project directory:

npm install @battlefieldduck/xterm-svelte

Usage

Here's a basic example of how to use xterm-svelte in your SvelteKit application:

<script lang="ts">
	import { Xterm, XtermAddon } from '@battlefieldduck/xterm-svelte';
	import type {
		ITerminalOptions,
		ITerminalInitOnlyOptions,
		Terminal
	} from '@battlefieldduck/xterm-svelte';

	let options: ITerminalOptions & ITerminalInitOnlyOptions = {
		fontFamily: 'Consolas'
	};

	async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
		console.log('Child component has loaded');
		const terminal = event.detail.terminal;

		// FitAddon Usage
		const fitAddon = new (await XtermAddon.FitAddon()).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

License

xterm-svelte is licensed under the MIT License. See the LICENSE file for more details.

Stargazers over time

Stargazers over time