refactor(JS): Encapsulated JS in a module instead of using the gobal scope

BlazorMonaco/BlazorMonaco.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
  <PropertyGroup>
- <TargetFrameworks>netstandard2.0;net5.0;net6.0;net7.0</TargetFrameworks>
+ <TargetFrameworks>net5.0;net6.0;net7.0</TargetFrameworks>
  <RazorLangVersion>3.0</RazorLangVersion>
  <Authors>Serdar Ciplak</Authors>
  <RepositoryUrl>https://github.com/serdarciplak/BlazorMonaco</RepositoryUrl>
@@ -17,11 +17,6 @@ https://github.com/serdarciplak/BlazorMonaco/blob/master/CHANGELOG.md</PackageRe
  <PackageReadmeFile>README.md</PackageReadmeFile>
  </PropertyGroup>
 
- <ItemGroup Condition="$(TargetFramework.StartsWith('netstandard'))">
- <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.10" />
- <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.10" />
- </ItemGroup>
-
  <ItemGroup Condition="$(TargetFramework.StartsWith('net5'))">
  <PackageReference Include="Microsoft.AspNetCore.Components" Version="5.0.0" />
  <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.0" />

BlazorMonaco/Bridge/Editor.cs

@@ -1,5 +1,6 @@
 using BlazorMonaco.Editor;
 using BlazorMonaco.Helpers;
+using BlazorMonaco.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
@@ -31,7 +32,7 @@ public class Editor : ComponentBase, IDisposable
  public EventCallback OnDidInit { get; set; }
 
  [Inject]
- protected IJSRuntime jsRuntime { get; set; }
+ protected BlazorMonacoJsRuntime jsRuntime { get; set; }
 
  internal DotNetObjectReference<Editor> _dotnetObjectRef;
 

BlazorMonaco/Helpers/JsRuntimeExt.cs

@@ -1,4 +1,5 @@
-using Microsoft.JSInterop;
+using BlazorMonaco.Services;
+using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
 using System.Text;
@@ -8,20 +9,6 @@ namespace BlazorMonaco.Helpers
 {
  internal static class JsRuntimeExt
  {
- public static IJSRuntime Shared { get; set; }
-
- public static async Task SafeInvokeAsync(this IJSRuntime jsRuntime, string identifier, params object[] args)
- {
- if (jsRuntime == null)
- return;
- await jsRuntime.InvokeVoidAsync(identifier, args);
- }
-
- public static async Task<T> SafeInvokeAsync<T>(this IJSRuntime jsRuntime, string identifier, params object[] args)
- {
- if (jsRuntime == null)
- return default;
- return await jsRuntime.InvokeAsync<T>(identifier, args);
- }
+ public static BlazorMonacoJsRuntime Shared { get; set; }
  }
 }

BlazorMonaco/Services/BlazorMonacoJsRuntime.cs

@@ -0,0 +1,55 @@
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace BlazorMonaco.Services 
+{ 
+ /// <summary>
+ /// The service use to load the ESM version of BlazorMonaco
+ /// </summary>
+ public class BlazorMonacoJsRuntime
+ : IAsyncDisposable
+ {
+ /// <summary>
+ /// A reference to the js interop module
+ /// </summary>
+ private readonly Lazy<Task<IJSObjectReference>> moduleTask;
+
+
+ /// <summary>
+ /// Constructs a new <see cref="BlazorMonacoJsRuntime"/>
+ /// </summary>
+ /// <param name="jsRuntime">The service used to interop with JS</param>
+ public BlazorMonacoJsRuntime(IJSRuntime jsRuntime)
+ {
+ moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/BlazorMonaco/blazor-monaco-interop.js").AsTask());
+ }
+
+
+ public async Task SafeInvokeAsync(string identifier, params object[] args)
+ {
+ var module = await this.moduleTask.Value;
+ if (module == null)
+ return;
+ await module.InvokeVoidAsync(identifier, args);
+ }
+
+ public async Task<T> SafeInvokeAsync<T>(string identifier, params object[] args)
+ {
+ var module = await this.moduleTask.Value;
+ if (module == null)
+ return default;
+ return await module.InvokeAsync<T>(identifier, args);
+ }
+
+ /// <inheritdoc />
+ public async ValueTask DisposeAsync()
+ {
+ if (moduleTask.IsValueCreated)
+ {
+ var module = await moduleTask.Value;
+ await module.DisposeAsync();
+ }
+ }
+ }
+}

BlazorMonaco/wwwroot/blazor-monaco-interop.js

@@ -0,0 +1,3 @@
+import * as editor from './editor-interop.js';
+
+export const blazorMonaco = { editor };