refactor: change syntax to svelte 5 (#972)

* refactor: change syntax to svelte 5 * remove compiler optins * depend on svelte 5 and add explicit sveltekit dependencies (#973) * update optional props * chore: update deps * components are no longer classes --------- Co-authored-by: Dominik Moritz <domoritz@gmail.com>
vega · Nov 11, 2024 · a4d6eae · a4d6eae
1 parent 9f23131
commit a4d6eae
Show file tree

Hide file tree

Showing 14 changed files with 265 additions and 249 deletions.
diff --git a/package.json b/package.json
@@ -27,21 +27,21 @@
 		"@eslint/js": "^9.14.0",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/eslint__js": "^8.42.3",
-		"@typescript-eslint/eslint-plugin": "^8.13.0",
 		"commitizen": "^4.3.1",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "^9.14.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-import": "^2.31.0",
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
 		"eslint-plugin-promise": "^7.1.0",
 		"eslint-plugin-svelte": "^2.46.0",
+		"eslint": "^9.14.0",
+		"prettier-plugin-svelte": "^3.2.8",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
 		"semantic-release": "^24.2.0",
-		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.13.0"
+		"svelte": "^5.1.14",
+		"typescript-eslint": "^8.13.0",
+		"typescript": "^5.6.3"
 	},
 	"engines": {
 		"node": ">16",

diff --git a/packages/svelte-vega-sample/package.json b/packages/svelte-vega-sample/package.json
@@ -19,10 +19,10 @@
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tsconfig/svelte": "^5.0.4",
-		"svelte": "^5.1.12",
-		"svelte-check": "^4.0.5",
+		"svelte": "^5.1.14",
+		"svelte-check": "^4.0.6",
 		"svelte-preprocess": "^6.0.3",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.10"
+		"vite": "^5.4.11"
 	}
 }
diff --git a/packages/svelte-vega-sample/src/App.svelte b/packages/svelte-vega-sample/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import type { View, VisualizationSpec } from 'svelte-vega';
 	import { Vega, VegaLite } from 'svelte-vega';
-	import type { VisualizationSpec, View } from 'svelte-vega';
 
 	const data = {
 		table: [
@@ -15,8 +15,8 @@
 		]
 	};
 
-	let viewVL: View;
-	let specVL: VisualizationSpec = {
+	let viewVL: View | undefined = $state(undefined);
+	const specVL: VisualizationSpec = {
 		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
 		description: 'A simple bar chart with embedded data.',
 		data: {
@@ -29,7 +29,7 @@
 		}
 	};
 
-	let viewV: View;
+	let viewV: View | undefined = $state(undefined);
 	const specV: VisualizationSpec = {
 		$schema: 'https://vega.github.io/schema/vega/v5.json',
 		width: 400,
@@ -111,8 +111,8 @@
 		]
 	};
 
-	$: viewVL ? console.log('Vega-Lite view: ', viewVL.data('table')) : '';
-	$: viewV ? console.log('Vega view: ', viewV.data('table')) : '';
+	$inspect('Vega-Lite view: ', viewVL ? viewVL.data('table') : '');
+	$inspect('Vega view: ', viewV ? viewV.data('table') : '');
 </script>
 
 <main>

diff --git a/packages/svelte-vega-sample/src/main.ts b/packages/svelte-vega-sample/src/main.ts
@@ -1,8 +1,7 @@
+import { mount } from 'svelte';
 import './app.css';
 import App from './App.svelte';
 
-const app = new App({
-	target: document.getElementById('app')
-});
+const app = mount(App, { target: document.getElementById('app') });
 
 export default app;
diff --git a/packages/svelte-vega-sample/svelte.config.js b/packages/svelte-vega-sample/svelte.config.js
@@ -3,11 +3,5 @@ import { sveltePreprocess } from 'svelte-preprocess';
 export default {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: sveltePreprocess(),
-
-	compilerOptions: {
-		compatibility: {
-			componentApi: 4
-		}
-	}
+	preprocess: sveltePreprocess()
 };
diff --git a/packages/svelte-vega/package.json b/packages/svelte-vega/package.json
@@ -51,16 +51,16 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.0",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
+		"prettier-plugin-svelte": "^3.2.8",
 		"publint": "^0.2.12",
-		"svelte": "^5.1.12",
-		"svelte-check": "^4.0.5",
+		"svelte": "^5.1.14",
+		"svelte-check": "^4.0.6",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.10"
+		"vite": "^5.4.11"
 	},
 	"peerDependencies": {
-		"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0",
+		"svelte": "^5.0.0",
 		"vega": "*",
 		"vega-embed": "*",
 		"vega-lite": "*"

diff --git a/packages/svelte-vega/src/lib/Vega.svelte b/packages/svelte-vega/src/lib/Vega.svelte
@@ -1,24 +1,27 @@
 <script lang="ts">
 	import type { EmbedOptions, Mode } from 'vega-embed';
-	import type { SignalListeners, VisualizationSpec, View } from './types';
+	import type { SignalListeners, View, VisualizationSpec } from './types';
 	import VegaEmbed from './VegaEmbed.svelte';
 
-	export let spec: VisualizationSpec;
-	export let options: EmbedOptions = {};
-	export let data: Record<string, unknown> = {};
-	export let signalListeners: SignalListeners = {};
-	export let view: View | undefined = undefined;
+	let {
+		spec,
+		options,
+		data,
+		signalListeners,
+		view = $bindable(),
+		onNewView,
+		onError
+	}: {
+		spec: VisualizationSpec;
+		options?: EmbedOptions;
+		data: Record<string, unknown>;
+		signalListeners?: SignalListeners;
+		view: View | undefined;
+		onNewView?: (view: View) => void;
+		onError?: (error: Error) => void;
+	} = $props();
 
-	const mode = 'vega' as Mode;
-	$: vegaOptions = { ...options, mode: mode };
+	const vegaOptions = $derived({ ...options, mode: 'vega' as Mode });
 </script>
 
-<VegaEmbed
-	{spec}
-	{data}
-	{signalListeners}
-	options={vegaOptions}
-	bind:view
-	on:onNewView
-	on:onError
-/>
+<VegaEmbed {spec} {data} {signalListeners} options={vegaOptions} bind:view {onNewView} {onError} />
diff --git a/packages/svelte-vega/src/lib/VegaEmbed.svelte b/packages/svelte-vega/src/lib/VegaEmbed.svelte
@@ -2,42 +2,52 @@
 	import type { EmbedOptions, Result } from 'vega-embed';
 	import type { SignalListeners, View, VisualizationSpec } from './types';
 
-	import { createEventDispatcher, onDestroy } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import vegaEmbed from 'vega-embed';
 
 	import { WIDTH_HEIGHT } from './constants';
 	import {
 		addSignalListenersToView,
-		updateMultipleDatasetsInView,
 		combineSpecWithDimension,
 		computeSpecChanges,
 		removeSignalListenersFromView,
-		shallowEqual
+		shallowEqual,
+		updateMultipleDatasetsInView
 	} from './utils';
 
-	export let options: EmbedOptions;
-	export let spec: VisualizationSpec;
-	export let view: View | undefined;
-	export let signalListeners: SignalListeners = {};
-	export let data: Record<string, unknown> = {};
+	let {
+		options,
+		spec,
+		view = $bindable(),
+		signalListeners,
+		data,
+		onError,
+		onNewView
+	}: {
+		options: EmbedOptions;
+		spec: VisualizationSpec;
+		view: View | undefined;
+		signalListeners?: SignalListeners;
+		data: Record<string, unknown>;
+		onError?: (error: Error) => void;
+		onNewView?: (view: View) => void;
+	} = $props();
 
-	const dispatch = createEventDispatcher();
+	let result: Result | undefined = $state(undefined);
+	let prevOptions: EmbedOptions = $state({});
+	let prevSignalListeners: SignalListeners | undefined = $state(undefined);
+	let prevSpec: VisualizationSpec = $state({});
+	let prevData: Record<string, unknown> = $state({});
+	let chartContainer: HTMLElement | undefined = $state(undefined);
 
-	let result: Result | undefined = undefined;
-	let prevOptions: EmbedOptions = {};
-	let prevSignalListeners: SignalListeners = {};
-	let prevSpec: VisualizationSpec = {};
-	let prevData: Record<string, unknown> = {};
-	let chartContainer: HTMLElement;
-
-	$: {
+	$effect(() => {
 		if (!shallowEqual(data, prevData)) {
 			update();
 		}
 		prevData = data;
-	}
+	});
 
-	$: {
+	$effect(() => {
 		if (chartContainer !== undefined) {
 			// only create a new view if neccessary
 			if (!shallowEqual(options, prevOptions, WIDTH_HEIGHT)) {
@@ -87,23 +97,26 @@
 			prevSignalListeners = signalListeners;
 			prevSpec = spec;
 		}
-	}
+	});
 
 	onDestroy(() => {
 		clearView();
 	});
 
 	async function createView() {
+		if (chartContainer === undefined) {
+			return;
+		}
 		clearView();
 		try {
 			result = await vegaEmbed(chartContainer, spec, options);
 			view = result.view;
-			if (addSignalListenersToView(view, signalListeners)) {
+			if (signalListeners && addSignalListenersToView(view, signalListeners)) {
 				view.runAsync();
 			}
-			onNewView(view);
+			newView(view);
 		} catch (e) {
-			handleError(e as Error);
+			error(e as Error);
 		}
 	}
 
@@ -115,18 +128,14 @@
 		}
 	}
 
-	function handleError(error: Error) {
-		dispatch('onError', {
-			error: error
-		});
+	function error(error: Error) {
+		onError?.(error);
 		console.warn(error);
 	}
 
-	function onNewView(view: View) {
+	function newView(view: View) {
 		update();
-		dispatch('onNewView', {
-			view: view
-		});
+		onNewView?.(view);
 	}
 
 	async function update() {

diff --git a/packages/svelte-vega/src/lib/VegaLite.svelte b/packages/svelte-vega/src/lib/VegaLite.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
 	import type { EmbedOptions, Mode } from 'vega-embed';
-	import type { SignalListeners, VisualizationSpec, View } from './types';
+	import type { SignalListeners, View, VisualizationSpec } from './types';
 	import VegaEmbed from './VegaEmbed.svelte';
 
-	export let spec: VisualizationSpec;
-	export let options: EmbedOptions = {};
-	export let data: Record<string, unknown> = {};
-	export let signalListeners: SignalListeners = {};
-	export let view: View | undefined = undefined;
+	let {
+		spec,
+		options,
+		data,
+		signalListeners,
+		view = $bindable(),
+		onNewView,
+		onError
+	}: {
+		spec: VisualizationSpec;
+		options?: EmbedOptions;
+		data: Record<string, unknown>;
+		signalListeners?: SignalListeners;
+		view: View | undefined;
+		onNewView?: (view: View) => void;
+		onError?: (error: Error) => void;
+	} = $props();
 
-	const mode = 'vega-lite' as Mode;
-	$: vegaLiteOptions = { ...options, mode: mode };
+	const vegaLiteOptions = $derived({ ...options, mode: 'vega-lite' as Mode });
 </script>
 
 <VegaEmbed
@@ -19,6 +30,6 @@
 	{signalListeners}
 	options={vegaLiteOptions}
 	bind:view
-	on:onNewView
-	on:onError
+	{onNewView}
+	{onError}
 />
diff --git a/packages/svelte-vega/svelte.config.js b/packages/svelte-vega/svelte.config.js
@@ -12,12 +12,6 @@ const config = {
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter()
-	},
-
-	compilerOptions: {
-		compatibility: {
-			componentApi: 4
-		}
 	}
 };
 

diff --git a/packages/sveltekit-vega-sample/package.json b/packages/sveltekit-vega-sample/package.json
@@ -9,17 +9,21 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
+	"type": "module",
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/kit": "^2.8.0",
-		"svelte": "^5.1.12",
-		"svelte-check": "^4.0.5",
+		"svelte": "^5.1.14",
+		"svelte-check": "^4.0.6",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.10"
+		"vite": "^5.4.11"
 	},
-	"type": "module",
 	"dependencies": {
-		"vega-embed": "^6.28.0"
+		"svelte-vega": "^1.2.0",
+		"tslib": "^2.8.1",
+		"vega": "^5.30.0",
+		"vega-embed": "^6.28.0",
+		"vega-lite": "^5.21.0"
 	}
 }