self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-02 12:47:41 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Laurent Cozic 2021-12-23 12:04:09 +01:00
parent e65d06fbf5
commit 9ca298f500
14 changed files with 52 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
joplin.code-workspace
View File

@ -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,

4
packages/app-desktop/.gitignore vendored
View File

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

27
packages/app-desktop/bridge.ts
View File

@ -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;
}

5
packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx
View File

@ -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',
},

2
packages/app-desktop/gui/EditFolderDialog/loadEmojiLib.js
View File

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

4
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@ -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,
});

7
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -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

2
packages/app-desktop/gui/note-viewer/index.html
View File

@ -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);

2
packages/app-desktop/gui/utils/loadScript.ts
View File

@ -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) {

10
packages/app-desktop/index.html
View File

@ -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="build/lib/react-datetime/css/react-datetime.css">
<link rel="stylesheet" href="build/lib/smalltalk/css/smalltalk.css">
<link rel="stylesheet" href="build/lib/roboto-fontface/css/roboto/roboto-fontface.css">
<link rel="stylesheet" href="build/lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="vendor/lib/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="vendor/lib/react-datetime/css/react-datetime.css">
<link rel="stylesheet" href="vendor/lib/smalltalk/css/smalltalk.css">
<link rel="stylesheet" href="vendor/lib/roboto-fontface/css/roboto/roboto-fontface.css">
<link rel="stylesheet" href="vendor/lib/codemirror/lib/codemirror.css">
<style>
.smalltalk {

5
packages/app-desktop/package.json
View File

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

4
packages/app-desktop/services/plugins/UserWebviewIndex.html
View File

@ -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="../../build/lib/roboto-fontface/css/roboto/roboto-fontface.css">
<link rel="stylesheet" href="../../vendor/lib/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="../../vendor/lib/roboto-fontface/css/roboto/roboto-fontface.css">
<style>
html {
overflow: hidden;

2
packages/app-desktop/services/plugins/plugin_index.js
View File

@ -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) => {

2
packages/app-desktop/tools/copyApplicationAssets.js
View File

@ -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',