- Added the `xterm` attribute to `py-config`. When set to `True` or `xterm`, an (output-only) [xterm.js](http://xtermjs.org/) terminal will be used in place of the default py-terminal.

You can control how `<py-terminal>` behaves by setting the values of the `terminal`, `docked`, and `xterm` fields in your configuration in your `<py-config>`.

For the **xterm** field, these are the values:

| value | description |

|-------|-------------|

| `false` | This is the default. The `<py-terminal>` is a simple `<pre>` tag with some CSS styling. |

| `true` or `xterm` | The [xtermjs](http://xtermjs.org/) library is loaded and its Terminal object is used as the `<py-terminal>`. It's visibility and position are determined by the `docked` and `auto` keys in the same way as the default `<py-terminal>` |

The xterm.js [Terminal object](http://xtermjs.org/docs/api/terminal/classes/terminal/) can be accessed directly if you want to adjust its properties, add [custom parser hooks](http://xtermjs.org/docs/guides/hooks/), introduce [xterm.js addons](http://xtermjs.org/docs/guides/using-addons/), etc. Access is best achieved by awaiting the `xtermReady` attribute of the `<py-terminal>` HTML element itself:

import js

import asyncio

async def adjust_term_size(columns, rows):

xterm = await js.document.querySelector('py-terminal').xtermReady

xterm.resize(columns, rows)

asyncio.ensure_future(adjust_term_size(40,10))

Some terminal-formatting packages read from specific environment variables to determine whether they should emit formatted output; PyScript does not set these variables explicitly - you may need to set them yourself, or force your terminal-formatting package into a state where it outputs correctly formatted output.

A couple of specific examples:

- the [rich](https://github.com/Textualize/rich) will not, by default, output colorful text, but passing `256` or `truecolor` as an argument as the `color_system` parameter to the [Console constructor](https://rich.readthedocs.io/en/stable/reference/console.html#rich.console.Console) will force it to do so. (As of rich v13)

- [termcolor](https://github.com/termcolor/termcolor) will not, by default, output colorful text, but setting `os.environ["FORCE_COLOR"] = "True"` or by passing `force_color=True` to the `colored()` function will force it to do so. (As of termcolor v2.3)

"typescript": "5.0.4",

"xterm": "^5.1.0"

import { Terminal as TerminalType } from 'xterm';

const knownPyTerminalTags: WeakSet<HTMLElement> = new WeakSet();

terminal?: boolean | 'auto';

docked?: boolean | 'docked';

xterm?: boolean | 'xterm';

const logger = getLogger('py-terminal');

validateConfigParameterFromArray({

config: config,

name: 'xterm',

possibleValues: [true, false, 'xterm'],

defaultValue: false,

});

const { terminal: t, docked: d, xterm: x } = config;

const xterm = x === true || x === 'xterm';

if (xterm) termElem.setAttribute('xterm', '');

// 1. define the "py-terminal" custom element, either a <pre> element

// or using xterm.js

const PyTerminal = _interpreter.config.xterm ? make_PyTerminal_xterm(this.app) : make_PyTerminal_pre(this.app);

abstract class PyTerminalBaseClass extends HTMLElement implements Stdio {

autoShowOnNextLine: boolean;

isAuto() {

return this.hasAttribute('auto');

}

isDocked() {

return this.hasAttribute('docked');

}

setupPosition(app: PyScriptApp) {

if (this.isAuto()) {

this.classList.add('py-terminal-hidden');

this.autoShowOnNextLine = true;

} else {

this.autoShowOnNextLine = false;

}

if (this.isDocked()) {

this.classList.add('py-terminal-docked');

}

logger.info('Registering stdio listener');

app.registerStdioListener(this);

}

abstract stdout_writeline(msg: string): void;

abstract stderr_writeline(msg: string): void;

function make_PyTerminal_pre(app: PyScriptApp) {

class PyTerminalPre extends PyTerminalBaseClass {

this.outElem.classList.add('py-terminal');

this.setupPosition(app);

}

// implementation of the Stdio interface

stdout_writeline(msg: string) {

this.outElem.innerText += msg + '\n';

this.scrollTop = this.scrollHeight;

}

if (this.autoShowOnNextLine) {

this.classList.remove('py-terminal-hidden');

this.autoShowOnNextLine = false;

}

stderr_writeline(msg: string) {

this.stdout_writeline(msg);

}

// end of the Stdio interface

}

return PyTerminalPre;

declare const Terminal: typeof TerminalType;

function make_PyTerminal_xterm(app: PyScriptApp) {

/** The <py-terminal> custom element, which automatically register a stdio

class PyTerminalXterm extends PyTerminalBaseClass {

outElem: HTMLDivElement;

_moduleResolved: boolean;

xtermReady: Promise<TerminalType>;

xterm: TerminalType;

cachedStdOut: Array<string>;

cachedStdErr: Array<string>;

_xterm_cdn_base_url = 'https://cdn.jsdelivr.net/npm/xterm@5.1.0';

constructor() {

super();

this.cachedStdOut = [];

this.cachedStdErr = [];

// While this is false, store writes to stdout/stderr to a buffer

// when the xterm.js is actually ready, we will "replay" those writes

// and set this to true

this._moduleResolved = false;

//Required to make xterm appear properly

this.style.width = '100%';

this.style.height = '100%';

async connectedCallback() {

//guard against initializing a tag twice

if (knownPyTerminalTags.has(this)) return;

knownPyTerminalTags.add(this);

this.outElem = document.createElement('div');

//this.outElem.className = 'py-terminal';

this.appendChild(this.outElem);

this.setupPosition(app);

this.xtermReady = this._setupXterm();

await this.xtermReady;

/**

async _setupXterm() {

if (this.xterm == undefined) {

//need to initialize the Terminal for this element

// eslint-disable-next-line

// @ts-ignore

if (globalThis.Terminal == undefined) {

//load xterm module from cdn

//eslint-disable-next-line

//@ts-ignore

await import(this._xterm_cdn_base_url + '/lib/xterm.js');

const cssTag = document.createElement('link');

cssTag.type = 'text/css';

cssTag.rel = 'stylesheet';

cssTag.href = this._xterm_cdn_base_url + '/css/xterm.css';

document.head.appendChild(cssTag);

}

//Create xterm, add addons

this.xterm = new Terminal({ screenReaderMode: true, cols: 80 });

// xterm must only 'open' into a visible DOM element

// If terminal is still hidden, open during first write

if (!this.autoShowOnNextLine) this.xterm.open(this);

this._moduleResolved = true;

//Write out any messages output while xterm was loading

this.cachedStdOut.forEach((value: string): void => this.stdout_writeline(value));

this.cachedStdErr.forEach((value: string): void => this.stderr_writeline(value));

} else {

this._moduleResolved = true;

}

return this.xterm;

if (this._moduleResolved) {

this.xterm.writeln(msg);

//this.outElem.innerText += msg + '\n';

if (this.isDocked()) {

this.scrollTop = this.scrollHeight;

}

if (this.autoShowOnNextLine) {

this.classList.remove('py-terminal-hidden');

this.autoShowOnNextLine = false;

this.xterm.open(this);

}

} else {

//if xtermjs not loaded, cache messages

this.cachedStdOut.push(msg);

return PyTerminalXterm;