feat: dynamic custom components (#54)

* Replaced hardcoded component keys with a dynamic mapped type based on CustomComponentName.

* calendarApp is required — so no need to check it

---------

Co-authored-by: Bryan van der Starre <[email protected]>

Author: starredev

CHANGELOG.md

@@ -4,10 +4,9 @@ All notable changes to this project will be documented in this file. See [Conven
 
 # [2.2.0](https://github.com/schedule-x/svelte/compare/v2.1.0...v2.2.0) (2024-12-25)
 
-
 ### Features
 
-* support svelte 5 ([#43](https://github.com/schedule-x/svelte/issues/43)) ([b6923fa](https://github.com/schedule-x/svelte/commit/b6923fa396233bbe5b7196bd1ddfccf7b2d6c4d7))
+- support svelte 5 ([#43](https://github.com/schedule-x/svelte/issues/43)) ([b6923fa](https://github.com/schedule-x/svelte/commit/b6923fa396233bbe5b7196bd1ddfccf7b2d6c4d7))
 
 # [2.1.0](https://github.com/schedule-x/svelte/compare/v2.0.1...v2.1.0) (2024-11-25)
 

package-lock.json

@@ -28,17 +28,18 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"@schedule-x/calendar": "^2.0.0",
+		"@schedule-x/calendar": "^2.23.0",
+		"@schedule-x/shared": "^2.23.0",
 		"svelte": "^4 || ^5"
 	},
 	"devDependencies": {
-		"@schedule-x/theme-default": "^2.0.0",
+		"@schedule-x/theme-default": "^2.18.0",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.0.0",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",

package.json

@@ -4,78 +4,43 @@
 	import { createCustomComponentFn } from '$lib/utils/create-custom-component-fn.js';
 	import Portal from '$lib/utils/Portal.svelte';
 
-	import type { CustomComponentMeta, CustomComponents } from '$lib/types/custom-components.js';
+	import type { CustomComponentMeta } from '$lib/types/custom-components.js';
 	import type { CalendarApp } from '@schedule-x/calendar';
 
 	export let calendarApp: CalendarApp;
 
-	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;
-	export let headerContent: CustomComponents['headerContent'] | undefined = undefined;
-
 	let customComponentsMeta: CustomComponentMeta[] = [];
-
 	$: wrapperId = randomStringId();
-	$: customComponentsMeta = [];
 
 	const setComponent = (component: CustomComponentMeta) => {
 		const newComponents = [...customComponentsMeta];
 		const ccid = component.wrapperElement.dataset.ccid;
-		const existingComponent = newComponents.find((c) => c.wrapperElement.dataset.ccid === ccid);
+		const existing = newComponents.find((c) => c.wrapperElement.dataset.ccid === ccid);
 
-		if (existingComponent) {
-			newComponents.splice(newComponents.indexOf(existingComponent), 1);
+		if (existing) {
+			newComponents.splice(newComponents.indexOf(existing), 1);
 		}
 
 		customComponentsMeta = [...newComponents, component];
 	};
 
 	const setCustomComponentFns = () => {
-		const customComponentsAvailable: {
-			name: keyof CustomComponents;
-			component: CustomComponents[keyof CustomComponents];
-		}[] = [
-			{ name: 'timeGridEvent', component: timeGridEvent },
-			{ name: 'dateGridEvent', component: dateGridEvent },
-			{ name: 'monthGridEvent', component: monthGridEvent },
-			{ name: 'monthAgendaEvent', component: monthAgendaEvent },
-			{ name: 'eventModal', component: eventModal },
-			{ name: 'headerContentLeftPrepend', component: headerContentLeftPrepend },
-			{ name: 'headerContentLeftAppend', component: headerContentLeftAppend },
-			{ name: 'headerContentRightPrepend', component: headerContentRightPrepend },
-			{ name: 'headerContentRightAppend', component: headerContentRightAppend },
-			{ name: 'headerContent', component: headerContent }
-		];
-
-		customComponentsAvailable.forEach(({ name, component }) => {
+		Object.entries($$restProps).forEach(([name, component]) => {
 			if (component) {
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
 				calendarApp._setCustomComponentFn(name, createCustomComponentFn(setComponent, component));
 			}
 		});
 	};
 
 	onMount(() => {
-		setCustomComponentFns();
-
 		const wrapper = document.getElementById(wrapperId);
 		if (!(wrapper instanceof HTMLElement)) {
 			console.warn('Could not find wrapper element to mount calendar on');
 			return;
 		}
 
+		setCustomComponentFns();
+
 		calendarApp.render(wrapper);
 	});
 </script>

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

@@ -1,30 +1,18 @@
 import type { SvelteComponent } from 'svelte';
-import type { CalendarEvent } from '@schedule-x/calendar';
+import type { CustomComponentName } from '@schedule-x/shared';
 
-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 }>;
+type ComponentType<Props extends Record<string, unknown> = Record<string, unknown>> = new (
+	...args: unknown[]
+) => SvelteComponent<Props>;
 
 export type CustomComponents = {
-	timeGridEvent?: TimeGridEvent;
-	dateGridEvent?: DateGridEvent;
-	monthGridEvent?: MonthGridEvent;
-	monthAgendaEvent?: MonthAgendaEvent;
-	eventModal?: EventModal;
-	headerContentLeftPrepend?: typeof SvelteComponent<{ [x: string]: never }>;
-	headerContentLeftAppend?: typeof SvelteComponent<{ [x: string]: never }>;
-	headerContentRightPrepend?: typeof SvelteComponent<{ [x: string]: never }>;
-	headerContentRightAppend?: typeof SvelteComponent<{ [x: string]: never }>;
-	headerContent?: typeof SvelteComponent<{ [x: string]: never }>;
+	[key in CustomComponentName]?: ComponentType;
 };
+
 export type CustomComponentMeta = {
-	Component: SvelteComponent;
+	Component: ComponentType;
 	wrapperElement: HTMLElement;
 	props: Record<string, unknown>;
 };
+
 export type CustomComponentsMeta = CustomComponentMeta[];

src/lib/types/custom-components.ts

@@ -1,24 +1,28 @@
-<script context="module">
+<script context="module" lang="ts">
 	import { tick } from 'svelte';
 
 	/**
 	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
 	 *
-	 * @param {HTMLElement} el
-	 * @param {HTMLElement|string} target DOM Element or CSS Selector
+	 * @param el - The element to move
+	 * @param target - DOM element or CSS selector
 	 */
-	export function portal(el, target = 'body') {
-		let targetEl;
-		async function update(newTarget) {
+	export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
+		let targetEl: HTMLElement;
+
+		async function update(newTarget: string | HTMLElement) {
 			target = newTarget;
+
 			if (typeof target === 'string') {
-				targetEl = document.querySelector(target);
+				targetEl = document.querySelector(target)!;
+
 				if (targetEl === null) {
 					await tick();
-					targetEl = document.querySelector(target);
+					targetEl = document.querySelector(target)!;
 				}
+
 				if (targetEl === null) {
-					throw new Error(`No element found matching css selector: "${target}"`);
+					throw new Error(`No element found matching CSS selector: "${target}"`);
 				}
 			} else if (target instanceof HTMLElement) {
 				targetEl = target;
@@ -29,6 +33,7 @@
 					}. Allowed types: string (CSS selector) or HTMLElement.`
 				);
 			}
+
 			targetEl.appendChild(el);
 			el.hidden = false;
 		}
@@ -40,19 +45,17 @@
 		}
 
 		update(target);
+
 		return {
 			update,
 			destroy
 		};
 	}
 </script>
 
-<script>
-	/**
-	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
-	 */
-	export let target = 'body';
+<script lang="ts">
+	// Accepts a DOM element or CSS selector
+	export let target: HTMLElement | string = 'body';
 </script>
 
 <div style="height: 100%; width: 100%" use:portal={target} hidden>

src/lib/utils/Portal.svelte

@@ -4,7 +4,7 @@ import type { SvelteComponent } from 'svelte';
 export const createCustomComponentFn =
 	(
 		setCustomComponent: (component: CustomComponentMeta) => void,
-		customComponent: SvelteComponent
+		customComponent: typeof SvelteComponent
 	) =>
 	(wrapperElement: HTMLElement, props: Record<string, unknown>) => {
 		setCustomComponent({