upgrade gsap, svelte, sveltekit

.eslintrc.cjs

@@ -24,6 +24,18 @@ module.exports = {
 			parser: 'svelte-eslint-parser',
 			parserOptions: {
 				parser: '@typescript-eslint/parser'
+			},
+			globals: {
+				"$props": "readonly",
+				"$state": "readonly",
+				"$derived": "readonly",
+				"$effect": "readonly",
+				"$bindable": "readonly"
+			},
+			rules: {
+				"no-undef": "off",
+				"@typescript-eslint/no-unused-vars": "off",
+				"no-unused-vars": "off"
 			}
 		}
 	],

.npmrc

@@ -1,3 +0,0 @@
-always-auth=true
-//npm.greensock.com/:_authToken=${GSAP_TOKEN}
-@gsap:registry=https://npm.greensock.com

package.json

@@ -12,31 +12,36 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-netlify": "^2.0.8",
+		"@sveltejs/adapter-netlify": "^5.0.0",
-		"@sveltejs/adapter-node": "^1.3.1",
+		"@sveltejs/adapter-node": "^5.0.0",
-		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.1.1",
 		"@types/node": "^20.5.1",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
+		"prettier": "^3.0.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier-plugin-svelte": "^3.0.0",
 		"sass": "^1.64.2",
 		"sharp": "^0.32.5",
-		"svelte": "^4.0.5",
+		"svelte": "^5.0.0",
-		"svelte-check": "^3.4.3",
+		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vanilla-lazyload": "^17.8.4",
-		"vite": "^4.4.2"
+		"vite": "^6.0.0"
 	},
 	"type": "module",
 	"dependencies": {
+		"@pixi/core": "^7.4.3",
+		"@pixi/filter-alpha": "^7.4.3",
+		"@pixi/filter-blur": "^7.4.3",
 		"@pixi/unsafe-eval": "^7.1.3",
-		"gsap": "npm:@gsap/shockingly@^3.12.2",
+		"gsap": "^3.13.0",
 		"mdsvex": "^0.11.0",
 		"pixi-filters": "^5.2.1",
 		"pixi.js": "^7.2.4",

src/ambient.d.ts

@@ -2,4 +2,11 @@
 declare module '$lib/assets/*' {
   const meta
   export default meta
-}
+}
+
+// Svelte 5 runes - compiler macros
+declare const $props: <T = {}>() => T;
+declare const $state: <T>(initial: T) => T;
+declare const $derived: <T>(fn: () => T) => T;
+declare const $effect: (fn: () => void | (() => void)) => void;
+declare const $bindable: <T>(initial?: T) => T;

src/lib/components/ContactCanvas.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
+import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
 import * as PIXI from 'pixi.js';
 import { BulgePinchFilter, TwistFilter } from 'pixi-filters';
 import gsap from 'gsap';
-import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import SplitText from 'gsap/dist/SplitText';
+import { SplitText } from 'gsap/SplitText';
-import { PixiPlugin } from "gsap/dist/PixiPlugin";
+import { PixiPlugin } from "gsap/PixiPlugin";
 import { onMount, onDestroy } from 'svelte';
 import { browser } from '$app/environment';
 import createCanvasText from '$lib/utils/createCanvasText';
 import createCanvasImg from '$lib/utils/createCanvasImg';
 import { tick } from 'svelte';
 
-export let textsToCanvas: Array<HTMLElement> = [];
+let { 
-export let imgsToCanvas: Array<HTMLElement> = [];
+	textsToCanvas = [],
+	imgsToCanvas = []
+}: {
+	textsToCanvas?: Array<HTMLElement>;
+	imgsToCanvas?: Array<HTMLElement>;
+} = $props();
 let app: PIXI.Application;
 let canvas: HTMLCanvasElement;
 
@@ -41,8 +47,6 @@ onMount(()=>{
       backgroundAlpha: 0,
       view: canvas,
     });
-
-    PIXI.Filter.defaultResolution = 2;
     
       //for debugging but Typescript has an issue with this:
     (globalThis as any).__PIXI_APP__ = app;

src/lib/components/Faq.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import gsap from "gsap";
-  export let summary: string;
+  import type { Snippet } from 'svelte';
+  let { summary, children }: { summary: string, children: Snippet } = $props();
   let details: HTMLElement;
   let contentHeight: number;
   let summaryHeight: number;
@@ -65,7 +66,7 @@
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <summary on:click={summaryClickHandler} on:keyup={summaryClickHandler}>{@html summary}</summary>
   <div class="faq-content">
-    <slot />
+    {@render children()}
   </div>
 </details>
 

src/lib/components/HomeCanvas.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
+import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
 import * as PIXI from 'pixi.js';
 import { BulgePinchFilter } from 'pixi-filters';
 import gsap from 'gsap';
-import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import SplitText from 'gsap/dist/SplitText';
+import { SplitText } from 'gsap/SplitText';
-import { PixiPlugin } from "gsap/dist/PixiPlugin";
+import { PixiPlugin } from "gsap/PixiPlugin";
 import { browser } from '$app/environment';
 import createCanvasText from '$lib/utils/createCanvasText';
 import createCanvasImg from '$lib/utils/createCanvasImg';
 import { onMount, onDestroy } from 'svelte';
 import { tick } from 'svelte';
 
-export let textsToCanvas: Array<HTMLElement> = [];
+let { 
-export let imgsToCanvas: Array<HTMLElement> = [];
+	textsToCanvas = [],
+	imgsToCanvas = []
+}: {
+	textsToCanvas?: Array<HTMLElement>;
+	imgsToCanvas?: Array<HTMLElement>;
+} = $props();
 let app: PIXI.Application;
 let canvas: HTMLCanvasElement;
 
@@ -41,8 +47,6 @@ onMount(()=>{
       view: canvas
     });
     
-    PIXI.Filter.defaultResolution = 2;
-    
       //for debugging but Typescript has an issue with this:
     (globalThis as any).__PIXI_APP__ = app;
     

src/lib/components/HomeIlluDev.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
   onMount(() => {
 

src/lib/components/HomeIlluShapes.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import HomeIlluShape from "./HomeIlluShape.svelte";
   import gsap from "gsap";
-  import MorphSVGPlugin from "gsap/dist/MorphSVGPlugin";
+  import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
-  import ScrollTrigger from "gsap/dist/ScrollTrigger";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
   import { onMount } from "svelte";
 
   onMount( () => {

src/lib/components/SmoothScroll.svelte

@@ -1,8 +1,8 @@
 <script lang='ts'>
   import { onMount } from "svelte";
   import { gsap } from "gsap";
-  import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
-  import { ScrollSmoother } from "gsap/dist/ScrollSmoother";
+  import { ScrollSmoother } from "gsap/ScrollSmoother";
 
   let smoother: ScrollSmoother;
   onMount( () => {

src/lib/components/WorkCanvas.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
+import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
 import * as PIXI from 'pixi.js';
 import { BulgePinchFilter } from 'pixi-filters';
 import gsap from 'gsap';
-import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import SplitText from 'gsap/dist/SplitText';
+import { SplitText } from 'gsap/SplitText';
-import { PixiPlugin } from "gsap/dist/PixiPlugin";
+import { PixiPlugin } from "gsap/PixiPlugin";
 import { onMount, onDestroy } from 'svelte';
 import { browser } from '$app/environment';
 import createCanvasText from '$lib/utils/createCanvasText';
 import createCanvasImg from '$lib/utils/createCanvasImg';
 import { tick } from 'svelte';
 
-export let textsToCanvas: Array<HTMLElement> = [];
+let { 
-export let imgsToCanvas: Array<HTMLElement> = [];
+  textsToCanvas = [],
-export let bulgeFactor: number = 0.15; // comes from attribute   
+	imgsToCanvas = [],
+	bulgeFactor = 0.15
+}: {
+  textsToCanvas?: Array<HTMLElement>;
+    imgsToCanvas?: Array<HTMLElement>;
+      bulgeFactor?: number;
+} = $props();
 let app: PIXI.Application;
 let canvas: HTMLCanvasElement;
 
@@ -78,10 +85,8 @@ onMount( () => {
   bulgefilter.strength = is_landscape ? bulgeFactor : bulgeFactor * 1.25;
   bulgefilter.center = center;
   // bulgefilter.resolution = 2;
-
-  PIXI.Filter.defaultResolution = 2;
   
-  app.stage.filters = [bulgefilter];
+  app.stage.filters = [(bulgefilter as unknown as PIXI.Filter)];
 
   
   /*----------------------------------

src/lib/utils/pixiInit.ts

@@ -0,0 +1,11 @@
+/**
+ * Initialize PixiJS settings before importing any filter packages.
+ * This prevents deprecation warnings from filter packages that check
+ * settings.FILTER_RESOLUTION during module load.
+ */
+import * as PIXI from 'pixi.js';
+
+// Set default resolution early to avoid deprecation warnings
+// from filter packages that use the deprecated settings.FILTER_RESOLUTION
+PIXI.Filter.defaultResolution = 2;
+

src/routes/+layout.svelte

@@ -3,7 +3,11 @@
   import Header from '$lib/components/Header.svelte';
   import Loader from '$lib/components/Loader.svelte';
   import { navigating, page } from '$app/stores';
-  export let data;
+  import type { Snippet } from 'svelte';
+  interface LayoutData {
+    pathname: string;
+  }
+  let { data, children }: { data: LayoutData, children: Snippet } = $props();
 </script>
 
 <svelte:head>
@@ -21,6 +25,6 @@
     {#if $navigating} 
       <Loader />
     {/if}
-    <slot />
+    {@render children()}
   </div>
 {/key}

src/routes/+page.svelte

@@ -3,10 +3,10 @@
   import Loader from '$lib/components/Loader.svelte';
   import { onMount } from 'svelte';
   import { gsap } from 'gsap';
-  import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
+  import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
   import { goto } from '$app/navigation';
-  import SplitText from 'gsap/dist/SplitText';
+  import { SplitText } from 'gsap/SplitText';
   import HomeIlluDev from '$lib/components/HomeIlluDev.svelte';
   import HomeIlluShapes from '$lib/components/HomeIlluShapes.svelte';
 

src/routes/contact/+page.svelte

@@ -2,8 +2,8 @@
   import { onMount } from 'svelte';
   import ContactCanvas from '$lib/components/ContactCanvas.svelte';
   import gsap from 'gsap';
-  import SplitText from 'gsap/dist/SplitText';
+  import { SplitText } from 'gsap/SplitText';
-  import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
   let canvasTexts: Array<HTMLElement> = [];
   let contactFormVisible = false;

src/routes/service/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import gsap from 'gsap';
-  import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  import SplitText from 'gsap/dist/SplitText';
+  import { SplitText } from 'gsap/SplitText';
   import Faq from '$lib/components/Faq.svelte';
   import ServiceCanvas from './ServiceCanvas.svelte';
-  import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
+  import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
 
   onMount( () => {  
 

src/routes/service/ServiceCanvas.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
   import * as PIXI from 'pixi.js';
   import { BulgePinchFilter } from 'pixi-filters';
   import gsap from 'gsap';
-  import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
   import { onMount } from 'svelte';
   
   let canvas: HTMLCanvasElement;

src/routes/work/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import gsap from 'gsap';
-  import SplitText from 'gsap/dist/SplitText';
+  import { SplitText } from 'gsap/SplitText';
-  export let data;
+  let { data } = $props();
 
   const orderedPosts = data.posts.sort((a, b) => {
     return a.meta.order - b.meta.order;

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

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { gsap } from 'gsap';
-  import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
+  import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
   import { CldImage } from 'svelte-cloudinary';
-  export let data;
+  let { data } = $props();
 
   let visible = false;
 

src/routes/work/[slug]/old+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
   import { CldImage } from 'svelte-cloudinary';
   export let data;
 

src/routes/work/workUtils.ts

@@ -1,6 +1,6 @@
 import { goto } from '$app/navigation';
 import gsap from 'gsap';
-import SplitText from 'gsap/dist/SplitText';
+import { SplitText } from 'gsap/SplitText';
 import { workbulge } from '$lib/utils/stores';
 
 const bulge = {factor: 0};

svelte.config.js

@@ -1,7 +1,6 @@
 // import adapter from '@sveltejs/adapter-auto';
 // import adapter from '@sveltejs/adapter-node';
 import adapter from '@sveltejs/adapter-netlify';
-import { vitePreprocess } from '@sveltejs/kit/vite';
 import preprocess from 'svelte-preprocess';
 import { mdsvex } from 'mdsvex'
 
@@ -11,7 +10,6 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [
     preprocess(),
-    vitePreprocess(),
     mdsvex({
       extensions: ['.md']
     })  

tsconfig.json

@@ -8,10 +8,16 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"verbatimModuleSyntax": true
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in
+	//
+	// Note: The linter may report errors about deprecated options (importsNotUsedAsValues, preserveValueImports)
+	// in the extended .svelte-kit/tsconfig.json. These are from SvelteKit's generated config and will be
+	// fixed when SvelteKit updates their generated tsconfig.json. The verbatimModuleSyntax option above
+	// provides the modern replacement for these deprecated options.
 }