[Major] Svelte 5 Migration

.changeset/stupid-carrots-sin.md

@@ -0,0 +1,19 @@
+---
+"graph-image": major
+---
+
+Svelte 5 Runes Upgrade
+
+- Updated Package to use new Svelte 5 runes syntax
+- Updated code to use Svelte Actions for client side only code.
+- Added `layout` parameter for `Image` for more options of how the image is displayed on the page
+- Updated all dependencies
+- Updated srcset algorithm to pick more common device sizes and also support larger devices.
+- You can now pass all HTML Image attributes & events to the `Image` & `GraphImage` component.  
+- FadeIn for image is now purely CSS  you can edit the transition property with css variable `--graph-image-transition`
+
+
+## Breaking Changes
+
+- `center` prop has been removed please use `layout` = `fullWidth` instead
+- `maxWidth` prop has been removed. Use `layout` = `constrained` (default) and set the width to the dersired maxWidth of the image

demo/.prettierignore

@@ -1,15 +1,4 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
+# Package Managers
 package-lock.json
+pnpm-lock.yaml
 yarn.lock
-
-*.md

demo/.prettierrc

@@ -3,5 +3,13 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"overrides": [{ "files": "**/*.svelte", "options": { "parser": "svelte" } }]
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

demo/README.md

@@ -51,6 +51,7 @@ pnpm dev
 The demo site should now be running on your local machine.
 
 ## Contributing
+
 We welcome contributions! Please see the main repository for more detail.
 
 ## License
@@ -63,4 +64,4 @@ If you have any questions, feel free to reach out to us at [graphimage@obiemunoz
 
 ## Acknowledgements
 
-Thanks to all contributors who have helped to improve this project.
+Thanks to all contributors who have helped to improve this project.

demo/eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);

demo/package.json

@@ -18,31 +18,32 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin=prettier-plugin-svelte --check . && eslint .",
 		"format": "prettier --plugin=prettier-plugin-svelte --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.1.1",
-		"@sveltejs/kit": "^1.27.7",
-		"@sveltejs/package": "^2.2.3",
-		"@typescript-eslint/eslint-plugin": "^6.13.2",
-		"@typescript-eslint/parser": "^6.13.2",
-		"eslint": "^8.55.0",
+		"typescript": "^5.7.2",
+		"@sveltejs/kit": "^2.10.1",
+		"svelte": "^5.5.2",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"vite": "^6.0.3",
+		"tslib": "^2.8.1",
+		"vitest": "^2.1.6",
+		"eslint": "^9.7.0",
+		"@types/eslint": "^9.6.0",
+		"typescript-eslint": "^8.0.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^3.1.0",
-		"prettier-plugin-svelte": "^3.1.2",
-		"publint": "^0.2.6",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.2",
-		"vite": "^5.0.13",
-		"vitest": "^1.0.1"
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"svelte-check": "^4.1.0",
+		"prettier": "^3.4.1",
+		"prettier-plugin-svelte": "^3.3.2",
+		"publint": "^0.2.6"
 	},
 	"dependencies": {
 		"@graphql-typed-document-node/core": "^3.2.0",
@@ -52,4 +53,4 @@
 		"graphql-request": "^6.1.0"
 	},
 	"type": "module"
-}
+}

demo/src/lib/Banner/Banner.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { GraphImage, GraphImageTypes } from 'graph-image';
 
-	export let logo: GraphImageTypes.GraphAsset;
+	interface Props {
+		logo: GraphImageTypes.GraphAsset;
+	}
+
+	let { logo }: Props = $props();
 </script>
 
 <div class="banner">

demo/src/routes/+layout.svelte

@@ -1,19 +1,23 @@
-<script>
+<script lang="ts">
 	import { dev } from '$app/environment';
 	import { inject } from '@vercel/analytics';
+	import '../app.css';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
 	inject({ mode: dev ? 'development' : 'production' });
 </script>
 
 <main>
 	<div>
-		<slot />
+		{@render children?.()}
 	</div>
 </main>
 
 <style>
-	@import '../app.css';
-
 	main {
 		background-color: #1e1e1e;
 		color: #f0f0f0;

demo/src/routes/+page.server.ts

@@ -1,9 +1,10 @@
 import type { PageServerLoad } from './$types';
-import { HYGRAPH_TOKEN, HYGRAPH_URL } from '$env/static/private';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import type { GraphImageTypes } from 'graph-image';
+
+import { HYGRAPH_TOKEN, HYGRAPH_URL } from '$env/static/private';
 import { GraphQLClient, gql } from 'graphql-request';
 import { parse } from 'graphql';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	const client = new GraphQLClient(HYGRAPH_URL, {

demo/src/routes/+page.svelte

@@ -4,7 +4,11 @@
 	import { GraphImage } from 'graph-image';
 	import type { PageData } from './$types.js';
 
-	export let data: PageData;
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
 
 	const logo = data.logo;
 	const headline = data.headline;
@@ -60,7 +64,6 @@
 				image={{ ...image, width: 590, height: 331 }}
 				fit="clip"
 				withWebp
-				maxWidth={1200}
 			/>
 		</div>
 	{/each}

demo/svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

graph-image/.prettierignore

@@ -1,15 +1,4 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
+# Package Managers
 package-lock.json
+pnpm-lock.yaml
 yarn.lock
-
-*.md

graph-image/.prettierrc

@@ -3,5 +3,13 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"overrides": [{ "files": "**/*.svelte", "options": { "parser": "svelte" } }]
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }