[wasm] Use new javascript API in tests and samples (#74153)

- Replace createDotnetRuntime with new dotnet builder API in sapmles and tests. - Add guard in withApplicationArgumentsFromQuery for window object.
dotnet · Aug 22, 2022 · 8cf96d9 · 8cf96d9
1 parent 3c21cc5
commit 8cf96d9
Show file tree

Hide file tree

Showing 21 changed files with 124 additions and 181 deletions.
diff --git a/src/mono/sample/mbr/browser/main.js b/src/mono/sample/mbr/browser/main.js
@@ -1,12 +1,9 @@
-import createDotnetRuntime from './dotnet.js'
+import { dotnet } from './dotnet.js'
 
 try {
-    const { getAssemblyExports } = await createDotnetRuntime({
-        configSrc: "./mono-config.json",
-        onConfigLoaded: (config) => {
-            config.environmentVariables["DOTNET_MODIFIABLE_ASSEMBLIES"] = "debug";
-        },
-    });
+    const { getAssemblyExports } = await dotnet
+        .withEnvironmentVariable("DOTNET_MODIFIABLE_ASSEMBLIES", "debug")
+        .create();
 
     const exports = await getAssemblyExports("WasmDelta.dll");
     const update = exports.Sample.Test.Update;

diff --git a/src/mono/sample/wasm/browser-bench/frame-main.js b/src/mono/sample/wasm/browser-bench/frame-main.js
@@ -3,7 +3,7 @@
 
 "use strict";
 
-import createDotnetRuntime from './dotnet.js'
+import { dotnet, exit } from './dotnet.js'
 
 class FrameApp {
     async init({ getAssemblyExports }) {
@@ -30,24 +30,18 @@ try {
         mute = true;
     }
 
-    const runtime = await createDotnetRuntime({
-        disableDotnet6Compatibility: true,
-        configSrc: "./mono-config.json",
-        printErr: function () {
-            if (!mute) {
-                console.error(...arguments);
+    const runtime = await dotnet
+        .withElementOnExit()
+        .withExitCodeLogging()
+        .withModuleConfig({
+            onConfigLoaded: (config) => {
+                if (window.parent != window) {
+                    window.parent.resolveAppStartEvent("onConfigLoaded");
+                }
+                // config.diagnosticTracing = true;
             }
-        },
-        onConfigLoaded: (config) => {
-            if (window.parent != window) {
-                window.parent.resolveAppStartEvent("onConfigLoaded");
-            }
-            // config.diagnosticTracing = true;
-        },
-        onAbort: (error) => {
-            wasm_exit(1, error);
-        },
-    });
+        })
+        .create();
 
     if (window.parent != window) {
         window.parent.resolveAppStartEvent("onDotnetReady");
@@ -58,17 +52,5 @@ catch (err) {
     if (!mute) {
         console.error(`WASM ERROR ${err}`);
     }
-    wasm_exit(1, err);
+    exit(1, err);
 }
-
-function wasm_exit(exit_code, reason) {
-    /* Set result in a tests_done element, to be read by xharness */
-    var tests_done_elem = document.createElement("label");
-    tests_done_elem.id = "tests_done";
-    tests_done_elem.innerHTML = exit_code.toString();
-    if (exit_code) tests_done_elem.style.background = "red";
-    document.body.appendChild(tests_done_elem);
-
-    if (reason) console.error(reason);
-    console.log(`WASM EXIT ${exit_code}`);
-};
diff --git a/src/mono/sample/wasm/browser-bench/main.js b/src/mono/sample/wasm/browser-bench/main.js
@@ -3,7 +3,7 @@
 
 "use strict";
 
-import createDotnetRuntime from './dotnet.js'
+import { dotnet, exit } from './dotnet.js'
 
 let runBenchmark;
 let setTasks;
@@ -94,26 +94,13 @@ try {
     globalThis.mainApp.FrameReachedManaged = globalThis.mainApp.frameReachedManaged.bind(globalThis.mainApp);
     globalThis.mainApp.PageShow = globalThis.mainApp.pageShow.bind(globalThis.mainApp);
 
-    const runtime = await createDotnetRuntime({
-        disableDotnet6Compatibility: true,
-        configSrc: "./mono-config.json",
-        onAbort: (error) => {
-            wasm_exit(1, error);
-        }
-    });
+    const runtime = await dotnet
+        .withElementOnExit()
+        .withExitCodeLogging()
+        .create();
+
     await mainApp.init(runtime);
 }
 catch (err) {
-    wasm_exit(1, err);
+    exit(1, err);
 }
-function wasm_exit(exit_code, reason) {
-    /* Set result in a tests_done element, to be read by xharness */
-    const tests_done_elem = document.createElement("label");
-    tests_done_elem.id = "tests_done";
-    tests_done_elem.innerHTML = exit_code.toString();
-    if (exit_code) tests_done_elem.style.background = "red";
-    document.body.appendChild(tests_done_elem);
-
-    if (reason) console.error(reason);
-    console.log(`WASM EXIT ${exit_code}`);
-};
diff --git a/src/mono/sample/wasm/browser-eventpipe/main.js b/src/mono/sample/wasm/browser-eventpipe/main.js
@@ -1,4 +1,4 @@
-import createDotnetRuntime from "./dotnet.js";
+import { dotnet } from "./dotnet.js";
 
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -41,9 +41,7 @@ function getOnClickHandler(startWork, stopWork, getIterationsDone) {
 }
 
 async function main() {
-    const { MONO, Module, getAssemblyExports } = await createDotnetRuntime({
-        configSrc: "./mono-config.json",
-    });
+    const { MONO, Module, getAssemblyExports } = await dotnet.create()
     globalThis.__Module = Module;
     globalThis.MONO = MONO;
 

diff --git a/src/mono/sample/wasm/browser-nextjs/components/deepThought.js b/src/mono/sample/wasm/browser-nextjs/components/deepThought.js
@@ -1,29 +1,17 @@
 import { useState, useEffect } from 'react'
-import createDotnetRuntime from '@microsoft/dotnet-runtime'
+import { dotnet } from '@microsoft/dotnet-runtime'
 
 let dotnetRuntimePromise = undefined;
-let meaningFunction = undefined;
 
 async function createRuntime() {
     try {
-        const response = await fetch('dotnet.wasm');
-        const arrayBuffer = await response.arrayBuffer();
-        return createDotnetRuntime({
-            configSrc: "./mono-config.json",
-            disableDotnet6Compatibility: true,
-            locateFile: (path, prefix) => {
-                return '/' + path;
-            },
-            instantiateWasm: async (imports, successCallback) => {
-                try {
-                    const arrayBufferResult = await WebAssembly.instantiate(arrayBuffer, imports);
-                    successCallback(arrayBufferResult.instance);
-                } catch (err) {
-                    console.error(err);
-                    throw err;
+        return dotnet.
+            withModuleConfig({
+                locateFile: (path, prefix) => {
+                    return '/' + path;
                 }
-            }
-        });
+            })
+            .create();
     } catch (err) {
         console.error(err);
         throw err;

diff --git a/src/mono/sample/wasm/browser-profile/README.md b/src/mono/sample/wasm/browser-profile/README.md
@@ -13,16 +13,14 @@ public static void StopProfile(){}
 2. Initialize the profiler in the main javascript (e.g. main.js)
 
 ```
-await createDotnetRuntime({
-    onConfigLoaded: () => {
-        if (config.enableProfiler) {
-            config.aotProfilerOptions = {
-                write_at: "<Namespace.Class::StopProfile>",
-                send_to: "System.Runtime.InteropServices.JavaScript.JavaScriptExports::DumpAotProfileData"
-            }
+await dotnet
+    .withConfig({
+        aotProfilerOptions: {
+            writeAt: "<Namespace.Class::StopProfile>",
+            sendTo: "System.Runtime.InteropServices.JavaScript.JavaScriptExports::DumpAotProfileData"
         }
-    },
-});
+    })
+    .create();
 ```
 
 3. Call the `write_at` method at the end of the app, either in C# or in JS. To call the `write_at` method in JS, make use of bindings:

diff --git a/src/mono/sample/wasm/browser-profile/main.js b/src/mono/sample/wasm/browser-profile/main.js
@@ -1,16 +1,4 @@
-import createDotnetRuntime from './dotnet.js'
-
-function wasm_exit(exit_code, reason) {
-    /* Set result in a tests_done element, to be read by xharness */
-    const tests_done_elem = document.createElement("label");
-    tests_done_elem.id = "tests_done";
-    tests_done_elem.innerHTML = exit_code.toString();
-    if (exit_code) tests_done_elem.style.background = "red";
-    document.body.appendChild(tests_done_elem);
-
-    if (reason) console.error(reason);
-    console.log(`WASM EXIT ${exit_code}`);
-}
+import { dotnet, exit } from './dotnet.js'
 
 function saveProfile(aotProfileData) {
     if (!aotProfileData) {
@@ -27,21 +15,18 @@ function saveProfile(aotProfileData) {
     // Remove anchor from body
     document.body.removeChild(a);
 }
-let enableProfiler = false
 try {
-    const { INTERNAL, getAssemblyExports: getAssemblyExports } = await createDotnetRuntime({
-        configSrc: "./mono-config.json",
-        disableDotnet6Compatibility: true,
-        onConfigLoaded: (config) => {
-            if (config.enableProfiler) {
-                enableProfiler = true;
-                config.aotProfilerOptions = {
-                    writeAt: "Sample.Test::StopProfile",
-                    sendTo: "System.Runtime.InteropServices.JavaScript.JavaScriptExports::DumpAotProfileData"
-                }
+    const { INTERNAL, getAssemblyExports: getAssemblyExports } = await dotnet
+        .withElementOnExit()
+        .withExitCodeLogging()
+        .withConfig({
+            aotProfilerOptions: {
+                writeAt: "Sample.Test::StopProfile",
+                sendTo: "System.Runtime.InteropServices.JavaScript.JavaScriptExports::DumpAotProfileData"
             }
-        }
-    });
+        })
+        .create();
+
     console.log("not ready yet")
     const exports = await getAssemblyExports("Wasm.BrowserProfile.Sample");
     const testMeaning = exports.Sample.Test.TestMeaning;
@@ -51,13 +36,11 @@ try {
     document.getElementById("out").innerHTML = ret;
     console.debug(`ret: ${ret}`);
 
-    if (enableProfiler) {
-        stopProfile();
-        saveProfile(INTERNAL.aotProfileData);
-    }
+    stopProfile();
+    saveProfile(INTERNAL.aotProfileData);
 
     let exit_code = ret == 42 ? 0 : 1;
-    wasm_exit(exit_code);
+    exit(exit_code);
 } catch (err) {
-    wasm_exit(-1, err);
+    exit(-1, err);
 }
diff --git a/src/mono/sample/wasm/browser-threads/main.js b/src/mono/sample/wasm/browser-threads/main.js
@@ -1,4 +1,4 @@
-import createDotnetRuntime from './dotnet.js'
+import { dotnet } from './dotnet.js'
 
 function wasm_exit(exit_code, reason) {
     /* Set result in a tests_done element, to be read by xharness in runonly CI test */
@@ -61,10 +61,12 @@ function onInputValueChanged(exports, inputElement) {
 
 try {
     const inputElement = document.getElementById("inputN");
-    const { runtimeBuildInfo, setModuleImports, getAssemblyExports, runMain } = await createDotnetRuntime(() => {
-        console.log('user code in createDotnetRuntime callback');
-        return {
-            configSrc: "./mono-config.json",
+    const { setModuleImports, getAssemblyExports, runMain } = await dotnet
+        .withModuleConfig({
+            // This whole 'withModuleConfig' is for demo purposes only.
+            // It is prefered to use specific 'with***' methods instead. 
+            // Only when such method is doesn't exist, fallback to moduleConfig.
+
             onConfigLoaded: (config) => {
                 // This is called during emscripten `dotnet.wasm` instantiation, after we fetched config.
                 console.log('user code Module.onConfigLoaded');
@@ -83,15 +85,16 @@ try {
                 console.log('user code Module.onDotnetReady');
             },
             postRun: () => { console.log('user code Module.postRun'); },
-        }
-    });
-    console.log('user code after createDotnetRuntime()');
+        })
+        .create();
+
+    console.log('user code after dotnet.create');
     setModuleImports("main.js", {
-	Sample: {
-	    Test: {
-		updateProgress
-	    }
-	}
+        Sample: {
+            Test: {
+                updateProgress
+            }
+        }
     });
 
     const exports = await getAssemblyExports(assemblyName);

diff --git a/src/mono/sample/wasm/browser-webpack/app.js b/src/mono/sample/wasm/browser-webpack/app.js
@@ -1,11 +1,9 @@
-import createDotnetRuntime from '@microsoft/dotnet-runtime'
+import { dotnet } from '@microsoft/dotnet-runtime'
 import _ from 'underscore'
 
 async function dotnetMeaning() {
     try {
-        const { getAssemblyExports } = await createDotnetRuntime({
-            configSrc: "./mono-config.json"
-        });
+        const { getAssemblyExports } = await dotnet.create();
 
         const exports = await getAssemblyExports("Wasm.Browser.WebPack.Sample");
         const meaningFunction = exports.Sample.Test.Main;

diff --git a/src/mono/sample/wasm/browser-webpack/package-lock.json b/src/mono/sample/wasm/browser-webpack/package-lock.json
diff --git a/src/mono/sample/wasm/browser/main.js b/src/mono/sample/wasm/browser/main.js
@@ -13,6 +13,10 @@ try {
         .withConsoleForwarding()
         .withElementOnExit()
         .withModuleConfig({
+            // This whole 'withModuleConfig' is for demo purposes only.
+            // It is prefered to use specific 'with***' methods instead. 
+            // Only when such method is doesn't exist, fallback to moduleConfig.
+
             configSrc: "./mono-config.json",
             onConfigLoaded: (config) => {
                 // This is called during emscripten `dotnet.wasm` instantiation, after we fetched config.
@@ -37,9 +41,7 @@ try {
 
 
     // at this point both emscripten and monoVM are fully initialized.
-    // we could use the APIs returned and resolved from createDotnetRuntime promise
-    // both exports are receiving the same object instances
-    console.log('user code after createDotnetRuntime()');
+    console.log('user code after dotnet.create');
     setModuleImports("main.js", {
         Sample: {
             Test: {

diff --git a/src/mono/sample/wasm/console-node-ts/main.ts b/src/mono/sample/wasm/console-node-ts/main.ts
@@ -1,11 +1,2 @@
-import createDotnetRuntime from '@microsoft/dotnet-runtime'
-import process from 'process'
-
-const { runMainAndExit } = await createDotnetRuntime(() => ({
-    disableDotnet6Compatibility: true,
-    configSrc: "./mono-config.json",
-}));
-
-const app_args = process.argv.slice(2);
-const dllName = "Wasm.Console.Node.TS.Sample.dll";
-await runMainAndExit(dllName, app_args);
+import { dotnet } from '@microsoft/dotnet-runtime'
+await dotnet.run();
diff --git a/src/mono/sample/wasm/node-webpack/app.js b/src/mono/sample/wasm/node-webpack/app.js
@@ -1,12 +1,9 @@
-import createDotnetRuntime from '@microsoft/dotnet-runtime'
+import { dotnet } from '@microsoft/dotnet-runtime'
 import { color } from 'console-log-colors'
 
 async function dotnetMeaning() {
     try {
-        const { getAssemblyExports } = await createDotnetRuntime({
-            configSrc: "./mono-config.json"
-        });
-
+        const { getAssemblyExports } = await dotnet.create();
         const exports = await getAssemblyExports("Wasm.Node.WebPack.Sample");
         const meaningFunction = exports.Sample.Test.Main;
         return meaningFunction();