Allow Electron process to be accessed from JavaScript FFI. #200

The file `index.html` now loads jQuery correctly
if used in the context of an Electron `BrowserWindow`.
This allows us to set `nodeIntegration=true` in
`electron.js` and gives access to Electron’s
main process from the Browser Window.

CHANGELOG.md

@@ -3,8 +3,11 @@
 **0.8.2.0** — Snapshot release
 
 * Add `getCookies` function that retrieves the cookies sent with the HTTP request when the browser window connects (to the websocket). [#137][]
+* Allow Electron process to be accessed from JavaScript FFI. [#200][] This means that Threepenny is now more useful when used with the [Electron][] framework, see [doc/electron.md](doc/electron.md) for more information on that.
 
   [#137]: https://github.com/HeinrichApfelmus/threepenny-gui/issues/137
+  [#200]: https://github.com/HeinrichApfelmus/threepenny-gui/issues/200
+  [electron]: https://electron.atom.io
 
 **0.8.1.0** — Snapshot release
 

CONTRIBUTORS

@@ -16,6 +16,7 @@ Felipe Lessa      <https://github.com/meteficha>
 Wesley Massuda    <https://github.com/massudaw>
 Daniel Mlot       <https://github.com/duplode>
 JP Moresmau       <https://github.com/JPMoresmau>
+Brad Neimann      <https://github.com/bradrn>
 Luke Palmer
 Jens Peterson
 Jaap van der Plas

doc/electron.md

@@ -35,7 +35,7 @@ following on startup:
 - opens an Electron window which loads the URL of our Threepenny app
 
 To get started with the linked `electron.js` first add
-this [package.json]('./electron/package.json') to your project root directory.
+this [package.json](./electron/package.json) to your project root directory.
 You'll need Node installed and `npm` on your PATH, confirm by running `which
 npm`. Now run `npm install` from the project root directory to install the
 necessary dependencies.
@@ -79,6 +79,34 @@ directory:
 
 Now you can simply set `relBin` to `./build/your-app-exe`.
 
+## Accessing electron with FFI
+
+The Haskell FFI can be used to access electron utilities.
+For instance, to display a dialog when a button is pressed:
+
+```Haskell
+button <- UI.button # set UI.text "Click me!"
+on UI.click button $ const $ runFunction $ ffi "require('electron').dialog.showOpenDialog({})"
+```
+
+A reference of electron functions can be found at https://electron.atom.io/docs/.
+
+The [jmacro](https://hackage.haskell.org/package/jmacro) library could prove useful for more involved applications, such as showing a modal dialog:
+
+```Haskell
+runFunction $ ffi $ show $ renderJs
+    [jmacro|
+        var {|BrowserWindow: BrowserWindow|} = remote;
+        var modal = new BrowserWindow({parent: remote.getCurrentWindow(),
+                                       modal: true,
+                                       show: false});
+        modal.setMenu(null);
+        modal.loadURL('file://' + require('path').join(remote.app.getAppPath(), 'dialog.html'));
+
+        modal.once('ready-to-show', \() { modal.show() })
+    |]
+```
+
 ## Packaging with electron-packager
 This section assumes the app is already setup to run with Electron based on
 the [above](#running-with-electron) instructions.

doc/electron/electron.js

@@ -27,7 +27,7 @@ freeport((err, port) => {
     win = new BrowserWindow({
       width: 800,
       height: 600,
-      webPreferences: { nodeIntegration: false },
+      webPreferences: { nodeIntegration: true },
     });
 
     console.log(`Loading URL: ${url}`);

js/index.html

@@ -3,7 +3,12 @@
   <meta charset="UTF-8">
   <title></title>
   <link rel="stylesheet" type="text/css" href="haskell.css"/>
+
+  <!-- See https://stackoverflow.com/a/37480521  -->
+  <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
   <script src="haskell.js"></script>
+  <script>if (window.module) module = window.module;</script>
+
   <script type="text/javascript" charset="utf-8">
     Haskell.initFFI();
   </script>