Refactor/for svelte5

.changeset/little-otters-swim.md

@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+refactor: fixed some codes and html for svelte 5 migration

sites/geohub/src/components/pages/storymap/StorymapChapterEdit.svelte

@@ -1,16 +1,6 @@
-<script context="module" lang="ts">
-	import { writable, type Writable } from 'svelte/store';
-
-	export const ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY = 'active-storymap-chapter-store';
-	export type ActiveStorymapChapterStore = Writable<StoryMapChapter | undefined>;
-	export const createActiveStorymapChapterStore = () => {
-		return writable(<StoryMapChapter | undefined>undefined);
-	};
-</script>
-
 <script lang="ts">
 	import { page } from '$app/stores';
-	import type { StoryMapChapter } from '$lib/types';
+	import { ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY, type ActiveStorymapChapterStore } from '$stores';
 	import {
 		STORYMAP_CONFIG_STORE_CONTEXT_KEY,
 		type StoryMapConfigStore

sites/geohub/src/components/pages/storymap/StorymapChapterLayerEventEditor.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
 	import type { DashboardMapStyle } from '$lib/types';
+	import { ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY, type ActiveStorymapChapterStore } from '$stores';
 	import { layerTypes, type StoryMapChapterLayerEvent } from '@undp-data/svelte-maplibre-storymap';
 	import { FieldControl, initTooltipTippy, OpacityEditor } from '@undp-data/svelte-undp-components';
 	import { Loader, Switch } from '@undp-data/svelte-undp-design';
 	import { debounce } from 'lodash-es';
 	import type { LayerSpecification, StyleSpecification } from 'maplibre-gl';
 	import { createEventDispatcher, getContext, onMount } from 'svelte';
-	import {
-		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
-		type ActiveStorymapChapterStore
-	} from './StorymapChapterEdit.svelte';
 
 	const tippyTooltip = initTooltipTippy();
 	const dipatch = createEventDispatcher();

sites/geohub/src/components/pages/storymap/StorymapChapterMiniPreview.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { getMapImageFromStyle } from '$lib/helper';
-	import type { StoryMapChapterType, StoryMapConfig } from '$lib/types';
+	import type { StoryMapChapter as StoryMapChapterType, StoryMapConfig } from '$lib/types';
+	import { ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY, type ActiveStorymapChapterStore } from '$stores';
 	import {
 		layerTypes,
 		STORYMAP_CONFIG_STORE_CONTEXT_KEY,
@@ -14,10 +15,6 @@
 	import { debounce, isEqual } from 'lodash-es';
 	import { type StyleSpecification } from 'maplibre-gl';
 	import { createEventDispatcher, getContext, onMount } from 'svelte';
-	import {
-		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
-		type ActiveStorymapChapterStore
-	} from './StorymapChapterEdit.svelte';
 
 	const dispatch = createEventDispatcher();
 

sites/geohub/src/components/util/stac/StacCatalogItem.svelte

@@ -313,8 +313,10 @@
 				<div class="p-4" slot="content">
 					<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
 						<thead>
-							<th>Parameter</th>
-							<th>Value</th>
+							<tr>
+								<th>Parameter</th>
+								<th>Value</th>
+							</tr>
 						</thead>
 						<tbody>
 							{#each metadataProps as prop}
@@ -345,8 +347,10 @@
 				<div class="p-4" slot="content">
 					<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
 						<thead>
-							<th>Parameter</th>
-							<th>Value</th>
+							<tr>
+								<th>Parameter</th>
+								<th>Value</th>
+							</tr>
 						</thead>
 						<tbody>
 							{#each viewgeometryProps as prop}

sites/geohub/src/components/util/stac/StacCatalogMap.svelte

@@ -39,11 +39,13 @@
 	<Accordion title="metadata" isExpanded={isMetadataExpanded}>
 		<div slot="content">
 			<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
-				<tr><th>STAC version</th><td>{stacCatalog.stac_version}</td></tr>
-				<tr><th>Description</th><td>{stacCatalog.description}</td></tr>
-				{#if stacCatalog.license}
-					<tr><th>License</th><td>{stacCatalog.license}</td></tr>
-				{/if}
+				<tbody>
+					<tr><th>STAC version</th><td>{stacCatalog.stac_version}</td></tr>
+					<tr><th>Description</th><td>{stacCatalog.description}</td></tr>
+					{#if stacCatalog.license}
+						<tr><th>License</th><td>{stacCatalog.license}</td></tr>
+					{/if}
+				</tbody>
 			</table>
 		</div>
 	</Accordion>

sites/geohub/src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte

@@ -75,13 +75,15 @@
 			{/each}
 		</tbody>
 		<tfoot>
-			<th>No.</th>
-			{#each Object.keys(layers[0]) as col}
-				{#if !skipCols.includes(col)}
-					<th>{col}</th>
-				{/if}
-			{/each}
-			<th>registered</th>
+			<tr>
+				<th>No.</th>
+				{#each Object.keys(layers[0]) as col}
+					{#if !skipCols.includes(col)}
+						<th>{col}</th>
+					{/if}
+				{/each}
+				<th>registered</th>
+			</tr>
 		</tfoot>
 	</table>
 </div>

sites/geohub/src/routes/(app)/management/stac/api/[id]/+page.svelte

@@ -287,10 +287,12 @@
 							{/if}
 						</tbody>
 						<tfoot>
-							<th>No.</th>
-							<th>Title</th>
-							<th>STAC page</th>
-							<th>Operation</th>
+							<tr>
+								<th>No.</th>
+								<th>Title</th>
+								<th>STAC page</th>
+								<th>Operation</th>
+							</tr>
 						</tfoot>
 					</table>
 				</div>

sites/geohub/src/routes/(app)/storymaps/[[id]]/edit/+page.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import StorymapChapterEdit, {
-		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
-		createActiveStorymapChapterStore
-	} from '$components/pages/storymap/StorymapChapterEdit.svelte';
+	import StorymapChapterEdit from '$components/pages/storymap/StorymapChapterEdit.svelte';
 	import StorymapChapterMiniPreview from '$components/pages/storymap/StorymapChapterMiniPreview.svelte';
 	import StorymapEditPreview from '$components/pages/storymap/StorymapEditPreview.svelte';
 	import StorymapFooterEdit from '$components/pages/storymap/StorymapFooterEdit.svelte';
@@ -18,7 +15,12 @@
 	import { AccessLevel, getAttribution, MapStyles } from '$lib/config/AppConfig';
 	import { imageUrlToBase64 } from '$lib/helper';
 	import type { StoryMapChapter, StoryMapConfig } from '$lib/types';
-	import { HEADER_HEIGHT_CONTEXT_KEY, type HeaderHeightStore } from '$stores';
+	import {
+		ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY,
+		createActiveStorymapChapterStore,
+		HEADER_HEIGHT_CONTEXT_KEY,
+		type HeaderHeightStore
+	} from '$stores';
 	import {
 		createStoryMapConfigStore,
 		StoryMap,

sites/geohub/src/stores/activeStorymapChapter.ts

@@ -0,0 +1,15 @@
+import type { StoryMapChapter } from '$lib/types';
+import { writable } from 'svelte/store';
+
+export const ACTIVE_STORYMAP_CHAPTER_CONTEXT_KEY = 'active-storymap-chapter-store';
+export type ActiveStorymapChapterStore = ReturnType<typeof createActiveStorymapChapterStore>;
+
+export function createActiveStorymapChapterStore() {
+	const { set, update, subscribe } = writable<StoryMapChapter | undefined>(undefined);
+
+	return {
+		subscribe,
+		update,
+		set
+	};
+}

sites/geohub/src/stores/index.ts

@@ -10,3 +10,4 @@ export * from './progressBar';
 export * from './editingLayer';
 export * from './editingMenuShown';
 export * from './sidebarWidth';
+export * from './activeStorymapChapter';