feat: add stdlib and browser examples

- stdlib/html.lux: Type-safe HTML construction - stdlib/browser.lux: Browser utilities - examples/web/: Counter app with DOM manipulation - examples/counter.lux: Simple counter example Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-15 03:54:17 -05:00
parent ccd335c80f
commit 634f665b1b
11 changed files with 1177 additions and 0 deletions
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lux Counter Example</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .counter {
+            background: white;
+            padding: 2rem 3rem;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            text-align: center;
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .display {
+            font-size: 4rem;
+            font-weight: bold;
+            color: #667eea;
+            padding: 1rem;
+            min-width: 150px;
+        }
+
+        .buttons {
+            display: flex;
+            gap: 0.5rem;
+            justify-content: center;
+            margin-top: 1rem;
+        }
+
+        button {
+            font-size: 1.5rem;
+            padding: 0.5rem 1.5rem;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: transform 0.1s, box-shadow 0.1s;
+            font-weight: bold;
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        button:nth-child(1) {
+            background: #ff6b6b;
+            color: white;
+        }
+
+        button:nth-child(2) {
+            background: #868e96;
+            color: white;
+        }
+
+        button:nth-child(3) {
+            background: #51cf66;
+            color: white;
+        }
+
+        .footer {
+            position: fixed;
+            bottom: 1rem;
+            color: white;
+            opacity: 0.8;
+            font-size: 0.9rem;
+        }
+
+        .footer a {
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">Loading...</div>
+
+    <div class="footer">
+        Built with <strong>Lux</strong> - A functional language with first-class effects
+    </div>
+
+    <!-- Load compiled Lux code -->
+    <script src="counter.js"></script>
+
+    <!-- Minimal TEA runtime -->
+    <script>
+        // Global state
+        let model = luxInit_lux();
+
+        // Dispatch function called by button onclick handlers
+        function dispatch(msgName) {
+            model = luxUpdate_lux(model, msgName);
+            render();
+        }
+
+        // Render the view
+        function render() {
+            const html = luxView_lux(model);
+            document.getElementById('app').innerHTML = html;
+        }
+
+        // Initial render
+        render();
+
+        console.log('Lux Counter loaded!');
+        console.log('Initial model:', model);
+    </script>
+</body>
+</html>