use default import for alpine components

src/client/alpine-loader.ts

@@ -1,12 +1,12 @@
-import type { PluginCallback } from 'alpinejs';
+import type { Alpine, PluginCallback } from 'alpinejs';
 
-export const app: PluginCallback = (Alpine) => {
+export function app(Alpine: Alpine) {
   const modules = import.meta.glob<PluginCallback>('./**/*.{component,store}.ts', {
-    import: 'plugin',
+    import: 'default',
     eager: true,
   });
 
   for (const plugin of Object.values(modules)) {
     Alpine.plugin(plugin);
   }
-};
+}

src/client/example.component.ts

@@ -1,11 +1,11 @@
-import type { PluginCallback } from 'alpinejs';
+import type { Alpine } from 'alpinejs';
 
-export const plugin: PluginCallback = (Alpine) => {
+export default function (Alpine: Alpine) {
   Alpine.data('example', () => ({
     init() {
       if (import.meta.env.DEV) {
         console.log('init component');
       }
     },
   }));
-};
+}

src/client/example.store.ts

@@ -1,11 +1,11 @@
-import type { PluginCallback } from 'alpinejs';
+import type { Alpine } from 'alpinejs';
 
-export const plugin: PluginCallback = (Alpine) => {
+export default function (Alpine: Alpine) {
   Alpine.store('example', {
     init() {
       if (import.meta.env.DEV) {
         console.log('init store');
       }
     },
   });
-};
+}