Improved sample project (#93)

#86

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ArcadeMode <5969155+ArcadeMode@users.noreply.github.com>

Author: ArcadeMode

Directory.Packages.props

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project>
   <ItemGroup>
+    <PackageVersion Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="10.0.3" />
     <PackageVersion Include="Microsoft.CodeAnalysis.CSharp" Version="5.0.0" />
     <PackageVersion Include="Microsoft.CodeAnalysis.Analyzers" Version="4.14.0" />
     <PackageVersion Include="coverlet.collector" Version="6.0.4" />

README.md

@@ -334,14 +334,6 @@ Table 2. TypeShim support for .NET-JS interop types
 
 *<sub>For `[TSExport]` classes</sub>
 
-## Run the sample
-
-To build and run the project:
-```
-cd Sample/TypeShim.Sample.Client && npm install && npm run build && cd ../TypeShim.Sample.Server && dotnet run
-```
-The app should be available on [http://localhost:5012](http://localhost:5012)
-
 ## <a name="installing"></a>Installing
 
 To use TypeShim all you have to do is install it directly into your `Microsoft.NET.Sdk.WebAssembly`-powered project. Check the [configuration](#configuration) section for configuration you might want to adjust to your project.

sample/TypeShim.Sample.Client/.gitignore sample/.gitignoresample/TypeShim.Sample.Client/.gitignore renamed to sample/.gitignore

@@ -97,7 +97,7 @@ temp/
 # Preserve root lock
 !package-lock.json
 # If individual workspace package-locks accidentally get created (npm -w install inside):
-@typeshim/*/package-lock.json
+@client/*/package-lock.json
 
 # -----------------------------
 # Misc bundler artifacts

sample/TypeShim.Sample/Dtos.cs sample/Library/Dtos.cssample/TypeShim.Sample/Dtos.cs renamed to sample/Library/Dtos.cs

@@ -1,4 +1,4 @@
-namespace TypeShim.Sample;
+namespace Client.Library;
 
 public class PeopleDto
 {

…e/TypeShim.Sample/TypeShim.Sample.csproj sample/Library/Library.csprojsample/TypeShim.Sample/TypeShim.Sample.csproj renamed to sample/Library/Library.csproj sample/TypeShim.Sample/TypeShim.Sample.csproj renamed to sample/Library/Library.csproj

@@ -5,28 +5,35 @@
     <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
     <Nullable>enable</Nullable>
 
-    <WasmFingerprintAssets>true</WasmFingerprintAssets>
+    <WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>
+    <WasmFingerprintAssets>false</WasmFingerprintAssets>
     <CompressionEnabled>false</CompressionEnabled>
+    <AppendTargetFrameworkToOutputPath>false</AppendTargetFrameworkToOutputPath>
+    <WasmEnableHotReload>false</WasmEnableHotReload>
   </PropertyGroup>
 
   <ItemGroup>
     <StaticWebAssetFingerprintPattern Include="JS" Pattern="*.js" Expression="#[.{fingerprint}]!" />
   </ItemGroup>
 
   <PropertyGroup>
+    <OutputPath>./bin/</OutputPath>
     <!--<TypeShim_GeneratedDir>../../../TypeShim</TypeShim_GeneratedDir>-->
-    <TypeShim_TypeScriptOutputDirectory>../../../../TypeShim.Sample.Client/@typeshim/wasm-exports</TypeShim_TypeScriptOutputDirectory>
-    <TypeShim_MSBuildMessagePriority>High</TypeShim_MSBuildMessagePriority>
+    <!--<TypeShim_TypeScriptOutputDirectory>wwwroot</TypeShim_TypeScriptOutputDirectory>-->
+    <!--<TypeShim_MSBuildMessagePriority>High</TypeShim_MSBuildMessagePriority>-->
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Hosting" />
     <PackageReference Include="TypeShim" />
-
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" />
   </ItemGroup>
+
+  <PropertyGroup>
+    <EnableDefaultContentItems>false</EnableDefaultContentItems>
+  </PropertyGroup>
   <ItemGroup>
-    <Folder Include="wwwroot\" />
+    <Content Include="wwwroot\**\*">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
 </Project>

sample/TypeShim.Sample/Models.cs sample/Library/Models.cssample/TypeShim.Sample/Models.cs renamed to sample/Library/Models.cs

@@ -1,7 +1,8 @@
 using System;
 using System.Threading.Tasks;
+using TypeShim;
 
-namespace TypeShim.Sample;
+namespace Client.Library;
 
 [TSExport]
 public class People()

sample/Library/PeopleApiClient.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net.Http;
+using System.Net.Http.Json;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace Client.Library;
+
+public class PeopleApiClient(HttpClient httpClient)
+{
+    public async Task<IEnumerable<Person>> GetAllPeopleAsync()
+    {
+        PeopleDto? dto = await httpClient.GetFromJsonAsync("/people/all", typeof(PeopleDto), PersonDtoSerializerContext.Default) as PeopleDto;
+        return dto?.People?.Select(dto => dto.ToPerson()) ?? [];
+    }
+}
+
+[JsonSourceGenerationOptions(
+    GenerationMode = JsonSourceGenerationMode.Serialization | JsonSourceGenerationMode.Metadata,
+    PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase)]
+[JsonSerializable(typeof(PeopleDto))]
+[JsonSerializable(typeof(PersonDto))]
+[JsonSerializable(typeof(PersonDto[]))]
+[JsonSerializable(typeof(DogDto))]
+[JsonSerializable(typeof(DogDto[]))]
+internal partial class PersonDtoSerializerContext : JsonSerializerContext { }

sample/Library/PeopleApp.cs

@@ -0,0 +1,37 @@
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
+using System;
+using System.Net.Http;
+using TypeShim;
+
+namespace Client.Library;
+
+[TSExport]
+public class PeopleAppOptions
+{
+    public required string BaseAddress { get; init; }
+}
+
+[TSExport]
+public class PeopleApp
+{
+    private readonly IHost _host;
+
+    public PeopleApp(PeopleAppOptions options)
+    {
+        // we dont -need- a servicecollection for this demo but its here to show you can use anything on the .net side
+        _host = new HostBuilder().ConfigureServices(services =>
+        {
+            services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(options.BaseAddress) });
+            services.AddSingleton<PeopleApiClient>();
+            services.AddSingleton<PeopleProvider>(sp => new PeopleProvider(sp.GetRequiredService<PeopleApiClient>()));
+        }).Build();
+        Console.WriteLine($".NET {nameof(PeopleApp)} Constructor completed");
+    }
+
+    public PeopleProvider GetPeopleProvider()
+    {
+        return _host.Services.GetRequiredService<PeopleProvider>();
+    }
+}

sample/TypeShim.Sample/PeopleProvider.cs sample/Library/PeopleProvider.cssample/TypeShim.Sample/PeopleProvider.cs renamed to sample/Library/PeopleProvider.cs

@@ -4,7 +4,7 @@
 using System.Threading.Tasks;
 using TypeShim;
 
-namespace TypeShim.Sample;
+namespace Client.Library;
 
 [TSExport]
 public class PeopleProvider
@@ -17,18 +17,10 @@ internal PeopleProvider(PeopleApiClient apiClient)
         _apiClient = apiClient;
     }
 
-    public Person[]? PeopleCache => AllPeople;
-    public Task<TimeoutUnit?>? DelayTask { get; set; } = null;
-
     public async Task<People> FetchPeopleAsync()
     {
         try
         {
-            if (DelayTask != null)
-            {
-                await Task.Delay((await DelayTask)?.Timeout ?? 0);
-            }
-
             if (AllPeople == null)
             {
                 AllPeople = [.. await _apiClient.GetAllPeopleAsync()];
@@ -46,11 +38,4 @@ public async Task<People> FetchPeopleAsync()
             throw; // hand over to js
         }
     }
-}
-
-
-[TSExport]
-public class TimeoutUnit
-{
-    public int Timeout { get; set; } = 0;
 }

sample/Library/Program.cs

@@ -0,0 +1,21 @@
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
+using System;
+using System.Net.Http;
+using System.Runtime.InteropServices.JavaScript;
+
+namespace Client.Library;
+
+public partial class Program
+{
+    public static void Main(string[] args)
+    {
+        Console.WriteLine(".NET Main method entered.");
+
+        // You can put any startup logic here like any other .NET application
+        // alternatively you could expose a class that embodies your app and treat the .NET code as a library.
+        // For this demo we'll go with the latter, PeopleApp will be constructed from the JS side.
+        Console.WriteLine($"{nameof(PeopleApp)} will be constructed from the JS side in this demo.");
+    }
+}