Load skiko with every window in iframe

Author: ilgonmic

src/executable-code/executable-fragment.js

@@ -6,7 +6,6 @@ import directives from 'monkberry-directives';
 import 'monkberry-events';
 import ExecutableCodeTemplate from './executable-fragment.monk';
 import WebDemoApi from '../webdemo-api';
-import { executeJs } from '../js-executor/execute-es-module';
 
 import {
   isJavaRelated,
@@ -314,13 +313,14 @@ export default class ExecutableFragment extends ExecutableCodeTemplate {
   }
 
   onConsoleCloseButtonEnter() {
-    const { jsLibs, onCloseConsole, targetPlatform } = this.state;
+    const { jsLibs, onCloseConsole, targetPlatform, compilerVersion } = this.state;
     // creates a new iframe and removes the old one, thereby stops execution of any running script
     if (isJsRelated(targetPlatform) || isWasmRelated(targetPlatform))
       this.jsExecutor.reloadIframeScripts(
         jsLibs,
         this.getNodeForMountIframe(),
         targetPlatform,
+        compilerVersion,
       );
     this.update({ output: '', openConsole: false, exception: null });
     if (onCloseConsole) onCloseConsole();
@@ -409,35 +409,12 @@ export default class ExecutableFragment extends ExecutableCodeTemplate {
         jsLibs,
         this.getNodeForMountIframe(),
         targetPlatform,
+        compilerVersion,
       );
       const additionalRequests = [];
       if (targetPlatform === TargetPlatforms.COMPOSE_WASM) {
-        if (!this.jsExecutor.skikoImports) {
-          const skikoImport = fetch(API_URLS.SKIKO_MJS(compilerVersion), {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'text/javascript',
-            },
-          })
-            .then((script) => script.text())
-            .then((script) =>
-              script.replace(
-                'new URL("skiko.wasm",import.meta.url).href',
-                `'${API_URLS.SKIKO_WASM(compilerVersion)}'`,
-              ),
-            )
-            .then(async (skikoCode) => {
-              return await executeJs(
-                this.jsExecutor.iframe.contentWindow,
-                skikoCode,
-              );
-            })
-            .then((skikoImports) => {
-              this.jsExecutor.skikoImports = skikoImports;
-              this.jsExecutor.iframe.contentWindow.skikoImports = skikoImports;
-            });
-
-          additionalRequests.push(skikoImport);
+        if (!this.jsExecutor.skikoImport) {
+          additionalRequests.push(this.jsExecutor.skikoImport);
         }
       }
 

src/js-executor/index.js

@@ -3,7 +3,8 @@ import { API_URLS } from '../config';
 import { showJsException } from '../view/output-view';
 import { processingHtmlBrackets } from '../utils';
 import { isWasmRelated, TargetPlatforms } from '../utils/platforms';
-import { executeWasmCode, executeWasmCodeWithSkiko } from './execute-es-module';
+import { executeJs, executeWasmCode, executeWasmCodeWithSkiko } from './execute-es-module';
+import { fetch } from "whatwg-fetch";
 
 const INIT_SCRIPT =
   'if(kotlin.BufferedOutput!==undefined){kotlin.out = new kotlin.BufferedOutput()}' +
@@ -25,7 +26,7 @@ const normalizeJsVersion = (version) => {
 export default class JsExecutor {
   constructor(kotlinVersion) {
     this.kotlinVersion = kotlinVersion;
-    this.skikoImports = undefined;
+    this.skikoImport = undefined;
   }
 
   async executeJsCode(
@@ -138,7 +139,7 @@ export default class JsExecutor {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
-  reloadIframeScripts(jsLibs, node, targetPlatform) {
+  reloadIframeScripts(jsLibs, node, targetPlatform, compilerVersion) {
     if (this.iframe !== undefined) {
       node.removeChild(this.iframe);
     }
@@ -170,10 +171,29 @@ export default class JsExecutor {
       }
     }
     if (targetPlatform === TargetPlatforms.COMPOSE_WASM) {
-      if (this.skikoImports) {
-        this.iframe.contentWindow.skikoImports = this.skikoImports;
-      }
-      this.iframe.height = '1000';
+      this.skikoImport = fetch(API_URLS.SKIKO_MJS(compilerVersion), {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'text/javascript',
+        }
+      })
+        .then(script => script.text())
+        .then(script => script.replace(
+          "new URL(\"skiko.wasm\",import.meta.url).href",
+          `'${API_URLS.SKIKO_WASM(compilerVersion)}'`
+        ))
+        .then(async skikoCode => {
+            return await executeJs(
+              this.iframe.contentWindow,
+              skikoCode,
+            );
+          }
+        )
+        .then(skikoImports => {
+          this.iframe.contentWindow.skikoImports = skikoImports;
+        });
+
+      this.iframe.height = "1000"
       iframeDoc.write(`<canvas height="1000" id="ComposeTarget"></canvas>`);
     }
     iframeDoc.write('<body style="margin: 0; overflow: hidden;"></body>');