Chore/sveltekit 2 tour

.changeset/proud-dragons-rest.md

@@ -0,0 +1,5 @@
+---
+"@watergis/maplibre-gl-tour": patch
+---
+
+chore: migrated sveltekit to v2

.github/workflows/build.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: pnpm
 
       - name: install dependencies

.github/workflows/release.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20.x
           cache: pnpm
 
       - name: install dependencies

packages/tour/package.json

@@ -48,30 +48,31 @@
 		"svelte": "^4.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.1.0",
-		"@sveltejs/kit": "^1.22.3",
-		"@sveltejs/package": "^2.2.0",
-		"@typescript-eslint/eslint-plugin": "^6.2.0",
-		"@typescript-eslint/parser": "^6.2.0",
+		"@sveltejs/adapter-auto": "^3.1.0",
+		"@sveltejs/kit": "^2.0.6",
+		"@sveltejs/package": "^2.2.5",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"@typescript-eslint/eslint-plugin": "^6.18.0",
+		"@typescript-eslint/parser": "^6.18.0",
 		"@watergis/svelte-maplibre-menu": "workspace:^",
-		"eslint": "^8.46.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.32.4",
-		"pmtiles": "^2.10.0",
-		"prettier": "^3.0.0",
-		"prettier-plugin-svelte": "^3.0.3",
-		"publint": "^0.2.0",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"pmtiles": "^2.11.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"publint": "^0.2.7",
+		"svelte": "^4.2.8",
+		"svelte-check": "^3.6.2",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.11"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
 		"@sjmc11/tourguidejs": "^0.0.12",
-		"maplibre-gl": "^3.2.1"
+		"maplibre-gl": "^3.6.2"
 	}
 }

packages/tour/src/lib/index.ts

@@ -1,4 +1,4 @@
-import type { TourGuideClient, TourGuideOptions } from '@sjmc11/tourguidejs';
 import { MaplibreTourControl, type MaplibreTourControlOptions } from './MaplibreTourControl.js';
+import type TourGuideOptions from '@sjmc11/tourguidejs/src/core/options.js';
 
-export { TourGuideOptions, TourGuideClient, MaplibreTourControl, MaplibreTourControlOptions };
+export { type TourGuideOptions, MaplibreTourControl, type MaplibreTourControlOptions };

packages/tour/src/routes/+page.svelte

@@ -1,9 +1,111 @@
 <script lang="ts">
-	import Map from '$example/Map.svelte';
+	import '$lib/maplibre-tour-control.css';
+	import '@sjmc11/tourguidejs/dist/css/tour.min.css';
+	import { MenuControl } from '@watergis/svelte-maplibre-menu';
+	import maplibregl, { Map, NavigationControl } from 'maplibre-gl';
+	import 'maplibre-gl/dist/maplibre-gl.css';
+	import * as pmtiles from 'pmtiles';
+	import { onMount } from 'svelte';
+
+	let protocol = new pmtiles.Protocol();
+	maplibregl.addProtocol('pmtiles', protocol.tile);
+
+	import {
+		MaplibreTourControl,
+		type MaplibreTourControlOptions,
+		type TourGuideOptions
+	} from '$lib';
+
+	let tourOptions: TourGuideOptions = { rememberStep: true };
+
+	let mapContainer: HTMLDivElement;
+	let map: Map;
+
+	onMount(async () => {
+		map = new Map({
+			container: mapContainer,
+			style: 'https://narwassco.github.io/mapbox-stylefiles/unvt/style.json'
+		});
+
+		map.addControl(new NavigationControl());
+
+		const steps = [
+			{
+				title: 'Welcome to svelte maplibre tour!',
+				content: `This tutorial is going to take you around the main features of the application. <br> Let's begin!`,
+				target: document.body,
+				order: 1
+			},
+			{
+				title: 'Sidemenu button',
+				content: `Side menu can be opened or closed by clicking this button`,
+				target: '.maplibregl-ctrl-menu',
+				order: 2
+			},
+			{
+				title: 'Header 1',
+				content: `This is header 1.`,
+				target: '.one',
+				order: 3
+			},
+			{
+				title: 'Header 2',
+				content: `This is header 2.`,
+				target: '.two',
+				order: 4
+			},
+			{
+				title: 'Header 3',
+				content: `This is header 3.`,
+				target: '.three',
+				order: 5
+			}
+		];
+
+		tourOptions.steps = steps;
+
+		const controlOption: MaplibreTourControlOptions = {
+			localStorageKey: new Date().toDateString,
+			showTourAsDefault: true
+		};
+
+		map.addControl(new MaplibreTourControl(tourOptions, controlOption), 'top-right');
+	});
 </script>
 
 <sveltekit:head>
 	<title>Svelte maplibre tour example</title>
 </sveltekit:head>
 
-<Map />
+<MenuControl
+	bind:map
+	position={'top-left'}
+	isMenuShown={true}
+	sidebarOnLeft={true}
+	isHorizontal={false}
+>
+	<div slot="sidebar" class="container">
+		<h1 class="one">content 1</h1>
+		<h2 class="two">content 2</h2>
+		<h3 class="three">content 3</h3>
+	</div>
+	<div slot="map">
+		<div class="map" bind:this={mapContainer} />
+	</div>
+</MenuControl>
+
+<style>
+	@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css';
+	.map {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+	}
+
+	.container {
+		padding: 1rem;
+	}
+</style>

packages/tour/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 = {

packages/tour/vite.config.ts

@@ -1,12 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import { resolve } from 'path';
 
 export default defineConfig({
-	plugins: [sveltekit()],
-	resolve: {
-		alias: {
-			$example: resolve('./src/example')
-		}
-	}
+	plugins: [sveltekit()]
 });