add alpine loading

Author: tobimori

public/index.php

@@ -7,21 +7,21 @@
 
 $base = dirname(__DIR__);
 
-require $base . '/vendor/getkirby/cms/bootstrap.php';
-require $base . '/vendor/autoload.php';
+require "{$base}/vendor/getkirby/cms/bootstrap.php";
+require "{$base}/vendor/autoload.php";
 
 $kirby = new App([
 	'roots' => [
 		'index' => __DIR__,
 		'base' => $base,
-		'site' => $base . '/site',
-		'data' => $data = $base . '/data',
-		'content' => $data . '/storage/content',
-		'accounts' => $data . '/storage/accounts',
-		'license' => $data . '/storage/.license',
-		'cache' => $data . '/runtime/cache',
-		'logs' => $data . '/runtime/logs',
-		'sessions' => $data . '/runtime/sessions',
+		'site' => "{$base}/site",
+		'data' => $data = "{$base}/data",
+		'content' => "{$data}/storage/content",
+		'accounts' => "{$data}/storage/accounts",
+		'license' => "{$data}/storage/.license",
+		'cache' => "{$data}/runtime/cache",
+		'logs' => "{$data}/runtime/logs",
+		'sessions' => "{$data}/runtime/sessions",
 	]
 ]);
 

src/components/hello-world.ts

@@ -0,0 +1,8 @@
+import { defineComponent } from "@/utils/alpine"
+
+export default defineComponent(() => ({
+	message: "Hello World!",
+	init() {
+		console.log(this.message)
+	}
+}))

src/index.ts

@@ -21,8 +21,13 @@ declare global {
 window.Alpine = Alpine
 
 Alpine.plugin(focus)
-Alpine.start()
 
-document.addEventListener("alpine:init", () => {
-	lazyLoad()
-})
+for (const [path, module] of Object.entries(import.meta.glob("./components/*.ts", { eager: true }))) {
+	const name = path.slice(13, -3)
+	// convert kebab-case to camelCase
+	const camelName = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+	Alpine.data(camelName, (module as { default: any }).default)
+}
+
+Alpine.start()
+lazyLoad('[loading="lazy"][data-src]')

src/utils/alpine.ts

@@ -0,0 +1,5 @@
+import type { AlpineComponent } from "alpinejs"
+
+export const defineComponent = <T extends Record<string, unknown>, A extends unknown[]>(
+	callback: (...args: A) => AlpineComponent<T>
+) => callback