Access JS libraries from threepeny-gui application

[bradrn]

Let’s say I’ve found a reasonably large JS library I want to use in my threepenny-gui application (e.g. CodeMirror or something similar). In general, there seem to be two major methods of using such libraries:

1. Manually download the source code and copy the relevant files into your application
2. Use a package manager such as npm to specify the library as a dependency, then link to the appropriate scripts in node_modules

Option (1) is easy in threepenny-gui: simply make sure to put the library into your jsStatic directory and prefix every reference to it with /static, and everything will work. Option (2), however, is much more difficult — from what I can see, npm can’t install libraries into jsStatic, so there’s no way to use such libraries from a threepenny-gui application. In theory, loadDirectory looks like it could help with this, but it also seems like I can use it only after the HTML page has been loaded, which means it actually doesn’t help after all. (Not that I’ve tested it, so I could be wrong on this.)

So: is there any way I can use an npm-managed library in threepenny-gui? Or if not, would it be possible to add a way of doing this? (To me, the easiest solution seems to be allowing multiple static directories, but there could be others.)

[duplode]

To me, the easiest solution seems to be allowing multiple static directories, but there could be others.

Once upon a time, I wrote a patch for doing that. Though I stopped using it after loadFile and loadDirectory were reintroduced in 0.8, it should still work if reapplied -- at a glance, the only necessary adjustment would be changing the /dir/ prefix to something else, as loadDirectory is using that now.

[HeinrichApfelmus]

If I understand correctly, npm is a package manager for the Node JavaScript runtime. This runtime does not run in the browser, but in a native process.

In contrast, Threepenny assumes that all JavaScripts runs within a single browser window. A package manager like bower can be used to compile JavaScript dependencies into a single .js file that can be put in the jsStatic directory.

As far as loadDirectory is concerning, creating additional <script> tags in the document body to load additional scripts should work.

You can also load more scripts in the document head by providing your own custom HTML file with jsCustomHTML. In the context of Electron, this probably the best option. You can load additional .js libraries by making the appropriate calls to require('…').

[bradrn]

If I understand correctly, npm is a package manager for the Node JavaScript runtime. This runtime does not run in the browser, but in a native process.

npm is a package manager, but not necessarily for Node specifically — JavaScript is an interpreted languages, so the ‘packages’ are distributed in source code format, and can be used just fine if written for a web browser and included via a <script> tag. (Indeed, the official CodeMirror documentation recommends installing it from npm.)

A package manager like bower can be used to compile JavaScript dependencies into a single .js file that can be put in the jsStatic directory.

As far as loadDirectory is concerning, creating additional <script> tags in the document body to load additional scripts should work.

OK, I’ll try these and see how they go.

You can also load more scripts in the document head by providing your own custom HTML file with jsCustomHTML. In the context of Electron, this probably the best option. You can load additional .js libraries by making the appropriate calls to require('…').

This is what I’m doing already… the problem is that I can only use scripts from inside the designated static directory, and I can’t see any straightforward way of making npm install the source code within this directory. (Though actually, I’m thinking now — what happens if I move package.json etc. to inside the static directory? I’d better try that as well.)

[polymorphicengine]

@bradrn do you have any updates on this? I'm trying to use CodeMirror aswell and I'd be interested in how ( or if ) you eventually got it to work.

[bradrn]

@onthepeakofnormal Unfortunately not; for the application I was working on I eventually gave up on threepenny-gui, and ended up using Qt. I’d still like to get this working though.

[polymorphicengine]

Well I got it working with this approach you mentioned:

Manually download the source code and copy the relevant files into your application

you can have a look here, if your interested: https://github.com/onthepeakofnormal/tidal-gui

for my purposes this actually works ok

[bradrn]

@onthepeakofnormal Sorry, I should have been clearer: I did successfully use that method for a while, but eventually I decided I wasn’t happy with it, so for this and other reasons I eventually moved to Qt.