use eval, fix highlighting error

Author: mProjectsCode

.github/FUNDING.yml

@@ -1 +1 @@
-github: ["mProjectsCode"]
+github: ['mProjectsCode']

jsEngine/engine/ExecutionStatsComponent.svelte

@@ -4,8 +4,16 @@
 
 	export let execution: JsExecution;
 	let messages = execution.getMessages();
-	let prism = window.Prism;
-	$: highlightCode = prism.highlight(execution.code, prism.languages.javascript, 'javascript');
+
+	function highlightCode(code: string): string {
+		const prism = window.Prism;
+		try {
+			return prism.highlight(code, prism.languages.javascript, 'javascript');
+		} catch (e) {
+			console.warn('js-engine | failed to highlight code', e);
+			return code;
+		}
+	}
 </script>
 
 <div>
@@ -14,7 +22,7 @@
 	<p>Execution ID: {execution.uuid}</p>
 
 	<h3>Code</h3>
-	<pre class="language-js"><code class="language-js">{@html highlightCode}</code></pre>
+	<pre class="language-js"><code class="language-js">{@html highlightCode(execution.code)}</code></pre>
 
 	<h3>Time</h3>
 	<p>Build Time: {Math.round(execution.functionBuildTime ?? 0)} ms</p>

jsEngine/engine/ExecutionStatsModal.ts

@@ -30,6 +30,11 @@ export class ExecutionStatsModal extends Modal {
 			this.contentEl.addClass('js-engine-execution-stats-modal');
 		}
 
+		if (this.execution === undefined) {
+			this.contentEl.createEl('p', { cls: 'mod-warning', text: 'No execution data available.' });
+			return;
+		}
+
 		this.component = new ExecutionStatsComponent({
 			target: this.contentEl,
 			props: {

jsEngine/engine/JsExecution.ts

@@ -6,8 +6,6 @@ import { InstanceId, InstanceType } from '../api/InstanceId';
 import * as Obsidian from 'obsidian';
 import { type EngineExecutionParams } from './Engine';
 
-const AsyncFunction = async function (): Promise<void> {}.constructor;
-
 /**
  * An async JavaScript function.
  */
@@ -128,7 +126,11 @@ export class JsExecution {
 
 		try {
 			// this.func = AsyncFunction(...Object.keys(this.globals), this.code) as JsFunc;
-			this.func = window.eval(`(async function anonymous(${Object.keys(this.globals).join(', ')}) {\n\n${this.code}\n\n})\n //# sourceURL=${encodeURIComponent(this.apiInstance.instanceId.toString())}`) as JsFunc;
+			this.func = window.eval(
+				`(async function anonymous(${Object.keys(this.globals).join(', ')}) {\n\n${this.code}\n\n})\n //# sourceURL=${encodeURIComponent(
+					this.apiInstance.instanceId.toString(),
+				)}`,
+			) as JsFunc;
 		} catch (e) {
 			if (e instanceof Error) {
 				this.functionBuildError = e;

styles.css

@@ -113,4 +113,6 @@ If your plugin does not need CSS, delete this file.
 
 .modal:has(> .js-engine-execution-stats-modal) {
 	width: unset;
+	min-width: 80%;
+	max-width: 100%;
 }