Including assets / styling from npm-installed modules


#1

I’m trying to leverage https://github.com/sourcelair/xterm.js in a terminal package, and am including it via npm in my package.json …

{
  "name": "termy",
  "dependencies": {
    "xterm": "^2.0.1"
  }
  // ...
}

The xterm.js folks maintain statically built assets in the dist/ folder ( https://github.com/sourcelair/xterm.js/tree/master/dist ), which gets pulled down to [path-to-package]/node_modules/xterm/dist locally.

I’d like to include the .css and .js file from this directory as part of my package – to make it easier to maintain (e.g. when xterm.js is version bumped in package.json, latest styling/css is naturally applied).

Is this possible?

Also is it possible to scope the included CSS to the pane I open terminal in and not have the selectors applied globally?

Thanks!


#2

I’m not sure what you mean by this. When your package is installed, all of its Node dependencies are installed along with it by the apm utility. So isn’t this already accomplished?


#3

Thanks Lee. Yes the files are there (installed by npm) but I’d like to reference them somehow within my application code. Xterm.js was added as a dependency, and I need to include the CSS it provides ([my-package]/node_modules/xterm/dist/xterm.css).

In a node app where I use xterm, I am able to reference the location the these files via;

var xtermPath = require.resolve('xterm'); 
// ...

and I assume I can do this – however, is there a recommended way to inject this styling and javascript into a pane? And if I do inject the CSS, can the rules/selectors be isolated to the pane I apply it to? The upstream [xterm.js] styling is kind of general and I’d worry it effects something elsewhere if globally applied.

~ Brice


#4

You can add whatever kind of UI you like by using the Workspace.addOpener function. Given that you can then hand it whatever kind of HTML fragment you choose, yes, you can inject the styles and JavaScript into the PaneItem (not necessarily the Pane). As far as isolating it, there isn’t really a way to do that though you could perhaps use a <webview>? I haven’t experimented with those, so I’m not sure about the pros and cons for your particular use case.


#5

I think you misunderstood the question, @leedohm . Brice wants to apply styles from inside one of his dependencies in node_modules rather than from the styles directory in his package. Is this possible, or is the only option to manually copy the CSS up into the package’s styles directory?

@briceburg did you figure this out by chance?