Как создать встроенный компонент высшего порядка в SvelteKit 2.5?
Я спрашиваю в общем, но приведу пример использования. На конкретной странице, которую я создаю, я использую компонент Helper из Flowbite-Svelte. Я продолжаю использовать <Helper color = "red">...</Helper>, чтобы сделать цвет красным. Было бы неплохо создать компонент более высокого порядка и просто использовать его, например. <ErrorHelper>...</ErrorHelper>, где ErrorHelper автоматически передает реквизит color как red в Helper.
Я уже час смотрю в Интернете и не могу найти, как создать компонент более высокого порядка. Я попробовал сам и пришел к следующему:
import { Helper } from 'flowbite-svelte';
class ErrorHelper extends Helper {
constructor(vals) {
const newVals = {...vals, props: {...vals.props, color: 'red'}}
super(newVals);
}
}
Это работает, когда я визуализирую компонент с помощью Storybook for Svelte, который, как мне кажется, использует Svelte БЕЗ использования SvelteKit. Но когда я использую тот же код на своем веб-сайте SvelteKit, например:
// src/routes/onboard/3/+page.svelte
<script lang = "ts">
import OnboardStep3 from '$lib/components/OnboardStep3.svelte';
</script>
<OnboardStep3 />
Я получаю эту ошибку:
TypeError: Class extends value #<Object> is not a constructor or null
at /src/lib/components/OnboardStep3.svelte:17:28
at Object.$$render (/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at eval (/src/routes/onboard/3/+page.svelte:15:100)
at Object.$$render (/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at Object.default (/.svelte-kit/generated/root.svelte:48:43)
at /node_modules/@sveltejs/kit/src/runtime/components/layout.svelte:5:41
at Object.$$render (/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
at Object.default (/.svelte-kit/generated/root.svelte:47:42)
at eval (/src/routes/+layout.svelte:25:163)
at Object.$$render (/node_modules/svelte/src/runtime/internal/ssr.js:156:16)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы не отключите SSR в SvelteKit, вам также придется создать действительный SSR-компонент.
К сожалению, Svelte использует некоторые внутренние функции, а не общедоступный SSR API. Т.е. вы не можете просто предоставить объекту функцию render, вместо этого вам нужно предоставить и использовать $$render. (В Svelte 5 API на стороне клиента и на стороне сервера существенно различаются, поэтому миграция будет необходима в любом случае.)
Вот пример:
import { browser } from '$app/environment';
import { Helper } from 'flowbite-svelte';
export const ErrorHelper = extend(Helper, { color: 'red' });
function extend(component, defaults) {
const extendProps = props => ({ ...defaults, ...props });
return browser
? class extends component {
constructor(options) {
const { props, ...rest } = options;
super({
...rest,
props: extendProps(props),
});
}
}
: {
$$render(result, props, bindings, slots, context) {
return component.$$render(
result,
extendProps(props),
bindings,
slots,
context
);
}
}
}
Я думаю, просто утверждайте, что он имеет тот же тип, что и исходный компонент.
Другим следует сообщить: этот метод работает для статических значений, таких как { color: 'red' }, но, похоже, не работает для динамических свойств. Я использовал const MyComponentWithForm = extend(MyComponent, { form }), и он, как и ожидалось, получил только начальное значение form. Но даже выполнение $: MyComponentWithForm = extend(MyComponent, { form }) ничего не изменило.
Это работает. Спасибо! Но TypeScript это не нравится. imgur.com/a/eUHfALy