[demo]Update for svelte@5

demo/package.json

@@ -84,18 +84,18 @@
 		"numKeyboard_en": "vite --mode numKeyboard_en"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.6.1",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.7.3",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.20",
 		"postcss": "^8.4.47",
 		"rollup-plugin-stdf-icon": "file:../packages/rollup-plugin-stdf-icon",
-		"svelte": "^4.2.19",
-		"tailwindcss": "^3.4.13",
-		"vite": "^5.4.8"
+		"svelte": "^5.1.6",
+		"tailwindcss": "^3.4.14",
+		"vite": "^5.4.10"
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-confetti": "^1.4.0"
+		"svelte-confetti": "^2.1.2"
 	}
 }

demo/src/routes/+layout.svelte

@@ -1,8 +1,6 @@
 <script>
 	import { setContext, onMount } from 'svelte';
-	// @ts-ignore
 	import { page } from '$app/stores';
-	// @ts-ignore
 	import { goto } from '$app/navigation';
 	import { NavBar, Icon } from '../../../packages/stdf/components';
 	import zh_CN from '../../../packages/stdf/lang/zh_CN';
@@ -11,12 +9,12 @@
 	import menuList from '../data/menuList';
 	import ThemeSwitch from './components/ThemeSwitch.svelte';
 
+	let { children } = $props();
+
 	// 循环 menuList，将所有元素的 childs 组成一个数组
 	// Cycle menuList, and combine the childs of all elements into an array
 	const menuListArr = menuList.reduce((acc, cur) => {
-		if (cur.childs) {
-			acc.push(...cur.childs);
-		}
+		cur.childs && acc.push(...cur.childs);
 		return acc;
 	}, []);
 
@@ -33,16 +31,15 @@
 
 	// 环境变量
 	// environment variables
-	// @ts-ignore
 	const mode = import.meta.env.MODE;
 
 	// mode 是否是指定组件模式
 	// whether mode is specified component mode
 	const isComponentMode = mode != 'production' && mode != 'development' && mode != 'english';
 
-	$: showLeft = !(isIframe === '1' || $page.url.pathname === '/' || isComponentMode);
+	let showLeft = $derived(!(isIframe === '1' || $page.url.pathname === '/' || isComponentMode));
 
-	let theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+	let theme = $state(localStorage.getItem('theme') === 'dark' ? 'dark' : 'light');
 	// 设置主题
 	// Set theme
 	if (localStorage.getItem('theme') === 'dark') {
@@ -125,7 +122,7 @@
 		}
 	});
 
-	let showTheme = false;
+	let showTheme = $state(false);
 	// 切换主题
 	// switch theme
 	const switchThemeFunc = () => {
@@ -142,41 +139,38 @@
 			: menuListArr.filter(item => item.nav === $page.url.pathname.substring(7))[0][isZh ? 'title_zh' : 'title_en'] +
 				(isZh ? '示例' : ' Demo')}
 		left={showLeft ? 'back' : 'none'}
-		rightSlot
 		injClass="bg-white/60 dark:bg-black/60 backdrop-blur"
-		on:clickleft={() => window.history.back()}
+		onclickLeft={() => window.history.back()}
 	>
-		<div slot="right" class="flex text-center">
-			{#if isIframe === '0'}
-				<div class="h-12 w-10 leading-10">
-					<a href="https://github.com/any-tdf/stdf" target="_blank" rel="noreferrer">
-						<Icon name="ri-github-fill" />
-					</a>
-				</div>
-				<div class="h-12 w-10 leading-10">
-					<a
-						href={`https://stdf.design${$page.url.pathname === '/' ? '' : `/#/components?nav=${$page.url.pathname.substring(7)}&tab=0`}`}
-						target="_blank"
-						rel="noreferrer"
-					>
-						<Icon name="ri-compass-line" />
-					</a>
-				</div>
-			{/if}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="h-12 w-10 leading-10" on:click={toggleFun}>
-				<Icon name={theme === 'dark' ? 'ri-moon-fill' : 'ri-sun-line'} theme={true} />
-			</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="h-12 w-10 leading-10" on:click={switchThemeFunc}>
-				<Icon name="ri-palette-line" theme={true} />
+		{#snippet rightChild()}
+			<div slot="right" class="flex text-center">
+				{#if isIframe === '0'}
+					<div class="h-12 w-10">
+						<a href="https://github.com/any-tdf/stdf" target="_blank" rel="noreferrer">
+							<Icon name="ri-github-fill" />
+						</a>
+					</div>
+					<div class="h-12 w-10">
+						<a
+							href={`https://stdf.design${$page.url.pathname === '/' ? '' : `/#/components?nav=${$page.url.pathname.substring(7)}&tab=0`}`}
+							target="_blank"
+							rel="noreferrer"
+						>
+							<Icon name="ri-compass-line" />
+						</a>
+					</div>
+				{/if}
+				<button class="h-12 w-10" onclick={toggleFun}>
+					<Icon name={theme === 'dark' ? 'ri-moon-fill' : 'ri-sun-line'} theme />
+				</button>
+				<button class="h-12 w-10" onclick={switchThemeFunc}>
+					<Icon name="ri-palette-line" theme />
+				</button>
 			</div>
-		</div>
+		{/snippet}
 	</NavBar>
 </div>
-<slot />
+{@render children?.()}
 <div
 	class="fixed z-[1000] {showTheme
 		? 'right-0'

demo/src/routes/+page.svelte

@@ -2,18 +2,11 @@
 	import { CellGroup, Cell } from '../../../packages/stdf/components';
 	import menuList from '../data/menuList';
 
-	// 循环 menuList，将所有元素的 childs 组成一个数组
-	// Cycle menuList, and combine the childs of all elements into an array
 	const menuListArr = menuList.reduce((acc, cur) => {
-		if (cur.childs) {
-			acc.push(...cur.childs);
-		}
+		cur.childs && acc.push(...cur.childs);
 		return acc;
 	}, []);
-	// 设置语言
-	// setting language
 	const isZh = sessionStorage.getItem('lang') === 'zh_CN';
-
 	const changeLangFunc = () => {
 		sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
 		window.location.reload();
@@ -32,7 +25,6 @@
 <a href="https://stdf.design" target="_blank" rel="noreferrer">
 	<div class="text-center text-lg underline">stdf.design</div>
 </a>
-
 <div class="flex flex-col py-4">
 	<div>
 		{#each menuList as menu}
@@ -47,18 +39,14 @@
 							shadow="none"
 							radius="none"
 							line={i !== menu.childs.length - 1}
-						/></a
-					>
+						/>
+					</a>
 				{/each}
 			</CellGroup>
 		{/each}
 	</div>
 	<div class="p-4">{isZh ? '当前组件总数：' : 'Current number of components: '}{menuListArr.length}</div>
 	<div class="flex text-xs justify-around p-4 text-primary dark:text-dark underline">
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div on:click={changeLangFunc}>
-			{isZh ? 'English' : '简体中文'}
-		</div>
+		<button on:click={changeLangFunc} class="text-primary dark:text-dark">{isZh ? 'English' : '简体中文'}</button>
 	</div>
 </div>

demo/src/routes/components/Aphorism.svelte

@@ -3,13 +3,13 @@
 	// import data
 	import aphorisms from '../../data/aphorisms';
 
-	// 显示条数
-	// number of items to display
-	export let num = 0;
-
-	// 是否紧凑模式
-	// whether to use compact mode
-	export let compact = false;
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
 
 	// 从 aphorisms 随机取出 num 条数据
 	// get num items from aphorisms randomly

demo/src/routes/components/ThemeSwitch.svelte

@@ -4,7 +4,7 @@
 
 	const isZh = sessionStorage.getItem('lang') === 'zh_CN';
 
-	let currentColor = 'STDF';
+	let currentColor = $state('STDF');
 
 	const selectColorFunc = (e, item) => {
 		// 阻止冒泡
@@ -13,20 +13,16 @@
 		currentColor = item.name;
 		switchTheme(item.theme);
 	};
-	const bgFunc = str => {
-		return str.charAt(0) === '#' ? str : `rgb(${str})`;
-	};
+	const bgFunc = str => (str.charAt(0) === '#' ? str : `rgb(${str})`);
 </script>
 
 <div class="flex flex-col gap-2 flex-wrap my-4">
 	{#each themes as item}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
+		<button
 			class="flex p-2 gap-2 justify-between items-center border {currentColor === item.name
 				? 'border-primary dark:border-dark'
 				: 'border-gray-100 dark:border-gray-700'} rounded-md cursor-pointer"
-			on:click={e => selectColorFunc(e, item)}
+			onclick={e => selectColorFunc(e, item)}
 		>
 			<div class="w-5 h-5 {currentColor === item.name ? 'fill-primary dark:fill-dark' : 'fill-gray-300 dark:fill-gray-700'}">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -59,6 +55,6 @@
 					</div>
 				</div>
 			</div>
-		</div>
+		</button>
 	{/each}
 </div>

demo/tailwind.config.js

@@ -69,11 +69,7 @@ export default {
 			transparent: 'transparent',
 		},
 		extend: {
-			// 自定义字体
-			// Custom Font
-			fontFamily: {
-				Trueno: 'Trueno',
-			},
+			fontFamily: { Trueno: 'Trueno' },
 		},
 	},
 	darkMode: 'class',

demo/vite.config.js

@@ -2,14 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import svgSprite from 'rollup-plugin-stdf-icon';
 
-// @ts-ignore
 export default defineConfig({
 	// @ts-ignore
 	plugins: [sveltekit({}), svgSprite()],
-	server: {
-		hmr: true,
-		host: '0.0.0.0',
-		port: 8888,
-		https: false,
-	},
+	server: { hmr: true, host: '0.0.0.0', port: 8888 },
 });