diff --git a/backend/FwLite/FwLiteMaui/MainPage.xaml b/backend/FwLite/FwLiteMaui/MainPage.xaml index ec18ea3c0..b0ad4a4c0 100644 --- a/backend/FwLite/FwLiteMaui/MainPage.xaml +++ b/backend/FwLite/FwLiteMaui/MainPage.xaml @@ -6,7 +6,7 @@ x:Class="FwLiteMaui.MainPage"> - + diff --git a/backend/FwLite/FwLiteMaui/wwwroot/index.html b/backend/FwLite/FwLiteMaui/wwwroot/index.html index 16b644ed4..4748ee3b8 100644 --- a/backend/FwLite/FwLiteMaui/wwwroot/index.html +++ b/backend/FwLite/FwLiteMaui/wwwroot/index.html @@ -6,16 +6,6 @@ FwLiteMaui - diff --git a/backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor b/backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor index bbc2bc5eb..6b35a9ab6 100644 --- a/backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor +++ b/backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor @@ -1,13 +1,21 @@ @inherits LayoutComponentBase @using FwLiteShared.Services +@using Microsoft.Extensions.Hosting @using Microsoft.Extensions.Logging @inject IJSRuntime JS @inject ILogger Logger @inject FwLiteProvider FwLiteProvider +@inject IHostEnvironment Environment; @implements IAsyncDisposable - - - +@if (useDevAssets) +{ + +} +else +{ + + +} + +@code { + +} diff --git a/backend/FwLite/FwLiteShared/Routes.razor b/backend/FwLite/FwLiteShared/Routes.razor index 00e759ac5..16ee987a7 100644 --- a/backend/FwLite/FwLiteShared/Routes.razor +++ b/backend/FwLite/FwLiteShared/Routes.razor @@ -1,8 +1,15 @@ @inject IJSRuntime jsRuntime @code { + bool firstNavigation = true; private async Task OnNavigateAsync(NavigationContext context) { - await jsRuntime.DurableInvokeVoidAsync("svelteNavigate", context.Path); + if (firstNavigation) + { + firstNavigation = false; + return; + } + if (RendererInfo.IsInteractive) + await jsRuntime.DurableInvokeVoidAsync("svelteNavigate", context.Path); } } diff --git a/backend/FwLite/FwLiteWeb/Components/App.razor b/backend/FwLite/FwLiteWeb/Components/App.razor index d99a9ce51..9ddcf3493 100644 --- a/backend/FwLite/FwLiteWeb/Components/App.razor +++ b/backend/FwLite/FwLiteWeb/Components/App.razor @@ -5,22 +5,11 @@ - - - + - + diff --git a/frontend/viewer/src/lib/append-head-hack.ts b/frontend/viewer/src/lib/append-head-hack.ts new file mode 100644 index 000000000..32658cf71 --- /dev/null +++ b/frontend/viewer/src/lib/append-head-hack.ts @@ -0,0 +1,16 @@ +if (import.meta.env.DEV) { + //when in dev mode, svelte and vite want to put style sheets in the head + //however blazor will remove them, so we need to put them in the body instead + // eslint-disable-next-line @typescript-eslint/unbound-method + const headerAppend = document.head.appendChild; + document.head.appendChild = function newAppend(node: T) { + //this is used for both svelte and vite imports + if (node.nodeName === 'STYLE') { + document.getElementById('svelte-app')?.appendChild(node); + } else { + headerAppend.call(document.head, node); + } + return node; + }; +} + diff --git a/frontend/viewer/src/main.ts b/frontend/viewer/src/main.ts index 055068464..19ce5504b 100644 --- a/frontend/viewer/src/main.ts +++ b/frontend/viewer/src/main.ts @@ -1,5 +1,6 @@ //*// v1 Run with normal Svelte App (advantages: tailwind classes stay up to date) - +import 'vite/modulepreload-polyfill'; +import './lib/append-head-hack'; import './app.postcss'; import App from './App.svelte'; @@ -9,9 +10,3 @@ setupDotnetServiceProvider(); new App({ target: document.getElementById('svelte-app')!, }); - -/*/// v2 Run with web-component in shadow dom - -import './web-component'; - -//*/ diff --git a/frontend/viewer/vite.config.ts b/frontend/viewer/vite.config.ts index f5756d8e9..94a797f8a 100644 --- a/frontend/viewer/vite.config.ts +++ b/frontend/viewer/vite.config.ts @@ -3,10 +3,11 @@ import {svelte} from '@sveltejs/vite-plugin-svelte'; import {svelteTesting} from '@testing-library/svelte/vite'; // https://vitejs.dev/config/ -export default defineConfig(({ mode }) => { +export default defineConfig(({ mode, command }) => { const webComponent = mode === 'web-component'; return { - base: '/_content/FwLiteShared/viewer', + base: !webComponent && command == "build" ? '/_content/FwLiteShared/viewer' : '/', + build: { ...(webComponent ? { lib: { @@ -16,11 +17,13 @@ export default defineConfig(({ mode }) => { outDir: 'dist-web-component', } : { outDir: '../../backend/FwLite/FwLiteShared/wwwroot/viewer', + manifest: true, }), minify: false, sourcemap: true, chunkSizeWarningLimit: 1000, rollupOptions: { + input: webComponent ? undefined : ['src/main.ts'], output: { entryFileNames: '[name].js', chunkFileNames: '[name].js', @@ -46,18 +49,9 @@ export default defineConfig(({ mode }) => { handler(warning); }, }), svelteTesting()], - ...(!webComponent ? { - server: { - open: 'http://localhost:5173/testing/project-view', - proxy: { - '/api': { - target: 'http://localhost:5137', - secure: false, - ws: true - } - } - } - } : {}), + server: { + origin: 'http://localhost:5173', + }, test: { environment: 'happy-dom', setupFiles: ['./vitest-setup.js'],