snice 3.7.0 → 3.8.0

package/bin/templates/pwa/tests/middleware/error.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { Context } from 'snice';
+import { errorMiddleware } from '../../src/middleware/error';
+import * as storage from '../../src/services/storage';
+import type { Principal } from '../../src/types/auth';
+
+describe('Error Middleware', () => {
+  let mockContext: Context;
+  let mockNext: ReturnType<typeof vi.fn>;
+  let originalLocation: Location;
+
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+
+    // Save original location
+    originalLocation = window.location;
+
+    // Mock window.location
+    delete (window as any).location;
+    window.location = { href: '' } as Location;
+
+    // Create mock context
+    mockContext = {
+      application: {
+        principal: {
+          user: { id: '1', name: 'Test', email: 'test@example.com' },
+          isAuthenticated: true,
+        } as Principal,
+      },
+      navigation: {
+        route: '/',
+        params: {},
+      },
+      update: vi.fn(),
+    } as unknown as Context;
+
+    // Create mock next function
+    const mockResponse = new Response('{}', { status: 200 });
+    mockNext = vi.fn(() => Promise.resolve(mockResponse));
+  });
+
+  afterEach(() => {
+    window.location = originalLocation;
+  });
+
+  it('should pass through successful responses', async () => {
+    const mockResponse = new Response('{"data":"ok"}', { status: 200 });
+    const response = await errorMiddleware.call(mockContext, mockResponse, mockNext);
+
+    expect(mockNext).toHaveBeenCalled();
+    expect(response).toBeInstanceOf(Response);
+  });
+
+  it('should handle 401 unauthorized by clearing token and redirecting', async () => {
+    storage.setToken('test-token');
+    const mockResponse = new Response('Unauthorized', { status: 401 });
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Unauthorized - redirecting to login');
+
+    expect(storage.getToken()).toBeNull();
+    const principal = mockContext.application.principal as Principal;
+    expect(principal.user).toBeNull();
+    expect(principal.isAuthenticated).toBe(false);
+    expect(window.location.href).toBe('#/login');
+  });
+
+  it('should throw error for failed requests with JSON error message', async () => {
+    const mockResponse = new Response(
+      JSON.stringify({ message: 'Custom error message' }),
+      {
+        status: 400,
+        headers: { 'content-type': 'application/json' },
+      }
+    );
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Custom error message');
+  });
+
+  it('should throw error for failed requests without JSON body', async () => {
+    const mockResponse = new Response('Internal Server Error', {
+      status: 500,
+      headers: { 'content-type': 'text/plain' },
+    });
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Request failed with status 500');
+  });
+
+  it('should throw generic error for failed JSON requests without message', async () => {
+    const mockResponse = new Response(JSON.stringify({}), {
+      status: 400,
+      headers: { 'content-type': 'application/json' },
+    });
+
+    await expect(
+      errorMiddleware.call(mockContext, mockResponse, mockNext)
+    ).rejects.toThrow('Request failed with status 400');
+  });
+});

package/bin/templates/pwa/tests/middleware/retry.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { Context } from 'snice';
+import { createRetryMiddleware } from '../../src/middleware/retry';
+
+describe('Retry Middleware', () => {
+  let mockContext: Context;
+  let mockRequest: Request;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockContext = {
+      application: {
+        principal: {
+          user: null,
+          isAuthenticated: false,
+        },
+      },
+      navigation: {
+        route: '/',
+        params: {},
+      },
+      update: vi.fn(),
+    } as unknown as Context;
+
+    mockRequest = new Request('https://api.example.com/data');
+  });
+
+  it('should return response on first successful attempt', async () => {
+    const retryMiddleware = createRetryMiddleware(3, 10);
+    const mockResponse = new Response('{}', { status: 200 });
+    const mockNext = vi.fn(() => Promise.resolve(mockResponse));
+
+    const response = await retryMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockNext).toHaveBeenCalledTimes(1);
+    expect(response).toBe(mockResponse);
+  });
+
+  it('should retry on failure and eventually succeed', async () => {
+    const retryMiddleware = createRetryMiddleware(3, 10);
+    const mockResponse = new Response('{}', { status: 200 });
+    const mockNext = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('Network error'))
+      .mockRejectedValueOnce(new Error('Network error'))
+      .mockResolvedValueOnce(mockResponse);
+
+    const response = await retryMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockNext).toHaveBeenCalledTimes(3);
+    expect(response).toBe(mockResponse);
+  });
+
+  it('should throw error after max retries', async () => {
+    const retryMiddleware = createRetryMiddleware(3, 10);
+    const error = new Error('Network error');
+    const mockNext = vi.fn(() => Promise.reject(error));
+
+    await expect(
+      retryMiddleware.call(mockContext, mockRequest, mockNext)
+    ).rejects.toThrow('Network error');
+
+    expect(mockNext).toHaveBeenCalledTimes(3);
+  });
+
+  it('should not retry on Unauthorized errors', async () => {
+    const retryMiddleware = createRetryMiddleware(3, 10);
+    const error = new Error('Unauthorized');
+    const mockNext = vi.fn(() => Promise.reject(error));
+
+    await expect(
+      retryMiddleware.call(mockContext, mockRequest, mockNext)
+    ).rejects.toThrow('Unauthorized');
+
+    // Should only try once, no retries
+    expect(mockNext).toHaveBeenCalledTimes(1);
+  });
+
+  it('should use exponential backoff', async () => {
+    vi.useFakeTimers();
+
+    try {
+      const retryMiddleware = createRetryMiddleware(3, 100);
+      const mockNext = vi.fn(() => Promise.reject(new Error('Network error')));
+
+      const promise = retryMiddleware.call(mockContext, mockRequest, mockNext).catch(err => err);
+
+      // Run all timers to completion
+      await vi.runAllTimersAsync();
+
+      // All 3 attempts should have been made
+      expect(mockNext).toHaveBeenCalledTimes(3);
+
+      // Promise should have rejected with network error
+      const result = await promise;
+      expect(result).toBeInstanceOf(Error);
+      expect(result.message).toBe('Network error');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/bin/templates/pwa/tests/services/auth.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { login, logout, isAuthenticated, refreshToken } from '../../src/services/auth';
+import * as storage from '../../src/services/storage';
+
+describe('Auth Service', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  describe('login', () => {
+    it('should login with valid credentials', async () => {
+      const credentials = { email: 'demo@example.com', password: 'demo' };
+      const result = await login(credentials);
+
+      expect(result).toHaveProperty('token');
+      expect(result).toHaveProperty('user');
+      expect(result.user.email).toBe('demo@example.com');
+      expect(result.user.name).toBe('Demo User');
+    });
+
+    it('should store token and user on successful login', async () => {
+      const credentials = { email: 'demo@example.com', password: 'demo' };
+      await login(credentials);
+
+      expect(storage.getToken()).toBeTruthy();
+      expect(storage.getUser()).toBeTruthy();
+    });
+
+    it('should throw error for invalid credentials', async () => {
+      const credentials = { email: 'wrong@example.com', password: 'wrong' };
+
+      await expect(login(credentials)).rejects.toThrow('Invalid credentials');
+    });
+
+    it('should throw error for wrong password', async () => {
+      const credentials = { email: 'demo@example.com', password: 'wrong' };
+
+      await expect(login(credentials)).rejects.toThrow('Invalid credentials');
+    });
+  });
+
+  describe('logout', () => {
+    it('should clear token on logout', async () => {
+      storage.setToken('test-token');
+      storage.setUser({ id: '1', name: 'Test' });
+
+      await logout();
+
+      expect(storage.getToken()).toBeNull();
+      expect(storage.getUser()).toBeNull();
+    });
+  });
+
+  describe('isAuthenticated', () => {
+    it('should return true when valid token exists', () => {
+      // Non-expired token
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZW1haWwiOiJkZW1vQGV4YW1wbGUuY29tIiwiaWF0IjoxNjE2MjM5MDIyLCJleHAiOjk5OTk5OTk5OTl9.mock';
+      storage.setToken(token);
+
+      expect(isAuthenticated()).toBe(true);
+    });
+
+    it('should return false when no token exists', () => {
+      expect(isAuthenticated()).toBe(false);
+    });
+
+    it('should return false when token is expired', () => {
+      // Expired token
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxIiwiZXhwIjoxNjAwMDAwMDAwfQ.mock';
+      storage.setToken(token);
+
+      expect(isAuthenticated()).toBe(false);
+    });
+  });
+
+  describe('refreshToken', () => {
+    it('should return new token', async () => {
+      const newToken = await refreshToken();
+      expect(newToken).toBeTruthy();
+      expect(typeof newToken).toBe('string');
+    });
+
+    it('should update stored token', async () => {
+      await refreshToken();
+      expect(storage.getToken()).toBeTruthy();
+    });
+  });
+});

package/bin/templates/pwa/tests/services/jwt.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { decodeJWT, isTokenExpired, getTokenExpiration } from '../../src/services/jwt';
+
+describe('JWT Service', () => {
+  describe('decodeJWT', () => {
+    it('should decode a valid JWT', () => {
+      // Valid JWT: {"sub":"123","name":"Test","exp":9999999999}
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJuYW1lIjoiVGVzdCIsImV4cCI6OTk5OTk5OTk5OX0.mock';
+      const payload = decodeJWT(token);
+
+      expect(payload).toBeTruthy();
+      expect(payload?.sub).toBe('123');
+      expect(payload?.name).toBe('Test');
+      expect(payload?.exp).toBe(9999999999);
+    });
+
+    it('should return null for invalid JWT format', () => {
+      const payload = decodeJWT('invalid-token');
+      expect(payload).toBeNull();
+    });
+
+    it('should return null for malformed JWT', () => {
+      const payload = decodeJWT('part1.part2');
+      expect(payload).toBeNull();
+    });
+
+    it('should return null for JWT with invalid base64', () => {
+      const payload = decodeJWT('header.!!!invalid!!!.signature');
+      expect(payload).toBeNull();
+    });
+  });
+
+  describe('isTokenExpired', () => {
+    it('should return false for non-expired token', () => {
+      // Token expires in year 2286
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJleHAiOjk5OTk5OTk5OTl9.mock';
+      expect(isTokenExpired(token)).toBe(false);
+    });
+
+    it('should return true for expired token', () => {
+      // Token expired in 2020
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJleHAiOjE2MDAwMDAwMDB9.mock';
+      expect(isTokenExpired(token)).toBe(true);
+    });
+
+    it('should return true for token without exp claim', () => {
+      // Token without exp: {"sub":"123"}
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMifQ.mock';
+      expect(isTokenExpired(token)).toBe(true);
+    });
+
+    it('should return true for invalid token', () => {
+      expect(isTokenExpired('invalid')).toBe(true);
+    });
+  });
+
+  describe('getTokenExpiration', () => {
+    it('should return expiration date for valid token', () => {
+      // Token with exp: 9999999999 (Sat Nov 20 2286)
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJleHAiOjk5OTk5OTk5OTl9.mock';
+      const expiration = getTokenExpiration(token);
+
+      expect(expiration).toBeInstanceOf(Date);
+      expect(expiration?.getTime()).toBe(9999999999 * 1000);
+    });
+
+    it('should return null for token without exp', () => {
+      const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMifQ.mock';
+      expect(getTokenExpiration(token)).toBeNull();
+    });
+
+    it('should return null for invalid token', () => {
+      expect(getTokenExpiration('invalid')).toBeNull();
+    });
+  });
+});

package/bin/templates/pwa/tests/services/storage.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { getToken, setToken, clearToken, getUser, setUser } from '../../src/services/storage';
+
+describe('Storage Service', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  describe('Token Management', () => {
+    it('should set and get token', () => {
+      const token = 'test-token-123';
+      setToken(token);
+      expect(getToken()).toBe(token);
+    });
+
+    it('should return null when no token exists', () => {
+      expect(getToken()).toBeNull();
+    });
+
+    it('should clear token and user', () => {
+      setToken('test-token');
+      setUser({ id: '1', name: 'Test' });
+
+      clearToken();
+
+      expect(getToken()).toBeNull();
+      expect(getUser()).toBeNull();
+    });
+  });
+
+  describe('User Management', () => {
+    it('should set and get user object', () => {
+      const user = { id: '1', name: 'Test User', email: 'test@example.com' };
+      setUser(user);
+      expect(getUser()).toEqual(user);
+    });
+
+    it('should return null when no user exists', () => {
+      expect(getUser()).toBeNull();
+    });
+
+    it('should handle complex user objects', () => {
+      const user = {
+        id: '1',
+        name: 'Test User',
+        email: 'test@example.com',
+        metadata: {
+          preferences: {
+            theme: 'dark',
+            notifications: true,
+          },
+        },
+      };
+
+      setUser(user);
+      expect(getUser()).toEqual(user);
+    });
+
+    it('should overwrite existing user', () => {
+      setUser({ id: '1', name: 'User 1' });
+      setUser({ id: '2', name: 'User 2' });
+
+      const user = getUser<{ id: string; name: string }>();
+      expect(user?.id).toBe('2');
+      expect(user?.name).toBe('User 2');
+    });
+  });
+});

package/bin/templates/{social/vite.config.ts → pwa/vitest.config.ts}

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 import swc from 'unplugin-swc';
 
 export default defineConfig({
@@ -18,21 +18,16 @@ export default defineConfig({
       },
     }),
   ],
-  build: {
-    target: 'es2015',
-    minify: 'terser',
-    cssMinify: true,
-    rollupOptions: {
-      output: {
-        manualChunks: {
-          vendor: ['snice']
-        }
-      }
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        'tests/**',
+      ],
     },
-    sourcemap: true,
-    chunkSizeWarningLimit: 500
   },
-  esbuild: {
-    drop: process.env.NODE_ENV === 'production' ? ['debugger'] : []
-  }
-});
+});

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/symbols.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/transitions.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.6.0
+ * snice v3.7.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/docs/ai/patterns.md

@@ -56,7 +56,7 @@ class UserPage extends HTMLElement {
   private appContext?: AppContext;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.appContext = ctx.application;
     this.requestRender();
   }

package/docs/routing.md

@@ -207,13 +207,14 @@ class DashboardPage extends HTMLElement {
 The Context object passed to `@context()` methods has the following structure:
 
 ```typescript
-interface Context<T = any> {
-  application: T;  // Your router context (e.g., AppContext)
+interface Context {
+  application: AppContext;  // Your router context (e.g., { user, theme, config })
   navigation: {
     placards: Placard[];           // All page placards
     route: string;                  // Current route name
     params: Record<string, string>; // Route parameters
   };
+  fetch: typeof globalThis.fetch;  // Fetch function with middleware support
   update(): void;  // Notify all subscribers of changes
 }
 ```
@@ -223,10 +224,10 @@ interface Context<T = any> {
 ```typescript
 @page({ tag: 'user-page', routes: ['/users/:userId'] })
 class UserPage extends HTMLElement {
-  private ctx?: Context<AppContext>;
+  private ctx?: Context;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.ctx = ctx;
 
     // Access application state
@@ -250,10 +251,10 @@ When you modify the application context, call `update()` to notify all subscribe
 ```typescript
 @page({ tag: 'settings-page', routes: ['/settings'] })
 class SettingsPage extends HTMLElement {
-  private ctx?: Context<AppContext>;
+  private ctx?: Context;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.ctx = ctx;
     this.requestRender();
   }
@@ -1066,7 +1067,7 @@ class DashboardPage extends HTMLElement {
   private appContext?: AppContext;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.appContext = ctx.application;
     this.requestRender();
   }
@@ -1093,7 +1094,7 @@ class LoginPage extends HTMLElement {
   private appContext?: AppContext;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.appContext = ctx.application;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "type": "module",
   "description": "Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.",
   "main": "dist/index.cjs",

package/bin/templates/pwa/public/manifest.json

@@ -1,24 +0,0 @@
-{
-  "name": "{{projectName}}",
-  "short_name": "{{projectName}}",
-  "description": "PWA built with Snice",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#6366f1",
-  "orientation": "portrait-primary",
-  "icons": [
-    {
-      "src": "/icons/icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/icons/icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any maskable"
-    }
-  ]
-}

package/bin/templates/pwa/src/utils/fetch.ts

@@ -1,39 +0,0 @@
-export type Middleware = (
-  url: string,
-  options: RequestInit,
-  next: () => Promise<Response>
-) => Promise<Response>;
-
-export type FetchConfig = {
-  baseURL?: string;
-  middleware?: Middleware[];
-  headers?: Record<string, string>;
-};
-
-export function createFetch(config: FetchConfig = {}) {
-  return async (url: string, options: RequestInit = {}): Promise<Response> => {
-    const fullURL = config.baseURL ? `${config.baseURL}${url}` : url;
-
-    const execute = async (): Promise<Response> => {
-      return fetch(fullURL, {
-        ...options,
-        headers: {
-          ...config.headers,
-          ...options.headers,
-        },
-      });
-    };
-
-    // Chain middleware (reverse order so first middleware wraps execution)
-    let chain = execute;
-    if (config.middleware) {
-      for (let i = config.middleware.length - 1; i >= 0; i--) {
-        const middleware = config.middleware[i];
-        const next = chain;
-        chain = () => middleware(fullURL, options, next);
-      }
-    }
-
-    return chain();
-  };
-}