Skip to content

Commit

Permalink
prevent svelte from catching navigation to allow blazor to handle it,…
Browse files Browse the repository at this point in the history
… then notify svelte of navigation from the blazor event
  • Loading branch information
hahn-kev committed Dec 13, 2024
1 parent db8e929 commit 07ff5de
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 13 deletions.
1 change: 1 addition & 0 deletions backend/FwLite/FwLiteDesktop/FwLiteDesktopKernel.cs
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ public static void AddFwLiteDesktopServices(this IServiceCollection services,
var defaultDataPath = IsPortableApp ? Directory.GetCurrentDirectory() : FileSystem.AppDataDirectory;
var baseDataPath = Path.GetFullPath(configuration.GetSection("FwLiteDesktop").GetValue<string>("BaseDataDir") ??
defaultDataPath);
logging.AddFilter("FwLiteShared.Auth.LoggerAdapter", LogLevel.Warning);
Directory.CreateDirectory(baseDataPath);
services.Configure<LcmCrdtConfig>(config =>
{
Expand Down
7 changes: 7 additions & 0 deletions backend/FwLite/FwLiteDesktop/wwwroot/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
<title>FwLiteDesktop</title>
<base href="/" />
<link rel="icon" type="image/png" href="_content/FwLiteShared/favicon.png"/>
<script>
window.onBlazorNavigate = (path) => {
if ('svelteNavigate' in window) {
window.svelteNavigate(path);
}
};
</script>
</head>

<body>
Expand Down
6 changes: 5 additions & 1 deletion backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
@inherits LayoutComponentBase
@using FwLiteShared.Services
@using LexCore.Entities
@using Microsoft.Extensions.Logging
@inject IJSRuntime JS
@inject ILogger<SvelteLayout> Logger
@inject FwLiteProvider FwLiteProvider

<link rel="modulepreload" href="@Assets["_content/FwLiteShared/viewer/svelte-ux.js"]">
<link rel="stylesheet" href="@Assets["_content/FwLiteShared/viewer/index.css"]"/>
<script>
window['@FwLiteProvider.OverrideServiceFunctionName'] = (key, service) => {
window['setOverrideService'] = (key, service) => {
if (!window.lexbox || !window.lexbox.FwLiteProvider) {
if (window.lexbox && window.lexbox.DotNetServiceProvider) {
window.lexbox.FwLiteProvider = {};
Expand All @@ -19,6 +21,7 @@
const services = window.lexbox.FwLiteProvider;
services[key] = service;
};
</script>
<div id="svelte-app" class="contents">
</div>
Expand All @@ -30,6 +33,7 @@

protected override async Task OnAfterRenderAsync(bool firstRender)
{
Logger.LogInformation("OnAfterRenderAsync SvelteLayout");
if (firstRender)
{
foreach (var (serviceKey, service) in FwLiteProvider.GetServices())
Expand Down
4 changes: 3 additions & 1 deletion backend/FwLite/FwLiteShared/Pages/CrdtProject.razor
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@page "/project/{projectName}"
@using FwLiteShared.Layout
@using FwLiteShared.Services
@using Microsoft.Extensions.Logging
@inject FwLiteProvider FwLiteProvider
@inject ILogger<CrdtProject> Logger
@implements IAsyncDisposable
@layout SvelteLayout;

Expand All @@ -14,7 +16,7 @@

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
Logger.LogInformation("OnAfterRenderAsync CrdtProject, firstRender: {firstRender}", firstRender);
if (firstRender)
{
_disposable = await FwLiteProvider.InjectCrdtProject(ProjectName);
Expand Down
9 changes: 8 additions & 1 deletion backend/FwLite/FwLiteShared/Routes.razor
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
<Router AppAssembly="typeof(Layout.MainLayout).Assembly">
@inject IJSRuntime jsRuntime
@code {
private async Task OnNavigateAsync(NavigationContext context)
{
await jsRuntime.InvokeVoidAsync("onBlazorNavigate", context.Path);
}
}
<Router AppAssembly="typeof(Layout.MainLayout).Assembly" OnNavigateAsync="OnNavigateAsync">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.SvelteLayout)"/>
<FocusOnNavigate RouteData="routeData" Selector="h1"/>
Expand Down
19 changes: 13 additions & 6 deletions frontend/viewer/src/App.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
<script lang="ts">
import {Router, Route, navigate} from 'svelte-routing';
<script lang="ts" context="module">
import {navigate} from 'svelte-routing';
window.svelteNavigate = (to: string) => {
console.log('svelteNavigate', to);
navigate(to, {replace: true});
};
</script>
<script lang="ts">
import {Router, Route} from 'svelte-routing';
import TestProjectView from './TestProjectView.svelte';
import FwDataProjectView from './FwDataProjectView.svelte';
import HomeView from './HomeView.svelte';
import NotificationOutlet from './lib/notifications/NotificationOutlet.svelte';
import Sandbox from './lib/sandbox/Sandbox.svelte';
import { settings } from 'svelte-ux';
import {settings} from 'svelte-ux';
import DotnetProjectView from './DotnetProjectView.svelte';
export let url = '';
Expand Down Expand Up @@ -54,7 +61,7 @@
<Route path="/fwdata/:name" let:params>
<Router {url} basepath="/fwdata/{params.name}">
{#key params.name}
<FwDataProjectView projectName={params.name}/>
<DotnetProjectView projectName={params.name}/>
{/key}
</Router>
</Route>
Expand All @@ -67,10 +74,10 @@
<HomeView/>
</Route>
<Route path="/sandbox">
<Sandbox />
<Sandbox/>
</Route>
<Route path="/*">
{setTimeout(() => navigate('/', { replace: true }))}
{setTimeout(() => navigate('/', {replace: true}))}
</Route>
</div>
</Router>
Expand Down
6 changes: 4 additions & 2 deletions frontend/viewer/src/DotnetProjectView.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@
export let projectName: string;
let serviceLoaded = false;
onMount(() => {
console.log('checking for minilcm');
//check for minilcm in on a timeout
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let timer: any;
timer = setInterval(() => {
if (window.lexbox.DotNetServiceProvider?.getService(DotnetService.MiniLcmApi)) {
clearTimeout(timer);
if (window.lexbox.DotNetServiceProvider?.hasService(DotnetService.MiniLcmApi)) {
clearInterval(timer);
serviceLoaded = true;
}
console.warn('minilcm not loaded');
}, 200);
});
</script>
Expand Down
4 changes: 2 additions & 2 deletions frontend/viewer/src/HomeView.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
{#each data ?? [] as project, rowIndex}
<tr class="tabular-nums">
{#each columns as column (column.name)}
<td use:tableCell={{ column, rowData:project, rowIndex, tableData: data }} use:links>
<td use:tableCell={{ column, rowData:project, rowIndex, tableData: data }}>
{#if column.name === 'fwdata'}
{#if project.fwdata}
<Button size="md" href={`/fwdata/${project.name}`}>
Expand Down Expand Up @@ -204,7 +204,7 @@
<td>
Test project
</td>
<td use:links>
<td>
<Button size="md" icon={mdiTestTube} href="/testing/project-view">
Open
</Button>
Expand Down
4 changes: 4 additions & 0 deletions frontend/viewer/src/lib/services/service-provider-dotnet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ export class DotNetServiceProvider {
this.services = fwLiteProvider;
}

public hasService(key: ServiceKey): boolean {
return !!this.services[key];
}

public getService<K extends ServiceKey>(key: K): LexboxServiceRegistry[K] | undefined {
this.validateAllServices();
let service = this.services[key] as unknown as DotNet.DotNetObject;
Expand Down

0 comments on commit 07ff5de

Please sign in to comment.