snice 3.7.0 → 3.8.0

package/README.md

@@ -416,10 +416,10 @@ When you modify the application context, call `update()` to notify all subscribe
 ```typescript
 @page({ tag: 'login-page', routes: ['/login'] })
 class LoginPage extends HTMLElement {
-  private ctx?: Context<AppContext>;
+  private ctx?: Context;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.ctx = ctx;
     this.requestRender();
   }

package/bin/snice.js

@@ -46,14 +46,12 @@ Options:
 
 Templates:
   base    - Minimal starter with counter example (default)
-  social  - Social media sample app showcasing components
   pwa     - Progressive Web App with auth, middleware, and live notifications
 
 Examples:
   snice create-app my-app
-  snice create-app my-app --template=social
-  snice create-app --template=social my-app
-  npx snice create-app my-app --template=social
+  snice create-app my-app --template=pwa
+  npx snice create-app my-app --template=pwa
 `);
 }
 
@@ -91,7 +89,7 @@ function createApp(projectPath, template = 'base') {
   // Check if template exists
   if (!existsSync(templateDir)) {
     console.error(`❌ Template "${template}" not found!`);
-    console.error(`Available templates: base, social, pwa`);
+    console.error(`Available templates: base, pwa`);
     process.exit(1);
   }
 

package/bin/templates/CLAUDE.md

@@ -27,13 +27,13 @@ src/
 ```
 
 **Separation of concerns:**
-- **Pages** - Orchestrate elements, handle URLs
+- **Pages** - Orchestrate elements, handle URLs, most logic happens here
 - **Components** - Pure presentation, no business logic
-- **Controllers** - Attach to elements, add behavior
-- **Utils** - Pure helper functions
+- **Controllers** - Attach to elements, add business behavior unsuitable for the page or components
 - **Services** - Stateless business logic, API calls
 - **Daemons** - Lifecycle-managed (WebSocket, P2P, intervals)
-- **Middleware** - Composable functions (auth, logging, retry)
+- **Middleware** - Composable functions (auth, retry)
+- **Utils** - Pure helper functions
 
 ## Decorators
 
@@ -145,7 +145,7 @@ html`
 
 **@request/@respond is NOT a service bus.** It's for element-to-element or element-to-controller communication only. Use utility functions for app-wide features.
 
-**Guards receive Context<T>, not T.** Check `ctx.application.property`, not `ctx.property`. Guards: `(ctx: Context<AppContext>) => boolean`
+**Guards receive Context, not AppContext.** Check `ctx.application.property`, not `ctx.property`. Guards: `(ctx: Context) => boolean`
 
 **Context must be mutated then updated.** After changing `ctx.application`, call `ctx.update()` to notify subscribers. Pages need `@context()` to get context reference.
 

package/bin/templates/pwa/README.md

@@ -53,24 +53,36 @@ src/
 
 ## Architecture Patterns
 
-### Middleware-Based Fetch
+### Context-Aware Fetcher
 
-Composable middleware for all API calls:
+Built-in middleware system with context access:
 
 ```typescript
-import { createFetch } from './utils/fetch';
-import { authMiddleware } from './middleware/auth';
-import { errorMiddleware } from './middleware/error';
-import { retryMiddleware } from './middleware/retry';
-
-export const api = createFetch({
-  baseURL: import.meta.env.VITE_API_URL,
-  middleware: [authMiddleware, errorMiddleware, retryMiddleware()],
-  headers: { 'Content-Type': 'application/json' }
-});
+// fetcher.ts - Setup
+import { ContextAwareFetcher } from 'snice';
+
+const fetcher = new ContextAwareFetcher();
+fetcher.use('request', authMiddleware);
+fetcher.use('response', errorMiddleware);
+
+// Middleware with context access
+export async function authMiddleware(
+  this: Context,
+  request: Request,
+  next: () => Promise<Response>
+): Promise<Response> {
+  const token = getToken();
+  if (token) {
+    request.headers.set('Authorization', `Bearer ${token}`);
+  }
+  return next();
+}
 
-// Usage
-const data = await api('/users').then(r => r.json());
+// Usage in pages via ctx.fetch()
+async loadData() {
+  const response = await this.ctx.fetch('/api/data');
+  const data = await response.json();
+}
 ```
 
 ### Daemons for Lifecycle Management
@@ -112,9 +124,12 @@ export class DashboardPage extends HTMLElement {
 Access shared state via context:
 
 ```typescript
+import type { Principal } from './types/auth';
+
 @context()
-handleContext(ctx: Context<AppContext>) {
-  this.user = ctx.application.user;
+handleContext(ctx: Context) {
+  const principal = ctx.application.principal as Principal | undefined;
+  this.user = principal?.user;
 }
 ```
 

package/bin/templates/pwa/index.html

@@ -6,7 +6,6 @@
     <meta name="description" content="{{projectName}} - PWA built with Snice" />
     <meta name="theme-color" content="#6366f1" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="manifest" href="/manifest.json" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>{{projectName}}</title>
   </head>

package/bin/templates/pwa/package.json

@@ -5,9 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "type-check": "tsc --noEmit",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "snice": "^3.0.0"
@@ -15,11 +18,15 @@
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@vite-pwa/assets-generator": "^0.2.4",
+    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/ui": "^1.0.4",
+    "happy-dom": "^12.10.3",
     "terser": "^5.24.0",
     "typescript": "^5.3.3",
     "unplugin-swc": "^1.5.7",
     "vite": "^5.0.10",
     "vite-plugin-pwa": "^0.17.4",
+    "vitest": "^1.0.4",
     "workbox-window": "^7.0.0"
   }
 }

package/bin/templates/pwa/src/fetcher.ts

@@ -0,0 +1,15 @@
+import { ContextAwareFetcher } from 'snice';
+import { authMiddleware } from './middleware/auth';
+import { errorMiddleware } from './middleware/error';
+import { createRetryMiddleware } from './middleware/retry';
+
+const fetcher = new ContextAwareFetcher();
+
+// Add request middleware (runs before fetch)
+fetcher.use('request', authMiddleware);
+fetcher.use('request', createRetryMiddleware());
+
+// Add response middleware (runs after fetch)
+fetcher.use('response', errorMiddleware);
+
+export { fetcher };

package/bin/templates/pwa/src/guards/auth.ts

@@ -1,8 +1,10 @@
-import type { Context } from 'snice';
-import type { AppContext } from '../types/auth';
+import type { AppContext } from 'snice';
+import type { Principal } from '../types/auth';
 
-export function authGuard(ctx: Context<AppContext>): boolean {
-  if (!ctx.application.isAuthenticated) {
+export function authGuard(appContext: AppContext): boolean {
+  const principal = appContext.principal as Principal | undefined;
+
+  if (!principal?.isAuthenticated) {
     window.location.href = '#/login';
     return false;
   }

package/bin/templates/pwa/src/middleware/auth.ts

@@ -1,14 +1,15 @@
-import type { Middleware } from '../utils/fetch';
+import type { Context } from 'snice';
 import { getToken } from '../services/storage';
 
-export async function authMiddleware(url: string, options: RequestInit, next: () => Promise<Response>): Promise<Response> {
+export async function authMiddleware(
+  this: Context,
+  request: Request,
+  next: () => Promise<Response>
+): Promise<Response> {
   const token = getToken();
 
   if (token) {
-    options.headers = {
-      ...options.headers,
-      'Authorization': `Bearer ${token}`,
-    };
+    request.headers.set('Authorization', `Bearer ${token}`);
   }
 
   return next();

package/bin/templates/pwa/src/middleware/error.ts

@@ -1,12 +1,23 @@
-import type { Middleware } from '../utils/fetch';
+import type { Context } from 'snice';
+import type { Principal } from '../types/auth';
 import { clearToken } from '../services/storage';
 
-export async function errorMiddleware(url: string, options: RequestInit, next: () => Promise<Response>): Promise<Response> {
-  const response = await next();
-
+export async function errorMiddleware(
+  this: Context,
+  response: Response,
+  next: () => Promise<Response>
+): Promise<Response> {
   // Handle 401 unauthorized - token expired or invalid
   if (response.status === 401) {
     clearToken();
+
+    // Update context to reflect logged out state
+    if (this.application.principal) {
+      const principal = this.application.principal as Principal;
+      principal.user = null;
+      principal.isAuthenticated = false;
+    }
+
     window.location.href = '#/login';
     throw new Error('Unauthorized - redirecting to login');
   }
@@ -21,5 +32,5 @@ export async function errorMiddleware(url: string, options: RequestInit, next: (
     throw new Error(`Request failed with status ${response.status}`);
   }
 
-  return response;
+  return next();
 }

package/bin/templates/pwa/src/middleware/retry.ts

@@ -1,7 +1,11 @@
-import type { Middleware } from '../utils/fetch';
+import type { Context } from 'snice';
 
-export function retryMiddleware(retries = 3, delay = 1000): Middleware {
-  return async (url, options, next) => {
+export function createRetryMiddleware(retries = 3, delay = 1000) {
+  return async function retryMiddleware(
+    this: Context,
+    _request: Request,
+    next: () => Promise<Response>
+  ): Promise<Response> {
     let lastError: Error;
 
     for (let i = 0; i < retries; i++) {

package/bin/templates/pwa/src/pages/dashboard.ts

@@ -1,7 +1,7 @@
 import { page } from '../router';
 import { render, styles, html, css, context } from 'snice';
 import type { Placard, Context } from 'snice';
-import type { AppContext } from '../types/auth';
+import type { Principal } from '../types/auth';
 import { authGuard } from '../guards/auth';
 
 const placard: Placard = {
@@ -17,8 +17,9 @@ export class DashboardPage extends HTMLElement {
   userName = '';
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
-    this.userName = ctx.application.user?.name || 'User';
+  handleContext(ctx: Context) {
+    const principal = ctx.application.principal as Principal | undefined;
+    this.userName = principal?.user?.name || 'User';
   }
 
   @render()

package/bin/templates/pwa/src/pages/login.ts

@@ -1,7 +1,7 @@
 import { page } from '../router';
 import { render, styles, html, css, context } from 'snice';
 import type { Placard, Context } from 'snice';
-import type { AppContext } from '../types/auth';
+import type { Principal } from '../types/auth';
 import { login } from '../services/auth';
 
 const placard: Placard = {
@@ -17,10 +17,10 @@ export class LoginPage extends HTMLElement {
   error = '';
   loading = false;
 
-  private ctx?: Context<AppContext>;
+  private ctx?: Context;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.ctx = ctx;
   }
 
@@ -33,10 +33,10 @@ export class LoginPage extends HTMLElement {
       const result = await login({ email: this.email, password: this.password });
 
       // Update context with new auth state
-      if (this.ctx) {
-        this.ctx.application.user = result.user;
-        this.ctx.application.isAuthenticated = true;
-        this.ctx.update();
+      if (this.ctx && this.ctx.application.principal) {
+        const principal = this.ctx.application.principal as Principal;
+        principal.user = result.user;
+        principal.isAuthenticated = true;
       }
 
       window.location.href = '#/dashboard';

package/bin/templates/pwa/src/pages/notifications.ts

@@ -48,7 +48,7 @@ export class NotificationsPage extends HTMLElement {
     this.notifications = [];
   }
 
-  remove(id: string) {
+  removeNotification(id: string) {
     this.notifications = this.notifications.filter(n => n.id !== id);
   }
 
@@ -84,7 +84,7 @@ export class NotificationsPage extends HTMLElement {
                 key=${notification.id}
                 variant="${this.getVariant(notification.type)}"
                 dismissible
-                @dismiss=${() => this.remove(notification.id)}
+                @dismiss=${() => this.removeNotification(notification.id)}
               >
                 <strong>${notification.title}</strong>
                 <p>${notification.message}</p>

package/bin/templates/pwa/src/pages/profile.ts

@@ -1,7 +1,7 @@
 import { page } from '../router';
 import { render, styles, html, css, context } from 'snice';
 import type { Placard, Context } from 'snice';
-import type { AppContext, User } from '../types/auth';
+import type { Principal, User } from '../types/auth';
 import { authGuard } from '../guards/auth';
 import { logout } from '../services/auth';
 
@@ -16,22 +16,23 @@ const placard: Placard = {
 @page({ tag: 'profile-page', routes: ['/profile'], guards: [authGuard], placard })
 export class ProfilePage extends HTMLElement {
   user: User | null = null;
-  private ctx?: Context<AppContext>;
+  private ctx?: Context;
 
   @context()
-  handleContext(ctx: Context<AppContext>) {
+  handleContext(ctx: Context) {
     this.ctx = ctx;
-    this.user = ctx.application.user;
+    const principal = ctx.application.principal as Principal | undefined;
+    this.user = principal?.user || null;
   }
 
   async handleLogout() {
     await logout();
 
     // Update context to reflect logged out state
-    if (this.ctx) {
-      this.ctx.application.user = null;
-      this.ctx.application.isAuthenticated = false;
-      this.ctx.update();
+    if (this.ctx && this.ctx.application.principal) {
+      const principal = this.ctx.application.principal as Principal;
+      principal.user = null;
+      principal.isAuthenticated = false;
     }
 
     window.location.href = '#/login';

package/bin/templates/pwa/src/router.ts

@@ -1,15 +1,19 @@
 import { Router } from 'snice';
-import type { AppContext } from './types/auth';
+import type { Principal } from './types/auth';
 import { getUser } from './services/storage';
 import { isAuthenticated } from './services/auth';
+import { fetcher } from './fetcher';
 
-const { page, initialize, navigate } = Router<AppContext>({
+const { page, initialize, navigate } = Router({
   target: '#app',
   type: 'hash',
   layout: 'snice-layout',
+  fetcher,
   context: {
-    user: getUser(),
-    isAuthenticated: isAuthenticated()
+    principal: {
+      user: getUser(),
+      isAuthenticated: isAuthenticated()
+    } as Principal
   }
 });
 

package/bin/templates/pwa/src/types/auth.ts

@@ -15,7 +15,7 @@ export interface LoginResponse {
   user: User;
 }
 
-export interface AppContext {
+export interface Principal {
   user: User | null;
   isAuthenticated: boolean;
 }

package/bin/templates/pwa/tests/helpers/test-utils.ts

@@ -0,0 +1,84 @@
+/**
+ * Wait for a specified number of milliseconds
+ */
+export async function waitFor(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Wait for a condition to become true
+ */
+export async function waitUntil(
+  condition: () => boolean,
+  timeout = 1000,
+  interval = 10
+): Promise<void> {
+  const start = Date.now();
+  while (!condition()) {
+    if (Date.now() - start > timeout) {
+      throw new Error('Timeout waiting for condition');
+    }
+    await waitFor(interval);
+  }
+}
+
+/**
+ * Create a container div and append it to document.body
+ */
+export function createContainer(id = 'app'): HTMLDivElement {
+  const container = document.createElement('div');
+  container.id = id;
+  document.body.appendChild(container);
+  return container;
+}
+
+/**
+ * Clean up the document body
+ */
+export function cleanup(): void {
+  document.body.innerHTML = '';
+}
+
+/**
+ * Mock localStorage for tests
+ */
+export function mockLocalStorage(): {
+  getItem: ReturnType<typeof vi.fn>;
+  setItem: ReturnType<typeof vi.fn>;
+  removeItem: ReturnType<typeof vi.fn>;
+  clear: ReturnType<typeof vi.fn>;
+} {
+  const store: Record<string, string> = {};
+
+  return {
+    getItem: vi.fn((key: string) => store[key] || null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value;
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    }),
+    clear: vi.fn(() => {
+      Object.keys(store).forEach(key => delete store[key]);
+    }),
+  };
+}
+
+/**
+ * Mock fetch for tests
+ */
+export function mockFetch(
+  response: unknown = {},
+  status = 200,
+  ok = true
+): ReturnType<typeof vi.fn> {
+  return vi.fn(() =>
+    Promise.resolve({
+      ok,
+      status,
+      json: () => Promise.resolve(response),
+      text: () => Promise.resolve(JSON.stringify(response)),
+      headers: new Headers(),
+    } as Response)
+  );
+}

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

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { Context } from 'snice';
+import { authMiddleware } from '../../src/middleware/auth';
+import * as storage from '../../src/services/storage';
+
+describe('Auth Middleware', () => {
+  let mockContext: Context;
+  let mockRequest: Request;
+  let mockNext: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+
+    // Create mock context
+    mockContext = {
+      application: {
+        principal: {
+          user: null,
+          isAuthenticated: false,
+        },
+      },
+      navigation: {
+        route: '/',
+        params: {},
+      },
+      update: vi.fn(),
+    } as unknown as Context;
+
+    // Create mock request
+    mockRequest = new Request('https://api.example.com/data', {
+      headers: new Headers(),
+    });
+
+    // Create mock next function
+    const mockResponse = new Response('{}', { status: 200 });
+    mockNext = vi.fn(() => Promise.resolve(mockResponse));
+  });
+
+  it('should add Authorization header when token exists', async () => {
+    const token = 'test-token-123';
+    storage.setToken(token);
+
+    await authMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockRequest.headers.get('Authorization')).toBe(`Bearer ${token}`);
+    expect(mockNext).toHaveBeenCalled();
+  });
+
+  it('should not add Authorization header when no token exists', async () => {
+    await authMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockRequest.headers.get('Authorization')).toBeNull();
+    expect(mockNext).toHaveBeenCalled();
+  });
+
+  it('should call next() and return response', async () => {
+    const token = 'test-token-123';
+    storage.setToken(token);
+
+    const response = await authMiddleware.call(mockContext, mockRequest, mockNext);
+
+    expect(mockNext).toHaveBeenCalledTimes(1);
+    expect(response).toBeInstanceOf(Response);
+    expect(response.status).toBe(200);
+  });
+});