Adopt multi-module compose wasm compilation

Author: ilgonmic

examples.md

@@ -144,45 +144,48 @@ You can use Compose Wasm.
 <div class="kotlin-code" data-target-platform="compose-wasm">
 
 ```kotlin
-import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Button
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
 
 //sampleStart
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-  CanvasBasedWindow { App() }
+  ComposeViewport(viewportContainer = document.body!!, content = {
+    App()
+  })
 }
 
 @Composable
 fun App() {
   MaterialTheme {
-    var greetingText by remember { mutableStateOf("Hello World!") }
-    var showImage by remember { mutableStateOf(false) }
-    var counter by remember { mutableStateOf(0) }
-    Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-      Button(onClick = {
-        counter++
-        greetingText = "Compose: ${Greeting().greet()}"
-        showImage = !showImage
-      }) {
-        Text(greetingText)
+    var showContent by remember { mutableStateOf(false) }
+    Column(
+      modifier = Modifier
+        .fillMaxSize(),
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      Button(onClick = { showContent = !showContent }) {
+        Text("Click me!")
       }
-      AnimatedVisibility(showImage) {
-        Text(counter.toString())
+      AnimatedVisibility(showContent) {
+        val greeting = remember { Greeting().greet() }
+        Column(
+          modifier = Modifier.fillMaxWidth(),
+          horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+          Text("Compose: $greeting")
+        }
       }
     }
   }

package.json

@@ -80,7 +80,7 @@
     "copy-examples": "node utils/copy-examples",
     "release:ci": "rm -rf dist && npm run build:all && $NPM_TOKEN=%env.NPM_TOKEN% npm publish",
     "start": "webpack-dev-server --port 9002",
-    "start-with-local-compiler": "webpack-dev-server --port 9002 --env webDemoUrl='//localhost:8080' webDemoResourcesUrl='//localhost:8081'",
+    "start-with-local-compiler": "webpack-dev-server --port 9002 --env webDemoUrl='http://localhost:8080' webDemoResourcesUrl='http://localhost:8081'",
     "lint": "eslint . --ext .ts",
     "fix": "eslint --fix --ext .ts .",
     "test": "npm run build:all && npm run test:run",

src/config.js

@@ -11,11 +11,14 @@ export const RUNTIME_CONFIG = { ...getConfigFromElement(currentScript) };
  * @type {{COMPILE: string, COMPLETE: string, VERSIONS: string, JQUERY: string, KOTLIN_JS: string}}
  */
 export const API_URLS = {
-  server: (RUNTIME_CONFIG.server || __WEBDEMO_URL__).replace(/\/$/, ''),
-  composeServer: 'https://compose-stage.sandbox.intellij.net'.replace(
+  server: (__WEBDEMO_URL__ || RUNTIME_CONFIG.server).replace(/\/$/, ''),
+  composeServer: (__WEBDEMO_URL__ || 'https://compose-stage.sandbox.intellij.net').replace(
     /\/$/,
     '',
   ),
+  composeResources: (__WEBDEMO_RESOURCES_URL__ || 'https://compose-stage.sandbox.intellij.net').replace(
+    /\/$/, ''
+  ),
 
   COMPILE(platform, version) {
     let url;
@@ -63,21 +66,6 @@ export const API_URLS = {
   get VERSIONS() {
     return `${this.server}/versions`;
   },
-  RESOURCE_VERSIONS() {
-    return `${this.composeServer}/api/resource/compose-wasm-versions`;
-  },
-  SKIKO_MJS(version) {
-    return `${this.composeServer}/api/resource/skiko-${version}.mjs`;
-  },
-  SKIKO_WASM(version) {
-    return `${this.composeServer}/api/resource/skiko-${version}.wasm`;
-  },
-  STDLIB_MJS(hash) {
-    return `${this.composeServer}/api/resource/stdlib-${hash}.mjs`;
-  },
-  STDLIB_WASM(hash) {
-    return `${this.composeServer}/api/resource/stdlib-${hash}.wasm`;
-  },
   get JQUERY() {
     return `https://cdn.jsdelivr.net/npm/jquery@1/dist/jquery.min.js`;
   },

src/executable-code/executable-fragment.js

@@ -411,24 +411,15 @@ export default class ExecutableFragment extends ExecutableCodeTemplate {
         targetPlatform,
         compilerVersion,
       );
-      const additionalRequests = [];
-      if (targetPlatform === TargetPlatforms.COMPOSE_WASM) {
-        if (this.jsExecutor.stdlibExports) {
-          additionalRequests.push(this.jsExecutor.stdlibExports);
-        }
-      }
 
-      Promise.all([
-        WebDemoApi.translateKotlinToJs(
+      WebDemoApi.translateKotlinToJs(
           this.getCode(),
           compilerVersion,
           targetPlatform,
           args,
           hiddenDependencies,
-        ),
-        ...additionalRequests,
-      ]).then(
-        ([state, ...additionalRequestsResults]) => {
+        ).then(
+        (state) => {
           state.waitingForOutput = false;
           const jsCode = state.jsCode;
           const wasm = state.wasm;
@@ -453,7 +444,6 @@ export default class ExecutableFragment extends ExecutableCodeTemplate {
                 outputHeight,
                 theme,
                 onError,
-                additionalRequestsResults,
               )
               .then((output) => {
                 const originState = state.openConsole;

src/js-executor/execute-es-module.js

@@ -1,16 +1,10 @@
+import {API_URLS} from "../config";
+
 export async function executeWasmCode(container, jsCode, wasmCode) {
   const newCode = prepareJsCode(jsCode);
   return execute(container, newCode, wasmCode);
 }
 
-export async function executeWasmCodeWithSkiko(container, jsCode) {
-  return executeJs(container, prepareJsCode(jsCode));
-}
-
-export async function executeWasmCodeWithStdlib(container, jsCode, wasmCode) {
-  return execute(container, prepareJsCode(jsCode), wasmCode);
-}
-
 function execute(container, jsCode, wasmCode) {
   container.wasmCode = Uint8Array.from(atob(wasmCode), c => c.charCodeAt(0));
   return executeJs(container, jsCode);
@@ -21,6 +15,8 @@ export function executeJs(container, jsCode) {
 }
 
 function prepareJsCode(jsCode) {
+  const re = /instantiateStreaming\(fetch\(new URL\('([^']*)',\s*import\.meta\.url\)\.href\),\s*importObject\s*,\s*\{\s*builtins\s*:\s*\[''\]\s*\}\s*\)\)\.instance;/g;
+
   return `
           class BufferedOutput {
             constructor() {
@@ -30,12 +26,20 @@ function prepareJsCode(jsCode) {
           export const bufferedOutput = new BufferedOutput()
           ` +
     jsCode
+      .replaceAll(
+        "await import('./",
+        "await import('" + API_URLS.composeResources + "/"
+      )
+      .replaceAll(
+        "%3",
+        "%253"
+      )
       .replace(
         "instantiateStreaming(fetch(wasmFilePath), importObject)).instance;",
         "instantiate(window.wasmCode, importObject)).instance;\nwindow.wasmCode = undefined;"
       )
       .replace(
-        "instantiateStreaming(fetch(new URL('./playground.wasm',import.meta.url).href), importObject)).instance;",
+        re,
         "instantiate(window.wasmCode, importObject)).instance;\nwindow.wasmCode = undefined;"
       )
       .replace(

src/js-executor/index.js

@@ -3,8 +3,7 @@ import {API_URLS} from '../config';
 import {showJsException} from '../view/output-view';
 import {processingHtmlBrackets} from '../utils';
 import {isWasmRelated, TargetPlatforms} from '../utils/platforms';
-import {executeJs, executeWasmCode, executeWasmCodeWithSkiko, executeWasmCodeWithStdlib} from './execute-es-module';
-import {fetch} from "whatwg-fetch";
+import {executeWasmCode} from './execute-es-module';
 
 const INIT_SCRIPT =
   'if(kotlin.BufferedOutput!==undefined){kotlin.out = new kotlin.BufferedOutput()}' +
@@ -26,7 +25,6 @@ const normalizeJsVersion = (version) => {
 export default class JsExecutor {
   constructor(kotlinVersion) {
     this.kotlinVersion = kotlinVersion;
-    this.stdlibExports = undefined;
   }
 
   async executeJsCode(
@@ -37,7 +35,6 @@ export default class JsExecutor {
     outputHeight,
     theme,
     onError,
-    additionalRequestsResults,
   ) {
     if (platform === TargetPlatforms.SWIFT_EXPORT) {
       return `<span class="standard-output ${theme}"><div class="result-code">${jsCode}</span>`;
@@ -69,15 +66,12 @@ export default class JsExecutor {
         // for some reason resize function in Compose does not work in Firefox in invisible block
         this.iframe.style.display = 'block';
 
-        const additionalRequestsResult = additionalRequestsResults[0];
         const result = await this.executeWasm(
           jsCode,
           wasm,
-          executeWasmCodeWithStdlib,
+          executeWasmCode,
           theme,
-          processError,
-          additionalRequestsResult.stdlib,
-          additionalRequestsResult.output,
+          processError
         );
 
         if (exception) {
@@ -123,15 +117,15 @@ export default class JsExecutor {
     return await this.execute(jsCode, jsLibs, theme, onError, platform);
   }
 
-  async executeWasm(jsCode, wasmCode, executor, theme, onError, imports, output) {
+  async executeWasm(jsCode, wasmCode, executor, theme, onError) {
     try {
       const exports = await executor(
         this.iframe.contentWindow,
         jsCode,
         wasmCode,
       );
-      await exports.instantiate({"playground.master": imports});
-      const bufferedOutput = output ?? exports.bufferedOutput;
+      await exports.instantiate();
+      const bufferedOutput = this.iframe.contentWindow.bufferedOutput ?? exports.bufferedOutput;
       const outputString = bufferedOutput.buffer;
       bufferedOutput.buffer = '';
       return outputString
@@ -182,107 +176,10 @@ export default class JsExecutor {
       }
     }
     if (targetPlatform === TargetPlatforms.COMPOSE_WASM) {
-
-      const skikoStdlib = fetch(API_URLS.RESOURCE_VERSIONS(),{
-        method: 'GET'
-      }).then(response => response.json())
-        .then(versions => {
-          const skikoVersion = versions["skiko"];
-
-          const skikoExports = fetch(API_URLS.SKIKO_MJS(skikoVersion), {
-            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(skikoVersion)}'`
-            ))
-            .then(skikoCode =>
-              executeJs(
-                this.iframe.contentWindow,
-                skikoCode,
-              ))
-            .then(skikoExports => fixedSkikoExports(skikoExports))
-
-          const stdlibVersion = versions["stdlib"];
-
-          const stdlibExports = fetch(API_URLS.STDLIB_MJS(stdlibVersion), {
-            method: 'GET',
-            headers: {
-              'Content-Type': 'text/javascript',
-            }
-          }).then(script => script.text())
-            .then(script =>
-              // necessary to load stdlib.wasm before its initialization to parallelize
-              // language=JavaScript
-              (`const stdlibWasm = fetch('${API_URLS.STDLIB_WASM(stdlibVersion)}');\n` + script).replace(
-                "fetch(new URL('./stdlib_master.wasm',import.meta.url).href)",
-                "stdlibWasm"
-              ).replace(
-                "(extends) => { return { extends }; }",
-                "(extends_) => { return { extends_ }; }"
-              ))
-            .then(stdlibCode =>
-              executeWasmCodeWithSkiko(
-                this.iframe.contentWindow,
-                stdlibCode,
-              )
-            )
-
-          return Promise.all([skikoExports, stdlibExports])
-        })
-
-      this.stdlibExports = skikoStdlib
-        .then(async ([skikoExportsResult, stdlibExportsResult]) => {
-            return [
-              await stdlibExportsResult.instantiate({
-                "./skiko.mjs": skikoExportsResult
-              }),
-              stdlibExportsResult
-            ]
-          }
-        )
-        .then(([stdlibResult, outputResult]) => {
-            return {
-              "stdlib": stdlibResult.exports,
-              "output": outputResult.bufferedOutput
-            }
-          }
-        )
-
       this.iframe.height = "1000"
       iframeDoc.write(`<canvas height="1000" id="ComposeTarget"></canvas>`);
     }
     iframeDoc.write('<body style="margin: 0; overflow: hidden;"></body>');
     iframeDoc.close();
   }
 }
-
-function fixedSkikoExports(skikoExports) {
-  return {
-    ...skikoExports,
-    org_jetbrains_skia_Bitmap__1nGetPixmap: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    },
-    org_jetbrains_skia_Bitmap__1nIsVolatile: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    },
-    org_jetbrains_skia_Bitmap__1nSetVolatile: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    },
-    org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    },
-    org_jetbrains_skia_TextBlobBuilderRunHandler__1nMake: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    },
-    org_jetbrains_skia_TextBlobBuilderRunHandler__1nMakeBlob: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    },
-    org_jetbrains_skia_svg_SVGCanvasKt__1nMake: function () {
-      console.log("org_jetbrains_skia_TextBlobBuilderRunHandler__1nGetFinalizer")
-    }
-  }
-}