Tools: Fixes #5902: Correctly load external resources when bundling desktop app

joplin.code-workspace

@@ -248,7 +248,9 @@
 			"packages/app-desktop/**/node_modules/": true,
 			"packages/app-desktop/**/packageInfo.js": true,
 			"packages/app-desktop/**/pluginAssets/": true,
-			"packages/app-desktop/build/": true,
+			"packages/app-desktop/build/icons/": true,
+			"packages/app-desktop/build/images/": true,
+			"packages/app-desktop/vendor/lib/": true,
 			"packages/app-desktop/dist/": true,
 			"packages/app-desktop/fonts/": true,
 			"packages/app-desktop/gui/note-viewer/highlight/styles/": true,

packages/app-desktop/.gitignore

@@ -11,4 +11,6 @@ gui/NoteEditor/NoteBody/TinyMCE/supportedLocales.js
 runForSharingCommands-*
 runForTestingCommands-*
 style.min.css
-build/lib/
+build/lib/
+vendor/
+!vendor/loadEmojiLib.js

packages/app-desktop/bridge.ts

@@ -34,6 +34,29 @@ export class Bridge {
 		return !this.electronApp().electronApp().isPackaged;
 	}
 
+	// The build directory contains additional external files that are going to
+	// be packaged by Electron Builder. This is for files that need to be
+	// accessed outside of the Electron app (for example the application icon).
+	//
+	// Any static file that's accessed from within the app such as CSS or fonts
+	// should go in /vendor.
+	//
+	// The build folder location is dynamic, depending on whether we're running
+	// in dev or prod, which makes it hard to access it from static files (for
+	// example from plain HTML files that load CSS or JS files). For this reason
+	// it should be avoided as much as possible.
+	public buildDir() {
+		return this.electronApp().buildDir();
+	}
+
+	// The vendor directory and its content is dynamically created from other
+	// dir (usually by pulling files from node_modules). It can also be accessed
+	// using a relative path such as "../../vendor/lib/file.js" because it will
+	// be at the same location in both prod and dev mode (unlike the build dir).
+	public vendorDir() {
+		return `${__dirname}/vendor`;
+	}
+
 	env() {
 		return this.electronWrapper_.env();
 	}
@@ -223,10 +246,6 @@ export class Bridge {
 		return require('electron').shell.openPath(fullPath);
 	}
 
-	buildDir() {
-		return this.electronApp().buildDir();
-	}
-
 	screen() {
 		return require('electron').screen;
 	}

packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx

@@ -4,6 +4,7 @@ import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffe
 import { loadScript } from '../utils/loadScript';
 import Button from '../Button/Button';
 import { FolderIcon } from '@joplin/lib/services/database/types';
+import bridge from '../../services/bridge';
 
 export interface ChangeEvent {
 	value: FolderIcon;
@@ -29,7 +30,7 @@ export const IconSelector = (props: Props) => {
 
 			await loadScript({
 				id: 'emoji-button-lib',
-				src: 'build/lib/@joeattardi/emoji-button/dist/index.js',
+				src: `${bridge().vendorDir()}/lib/@joeattardi/emoji-button/dist/index.js`,
 				attrs: {
 					type: 'module',
 				},
@@ -39,7 +40,7 @@ export const IconSelector = (props: Props) => {
 
 			await loadScript({
 				id: 'emoji-button-lib-loader',
-				src: 'gui/EditFolderDialog/loadEmojiLib.js',
+				src: `${bridge().vendorDir()}/loadEmojiLib.js`,
 				attrs: {
 					type: 'module',
 				},

packages/app-desktop/gui/EditFolderDialog/loadEmojiLib.js

@@ -1,2 +0,0 @@
-import { EmojiButton } from '../../build/lib/@joeattardi/emoji-button/dist/index.js';
-window.EmojiButton = EmojiButton;

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -336,7 +336,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 		async function loadScripts() {
 			const scriptsToLoad: {src: string; id: string; loaded: boolean}[] = [
 				{
-					src: 'build/lib/codemirror/addon/dialog/dialog.css',
+					src: `${bridge().vendorDir()}/lib/codemirror/addon/dialog/dialog.css`,
 					id: 'codemirrorDialogStyle',
 					loaded: false,
 				},
@@ -351,7 +351,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				if (theme.indexOf('solarized') >= 0) theme = 'solarized';
 
 				scriptsToLoad.push({
-					src: `build/lib/codemirror/theme/${theme}.css`,
+					src: `${bridge().vendorDir()}/lib/codemirror/theme/${theme}.css`,
 					id: `codemirrorTheme${theme}`,
 					loaded: false,
 				});

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -23,6 +23,7 @@ import openEditDialog from './utils/openEditDialog';
 import { MarkupToHtmlOptions } from '../../utils/useMarkupToHtml';
 import { themeStyle } from '@joplin/lib/theme';
 import { loadScript } from '../../../utils/loadScript';
+import bridge from '../../../../services/bridge';
 const { clipboard } = require('electron');
 const supportedLocales = require('./supportedLocales');
 
@@ -320,7 +321,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		async function loadScripts() {
 			const scriptsToLoad: any[] = [
 				{
-					src: 'build/lib/tinymce/tinymce.min.js',
+					src: `${bridge().vendorDir()}/lib/tinymce/tinymce.min.js`,
 					id: 'tinyMceScript',
 					loaded: false,
 				},
@@ -571,7 +572,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				statusbar: false,
 				target_list: false,
 				table_resize_bars: false,
-				language_url: ['en_US', 'en_GB'].includes(language) ? undefined : `build/lib/tinymce/langs/${language}`,
+				language_url: ['en_US', 'en_GB'].includes(language) ? undefined : `${bridge().vendorDir()}/lib/tinymce/langs/${language}`,
 				toolbar: toolbar.join(' '),
 				localization_function: _,
 				contextmenu: false,
@@ -708,7 +709,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		}
 
 		const cssFiles = [
-			'build/lib/@fortawesome/fontawesome-free/css/all.min.css',
+			`${bridge().vendorDir()}/lib/@fortawesome/fontawesome-free/css/all.min.css`,
 			`gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`,
 		].concat(
 			pluginAssets

packages/app-desktop/gui/note-viewer/index.html

@@ -430,7 +430,7 @@
 					setMarkers(markLoader_.whenDone.keywords, markLoader_.whenDone.options);
 				};
 
-				script.src = '../../build/lib/mark.js/dist/mark.min.js';
+				script.src = '../../vendor/lib/mark.js/dist/mark.min.js';
 				document.getElementById('joplin-container-markScriptContainer').appendChild(script);
 			} else if (markLoader_.state === 'ready') {
 				setMarkers(keywords, options);

packages/app-desktop/gui/utils/loadScript.ts

@@ -10,6 +10,8 @@ export interface Script {
 
 export const loadScript = async (script: Script) => {
 	return new Promise((resolve) => {
+		console.info('Loading script:', script);
+
 		let element: any = document.getElementById(script.id);
 
 		if (element) {

packages/app-desktop/index.html

@@ -10,11 +10,11 @@
 		<title>Joplin</title>
 		<link rel="stylesheet" href="style.min.css">
 		<link rel="stylesheet" href="style/icons/style.css">
-		<link rel="stylesheet" href="build/lib/@fortawesome/fontawesome-free/css/all.min.css">
+		<link rel="stylesheet" href="vendor/lib/@fortawesome/fontawesome-free/css/all.min.css">
-		<link rel="stylesheet" href="build/lib/react-datetime/css/react-datetime.css">
+		<link rel="stylesheet" href="vendor/lib/react-datetime/css/react-datetime.css">
-		<link rel="stylesheet" href="build/lib/smalltalk/css/smalltalk.css">
+		<link rel="stylesheet" href="vendor/lib/smalltalk/css/smalltalk.css">
-		<link rel="stylesheet" href="build/lib/roboto-fontface/css/roboto/roboto-fontface.css">
+		<link rel="stylesheet" href="vendor/lib/roboto-fontface/css/roboto/roboto-fontface.css">
-		<link rel="stylesheet" href="build/lib/codemirror/lib/codemirror.css">
+		<link rel="stylesheet" href="vendor/lib/codemirror/lib/codemirror.css">
 
 		<style>
 			.smalltalk {

packages/app-desktop/package.json

@@ -30,9 +30,8 @@
     "npmRebuild": false,
     "afterSign": "./tools/notarizeMacApp.js",
     "extraResources": [
-      "build/icons/*",
+      "build/icons/**",
-      "build/images/*",
+      "build/images/**"
-      "build/lib/*"
     ],
     "afterAllArtifactBuild": "./generateSha512.js",
     "asar": true,

packages/app-desktop/services/plugins/UserWebviewIndex.html

@@ -4,8 +4,8 @@
 	<meta charset="UTF-8">
 	<script src="UserWebviewIndex.js"></script>
 	<link rel="stylesheet" href="../../style/icons/style.css">
-	<link rel="stylesheet" href="../../build/lib/@fortawesome/fontawesome-free/css/all.min.css">
+	<link rel="stylesheet" href="../../vendor/lib/@fortawesome/fontawesome-free/css/all.min.css">
-	<link rel="stylesheet" href="../../build/lib/roboto-fontface/css/roboto/roboto-fontface.css">
+	<link rel="stylesheet" href="../../vendor/lib/roboto-fontface/css/roboto/roboto-fontface.css">
 	<style>
 		html {
 			overflow: hidden;

packages/app-desktop/services/plugins/plugin_index.js

@@ -1,6 +1,6 @@
 (function(globalObject) {
 	// TODO: Not sure if that will work once packaged in Electron
-	const sandboxProxy = require('../../build/lib/@joplin/lib/services/plugins/sandboxProxy.js');
+	const sandboxProxy = require('../../vendor/lib/@joplin/lib/services/plugins/sandboxProxy.js');
 	const ipcRenderer = require('electron').ipcRenderer;
 
 	const ipcRendererSend = (message, args) => {

packages/app-desktop/tools/copyApplicationAssets.js

@@ -7,7 +7,7 @@ const nodeModulesDir = resolve(__dirname, '../node_modules');
 
 async function main() {
 	const langSourceDir = resolve(__dirname, '../../../Assets/TinyMCE/langs');
-	const buildLibDir = resolve(__dirname, '../build/lib');
+	const buildLibDir = resolve(__dirname, '../vendor/lib');
 
 	const dirs = [
 		'tinymce',