@macpaw/cctk 1.0.0-beta.1

package/templates/claude/skills/devops/references/cloudflare-workers-advanced.md

@@ -0,0 +1,312 @@
+# Cloudflare Workers Advanced Patterns
+
+Advanced techniques for optimization, performance, and complex workflows.
+
+## Session Reuse and Connection Pooling
+
+### Durable Objects for Persistent Sessions
+```typescript
+export class Browser {
+  state: DurableObjectState;
+  browser: any;
+  lastUsed: number;
+
+  constructor(state: DurableObjectState, env: Env) {
+    this.state = state;
+    this.lastUsed = Date.now();
+  }
+
+  async fetch(request: Request, env: Env) {
+    if (!this.browser) {
+      this.browser = await puppeteer.launch(env.MYBROWSER);
+    }
+
+    this.lastUsed = Date.now();
+    await this.state.storage.setAlarm(Date.now() + 10000);
+
+    const page = await this.browser.newPage();
+    await page.goto(new URL(request.url).searchParams.get('url'));
+    const screenshot = await page.screenshot();
+    await page.close();
+
+    return new Response(screenshot);
+  }
+
+  async alarm() {
+    if (Date.now() - this.lastUsed > 60000) {
+      await this.browser?.close();
+      this.browser = null;
+    } else {
+      await this.state.storage.setAlarm(Date.now() + 10000);
+    }
+  }
+}
+```
+
+## Multi-Tier Caching Strategy
+
+```typescript
+const CACHE_TTL = 3600;
+
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+    const cache = caches.default;
+    const cacheKey = new Request(request.url);
+
+    // 1. Check edge cache
+    let response = await cache.match(cacheKey);
+    if (response) return response;
+
+    // 2. Check KV cache
+    const kvCached = await env.MY_KV.get(request.url);
+    if (kvCached) {
+      response = new Response(kvCached);
+      ctx.waitUntil(cache.put(cacheKey, response.clone()));
+      return response;
+    }
+
+    // 3. Fetch from origin
+    response = await fetch(request);
+
+    // 4. Store in both caches
+    ctx.waitUntil(Promise.all([
+      cache.put(cacheKey, response.clone()),
+      env.MY_KV.put(request.url, await response.clone().text(), {
+        expirationTtl: CACHE_TTL
+      })
+    ]));
+
+    return response;
+  }
+};
+```
+
+## WebSocket with Durable Objects
+
+```typescript
+export class ChatRoom {
+  state: DurableObjectState;
+  sessions: Set<WebSocket>;
+
+  constructor(state: DurableObjectState) {
+    this.state = state;
+    this.sessions = new Set();
+  }
+
+  async fetch(request: Request) {
+    const pair = new WebSocketPair();
+    const [client, server] = Object.values(pair);
+
+    this.state.acceptWebSocket(server);
+    this.sessions.add(server);
+
+    return new Response(null, { status: 101, webSocket: client });
+  }
+
+  async webSocketMessage(ws: WebSocket, message: string) {
+    // Broadcast to all connected clients
+    for (const session of this.sessions) {
+      session.send(message);
+    }
+  }
+
+  async webSocketClose(ws: WebSocket) {
+    this.sessions.delete(ws);
+  }
+}
+```
+
+## Queue-Based Crawler
+
+```typescript
+export default {
+  async queue(batch: MessageBatch<any>, env: Env): Promise<void> {
+    const browser = await puppeteer.launch(env.MYBROWSER);
+
+    for (const message of batch.messages) {
+      const page = await browser.newPage();
+      await page.goto(message.body.url);
+
+      // Extract links
+      const links = await page.evaluate(() => {
+        return Array.from(document.querySelectorAll('a'))
+          .map(a => a.href);
+      });
+
+      // Queue new links
+      for (const link of links) {
+        await env.QUEUE.send({ url: link });
+      }
+
+      await page.close();
+      message.ack();
+    }
+
+    await browser.close();
+  }
+};
+```
+
+## Authentication Pattern
+
+```typescript
+import { sign, verify } from 'hono/jwt';
+
+async function authenticate(request: Request, env: Env): Promise<any> {
+  const authHeader = request.headers.get('Authorization');
+
+  if (!authHeader?.startsWith('Bearer ')) {
+    throw new Error('Missing token');
+  }
+
+  const token = authHeader.substring(7);
+  const payload = await verify(token, env.JWT_SECRET);
+
+  return payload;
+}
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    try {
+      const user = await authenticate(request, env);
+      return new Response(`Hello ${user.name}`);
+    } catch (error) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+  }
+};
+```
+
+## Code Splitting
+
+```typescript
+// Lazy load large dependencies
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+
+    if (url.pathname === '/heavy') {
+      const { processHeavy } = await import('./heavy');
+      return processHeavy(request);
+    }
+
+    return new Response('OK');
+  }
+};
+```
+
+## Batch Operations with D1
+
+```typescript
+// Efficient bulk inserts
+const statements = users.map(user =>
+  env.DB.prepare('INSERT INTO users (name, email) VALUES (?, ?)')
+    .bind(user.name, user.email)
+);
+
+await env.DB.batch(statements);
+```
+
+## Stream Processing
+
+```typescript
+const { readable, writable } = new TransformStream({
+  transform(chunk, controller) {
+    // Process chunk
+    controller.enqueue(chunk);
+  }
+});
+
+response.body.pipeTo(writable);
+return new Response(readable);
+```
+
+## AI-Powered Web Scraper
+
+```typescript
+import { Ai } from '@cloudflare/ai';
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    // Render page
+    const browser = await puppeteer.launch(env.MYBROWSER);
+    const page = await browser.newPage();
+    await page.goto('https://news.ycombinator.com');
+    const content = await page.content();
+    await browser.close();
+
+    // Extract with AI
+    const ai = new Ai(env.AI);
+    const response = await ai.run('@cf/meta/llama-3-8b-instruct', {
+      messages: [
+        {
+          role: 'system',
+          content: 'Extract top 5 article titles and URLs as JSON array'
+        },
+        { role: 'user', content: content }
+      ]
+    });
+
+    return Response.json(response);
+  }
+};
+```
+
+## Performance Optimization
+
+### Bundle Size
+- Keep Workers <1MB bundled
+- Remove unused dependencies
+- Use code splitting
+- Check with: `wrangler deploy --dry-run --outdir=dist`
+
+### Cold Starts
+- Minimize initialization code
+- Use bindings over fetch
+- Avoid large imports at top level
+
+### Memory Management
+- Close pages when done: `await page.close()`
+- Disconnect browsers: `await browser.disconnect()`
+- Implement cleanup alarms in Durable Objects
+
+### Request Optimization
+- Use server-side filtering with `--filter`
+- Batch operations with D1 `.batch()`
+- Stream large responses
+- Implement proper caching
+
+## Monitoring & Debugging
+
+```bash
+# Real-time logs
+wrangler tail --format pretty
+
+# Filter by status
+wrangler tail --status error
+
+# Check deployments
+wrangler deployments list
+
+# Rollback
+wrangler rollback [version-id]
+```
+
+## Production Checklist
+
+- [ ] Multi-stage error handling implemented
+- [ ] Rate limiting configured
+- [ ] Caching strategy in place
+- [ ] Secrets managed with `wrangler secret`
+- [ ] Health checks implemented
+- [ ] Monitoring alerts configured
+- [ ] Session reuse for browser rendering
+- [ ] Resource cleanup (pages, browsers)
+- [ ] Proper timeout configurations
+- [ ] CI/CD pipeline set up
+
+## Resources
+
+- Advanced Patterns: https://developers.cloudflare.com/workers/examples/
+- Durable Objects: https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
+- Performance: https://developers.cloudflare.com/workers/platform/limits/

package/templates/claude/skills/devops/references/cloudflare-workers-apis.md

@@ -0,0 +1,309 @@
+# Cloudflare Workers Runtime APIs
+
+Key runtime APIs for Workers development.
+
+## Fetch API
+
+```typescript
+// Subrequest
+const response = await fetch('https://api.example.com/data', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ key: 'value' }),
+  cf: {
+    cacheTtl: 3600,
+    cacheEverything: true
+  }
+});
+
+const data = await response.json();
+```
+
+## Headers API
+
+```typescript
+// Read headers
+const userAgent = request.headers.get('User-Agent');
+
+// Cloudflare-specific
+const country = request.cf?.country;
+const colo = request.cf?.colo;
+const clientIP = request.headers.get('CF-Connecting-IP');
+
+// Set headers
+const headers = new Headers();
+headers.set('Content-Type', 'application/json');
+headers.append('X-Custom-Header', 'value');
+```
+
+## HTMLRewriter
+
+```typescript
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const response = await fetch(request);
+
+    return new HTMLRewriter()
+      .on('title', {
+        element(element) {
+          element.setInnerContent('New Title');
+        }
+      })
+      .on('a[href]', {
+        element(element) {
+          const href = element.getAttribute('href');
+          element.setAttribute('href', href.replace('http://', 'https://'));
+        }
+      })
+      .transform(response);
+  }
+};
+```
+
+## WebSockets
+
+```typescript
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const upgradeHeader = request.headers.get('Upgrade');
+    if (upgradeHeader !== 'websocket') {
+      return new Response('Expected WebSocket', { status: 426 });
+    }
+
+    const pair = new WebSocketPair();
+    const [client, server] = Object.values(pair);
+
+    server.accept();
+
+    server.addEventListener('message', (event) => {
+      server.send(`Echo: ${event.data}`);
+    });
+
+    return new Response(null, {
+      status: 101,
+      webSocket: client
+    });
+  }
+};
+```
+
+## Streams API
+
+```typescript
+const { readable, writable } = new TransformStream();
+
+const writer = writable.getWriter();
+writer.write(new TextEncoder().encode('chunk 1'));
+writer.write(new TextEncoder().encode('chunk 2'));
+writer.close();
+
+return new Response(readable, {
+  headers: { 'Content-Type': 'text/plain' }
+});
+```
+
+## Web Crypto API
+
+```typescript
+// Generate hash
+const data = new TextEncoder().encode('message');
+const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+const hashArray = Array.from(new Uint8Array(hashBuffer));
+const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+
+// HMAC signature
+const key = await crypto.subtle.importKey(
+  'raw',
+  new TextEncoder().encode('secret'),
+  { name: 'HMAC', hash: 'SHA-256' },
+  false,
+  ['sign', 'verify']
+);
+
+const signature = await crypto.subtle.sign('HMAC', key, data);
+const valid = await crypto.subtle.verify('HMAC', key, signature, data);
+
+// Random values
+const randomBytes = crypto.getRandomValues(new Uint8Array(32));
+const uuid = crypto.randomUUID();
+```
+
+## Encoding APIs
+
+```typescript
+// TextEncoder
+const encoder = new TextEncoder();
+const bytes = encoder.encode('Hello');
+
+// TextDecoder
+const decoder = new TextDecoder();
+const text = decoder.decode(bytes);
+
+// Base64
+const base64 = btoa('Hello');
+const decoded = atob(base64);
+```
+
+## URL API
+
+```typescript
+const url = new URL(request.url);
+const hostname = url.hostname;
+const pathname = url.pathname;
+const search = url.search;
+
+// Query parameters
+const name = url.searchParams.get('name');
+url.searchParams.set('page', '2');
+url.searchParams.delete('old');
+```
+
+## FormData API
+
+```typescript
+// Parse form data
+const formData = await request.formData();
+const name = formData.get('name');
+const file = formData.get('file');
+
+// Create form data
+const form = new FormData();
+form.append('name', 'value');
+form.append('file', blob, 'filename.txt');
+```
+
+## Response Types
+
+```typescript
+// Text
+return new Response('Hello');
+
+// JSON
+return Response.json({ message: 'Hello' });
+
+// Stream
+return new Response(readable);
+
+// Redirect
+return Response.redirect('https://example.com', 302);
+
+// Error
+return new Response('Not Found', { status: 404 });
+```
+
+## Request Cloning
+
+```typescript
+// Clone for multiple reads
+const clone = request.clone();
+const body1 = await request.json();
+const body2 = await clone.json();
+```
+
+## AbortController
+
+```typescript
+const controller = new AbortController();
+const { signal } = controller;
+
+setTimeout(() => controller.abort(), 5000);
+
+try {
+  const response = await fetch('https://slow-api.com', { signal });
+} catch (error) {
+  if (error.name === 'AbortError') {
+    console.log('Request timed out');
+  }
+}
+```
+
+## Scheduling APIs
+
+```typescript
+// setTimeout
+const timeoutId = setTimeout(() => {
+  console.log('Delayed');
+}, 1000);
+
+// setInterval
+const intervalId = setInterval(() => {
+  console.log('Repeated');
+}, 1000);
+
+// Clear
+clearTimeout(timeoutId);
+clearInterval(intervalId);
+```
+
+## Console API
+
+```typescript
+console.log('Info message');
+console.error('Error message');
+console.warn('Warning message');
+console.debug('Debug message');
+
+// Structured logging
+console.log(JSON.stringify({
+  level: 'info',
+  message: 'Request processed',
+  url: request.url,
+  timestamp: new Date().toISOString()
+}));
+```
+
+## Performance API
+
+```typescript
+const start = performance.now();
+await processRequest();
+const duration = performance.now() - start;
+console.log(`Processed in ${duration}ms`);
+```
+
+## Bindings Reference
+
+### KV Operations
+```typescript
+await env.KV.put(key, value, { expirationTtl: 3600, metadata: { userId: '123' } });
+const value = await env.KV.get(key, 'json');
+const { value, metadata } = await env.KV.getWithMetadata(key);
+await env.KV.delete(key);
+const list = await env.KV.list({ prefix: 'user:' });
+```
+
+### D1 Operations
+```typescript
+const result = await env.DB.prepare('SELECT * FROM users WHERE id = ?').bind(userId).first();
+const { results } = await env.DB.prepare('SELECT * FROM users').all();
+await env.DB.prepare('INSERT INTO users (name) VALUES (?)').bind(name).run();
+await env.DB.batch([stmt1, stmt2, stmt3]);
+```
+
+### R2 Operations
+```typescript
+await env.R2.put(key, value, { httpMetadata: { contentType: 'image/jpeg' } });
+const object = await env.R2.get(key);
+await env.R2.delete(key);
+const list = await env.R2.list({ prefix: 'uploads/' });
+const multipart = await env.R2.createMultipartUpload(key);
+```
+
+### Queue Operations
+```typescript
+await env.QUEUE.send({ type: 'email', to: 'user@example.com' });
+await env.QUEUE.sendBatch([{ body: msg1 }, { body: msg2 }]);
+```
+
+### Workers AI
+```typescript
+const response = await env.AI.run('@cf/meta/llama-3-8b-instruct', {
+  messages: [{ role: 'user', content: 'What is edge computing?' }]
+});
+```
+
+## Resources
+
+- Runtime APIs: https://developers.cloudflare.com/workers/runtime-apis/
+- Web Standards: https://developers.cloudflare.com/workers/runtime-apis/web-standards/
+- Bindings: https://developers.cloudflare.com/workers/runtime-apis/bindings/