[wasm] Webpack & NextJS & TypeScript samples (dotnet#63335)

- nextJs sample
- webpack sample
- typescript sample
Co-authored-by: campersau <buchholz.bastian@googlemail.com>

.gitignore

@@ -187,6 +187,7 @@ node_modules/
 *.metaproj.tmp
 bin.localpkg/
 src/mono/wasm/runtime/dotnet.d.ts.sha256
+src/mono/sample/wasm/browser-nextjs/public/
 
 # RIA/Silverlight projects
 Generated_Code/

src/libraries/tests.proj

@@ -13,6 +13,13 @@
     <TestTrimming Condition="'$(TestTrimming)' == ''">false</TestTrimming>
   </PropertyGroup>
 
+  <!-- Samples which are too complex for CI -->
+  <ItemGroup Condition="'$(TargetOS)' == 'Browser'">
+    <ProjectExclusions Include="$(MonoProjectRoot)sample\wasm\console-node-ts\Wasm.Console.Node.TS.Sample.csproj" />
+    <ProjectExclusions Include="$(MonoProjectRoot)sample\wasm\browser-webpack\Wasm.Browser.WebPack.Sample.csproj" />
+    <ProjectExclusions Include="$(MonoProjectRoot)sample\wasm\browser-nextjs\Wasm.Browser.NextJs.Sample.csproj" />
+  </ItemGroup>
+
   <!-- Wasm aot on !windows -->
   <ItemGroup Condition="'$(TargetOS)' == 'Browser' and '$(BuildAOTTestsOnHelix)' == 'true' and '$(RunDisabledWasmTests)' != 'true' and '$(RunAOTCompilation)' == 'true' and '$(BrowserHost)' != 'Windows'">
     <!-- Exceeds VM resources in CI on compilation: https://github.com/dotnet/runtime/issues/61339 -->

src/mono/sample/wasm/browser-nextjs/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

src/mono/sample/wasm/browser-nextjs/Program.cs

@@ -0,0 +1,16 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System;
+using System.Runtime.CompilerServices;
+
+namespace Sample
+{
+    public class Test
+    {
+        public static int Main()
+        {
+            return 42;
+        }
+    }
+}

src/mono/sample/wasm/browser-nextjs/README.md

@@ -0,0 +1,7 @@
+## Sample for React component in the NextJs app.
+
+Shows how to create react component and re-use runtime instance, when the component is instantiated multiple times.
+
+```
+dotnet build /p:TargetOS=Browser /p:TargetArchitecture=wasm /p:Configuration=Debug /t:RunSample
+```

src/mono/sample/wasm/browser-nextjs/Wasm.Browser.NextJs.Sample.csproj

@@ -0,0 +1,17 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <WasmCopyAppZipToHelixTestDir>false</WasmCopyAppZipToHelixTestDir>
+    <WasmMainJSPath>package.json</WasmMainJSPath>
+    <WasmAppDir>public</WasmAppDir>
+  </PropertyGroup>
+
+  <Target Name="InstallNpmPackage" AfterTargets="WasmBuildApp" DependsOnTargets="Build">
+    <Exec Command="npm install" WorkingDirectory="$(MSBuildProjectDirectory)"/>
+    <Exec Command="npm install $(MicrosoftNetCoreAppRuntimePackNativeDir) --no-save" WorkingDirectory="$(MSBuildProjectDirectory)"/>
+  </Target>
+
+  <Target Name="RunSample" DependsOnTargets="Build">
+    <Exec Command="npm run dev" WorkingDirectory="$(MSBuildProjectDirectory)"/>
+  </Target>
+
+</Project>

src/mono/sample/wasm/browser-nextjs/components/deepThought.js

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import createDotnetRuntime 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,
+            scriptDirectory: "/",
+            instantiateWasm: async (imports, successCallback) => {
+                try {
+                    const arrayBufferResult = await WebAssembly.instantiate(arrayBuffer, imports);
+                    successCallback(arrayBufferResult.instance);
+                } catch (err) {
+                    console.error(err);
+                    throw err;
+                }
+            }
+        });
+    } catch (err) {
+        console.error(err);
+        throw err;
+    }
+}
+
+async function dotnetMeaning() {
+    if (!dotnetRuntimePromise) {
+        dotnetRuntimePromise = createRuntime();
+    }
+    const { BINDING } = await dotnetRuntimePromise;
+    meaningFunction = BINDING.bind_static_method("[Wasm.Browser.NextJs.Sample] Sample.Test:Main");
+    return meaningFunction();
+}
+
+export default function DeepThought() {
+    const [meaning, setCount] = useState(undefined);
+
+    useEffect(async () => {
+        const meaning = await dotnetMeaning();
+        setCount(meaning);
+    }, []);
+
+    if (!meaning) {
+        return (<div>DeepThought is thinking ....</div>);
+    }
+    return (<div>Answer to the Ultimate Question of Life, the Universe, and Everything is : {meaning}!</div>);
+};