use vite dev for serving js

sillsdev · Jan 7, 2025 · 16e8c9e · 16e8c9e
1 parent 12bff6b
commit 16e8c9e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 27 deletions.
diff --git 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<SvelteLayout> Logger
 @inject FwLiteProvider FwLiteProvider
+@inject IHostEnvironment Environment;
 @implements IAsyncDisposable
-
-<link rel="modulepreload" href="@Assets["_content/FwLiteShared/viewer/svelte-ux.js"]">
-<link rel="stylesheet" href="@Assets["_content/FwLiteShared/viewer/index.css"]"/>
+@if (useDevAssets)
+{
+    <script type="module" src="http://localhost:5173/@@vite/client"></script>
+}
+else
+{
+    <link rel="modulepreload" href="@Assets["_content/FwLiteShared/viewer/svelte-ux.js"]">
+    <link rel="stylesheet" href="@Assets["_content/FwLiteShared/viewer/main.css"]"/>
+}
 <script>
     window['setOverrideService'] = (key, service) => {
         window.lexbox ??= {};
@@ -36,6 +44,8 @@
 @Body
 
 @code {
+    private bool useDevAssets => Environment.IsDevelopment();
+    // private bool useDevAssets => false;
     private IJSObjectReference? module;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -48,8 +58,14 @@
                 await FwLiteProvider.SetService(JS, serviceKey, service);
             }
 
-            module = await JS.InvokeAsync<IJSObjectReference>("import",
-                "/" + Assets["_content/FwLiteShared/viewer/index.js"]);
+            if (useDevAssets)
+            {
+                module = await JS.InvokeAsync<IJSObjectReference>("import", "http://localhost:5173/src/main.ts");
+            } else
+            {
+                module = await JS.InvokeAsync<IJSObjectReference>("import",
+                    "/" + Assets["_content/FwLiteShared/viewer/main.js"]);
+            }
         }
     }
 

diff --git a/backend/FwLite/FwLiteWeb/Components/App.razor b/backend/FwLite/FwLiteWeb/Components/App.razor
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<Root @rendermode="InteractiveServer"/>
+<Root @rendermode="new InteractiveServerRenderMode(prerender:false)"/>
 <script src="_framework/blazor.web.js"></script>
 </body>
 

diff --git a/frontend/viewer/src/lib/append-head-hack.ts b/frontend/viewer/src/lib/append-head-hack.ts
@@ -0,0 +1,15 @@
+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
+  const headerAppend = document.head.appendChild;
+  document.head.appendChild = function newAppend<T extends Node>(node: T) {
+    //this is used for both svelte and vite imports
+    if (node.tagName === '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
@@ -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
@@ -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: ['src/main.ts', 'src/app.postcss'],
         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'],
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     </head>
     <body>
-    <Root @rendermode="InteractiveServer"/>
+    <Root @rendermode="new InteractiveServerRenderMode(prerender:false)"/>
     <script src="_framework/blazor.web.js"></script>
     </body>
@@ Expand Down @@