Work on production version and structure

- this version can build and run production version
- code mirror and katex load asynchronously
- worked on themes, better solution

Author: Mick2nd

package.json

@@ -2,7 +2,7 @@
   "name": "joplin-plugin-katex-input-helper",
   "version": "2.0.1",
   "scripts": {
-    "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && npm run build-assets && npm run build-docs && webpack --env joplin-plugin-config=createArchive",
+    "dist": "webpack --env joplin-plugin-config=buildMain && webpack --env joplin-plugin-config=buildExtraScripts && npm run build-assets-prod && npm run build-docs && webpack --env joplin-plugin-config=createArchive",
     "prepare": "npm run dist",
     "updateVersion": "webpack --env joplin-plugin-config=updateVersion",
     "update": "npm install -g generator-joplin && yo joplin --node-package-manager npm --update --force",

src/assets/js/bootLoader.js

@@ -1,12 +1,13 @@
 
+/*	Could not bring asynchronous version of easyui to work
+*/
 import jquery from './jquery-plugin/jquery.min';
 import './jquery-easyui/jquery.easyui.min';
 import './jquery-easyui/datagrid-dnd';
 import './jquery-easyui/datagrid-filter';
 import './jquery-easyui/datagrid-cellediting';
-import katex from 'katex/dist/katex';
-import 'katex/dist/contrib/mhchem';
-import CodeMirror from './codemirror/lib/codemirror';
+
+const CodeMirror = (await import('./codemirror/lib/codemirror')).default;
 
 import { Observable } from './patterns/observable';
 import { Localizer } from './localization';
@@ -28,6 +29,7 @@ export class BootLoader {
 
 	baseLocation = null;
 	vme = null;
+	katex = null;
 
 	/**
 	 * @abstract Constructor.
@@ -114,6 +116,10 @@ export class BootLoader {
 	 * @async implements the Promise contract
 	 */
 	async init1() {
+		
+		this.katex = await import('katex/dist/katex');
+		await import('katex/dist/contrib/mhchem');
+		
 		var counter = 20;
 		while (!this.presenceCheck(counter) && --counter >= 0) {
 			await this.setTimeoutAsync(100);
@@ -133,19 +139,26 @@ export class BootLoader {
 	 */
 	presenceCheck(cycle) {
 		var lastChecked = 'Test';
+		
+		/**
+		 * Checks the classname. Changed to accomodate the minification.
+		 */
 		function checkTypeByName(type, name, readableName = name) {
 			lastChecked = readableName;
-			if (type === undefined || type === null || typeof type === 'undefined' || !type.prototype) {
+			if (type === undefined || type === null || (typeof type) === 'undefined' || !type.prototype) {
 				console.warn(`Undefined type : ${readableName}`);
 				return false;
 			}
 			var detectedName = type.prototype["constructor"]["name"];
 			var equal = (detectedName === name);
 			if (!equal) {
-				console.warn(`Type check failed : ${detectedName} : ${readableName}`);
+				//console.warn(`Type check failed : ${detectedName} : ${readableName}`);
 			}
-			return equal;
+			return true;								// returning test result can lead to problems with minimized versions of code
 		}
+		/**
+		 * Checks some type of an object like 'object' or 'function'
+		 */
 		function checkOther(type, name, readableName) {
 			lastChecked = readableName;
 			var equal = type === name;
@@ -154,10 +167,14 @@ export class BootLoader {
 			}
 			return equal;
 		}
+		/**
+		 * Checks if katex can execute chemical formula.
+		 * Deactivated, because not reliable.
+		 */
 		function mhchemCheck() {
 			try {
 				lastChecked = "Mhchem";
-				katex.renderToString("\\ce{SO4^2- + Ba^2+ -> BaSO4 v} ", { throwOnError: true });
+				this.katex.renderToString("\\ce{SO4^2- + Ba^2+ -> BaSO4 v} ", { throwOnError: true });
 				return true;
 			} catch(e) {
 				console.warn(`Presence check failed : Mhchem`);
@@ -166,17 +183,17 @@ export class BootLoader {
 		}
 
 		var allLoaded = (
-			// false &&
 			checkOther(typeof $, 'function', 'jquery') &&
 			checkOther(typeof $.messager, 'object', 'easyui') &&
 			checkOther(typeof $.fn.datagrid, 'function', 'datagrid') &&
 			checkOther(typeof $.fn.datagrid.defaults, 'object', 'datagrid') &&
 			checkOther(typeof $.fn.datagrid.defaults.defaultFilterOptions, 'object', 'datagrid-filter') &&
-			// can we independantly check dnd and cellediting?
-			checkOther(typeof katex, 'object', 'Katex') &&
-			checkOther(typeof katex.renderToString, 'function', 'Katex') &&
-			mhchemCheck() &&
-			//checkOther(typeof ($.fn.ColorPicker), 'function', 'ColorPicker') &&
+			// Can we independantly check dnd and cellediting?
+			checkOther(typeof this.katex, 'object', 'Katex') &&
+			checkOther(typeof this.katex.renderToString, 'function', 'Katex') &&
+			// Can we do this check?
+			//mhchemCheck() &&
+			
 			checkTypeByName(CodeMirror, 'CodeMirror', 'CodeMirror') &&
 
 			checkTypeByName(Observable, 'Observable') &&
@@ -189,6 +206,7 @@ export class BootLoader {
 			checkTypeByName(CategoriesTree, 'CategoriesTree') &&
 			checkTypeByName(DynamicPanel, 'DynamicPanel') &&
 			checkTypeByName(KatexInputHelper, 'KatexInputHelper'));
+		
 		if (! allLoaded && cycle <= 0) {
 			throw Error(`${lastChecked} not loaded`);
 		}

src/assets/js/dialog.js

@@ -1,8 +1,9 @@
 import './dialog.css' assert { type: 'css' };
 
+const CodeMirror = (await import('./codemirror/lib/codemirror')).default;
+await import('./codemirror/mode/stex/stex');						// manual recommendation
+
 import { VKI_init } from './keyboard/keyboard';
-import CodeMirror from './codemirror/lib/codemirror';
-import './codemirror/mode/stex/stex';								// manual recommendation
 import { ParametersProxy } from "./parameters";
 import { Localizer } from './localization';
 import { Themes } from './themes';
@@ -1441,7 +1442,7 @@ export class KatexInputHelper {
 	 * This method is only called once in constructor.
 	 */
 	setBaseLocation() {
-		var bundlePath = $("script[src]")
+		var bundlePath = $("script[src$='main.js']")
 			.last()
 			.attr("src")
 			.split('/')

src/assets/js/math.js

@@ -1,6 +1,6 @@
-import katex from 'katex/dist/katex';
 import { Messager } from './helpers';
-
+const katex = await import('katex/dist/katex');
+await import('katex/dist/contrib/mhchem');
 
 /**
  * Class responsible for Math Formula handling.

src/assets/js/themes.js

@@ -9,6 +9,7 @@ export class Themes extends Observable {
 	dir = "";
 	cssActive = false;
 	activeTheme = "";
+	supportedThemes = [ 'aguas', 'gray', 'black', 'bootstrap', 'metro' ];
 
 	/**
 	 * @abstract Constructor.
@@ -17,19 +18,6 @@ export class Themes extends Observable {
 		super();
 	}
 
-	/**
-	 * @abstract Appends attributes of one or more elements to another. 
-	 */
-	universalLoad(where, what) {
-		for (var entry of what) {
-			$(where)
-			.append(
-				$(entry.element)
-				.attr(entry.attributes)
-			);
-		}
-	}
-	
 	/**
 	 * @abstract Initializes the theme choice.
 	 * 
@@ -66,39 +54,25 @@ export class Themes extends Observable {
 
 		this.activeTheme = activeTheme;
 		var colorType = '';
-		var opts = { with: { type: 'css' } };
-		this.disableThemeLinks();
 
-		// TRYING alternative way
-		// WORKS and loads all present themes!!
-		var mainTheme = activeTheme;
-		if (activeTheme == 'aguas') { mainTheme = 'default'; }
 		if (activeTheme == 'black') { colorType = 'black'; }
-		await import(`./jquery-easyui/themes/${mainTheme}/easyui.css`, opts);
-		await import(`./jquery-easyui-MathEditorExtend/themes/${activeTheme}/easyui.css`, opts);
 
-		this.enableThemeLinks(activeTheme);
-		this.notify(activeTheme, this.dir, colorType);
-	}
-	
-	/**
-	 * @abstract Disables link tags to the theme resources.
-	 * 
-	 * The hope was this could enforce a new load of themes every time one selects any.
-	 * Yes, but it must be combined with *enableThemeLinks*.
-	 */
-	disableThemeLinks() {
-		$('link[href$="easyui_css.styles.css"]').attr('disabled', true);
-	}
-	
-	/**
-	 * @abstract Enables css link tags again after disabling them.
-	 */
-	enableThemeLinks(theme) {
-		$(`link[href$="${theme}_easyui_css.styles.css"]`).removeAttr('disabled');
-		if (theme == 'aguas') {
-			$(`link[href$="default_easyui_css.styles.css"]`).removeAttr('disabled'); 	// ?
+		for (const theme of this.supportedThemes) {
+			if (theme === 'aguas') { continue; }
+			
+			/*
+			if (theme == activeTheme) {
+				$(`#${theme}`).removeAttr('disabled');
+				$(`#${theme}-extend`).removeAttr('disabled');
+			} else {
+				$(`#${theme}`).attr('disabled', true);
+				$(`#${theme}-extend`).attr('disabled', true);
+			}
+			*/
+			$(`#${theme}, #${theme}-extend`).attr('disabled', theme !== activeTheme);
 		}
+		
+		this.notify(activeTheme, this.dir, colorType);
 	}
 
 	/**
@@ -121,8 +95,21 @@ export class Themes extends Observable {
 		.attr('id', 'RTLstyle')
 		.attr('disabled', true);
 
-		this.setRTLstyle(dir);
+		for (const theme of this.supportedThemes) {
+			if (theme === 'aguas') { continue; }
+				
+			await import(`./jquery-easyui/themes/${theme}/easyui.css`, opts);
+			$('link').last()
+			.attr('id', theme);
+
+			await import(`./jquery-easyui-MathEditorExtend/themes/${theme}/easyui.css`, opts);
+			$('link').last()
+			.attr('id', `${theme}-extend`);
+		}
+		
+		this.activateStyle(activeTheme);
 		this.cssActive = true;
+		this.setRTLstyle(dir);
 	}
 
 	/**
@@ -139,12 +126,14 @@ export class Themes extends Observable {
 		this.dir = dir;
 		if (this.cssActive) {
 			console.info(`Html Dir is: ${dir}`);
-			var disabled = document.getElementById("RTLstyle").disabled;
-			var newDisabled = dir !== 'rtl';										// suppress unnecessary changes => measure did not help
-			if (newDisabled != disabled) {
-				document.getElementById("RTLstyle").disabled = newDisabled;
-				console.info(`RTL style set to: ${newDisabled}`);
+			/*
+			if (dir === 'rtl') {
+				$("#RTLstyle").removeAttr('disabled');
+			} else {
+				$("#RTLstyle").attr('disabled', true);
 			}
+			*/		
+			$("#RTLstyle").attr('disabled', dir !== 'rtl');
 		}
 	}
 }

webpack.assets.config.js

@@ -18,7 +18,7 @@ export default (env) => {
 		    	new CssMinimizerPlugin(),
 			],
 			minimize: true,
-			/*
+			/**/
 			splitChunks: {
 				chunks: 'async',
 				minSize: 20000,
@@ -28,31 +28,34 @@ export default (env) => {
 				maxInitialRequests: 30,
 				enforceSizeThreshold: 50000,
 				cacheGroups: {
+					/*
 					commons: {
 						name: 'commons',
 						chunks: 'async',
 						minChunks: 2,
-					},
+					},*/
 					vendors: {
 						test: /[\\/]node_modules[\\/]/,
 						priority: -10,
 				  		reuseExistingChunk: true,
-						filename: 'js/vendors/[name].js',			// no action
+						filename: 'js/vendors/[name].js',
 						chunks: 'async',
 					},
+					// ACTION: API only copied, generates extra entry in index.html
 					easyui: {
 						test: /src[\\/]assets[\\/]js[\\/]jquery-easyui/,
 						priority: -15,
 						filename: 'js/easyui/[name].js',			// no action
-						chunks: 'all',
+						chunks: 'async',
 					},
+					/*
 					default: {
 						minChunks: 2,
 				  		priority: -20,
 				  		reuseExistingChunk: true,
-					},
+					},*/
 				},
-			}*/
+			}
 		},
 		cache: false,
 		context: path.resolve(path.dirname('.'), '.'),
@@ -64,6 +67,7 @@ export default (env) => {
 		},
 		plugins: [
 
+			//new webpack.optimize.ModuleConcatenationPlugin(),
 			new TerserPlugin(),
 			new MiniCssExtractPlugin({ 
 				filename: '[name].css',

webpack.config.js

@@ -206,7 +206,7 @@ const pluginConfig = { ...baseConfig, entry: './src/index.ts',
 		new CopyPlugin({
 			patterns: [
 				{
-					from: '**/*',
+					from: '*',
 					context: path.resolve(__dirname, 'src'),
 					to: path.resolve(__dirname, 'dist'),
 					globOptions: {
@@ -215,6 +215,7 @@ const pluginConfig = { ...baseConfig, entry: './src/index.ts',
 							// already copied into /dist so we don't copy them.
 							'**/*.ts',
 							'**/*.tsx',
+							'assets/**/*'
 						],
 					},
 				},