reorganize client scripts

yuheiy · Sep 24, 2023 · 4e5cbf5 · 4e5cbf5
1 parent d223848
commit 4e5cbf5
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 28 deletions.
diff --git a/src/client/alpine/index.ts → src/client/alpine-loader.ts b/src/client/alpine/index.ts → src/client/alpine-loader.ts
diff --git a/src/client/alpine/example.component.ts → src/client/example.component.ts b/src/client/alpine/example.component.ts → src/client/example.component.ts
diff --git a/src/client/alpine/example.store.ts → src/client/example.store.ts b/src/client/alpine/example.store.ts → src/client/example.store.ts
diff --git a/src/client/main.ts b/src/client/main.ts
@@ -0,0 +1,25 @@
+import collapse from '@alpinejs/collapse';
+import focus from '@alpinejs/focus';
+import ui from '@alpinejs/ui';
+// eslint-disable-next-line import/no-named-as-default
+import Alpine from 'alpinejs';
+import { app } from './alpine-loader';
+
+// https://vitejs.dev/guide/env-and-mode.html#env-variables
+if (import.meta.env.DEV) {
+  console.log({
+    MODE: import.meta.env.MODE,
+    BASE_URL: import.meta.env.BASE_URL,
+    PROD: import.meta.env.PROD,
+    DEV: import.meta.env.DEV,
+  });
+}
+
+Alpine.plugin(collapse);
+Alpine.plugin(focus);
+Alpine.plugin(ui);
+Alpine.plugin(app);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).Alpine = Alpine;
+Alpine.start();
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -35,6 +35,8 @@ const resolvedOgImage = new URL(ogImage, Astro.site);
 
     <title set:html={[title, SITE_TITLE, tagline].filter(Boolean).join(' &#8211; ')} />
 
+    <script src="@/client/main.ts"></script>
+
     {description && <meta name="description" content={description} />}
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@_yuheiy" />
@@ -131,33 +133,5 @@ const resolvedOgImage = new URL(ogImage, Astro.site);
 
     {/* https://atfzl.com/don-t-attach-tooltips-to-document-body */}
     <div id="js-overlay-container"></div>
-
-    <script>
-      import collapse from '@alpinejs/collapse';
-      import focus from '@alpinejs/focus';
-      import ui from '@alpinejs/ui';
-      // eslint-disable-next-line import/no-named-as-default
-      import Alpine from 'alpinejs';
-      import { app } from '@/client/alpine';
-
-      // https://vitejs.dev/guide/env-and-mode.html#env-variables
-      if (import.meta.env.DEV) {
-        console.log({
-          MODE: import.meta.env.MODE,
-          BASE_URL: import.meta.env.BASE_URL,
-          PROD: import.meta.env.PROD,
-          DEV: import.meta.env.DEV,
-        });
-      }
-
-      Alpine.plugin(collapse);
-      Alpine.plugin(focus);
-      Alpine.plugin(ui);
-      Alpine.plugin(app);
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).Alpine = Alpine;
-      Alpine.start();
-    </script>
   </body>
 </html>