search

LostBeard / SpawnDev.BlazorJS

Full Blazor WebAssembly and Javascript Interop with multithreading via WebWorkers
https://blazorjs.spawndev.com
MIT License
78 stars 6 forks source link

Will it support auto mode and server mode in web apps？ #31

Closed hhhenggg closed 1 month ago

hhhenggg commented 1 month ago

I am looking for blazer to run JavaScript. This project is great, I need to use it in projects in auto mode，but the web app auto mode is not yet supported. Will it be supported in the future?

LostBeard commented 1 month ago

SpawnDev.BlazorJS requires IJSInProcessRuntime to make synchronous calls into the Javascript environment. Server side rendering uses the default Javascript runtime, IJSRuntime, which only supports asynchronous calls to Javascript. Because of that, there is no easy way to make SpawnDev.BlazorJS work in server side rendering at this time. I cannot say it will never work with server side rendering as I do have some ideas that I may try at some point, but I do not see it happening anytime soon.

hhhenggg commented 1 month ago

Thank you for your reply. I use the auto mode in blazor, which is something I need. I think many people will also need it, and I hope to use it in future projects. I will continue to monitor the progress of blazorjs, and thank you for providing excellent projects for everyone.

LostBeard commented 1 month ago

According to my project README.md I have tested SpawnDev.BlazorJS in auto mode and it is working. Have you tried it?

LostBeard commented 1 month ago

I'm sure it only works in the client project though and not in the server project.

hhhenggg commented 1 month ago

According to my project README.md I have tested SpawnDev.BlazorJS in auto mode and it is working. Have you tried it?

I have tried the webassembly mode and it works. The server that runs first in auto mode, and the client that runs only after downloading the client code, will report the following error if the service is not registered when running on the server. image image image

LostBeard commented 1 month ago

My comment:

SpawnDev.BlazorJS in auto mode and it is working.

That isn't very clear. So to clarify: The app Interactive render mode`` can be set toAuto (Server and WebAssembly)can use any rendering mode for components that do not use SpawnDev.BlazorJS. But components that do use SpawnDev.BlazorJS will have to be set toInteractiveWebAssemblywith prerendering disabled at the component level.Interactivity locationshould bePer page/component```.

Example WasmPage.raozr: 

@page "/wasm"
@using SpawnDev.BlazorJS;
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))

<h1>Wasm Page</h1>

RenderMode: @(OperatingSystem.IsBrowser() ? "WebAssembly" : "Server")

@code {

    [Inject]
    BlazorJSRuntime JS { get; set; }

    protected override void OnInitialized()
    {
        JS.Set("document.title", "Hello world from wasm page!");
    }
}

You can even use WASM components in the server project's serer rendered pages. The below component WasmComponent can be added to server rendered pages and it will load using the WASM environment

Example WasmComponent.raoz:

@using SpawnDev.BlazorJS;
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))

<h1>Wasm Component</h1>

RenderMode: @(OperatingSystem.IsBrowser() ? "WebAssembly" : "Server")

@code {

    [Inject]
    BlazorJSRuntime JS { get; set; }

    protected override void OnInitialized()
    {
        JS.Set("document.title", "Hello world from wasm component!");
    }
}

I spend most of my time working on the WASM part of it. I created a Blazor Web App to test this out to help clarify what needs to happen to get it working (for us both.) I hope this helps.

LostBeard commented 1 month ago

I uploaded the Blazor Web App project I tested with. The repo is here: BlazorJSWebAppTest

hhhenggg commented 1 month ago

Thank you, I know where the problem is and I used global auto mode. Or is it because it's running on the server。 image

LostBeard commented 1 month ago

I added a new section to the project README.md Blazor Web App compatibility

LostBeard commented 1 month ago

To change an existing project Interacticity location from Global to Per component/page remove the @rendermode attribute from the Routes element in your App.razor page. Then the @rendermode attribute will work in your WebAssembly pages and components.

Change this: 

<body>
    <Routes @rendermode="InteractiveAuto" />
    <script src="_framework/blazor.web.js"></script>
</body>

To this: 

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

Then this will work in your WebAssembly components: 

@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
LostBeard commented 1 month ago

Microsoft documentation on setting (or unsetting) the rendermode for the entire app: Apply a render mode to the entire app

hhhenggg commented 1 month ago

Thank you, I know all of this. My project has a lot of content, and the first access in client mode will be slow, so I need to run it on the server side, so I can only wait for the support server to run.