英文:
Returning Svelte components with Sveltekit server load function
问题
以下是要翻译的内容:
我对Sveltekit还很陌生,并且在尝试从服务器返回Svelte组件时遇到了问题。
我正在将Sveltekit中的导航菜单设置从客户端的.svelte组件迁移到服务器的load()函数中。
目前,我在routes/+layout.svelte
中有一个导航菜单,并使用字典来定义菜单项。每个菜单项的图标都来自第三方库中的Svelte组件。
当前工作示例
//routes/+layout.svelte
<script>
import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";
import NavMenu from "@components/NavMenu.svelte";
const menuSettings = {
menuButtonIcon: UserCircleIcon,
menuItems: [
{title: 'Settings', icon: Cog6ToothIcon, url: '/app/settings', current: false},
{title: 'Sign Out', icon: ArrowLeftOnRectangleIcon, url: '/app/sign-out', current: false},
]
}
</script>
<NavMenu {...menuSettings} />
<slot />
现在,我想将这些菜单设置移到一个服务器load()函数中,以便我可以在服务器端确定要显示哪些菜单项。
建议的(不起作用)示例
<!--routes/+layout.svelte-->
<script>
import NavMenu from "@components/NavMenu.svelte";
export let data;
</script>
<NavMenu {...data.menuSettings} />
<slot />
//routes/+layout.server.js
import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";
export function load() {
return {
menuSettings: {
menuButtonIcon: UserCircleIcon,
menuItems: [
{title: 'Settings', icon: Cog6ToothIcon, url: '/app/settings', current: false},
{title: 'Sign Out', icon: ArrowLeftOnRectangleIcon, url: '/app/sign-out', current: false},
]
}
}
}
这会引发错误:
错误:在渲染/时从load
返回的数据不可序列化:无法序列化函数(data.menuSettings.menuButtonIcon)
是否有办法从load()函数返回组件?如果没有,如何最好地解决这个问题?
英文:
I'm new to Sveltekit, and having issues trying to return Svelte components from the server.
I'm migrating settings for a nav menu in Sveltekit from a client-side .svelte component to a server load() function.
Currently, I have a nav menu in routes/+layout.svelte
, and use a dict to define the menu items. The icons for each menu item are svelte components from a 3rd party library.
Current Working Example
//routes/+layout.svelte
<script>
import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";
import NavMenu from "@components/NavMenu.svelte";
const menuSettings = {
menuButtonIcon: UserCircleIcon,
menuItems: [
{title: 'Settings', icon: Cog6ToothIcon, url: '/app/settings', current: false},
{title: 'Sign Out', icon: ArrowLeftOnRectangleIcon, url: '/app/sign-out', current: false},
]
}
</script>
<NavMenu {...menuSettings} />
<slot />
I now want to move those menu settings to a server load() function, so that I can determine which menu items to show server-side.
Proposed (not working) example
<!--routes/+layout.svelte-->
<script>
import NavMenu from "@components/NavMenu.svelte";
export let data;
</script>
<NavMenu {...data.menuSettings} />
<slot />
//routes/+layout.server.js
import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";
export function load() {
return {
menuSettings: {
menuButtonIcon: UserCircleIcon,
menuItems: [
{title: 'Settings', icon: Cog6ToothIcon, url: '/app/settings', current: false},
{title: 'Sign Out', icon: ArrowLeftOnRectangleIcon, url: '/app/sign-out', current: false},
]
}
}
}
This throws an error:
Error: Data returned from `load` while rendering / is not serializable: Cannot stringify a function (data.menuSettings.menuButtonIcon)
Is there a way to return components from a load() function? And if not, what would be the best way to approach this issue?
答案1
得分: 3
const icons = {
'user-circle': UserCircleIcon,
'cog-6-tooth': Cog6ToothIcon,
// ...
}
<svelte:component this={icons[menuSettings.menuButtonIcon]} />
Though I suspect very little actually needs to be determined on the server. Usually it's just determining visibility, so you probably can leave much more on the page itself.
英文:
I would probably give the icons a key, return said key from the load
function and resolve the component on the page.
const icons = {
'user-circle': UserCircleIcon,
'cog-6-tooth': Cog6ToothIcon,
// ...
}
<svelte:component this={icons[menuSettings.menuButtonIcon]} />
Though I suspect very little actually needs to be determined on the server. Usually it's just determining visibility, so you probably can leave much more on the page itself.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论