Switch from electron-protocol-serve to file: URLs

.eslintrc.js

@@ -63,10 +63,29 @@ module.exports = {
         'ember/avoid-leaking-state-in-ember-objects': 'off',
       })
     },
-    // forge template files
+    // test runner
     {
       files: [
-        'forge/files/**/*.js'
+        'lib/test-runner.js'
+      ],
+      env: {
+        browser: false,
+        node: true
+      },
+      plugins: ['node'],
+      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
+        'node/no-missing-require': ['error', {
+          'allowModules': [
+            'ember-electron'
+          ],
+        }]
+      })
+    },
+    // Electon runtime files
+    {
+      files: [
+        'forge/files/**/*.js',
+        'lib/test-support/**/*.js'
       ],
       env: {
         browser: false,

blueprints/ember-electron/files/testem-electron.js

@@ -2,7 +2,7 @@ module.exports = {
   test_page: 'tests/index.html?hidepassed',
   disable_watching: true,
   launchers: {
-    Electron: require('ember-electron/lib/test-support/test-runner'),
+    Electron: require('ember-electron/lib/test-runner'),
   },
   launch_in_ci: [
     'Electron',

blueprints/ember-electron/index.js

@@ -7,9 +7,9 @@ const fs = require('fs');
 const readFile = promisify(fs.readFile);
 const writeFile = promisify(fs.writeFile);
 const YAWN = require('yawn-yaml/cjs');
-const SilentError = require('silent-error');
 const {
   upgradingUrl,
+  routingAndAssetLoadingUrl,
   ciUrl
 } = require('../../lib/utils/documentation-urls');
 
@@ -24,31 +24,62 @@ module.exports = class EmberElectronBlueprint extends Blueprint {
     return entityName;
   }
 
-  beforeInstall() {
-    if (fs.existsSync(electronProjectPath)) {
-      return Promise.reject(
-        new SilentError([
-          `Cannot create electron-forge project at './${electronProjectPath}'`,
-          `because a file or directory already exists there. Please remove/rename`,
-          `it and run the blueprint again: 'ember generate ember-electron'.`
-        ].join(' '))
-      );
-    }
-
+  async afterInstall() {
     if (fs.existsSync('ember-electron')) {
       this.ui.writeLine(chalk.yellow([
         `\n'ember-electron' directory detected -- this looks like an ember-electron`,
         `v2 project. Setting up an updated project will not be destructive, but you`,
         `should read the upgrading documentation at ${upgradingUrl}.\n`
       ].join(' ')));
     }
-  }
 
-  async afterInstall() {
+    await this.updateEnvironmentConfig();
     await this.updateTravisYml();
     await this.updateEslintIgnore();
     await this.updateEslintRc();
-    await this.createElectronProject();
+
+    if (!fs.existsSync(electronProjectPath)) {
+      await this.createElectronProject();
+    } else {
+      this.ui.writeLine(chalk.yellow([
+        `An electron-forge project already exists at './${electronProjectPath}'.`,
+        `If you're running the blueprint manually as part of an ember-electron`,
+        `upgrade, make sure to check for upgrade instructions relevant to your`,
+        `version upgrade at ${upgradingUrl}.\n`
+      ].join(' ')));
+    }
+  }
+
+  async updateEnvironmentConfig() {
+    this.ui.writeLine(chalk.green('Updating config/environment.js'));
+
+    let contents = (await readFile('config/environment.js')).toString();
+
+    const rootURLRegex = /(\srootURL\s*:)/;
+    if (rootURLRegex.test(contents)) {
+      contents = contents.replace(rootURLRegex, `$1 process.env.EMBER_CLI_ELECTRON ? '' :`);
+    } else {
+      this.ui.writeLine(chalk.yellow([
+        `\nUnable to update rootURL setting to`,
+        `\`process.env.EMBER_CLI_ELECTRON ? '' : <previous value>\`,`,
+        `which is needed for your Ember app to load assets under Electron.`,
+        `See ${routingAndAssetLoadingUrl} for more information.`
+      ].join(' ')));
+    }
+
+    const locationTypeRegex = /(\slocationType\s*:)/;
+    if (locationTypeRegex.test(contents)) {
+      contents = contents.replace(locationTypeRegex, `$1 process.env.EMBER_CLI_ELECTRON ? 'hash' :`);
+    } else {
+      this.ui.writeLine(chalk.yellow([
+        `\nUnable to update locationType setting to`,
+        `\`process.env.EMBER_CLI_ELECTRON ? 'hash' : <previous value>\`,`,
+        `which is needed for your Ember app's routing to work under Electron.`,
+        `See ${routingAndAssetLoadingUrl} for more information.`
+      ].join(' ')));
+    }
+
+    await writeFile('config/environment.js', contents);
   }
 
   async updateTravisYml() {

forge/files/src/handle-file-urls.js

@@ -0,0 +1,29 @@
+const { protocol } = require('electron');
+const { fileURLToPath } = require('url');
+const path = require('path');
+const fs = require('fs');
+const { promisify } = require('util');
+
+const access = promisify(fs.access);
+
+//
+// Patch asset loading -- Ember apps use absolute paths to reference their
+// assets, e.g. `<img src="/images/foo.jpg">`. When the current URL is a `file:`
+// URL, that ends up resolving to the absolute filesystem path `/images/foo.jpg`
+// rather than being relative to the root of the Ember app. So, we intercept
+// `file:` URL request and look to see if they point to an asset when
+// interpreted as being relative to the root of the Ember app. If so, we return
+// that path, and if not we leave them as-is, as their absolute path.
+//
+module.exports = function handleFileURLs(emberAppDir) {
+  protocol.interceptFileProtocol('file', async ({ url }, callback) => {
+    let urlPath = fileURLToPath(url);
+    let appPath = path.join(emberAppDir, urlPath);
+    try {
+      await access(appPath);
+      callback(appPath);
+    } catch (e) {
+      callback(urlPath);
+    }
+  });
+};

forge/files/src/index.js

@@ -1,32 +1,15 @@
 /* eslint-disable no-console */
-const { app, BrowserWindow, protocol } = require('electron');
-const { dirname, join, resolve } = require('path');
-const protocolServe = require('electron-protocol-serve');
-const isDev = require('electron-is-dev');
 const { default: installExtension, EMBER_INSPECTOR } = require('electron-devtools-installer');
+const { pathToFileURL } = require('url');
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const isDev = require('electron-is-dev');
+const handleFileUrls = require('./handle-file-urls');
 
-let mainWindow = null;
+const emberAppDir = path.resolve(__dirname, '..', 'ember-dist');
+const emberAppURL = pathToFileURL(path.join(emberAppDir, 'index.html')).toString();
 
-// Registering a protocol & schema to serve our Ember application
-if (typeof protocol.registerSchemesAsPrivileged === 'function') {
-  // Available in Electron >= 5
-  protocol.registerSchemesAsPrivileged([{
-    scheme: 'serve',
-    privileges: {
-      secure: true,
-      standard: true
-    }
-  }]);
-}
-else {
-  // For compatibility with Electron < 5
-  protocol.registerStandardSchemes(['serve'], { secure: true });
-}
-protocolServe({
-  cwd: join(__dirname || resolve(dirname('')), '..', 'ember-dist'),
-  app,
-  protocol,
-});
+let mainWindow = null;
 
 // Uncomment the lines below to enable Electron's crash reporter
 // For more information, see http://electron.atom.io/docs/api/crash-reporter/
@@ -43,13 +26,22 @@ app.on('window-all-closed', () => {
   }
 });
 
-app.on('ready', () => {
+app.on('ready', async () => {
   if (isDev) {
-    require('devtron').install();
-    installExtension(EMBER_INSPECTOR)
-      .catch((err) => console.log('An error occurred: ', err));
+    try {
+      require('devtron').install();
+    } catch (err) {
+      console.log('Failed to install Devtron: ', err);
+    }
+    try {
+      await installExtension(EMBER_INSPECTOR);
+    } catch (err) {
+      console.log('Failed to install Ember Inspector: ', err);
+    }
   }
 
+  await handleFileUrls(emberAppDir);
+
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
@@ -58,15 +50,13 @@ app.on('ready', () => {
   // If you want to open up dev tools programmatically, call
   // mainWindow.openDevTools();
 
-  const emberAppLocation = 'serve://dist';
-
-  // Load the ember application using our custom protocol/scheme
-  mainWindow.loadURL(emberAppLocation);
+  // Load the ember application
+  mainWindow.loadURL(emberAppURL);
 
   // If a loading operation goes wrong, we'll send Electron back to
   // Ember App entry point
   mainWindow.webContents.on('did-fail-load', () => {
-    mainWindow.loadURL(emberAppLocation);
+    mainWindow.loadURL(emberAppURL);
   });
 
   mainWindow.webContents.on('crashed', () => {

forge/files/tests/index.js

@@ -1,9 +1,30 @@
 const { default: installExtension, EMBER_INSPECTOR } = require('electron-devtools-installer');
+const path = require('path');
+const { app } = require('electron');
+const handleFileUrls = require('../src/handle-file-urls');
+const { setupTestem, openTestWindow } = require('ember-electron/lib/test-support');
 
-require('electron').app.on('ready', function onReady() {
-  require('devtron').install();
-  installExtension(EMBER_INSPECTOR)
-    .catch((err) => console.log('An error occurred: ', err));
+const emberAppDir = path.resolve(__dirname, '..', 'ember-test');
+
+app.on('ready', async function onReady() {
+  try {
+    require('devtron').install();
+  } catch (err) {
+    console.log('Failed to install Devtron: ', err);
+  }
+  try {
+    await installExtension(EMBER_INSPECTOR);
+  } catch (err) {
+    console.log('Failed to install Ember Inspector: ', err);
+  }
+
+  await handleFileUrls(emberAppDir);
+  setupTestem();
+  openTestWindow(emberAppDir);
 });
 
-require('ember-electron/lib/test-support/test-index');
+app.on('window-all-closed', function onWindowAllClosed() {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});

forge/template.js

@@ -68,7 +68,6 @@ class EmberElectronTemplates extends BaseTemplate {
     return [
       'electron-devtools-installer',
       'electron-is-dev',
-      'electron-protocol-serve'
     ];
   }
 

index.js

@@ -44,9 +44,20 @@ module.exports = {
       node = replace(node, {
         files: [ 'tests/index.html' ],
         pattern: {
-          match: /src="[^"]*testem\.js"/,
-          replacement: 'src="http://testemserver/testem.js"',
-        },
+          match: /(src|href)="([^"]+)"/g,
+          replacement(match, attr, value) {
+            if (value.endsWith('testem.js')) {
+              // Replace testem script source so our test main process code can
+              // recognize and redirect requests to the testem server
+              value = 'http://testemserver/testem.js';
+            } else if (!value.includes(':/')) {
+              // Since we're loading from the filesystem, asset URLs in
+              // tests/index.html need to be prepended with '../'
+              value = `../${value}`;
+            }
+            return `${attr}="${value}"`;
+          }
+        }
       });
     }
     return node;

lib/resources/shim-head.js

@@ -2,40 +2,6 @@
 ((win) => {
   win.ELECTRON = true;
 
-  // On linux the renderer process doesn't inherit the main process'
-  // environment, so we need to fall back to using the remote module.
-  let serveIndex;
-  // If nodeIntegration is disabled, this will throw and serveIndex will remain
-  // undefined, which is fine because we only need it to fix module search paths
-  // that aren't relevant if node integration is disabled.
-  try {
-    serveIndex = process.env.ELECTRON_PROTOCOL_SERVE_INDEX || require('electron').remote.process.env.ELECTRON_PROTOCOL_SERVE_INDEX;
-  } catch (e) {
-    // When nodeIntegration is false we expect process to be undefined. Don't swallow the exception if something else is wrong
-    if (e.message !== "process is not defined") {
-      throw e;
-    }
-  }
-
-  if (serveIndex && window.location.protocol !== 'file:') {
-    // Using electron-protocol-serve to load index.html via a 'serve:' URL
-    // prevents electron's renderer/init.js from setting the module search
-    // paths correctly. So this is basically a copy of that code, but using an
-    // environment variable set by electron-protocol-serve containing the
-    // filesystem path to index.html instead of window.location.
-    const path = require('path');
-    const Module = require('module');
-
-    global.__filename = path.normalize(serveIndex);
-    global.__dirname = path.dirname(serveIndex);
-
-    // Set module's filename so relative require can work as expected.
-    module.filename = global.__filename;
-
-    // Also search for module under the html file.
-    module.paths = module.paths.concat(Module._nodeModulePaths(global.__dirname));
-  }
-
   // Store electrons node environment injections for later usage
   win.moduleNode = win.module;
   win.processNode = win.process;