@shaykec/bridge 0.1.0

package/src/templates.test.js

@@ -0,0 +1,256 @@
+/**
+ * Tests for ClaudeTeach bridge template engine.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { fillTemplate, loadTemplate, renderTemplate, listTemplates, clearTemplateCache } from './templates.js';
+
+// ---------------------------------------------------------------------------
+// fillTemplate
+// ---------------------------------------------------------------------------
+
+describe('fillTemplate', () => {
+  // --- Simple placeholders ---
+
+  it('replaces a simple placeholder', () => {
+    expect(fillTemplate('Hello {{name}}!', { name: 'Alice' })).toBe('Hello Alice!');
+  });
+
+  it('replaces multiple different placeholders', () => {
+    const tpl = '{{greeting}}, {{name}}!';
+    expect(fillTemplate(tpl, { greeting: 'Hi', name: 'Bob' })).toBe('Hi, Bob!');
+  });
+
+  it('replaces the same placeholder used more than once', () => {
+    const tpl = '{{x}} and {{x}}';
+    expect(fillTemplate(tpl, { x: 'yes' })).toBe('yes and yes');
+  });
+
+  // --- Nested placeholders ---
+
+  it('resolves nested dot-notation keys', () => {
+    const tpl = '{{user.name}} has {{user.xp}} XP';
+    expect(fillTemplate(tpl, { user: { name: 'Alice', xp: 100 } })).toBe('Alice has 100 XP');
+  });
+
+  it('resolves deeply nested keys', () => {
+    const tpl = '{{a.b.c}}';
+    expect(fillTemplate(tpl, { a: { b: { c: 'deep' } } })).toBe('deep');
+  });
+
+  // --- Missing keys ---
+
+  it('replaces missing keys with empty string', () => {
+    expect(fillTemplate('Hello {{missing}}!', {})).toBe('Hello !');
+  });
+
+  it('replaces missing nested keys with empty string', () => {
+    expect(fillTemplate('{{a.b.c}}', { a: {} })).toBe('');
+  });
+
+  // --- HTML escaping ---
+
+  it('escapes HTML special characters in values', () => {
+    expect(fillTemplate('{{val}}', { val: '<script>alert("xss")</script>' }))
+      .toBe('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+  });
+
+  it('escapes ampersands', () => {
+    expect(fillTemplate('{{val}}', { val: 'A & B' })).toBe('A &amp; B');
+  });
+
+  it('escapes single quotes', () => {
+    expect(fillTemplate('{{val}}', { val: "it's" })).toBe('it&#39;s');
+  });
+
+  // --- Array blocks ---
+
+  it('renders an array block with primitives using {{.}}', () => {
+    const tpl = '{{#items}}{{.}},{{/items}}';
+    expect(fillTemplate(tpl, { items: ['a', 'b', 'c'] })).toBe('a,b,c,');
+  });
+
+  it('renders an array block with objects using {{.property}}', () => {
+    const tpl = '{{#users}}{{.name}};{{/users}}';
+    expect(fillTemplate(tpl, { users: [{ name: 'Alice' }, { name: 'Bob' }] })).toBe('Alice;Bob;');
+  });
+
+  it('renders {{@index}} in array blocks', () => {
+    const tpl = '{{#items}}{{@index}}:{{.}},{{/items}}';
+    expect(fillTemplate(tpl, { items: ['x', 'y'] })).toBe('0:x,1:y,');
+  });
+
+  it('renders empty string for non-array values in block syntax', () => {
+    const tpl = '{{#items}}{{.}}{{/items}}';
+    expect(fillTemplate(tpl, { items: 'not an array' })).toBe('');
+  });
+
+  it('renders empty string for missing array key', () => {
+    const tpl = '{{#items}}{{.}}{{/items}}';
+    expect(fillTemplate(tpl, {})).toBe('');
+  });
+
+  it('handles empty arrays', () => {
+    const tpl = '{{#items}}{{.}}{{/items}}';
+    expect(fillTemplate(tpl, { items: [] })).toBe('');
+  });
+
+  it('renders {{.}} for objects as escaped JSON', () => {
+    const tpl = '{{#items}}{{.}},{{/items}}';
+    const result = fillTemplate(tpl, { items: [{ a: 1 }] });
+    // {{.}} on an object gives escaped JSON
+    expect(result).toContain('&quot;a&quot;');
+  });
+
+  it('escapes HTML in array item properties', () => {
+    const tpl = '{{#items}}{{.name}}{{/items}}';
+    expect(fillTemplate(tpl, { items: [{ name: '<b>bold</b>' }] }))
+      .toBe('&lt;b&gt;bold&lt;/b&gt;');
+  });
+
+  // --- JSON injection ---
+
+  it('renders JSON injection with triple braces', () => {
+    const tpl = 'var d = {{{json:data}}};';
+    expect(fillTemplate(tpl, { data: { a: 1, b: 'hello' } }))
+      .toBe('var d = {"a":1,"b":"hello"};');
+  });
+
+  it('renders null for missing JSON key', () => {
+    const tpl = '{{{json:missing}}}';
+    expect(fillTemplate(tpl, {})).toBe('null');
+  });
+
+  it('renders nested JSON injection', () => {
+    const tpl = '{{{json:user.profile}}}';
+    expect(fillTemplate(tpl, { user: { profile: { age: 30 } } }))
+      .toBe('{"age":30}');
+  });
+
+  it('renders arrays via JSON injection', () => {
+    const tpl = '{{{json:list}}}';
+    expect(fillTemplate(tpl, { list: [1, 2, 3] })).toBe('[1,2,3]');
+  });
+
+  // --- Edge cases ---
+
+  it('handles empty data object', () => {
+    const tpl = '{{name}} — {{age}}';
+    expect(fillTemplate(tpl, {})).toBe(' — ');
+  });
+
+  it('handles template with no placeholders', () => {
+    expect(fillTemplate('plain text', { name: 'Alice' })).toBe('plain text');
+  });
+
+  it('converts numbers to strings', () => {
+    expect(fillTemplate('{{val}}', { val: 42 })).toBe('42');
+  });
+
+  it('converts booleans to strings', () => {
+    expect(fillTemplate('{{val}}', { val: true })).toBe('true');
+  });
+
+  it('handles null value as empty string', () => {
+    expect(fillTemplate('{{val}}', { val: null })).toBe('');
+  });
+
+  it('handles undefined value as empty string', () => {
+    expect(fillTemplate('{{val}}', { val: undefined })).toBe('');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// loadTemplate
+// ---------------------------------------------------------------------------
+
+describe('loadTemplate', () => {
+  beforeEach(() => {
+    clearTemplateCache();
+  });
+
+  it('loads an existing template by name (without extension)', () => {
+    const content = loadTemplate('celebrate');
+    expect(typeof content).toBe('string');
+    expect(content.length).toBeGreaterThan(0);
+  });
+
+  it('loads an existing template by name (with .html extension)', () => {
+    const content = loadTemplate('celebrate.html');
+    expect(typeof content).toBe('string');
+    expect(content.length).toBeGreaterThan(0);
+  });
+
+  it('returns null for a non-existent template', () => {
+    expect(loadTemplate('nonexistent-template-xyz')).toBeNull();
+  });
+
+  it('caches templates (second call returns same content)', () => {
+    const first = loadTemplate('celebrate');
+    const second = loadTemplate('celebrate');
+    expect(first).toBe(second);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// renderTemplate
+// ---------------------------------------------------------------------------
+
+describe('renderTemplate', () => {
+  beforeEach(() => {
+    clearTemplateCache();
+  });
+
+  it('loads and fills a template with data', () => {
+    const result = renderTemplate('celebrate', { title: 'Well done!' });
+    expect(typeof result).toBe('string');
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  it('returns null for a non-existent template', () => {
+    expect(renderTemplate('nonexistent-template-xyz', {})).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// listTemplates
+// ---------------------------------------------------------------------------
+
+describe('listTemplates', () => {
+  it('returns an array of template names', () => {
+    const templates = listTemplates();
+    expect(Array.isArray(templates)).toBe(true);
+    expect(templates.length).toBeGreaterThan(0);
+  });
+
+  it('includes known templates', () => {
+    const templates = listTemplates();
+    expect(templates).toContain('celebrate');
+    expect(templates).toContain('dashboard');
+  });
+
+  it('returns names without .html extension', () => {
+    const templates = listTemplates();
+    for (const name of templates) {
+      expect(name.endsWith('.html')).toBe(false);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// clearTemplateCache
+// ---------------------------------------------------------------------------
+
+describe('clearTemplateCache', () => {
+  it('does not throw', () => {
+    expect(() => clearTemplateCache()).not.toThrow();
+  });
+
+  it('causes next loadTemplate call to re-read from disk', () => {
+    const first = loadTemplate('celebrate');
+    clearTemplateCache();
+    const second = loadTemplate('celebrate');
+    // Both should have the same content (file hasn't changed)
+    expect(first).toEqual(second);
+  });
+});

package/templates/celebrate.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>ClaudeTeach — Celebration!</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: #0d1117;
+    color: #c9d1d9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    overflow: hidden;
+    position: relative;
+  }
+  canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .celebration {
+    text-align: center;
+    z-index: 5;
+    animation: fadeInUp 0.6s ease;
+  }
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .celebration-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    animation: bounce 0.6s ease infinite alternate;
+  }
+  @keyframes bounce {
+    from { transform: translateY(0); }
+    to { transform: translateY(-10px); }
+  }
+  .celebration h1 {
+    font-size: 2rem;
+    color: #58a6ff;
+    margin-bottom: 0.5rem;
+  }
+  .celebration .subtitle {
+    font-size: 1.2rem;
+    color: #8b949e;
+    margin-bottom: 1.5rem;
+  }
+  .xp-badge {
+    display: inline-block;
+    background: linear-gradient(135deg, #238636, #3fb950);
+    color: #fff;
+    padding: 0.6rem 1.5rem;
+    border-radius: 20px;
+    font-size: 1.3rem;
+    font-weight: 700;
+    animation: pulse 1s ease infinite;
+  }
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+  }
+  .belt-change {
+    margin-top: 1.5rem;
+    padding: 1rem 2rem;
+    background: #161b22;
+    border: 2px solid #58a6ff;
+    border-radius: 12px;
+    display: none;
+  }
+  .belt-change.visible { display: block; }
+  .belt-change .new-belt {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .belt-change .belt-text {
+    color: #58a6ff;
+    font-size: 1.1rem;
+    font-weight: 600;
+  }
+</style>
+</head>
+<body>
+  <canvas id="confetti"></canvas>
+  <div class="celebration">
+    <div class="celebration-icon" id="icon"></div>
+    <h1 id="title">Great Job!</h1>
+    <div class="subtitle" id="subtitle">You completed the challenge</div>
+    <div class="xp-badge" id="xpBadge">+20 XP</div>
+    <div class="belt-change" id="beltChange">
+      <div class="new-belt" id="newBeltIcon"></div>
+      <div class="belt-text" id="beltText">New Belt Unlocked!</div>
+    </div>
+  </div>
+
+  <script>
+    /* --- Bridge connection --- */
+    var wsBridge = null;
+    (function connectBridge() {
+      try {
+        wsBridge = new WebSocket('ws://' + location.host + '/ws');
+        wsBridge.onopen = function() {
+          wsBridge.send(JSON.stringify({
+            v: 1, type: 'sys:connect',
+            payload: { clientType: 'template' },
+            source: 'template', timestamp: Date.now()
+          }));
+        };
+        wsBridge.onmessage = function(event) {
+          try {
+            var msg = JSON.parse(event.data);
+            if (msg.type === 'canvas:celebrate' && msg.payload) {
+              init(msg.payload);
+            }
+          } catch(e) {}
+        };
+        wsBridge.onerror = function() { wsBridge = null; };
+        wsBridge.onclose = function() { wsBridge = null; };
+      } catch(e) { wsBridge = null; }
+    })();
+
+    const CELEBRATION_CONFIG = {
+      'xp': { icon: '\u2B50', title: 'XP Earned!', confettiCount: 50 },
+      'level-up': { icon: '\uD83C\uDF89', title: 'Level Up!', confettiCount: 150 },
+      'perfect-score': { icon: '\uD83C\uDFC6', title: 'Perfect Score!', confettiCount: 200 },
+    };
+
+    let celebrateData = {
+      type: 'xp',
+      xpAwarded: 20,
+      newBelt: null,
+    };
+
+    function init(data) {
+      if (data) celebrateData = { ...celebrateData, ...data };
+
+      const config = CELEBRATION_CONFIG[celebrateData.type] || CELEBRATION_CONFIG['xp'];
+
+      document.getElementById('icon').textContent = config.icon;
+      document.getElementById('title').textContent = config.title;
+
+      if (celebrateData.xpAwarded) {
+        document.getElementById('xpBadge').textContent = `+${celebrateData.xpAwarded} XP`;
+      }
+
+      if (celebrateData.type === 'perfect-score') {
+        document.getElementById('subtitle').textContent = 'Flawless performance!';
+      } else if (celebrateData.type === 'level-up') {
+        document.getElementById('subtitle').textContent = 'You reached a new level!';
+      }
+
+      if (celebrateData.newBelt) {
+        const beltChange = document.getElementById('beltChange');
+        beltChange.classList.add('visible');
+        document.getElementById('newBeltIcon').textContent = celebrateData.newBelt.badge || '\u2B1C';
+        document.getElementById('beltText').textContent =
+          `${celebrateData.newBelt.name || 'New'} Belt Unlocked!`;
+      }
+
+      launchConfetti(config.confettiCount);
+    }
+
+    // --- Confetti animation ---
+    function launchConfetti(count) {
+      const canvas = document.getElementById('confetti');
+      const ctx = canvas.getContext('2d');
+
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      const colors = ['#58a6ff', '#3fb950', '#d29922', '#f85149', '#bc8cff', '#fff'];
+      const particles = [];
+
+      for (let i = 0; i < count; i++) {
+        particles.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height - canvas.height,
+          w: Math.random() * 8 + 4,
+          h: Math.random() * 4 + 2,
+          color: colors[Math.floor(Math.random() * colors.length)],
+          vx: (Math.random() - 0.5) * 4,
+          vy: Math.random() * 3 + 2,
+          rotation: Math.random() * 360,
+          rotationSpeed: (Math.random() - 0.5) * 10,
+          opacity: 1,
+        });
+      }
+
+      let frame = 0;
+      const maxFrames = 300;
+
+      function animate() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        frame++;
+
+        let alive = false;
+
+        for (const p of particles) {
+          p.x += p.vx;
+          p.vy += 0.05; // gravity
+          p.y += p.vy;
+          p.rotation += p.rotationSpeed;
+
+          // Fade out in last quarter
+          if (frame > maxFrames * 0.75) {
+            p.opacity = Math.max(0, 1 - (frame - maxFrames * 0.75) / (maxFrames * 0.25));
+          }
+
+          if (p.y < canvas.height + 20 && p.opacity > 0) {
+            alive = true;
+            ctx.save();
+            ctx.translate(p.x, p.y);
+            ctx.rotate((p.rotation * Math.PI) / 180);
+            ctx.globalAlpha = p.opacity;
+            ctx.fillStyle = p.color;
+            ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+            ctx.restore();
+          }
+        }
+
+        if (alive && frame < maxFrames) {
+          requestAnimationFrame(animate);
+        } else {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+      }
+
+      requestAnimationFrame(animate);
+    }
+
+    window.addEventListener('resize', () => {
+      const canvas = document.getElementById('confetti');
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    });
+
+    window.addEventListener('message', (e) => {
+      if (e.data && e.data.type === 'celebrate-data') {
+        init(e.data.payload);
+      }
+    });
+
+    if (window.__CELEBRATE_DATA__) {
+      init(window.__CELEBRATE_DATA__);
+    } else {
+      init();
+    }
+  </script>
+</body>
+</html>