Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Loading via browser and the Universal Module Definition

See original GitHub issue

In Issue #2499 it was asked why addons don’t work when loaded by browser from a CDN.

Addons are supposed to work as so:

const t = new window.Terminal();
const a = new FitAddon();
t.loadAddon(a);

But the UMD returns an object, so it’s necessary to do this:

const t = new window.Terminal();
const a = new FitAddon.FitAddon();
t.loadAddon(a);

Here’s a full example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.5.0/css/xterm.css" />
	<script src="https://cdn.jsdelivr.net/npm/xterm@4.5.0/lib/xterm.js"></script> 
	<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.3.0/lib/xterm-addon-fit.js"></script> 
</head>
<body>
<div id="terminal"></div>
<script>
	const 	t = new Terminal(),
	 	f = new FitAddon.FitAddon();
	t.loadAddon(f);
	t.open(document.getElementById('terminal'));
	t.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script> 
</body>
</html>

The UMD conditions are:

if(typeof exports === 'object' && typeof module === 'object')
  module.exports = factory();
else if(typeof define === 'function' && define.amd)
  define([], factory);
else if(typeof exports === 'object')
  exports["FitAddon"] = factory();
else
  root["FitAddon"] = factory();

Perhaps the last line should be root["FitAddon"] = factory()["FitAddon"];.

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:11 (6 by maintainers)

Top GitHub Comments

7reactions

lachdougcommented, May 22, 2020

These kids are 12 and 13. Some of them can’t remember how to open their text editors. I’m not going to be talking with them about ‘chains of trust’. We’re just playing around with a bit of ASCII art. I’m sorry for mentioning CDNs and teaching. These are irrelevant and have distracted from the trust of the issue, which is: xterm’s UMD for addons does not work as documented. If you don’t want to change the UMD, you should at least change the docs. There are lots of beginners pulling their hair out because of this little gotcha.

1reaction

Tyriarcommented, Jun 8, 2020

👍 window.FitAddon would be more intuitive.

Top Results From Across the Web

What are UMD modules? One final module system to rule ...

Basically, a UMD module is a JavaScript file that tries to guess at runtime which module system it's being used in, and then...

How to use UMD in browser without any additional ...

I'm loading a UMD module into my page (by creating a <script async="" src=""> element inside another script). After the new script is...

Universal modules (browser, Node.js): imports and universal ...

In a browser, when you ask for a module, it usually means that it has to be loaded over the internet. While that...

What the heck are CJS, AMD, UMD, and ESM in Javascript?

UMD stands for Universal Module Definition. Here is what it may look like (source):. (function (root, factory) { if (typeof define === "function ......

JavaScript Modules Explained

Later, other players took action, in order to bring some peace: UMD (Universal Module Definition) and SystemJS. Both tried to create a way ......