返回使用SvelteKit服务器加载函数的Svelte组件。

huangapple go评论54阅读模式
英文:

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
&lt;script&gt;
    import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from &quot;@babeard/svelte-heroicons/mini&quot;;
    import NavMenu from &quot;@components/NavMenu.svelte&quot;;

    const menuSettings = {
        menuButtonIcon: UserCircleIcon,
        menuItems: [
            {title: &#39;Settings&#39;, icon: Cog6ToothIcon, url: &#39;/app/settings&#39;, current: false},
            {title: &#39;Sign Out&#39;, icon: ArrowLeftOnRectangleIcon, url: &#39;/app/sign-out&#39;,  current: false},
        ]
    }
&lt;/script&gt;

&lt;NavMenu {...menuSettings} /&gt;
&lt;slot /&gt;

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

&lt;!--routes/+layout.svelte--&gt;
&lt;script&gt;
    import NavMenu from &quot;@components/NavMenu.svelte&quot;;

    export let data;
&lt;/script&gt;

&lt;NavMenu {...data.menuSettings} /&gt;
&lt;slot /&gt;
//routes/+layout.server.js

import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from &quot;@babeard/svelte-heroicons/mini&quot;;

export function load() {
    return {
        menuSettings: {
            menuButtonIcon: UserCircleIcon,
            menuItems: [
                {title: &#39;Settings&#39;, icon: Cog6ToothIcon, url: &#39;/app/settings&#39;, current: false},
                {title: &#39;Sign Out&#39;, icon: ArrowLeftOnRectangleIcon, url: &#39;/app/sign-out&#39;,  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 = {
  &#39;user-circle&#39;: UserCircleIcon,
  &#39;cog-6-tooth&#39;: Cog6ToothIcon,
  // ...
}
&lt;svelte:component this={icons[menuSettings.menuButtonIcon]} /&gt;

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.

huangapple
  • 本文由 发表于 2023年5月10日 16:35:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76216428.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定