Aurelia: using es6 import for electron + typescript - electron

I have an aurelia application running in electron. My source files are typescript and I have ambient typings for electron and node.
Because I know I'm compiling for use on electron, I am transpiling my typescript to es6 and with System module loading; this means I can turn system.js's transpiler off. I'm using system.js and jspm because that is approach Aurelia has been pushing.
So in my ts files: I would like to be able to do:
import {remote} from 'electron';
Unfortunately, system.js does not know anything about the module electron and fails during runtime. TypeScript on the other hand is perfectly happy because I've set up the typings for electron and node; I get full intellisense in VSCode too.
note: if you attempt to do var electron = require('electron'); in the header, system.js interferes with it and it fails to load. You can place that 'require('electron')' within a class or function and it will work, but I don't find this ideal.
Question: How can I get system.js to correctly return the 'electron' module that is only available when you run the app in electron itself?

A solution --hopefully there is a better way-- I've come up with is to shim the electron module for system.js and link it directly to the contents of require('electron'):
electron.js
System.register([], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var electron;
return {
setters: [],
execute: function () {
electron = require('electron');
exports_1("default", electron);
Object.keys(electron).forEach(function (key) {
exports_1(key, electron[key]);
});
}
}
});
this effectively wraps the internal electron module and allows system.js to know about it. It works; but hopefully there is a more elegant/built-in way that others know of.
You don't need any mappings or changes to the typescypt as import {remote} from 'electron' will attempt to resolve electron.js as a last resort.

Related

Electron plugin architecture, inject plugin code into the application

As the title say, I am trying to develop a plugin architecture for an electron app.
So far I have handle my custom plugin store the download of the plugin source which consist of an single main.js and a style.css.
I am stuck now since I don't know how to "require" the file from my application.
A little more explanation on this main.js file:
I want to require that main.js file to that I can retrieve the exported class to create a new instance in my PluginManager system.
It would be like so:
// plugin-manager.ts
loadPlugin(pluginId: string) {
const pluginClass = await import(path.join('/somewhere-in-the-fs', pluginId));
const plugin = new PluginClass({ app: myApp });
this.enabledPlugins.push(plugin);
}
tldr: I'm stuck at the await import() part because obviously my plugin is not in my running node environment.

Getting paperjs to work in an electron app

Another learning project in the works... I am trying to use paperjs in an electron app.
According to the instructions, I think I should be using paper-jsdom (please correct me if I'm wrong). BTW, I am using TypeScript if that makes a difference. I have an HTML document with nothing but an empty <canvas> and a <script> tag referencing this:
import paper, {Color, Point, Path} from 'paper-jsdom'
window.onload = (): void => {
let canvas = document.getElementById("workspace") as HTMLCanvasElement;
paper.setup(canvas);
let path = new Path();
path.strokeColor = Color.random();
let start = new Point(100, 100);
path.moveTo(start);
path.lineTo(start.add(new Point(200, -50)));
paper.view.update();
};
So right off the bat I get:
Uncaught TypeError: paper_jsdom_1.Path is not a constructor
Ugh... So I tried a few random things (it's late, I'm tired...) and changing my import to:
import paper from 'paper'
import {Color, Point, Path} from 'paper-jsdom'
works, or at least the code above works.
Am I supposed to be importing some things from 'paper' and others from 'paper-jsdom'? What is the correct way to use paperjs in an electron app?
Unfortunately paper-jsdom doesn't seem to have any type info for TS.
Thanks!!
Since you are using Paper.js in the renderer process of Electron, you are using it in the browser context and not in Node.js context so you should use the common paper package which relies on browser Canvas API (and not paper-jsdom which targets browserless usage).
So you should be able to use Paper.js as you would for a website.
From your code example, I see that you are using TypeScript so you can have a look at this simple quickstart project that I made to play with Paper.js and TypeScript.
It uses this kind of import:
import * as paper from 'paper';
And then access Paper.js classes through the imported paper object:
new paper.Path.Circle({
center : paper.view.center,
radius : 50,
fillColor: 'orange',
});
Edit
Here is a repository showing the simplest way of using Paper.js in an Electron app.

Import my own files into the electron renderer process

This seems really dumb, but I need help for importing some source code into the renderer process in electron:
I have an electron app:
index.html (loads window.js with a tag)
- index.js
- window.js
- useful_functions.js
In window.js, I want to import some functions from useful_functions.js, so I've tried the following:
// fails with: Uncaught SyntaxError: Unexpected identifier
import { very_useful } from './useful_functions.js';
// fails with: Uncaught ReferenceError: require is not defined
const { very_useful } = require('./useful_functions.js');
// fails with: Uncaught ReferenceError: require is not defined
require('electron').remote.require('./useful_functions.js')
I also tried the nodeIntegration flag, but that didn't help either
Note: I'm not trying to import npm modules but my own code, in an other file right next to it.
I'm looking for examples, but I only find super small samples with just the basic files. (Or huge apps like atom that would take me a while to figure out)
I don't have webpack setup for this project yet, but I'm sure there is a simpler way to do this very basic task...
Thanks for any help.
In index.html, use require() instead of loading window.js with a tag, i.e., replace:
<script src="window.js"></script>
with:
<script>require('./window.js');</script>
Then, in window.js, the following statement should work too:
const { very_useful } = require('./useful_functions.js');
Note that nodeIntegration: true is needed in the options passed to new BrowserWindow() anyway:
webPreferences:
{
nodeIntegration: true
}
See:
Node Modules
Functions and objects are added to the root of a module by
specifying additional properties on the special exports object.
Variables local to the module will be private, because the module is
wrapped in a function by Node.js (see module wrapper).
Module Wrapper
Before a module's code is executed, Node.js will wrap it with a
function wrapper that looks like the following:
(function(exports, require, module, __filename, __dirname) {
// Module code actually lives in here
});

How can I interop with existing JS objects?

I'm trying to write Dart code that will generate a rough equivalent of this:
var disposable = vscode['commands'].registerCommand(
'extension.sayHello',
function () {
vscode['window'].showInformationMessage('Hello World!');
}
);
context.subscriptions.push(disposable);
The variables vscode and context are both globals available in the JavaScript which is executing my Dart (which is being compiled to JS with the Dart Dev Compiler).
I'm happy for context/vscode to be completely untyped for now, but I'm struggling to bend the JS package to output code like this (eg. if I put #JS() on a stub vscode, I get dart.global.vscode).
You can use the base dart:js features
Note that context happens to be dart's name for the javascript context.
var disposable = context['vscode']['commands'].callMethod('registerCommand', [
'extension.sayHello',
() {
context['vscode']['window'].callMethod('showInformationMessage', ['Hello World!']);
}]);
);
context['context']['subscriptions'].callMethod('push', [disposable]);
Let me put together a quick example on github with package:js.
Edit: OK, here you go:
https://github.com/matanlurey/js-interop-examples
It took me a couple tries to the package:js syntax correct (we probably need more documentation here and examples), but I ended up creating a "fake" visual studio code API (vscode.js), and interoping with it fine.
Watch out that you need to wrap your functions with allowInterop if you expect your examples to work in Dartium.

Using thirdparty libraries from dart language

How can import and use any third party javascript libraries in dart..? I want to use snapsvg in my dart application to render svg. But not sure how to add dependencies to add and import it.
I added js: any to my pubspec.yaml and imported packages/browser/interop.js into my html. Where do I place downloaded snapsvg.js and import it to my dart source file to use it.
I am trying to use following javascript code using snapsvg framework from dart.
s = Snap(800, 600);
s.rect(0, 0, 100, 100).attr({
fill: 'white',
stroke: 'black'
});
I tried this code from in dart:
import 'package:js/js.dart' as js;
void main() {
var s = js.context.Snap(800, 600);
s.rect(0, 0, 100, 100);
}
This works fine in dartium, but when I Run as Javascript after build, I got javascript error "method zm not found in object"
I believe this is not right way and I should use be using callMethod on proxy. So I changed code like this
import 'dart:js' show context, JsObject;
void main() {
var snap = context['Snap'];
snap.callMethod('rect', 0,0,100,100);
}
This is not working in Dartium as itself. I would appreciate if someone can provide example of how to call constructor Snap(800, 600) from dart and also rect and attr methods in my example code.
You add them to the HTML file using <script> tags.
You can call JavaScript functions from Dart using dart-js-interop.
There are many examples here on Stackoverflow under this tag - just click on the tag below your question.
When you provide a more concrete example it is easier to help.
You can call into JavaScript with the built-in dart:js library. Please try to avoid using /package/ js, which is what you install by adding js: any to your pubspec. The js package is likely to cause the dart2js output to be bloated and we're probably going to deprecate it at some point.
You can reference JavaScript files like you would in any HTML page, via script tags. You don't actually import them into Dart source, you use dart:js to access JavaScript via its top-level context property.

Resources