Интеграция веб-сборки Blazor в ReactJS ⇐ C#

[Anonymous]

Задача:
Имеется библиотека классов, написанная на C#. Необходимо сделать один метод доступным для вызова из ReactJS. Для этой задачи я решил использовать Blazor WebAssembly. Моим намерением было опубликовать в dotnet проект, написанный на BWASM. После этого необходимо было подключить опубликованные файлы через ReactJS для дальнейшего вызова функций из этих опубликованных файлов.
Необходимо вызвать функцию MdProcessor.ParseAndRender, передав ей строку как введите и получите результат в виде строки
Решение:
Program.cs BWASM:

Код: Выделить всё

using MarkdownProcessorWasm;
using MdPWASM;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
using MarkdownProcessor;
using MarkdownProcessor.Classes;
using MarkdownProcessor.Interfaces;
using MarkdownProcessor.Structs.Tags;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

var host = builder.Build();

var jsRuntime = host.Services.GetRequiredService();
await jsRuntime.InvokeVoidAsync("console.log", "Hello World from Blazor WebAssembly!");

var jsInterop = new MarkdownProcessorInterop();

await jsRuntime.InvokeVoidAsync("blazorInterop.registerProcessor", DotNetObjectReference.Create(jsInterop));

await host.RunAsync();

public class MarkdownProcessorInterop
{
private MdProcessor _markdownProcessor;

public MarkdownProcessorInterop()
{
var ital = new ItalicsTag();
var bold = new BoldTag();
var link = new Link();
var header = new HeaderTag();
var main = new MainTag();
var list = new List { bold, ital, link, header, main };

_markdownProcessor = new MdProcessor(new StringParser(list), new ConsoleMdRenderer());
}

[JSInvokable]
public string ParseMarkdown(string markdownText)
{
return _markdownProcessor.ParseAndRender(markdownText);
}
}

index.html WASM:

Код: Выделить всё

MdPWASM







window.blazorInterop = {
registerProcessor: function (processor) {
window.processor = processor;
},
parseMarkdown: async function (markdownText) {
if (!window.processor) {
throw new Error("WASM module is not ready yet.");
}
return await window.processor.invokeMethodAsync("ParseMarkdown", markdownText);
}
};

Идея была в том, чтобы добавить свойство parseMarkdown для окна, чтобы потом через DOM можно было вызывать нужную функцию в JS.
А это — это код клиентской части React:

Код: Выделить всё

useEffect(() => {
const loadBlazor = async () => {
try {
await import('http://localhost:8080/_framework/blazor.webassembly.js');

await window.Blazor.start({
loadBootResource: (type, name, defaultUri, integrity) => {
return `http://localhost:8080/_framework/${name}`;
}
}).then(() => {
console.log('Blazor WebAssembly is initialized');
}).catch(error => {
console.error('Blazor WebAssembly initialization error:', error);
});
} catch (error) {
console.error('Error while fetching Blazor WebAssembly:', error);
}
};

loadBlazor();
}, []);

const processMarkdown = async () =>  {
try {
if (window.processor) {
const parsedHtml = await window.blazorInterop.parseMarkdown(markdownText);
setHtmlOutput(parsedHtml);
} else {
console.error('Blazor WebAssembly is not loaded');
}
} catch (error) {
console.error('Error while parsing Markdown:', error);
}
};

Через localhost:8080 мы получаем опубликованные в dotnet файлы, необходимые для интеграции написанного на C# кода в JS. WebAssembly загружается успешно, даже функция вызова console.log, написанная на Blazor, работает успешно, но в следующей строке возникает ошибка:
ManagedError: Произошла одна или несколько ошибок. (Не удалось найти «blazorInterop.registerProcessor» («blazorInterop» не определено).
Ошибка: не удалось найти «blazorInterop.registerProcessor» («blazorInterop» не определено).
Проблема:
Проблема в том, что к тому времени, когда мы пытаемся позвонить

Код: Выделить всё

await jsRuntime.InvokeVoidAsync("blazorInterop.registerProcessor", DotNetObjectReference.Create(jsInterop));

в BWASM свойство blazorInterop еще не создано в окне. Я пытался отложить момент обращения к blazorInterop до его объявления, но попал в бесконечный цикл. Похоже, оно никогда не будет объявлено. Как решить эту проблему? Как объявить blazorInterop в окне как его свойство? Есть ли какие-либо способы превратить мою библиотеку классов MdProcessor в Wasm, но сохранить ReactJS в качестве основной и единственной среды интерфейса? Буду очень благодарен за любую помощь, желательно конструктивную

Подробнее здесь: https://stackoverflow.com/questions/791 ... to-reactjs