create-nativecore 0.1.1 → 0.2.0

package/template/src/middleware/auth.middleware.ts

@@ -0,0 +1,23 @@
+/**
+ * Authentication Middleware
+ * Enforces access control for protected routes in the single-shell SPA
+ */
+import auth from '../services/auth.service.js';
+import router from '../core/router.js';
+import { protectedRoutes } from '../routes/routes.js';
+import type { RouteMatch } from '../core/router.js';
+
+export async function authMiddleware(route: RouteMatch): Promise<boolean> {
+    const isProtected = protectedRoutes.some(path => route.path.startsWith(path));
+    const isAuthenticated = auth.isAuthenticated();
+    
+    // Protected route accessed without authentication
+    // Redirect to login page
+    if (isProtected && !isAuthenticated) {
+        router.replace('/login');
+        return false;
+    }
+    
+    // Note: Shell switching is now handled by the router before middleware runs
+    return true;
+}

package/template/src/routes/routes.ts

@@ -0,0 +1,38 @@
+/**
+ * Route Configuration
+ */
+import { bustCache } from '../utils/cacheBuster.js';
+import type { ControllerFunction } from '../core/router.js';
+
+function lazyController(controllerName: string, controllerPath: string): ControllerFunction {
+    return async (...args: any[]) => {
+        const module = await import(bustCache(controllerPath));
+        return module[controllerName](...args);
+    };
+}
+
+export function registerRoutes(router: any): void {
+    router
+        // Static marketing pages — cache for 5 min, serve stale instantly while refreshing in background
+        .register('/', 'src/views/public/home.html', lazyController('homeController', '../controllers/home.controller.js'))
+        .cache({ ttl: 300, revalidate: true })        .cache({ ttl: 600, revalidate: true })
+        .register('/docs', 'src/views/public/docs.html', lazyController('docsController', '../controllers/docs.controller.js'))
+        .cache({ ttl: 300 })
+
+        // Auth page — never cache (always fresh)
+        .register('/login', 'src/views/public/login.html', lazyController('loginController', '../controllers/login.controller.js'))
+
+        // Component library — cache for 2 min, block on stale (content changes rarely but must be accurate)
+        .register('/components', 'src/views/public/components.html', lazyController('componentsController', '../controllers/components.controller.js'))
+        .cache({ ttl: 120 })
+
+        // Protected pages — short cache, revalidate in background
+        .register('/dashboard', 'src/views/protected/dashboard.html', lazyController('dashboardController', '../controllers/dashboard.controller.js'))
+        .cache({ ttl: 30, revalidate: true })
+        .register('/under-construction', 'src/views/protected/under-construction.html')
+        .register('/user/:id', 'src/views/protected/user-detail.html', lazyController('userDetailController', '../controllers/user-detail.controller.js'))
+        .cache({ ttl: 60, revalidate: true })
+
+        .register('/testpage', 'src/views/public/testpage.html', lazyController('testpageController', '../controllers/testpage.controller.js'))}
+
+export const protectedRoutes = ['/dashboard', '/user', '/under-construction'];

package/template/src/services/api.service.ts

@@ -0,0 +1,394 @@
+/**
+ * API Service
+ * Reusable service for making backend API calls
+ */
+import auth from './auth.service.js';
+
+type QueryPrimitive = string | number | boolean | null;
+type QueryKeyValue = QueryPrimitive | QueryKeyObject | QueryKeyValue[];
+type QueryKeyObject = { [key: string]: QueryKeyValue | undefined };
+
+export type ApiQueryKey = readonly QueryKeyValue[];
+
+export interface ApiCacheOptions {
+    ttl: number;
+    revalidate?: boolean;
+    params?: Record<string, string | number | boolean | null | undefined>;
+    forceRefresh?: boolean;
+    cacheKey?: string;
+    queryKey?: ApiQueryKey;
+    tags?: string[];
+}
+
+interface CacheEntry<T = unknown> {
+    data: T;
+    cachedAt: number;
+    ttl: number;
+    queryKey?: ApiQueryKey;
+    tags: string[];
+}
+
+class ApiService {
+    private baseURL = this.resolveBaseURL();
+    private defaultHeaders: Record<string, string> = {
+        'Content-Type': 'application/json',
+    };
+    private responseCache = new Map<string, CacheEntry>();
+    private inFlightRequests = new Map<string, Promise<unknown>>();
+    private queryKeyIndex = new Map<string, Set<string>>();
+    private tagIndex = new Map<string, Set<string>>();
+
+    constructor() {
+        auth.subscribe(event => {
+            if (event === 'logout') {
+                this.clearCache();
+            }
+        });
+    }
+
+    private resolveBaseURL(): string {
+        if (typeof window === 'undefined') {
+            return '/api';
+        }
+
+        const hostname = window.location.hostname;
+        if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.') || hostname.endsWith('.local')) {
+            return '/api';
+        }
+
+        return 'https://api.nativecorejs.com';
+    }
+
+    private isAbsoluteURL(endpoint: string): boolean {
+        return /^https?:\/\//i.test(endpoint);
+    }
+    
+    /**
+     * Set base URL
+     */
+    setBaseURL(url: string): void {
+        this.baseURL = url;
+    }
+
+    clearCache(): void {
+        this.responseCache.clear();
+        this.inFlightRequests.clear();
+        this.queryKeyIndex.clear();
+        this.tagIndex.clear();
+    }
+
+    invalidateCache(match: string | RegExp): void {
+        for (const key of Array.from(this.responseCache.keys())) {
+            const shouldDelete = typeof match === 'string'
+                ? key.includes(match)
+                : match.test(key);
+
+            if (shouldDelete) {
+                this.deleteCacheEntry(key);
+            }
+        }
+    }
+
+    invalidateQuery(queryKey: ApiQueryKey, options: { exact?: boolean } = {}): void {
+        const target = this.serializeQueryKey(queryKey);
+
+        for (const [serializedQueryKey, cacheKeys] of this.queryKeyIndex.entries()) {
+            const matches = options.exact
+                ? serializedQueryKey === target
+                : serializedQueryKey === target || serializedQueryKey.startsWith(`${target}|`);
+
+            if (!matches) {
+                continue;
+            }
+
+            for (const cacheKey of Array.from(cacheKeys)) {
+                this.deleteCacheEntry(cacheKey);
+            }
+        }
+    }
+
+    invalidateTags(tags: string | string[]): void {
+        const tagList = Array.isArray(tags) ? tags : [tags];
+
+        for (const tag of tagList) {
+            const cacheKeys = this.tagIndex.get(tag);
+            if (!cacheKeys) {
+                continue;
+            }
+
+            for (const cacheKey of Array.from(cacheKeys)) {
+                this.deleteCacheEntry(cacheKey);
+            }
+        }
+    }
+    
+    /**
+     * Make HTTP request
+     */
+    async request<T = any>(endpoint: string, options: RequestInit = {}): Promise<T> {
+        const url = this.isAbsoluteURL(endpoint) ? endpoint : `${this.baseURL}${endpoint}`;
+        
+        const config: RequestInit = {
+            ...options,
+            headers: {
+                ...this.defaultHeaders,
+                ...auth.getAuthHeader(),
+                ...options.headers,
+            } as HeadersInit,
+        };
+        
+        try {
+            const response = await fetch(url, config);
+            
+            const data = await this.parseResponse(response);
+            
+            if (!response.ok) {
+                // Don't logout on 401 for login endpoint - it's just invalid credentials
+                if (response.status === 401 && !endpoint.includes('/auth/login')) {
+                    auth.logout();
+                    window.dispatchEvent(new CustomEvent('unauthorized'));
+                    throw new Error('Unauthorized - please login again');
+                }
+                
+                // Try to get error message from response (supports both 'error' and 'message' fields)
+                const errorMessage = (data as any).error || (data as any).message || `HTTP ${response.status}`;
+                throw new Error(errorMessage);
+            }
+            
+            return data as T;
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+    
+    /**
+     * Parse response
+     */
+    private async parseResponse(response: Response): Promise<any> {
+        const contentType = response.headers.get('content-type');
+        
+        if (contentType && contentType.includes('application/json')) {
+            return await response.json();
+        }
+        
+        return await response.text();
+    }
+    
+    /**
+     * GET request
+     */
+    async get<T = any>(endpoint: string, params: Record<string, any> = {}): Promise<T> {
+        const queryString = new URLSearchParams(params).toString();
+        const url = queryString ? `${endpoint}?${queryString}` : endpoint;
+        
+        return this.request<T>(url, { method: 'GET' });
+    }
+
+    async getCached<T = any>(endpoint: string, options: ApiCacheOptions): Promise<T> {
+        const cacheKey = this.buildCacheKey(endpoint, options);
+        const cached = this.responseCache.get(cacheKey) as CacheEntry<T> | undefined;
+        const now = Date.now();
+        const ttlMs = Math.max(options.ttl, 0) * 1000;
+        const isFresh = !!cached && ttlMs > 0 && (now - cached.cachedAt) < ttlMs;
+        const isStale = !!cached && ttlMs > 0 && !isFresh;
+
+        if (!options.forceRefresh) {
+            if (isFresh && cached) {
+                return cached.data;
+            }
+
+            if (isStale && cached && options.revalidate) {
+                this.refreshCachedRequest<T>(cacheKey, endpoint, options);
+                return cached.data;
+            }
+        }
+
+        if (!options.forceRefresh) {
+            const inFlight = this.inFlightRequests.get(cacheKey) as Promise<T> | undefined;
+            if (inFlight) {
+                return inFlight;
+            }
+        }
+
+        const requestPromise = this.get<T>(endpoint, options.params ?? {})
+            .then(data => {
+                this.setCacheEntry(cacheKey, {
+                    data,
+                    cachedAt: Date.now(),
+                    ttl: options.ttl,
+                    queryKey: options.queryKey,
+                    tags: options.tags ?? [],
+                });
+                this.inFlightRequests.delete(cacheKey);
+                return data;
+            })
+            .catch(error => {
+                this.inFlightRequests.delete(cacheKey);
+                throw error;
+            });
+
+        this.inFlightRequests.set(cacheKey, requestPromise as Promise<unknown>);
+        return requestPromise;
+    }
+    
+    /**
+     * POST request
+     */
+    async post<T = any>(endpoint: string, body: any = {}): Promise<T> {
+        return this.request<T>(endpoint, {
+            method: 'POST',
+            body: JSON.stringify(body),
+        });
+    }
+    
+    /**
+     * PUT request
+     */
+    async put<T = any>(endpoint: string, body: any = {}): Promise<T> {
+        return this.request<T>(endpoint, {
+            method: 'PUT',
+            body: JSON.stringify(body),
+        });
+    }
+    
+    /**
+     * PATCH request
+     */
+    async patch<T = any>(endpoint: string, body: any = {}): Promise<T> {
+        return this.request<T>(endpoint, {
+            method: 'PATCH',
+            body: JSON.stringify(body),
+        });
+    }
+    
+    /**
+     * DELETE request
+     */
+    async delete<T = any>(endpoint: string): Promise<T> {
+        return this.request<T>(endpoint, { method: 'DELETE' });
+    }
+
+    private buildCacheKey(endpoint: string, options: ApiCacheOptions): string {
+        if (options.queryKey) {
+            return `q:${this.serializeQueryKey(options.queryKey)}`;
+        }
+
+        if (options.cacheKey) {
+            return options.cacheKey;
+        }
+
+        const queryString = new URLSearchParams(
+            Object.entries(options.params ?? {}).reduce<Record<string, string>>((accumulator, [key, value]) => {
+                if (value !== undefined && value !== null) {
+                    accumulator[key] = String(value);
+                }
+                return accumulator;
+            }, {})
+        ).toString();
+
+        return queryString ? `${endpoint}?${queryString}` : endpoint;
+    }
+
+    private refreshCachedRequest<T>(cacheKey: string, endpoint: string, options: ApiCacheOptions): void {
+        if (this.inFlightRequests.has(cacheKey)) {
+            return;
+        }
+
+        const refreshPromise = this.get<T>(endpoint, options.params ?? {})
+            .then(data => {
+                this.setCacheEntry(cacheKey, {
+                    data,
+                    cachedAt: Date.now(),
+                    ttl: options.ttl,
+                    queryKey: options.queryKey,
+                    tags: options.tags ?? [],
+                });
+                this.inFlightRequests.delete(cacheKey);
+                return data;
+            })
+            .catch(() => {
+                this.inFlightRequests.delete(cacheKey);
+                return undefined;
+            });
+
+        this.inFlightRequests.set(cacheKey, refreshPromise as Promise<unknown>);
+    }
+
+    private setCacheEntry<T>(cacheKey: string, entry: CacheEntry<T>): void {
+        this.deleteCacheEntry(cacheKey);
+        this.responseCache.set(cacheKey, entry);
+
+        if (entry.queryKey) {
+            const serializedQueryKey = this.serializeQueryKey(entry.queryKey);
+            const existingKeys = this.queryKeyIndex.get(serializedQueryKey) ?? new Set<string>();
+            existingKeys.add(cacheKey);
+            this.queryKeyIndex.set(serializedQueryKey, existingKeys);
+        }
+
+        for (const tag of entry.tags) {
+            const existingKeys = this.tagIndex.get(tag) ?? new Set<string>();
+            existingKeys.add(cacheKey);
+            this.tagIndex.set(tag, existingKeys);
+        }
+    }
+
+    private deleteCacheEntry(cacheKey: string): void {
+        const existingEntry = this.responseCache.get(cacheKey);
+
+        this.responseCache.delete(cacheKey);
+        this.inFlightRequests.delete(cacheKey);
+
+        if (!existingEntry) {
+            return;
+        }
+
+        if (existingEntry.queryKey) {
+            const serializedQueryKey = this.serializeQueryKey(existingEntry.queryKey);
+            const existingKeys = this.queryKeyIndex.get(serializedQueryKey);
+            if (existingKeys) {
+                existingKeys.delete(cacheKey);
+                if (existingKeys.size === 0) {
+                    this.queryKeyIndex.delete(serializedQueryKey);
+                }
+            }
+        }
+
+        for (const tag of existingEntry.tags) {
+            const existingKeys = this.tagIndex.get(tag);
+            if (existingKeys) {
+                existingKeys.delete(cacheKey);
+                if (existingKeys.size === 0) {
+                    this.tagIndex.delete(tag);
+                }
+            }
+        }
+    }
+
+    private serializeQueryKey(queryKey: ApiQueryKey): string {
+        return queryKey.map(part => this.stableSerialize(part)).join('|');
+    }
+
+    private stableSerialize(value: QueryKeyValue | undefined): string {
+        if (value === undefined) {
+            return 'undefined';
+        }
+
+        if (value === null) {
+            return 'null';
+        }
+
+        if (Array.isArray(value)) {
+            return `[${value.map(item => this.stableSerialize(item)).join(',')}]`;
+        }
+
+        if (typeof value === 'object') {
+            const sortedKeys = Object.keys(value).sort();
+            return `{${sortedKeys.map(key => `${key}:${this.stableSerialize(value[key])}`).join(',')}}`;
+        }
+
+        return JSON.stringify(value);
+    }
+}
+
+export default new ApiService();

package/template/src/services/auth.service.ts

@@ -0,0 +1,176 @@
+/**
+ * Authentication Service
+ * Handles JWT token management and user authentication
+ */
+import storage from './storage.service.js';
+
+// Types
+export interface User {
+    id: string | number;
+    email: string;
+    name?: string;
+    [key: string]: any;
+}
+
+export interface TokenPayload {
+    exp?: number;
+    [key: string]: any;
+}
+
+type AuthEvent = 'login' | 'logout';
+type AuthCallback = (event: AuthEvent) => void;
+
+class AuthService {
+    private readonly TOKEN_KEY = 'access_token';
+    private readonly REFRESH_TOKEN_KEY = 'refresh_token';
+    private readonly USER_KEY = 'user_data';
+    private listeners: AuthCallback[] = [];
+    
+    constructor() {
+        storage.setStrategy('session');
+    }
+    
+    /**
+     * Set authentication tokens
+     */
+    setTokens(accessToken: string, refreshToken: string | null = null): void {
+        if (!accessToken || accessToken === 'undefined') {
+            console.error('Cannot set undefined token');
+            return;
+        }
+        storage.set(this.TOKEN_KEY, accessToken);
+        if (refreshToken && refreshToken !== 'undefined') {
+            storage.set(this.REFRESH_TOKEN_KEY, refreshToken);
+        }
+        this.notifyListeners('login');
+        window.dispatchEvent(new CustomEvent('auth-change'));
+    }
+    
+    /**
+     * Get access token
+     */
+    getToken(): string | null {
+        const token = storage.get(this.TOKEN_KEY);
+        if (!token || token === 'undefined' || token === 'null') {
+            return null;
+        }
+        return token;
+    }
+    
+    /**
+     * Get refresh token
+     */
+    getRefreshToken(): string | null {
+        return storage.get(this.REFRESH_TOKEN_KEY);
+    }
+    
+    /**
+     * Set user data
+     */
+    setUser(user: User): void {
+        storage.set(this.USER_KEY, JSON.stringify(user));
+    }
+    
+    /**
+     * Get user data
+     */
+    getUser(): User | null {
+        const userData = storage.get(this.USER_KEY);
+        if (!userData || userData === 'undefined' || userData === 'null') {
+            return null;
+        }
+        try {
+            return JSON.parse(userData);
+        } catch (error) {
+            console.error('Error parsing user data:', error);
+            return null;
+        }
+    }
+    
+    /**
+     * Check if user is authenticated
+     */
+    isAuthenticated(): boolean {
+        const token = this.getToken();
+        if (!token) return false;
+
+        if (this.isTokenExpired(token)) {
+            this.logout();
+            return false;
+        }
+
+        return true;
+    }
+    
+    /**
+     * Check if JWT token is expired
+     */
+    isTokenExpired(token: string): boolean {
+        try {
+            const payload = this.decodeToken(token);
+            if (!payload.exp) return false;
+            
+            const currentTime = Date.now() / 1000;
+            return payload.exp < currentTime;
+        } catch {
+            return true;
+        }
+    }
+    
+    /**
+     * Decode JWT token
+     */
+    decodeToken(token: string): TokenPayload {
+        try {
+            const base64Url = token.split('.')[1];
+            if (!base64Url) {
+                throw new Error('Invalid token');
+            }
+
+            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+            const paddedBase64 = base64.padEnd(base64.length + ((4 - base64.length % 4) % 4), '=');
+            const jsonPayload = atob(paddedBase64);
+            return JSON.parse(jsonPayload);
+        } catch {
+            throw new Error('Invalid token');
+        }
+    }
+    
+    /**
+     * Logout user
+     */
+    logout(): void {
+        storage.remove(this.TOKEN_KEY);
+        storage.remove(this.REFRESH_TOKEN_KEY);
+        storage.remove(this.USER_KEY);
+        this.notifyListeners('logout');
+        window.dispatchEvent(new CustomEvent('auth-change'));
+    }
+    
+    /**
+     * Subscribe to auth state changes
+     */
+    subscribe(callback: AuthCallback): () => void {
+        this.listeners.push(callback);
+        return () => {
+            this.listeners = this.listeners.filter(cb => cb !== callback);
+        };
+    }
+    
+    /**
+     * Notify listeners
+     */
+    private notifyListeners(event: AuthEvent): void {
+        this.listeners.forEach(callback => callback(event));
+    }
+    
+    /**
+     * Get authorization header
+     */
+    getAuthHeader(): Record<string, string> {
+        const token = this.getToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+    }
+}
+
+export default new AuthService();

package/template/src/services/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Services Index
+ */
+
+export { default as api } from './api.service.js';
+export { default as auth } from './auth.service.js';
+export { default as storage } from './storage.service.js';
+export { default as logger } from './logger.service.js';