[wasm] renames and cleanup before modularization (#61596)

- no imports from outer scope - move dotnet to -extern-pre-js - re-enable JS minification with ES2018 - rename main javaScript files to main.js and test-main.js - sample and test script cleanup - rename set_exit_code method - rewrite test start as async method - improve script loading via script element on page in test - use BINDING.bind_static_method instead of INTERNAL where possible - better .d.ts exports - formatted html files - renamed modules.ts to imports.ts which makes more sense - improved error propagation - renamed __initializeImportsAndExports - delayed exit and stdout flush
dotnet · Nov 17, 2021 · da0e0f7 · da0e0f7
1 parent a1b391b
commit da0e0f7
Show file tree

Hide file tree

Showing 68 changed files with 600 additions and 541 deletions.
diff --git a/eng/pipelines/coreclr/templates/perf-job.yml b/eng/pipelines/coreclr/templates/perf-job.yml
@@ -135,7 +135,7 @@ jobs:
           artifactName: BrowserWasm
           displayName: BrowserWasm
 
-      - script: "mkdir $(librariesDownloadDir)/bin/wasm;unzip -o $(librariesDownloadDir)/BrowserWasm/artifacts/packages/Release/Shipping/Microsoft.NETCore.App.Runtime.Mono.browser-wasm.7.0.0-ci.nupkg data/* runtimes/* -d $(librariesDownloadDir)/bin/wasm;cp src/mono/wasm/runtime-test.js $(librariesDownloadDir)/bin/wasm/runtime-test.js;find $(librariesDownloadDir)/bin/wasm -type f -exec chmod 664 {} \\;"
+      - script: "mkdir $(librariesDownloadDir)/bin/wasm;unzip -o $(librariesDownloadDir)/BrowserWasm/artifacts/packages/Release/Shipping/Microsoft.NETCore.App.Runtime.Mono.browser-wasm.7.0.0-ci.nupkg data/* runtimes/* -d $(librariesDownloadDir)/bin/wasm;cp src/mono/wasm/test-main.js $(librariesDownloadDir)/bin/wasm/test-main.js;find $(librariesDownloadDir)/bin/wasm -type f -exec chmod 664 {} \\;"
         displayName: "Create wasm directory (Linux)"
 
     # Download mono AOT

diff --git a/eng/testing/tests.wasm.targets b/eng/testing/tests.wasm.targets
@@ -23,13 +23,13 @@
     <_XHarnessArgs Condition="'$(OS)' != 'Windows_NT'">wasm $XHARNESS_COMMAND --app=. --output-directory=$XHARNESS_OUT</_XHarnessArgs>
     <_XHarnessArgs Condition="'$(OS)' == 'Windows_NT'">wasm %XHARNESS_COMMAND% --app=. --output-directory=%XHARNESS_OUT%</_XHarnessArgs>
 
-    <_XHarnessArgs Condition="'$(Scenario)' != 'WasmTestOnBrowser' and '$(Scenario)' != 'BuildWasmApps'">$(_XHarnessArgs) --engine=$(JSEngine) $(JSEngineArgs) --js-file=runtime.js</_XHarnessArgs>
+    <_XHarnessArgs Condition="'$(Scenario)' != 'WasmTestOnBrowser' and '$(Scenario)' != 'BuildWasmApps'">$(_XHarnessArgs) --engine=$(JSEngine) $(JSEngineArgs) --js-file=main.js</_XHarnessArgs>
     <_XHarnessArgs Condition="'$(BrowserHost)' == 'windows'">$(_XHarnessArgs) --browser=chrome --browser-path=%HELIX_CORRELATION_PAYLOAD%\chrome-win\chrome.exe</_XHarnessArgs>
     <_XHarnessArgs Condition="'$(IsFunctionalTest)' == 'true'"     >$(_XHarnessArgs) --expected-exit-code=$(ExpectedExitCode)</_XHarnessArgs>
     <_XHarnessArgs Condition="'$(WasmXHarnessArgs)' != ''"         >$(_XHarnessArgs) $(WasmXHarnessArgs)</_XHarnessArgs>
 
     <_AppArgs Condition="'$(IsFunctionalTest)' != 'true' and '$(Scenario)' != 'BuildWasmApps'">--run WasmTestRunner.dll $(AssemblyName).dll</_AppArgs>
-    <_AppArgs Condition="'$(IsFunctionalTest)' == 'true'">--run $(AssemblyName).dll --testing</_AppArgs>
+    <_AppArgs Condition="'$(IsFunctionalTest)' == 'true'">--run $(AssemblyName).dll</_AppArgs>
 
     <_AppArgs Condition="'$(WasmTestAppArgs)' != ''">$(_AppArgs) $(WasmTestAppArgs)</_AppArgs>
 
@@ -161,7 +161,7 @@
     <PropertyGroup>
       <WasmAppDir>$(BundleDir)</WasmAppDir>
       <WasmMainAssemblyFileName Condition="'$(WasmMainAssemblyFileName)' == ''">WasmTestRunner.dll</WasmMainAssemblyFileName>
-      <WasmMainJSPath Condition="'$(WasmMainJSPath)' == ''">$(MonoProjectRoot)\wasm\runtime-test.js</WasmMainJSPath>
+      <WasmMainJSPath Condition="'$(WasmMainJSPath)' == ''">$(MonoProjectRoot)\wasm\test-main.js</WasmMainJSPath>
       <WasmInvariantGlobalization>$(InvariantGlobalization)</WasmInvariantGlobalization>
       <WasmGenerateRunV8Script>true</WasmGenerateRunV8Script>
       <WasmNativeStrip>false</WasmNativeStrip>

diff --git a/src/libraries/sendtohelixhelp.proj b/src/libraries/sendtohelixhelp.proj
@@ -491,7 +491,7 @@
       <HelixWorkItem Include="@(_RunOnlyWorkItem -> '%(FileName)')" >
         <PayloadArchive>%(Identity)</PayloadArchive>
         <!-- No RunTests script generated for the sample project so we just use the direct command -->
-        <Command>$(ExecXHarnessCmd) wasm $(XHarnessCommand)  --app=. --engine=V8  --engine-arg=--stack-trace-limit=1000 --js-file=runtime.js --output-directory=$(XHarnessOutput) -- --run %(FileName).dll</Command>
+        <Command>$(ExecXHarnessCmd) wasm $(XHarnessCommand)  --app=. --engine=V8  --engine-arg=--stack-trace-limit=1000 --js-file=main.js --output-directory=$(XHarnessOutput) -- --run %(FileName).dll</Command>
       </HelixWorkItem>
     </ItemGroup>
 
@@ -501,7 +501,7 @@
       <HelixWorkItem Include="@(_RunOnlyWorkItem -> '%(FileName)')" >
         <PayloadArchive>%(Identity)</PayloadArchive>
         <!-- No RunTests script generated for the sample project so we just use the direct command -->
-        <Command>$(ExecXHarnessCmd) wasm $(XHarnessCommand)  --app=. --browser=Chrome $(XHarnessBrowserPathArg) --html-file=index.html --output-directory=$(XHarnessOutput) -- %(FileName).dll --testing</Command>
+        <Command>$(ExecXHarnessCmd) wasm $(XHarnessCommand)  --app=. --browser=Chrome $(XHarnessBrowserPathArg) --html-file=index.html --output-directory=$(XHarnessOutput) -- %(FileName).dll</Command>
       </HelixWorkItem>
     </ItemGroup>
 

diff --git a/src/mono/sample/mbr/browser/WasmDelta.csproj b/src/mono/sample/mbr/browser/WasmDelta.csproj
@@ -7,7 +7,7 @@
     <OutputPath>bin</OutputPath>
 
     <WasmAppDir>$(MSBuildProjectDirectory)\bin\$(Configuration)\AppBundle\</WasmAppDir>
-    <WasmMainJSPath>runtime.js</WasmMainJSPath>
+    <WasmMainJSPath>main.js</WasmMainJSPath>
     <EnableDefaultItems>false</EnableDefaultItems>
 
     <!-- Important - deltas don't support trimming! -->

diff --git a/src/mono/sample/mbr/browser/index.html b/src/mono/sample/mbr/browser/index.html
@@ -2,37 +2,37 @@
 <!--  Licensed to the .NET Foundation under one or more agreements. -->
 <!-- The .NET Foundation licenses this file to you under the MIT license. -->
 <html>
-  <head>
-    <title>TESTS</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  </head>
-  <body>
-    <h3 id="header">Wasm Browser Sample</h3>
-    Result from Sample.Test.TestMeaning: <span id="out"></span>
-    <div>
-      Click here (upto 2 times): <button id="update">Update</button>
-    </div>
-    <script type='text/javascript'>
-      var App = {
-        init: function () {
-	  var outElement = document.getElementById("out");
-          document.getElementById("update").addEventListener("click", function () {
-	    INTERNAL.call_static_method("[WasmDelta] Sample.Test:Update", []);
-	    console.log ("applied update");
-	    var ret = INTERNAL.call_static_method("[WasmDelta] Sample.Test:TestMeaning", []);
-	    outElement.innerHTML = ret;
-	  })
-          var ret = INTERNAL.call_static_method("[WasmDelta] Sample.Test:TestMeaning", []);
-	  outElement.innerHTML = ret;
-          console.log ("ready");
-        },
-      };
-    </script>
-    <script type="text/javascript" src="runtime.js"></script>
 
-    <script defer src="dotnet.js"></script>
+<head>
+  <title>Hot Reload Sample</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
 
+<body>
+  <h3 id="header">Wasm Hot Reload Sample</h3>
+  Result from Sample.Test.TestMeaning: <span id="out"></span>
+  <div>
+    Click here (upto 2 times): <button id="update">Update</button>
+  </div>
+  <script type='text/javascript'>
+    const App = {
+      init: function () {
+        const update = BINDING.bind_static_method("[WasmDelta] Sample.Test:Update");
+        const testMeaning = BINDING.bind_static_method("[Wasm.Browser.Sample] Sample.Test:TestMeaning");
+        const outElement = document.getElementById("out");
+        document.getElementById("update").addEventListener("click", function () {
+          update();
+          console.log("applied update");
+          outElement.innerHTML = testMeaning();
+        })
+        outElement.innerHTML = testMeaning();
+        console.log("ready");
+      },
+    };
+  </script>
+  <script type="text/javascript" src="main.js"></script>
+  <script defer src="dotnet.js"></script>
+</body>
 
-  </body>
-</html>
+</html>
diff --git a/src/mono/sample/mbr/browser/runtime.js → src/mono/sample/mbr/browser/main.js b/src/mono/sample/mbr/browser/runtime.js → src/mono/sample/mbr/browser/main.js
@@ -3,7 +3,6 @@
 
 "use strict";
 var Module = {
-    config: null,
     configSrc: "./mono-config.json",
     onConfigLoaded: function () {
         MONO.config.environment_variables["DOTNET_MODIFIABLE_ASSEMBLIES"] = "debug";

diff --git a/src/mono/sample/wasm/Directory.Build.targets b/src/mono/sample/wasm/Directory.Build.targets
@@ -14,12 +14,12 @@
     <Exec Command="$(_Dotnet) publish /p:Configuration=$(Configuration) /p:TargetArchitecture=wasm /p:TargetOS=Browser $(_AOTFlag) $(_SampleProject)" />
   </Target>
   <Target Name="RunSampleWithV8" DependsOnTargets="BuildSampleInTree">
-    <Exec WorkingDirectory="bin/$(Configuration)/AppBundle" Command="v8 --expose_wasm runtime.js -- $(DOTNET_MONO_LOG_LEVEL) --run $(_SampleAssembly) $(Args)" IgnoreExitCode="true" />
+    <Exec WorkingDirectory="bin/$(Configuration)/AppBundle" Command="v8 --expose_wasm main.js -- $(DOTNET_MONO_LOG_LEVEL) --run $(_SampleAssembly) $(Args)" IgnoreExitCode="true" />
   </Target>
   <Target Name="CheckServe">
     <Exec Command="dotnet tool install -g dotnet-serve" IgnoreExitCode="true" />
   </Target>
   <Target Name="RunSampleWithBrowser" DependsOnTargets="BuildSampleInTree;CheckServe">
-    <Exec Command="$(_Dotnet) serve -o -d:bin/$(Configuration)/AppBundle -p:8000" IgnoreExitCode="true" YieldDuringToolExecution="true" />
+    <Exec Command="$(_Dotnet) serve -o -d:bin/$(Configuration)/AppBundle -p:8000 --mime .mjs=text/javascript" IgnoreExitCode="true" YieldDuringToolExecution="true" />
   </Target>
 </Project>
diff --git a/src/mono/sample/wasm/browser-bench/Console/Wasm.Console.Bench.Sample.csproj b/src/mono/sample/wasm/browser-bench/Console/Wasm.Console.Bench.Sample.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <WasmCopyAppZipToHelixTestDir Condition="'$(ArchiveTests)' == 'true'">true</WasmCopyAppZipToHelixTestDir>
-    <WasmMainJSPath>$(MonoProjectRoot)\wasm\runtime-test.js</WasmMainJSPath>
+    <WasmMainJSPath>$(MonoProjectRoot)\wasm\test-main.js</WasmMainJSPath>
     <WasmGenerateRunV8Script>true</WasmGenerateRunV8Script>
     <SuppressTrimAnalysisWarnings>true</SuppressTrimAnalysisWarnings>
   </PropertyGroup>

diff --git a/src/mono/sample/wasm/browser-bench/Wasm.Browser.Bench.Sample.csproj b/src/mono/sample/wasm/browser-bench/Wasm.Browser.Bench.Sample.csproj
@@ -2,7 +2,7 @@
   <PropertyGroup>
     <!-- don't need to run this on helix -->
     <WasmCopyAppZipToHelixTestDir>false</WasmCopyAppZipToHelixTestDir>
-    <WasmMainJSPath>runtime.js</WasmMainJSPath>
+    <WasmMainJSPath>main.js</WasmMainJSPath>
     <SuppressTrimAnalysisWarnings>true</SuppressTrimAnalysisWarnings>
   </PropertyGroup>
 

diff --git a/src/mono/sample/wasm/browser-bench/appstart-frame.html b/src/mono/sample/wasm/browser-bench/appstart-frame.html
@@ -11,7 +11,7 @@
     <h3 id="header">Wasm Browser Sample - App task frame</h3>
     <span id="out"></span>
     <script type='text/javascript'>
-      var test_exit = function(exit_code)
+      function set_exit_code (exit_code, reason)
       {
         /* Set result in a tests_done element, to be read by xharness */
         var tests_done_elem = document.createElement("label");
@@ -35,7 +35,7 @@ <h3 id="header">Wasm Browser Sample - App task frame</h3>
       };
 
     </script>
-    <script type="text/javascript" src="runtime.js"></script>
+    <script type="text/javascript" src="main.js"></script>
     <script defer src="dotnet.js"></script>
   </body>
 </html>
diff --git a/src/mono/sample/wasm/browser-bench/index.html b/src/mono/sample/wasm/browser-bench/index.html
@@ -2,85 +2,78 @@
 <!--  Licensed to the .NET Foundation under one or more agreements. -->
 <!-- The .NET Foundation licenses this file to you under the MIT license. -->
 <html>
-  <head>
-    <title>TESTS</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-  </head>
-  <body onload="onLoad()">
-    <h3 id="header">Wasm Browser Sample - Simple Benchmark</h3>
-    Output:<br><br> <span id="out"></span>
-    <script type='text/javascript'>
-      var is_testing = false;
-      var tasks = '';
-      var onLoad = function() {
-        var url = new URL(decodeURI(window.location));
-        let args = url.searchParams.getAll('arg');
-        is_testing = args !== undefined && (args.find(arg => arg == '--testing') !== undefined);
-        tasks = url.searchParams.getAll('task');
-      };
 
-      var test_exit = function(exit_code)
-      {
-        if (!is_testing) {
-          console.log(`test_exit: ${exit_code}`);
-          return;
-        }
+<head>
+  <title>Benchmark Sample</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+</head>
 
-        /* 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();
-        document.body.appendChild(tests_done_elem);
+<body onload="onLoad()">
+  <h3 id="header">Wasm Browser Sample - Simple Benchmark</h3>
+  Output:<br><br> <span id="out"></span>
+  <script type='text/javascript'>
+    let tasks = '';
+    var onLoad = function () {
+      var url = new URL(decodeURI(window.location));
+      tasks = url.searchParams.getAll('task');
+    };
 
-        console.log(`WASM EXIT ${exit_code}`);
-      };
+    function set_exit_code(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();
+      document.body.appendChild(tests_done_elem);
 
-      function yieldBench () {
-        let promise = INTERNAL.call_static_method("[Wasm.Browser.Bench.Sample] Sample.Test:RunBenchmark", []);
-        promise.then(ret => {
-          document.getElementById("out").innerHTML += ret;
-          if (ret.length > 0) {
-              setTimeout(function () { yieldBench(); }, 0);
-          } else {
-              document.getElementById("out").innerHTML += "Finished";
-          }
-        });
-      }
+      console.log(`WASM EXIT ${exit_code}`);
+    };
 
-      var App = {
-        init: function () {
-          if (tasks != '')
-            INTERNAL.call_static_method("[Wasm.Browser.Bench.Sample] Sample.Test:SetTasks", tasks);
-          yieldBench ();
-        },
+    function yieldBench() {
+      const runBenchmark = BINDING.bind_static_method("[Wasm.Browser.Bench.Sample] Sample.Test:RunBenchmark");
+      let promise = runBenchmark();
+      promise.then(ret => {
+        document.getElementById("out").innerHTML += ret;
+        if (ret.length > 0) {
+          setTimeout(function () { yieldBench(); }, 0);
+        } else {
+          document.getElementById("out").innerHTML += "Finished";
+        }
+      });
+    }
 
-        PageShow: async function ()
-        {
-          AppStart.Construct();
-          try {
-            await AppStart.WaitForPageShow();
-          } finally {
-            AppStart.RemoveFrame();
-          }
-        },
+    const App = {
+      init: function () {
+        if (tasks != '') {
+          const setTasks = BINDING.bind_static_method("[Wasm.Browser.Bench.Sample] Sample.Test:SetTasks");
+          setTasks(tasks);
+        }
+        yieldBench();
+      },
 
-        ReachedManaged: async function ()
-        {
-          AppStart.Construct();
-          try {
-            await AppStart.WaitForReached();
-          } finally {
-            AppStart.RemoveFrame();
-          }
+      PageShow: async function () {
+        AppStart.Construct();
+        try {
+          await AppStart.WaitForPageShow();
+        } finally {
+          AppStart.RemoveFrame();
         }
-      };
-    </script>
-    <script type="text/javascript" src="runtime.js"></script>
-    <script type="text/javascript" src="appstart.js"></script>
+      },
 
-    <script defer src="dotnet.js"></script>
+      ReachedManaged: async function () {
+        AppStart.Construct();
+        try {
+          await AppStart.WaitForReached();
+        } finally {
+          AppStart.RemoveFrame();
+        }
+      }
+    };
+  </script>
+  <script type="text/javascript" src="main.js"></script>
+  <script type="text/javascript" src="appstart.js"></script>
+  <script defer src="dotnet.js"></script>
+</body>
 
-  </body>
-</html>
+</html>
diff --git a/...mono/sample/wasm/browser-bench/runtime.js → src/mono/sample/wasm/browser-bench/main.js b/...mono/sample/wasm/browser-bench/runtime.js → src/mono/sample/wasm/browser-bench/main.js
@@ -3,18 +3,17 @@
 
 "use strict";
 var Module = {
-    config: null,
     configSrc: "./mono-config.json",
-    onDotNetReady: function () {
+    onDotNetReady: () => {
         try {
             App.init();
         } catch (error) {
             console.log("exception: " + error);
-            test_exit(1);
+            set_exit_code(1, error);
             throw (error);
         }
     },
-    onAbort: function (err) {
-        test_exit(1);
+    onAbort: (error) => {
+        set_exit_code(1, error);
     },
 };
diff --git a/src/mono/sample/wasm/browser-profile/README.md b/src/mono/sample/wasm/browser-profile/README.md
@@ -9,11 +9,11 @@
  public static void StopProfile(){}
 ```
 
-2. Initialize the profiler in the main javascript (e.g. runtime.js)
+2. Initialize the profiler in the main javascript (e.g. main.js)
 
 ```
 var Module = {
-  onRuntimeInitialized: function () {
+  onConfigLoaded: () => {
     ...
 
     if (config.enable_profiler)

diff --git a/src/mono/sample/wasm/browser-profile/Wasm.BrowserProfile.Sample.csproj b/src/mono/sample/wasm/browser-profile/Wasm.BrowserProfile.Sample.csproj
@@ -1,12 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <WasmCopyAppZipToHelixTestDir Condition="'$(ArchiveTests)' == 'true'">true</WasmCopyAppZipToHelixTestDir>
-    <WasmMainJSPath>runtime.js</WasmMainJSPath>
+    <WasmMainJSPath>main.js</WasmMainJSPath>
     <WasmProfilers>aot;</WasmProfilers>
   </PropertyGroup>
 
   <ItemGroup>
     <WasmExtraConfig Include="enable_profiler" Value="true" Condition="'$(EnableProfiler)' == 'true'" />
     <WasmExtraFilesToDeploy Include="index.html" />
   </ItemGroup>
+
+  <Target Name="RunSample" DependsOnTargets="RunSampleWithBrowser" />
 </Project>