feat(generators): Electron support for desktop development (#46)

.gitignore

@@ -5,6 +5,7 @@ jsconfig.json
 # Outputs
 scripts/**/*.js
 scripts/**/*.js.map
+!scripts/tools/**/*.js
 src/**/*.js
 src/**/*.js.map
 !src/app.nativescript/_files/tools/*.js

.vscode/settings.json

@@ -7,7 +7,9 @@
     "**/CVS": true,
     "**/.DS_Store": true,
     "**/node_modules": true,
-    "**/scripts/**/*.js": true,
+    "**/scripts/**/*.js": {
+      "when": "$(basename).ts"
+    },
     "**/scripts/**/*.js.map": true,
     "**/src/**/*.js": {
       "when": "$(basename).ts" 

scripts/tools/electron/postinstall.js

@@ -0,0 +1,17 @@
+// ALL CREDIT TO: Maxime GRIS https://github.com/maximegris
+// Allow angular using electron module (native node modules)
+const fs = require('fs');
+const f_angular = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
+
+fs.readFile(f_angular, 'utf8', function (err, data) {
+  if (err) {
+    return console.log(err);
+  }
+  var result = data.replace(/target: "electron-renderer",/g, '');
+  var result = result.replace(/target: "web",/g, '');
+  var result = result.replace(/return \{/g, 'return {target: "electron-renderer",');
+
+  fs.writeFile(f_angular, result, 'utf8', function (err) {
+    if (err) return console.log(err);
+  });
+});

scripts/tools/web/postinstall.js

@@ -0,0 +1,17 @@
+// ALL CREDIT TO: Maxime GRIS https://github.com/maximegris
+// Allow angular using electron module (native node modules)
+const fs = require('fs');
+const f_angular = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
+
+fs.readFile(f_angular, 'utf8', function (err, data) {
+  if (err) {
+    return console.log(err);
+  }
+  var result = data.replace(/target: "electron-renderer",/g, '');
+  var result = result.replace(/target: "web",/g, '');
+  var result = result.replace(/return \{/g, 'return {target: "web",');
+
+  fs.writeFile(f_angular, result, 'utf8', function (err) {
+    if (err) return console.log(err);
+  });
+});

src/app.electron/_files/src/index.ts

@@ -0,0 +1,116 @@
+import { app, BrowserWindow, ipcMain, screen } from 'electron';
+import * as path from 'path';
+import * as url from 'url';
+
+let serve;
+const args = process.argv.slice(1);
+serve = args.some(val => val === '--serve');
+
+let win: Electron.BrowserWindow = null;
+
+const getFromEnv = parseInt(process.env.ELECTRON_IS_DEV, 10) === 1;
+const isEnvSet = 'ELECTRON_IS_DEV' in process.env;
+const debugMode = isEnvSet
+  ? getFromEnv
+  : process.defaultApp ||
+    /node_modules[\\/]electron[\\/]/.test(process.execPath);
+
+/**
+ * Electron window settings
+ */
+const mainWindowSettings: Electron.BrowserWindowConstructorOptions = {
+  frame: true,
+  resizable: true,
+  focusable: true,
+  fullscreenable: true,
+  kiosk: false,
+  webPreferences: {
+    devTools: debugMode
+  }
+};
+
+/**
+ * Hooks for electron main process
+ */
+function initMainListener() {
+  ipcMain.on('ELECTRON_BRIDGE_HOST', (event, msg) => {
+    console.log('msg received', msg);
+    if (msg === 'ping') {
+      event.sender.send('ELECTRON_BRIDGE_CLIENT', 'pong');
+    }
+  });
+}
+
+/**
+ * Create main window presentation
+ */
+function createWindow() {
+  const sizes = screen.getPrimaryDisplay().workAreaSize;
+
+  if (debugMode) {
+    process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
+
+    mainWindowSettings.width = 800;
+    mainWindowSettings.height = 600;
+  } else {
+    mainWindowSettings.width = sizes.width;
+    mainWindowSettings.height = sizes.height;
+    mainWindowSettings.x = 0;
+    mainWindowSettings.y = 0;
+  }
+
+  win = new BrowserWindow(mainWindowSettings);
+
+  let launchPath;
+  if (serve) {
+    require('electron-reload')(__dirname, {
+      electron: require(`${__dirname}/../../../node_modules/electron`)
+    });
+    launchPath = 'http://localhost:4200';
+    win.loadURL(launchPath);
+  } else {
+    launchPath = url.format({
+      pathname: path.join(__dirname, 'index.html'),
+      protocol: 'file:',
+      slashes: true
+    });
+    win.loadURL(launchPath);
+  }
+
+  console.log('launched electron with:', launchPath);
+
+  win.on('closed', () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    win = null;
+  });
+
+  initMainListener();
+
+  if (debugMode) {
+    // Open the DevTools.
+    win.webContents.openDevTools();
+    // client.create(applicationRef);
+  }
+}
+
+try {
+  app.on('ready', createWindow);
+
+  app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+      app.quit();
+    }
+  });
+
+  app.on('activate', () => {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (win === null) {
+      createWindow();
+    }
+  });
+} catch (err) {
+
+}

src/app.electron/_files/src/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "electron-<%= utils.sanitize(name) %>",
+  "version": "1.0.0",
+  "description": "<%= utils.classify(name) %> description.",
+  "main": "index.js",
+  "author": {
+    "name": "Your name",
+    "email": "name@company.com"
+  },
+  "homepage": "https://nstudio.io/xplat",
+  "repository": {
+    "url": "https://github.com/nstudio/xplat"
+  },
+  "license": "MIT",
+  "build": {
+    "appId": "com.company.<%= utils.classify(name) %>",
+    "productName": "<%= utils.classify(name) %>",
+    "copyright": "Copyright © 2018-2019 <%= npmScope %>",
+    "asar": false,
+    "npmRebuild": false,
+    "directories": {
+      "buildResources": "icons",
+      "output": "../electron-<%= utils.sanitize(name) %>-packages"
+    },
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "icon": "icon.png"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "icon.ico"
+    },
+    "linux": {
+      "icon": "icon.png",
+      "target": [
+        "AppImage",
+        "deb",
+        "tar.gz"
+      ],
+      "synopsis": "<%= utils.classify(name) %>",
+      "category": "Development"
+    },
+    "nsis": {
+      "createDesktopShortcut": "always",
+      "installerIcon": "icon.ico",
+      "artifactName": "<%= utils.classify(name) %>-Setup-${version}.${ext}"
+    }
+  }
+}

src/app.electron/_files/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "target": "es5",
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "es2016",
+      "es2015",
+      "dom"
+    ]
+  },
+  "include": [
+    "src/index.ts"
+  ]
+}