component mount api changed (no longer classes)

Author: diegoimbert

frontend/src/lib/components/tutorials/Tutorial.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { driver, type Driver, type DriveStep } from 'driver.js'
 	import 'driver.js/dist/driver.css'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, mount } from 'svelte'
 	import { updateProgress } from '$lib/tutorialUtils'
 	import { ignoredTutorials } from './ignoredTutorials'
 	import SkipTutorials from './SkipTutorials.svelte'
@@ -33,18 +33,18 @@
 		if (state.activeIndex == 0) {
 			const div = document.createElement('div')
 
-			const skipTutorials = new SkipTutorials({
-				target: div
-			})
-
-			skipTutorials.$on('skipAll', () => {
-				dispatch('skipAll')
-				tutorial?.destroy()
-			})
-
-			skipTutorials.$on('skipThis', () => {
-				updateProgress(index)
-				tutorial?.destroy()
+			mount(SkipTutorials, {
+				target: div,
+				events: {
+					skipAll: () => {
+						dispatch('skipAll')
+						tutorial?.destroy()
+					},
+					skipThis: () => {
+						updateProgress(index)
+						tutorial?.destroy()
+					}
+				}
 			})
 
 			if (popoverDescription) {
@@ -54,44 +54,44 @@
 
 		const controls = document.createElement('div')
 
-		const tutorialControls = new TutorialControls({
+		mount(TutorialControls, {
 			target: controls,
 			props: {
 				activeIndex: state.activeIndex,
 				totalSteps
-			}
-		})
-
-		tutorialControls.$on('next', () => {
-			const step = tutorial?.getActiveStep()
-
-			if (step) {
-				if (tutorial?.getActiveStep()?.popover?.onNextClick) {
-					const activeElement = tutorial?.getActiveElement()
-					tutorial?.getActiveStep()?.popover?.onNextClick?.(activeElement, step, {
-						config,
-						state,
-						driver: tutorial
-					})
-				} else {
-					tutorial?.moveNext()
-				}
-			}
-		})
-
-		tutorialControls.$on('previous', () => {
-			const step = tutorial?.getActiveStep()
-
-			if (step) {
-				if (tutorial?.getActiveStep()?.popover?.onPrevClick) {
-					const activeElement = tutorial?.getActiveElement()
-					tutorial?.getActiveStep()?.popover?.onPrevClick?.(activeElement, step, {
-						config,
-						state,
-						driver: tutorial
-					})
-				} else {
-					tutorial?.movePrevious()
+			},
+			events: {
+				next: () => {
+					const step = tutorial?.getActiveStep()
+
+					if (step) {
+						if (tutorial?.getActiveStep()?.popover?.onNextClick) {
+							const activeElement = tutorial?.getActiveElement()
+							tutorial?.getActiveStep()?.popover?.onNextClick?.(activeElement, step, {
+								config,
+								state,
+								driver: tutorial
+							})
+						} else {
+							tutorial?.moveNext()
+						}
+					}
+				},
+				previous: () => {
+					const step = tutorial?.getActiveStep()
+
+					if (step) {
+						if (tutorial?.getActiveStep()?.popover?.onPrevClick) {
+							const activeElement = tutorial?.getActiveElement()
+							tutorial?.getActiveStep()?.popover?.onPrevClick?.(activeElement, step, {
+								config,
+								state,
+								driver: tutorial
+							})
+						} else {
+							tutorial?.movePrevious()
+						}
+					}
 				}
 			}
 		})