fix: custom component prop types

CHANGELOG.md

@@ -4,7 +4,6 @@ All notable changes to this project will be documented in this file. See [Conven
 
 # 1.0.0 (2024-07-06)
 
-
 ### Features
 
-* create calendar component ([a29cedd](https://github.com/schedule-x/svelte/commit/a29ceddd5bd7cd20a69d547458626312cbe893db))
+- create calendar component ([a29cedd](https://github.com/schedule-x/svelte/commit/a29ceddd5bd7cd20a69d547458626312cbe893db))

README.md

@@ -1,58 +1,5 @@
-# create-svelte
+![schedule-x](https://schedule-x.s3.eu-west-1.amazonaws.com/schedule-x-logo.png)
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+# @schedule-x/svelte
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+This package offers a Svelte component for the Schedule-X calendar. For documentation, please refer to: https://schedule-x.dev/

src/lib/components/schedule-x-calendar.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
-	import { onMount, type SvelteComponent } from 'svelte';
+	import { onMount } from 'svelte';
 	import { randomStringId } from '$lib/utils/random-string-id.js';
 	import { createCustomComponentFn } from '$lib/utils/create-custom-component-fn.js';
 	import Portal from '$lib/utils/Portal.svelte';
 
-	import type { CustomComponentMeta } from '$lib/types/custom-components.js';
+	import type { CustomComponentMeta, CustomComponents } from '$lib/types/custom-components.js';
 	import type { CalendarApp } from '@schedule-x/calendar';
 
 	export let calendarApp: CalendarApp;
 
-	export let timeGridEvent: SvelteComponent | undefined = undefined;
-	export let dateGridEvent: SvelteComponent | undefined = undefined;
-	export let monthGridEvent: SvelteComponent | undefined = undefined;
-	export let monthAgendaEvent: SvelteComponent | undefined = undefined;
-	export let eventModal: SvelteComponent | undefined = undefined;
-	export let headerContentLeftPrepend: SvelteComponent | undefined = undefined;
-	export let headerContentLeftAppend: SvelteComponent | undefined = undefined;
-	export let headerContentRightPrepend: SvelteComponent | undefined = undefined;
-	export let headerContentRightAppend: SvelteComponent | undefined = undefined;
+	export let timeGridEvent: CustomComponents['timeGridEvent'] | undefined = undefined;
+	export let dateGridEvent: CustomComponents['dateGridEvent'] | undefined = undefined;
+	export let monthGridEvent: CustomComponents['monthGridEvent'] | undefined = undefined;
+	export let monthAgendaEvent: CustomComponents['monthAgendaEvent'] | undefined = undefined;
+	export let eventModal: CustomComponents['eventModal'] | undefined = undefined;
+	export let headerContentLeftPrepend: CustomComponents['headerContentLeftPrepend'] | undefined =
+		undefined;
+	export let headerContentLeftAppend: CustomComponents['headerContentLeftAppend'] | undefined =
+		undefined;
+	export let headerContentRightPrepend: CustomComponents['headerContentRightPrepend'] | undefined =
+		undefined;
+	export let headerContentRightAppend: CustomComponents['headerContentRightAppend'] | undefined =
+		undefined;
 
 	let customComponentsMeta: CustomComponentMeta[] = [];
 
@@ -37,7 +41,10 @@
 	};
 
 	const setCustomComponentFns = () => {
-		const customComponentsAvailable = [
+		const customComponentsAvailable: {
+			name: keyof CustomComponents;
+			component: CustomComponents[keyof CustomComponents];
+		}[] = [
 			{ name: 'timeGridEvent', component: timeGridEvent },
 			{ name: 'dateGridEvent', component: dateGridEvent },
 			{ name: 'monthGridEvent', component: monthGridEvent },
@@ -51,6 +58,8 @@
 
 		customComponentsAvailable.forEach(({ name, component }) => {
 			if (component) {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
 				calendarApp._setCustomComponentFn(name, createCustomComponentFn(setComponent, component));
 			}
 		});

src/lib/types/custom-components.ts

@@ -1,15 +1,25 @@
 import type { SvelteComponent } from 'svelte';
+import type { CalendarEvent } from '@schedule-x/calendar';
+
+type TimeGridEvent = typeof SvelteComponent<{ calendarEvent: CalendarEvent }>;
+type DateGridEvent = typeof SvelteComponent<{ calendarEvent: CalendarEvent }>;
+type MonthGridEvent = typeof SvelteComponent<{
+	calendarEvent: CalendarEvent;
+	hasStartDate: boolean;
+}>;
+type MonthAgendaEvent = typeof SvelteComponent<{ calendarEvent: CalendarEvent }>;
+type EventModal = typeof SvelteComponent<{ calendarEvent: CalendarEvent }>;
 
 export type CustomComponents = {
-	timeGridEvent?: SvelteComponent;
-	dateGridEvent?: SvelteComponent;
-	monthGridEvent?: SvelteComponent;
-	monthAgendaEvent?: SvelteComponent;
-	eventModal?: SvelteComponent;
-	headerContentLeftPrepend?: SvelteComponent;
-	headerContentLeftAppend?: SvelteComponent;
-	headerContentRightPrepend?: SvelteComponent;
-	headerContentRightAppend?: SvelteComponent;
+	timeGridEvent?: TimeGridEvent;
+	dateGridEvent?: DateGridEvent;
+	monthGridEvent?: MonthGridEvent;
+	monthAgendaEvent?: MonthAgendaEvent;
+	eventModal?: EventModal;
+	headerContentLeftPrepend?: typeof SvelteComponent<never>;
+	headerContentLeftAppend?: typeof SvelteComponent<never>;
+	headerContentRightPrepend?: typeof SvelteComponent<never>;
+	headerContentRightAppend?: typeof SvelteComponent<never>;
 };
 export type CustomComponentMeta = {
 	Component: SvelteComponent;

src/routes/+page.svelte

@@ -38,10 +38,5 @@
 </script>
 
 <div>
-	<ScheduleXCalendar
-		{calendarApp}
-		timeGridEvent={TimeGridEvent}
-		monthGridEvent={TimeGridEvent}
-		dateGridEvent={TimeGridEvent}
-	/>
+	<ScheduleXCalendar {calendarApp} timeGridEvent={TimeGridEvent} />
 </div>