Decorator Pattern

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// Classic Java I/O example showing decorator composition
// Each layer adds one responsibility
 
import java.io.*;
import java.util.zip.*;
import javax.crypto.*;
 
// Reading a compressed, encrypted file with buffering
public FileReader createSecureReader(String path, Cipher cipher) {
    // Build from inside out: File → Decrypt → Decompress → Buffer
    InputStream file = new FileInputStream(path);
    InputStream decrypted = new CipherInputStream(file, cipher);
    InputStream decompressed = new GZIPInputStream(decrypted);
    InputStream buffered = new BufferedInputStream(decompressed);
    
    return new InputStreamReader(buffered, StandardCharsets.UTF_8);
}
 
// Same approach for writing
public FileWriter createSecureWriter(String path, Cipher cipher) {
    // Build from inside out: File → Encrypt → Compress → Buffer
    OutputStream file = new FileOutputStream(path);
    OutputStream encrypted = new CipherOutputStream(file, cipher);
    OutputStream compressed = new GZIPOutputStream(encrypted);
    OutputStream buffered = new BufferedOutputStream(compressed);
    
    return new OutputStreamWriter(buffered, StandardCharsets.UTF_8);
}
 
// Fluent alternative using try-with-resources
try (var writer = new BufferedWriter(
        new OutputStreamWriter(
            new GZIPOutputStream(
                new CipherOutputStream(
                    new FileOutputStream("data.enc.gz"),
                    cipher
                )
            ),
            StandardCharsets.UTF_8
        )
    )) {
    writer.write("Secure compressed data");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import { createReadStream, createWriteStream } from 'fs';
import { createGzip, createGunzip } from 'zlib';
import { createCipheriv, createDecipheriv } from 'crypto';
import { pipeline } from 'stream/promises';
 
// Writing: File → Cipher → Gzip (compression after encryption)
async function writeSecure(inputPath: string, outputPath: string): Promise<void> {
    const cipher = createCipheriv('aes-256-cbc', key, iv);
    const gzip = createGzip();
    
    await pipeline(
        createReadStream(inputPath),
        cipher,     // Decorator 1: encryption
        gzip,       // Decorator 2: compression
        createWriteStream(outputPath)
    );
}
 
// Reading: Gunzip → Decipher → Consumer (reverse order)
async function readSecure(inputPath: string): Promise<Buffer> {
    const decipher = createDecipheriv('aes-256-cbc', key, iv);
    const gunzip = createGunzip();
    
    const chunks: Buffer[] = [];
    
    await pipeline(
        createReadStream(inputPath),
        gunzip,     // Unwrap compression first
        decipher,   // Then decrypt
        async function* (source) {
            for await (const chunk of source) {
                chunks.push(chunk);
            }
        }
    );
    
    return Buffer.concat(chunks);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

import express, { Request, Response, NextFunction } from 'express';
 
const app = express();
 
// Each middleware is a decorator around the next handler
// Order of app.use() determines decorator nesting
 
// Decorator 1: Request logging
app.use((req: Request, res: Response, next: NextFunction) => {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.path}`);
    const start = Date.now();
    
    res.on('finish', () => {
        console.log(`[${new Date().toISOString()}] ${res.statusCode} in ${Date.now() - start}ms`);
    });
    
    next(); // Delegate to wrapped handler
});
 
// Decorator 2: Authentication
app.use((req: Request, res: Response, next: NextFunction) => {
    const token = req.headers.authorization?.replace('Bearer ', '');
    
    if (!validateToken(token)) {
        return res.status(401).json({ error: 'Unauthorized' });
    }
    
    req.user = decodeToken(token);
    next(); // Delegate if authenticated
});
 
// Decorator 3: Rate limiting
app.use((req: Request, res: Response, next: NextFunction) => {
    const userKey = req.user?.id || req.ip;
    
    if (isRateLimited(userKey)) {
        return res.status(429).json({ error: 'Too many requests' });
    }
    
    incrementRequestCount(userKey);
    next();
});
 
// Decorator 4: Error handling (wraps everything)
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
    console.error('Unhandled error:', err);
    res.status(500).json({ error: 'Internal server error' });
});
 
// The actual handler (wrapped by all middleware above)
app.get('/api/users/:id', async (req, res) => {
    const user = await findUser(req.params.id);
    res.json(user);
});
 
// Request flow:
// Request → Logging → Auth → RateLimit → Handler → Response
// Each middleware decorates the next layer in the chain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

// Making the Decorator pattern explicit in a custom framework
 
interface HttpHandler {
    handle(request: HttpRequest): Promise<HttpResponse>;
}
 
// Base handler (ConcreteComponent)
class UserController implements HttpHandler {
    async handle(request: HttpRequest): Promise<HttpResponse> {
        const user = await this.userService.findById(request.params.id);
        return HttpResponse.ok(user);
    }
}
 
// Abstract decorator
abstract class HttpHandlerDecorator implements HttpHandler {
    constructor(protected wrapped: HttpHandler) {}
    
    async handle(request: HttpRequest): Promise<HttpResponse> {
        return this.wrapped.handle(request);
    }
}
 
// Concrete decorators
class LoggingDecorator extends HttpHandlerDecorator {
    async handle(request: HttpRequest): Promise<HttpResponse> {
        console.log(`Incoming: ${request.method} ${request.path}`);
        const start = Date.now();
        
        const response = await super.handle(request);
        
        console.log(`Outgoing: ${response.status} in ${Date.now() - start}ms`);
        return response;
    }
}
 
class AuthDecorator extends HttpHandlerDecorator {
    constructor(wrapped: HttpHandler, private authService: AuthService) {
        super(wrapped);
    }
    
    async handle(request: HttpRequest): Promise<HttpResponse> {
        const user = await this.authService.authenticate(request);
        
        if (!user) {
            return HttpResponse.unauthorized();
        }
        
        request.user = user;
        return super.handle(request);
    }
}
 
class RateLimitDecorator extends HttpHandlerDecorator {
    constructor(wrapped: HttpHandler, private limiter: RateLimiter) {
        super(wrapped);
    }
    
    async handle(request: HttpRequest): Promise<HttpResponse> {
        const allowed = await this.limiter.check(request.clientId);
        
        if (!allowed) {
            return HttpResponse.tooManyRequests();
        }
        
        return super.handle(request);
    }
}
 
// Compose the handler with decorators
const userHandler = new LoggingDecorator(
    new AuthDecorator(
        new RateLimitDecorator(
            new UserController(),
            rateLimiter
        ),
        authService
    )
);
 
// All requests go through: Logging → Auth → RateLimit → Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

import React, { ComponentType, useState, useEffect } from 'react';
 
// Type for any component with specific props
type ComponentWithUser = { user: User };
 
// HOC Decorator 1: withAuthentication
// Wraps a component to require authentication
function withAuthentication<P extends ComponentWithUser>(
    WrappedComponent: ComponentType<P>
): ComponentType<Omit<P, 'user'>> {
    return function AuthenticatedComponent(props: Omit<P, 'user'>) {
        const [user, setUser] = useState<User | null>(null);
        const [loading, setLoading] = useState(true);
        
        useEffect(() => {
            authService.getCurrentUser()
                .then(setUser)
                .finally(() => setLoading(false));
        }, []);
        
        if (loading) return <LoadingSpinner />;
        if (!user) return <LoginRedirect />;
        
        // Inject user prop and render wrapped component
        return <WrappedComponent {...props as P} user={user} />;
    };
}
 
// HOC Decorator 2: withLogging
// Wraps a component to log renders
function withLogging<P extends object>(
    WrappedComponent: ComponentType<P>,
    componentName: string
): ComponentType<P> {
    return function LoggedComponent(props: P) {
        useEffect(() => {
            console.log(`[${componentName}] Mounted`);
            return () => console.log(`[${componentName}] Unmounted`);
        }, []);
        
        console.log(`[${componentName}] Rendering with props:`, props);
        return <WrappedComponent {...props} />;
    };
}
 
// HOC Decorator 3: withErrorBoundary
function withErrorBoundary<P extends object>(
    WrappedComponent: ComponentType<P>,
    FallbackComponent: ComponentType<{ error: Error }>
): ComponentType<P> {
    return class ErrorBoundary extends React.Component<P, { error: Error | null }> {
        state = { error: null };
        
        static getDerivedStateFromError(error: Error) {
            return { error };
        }
        
        render() {
            if (this.state.error) {
                return <FallbackComponent error={this.state.error} />;
            }
            return <WrappedComponent {...this.props} />;
        }
    };
}
 
// The base component (ConcreteComponent)
function UserProfile({ user }: { user: User }) {
    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
}
 
// Compose decorators (order: inner → outer)
const EnhancedUserProfile = withErrorBoundary(
    withLogging(
        withAuthentication(UserProfile),
        'UserProfile'
    ),
    ErrorFallback
);
 
// Usage: Enhanced component has all behaviors
function App() {
    return <EnhancedUserProfile />;
    // Renders: ErrorBoundary → Logging → Authentication → UserProfile
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// Using hooks achieves similar results with different syntax
// The compositional idea remains the same
 
function useAuth(): { user: User | null; loading: boolean } {
    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        authService.getCurrentUser()
            .then(setUser)
            .finally(() => setLoading(false));
    }, []);
    
    return { user, loading };
}
 
function useLogging(componentName: string): void {
    useEffect(() => {
        console.log(`[${componentName}] Mounted`);
        return () => console.log(`[${componentName}] Unmounted`);
    }, []);
}
 
// Component composes behaviors via hooks
function UserProfile() {
    useLogging('UserProfile');
    const { user, loading } = useAuth();
    
    if (loading) return <LoadingSpinner />;
    if (!user) return <LoginRedirect />;
    
    return (
        <ErrorBoundary fallback={<ErrorFallback />}>
            <div>
                <h1>{user.name}</h1>
                <p>{user.email}</p>
            </div>
        </ErrorBoundary>
    );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

// Component interface
interface UserRepository {
    findById(id: string): Promise<User | null>;
    findByEmail(email: string): Promise<User | null>;
    save(user: User): Promise<void>;
    delete(id: string): Promise<void>;
}
 
// ConcreteComponent: Actual database access
class PostgresUserRepository implements UserRepository {
    constructor(private pool: Pool) {}
    
    async findById(id: string): Promise<User | null> {
        const result = await this.pool.query(
            'SELECT * FROM users WHERE id = $1',
            [id]
        );
        return result.rows[0] ?? null;
    }
    
    async findByEmail(email: string): Promise<User | null> {
        const result = await this.pool.query(
            'SELECT * FROM users WHERE email = $1',
            [email]
        );
        return result.rows[0] ?? null;
    }
    
    async save(user: User): Promise<void> {
        await this.pool.query(
            `INSERT INTO users (id, name, email) 
             VALUES ($1, $2, $3) 
             ON CONFLICT (id) DO UPDATE SET name = $2, email = $3`,
            [user.id, user.name, user.email]
        );
    }
    
    async delete(id: string): Promise<void> {
        await this.pool.query('DELETE FROM users WHERE id = $1', [id]);
    }
}
 
// Base decorator
abstract class UserRepositoryDecorator implements UserRepository {
    constructor(protected wrapped: UserRepository) {}
    
    findById(id: string): Promise<User | null> {
        return this.wrapped.findById(id);
    }
    
    findByEmail(email: string): Promise<User | null> {
        return this.wrapped.findByEmail(email);
    }
    
    save(user: User): Promise<void> {
        return this.wrapped.save(user);
    }
    
    delete(id: string): Promise<void> {
        return this.wrapped.delete(id);
    }
}
 
// Decorator 1: Caching
class CachingUserRepository extends UserRepositoryDecorator {
    constructor(wrapped: UserRepository, private cache: Cache) {
        super(wrapped);
    }
    
    async findById(id: string): Promise<User | null> {
        const cached = await this.cache.get<User>(`user:${id}`);
        if (cached) {
            console.log(`[Cache] HIT for user:${id}`);
            return cached;
        }
        
        console.log(`[Cache] MISS for user:${id}`);
        const user = await this.wrapped.findById(id);
        
        if (user) {
            await this.cache.set(`user:${id}`, user, { ttl: 3600 });
        }
        
        return user;
    }
    
    async save(user: User): Promise<void> {
        await this.wrapped.save(user);
        // Invalidate cache on write
        await this.cache.delete(`user:${user.id}`);
        await this.cache.delete(`user:email:${user.email}`);
    }
    
    async delete(id: string): Promise<void> {
        const user = await this.wrapped.findById(id);
        await this.wrapped.delete(id);
        
        if (user) {
            await this.cache.delete(`user:${id}`);
            await this.cache.delete(`user:email:${user.email}`);
        }
    }
}
 
// Decorator 2: Retry Logic
class RetryingUserRepository extends UserRepositoryDecorator {
    constructor(
        wrapped: UserRepository,
        private maxRetries: number = 3,
        private delayMs: number = 1000
    ) {
        super(wrapped);
    }
    
    private async withRetry<T>(operation: () => Promise<T>): Promise<T> {
        let lastError: Error;
        
        for (let attempt = 1; attempt <= this.maxRetries; attempt++) {
            try {
                return await operation();
            } catch (error) {
                lastError = error as Error;
                console.log(`[Retry] Attempt ${attempt} failed: ${lastError.message}`);
                
                if (attempt < this.maxRetries) {
                    await this.delay(this.delayMs * attempt);
                }
            }
        }
        
        throw lastError!;
    }
    
    private delay(ms: number): Promise<void> {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    findById(id: string): Promise<User | null> {
        return this.withRetry(() => this.wrapped.findById(id));
    }
    
    findByEmail(email: string): Promise<User | null> {
        return this.withRetry(() => this.wrapped.findByEmail(email));
    }
    
    save(user: User): Promise<void> {
        return this.withRetry(() => this.wrapped.save(user));
    }
    
    delete(id: string): Promise<void> {
        return this.withRetry(() => this.wrapped.delete(id));
    }
}
 
// Decorator 3: Metrics
class MetricsUserRepository extends UserRepositoryDecorator {
    constructor(wrapped: UserRepository, private metrics: MetricsClient) {
        super(wrapped);
    }
    
    private async withMetrics<T>(
        operation: string,
        fn: () => Promise<T>
    ): Promise<T> {
        const timer = this.metrics.startTimer('repository_operation', {
            repository: 'user',
            operation
        });
        
        try {
            const result = await fn();
            this.metrics.increment('repository_success', { operation });
            return result;
        } catch (error) {
            this.metrics.increment('repository_error', { operation });
            throw error;
        } finally {
            timer.end();
        }
    }
    
    findById(id: string): Promise<User | null> {
        return this.withMetrics('findById', () => this.wrapped.findById(id));
    }
    
    // ... other methods with metrics
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// Factory function that builds decorated repository
function createUserRepository(config: AppConfig): UserRepository {
    // Start with concrete implementation
    let repository: UserRepository = new PostgresUserRepository(dbPool);
    
    // Add retry logic first (closest to DB, retries raw operations)
    if (config.database.enableRetry) {
        repository = new RetryingUserRepository(
            repository,
            config.database.maxRetries,
            config.database.retryDelay
        );
    }
    
    // Add metrics (measures operation including retries)
    if (config.observability.enableMetrics) {
        repository = new MetricsUserRepository(repository, metricsClient);
    }
    
    // Add caching (outermost, avoids hitting DB for cached data)
    if (config.caching.enabled) {
        repository = new CachingUserRepository(repository, cache);
    }
    
    return repository;
}
 
// Usage
const userRepo = createUserRepository(appConfig);
 
// Call goes through: Cache → Metrics → Retry → Postgres
const user = await userRepo.findById('user-123');
 
// If cached: Cache HIT → returns immediately (Metrics and Retry not touched)
// If not cached: Cache MISS → Metrics starts → Retry wraps → Postgres query
//                → Retry succeeds → Metrics records → Cache stores → returns

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

interface HttpClient {
    request<T>(config: RequestConfig): Promise<HttpResponse<T>>;
}
 
interface RequestConfig {
    method: 'GET' | 'POST' | 'PUT' | 'DELETE';
    url: string;
    data?: unknown;
    headers?: Record<string, string>;
}
 
interface HttpResponse<T> {
    status: number;
    data: T;
    headers: Record<string, string>;
}
 
// ConcreteComponent: Actual HTTP implementation
class FetchHttpClient implements HttpClient {
    async request<T>(config: RequestConfig): Promise<HttpResponse<T>> {
        const response = await fetch(config.url, {
            method: config.method,
            headers: config.headers,
            body: config.data ? JSON.stringify(config.data) : undefined,
        });
        
        return {
            status: response.status,
            data: await response.json(),
            headers: Object.fromEntries(response.headers),
        };
    }
}
 
// Decorator: Authentication
class AuthenticatedHttpClient implements HttpClient {
    constructor(
        private wrapped: HttpClient,
        private tokenProvider: () => Promise<string>
    ) {}
    
    async request<T>(config: RequestConfig): Promise<HttpResponse<T>> {
        const token = await this.tokenProvider();
        
        return this.wrapped.request({
            ...config,
            headers: {
                ...config.headers,
                Authorization: `Bearer ${token}`,
            },
        });
    }
}
 
// Decorator: Retry with exponential backoff
class RetryHttpClient implements HttpClient {
    constructor(
        private wrapped: HttpClient,
        private maxRetries: number = 3
    ) {}
    
    async request<T>(config: RequestConfig): Promise<HttpResponse<T>> {
        let lastError: Error;
        
        for (let attempt = 0; attempt < this.maxRetries; attempt++) {
            try {
                const response = await this.wrapped.request<T>(config);
                
                // Retry on 5xx errors
                if (response.status >= 500) {
                    throw new Error(`Server error: ${response.status}`);
                }
                
                return response;
            } catch (error) {
                lastError = error as Error;
                
                if (attempt < this.maxRetries - 1) {
                    const delay = Math.pow(2, attempt) * 1000;
                    await new Promise(r => setTimeout(r, delay));
                }
            }
        }
        
        throw lastError!;
    }
}
 
// Decorator: Circuit Breaker
class CircuitBreakerHttpClient implements HttpClient {
    private failureCount = 0;
    private lastFailureTime = 0;
    private state: 'CLOSED' | 'OPEN' | 'HALF_OPEN' = 'CLOSED';
    
    constructor(
        private wrapped: HttpClient,
        private threshold: number = 5,
        private resetTimeMs: number = 30000
    ) {}
    
    async request<T>(config: RequestConfig): Promise<HttpResponse<T>> {
        if (this.state === 'OPEN') {
            if (Date.now() - this.lastFailureTime > this.resetTimeMs) {
                this.state = 'HALF_OPEN';
            } else {
                throw new Error('Circuit breaker is OPEN');
            }
        }
        
        try {
            const response = await this.wrapped.request<T>(config);
            this.onSuccess();
            return response;
        } catch (error) {
            this.onFailure();
            throw error;
        }
    }
    
    private onSuccess(): void {
        this.failureCount = 0;
        this.state = 'CLOSED';
    }
    
    private onFailure(): void {
        this.failureCount++;
        this.lastFailureTime = Date.now();
        
        if (this.failureCount >= this.threshold) {
            this.state = 'OPEN';
        }
    }
}
 
// Decorator: Request/Response Logging
class LoggingHttpClient implements HttpClient {
    constructor(
        private wrapped: HttpClient,
        private logger: Logger
    ) {}
    
    async request<T>(config: RequestConfig): Promise<HttpResponse<T>> {
        const requestId = crypto.randomUUID();
        
        this.logger.info({
            requestId,
            type: 'HTTP_REQUEST',
            method: config.method,
            url: config.url,
        });
        
        const start = Date.now();
        
        try {
            const response = await this.wrapped.request<T>(config);
            
            this.logger.info({
                requestId,
                type: 'HTTP_RESPONSE',
                status: response.status,
                durationMs: Date.now() - start,
            });
            
            return response;
        } catch (error) {
            this.logger.error({
                requestId,
                type: 'HTTP_ERROR',
                error: (error as Error).message,
                durationMs: Date.now() - start,
            });
            throw error;
        }
    }
}
 
// Compose into production-ready client
const apiClient = new LoggingHttpClient(
    new CircuitBreakerHttpClient(
        new RetryHttpClient(
            new AuthenticatedHttpClient(
                new FetchHttpClient(),
                () => authService.getAccessToken()
            )
        )
    ),
    logger
);
 
// Order: Logging → CircuitBreaker → Retry → Auth → Fetch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

// Component interface
interface Validator<T> {
    validate(input: T): ValidationResult;
}
 
interface ValidationResult {
    valid: boolean;
    errors: string[];
}
 
// Base decorator that chains validators
abstract class ValidatorDecorator<T> implements Validator<T> {
    constructor(protected next: Validator<T> | null = null) {}
    
    validate(input: T): ValidationResult {
        const currentResult = this.doValidate(input);
        
        // If invalid, can stop or continue (configurable)
        if (!currentResult.valid) {
            return currentResult;
        }
        
        // Chain to next validator if present
        if (this.next) {
            const nextResult = this.next.validate(input);
            return {
                valid: nextResult.valid,
                errors: [...currentResult.errors, ...nextResult.errors],
            };
        }
        
        return currentResult;
    }
    
    protected abstract doValidate(input: T): ValidationResult;
}
 
// Concrete validators for user registration
interface RegistrationData {
    email: string;
    password: string;
    username: string;
    age: number;
}
 
class EmailValidator extends ValidatorDecorator<RegistrationData> {
    private emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    protected doValidate(input: RegistrationData): ValidationResult {
        if (!this.emailRegex.test(input.email)) {
            return { valid: false, errors: ['Invalid email format'] };
        }
        return { valid: true, errors: [] };
    }
}
 
class PasswordStrengthValidator extends ValidatorDecorator<RegistrationData> {
    protected doValidate(input: RegistrationData): ValidationResult {
        const errors: string[] = [];
        
        if (input.password.length < 8) {
            errors.push('Password must be at least 8 characters');
        }
        if (!/[A-Z]/.test(input.password)) {
            errors.push('Password must contain uppercase letter');
        }
        if (!/[a-z]/.test(input.password)) {
            errors.push('Password must contain lowercase letter');
        }
        if (!/[0-9]/.test(input.password)) {
            errors.push('Password must contain a number');
        }
        
        return { valid: errors.length === 0, errors };
    }
}
 
class UsernameValidator extends ValidatorDecorator<RegistrationData> {
    protected doValidate(input: RegistrationData): ValidationResult {
        if (input.username.length < 3) {
            return { valid: false, errors: ['Username must be at least 3 characters'] };
        }
        if (!/^[a-zA-Z0-9_]+$/.test(input.username)) {
            return { valid: false, errors: ['Username can only contain letters, numbers, and underscores'] };
        }
        return { valid: true, errors: [] };
    }
}
 
class AgeValidator extends ValidatorDecorator<RegistrationData> {
    protected doValidate(input: RegistrationData): ValidationResult {
        if (input.age < 13) {
            return { valid: false, errors: ['Must be at least 13 years old'] };
        }
        if (input.age > 120) {
            return { valid: false, errors: ['Invalid age provided'] };
        }
        return { valid: true, errors: [] };
    }
}
 
// Compose validator chain
const registrationValidator = new EmailValidator(
    new PasswordStrengthValidator(
        new UsernameValidator(
            new AgeValidator()
        )
    )
);
 
// Usage
const result = registrationValidator.validate({
    email: 'invalid-email',
    password: 'weak',
    username: 'ab',
    age: 10,
});
 
// Result: { valid: false, errors: ['Invalid email format'] }
// Stops at first failure; change to collect all errors by modifying base decorator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

interface TextProcessor {
    process(text: string): string;
}
 
// ConcreteComponent: Identity processor (no-op)
class IdentityProcessor implements TextProcessor {
    process(text: string): string {
        return text;
    }
}
 
// Base decorator
abstract class TextProcessorDecorator implements TextProcessor {
    constructor(protected wrapped: TextProcessor) {}
    
    process(text: string): string {
        return this.wrapped.process(text);
    }
}
 
// Decorator: HTML entity encoding (XSS prevention)
class HtmlEncoder extends TextProcessorDecorator {
    private entities: Record<string, string> = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;',
    };
    
    process(text: string): string {
        const encoded = text.replace(
            /[&<>"']/g,
            char => this.entities[char]
        );
        return super.process(encoded);
    }
}
 
// Decorator: Markdown to HTML
class MarkdownProcessor extends TextProcessorDecorator {
    process(text: string): string {
        let html = text
            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.+?)\*/g, '<em>$1</em>')
            .replace(/\n/g, '<br>');
        
        return super.process(html);
    }
}
 
// Decorator: Profanity filter
class ProfanityFilter extends TextProcessorDecorator {
    private badWords = ['badword1', 'badword2']; // Simplified
    
    process(text: string): string {
        let filtered = text;
        
        for (const word of this.badWords) {
            const regex = new RegExp(word, 'gi');
            filtered = filtered.replace(regex, '*'.repeat(word.length));
        }
        
        return super.process(filtered);
    }
}
 
// Decorator: Link detection
class LinkDetector extends TextProcessorDecorator {
    private urlRegex = /(https?:\/\/[^\s]+)/g;
    
    process(text: string): string {
        const linked = text.replace(
            this.urlRegex,
            '<a href="$1" target="_blank">$1</a>'
        );
        return super.process(linked);
    }
}
 
// Decorator: Emoji conversion
class EmojiConverter extends TextProcessorDecorator {
    private emojiMap: Record<string, string> = {
        ':)': '😊',
        ':(': '😢',
        ':D': '😄',
        '<3': '❤️',
    };
    
    process(text: string): string {
        let converted = text;
        
        for (const [code, emoji] of Object.entries(this.emojiMap)) {
            converted = converted.split(code).join(emoji);
        }
        
        return super.process(converted);
    }
}
 
// Compose for different use cases
const userBioProcessor = new HtmlEncoder(
    new LinkDetector(
        new ProfanityFilter(
            new EmojiConverter(
                new IdentityProcessor()
            )
        )
    )
);
 
const commentProcessor = new HtmlEncoder(
    new MarkdownProcessor(
        new ProfanityFilter(
            new EmojiConverter(
                new IdentityProcessor()
            )
        )
    )
);
 
// Usage
const bio = userBioProcessor.process(
    'Check out my site: https://example.com :) <script>alert("xss")</script>'
);
// Result: Emojis converted, link wrapped, HTML encoded, no XSS