feat: Upgrade template based on projects made with it

Signed-off-by: Florian Bouillon <f.bouillon@aptatio.com>

src/libs/Component.ts

@@ -0,0 +1,53 @@
+type Fn<T extends HTMLElement> = (el: Component<T>) => void | Promise<void>
+
+/**
+ * Component client side initialisation class
+ */
+export default class Component<T extends HTMLElement> {
+	private constructor(
+		public element: T
+	) {}
+
+	public handled(value: boolean): this
+	public handled(): boolean
+	public handled(value?: boolean): this | boolean {
+		if (typeof value === 'undefined') {
+			return typeof this.element.dataset.handled === 'string'
+		}
+		this.element.dataset.handled = ''
+		return this
+	}
+
+	public init(fn: (el: Component<T>) => void | Promise<void>) {
+		if (this.handled()) {
+			return
+		}
+		fn(this)
+		this.handled(true)
+	}
+
+	public child<El extends HTMLElement>(query: string, fn: Fn<El>) {
+		this.element.querySelectorAll<El>(query).forEach((it) => {
+			const cp = new Component(it)
+			cp.init(fn)
+		})
+	}
+
+	/**
+	 * start handling an element
+	 * @param query the query to get the element
+	 * @param fn the function that is run ONCE per elements
+	 */
+	public static handle<T extends HTMLElement>(query: string, fn: (el: T) => void | Promise<void>) {
+		document.querySelectorAll<T>(query).forEach((it) => {
+			const cp = new Component(it)
+			cp.init((it) => fn(it.element))
+		})
+		document.addEventListener('astro:page-load', () => {
+			document.querySelectorAll<T>(query).forEach((it) => {
+				const cp = new Component(it)
+				cp.init((it) => fn(it.element))
+			})
+		})
+	}
+}