Swiper on Solid.JS

[waruhachi]

Hello everyone,

This is my first time using Swiper and coincidently also my first time using Solid.JS seriously to make an MVP. I'm using the latest version of Swiper Element (WebComponent) v11.1.1, along with Solid.JS, Typescript, and TailwindCSS.

After referencing issue #6614 and issue #6466, I was able to resolve the errors with swiper-container but I'm still unable to resolve the errors with swiper-slide.

The swiper-slide element gives the following errors:

• This JSX tag's 'children' prop expects type 'HTMLCollection' which requires multiple children, but only a single child was provided.
• Type 'import(".../node_modules/.pnpm/solid-js@1.8.11/node_modules/solid-js/types/jsx").JSX.Element' is not assignable to type 'Element'.

While I vaguely understand the second error, I do not know how to solve it. Any help in understanding and resolving the issue is appreciated. Below I have created a custom component, GenericSlider, which is where all the Swiper code is located:

import { type Component } from 'solid-js';
import { register, SwiperContainer, SwiperSlide } from 'swiper/element/bundle';
register();

type Props = {
	title: string;
};

declare module 'solid-js' {
	namespace JSX {
		interface IntrinsicElements {
			'swiper-container': SwiperContainer;
			'swiper-slide': SwiperSlide;
		}
	}
}

const GenericSlider: Component<Props> = (props) => {
	return (
		<section class='relative mb-4 flex flex-col last:mb-0'>
			<h1 class='mb-4 text-2xl font-extrabold'>{props.title}</h1>
			<swiper-container
				slides-per-view={1}
				space-between={10}
			>
				<swiper-slide>Slide 1</swiper-slide>
				<swiper-slide>Slide 2</swiper-slide>
				<swiper-slide>Slide 3</swiper-slide>
			</swiper-container>
		</section>
	);
};

export default GenericSlider;

[Eptagone]

I use this typing for SolidJS:

import "solid-js";
import type { SwiperContainer, SwiperSlide } from "swiper/element";

type Kebabcase<T extends string, A extends string = ""> =
    T extends `${infer F}${infer R}` ?
    Kebabcase<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> :
    A;

type Kebabprops<T extends object> = {
    [K in keyof T as Kebabcase<K>]: T[K];
};

declare module "solid-js" {
    namespace JSX {
        interface IntrinsicElements {
            "swiper-container": JSX.HTMLAttributes<SwiperContainer> & Partial<Kebabprops<Omit<SwiperContainer, "swiper" | "modules" | "on" | "className" | keyof JSX.HTMLAttributes<SwiperContainer>>>>;
            "swiper-slide": JSX.HTMLAttributes<SwiperSlide> & Partial<Kebabprops<Omit<SwiperSlide, "swiper" | "className" | keyof JSX.HTMLAttributes<SwiperSlide>>>>;
        }
    }
}