Next: November Improvements (#1760)

Improved code generation
Resolved many svelte 5 issues
Lots of improvements to grids and layout.
Fixed app constantly refreshing due to chatty web sockets.

Author: niemyjski

src/Exceptionless.Web/ClientApp.angular/components/billing/change-plan-dialog.tpl.html

@@ -184,21 +184,14 @@ <h4>{{::'Credit Card' | translate}}</h4>
         <button type="button" role="button" class="btn btn-default" ng-click="vm.cancel()">
             {{::'Cancel' | translate}}
         </button>
-        <span ng-if="vm.isCancellingPlan()">
-            <button type="submit" role="button" class="btn btn-primary" ng-click="vm.showIntercom()">
-                {{::'Contact Us' | translate}}
-            </button>
-        </span>
-        <span ng-if="!vm.isCancellingPlan()">
-            <button
-                type="submit"
-                role="button"
-                class="btn btn-primary"
-                promise-button="vm.save(vm.changePlanForm.$valid)"
-                promise-button-busy-text="{{::'Changing Plan' | translate}}"
-            >
-                {{::'Change Plan' | translate}}
-            </button>
-        </span>
+        <button
+            type="submit"
+            role="button"
+            class="btn btn-primary"
+            promise-button="vm.save(vm.changePlanForm.$valid)"
+            promise-button-busy-text="{{::'Changing Plan' | translate}}"
+        >
+            {{::'Change Plan' | translate}}
+        </button>
     </div>
 </form>

src/Exceptionless.Web/ClientApp/api-templates/class-data-contract.ejs

@@ -6,7 +6,7 @@ export class <%~ contract.name %> {
   <% for (const field of contract.$content) { %>
     <%~ includeFile('@base/object-field-jsdoc.ejs', { ...it, field }) %>
     <%~ includeFile('./object-field-class-validator.ejs', { ...it, field }) %>
-    <%~ field.name %><%~ field.isRequired || field.nullable !== true ? '!' : '' %>: <%~ field.value.replaceAll('any', 'unknown') %><%~ field.type === "object" && field.nullable === true ? ' | null' : '' %><%~ field.nullable === true ? ' = null' : '' %>;
+    <%~ field.name %><%~ field.isRequired || !field.nullable ? '!' : '' %><%~ field.nullable ? '?' : '' %>: <%~ field.value.replaceAll('any', 'unknown') %>;
   <% } %>
 }
 

src/Exceptionless.Web/ClientApp/api-templates/object-field-class-validator.ejs

@@ -22,7 +22,7 @@ function getFormatValidation(field) {
 }
 
 const validationDecorators = _.compact([
-    !field.isRequired && "@IsOptional()",
+    !field.isRequired && field.nullable && "@IsOptional()",
     (field.name === "id" || field.name.endsWith("_id")) && `@IsMongoId({ message: '${field.name} must be a valid ObjectId.' })`,
     field.name === "url" && `@IsUrl({}, { message: '${field.name} must be a valid URL.' })`,
     !_.isUndefined(field.format) && getFormatValidation(field),
@@ -32,7 +32,7 @@ const validationDecorators = _.compact([
     !_.isUndefined(field.type) && (field.type === "object" || (field.type === "array" && field.items.$ref)) && `@ValidateNested({ message: '${field.name} must be a valid nested object.' })`,
 ]);
 
-if (!validationDecorators.length && field.isRequired) {
+if (!validationDecorators.length && (field.isRequired || !field.nullable)) {
     validationDecorators.push(`@IsDefined({ message: '${field.name} is required.' })`);
 }
 

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -23,40 +23,40 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@iconify-json/lucide": "^1.2.16",
+        "@iconify-json/lucide": "^1.2.17",
         "@playwright/test": "^1.49.0",
         "@sveltejs/adapter-static": "^3.0.6",
-        "@sveltejs/kit": "^2.8.3",
+        "@sveltejs/kit": "^2.8.5",
         "@sveltejs/vite-plugin-svelte": "^4.0.2",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^22.9.3",
+        "@types/node": "^22.10.1",
         "@types/throttle-debounce": "^5.0.2",
         "autoprefixer": "^10.4.20",
         "cross-env": "^7.0.3",
         "eslint": "^9.15.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-perfectionist": "^4.0.3",
+        "eslint-plugin-perfectionist": "^4.1.2",
         "eslint-plugin-svelte": "^2.46.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.49",
-        "prettier": "^3.3.3",
+        "prettier": "^3.4.1",
         "prettier-plugin-svelte": "^3.3.2",
         "prettier-plugin-tailwindcss": "^0.6.9",
-        "svelte": "^5.2.7",
+        "svelte": "^5.2.10",
         "svelte-check": "^4.1.0",
         "swagger-typescript-api": "^13.0.23",
         "tslib": "^2.8.1",
         "typescript": "^5.7.2",
-        "typescript-eslint": "^8.15.0",
+        "typescript-eslint": "^8.16.0",
         "vite": "^5.4.11",
-        "vitest": "^2.1.5"
+        "vitest": "^2.1.6"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.29.0",
         "@iconify-json/mdi": "^1.2.1",
-        "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@ccce0b8",
-        "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@ccce0b8",
+        "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@28f98f9",
+        "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@28f98f9",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@typeschema/class-validator": "^0.3.0",
         "bits-ui": "^1.0.0-next.64",
@@ -66,7 +66,7 @@
         "mode-watcher": "^0.5.0",
         "oidc-client-ts": "^3.1.0",
         "pretty-ms": "^9.2.0",
-        "runed": "^0.15.3",
+        "runed": "^0.15.4",
         "svelte-sonner": "^0.3.28",
         "svelte-time": "^0.9.0",
         "sveltekit-superforms": "^2.20.1",
@@ -75,7 +75,7 @@
         "tailwindcss": "^3.4.15",
         "tailwindcss-animate": "^1.0.7",
         "throttle-debounce": "^5.0.2",
-        "unplugin-icons": "^0.20.1"
+        "unplugin-icons": "^0.20.2"
     },
     "type": "module"
 }

src/Exceptionless.Web/ClientApp/package.json

@@ -4,116 +4,116 @@
 
 ### TODO
 
--   Investigate loading data in - export function load({ url, fetch }) {}
+- Investigate loading data in - export function load({ url, fetch }) {}
 
 #### shadcn svelte upgrade
 
--   on:
--   slots
+- on:
+- slots
 
 #### sveltekit
 
--   page.subscribe
--   get(
+- page.subscribe
+- get(
 
 ## General
 
--   <https://kit.svelte.dev/docs/project-structure>
--   <https://github.com/laoshaw/sveltespa>
--   <https://khromov.se/the-missing-guide-to-understanding-adapter-static-in-sveltekit/>
--   <https://marketsplash.com/tutorials/svelte/svelte-onclick/>
+- <https://kit.svelte.dev/docs/project-structure>
+- <https://github.com/laoshaw/sveltespa>
+- <https://khromov.se/the-missing-guide-to-understanding-adapter-static-in-sveltekit/>
+- <https://marketsplash.com/tutorials/svelte/svelte-onclick/>
 
 ## Forms
 
--   <https://joyofcode.xyz/sveltekit-progressive-enhancement>
--   <https://joyofcode.xyz/working-with-forms-in-sveltekit>
+- <https://joyofcode.xyz/sveltekit-progressive-enhancement>
+- <https://joyofcode.xyz/working-with-forms-in-sveltekit>
 
 ## Data Tables
 
--   <https://github.com/TanStack/table>
--   <https://svelte-headless-table.bryanmylee.com/#headless>
--   <https://tanstack.com/table/v8/docs/guide/column-sizing>
--   <https://www.youtube.com/watch?v=-Zuo3UWjjI8>
--   <https://tanstack.com/table/v8/docs/examples/svelte/basic>
--   <https://codesandbox.io/examples/package/@tanstack/svelte-table>
--   <https://codesandbox.io/s/tanstack-table-example-svelte-basic-4jif2l?file=/src/App.svelte>
--   <https://tailwindcomponents.com/component/free-tailwind-css-advance-table-component>
--   <https://tailwindcomponents.com/component/table-1>
--   <https://tuk.dev/components/webapp/table/advance_table>
--   <https://github.dev/phartenfeller/sveltekit-1.0-sqlite-demo-app/tree/tut-13-tanstack-table-edit-row>
+- <https://github.com/TanStack/table>
+- <https://svelte-headless-table.bryanmylee.com/#headless>
+- <https://tanstack.com/table/v8/docs/guide/column-sizing>
+- <https://www.youtube.com/watch?v=-Zuo3UWjjI8>
+- <https://tanstack.com/table/v8/docs/examples/svelte/basic>
+- <https://codesandbox.io/examples/package/@tanstack/svelte-table>
+- <https://codesandbox.io/s/tanstack-table-example-svelte-basic-4jif2l?file=/src/App.svelte>
+- <https://tailwindcomponents.com/component/free-tailwind-css-advance-table-component>
+- <https://tailwindcomponents.com/component/table-1>
+- <https://tuk.dev/components/webapp/table/advance_table>
+- <https://github.dev/phartenfeller/sveltekit-1.0-sqlite-demo-app/tree/tut-13-tanstack-table-edit-row>
 
 ## State
 
--   <https://joyofcode.xyz/svelte-context-with-stores>
--   <https://joyofcode.xyz/svelte-state-management>
+- <https://joyofcode.xyz/svelte-context-with-stores>
+- <https://joyofcode.xyz/svelte-state-management>
 
 ## Authentication
 
--   <https://github.com/sveltejs/realworld>
--   <https://github.com/authts/oidc-client-ts>
--   <https://authjs.dev/reference/sveltekit>
--   <https://github.dev/rvs1257/svelte-zitadel-pkce>
--   <https://github.com/Dan6erbond/sk-auth>
--   <https://hartenfeller.dev/blog/sveltekit-diy-authentication-authorization>
--   <https://www.swyx.io/svelte-auth>
--   <https://ashutosh.dev/how-to-do-authentication-in-svelte-using-store/>
--   <https://www.reddit.com/r/sveltejs/comments/117tvx7/how_to_protect_routes_with_login_check/>
--   <https://github.dev/nextauthjs/sveltekit-auth-example>
--   <https://github.com/nstuyvesant/sveltekit-auth-example>
--   <https://authjs.dev/getting-started/credentials-tutorial>
--   <https://github.com/search?q=SvelteKitAuth+client&type=code&p=2>
--   <https://github.com/GeeTee/sveltekitAuth-directus/blob/master/src/routes/confidentiel/__layout.svelte>
--   <https://github.com/GeeTee/sveltekitAuth-directus-sdk/blob/master/src/routes/sign-out.svelte>
--   <https://github.com/nicklascarnegie/sveltekitauth-token-rotation-demo/blob/master/src/hooks.server.ts>
--   <https://joyofcode.xyz/sveltekit-authentication-using-cookies#passing-user-data-to-pages>
+- <https://github.com/sveltejs/realworld>
+- <https://github.com/authts/oidc-client-ts>
+- <https://authjs.dev/reference/sveltekit>
+- <https://github.dev/rvs1257/svelte-zitadel-pkce>
+- <https://github.com/Dan6erbond/sk-auth>
+- <https://hartenfeller.dev/blog/sveltekit-diy-authentication-authorization>
+- <https://www.swyx.io/svelte-auth>
+- <https://ashutosh.dev/how-to-do-authentication-in-svelte-using-store/>
+- <https://www.reddit.com/r/sveltejs/comments/117tvx7/how_to_protect_routes_with_login_check/>
+- <https://github.dev/nextauthjs/sveltekit-auth-example>
+- <https://github.com/nstuyvesant/sveltekit-auth-example>
+- <https://authjs.dev/getting-started/credentials-tutorial>
+- <https://github.com/search?q=SvelteKitAuth+client&type=code&p=2>
+- <https://github.com/GeeTee/sveltekitAuth-directus/blob/master/src/routes/confidentiel/__layout.svelte>
+- <https://github.com/GeeTee/sveltekitAuth-directus-sdk/blob/master/src/routes/sign-out.svelte>
+- <https://github.com/nicklascarnegie/sveltekitauth-token-rotation-demo/blob/master/src/hooks.server.ts>
+- <https://joyofcode.xyz/sveltekit-authentication-using-cookies#passing-user-data-to-pages>
 
 ## Theming
 
--   <https://joyofcode.xyz/make-a-svelte-component-library>
--   <https://joyofcode.xyz/using-future-css-in-svelte>
--   <https://svelte.dev/repl/03f0be0c4dc54eb4af5a168f644f5c31?version=3.19.1>
--   <https://larainfo.com/blogs/tailwind-daisyui-registration-form-example>
--   <https://sveltethemes.dev/resources>
--   <https://tailwindui.com/components/application-ui/forms/sign-in-forms>
--   <https://daisyui.com/components/drawer/>
--   <https://tailwindcss.com/docs/customizing-colors>
--   <https://github.com/vaheqelyan/svelte-grid>
--   <https://svelte.dev/repl/329d9ab4b27543afaf735acfbc6bbec7?version=3.20.1>
--   <https://svelte.dev/repl/03f0be0c4dc54eb4af5a168f644f5c31?version=3.19.1>
--   <https://github.com/GeekyAnts/sb-admin-svelte>
+- <https://joyofcode.xyz/make-a-svelte-component-library>
+- <https://joyofcode.xyz/using-future-css-in-svelte>
+- <https://svelte.dev/repl/03f0be0c4dc54eb4af5a168f644f5c31?version=3.19.1>
+- <https://larainfo.com/blogs/tailwind-daisyui-registration-form-example>
+- <https://sveltethemes.dev/resources>
+- <https://tailwindui.com/components/application-ui/forms/sign-in-forms>
+- <https://daisyui.com/components/drawer/>
+- <https://tailwindcss.com/docs/customizing-colors>
+- <https://github.com/vaheqelyan/svelte-grid>
+- <https://svelte.dev/repl/329d9ab4b27543afaf735acfbc6bbec7?version=3.20.1>
+- <https://svelte.dev/repl/03f0be0c4dc54eb4af5a168f644f5c31?version=3.19.1>
+- <https://github.com/GeekyAnts/sb-admin-svelte>
 
 ## Storage
 
--   <https://github.com/joshnuss/svelte-persisted-store>
+- <https://github.com/joshnuss/svelte-persisted-store>
 
 ## i18n
 
--   <https://github.com/kaisermann/svelte-i18n>
--   <https://github.com/sveltekit-i18n/lib>
--   <https://github.com/nubolab-ffwd/svelte-fluent>
+- <https://github.com/kaisermann/svelte-i18n>
+- <https://github.com/sveltekit-i18n/lib>
+- <https://github.com/nubolab-ffwd/svelte-fluent>
 
 ## Validation
 
--   <https://github.com/typestack/class-validator>
--   <https://learn.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-7.0>
--   <https://github.com/DamianEdwards/MiniValidation>
--   <https://github.dev/DamianEdwards/MinimalApis.Extensions>
--   <https://benfoster.io/blog/minimal-api-validation-endpoint-filters/>
+- <https://github.com/typestack/class-validator>
+- <https://learn.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-7.0>
+- <https://github.com/DamianEdwards/MiniValidation>
+- <https://github.dev/DamianEdwards/MinimalApis.Extensions>
+- <https://benfoster.io/blog/minimal-api-validation-endpoint-filters/>
 
 ## Networking
 
--   <https://tanstack.com/query/v5/docs/svelte/examples/svelte/simple>
--   <https://kit.svelte.dev/docs/load>
--   <https://github.com/acacode/swagger-typescript-api>
--   <https://learn.microsoft.com/en-us/openapi/kiota/quickstarts/dotnet>
--   <https://github.com/microsoft/kiota/tree/main>
--   <https://learn.microsoft.com/en-us/openapi/kiota/quickstarts/typescript>
--   <https://medium.com/@wundergraph/introducing-the-new-svelte-query-client-836d6e961c>
--   <https://github.com/JacobLinCool/sveltekit-api>
--   <https://openapi.tools/>
--   <https://orval.dev/guides/svelte-query>
--   <https://github.com/drwpow/openapi-typescript>
--   <https://dev.to/fbjorn/a-typed-http-client-for-sveltekit-88b>
--   <https://github.com/OpenAPITools/openapi-generator-cli>
--   <https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch>
--   <https://dev.to/fbjorn/a-typed-http-client-for-sveltekit-88b>
+- <https://tanstack.com/query/v5/docs/svelte/examples/svelte/simple>
+- <https://kit.svelte.dev/docs/load>
+- <https://github.com/acacode/swagger-typescript-api>
+- <https://learn.microsoft.com/en-us/openapi/kiota/quickstarts/dotnet>
+- <https://github.com/microsoft/kiota/tree/main>
+- <https://learn.microsoft.com/en-us/openapi/kiota/quickstarts/typescript>
+- <https://medium.com/@wundergraph/introducing-the-new-svelte-query-client-836d6e961c>
+- <https://github.com/JacobLinCool/sveltekit-api>
+- <https://openapi.tools/>
+- <https://orval.dev/guides/svelte-query>
+- <https://github.com/drwpow/openapi-typescript>
+- <https://dev.to/fbjorn/a-typed-http-client-for-sveltekit-88b>
+- <https://github.com/OpenAPITools/openapi-generator-cli>
+- <https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch>
+- <https://dev.to/fbjorn/a-typed-http-client-for-sveltekit-88b>

src/Exceptionless.Web/ClientApp/resources.md

@@ -1,15 +1,30 @@
+import type { WebSocketMessageValue } from '$features/websockets/models';
+
 import { accessToken } from '$features/auth/index.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+import { createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { PersistentEvent } from './models';
 
+export async function invalidatePersistentEventQueries(queryClient: QueryClient, message: WebSocketMessageValue<'PersistentEventChanged'>) {
+    const { id, stack_id } = message;
+    if (id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.id(id) });
+    }
+
+    if (stack_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.stacks(stack_id) });
+    }
+
+    if (!id && !stack_id) {
+        await queryClient.invalidateQueries({ queryKey: queryKeys.type });
+    }
+}
+
 export const queryKeys = {
-    all: ['PersistentEvent'] as const,
-    allWithFilters: (filters: string) => [...queryKeys.all, { filters }] as const,
-    id: (id: string | undefined) => [...queryKeys.all, id] as const,
-    stacks: (id: string | undefined) => [...queryKeys.all, 'stacks', id] as const,
-    stackWithFilters: (id: string | undefined, filters: string) => [...queryKeys.stacks(id), { filters }] as const
+    id: (id: string | undefined) => [...queryKeys.type, id] as const,
+    stacks: (id: string | undefined) => [...queryKeys.type, 'stacks', id] as const,
+    type: ['PersistentEvent'] as const
 };
 
 export interface GetEventByIdProps {