Migration to Svelte 5 and latest sveltekit

.eslintrc.cjs

@@ -1,13 +1,23 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    'prettier'
+  ],
+  plugins: ['svelte', '@typescript-eslint'],
   ignorePatterns: ['*.cjs'],
-  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-  settings: {
-    'svelte3/typescript': () => require('typescript')
-  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020
@@ -17,4 +27,4 @@ module.exports = {
     es2017: true,
     node: true
   }
-};
+};

.gitignore

@@ -5,4 +5,5 @@ node_modules
 /dist
 .env
 deploy.sh
-/test-results
+/test-results
+/.idea/

package.json

@@ -6,31 +6,32 @@
   "devDependencies": {
     "@playwright/test": "^1.34.0",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.18.0",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
-    "ag-grid-community": "^30.0.0",
-    "ag-grid-enterprise": "^30.0.0",
+    "ag-grid-community": "30.2.1",
+    "ag-grid-enterprise": "30.2.1",
     "commit-and-tag-version": "^11.2.1",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^3.9.2",
     "highlight.js": "^11.8.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.62.1",
-    "svelte": "^3.55.0",
-    "svelte-check": "^3.3.2",
-    "svelte-preprocess": "^5.0.3",
-    "svelte2tsx": "^0.6.14",
+    "sass": "^1.71.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^3.6.0",
+    "svelte-preprocess": "^6.0.3",
+    "svelte2tsx": "^0.7.0",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8"
+    "vite": "^6.2.6"
   },
   "peerDependencies": {
     "ag-grid-community": "^28 || ^29 || ^30",
-    "svelte": "^3"
+    "svelte": "^5"
   },
   "scripts": {
     "dev": "vite dev",

src/components/NavBar.svelte

@@ -27,14 +27,14 @@
     on:click={() => (open = false)}
     aria-hidden="true"
     transition:fade={{ duration: 150 }}
-  />
+  ></div>
   <div class="nav-bar" transition:fly={{ x: -200, duration: 200 }}>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <div tabindex="0" bind:this={start} />
+    <div tabindex="0" bind:this={start}></div>
     <Logo />
     <Sidebar visible {selected} />
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <div tabindex="0" bind:this={end} />
+    <div tabindex="0" bind:this={end}></div>
   </div>
 {/if}
 

src/lib/AgGridSvelte.svelte

@@ -751,4 +751,4 @@
   // TODO: custom row model
 </script>
 
-<div bind:this={eGui} style:height="100%" {style} class={className} />
+<div bind:this={eGui} style:height="100%" {style} class={className}></div>

src/lib/SvelteFrameworkComponentWrapper.ts

@@ -5,38 +5,37 @@ import {
   type IComponent,
   type WrappableInterface
 } from 'ag-grid-community';
-import type { ComponentType as SvelteComponentType, SvelteComponentTyped } from 'svelte';
-import { SvelteComponent } from 'svelte/internal';
+import { mount } from 'svelte';
 
 // Called when a Svelte component is provided to override a default grid component
 export class SvelteFrameworkComponentWrapper
-  extends BaseComponentWrapper<WrappableInterface>
-  implements FrameworkComponentWrapper
+    extends BaseComponentWrapper<WrappableInterface>
+    implements FrameworkComponentWrapper
 {
-  override createWrapper(UserSvelteComponent: SvelteComponentType): WrappableInterface {
+  override createWrapper(UserSvelteComponent: any): WrappableInterface {
     return new NewSvelteComponent(UserSvelteComponent);
   }
 }
 
-class NewSvelteComponent<P> implements IComponent<P>, WrappableInterface {
+class NewSvelteComponent<P = any> implements IComponent<P>, WrappableInterface {
   private eParentElement!: HTMLElement;
-  private componentInstance!: SvelteComponentTyped<{ params: P }>;
+  private componentInstance: any;
   private methods: { [name: string]: (...args: P[]) => void } = {
-    // Provide a default refresh method
     refresh: (params: P) => {
-      this.componentInstance.$set({ params });
+      if (this.componentInstance && typeof this.componentInstance.$set === 'function') {
+        this.componentInstance.$set({ params });
+      }
       return true;
     }
   };
 
-  constructor(private SvelteComponent: SvelteComponentType<SvelteComponentTyped<{ params: P }>>) {}
+  constructor(private SvelteComponent: any) {}
 
   init(params: P): void {
-    // Guaranteed to be called
     this.eParentElement = document.createElement('div');
     this.eParentElement.style.width = '100%';
     this.eParentElement.style.height = '100%';
-    this.componentInstance = new this.SvelteComponent({
+    this.componentInstance = mount(this.SvelteComponent, {
       target: this.eParentElement,
       props: { params }
     });
@@ -47,7 +46,9 @@ class NewSvelteComponent<P> implements IComponent<P>, WrappableInterface {
   }
 
   destroy(): void {
-    this.componentInstance.$destroy();
+    if (this.componentInstance && typeof this.componentInstance.$destroy === 'function') {
+      this.componentInstance.$destroy();
+    }
   }
 
   hasMethod(name: string): boolean {
@@ -64,14 +65,7 @@ class NewSvelteComponent<P> implements IComponent<P>, WrappableInterface {
 }
 
 export class SvelteFrameworkOverrides extends VanillaFrameworkOverrides {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   override isFrameworkComponent(comp: any): boolean {
-    // HACK: In dev, the component is wrapped in a Svelte Proxy, obscuring the prototype chain.
-    // Instead, components are identified by their class name (internally set to Proxy<ComponentName>).
-    // In prod, it should be safe to directly check if they extend SvelteComponent.
-    return (
-      comp?.prototype?.constructor?.name?.startsWith('Proxy<') ||
-      Object.prototype.isPrototypeOf.call(SvelteComponent, comp)
-    );
+    return typeof comp === 'function' && comp.prototype && '$$render' in comp.prototype;
   }
-}
+}

src/routes/guide/02-columns/02-updating-defintions/CustomHeader.svelte

@@ -17,7 +17,7 @@
       class="ag-icon ag-icon-menu"
       style:cursor="pointer"
       on:click={() => showColumnMenu(menuButtonRef)}
-    />
+    >.</button>
   {/if}
   <h4 style:margin="0">{displayName}</h4>
 </div>

src/routes/guide/02-columns/02-updating-defintions/refresh-headers.svelte

@@ -19,12 +19,12 @@
 
   function getColumnDefs(): ColDef[] {
     return [
-      { field: 'athlete' },
+      { field: 'athlete', initialWidth: 100, initialSort: 'asc' },
       { field: 'age' },
-      { field: 'country' },
+      { field: 'country', initialPinned: 'left' },
+      { field: 'sport' },
       { field: 'year' },
       { field: 'date' },
-      { field: 'sport' },
       { field: 'gold' },
       { field: 'silver' },
       { field: 'bronze' },
@@ -35,51 +35,45 @@
   let columnDefs = getColumnDefs();
 
   function onBtUpperNames() {
-    const newDefs = getColumnDefs();
-    newDefs.forEach((c) => {
+    columnDefs.forEach((c) => {
       c.headerName = c.field?.toUpperCase();
     });
-    columnDefs = newDefs;
+    columnDefs = columnDefs;
   }
 
   function onBtLowerNames() {
-    const newDefs = getColumnDefs();
-    newDefs.forEach((c) => {
+    columnDefs.forEach((c) => {
       c.headerName = c.field;
     });
-    columnDefs = newDefs;
+    columnDefs = columnDefs;
   }
 
   function onBtFilterOn() {
-    const newDefs = getColumnDefs();
-    newDefs.forEach((c) => {
+    columnDefs.forEach((c) => {
       c.filter = true;
     });
-    columnDefs = newDefs;
+    columnDefs = columnDefs;
   }
 
   function onBtFilterOff() {
-    const newDefs = getColumnDefs();
-    newDefs.forEach((c) => {
+    columnDefs.forEach((c) => {
       c.filter = false;
     });
-    columnDefs = newDefs;
+    columnDefs = columnDefs;
   }
 
   function onBtResizeOn() {
-    const newDefs = getColumnDefs();
-    newDefs.forEach((c) => {
+    columnDefs.forEach((c) => {
       c.resizable = true;
     });
-    columnDefs = newDefs;
+    columnDefs = columnDefs;
   }
 
   function onBtResizeOff() {
-    const newDefs = getColumnDefs();
-    newDefs.forEach((c) => {
+    columnDefs.forEach((c) => {
       c.resizable = false;
     });
-    columnDefs = newDefs;
+    columnDefs = columnDefs;
   }
 </script>
 

src/routes/guide/02-columns/04-column-headers/header-height.svelte

@@ -139,7 +139,7 @@
       font-size: 10px;
       height: 90px;
       padding-top: 36px;
-      margin-left: 0px;
+      margin-left: 0;
       color: #1b6d85;
       font-weight: bold;
     }

src/routes/guide/02-columns/05-column-groups/group-changes.svelte

@@ -126,16 +126,16 @@
       <button on:click={onBtNoGroups}>No Groups</button>
     </label>
     <label>
-      <div class="participant-group legend-box" />
+      <div class="participant-group legend-box"></div>
       <button on:click={onParticipantInGroupOnly}>Participant in Group</button>
     </label>
     <label>
-      <div class="medals-group legend-box" />
+      <div class="medals-group legend-box"></div>
       <button on:click={onMedalsInGroupOnly}>Medals in Group</button>
     </label>
     <label>
-      <div class="participant-group legend-box" />
-      <div class="medals-group legend-box" />
+      <div class="participant-group legend-box"></div>
+      <div class="medals-group legend-box"></div>
       <button on:click={onParticipantAndMedalsInGroups}>Participant and Medals in Group</button>
     </label>
   </div>

src/routes/guide/02-columns/06-column-sizing/resizing-groups.svelte

@@ -75,11 +75,11 @@
 <h2>Resizing Groups</h2>
 <div class="legend-bar">
   <div class="legend-item">
-    <span class="legend-box resizable-header" />
+    <span class="legend-box resizable-header"></span>
     Resizable Column
   </div>
   <div class="legend-item">
-    <span class="legend-box fixed-size-header" />
+    <span class="legend-box fixed-size-header"></span>
     Fixed Width Column
   </div>
 </div>

src/routes/guide/02-columns/07-column-moving/advanced-lock.svelte

@@ -84,7 +84,7 @@
 <div class="legend-bar">
   <button on:click={onPinAthlete}>Pin Athlete</button>
   <button on:click={onUnpinAthlete}>Un-Pin Athlete</button>
-  <span class="locked-col legend-box" />
+  <span class="locked-col legend-box"></span>
   Position Locked Column
 </div>
 

src/routes/guide/02-columns/07-column-moving/lock-visible.svelte

@@ -66,7 +66,7 @@
 <h2>Lock Visible</h2>
 
 <div class="legend-bar">
-  <span class="legend-box locked-visible" />
+  <span class="legend-box locked-visible"></span>
   Locked Visible Column
 </div>
 

src/routes/guide/02-columns/08-column-pinning/lock-pinned.svelte

@@ -44,7 +44,7 @@
 <h2>Lock Pinned</h2>
 
 <div class="legend-bar">
-  <span class="legend-box lock-pinned" />
+  <span class="legend-box lock-pinned"></span>
   Locked Column
 </div>
 

src/routes/guide/05-layout-&-styling/01-themes/index.svelte

@@ -35,11 +35,11 @@ ${'<'}/script>`}
   code={`<svelte:window> <!-- or add this directly in your HTML file -->
   <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/ag-grid-community@28.0.0/styles/ag-grid.css"
+    href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.2.1/styles/ag-grid.css"
   />
   <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/ag-grid-community@28.0.0/styles/ag-theme-alpine.css"
+    href="https://cdn.jsdelivr.net/npm/ag-grid-community@30.2.1/styles/ag-theme-alpine.css"
   />
 ${'<'}/svelte:window>
 `}

src/routes/guide/[slug]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { browser } from '$app/environment';
-  import { afterUpdate } from 'svelte';
   import Header from '../../../components/Header.svelte';
   import Navigation from '../../../components/Navigation.svelte';
   import Sidebar from '../../../components/Sidebar.svelte';
@@ -13,7 +12,8 @@
 
   let headings: string[] = [];
   let section: HTMLElement;
-  afterUpdate(() => {
+
+  $: if (section) {
     headings = [];
     for (const h2 of section.querySelectorAll('h2')) {
       const text = h2.textContent?.trim();
@@ -22,9 +22,8 @@
         h2.id = text;
       }
     }
-
     scrollToHash();
-  });
+  }
 </script>
 
 <Header selected={title} />