does "import { Terminal } from '@xterm/xterm';" work?

[recri]

I'm trying to build a web component wrapping xterm.js.

When I attempt to include xterm as a module using:

import { Terminal } from '@xterm/xterm';

it generates this runtime error if I'm using the development server:

Uncaught SyntaxError: The requested module './../../node_modules/with@xterm/xterm/lib/xterm.js' 
does not provide an export named 'Terminal'

and it generates this error if I'm running rollup to build a distribution image:

"Terminal" is not exported by "node_modules/@xterm/xterm/lib/xterm.js"

this is using @xterm/xterm 5.5.0

What is the correct way to import Terminal into an ecmascript module?

[jerch]

ESM export is a pretty recent change and not yet reflected in the official versions. You can try to use a beta version instead (e.g. version 5.6.0-beta.66 already contains the ESM directives).

[recri]

Thank you, @jerch, that does the trick on the import.

Here's the working skeleton I've built. The context is a project started with npm init @open-wc, which I requested to make a new project, an application with the shell name 'hasak-xterm', using typescript, and npm. Then I modified the stubbed 'src/hasak-xterm.ts' to the following, with an important omission commented in the code and discussed below:

import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

import { Terminal } from '@xterm/xterm';

@customElement('hasak-xterm')
export class HasakXterm extends LitElement {

   static styles = css`
/* insert contents of xterm.css here so it will be visible inside the component */
`;

  terminal: Terminal;
  
  constructor() {
    super();
    this.terminal = new Terminal();
  }

  containerElement() {
    return (this.renderRoot as DocumentFragment).getElementById('terminal');
  }
  
  firstUpdated() {
    this.terminal.open(this.containerElement()!);
    this.terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
  }
  
  render() {
    return html`<div id="terminal" > </div>`;
  }
}

The contensts of xterm.css must be inserted into the css template that begins with static style = css, as noted in the comment. Without a local copy of xterm.css the xterm does not display the same as it does with it. This is to be expected as the whole point of web components was to encapsulate namespaces to prevent leaks. Using the css @import construction would be ideal, but that isn't supported as yet.

I'm going to continue by modifying this skeleton to see if it can serve my specifforic purposes. But there's a more generally useful continuation which would reflect the options of the terminal as properties of the component and use the reactive facilities of lit to reflect the values of changed properties into the terminal in the render() method.

Thanks for the code and the help.

[jerch]

I wanted to do web component for xtermjs for quite some time, but it always moved further down on the list 😊
This is a great start!

A few ideas for improvement:

• include the fit addon by default and offer some attribute like resize="auto|fixed" (fixed only makes sense with other attributes like cols="xy" rows="z")
• support addons in general - for static "compiled-in" support this prolly would have to be a scaffolding template to configure, not sure if adding them right from the start is a good idea (JS part will get really big)
• expose terminal default colors as attributes or CSS vars