From 729585594994ae5acf54b1b96b62ac0b3c2eda35 Mon Sep 17 00:00:00 2001 From: Sedrak Dalaloyan Date: Sun, 15 Jun 2025 01:06:45 -0400 Subject: [PATCH] - Updated and upgraded several dependencies to work with svelte 5 --- .eslintrc.cjs | 24 +- .gitignore | 3 +- package.json | 23 +- src/components/NavBar.svelte | 6 +- src/lib/AgGridSvelte.svelte | 2 +- src/lib/SvelteFrameworkComponentWrapper.ts | 38 +- .../CustomHeader.svelte | 2 +- .../refresh-headers.svelte | 36 +- .../04-column-headers/header-height.svelte | 2 +- .../05-column-groups/group-changes.svelte | 8 +- .../06-column-sizing/resizing-groups.svelte | 4 +- .../07-column-moving/advanced-lock.svelte | 2 +- .../07-column-moving/lock-visible.svelte | 2 +- .../08-column-pinning/lock-pinned.svelte | 2 +- .../01-themes/index.svelte | 4 +- src/routes/guide/[slug]/+page.svelte | 7 +- svelte.config.js | 12 +- tsconfig.json | 5 +- vite.config.js | 17 +- yarn.lock | 1907 ++++++++++------- 20 files changed, 1273 insertions(+), 833 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index eaf19f5..6b22cf5 100644 --- a/.eslintrc.cjs +++ b/.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 } -}; +}; \ No newline at end of file diff --git a/.gitignore b/.gitignore index 3f97450..c5290bb 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ node_modules /dist .env deploy.sh -/test-results \ No newline at end of file +/test-results +/.idea/ diff --git a/package.json b/package.json index 064419d..ff6aac2 100644 --- a/package.json +++ b/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", diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte index 86d4474..1dc4972 100644 --- a/src/components/NavBar.svelte +++ b/src/components/NavBar.svelte @@ -27,14 +27,14 @@ on:click={() => (open = false)} aria-hidden="true" transition:fade={{ duration: 150 }} - /> + >
-
+
-
+
{/if} diff --git a/src/lib/AgGridSvelte.svelte b/src/lib/AgGridSvelte.svelte index 96bf29a..20b5e50 100644 --- a/src/lib/AgGridSvelte.svelte +++ b/src/lib/AgGridSvelte.svelte @@ -751,4 +751,4 @@ // TODO: custom row model -
+
diff --git a/src/lib/SvelteFrameworkComponentWrapper.ts b/src/lib/SvelteFrameworkComponentWrapper.ts index b321952..19fe316 100644 --- a/src/lib/SvelteFrameworkComponentWrapper.ts +++ b/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 - implements FrameworkComponentWrapper + extends BaseComponentWrapper + implements FrameworkComponentWrapper { - override createWrapper(UserSvelteComponent: SvelteComponentType): WrappableInterface { + override createWrapper(UserSvelteComponent: any): WrappableInterface { return new NewSvelteComponent(UserSvelteComponent); } } -class NewSvelteComponent

implements IComponent

, WrappableInterface { +class NewSvelteComponent

implements IComponent

, 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>) {} + 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

implements IComponent

, 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

implements IComponent

, 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). - // 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; } -} +} \ No newline at end of file diff --git a/src/routes/guide/02-columns/02-updating-defintions/CustomHeader.svelte b/src/routes/guide/02-columns/02-updating-defintions/CustomHeader.svelte index 65f2339..f9d4acd 100644 --- a/src/routes/guide/02-columns/02-updating-defintions/CustomHeader.svelte +++ b/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)} - /> + >. {/if}

{displayName}

diff --git a/src/routes/guide/02-columns/02-updating-defintions/refresh-headers.svelte b/src/routes/guide/02-columns/02-updating-defintions/refresh-headers.svelte index 16b03ae..375ff9a 100644 --- a/src/routes/guide/02-columns/02-updating-defintions/refresh-headers.svelte +++ b/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; } diff --git a/src/routes/guide/02-columns/04-column-headers/header-height.svelte b/src/routes/guide/02-columns/04-column-headers/header-height.svelte index c8c08b0..b6971a9 100644 --- a/src/routes/guide/02-columns/04-column-headers/header-height.svelte +++ b/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; } diff --git a/src/routes/guide/02-columns/05-column-groups/group-changes.svelte b/src/routes/guide/02-columns/05-column-groups/group-changes.svelte index af585ca..8934b4f 100644 --- a/src/routes/guide/02-columns/05-column-groups/group-changes.svelte +++ b/src/routes/guide/02-columns/05-column-groups/group-changes.svelte @@ -126,16 +126,16 @@