@htlkg/astro 0.0.1

package/src/utils/static.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect } from 'vitest';
+import {
+  generateStaticPaths,
+  generatePaginatedPaths,
+  chunkArray,
+  sortItems,
+  filterItems,
+  groupItems,
+} from './static';
+
+describe('Static Generation Utilities', () => {
+  describe('generateStaticPaths', () => {
+    it('should generate paths from items', () => {
+      const items = [
+        { id: '1', name: 'Item 1' },
+        { id: '2', name: 'Item 2' },
+      ];
+      
+      const paths = generateStaticPaths(items, (item) => ({
+        params: { id: item.id },
+        props: { item },
+      }));
+      
+      expect(paths).toHaveLength(2);
+      expect(paths[0]).toEqual({
+        params: { id: '1' },
+        props: { item: items[0] },
+      });
+    });
+  });
+
+  describe('generatePaginatedPaths', () => {
+    it('should generate paginated paths', () => {
+      const items = Array.from({ length: 25 }, (_, i) => ({ id: i + 1 }));
+      
+      const paths = generatePaginatedPaths(items, 10, (page, pageItems) => ({
+        params: { page: page.toString() },
+        props: { items: pageItems, page },
+      }));
+      
+      expect(paths).toHaveLength(3);
+      expect(paths[0].props?.items).toHaveLength(10);
+      expect(paths[1].props?.items).toHaveLength(10);
+      expect(paths[2].props?.items).toHaveLength(5);
+    });
+  });
+
+  describe('chunkArray', () => {
+    it('should chunk array into smaller arrays', () => {
+      const items = [1, 2, 3, 4, 5, 6, 7];
+      const chunks = chunkArray(items, 3);
+      
+      expect(chunks).toEqual([
+        [1, 2, 3],
+        [4, 5, 6],
+        [7],
+      ]);
+    });
+
+    it('should handle empty array', () => {
+      const chunks = chunkArray([], 3);
+      expect(chunks).toEqual([]);
+    });
+  });
+
+  describe('sortItems', () => {
+    it('should sort items ascending', () => {
+      const items = [
+        { id: 3, name: 'C' },
+        { id: 1, name: 'A' },
+        { id: 2, name: 'B' },
+      ];
+      
+      const sorted = sortItems(items, 'id', 'asc');
+      
+      expect(sorted.map(i => i.id)).toEqual([1, 2, 3]);
+    });
+
+    it('should sort items descending', () => {
+      const items = [
+        { id: 1, name: 'A' },
+        { id: 3, name: 'C' },
+        { id: 2, name: 'B' },
+      ];
+      
+      const sorted = sortItems(items, 'id', 'desc');
+      
+      expect(sorted.map(i => i.id)).toEqual([3, 2, 1]);
+    });
+
+    it('should not mutate original array', () => {
+      const items = [
+        { id: 3, name: 'C' },
+        { id: 1, name: 'A' },
+      ];
+      
+      sortItems(items, 'id', 'asc');
+      
+      expect(items[0].id).toBe(3);
+    });
+  });
+
+  describe('filterItems', () => {
+    it('should filter items by predicate', () => {
+      const items = [
+        { id: 1, active: true },
+        { id: 2, active: false },
+        { id: 3, active: true },
+      ];
+      
+      const filtered = filterItems(items, (item) => item.active);
+      
+      expect(filtered).toHaveLength(2);
+      expect(filtered.map(i => i.id)).toEqual([1, 3]);
+    });
+  });
+
+  describe('groupItems', () => {
+    it('should group items by key', () => {
+      const items = [
+        { id: 1, category: 'A' },
+        { id: 2, category: 'B' },
+        { id: 3, category: 'A' },
+      ];
+      
+      const grouped = groupItems(items, 'category');
+      
+      expect(grouped).toEqual({
+        A: [
+          { id: 1, category: 'A' },
+          { id: 3, category: 'A' },
+        ],
+        B: [
+          { id: 2, category: 'B' },
+        ],
+      });
+    });
+
+    it('should handle empty array', () => {
+      const grouped = groupItems([], 'category' as any);
+      expect(grouped).toEqual({});
+    });
+  });
+});

package/src/utils/static.ts

@@ -0,0 +1,144 @@
+/**
+ * Static Generation Utilities
+ * 
+ * Helper functions for static site generation in Astro.
+ */
+
+/**
+ * Generate static paths from array of items
+ * 
+ * @example
+ * ```ts
+ * export async function getStaticPaths() {
+ *   const brands = await getBrands();
+ *   return generateStaticPaths(brands, (brand) => ({
+ *     params: { brandId: brand.id },
+ *     props: { brand }
+ *   }));
+ * }
+ * ```
+ */
+export function generateStaticPaths<T, P = any>(
+  items: T[],
+  mapper: (item: T) => { params: Record<string, string | number>; props?: P }
+): Array<{ params: Record<string, string | number>; props?: P }> {
+  return items.map(mapper);
+}
+
+/**
+ * Generate paginated static paths
+ * 
+ * @example
+ * ```ts
+ * export async function getStaticPaths() {
+ *   const items = await getItems();
+ *   return generatePaginatedPaths(items, 10, (page, items) => ({
+ *     params: { page: page.toString() },
+ *     props: { items, page }
+ *   }));
+ * }
+ * ```
+ */
+export function generatePaginatedPaths<T, P = any>(
+  items: T[],
+  pageSize: number,
+  mapper: (
+    page: number,
+    pageItems: T[],
+    totalPages: number
+  ) => { params: Record<string, string | number>; props?: P }
+): Array<{ params: Record<string, string | number>; props?: P }> {
+  const totalPages = Math.ceil(items.length / pageSize);
+  const paths: Array<{ params: Record<string, string | number>; props?: P }> = [];
+  
+  for (let page = 1; page <= totalPages; page++) {
+    const start = (page - 1) * pageSize;
+    const end = start + pageSize;
+    const pageItems = items.slice(start, end);
+    
+    paths.push(mapper(page, pageItems, totalPages));
+  }
+  
+  return paths;
+}
+
+/**
+ * Generate nested static paths
+ * 
+ * @example
+ * ```ts
+ * export async function getStaticPaths() {
+ *   const brands = await getBrands();
+ *   return generateNestedPaths(brands, async (brand) => {
+ *     const products = await getProducts(brand.id);
+ *     return products.map(product => ({
+ *       params: { brandId: brand.id, productId: product.id },
+ *       props: { brand, product }
+ *     }));
+ *   });
+ * }
+ * ```
+ */
+export async function generateNestedPaths<T, P = any>(
+  items: T[],
+  mapper: (item: T) => Promise<Array<{ params: Record<string, string | number>; props?: P }>>
+): Promise<Array<{ params: Record<string, string | number>; props?: P }>> {
+  const nestedPaths = await Promise.all(items.map(mapper));
+  return nestedPaths.flat();
+}
+
+/**
+ * Chunk array into smaller arrays
+ */
+export function chunkArray<T>(array: T[], size: number): T[][] {
+  const chunks: T[][] = [];
+  for (let i = 0; i < array.length; i += size) {
+    chunks.push(array.slice(i, i + size));
+  }
+  return chunks;
+}
+
+/**
+ * Sort items for static generation
+ */
+export function sortItems<T>(
+  items: T[],
+  key: keyof T,
+  order: 'asc' | 'desc' = 'asc'
+): T[] {
+  return [...items].sort((a, b) => {
+    const aVal = a[key];
+    const bVal = b[key];
+    
+    if (aVal < bVal) return order === 'asc' ? -1 : 1;
+    if (aVal > bVal) return order === 'asc' ? 1 : -1;
+    return 0;
+  });
+}
+
+/**
+ * Filter items for static generation
+ */
+export function filterItems<T>(
+  items: T[],
+  predicate: (item: T) => boolean
+): T[] {
+  return items.filter(predicate);
+}
+
+/**
+ * Group items by key
+ */
+export function groupItems<T>(
+  items: T[],
+  key: keyof T
+): Record<string, T[]> {
+  return items.reduce((groups, item) => {
+    const groupKey = String(item[key]);
+    if (!groups[groupKey]) {
+      groups[groupKey] = [];
+    }
+    groups[groupKey].push(item);
+    return groups;
+  }, {} as Record<string, T[]>);
+}

package/src/vue-app-setup.ts

@@ -0,0 +1,88 @@
+/**
+ * Vue App Setup for htlkg Integration
+ * 
+ * This file is automatically loaded by the Vue integration when vueAppSetup is enabled.
+ * It configures AWS Amplify for client-side authentication in all Vue components.
+ */
+
+/// <reference types="vite/client" />
+
+console.log("[htlkg Vue Setup] MODULE LOADED - vue-app-setup.ts is being imported");
+
+import { amplifyConfig } from "virtual:htlkg-config";
+import type { App } from "vue";
+import type { ResourcesConfig } from "aws-amplify";
+import { Amplify } from "aws-amplify";
+
+console.log("[htlkg Vue Setup] MODULE LEVEL - After imports, amplifyConfig:", amplifyConfig);
+
+/**
+ * Setup function called by Astro's Vue integration
+ * Configures Amplify for client-side authentication
+ */
+export default function setupVueApp(app: App): void {
+	console.log("[htlkg Vue Setup] Starting Vue app setup...");
+	console.log("[htlkg Vue Setup] amplifyConfig:", amplifyConfig ? "present" : "null/undefined");
+	
+	try {
+		if (!amplifyConfig) {
+			console.warn("[htlkg Vue Setup] No Amplify configuration provided");
+			return;
+		}
+
+		console.log("[htlkg Vue Setup] amplifyConfig keys:", Object.keys(amplifyConfig));
+
+		// Check if this is a full amplify_outputs.json config
+		if (
+			"auth" in amplifyConfig ||
+			"data" in amplifyConfig ||
+			"storage" in amplifyConfig
+		) {
+			console.log("[htlkg Vue Setup] Detected amplify_outputs.json format");
+			Amplify.configure(amplifyConfig as ResourcesConfig, { ssr: true });
+			console.info(
+				"[htlkg Vue Setup] ✅ Configured Amplify with amplify_outputs.json",
+			);
+			console.log("[htlkg Vue Setup] Amplify config:", Amplify.getConfig());
+		} else {
+			// Legacy individual config properties
+			console.log("[htlkg Vue Setup] Detected legacy config format");
+			const { userPoolId, userPoolClientId, region } = amplifyConfig as {
+				userPoolId?: string;
+				userPoolClientId?: string;
+				region?: string;
+			};
+
+			console.log("[htlkg Vue Setup] userPoolId:", userPoolId ? "present" : "missing");
+			console.log("[htlkg Vue Setup] userPoolClientId:", userPoolClientId ? "present" : "missing");
+			console.log("[htlkg Vue Setup] region:", region || "not specified");
+
+			if (userPoolId && userPoolClientId) {
+				const config: ResourcesConfig = {
+					Auth: {
+						Cognito: {
+							userPoolId,
+							userPoolClientId,
+							...(region && { region }),
+						},
+					},
+				};
+
+				console.log("[htlkg Vue Setup] Configuring Amplify with:", JSON.stringify(config, null, 2));
+				Amplify.configure(config, { ssr: true });
+				console.info(
+					"[htlkg Vue Setup] ✅ Configured Amplify with legacy config properties",
+				);
+				console.log("[htlkg Vue Setup] Amplify config:", Amplify.getConfig());
+			} else {
+				console.error(
+					"[htlkg Vue Setup] ❌ Missing required Amplify configuration (userPoolId, userPoolClientId)",
+				);
+			}
+		}
+	} catch (error) {
+		console.error("[htlkg Vue Setup] ❌ Failed to setup Vue app:", error);
+		console.error("[htlkg Vue Setup] Error details:", error instanceof Error ? error.message : error);
+		// Don't throw - allow app to continue even if Amplify setup fails
+	}
+}