chore: merge v2.3.0

.github/workflows/ci.yml

@@ -0,0 +1,64 @@
+# This is a basic workflow to help you get started with Actions
+name: 'CI'
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    branches:
+      - master
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [macOS-latest, ubuntu-latest, windows-latest]
+        node-version: [14.x, 15.x, 16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Cache node modules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm`
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Upgrade to the latest version of npm
+        run: npm install -g npm@latest
+      - name: Upgrade to the latest version of Angular CLI
+        run: npm install -g @angular/cli@latest
+      - name: Install dependencies
+        run: npm install
+      - name: Test Angular E2E
+        uses: GabrielBB/xvfb-action@v1
+        with:
+          run: npm run test:angular-e2e
+      - name: Test Electron E2E
+        uses: GabrielBB/xvfb-action@v1
+        with:
+          run: npm run test:electron-e2e
+      - name: Check lint
+        run: npm run lint
+      - name: Make app distributables
+        run: npm run make

.travis.yml

@@ -1,16 +0,0 @@
-language: node_js
-dist: xenial
-os:
-  - linux
-  - osx
-node_js:
-  - "14"
-addons:
-  chrome: stable
-services:
-  - xvfb
-install:
-  - npm install
-script:
-  - npm run test:electron-e2e
-  - npm run make

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.3.0](https://github.com/sourcygen/electron-angular-quick-start/compare/v2.0.1...v2.3.0) (2021-08-01)
+
+### Features
+
+- ci build/test/make (github workflows) ([351eb1a](https://github.com/sourcygen/electron-angular-quick-start/commit/351eb1a7f0bd78043d8590effe7482965e0574b1))
+
+### Bug Fixes
+
+- shared-lib not found ([99742e3](https://github.com/sourcygen/electron-angular-quick-start/commit/99742e3dc1779141c5c8f2ec573faf33c72dea84))
+- using chokidar instead of npm-watch (issue [#4](https://github.com/sourcygen/electron-angular-quick-start/issues/4)) ([2feedce](https://github.com/sourcygen/electron-angular-quick-start/commit/2feedcefc5a2125e701b460bbd3d644775572d47))
+
 ## [2.2.0](https://github.com/sourcygen/electron-angular-quick-start/compare/v2.0.1...v2.2.0) (2021-07-22)
 
 ### Bug Fixes

README.md

@@ -1,5 +1,5 @@
+<a href="https://github.com/sourcygen/electron-angular-quick-start/actions"><img src="https://github.com/sourcygen/electron-angular-quick-start/workflows/CI/badge.svg?branch=master" alt="CI Status"/></a>
 <a href="https://gitHub.com/sourcygen/electron-angular-quick-start/graphs/commit-activity"><img src="https://img.shields.io/badge/maintained-yes-brightgreen.svg" alt="Maintenance Status"/></a>
-<a href="https://travis-ci.org/sourcygen/electron-angular-quick-start"><img src="https://travis-ci.org/sourcygen/electron-angular-quick-start.svg?branch=master" alt="Build Status"/></a>
 <a href="https://github.com/sourcygen/electron-angular-quick-start/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="License MIT"></a>
 <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome"></a>
 <a href="https://twitter.com/share?text=Build%20cross%20platform%20desktop%20app%20with%20Electron%20and%20Angular%20%F0%9F%9A%80&url=https://github.com/sourcygen/electron-angular-quick-start"><img src="https://img.shields.io/twitter/url/https/github.com/sourcygen/electron-angular-quick-start.svg?style=social" alt="Tweet" align="right"></a>
@@ -10,13 +10,13 @@
 
 ## Overview
 
-Depending on your need, putting up [Electron](https://www.electronjs.org/ "Electron") and [Angular](https://angular.io/ "Angular") may require a lot of setup. Fortunately, this simple project will help you **go fast** and directly start building desktop apps.
+Depending on your need, putting up [Electron](https://www.electronjs.org/) and [Angular](https://angular.io/) may require a lot of setup. Fortunately, this simple project will help you **go fast** and directly start building desktop apps in [Typescript](https://www.typescriptlang.org/) with live reload.
 
 > Because building a desktop app with Electron and Angular shouldn't be difficult.
 
 ### Main features :
 
-- This project is based on last [Angular 12](https://angular.io/ "Angular") version with required dependencies for [Electron 13](https://www.electronjs.org/ "Electron").
+- This project is based on last [Angular 12](https://angular.io/) version with required dependencies for [Electron 13](https://www.electronjs.org/).
 - This project is also written in [Typescript 4](https://www.typescriptlang.org/) and includes test samples ([Jasmine](https://jasmine.github.io/) and [Spectron 15](https://www.electronjs.org/spectron)).
 - The app is runnable `on desktop` (with **live-reload** in `development mode`).
 - The app is also runnable `on browser` but **without Electron features**.
@@ -47,10 +47,23 @@ Depending on your need, putting up [Electron](https://www.electronjs.org/ "Elect
 
 ## Getting started
 
-To clone and run this repository, you'll need [Git](https://git-scm.com), [Node.js](https://nodejs.org/en/download/) and [Angular-CLI](https://angular.io/cli) installed on your computer. And then from your command line:
+To clone and run this repository, you'll need installed on your computer at least :
+
+- [Git](https://git-scm.com)
+- [Node 14](https://nodejs.org/en/download/)
+- [Npm 7](https://docs.npmjs.com/about-npm)
+- [Angular-CLI 12](https://angular.io/cli)
+
+Then from your command line:
 
 ```bash
-# First, clone this repository
+# Upgrade to the latest version of npm (if necessary)
+npm install -g npm@latest
+
+# Upgrade to the latest version of Angular CLI (if necessary)
+npm install -g @angular/cli@latest
+
+# Clone this repository
 git clone https://github.com/sourcygen/electron-angular-quick-start.git
 
 # Then go into the repository
@@ -75,6 +88,33 @@ npm start
 | `npm run make`              | Generate platform distributables (./out) |
 | `npm run clean`             | Delete generated outputs                 |
 
+### Adding dependencies
+
+This project architecture is based on [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces). This allows having different version of the same dependency depending on your workspace :
+
+- electron-app
+  `npm install --save <dependency>`
+- angular-app
+  `npm install --save <dependency> -w angular-app`
+- shared-lib
+  `npm install --save <dependency> -w shared-lib`
+
+### Customizing app icons
+
+```bash
+# Install the icon generator globally
+npm i -g electron-icon-maker
+
+# Run following command from anywhere you have your input file (1024px à least) to generate platforms icons
+electron-icon-maker --input=icon.png --output=./out
+```
+
+Rename and move files to match with next config
+
+- ./workspaces/electron-app/main/assets/icons/icon.png for Linux
+- ./workspaces/electron-app/main/assets/icons/icon.icns for MacOs
+- ./workspaces/electron-app/main/assets/icons/icon.ico for Windows
+
 ## Resources
 
 ### Electron

package.json

@@ -1,7 +1,7 @@
 {
-	"name": "electron-angular-quick-start",
-	"productName": "electron-angular-quick-start",
-	"version": "2.2.0",
+	"name": "electron-angular-app",
+	"productName": "Electron Angular App",
+	"version": "2.3.0",
 	"description": "An Electron and Angular Quick-starter",
 	"repository": "https://github.com/sourcygen/electron-angular-quick-start.git",
 	"author": "Sourcygen",
@@ -23,36 +23,26 @@
 		"workspaces/angular-app",
 		"workspaces/shared-lib"
 	],
-	"watch": {
-		"restart-electron-app": {
-			"patterns": [
-				"workspaces/electron-app",
-				"workspaces/shared-lib"
-			],
-			"extensions": "ts,tsx"
-		}
-	},
 	"scripts": {
 		"start": "npm-run-all -p start:shared-lib start:angular-app start:electron-app",
 		"start:shared-lib": "tsc -b workspaces/shared-lib -w",
-		"start:angular-app": "cd workspaces/angular-app && npm run start",
-		"start:electron-app": "wait-on http://localhost:4200 && npm-watch restart-electron-app",
-		"restart-electron-app": "electron-forge start",
+		"start:angular-app": "wait-on workspaces/shared-lib/.dist/index.d.ts && cd workspaces/angular-app && npm run start",
+		"start:electron-app": "node scripts/electron-forge-start-watch.js",
+		"start:electron-app:once": "wait-on http://localhost:4200 && electron-forge start",
 		"package": "npm run package:angular-app && npm run package:electron-app",
-		"package:angular-app": "cd workspaces/angular-app && npm run package",
-		"package:electron-app": "electron-forge package",
+		"package:shared-lib": "tsc -b workspaces/shared-lib",
+		"package:angular-app": "npm run package:shared-lib && cd workspaces/angular-app && npm run package",
+		"package:electron-app": "npm run package:shared-lib && electron-forge package",
 		"make": "npm run package:angular-app && electron-forge make",
 		"publish": "electron-forge publish",
-		"lint": "eslint --ext .ts .",
+		"lint": "npm run package:shared-lib && eslint --ext .ts .",
 		"test:e2e": "npm run test:angular-e2e && npm run test:electron-e2",
-		"test:angular-e2e": "npm-run-all -p -r start:angular-app start:angular-e2e",
+		"test:angular-e2e": "npm-run-all -p -r start start:angular-e2e",
 		"start:angular-e2e": "wait-on http://localhost:4200 && cd workspaces/angular-app && npm run cypress:run",
 		"test:electron-e2e": "npm run package && cross-env X_NODE_ENV=e2e-test node workspaces/electron-e2e/jasmine.js",
 		"clean": "shx rm -rf .webpack out node_modules workspaces/shared-lib/.dist workspaces/angular-app/node_modules workspaces/angular-app/.dist",
-		"version": "npx conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
 		"prepare": "husky install",
 		"postinstall": "husky install && shx rm -rf .git/hooks && shx ln -s ../.husky .git/hooks",
-		"release": "standard-version",
 		"release:minor": "standard-version --release-as minor",
 		"release:patch": "standard-version --release-as patch",
 		"release:major": "standard-version --release-as major"
@@ -60,7 +50,8 @@
 	"config": {
 		"forge": {
 			"packagerConfig": {
-				"name": "electron-angular",
+				"name": "Electron Angular App",
+				"executableName": "electron-angular-app",
 				"icon": "./workspaces/electron-app/main/assets/icons/icon"
 			},
 			"makers": [
@@ -73,7 +64,8 @@
 					"config": {}
 				},
 				{
-					"name": "@electron-forge/maker-squirrel"
+					"name": "@electron-forge/maker-squirrel",
+					"config": {}
 				}
 			],
 			"plugins": [
@@ -116,7 +108,7 @@
 		"@typescript-eslint/eslint-plugin": "^4.0.1",
 		"@typescript-eslint/parser": "^4.0.1",
 		"@vercel/webpack-asset-relocator-loader": "^1.6.0",
-		"conventional-changelog-cli": "^2.1.1",
+		"chokidar-cli": "^3.0.0",
 		"copy-webpack-plugin": "^9.0.1",
 		"cross-env": "^7.0.3",
 		"css-loader": "^5.0.0",
@@ -133,12 +125,12 @@
 		"lint-staged": "^11.0.1",
 		"node-loader": "^2.0.0",
 		"npm-run-all": "^4.1.5",
-		"npm-watch": "^0.10.0",
 		"prettier": "^2.3.2",
 		"shx": "^0.3.3",
 		"spectron": "^15.0.0",
 		"standard-version": "^9.3.1",
 		"style-loader": "^2.0.0",
+		"tree-kill": "^1.2.2",
 		"ts-loader": "^9.2.2",
 		"ts-node": "^10.1.0",
 		"typescript": "^4.3.5",

scripts/electron-forge-start-watch.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+const spawn = require('child_process').spawn;
+const chokidar = require('chokidar');
+const kill = require('tree-kill');
+const path = require('path');
+
+class ElectronForgeRunner {
+	constructor() {
+		this.__init__();
+	}
+
+	__init__ = () => {
+		this.args = process.argv;
+		this.command = this.args[2];
+		this.cwd = process.cwd();
+		this.watchPaths = [
+			path.join(this.cwd, '/workspaces/electron-app/**/*.ts'),
+			path.join(this.cwd, '/workspaces/shared-lib/.dist/**/*.ts'),
+		];
+		this.ignoredPaths = '**/node_modules/*';
+
+		this.startWatching();
+		this.reload();
+	};
+
+	reload = () => {
+		if (this.childProcess) kill(this.childProcess.pid);
+		this.childProcess = spawn('npm run start:electron-app:once', [], {
+			shell: true,
+			stdio: 'inherit',
+		});
+	};
+
+	startWatching = () => {
+		chokidar
+			.watch(this.watchPaths, {
+				ignored: this.ignoredPaths,
+				ignoreInitial: true,
+			})
+			.on('all', (event, path) => {
+				this.reload();
+			});
+	};
+}
+
+new ElectronForgeRunner();

workspaces/electron-app/main/assets/icons/README.md

@@ -1,14 +0,0 @@
-# Install the icon generator globally
-
-> npm i -g electron-icon-maker
-
-# Run following command from anywhere you have your input file to generate platforms icons
-
-> electron-icon-maker --input=icon.png --output=./out
-
-# Rename and move files to match with next config
-
-- ./workspaces/electron-app/main/assets/icons/icon.png for Linux
-- ./workspaces/electron-app/main/assets/icons/icon.icns for MacOs
-- ./workspaces/electron-app/main/assets/icons/icon.ico for Windows
-  x

workspaces/electron-app/renderer/preload.ts

@@ -31,5 +31,4 @@ if (process.env.X_NODE_ENV === 'e2e-test') {
 	contextBridge.exposeInMainWorld('api', windowApi);
 }
 
-console.log(typeof window);
 console.log('The preload script has been injected successfully.');

workspaces/electron-e2e/jasmine.js

@@ -4,7 +4,6 @@ const { SpecReporter } = require('jasmine-spec-reporter');
 const jasmine = new Jasmine();
 jasmine.loadConfig({
 	showColors: true,
-	defaultTimeoutInterval: 15000,
 	spec_dir: 'workspaces/electron-e2e',
 	spec_files: ['./**/*-spec.ts'],
 	helpers: ['./**/*-helper.ts'],

workspaces/electron-e2e/src/_hooks.ts

@@ -0,0 +1,32 @@
+import * as path from 'path';
+import { Application } from 'spectron';
+
+export async function startApp(): Promise<Application> {
+	// Path to local electron binary
+	let electronPath = path.join(
+		__dirname,
+		'../../../node_modules/.bin/electron'
+	);
+	if (process.platform === 'win32') {
+		electronPath += '.cmd';
+	}
+
+	// Init local packaged app
+	const app = new Application({
+		path: electronPath,
+		args: ['.webpack/main/index.js'],
+	});
+
+	// Init local app and wait until window loaded
+	await app.start();
+	await app.client.waitUntilWindowLoaded();
+	return app;
+}
+
+export async function stopApp(app: Application): Promise<void> {
+	if (app && app.isRunning()) {
+		// Wait 1 second and then stop local app
+		await new Promise((resolve) => setTimeout(resolve, 1000));
+		await app.stop();
+	}
+}

workspaces/electron-e2e/src/app.e2e-spec.ts

@@ -1,25 +1,15 @@
-import * as path from 'path';
 import { Application } from 'spectron';
+import { startApp, stopApp } from './_hooks';
 
 describe('A simple test to verify a visible window is opened with a title', () => {
-	// Init local app
-	const app = new Application({
-		path: path.join(__dirname, '../../../node_modules/.bin/electron'),
-		args: [path.join(__dirname, '../../../.webpack/main/index.js')],
-	});
+	let app: Application;
 
 	beforeAll(async () => {
-		// Init local app and wait until window loaded
-		await app.start();
-		await app.client.waitUntilWindowLoaded();
+		app = await startApp();
 	});
 
 	afterAll(async () => {
-		if (app && app.isRunning()) {
-			// Wait 1 second and then stop local app
-			await new Promise((resolve) => setTimeout(resolve, 1000));
-			await app.stop();
-		}
+		await stopApp(app);
 	});
 
 	it('shows an initial window', async () => {

workspaces/shared-lib/.dist/apis/window-api-consts.d.ts

@@ -1,10 +0,0 @@
-export declare class WindowApiConst {
-	/** Channel used by the renderer process to send data to the main process */
-	static readonly MULTIPLES_INPUT = 'getMultiplesInput';
-	/** Channel used by the renderer process to receive data from the main process */
-	static readonly MULTIPLES_OUTPUT = 'getMultiplesOutput';
-	/** Whitelist of the safe channels to use when sending data to the main process */
-	static readonly SENDING_SAFE_CHANNELS: string[];
-	/** Whitelist of the safe channels to use when receiving data from the main process */
-	static readonly RECEIVING_SAFE_CHANNELS: string[];
-}

workspaces/shared-lib/.dist/apis/window-api-consts.js

@@ -1,10 +0,0 @@
-export class WindowApiConst {}
-/** Channel used by the renderer process to send data to the main process */
-WindowApiConst.MULTIPLES_INPUT = 'getMultiplesInput';
-/** Channel used by the renderer process to receive data from the main process */
-WindowApiConst.MULTIPLES_OUTPUT = 'getMultiplesOutput';
-/** Whitelist of the safe channels to use when sending data to the main process */
-WindowApiConst.SENDING_SAFE_CHANNELS = [WindowApiConst.MULTIPLES_INPUT];
-/** Whitelist of the safe channels to use when receiving data from the main process */
-WindowApiConst.RECEIVING_SAFE_CHANNELS = [WindowApiConst.MULTIPLES_OUTPUT];
-//# sourceMappingURL=window-api-consts.js.map

workspaces/shared-lib/.dist/apis/window-api-consts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"window-api-consts.js","sourceRoot":"","sources":["../../apis/window-api-consts.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,cAAc;;AACzB,4EAA4E;AACrD,8BAAe,GAAG,mBAAmB,CAAC;AAE7D,iFAAiF;AAC1D,+BAAgB,GAAG,oBAAoB,CAAC;AAE/D,kFAAkF;AAC3D,oCAAqB,GAAG;IAC7C,cAAc,CAAC,eAAe;CAC/B,CAAC;AAEF,sFAAsF;AAC/D,sCAAuB,GAAG;IAC/C,cAAc,CAAC,gBAAgB;CAChC,CAAC"}

workspaces/shared-lib/.dist/apis/window-api.d.ts

@@ -1,14 +0,0 @@
-export interface WindowApi {
-	/**
-	 * This method is used by the renderer process to receive data from the main process
-	 * @param channel used by the renderer to receive data and by the main to send them
-	 * @param func the callback function to execute when data are available
-	 */
-	receive<Out>(channel: string, func: (output: Out) => void): void;
-	/**
-	 * This method is used by the renderer process to send data to the main process
-	 * @param channel used by the renderer to send data and by the main to receive them
-	 * @param data the data sent by the renderer process to the main process
-	 */
-	send<In>(channel: string, input: In): void;
-}

workspaces/shared-lib/.dist/apis/window-api.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=window-api.js.map

workspaces/shared-lib/.dist/apis/window-api.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"window-api.js","sourceRoot":"","sources":["../../apis/window-api.ts"],"names":[],"mappings":""}

workspaces/shared-lib/.dist/index.d.ts

@@ -1,9 +0,0 @@
-import { WindowApi } from './apis/window-api';
-export * from './apis/window-api';
-export * from './apis/window-api-consts';
-export * from './models/config/app-config';
-declare global {
-	interface Window {
-		api: WindowApi;
-	}
-}

workspaces/shared-lib/.dist/index.js

@@ -1,4 +0,0 @@
-export * from './apis/window-api';
-export * from './apis/window-api-consts';
-export * from './models/config/app-config';
-//# sourceMappingURL=index.js.map

workspaces/shared-lib/.dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}

workspaces/shared-lib/.dist/models/config/app-config.d.ts

@@ -1,18 +0,0 @@
-export interface AppConfig {
-	/** The configuration identifier */
-	configId: string;
-	/** The main logger output file path */
-	mainLogFile: string;
-	/** The main logger output level */
-	mainLogLevel: string;
-	/** Tells if we should try to load app icon */
-	isIconAvailable: boolean;
-	/** Tells if `nodeIntegration` webPreference is enabled */
-	isNodeIntegration: boolean;
-	/** Tells if  `contextIsolation` and `worldSafeExecuteJavaScript` webPreferences are enabled */
-	isContextIsolation: boolean;
-	/** Tells if `isEnableRemoteModule` webPreference is enabled */
-	isEnableRemoteModule: boolean;
-	/** Tells if we should open dev tools */
-	isOpenDevTools: boolean;
-}

workspaces/shared-lib/.dist/models/config/app-config.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=app-config.js.map

workspaces/shared-lib/.dist/models/config/app-config.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-config.js","sourceRoot":"","sources":["../../../models/config/app-config.ts"],"names":[],"mappings":""}

workspaces/shared-lib/.gitignore

@@ -0,0 +1,2 @@
+# Generated JS files
+/.dist