rip-lang 2.5.0 → 2.5.1

package/CHANGELOG.md

@@ -7,6 +7,26 @@ All notable changes to Rip will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.1] - 2026-01-16
+
+### Template Enhancement
+
+**Hyphenated Attributes Work Directly**:
+```coffee
+render
+  # Before: needed quoted keys or spread syntax
+  i {"data-lucide": "search"}
+
+  # Now: just works!
+  i data-lucide: "search", aria-hidden: "true"
+  div data-testid: "container", aria-label: "Menu"
+  span data-foo-bar-baz: "multiple-hyphens-work"
+```
+
+The lexer now automatically converts hyphenated attribute names (like `data-*`, `aria-*`) into quoted strings, making HTML-style data attributes intuitive and clean.
+
+---
+
 ## [2.5.0] - 2026-01-16
 
 ### Major Release - Parser Optimization + Complete Framework

package/README.md

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-2.5.0-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-2.5.1-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
   <a href="#"><img src="https://img.shields.io/badge/tests-1046%2F1046-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
@@ -21,10 +21,22 @@
 
 Rip is a modern reactive language that compiles to JavaScript. It takes the elegant, readable syntax that made CoffeeScript beloved and brings it into the modern era — with ES2022 output, built-in reactivity, and a clean component system for building UIs.
 
-The compiler is completely standalone with zero dependencies, and it's self-hosting: Rip compiles itself. At ~14,000 lines of code, it's smaller than CoffeeScript (17,760 LOC) while including a complete reactive framework with signals, templates, and components.
+**The language IS the framework.** Unlike React, Vue, or Svelte where reactivity comes from libraries or compiler magic, Rip's reactive features are **language-level operators**:
+
+```coffee
+count := 0              # Signal (reactive state)
+doubled ~= count * 2    # Derived (auto-updates)
+effect -> log doubled   # Effect (side effects)
+```
+
+No imports. No hooks. No dependency arrays. Just write code.
+
+The compiler is completely standalone with **zero dependencies**, and it's self-hosting: Rip compiles itself. At ~14,000 lines of code, it's smaller than CoffeeScript while including a complete reactive framework.
 
 **What makes Rip different:**
-- **Reactive primitives** — signals, derived values, and effects built into the language
+- **Reactive primitives** — `:=` signals, `~=` derived values, `effect` blocks as syntax
+- **Components as syntax** — `component Counter` with props, lifecycle, fine-grained DOM updates
+- **Templates** — Pug-style HTML in `render` blocks, two-way binding with `<=>`
 - **Modern output** — ES2022 with native classes, `?.`, `??`, modules
 - **Zero dependencies** — everything included, even the parser generator
 - **Self-hosting** — `bun run parser` rebuilds the compiler from source
@@ -164,90 +176,124 @@ fn?(arg)                 # Safe call
 
 ## Reactivity
 
-Built into the language, not a library:
+**The language IS the framework.** Reactivity is built into Rip's syntax—not a library you import, not hooks you call. Just operators.
 
 ```coffee
-# Signals hold reactive state
-count := 0
-name := "world"
-
-# Derived values auto-update
-doubled ~= count * 2
-greeting ~= "Hello, #{name}!"
+count := 0                    # Signal — reactive state
+doubled ~= count * 2          # Derived — auto-updates when count changes
+effect -> console.log doubled # Effect — runs when dependencies change
 
-# Effects run when dependencies change
-effect -> console.log greeting
+count = 5   # doubled becomes 10, effect logs "10"
+count = 10  # doubled becomes 20, effect logs "20"
+```
 
-name = "Rip"   # Effect runs → "Hello, Rip!"
-count = 5      # Nothing (greeting doesn't depend on count)
+**Compare to React:**
+```javascript
+// React: imports, hooks, dependency arrays, rules...
+import { useState, useMemo, useEffect } from 'react';
+const [count, setCount] = useState(0);
+const doubled = useMemo(() => count * 2, [count]);
+useEffect(() => console.log(doubled), [doubled]);
 ```
 
-[Full reactivity guide →](docs/REACTIVITY.md)
+**Rip: 3 lines. React: 5 lines + imports + dependency arrays + hook rules.**
+
+| Concept | React | Vue | Solid | Rip |
+|---------|-------|-----|-------|-----|
+| State | `useState()` | `ref()` | `createSignal()` | `x := 0` |
+| Derived | `useMemo()` | `computed()` | `createMemo()` | `x ~= y * 2` |
+| Effect | `useEffect()` | `watch()` | `createEffect()` | `effect ->` |
+
+No imports. No hooks. No dependency arrays. Just operators that do what they say.
+
+[Full reactivity guide →](docs/GUIDE.md#reactivity)
 
 ---
 
 ## Components
 
-Build reactive UIs with fine-grained DOM updates:
+Components are a **language construct**, not a pattern. Define with the `component` keyword, get props, state, lifecycle, and fine-grained DOM updates—all without a virtual DOM.
 
 ```coffee
 component Counter
-  @label = "Count"
-  count := 0
-  inc: -> count += 1
+  @label = "Count"          # Prop with default
+  @initial = 0              # Another prop
+
+  count := @initial         # Reactive state (signal)
+  doubled ~= count * 2      # Derived value (auto-updates)
+
+  inc: -> count += 1        # Methods
   dec: -> count -= 1
 
   render
     div.counter
       h2 @label
       span.value count
-      button @click: @inc, "+"
+      span.derived " (×2 = #{doubled})"
       button @click: @dec, "−"
-```
-
-**Event handlers** — two patterns:
-```coffee
-# Normal: define methods, reference with @
-inc: -> count += 1
-button @click: @inc, "+"
+      button @click: @inc, "+"
 
-# Compact: inline with fat arrow (parens required)
-button (@click: => @count++), "+"
+# Mount with Ruby-style constructor
+Counter.new(label: "Score", initial: 10).mount "#app"
 ```
 
-**Features:**
-- Props: `@prop`, `@prop?` (optional), `@prop = default`
-- Lifecycle: `mounted:`, `unmounted:`
-- Context API: `setContext`, `getContext`
-- Fine-grained updates: only changed nodes update, no virtual DOM
+**What you get:**
+- **Props:** `@prop` (required), `@prop?` (optional), `@prop = default`
+- **State:** Signals (`:=`) and derived values (`~=`) just work
+- **Lifecycle:** `mounted:`, `unmounted:`, `updated:`
+- **Context:** `setContext`/`getContext` for deep prop passing
+- **Fine-grained updates:** Only changed DOM nodes update—no virtual DOM diffing
 
-[Component guide →](docs/COMPONENTS.md)
+[Component guide →](docs/GUIDE.md#components)
 
 ---
 
 ## Templates
 
-Indentation-based HTML with CSS-style selectors:
+Indentation-based HTML with Pug-style selectors. Templates compile to **fine-grained DOM operations**—when a signal changes, only the affected text node or attribute updates. No virtual DOM, no diffing, no wasted work.
 
 ```coffee
 render
   div#app.container
     h1.title "Hello, #{name}!"
-    input value: username, @input: updateName
-    button.("btn", active && "primary") @click: submit
+
+    # Two-way binding with <=> operator
+    input type: "text", value <=> username
+    input type: "number", value <=> count    # Auto-uses valueAsNumber!
+
+    # Dynamic classes (Tailwind-friendly)
+    button.btn.("primary" if active) @click: submit
       "Submit"
+
+    # Loops with keys for efficient updates
     ul.items
-      for item in items
-        li key: item.id, item.name
+      for item in items, key: item.id
+        li.item item.name
 ```
 
-- `div#id.class1.class2` — IDs and classes
-- `@click: @handler` — Event handlers (method reference)
-- `(@click: => @count++)` — Inline handlers (fat arrow, parens required)
-- `.("class1", cond && "class2")` — Dynamic classes (Tailwind-friendly)
-- `value <=> var` — Two-way binding
+**Template features:**
+| Syntax | What it does |
+|--------|--------------|
+| `div#id.class1.class2` | IDs and classes (CSS selector style) |
+| `@click: handler` | Event binding |
+| `@click.prevent.stop:` | Event modifiers |
+| `@keydown.enter:` | Key modifiers |
+| `value <=> var` | Two-way binding (auto-syncs input ↔ variable) |
+| `.("class", cond && "other")` | Dynamic classes |
+| `for x in arr, key: x.id` | Keyed iteration |
+| `span if condition` | Conditional rendering |
+
+**The `<=>` operator** handles two-way binding automatically:
+```coffee
+# This one line...
+input type: "number", value <=> count
+
+# ...replaces all this React ceremony:
+# <input type="number" value={count}
+#   onChange={e => setCount(parseInt(e.target.value) || 0)} />
+```
 
-[Template guide →](docs/TEMPLATES.md)
+[Template guide →](docs/GUIDE.md#templates)
 
 ---
 
@@ -336,7 +382,7 @@ rip file.rip           # Run a file
 rip -c file.rip        # Compile to JavaScript
 rip -s file.rip        # Show S-expressions (debug parser)
 rip -t file.rip        # Show tokens (debug lexer)
-bun run test           # Run all 1033 tests
+bun run test           # Run all 1046 tests
 bun run parser         # Rebuild parser (self-hosting!)
 bun run browser        # Build browser bundle
 ```
@@ -348,9 +394,9 @@ bun run browser        # Build browser bundle
 | Guide | Description |
 |-------|-------------|
 | [AGENT.md](AGENT.md) | Complete developer/AI guide |
-| [docs/REACTIVITY.md](docs/REACTIVITY.md) | Signals, effects, derived values |
-| [docs/COMPONENTS.md](docs/COMPONENTS.md) | Component system |
-| [docs/TEMPLATES.md](docs/TEMPLATES.md) | Template DSL |
+| [docs/GUIDE.md](docs/GUIDE.md) | Language guide (reactivity, templates, components) |
+| [docs/INTERNALS.md](docs/INTERNALS.md) | Compiler architecture, S-expressions |
+| [docs/BROWSER.md](docs/BROWSER.md) | Browser usage, REPL |
 | [CONTRIBUTING.md](CONTRIBUTING.md) | How to contribute |
 | [CHANGELOG.md](CHANGELOG.md) | Version history |
 

package/docs/INTERNALS.md

@@ -4,7 +4,7 @@
 
 > Technical reference for the Rip compiler architecture, code generation, and parsing.
 
-**Version:** 2.5.0
+**Version:** 2.5.1
 **Test Coverage:** 1046/1046 rip tests (100%) ✅
 **Status:** Stable & Production Ready - Self-Hosting Complete
 

package/docs/PHILOSOPHY.md

@@ -468,7 +468,7 @@ counter = ->
 
 # 3. Current Assessment
 
-> **v2.5.0 - Production-Ready with Fine-Grained Reactivity**
+> **v2.5.1 - Production-Ready with Fine-Grained Reactivity**
 
 ## Summary Matrix
 

package/docs/WHY-YES-RIP.md

@@ -6,7 +6,7 @@
 
 That "Why Not" document makes strong arguments, but here's the **counter-argument**—a working, tested, **production-ready** language that offers a different path.
 
-**Rip isn't vaporware. It's real. Version 2.5.0. 1046/1046 tests passing. Self-hosting. Zero dependencies. Available now.**
+**Rip isn't vaporware. It's real. Version 2.5.1. 1046/1046 tests passing. Self-hosting. Zero dependencies. Available now.**
 
 ### The Philosophical Divide: Freedom vs Fear
 
@@ -842,7 +842,7 @@ Rip isn't about going backward. It's about recognizing that **we took a wrong tu
 
 **The future isn't more dependencies. It's zero dependencies.**
 
-**The future is Rip. Version 2.5.0. Available today.**
+**The future is Rip. Version 2.5.1. Available today.**
 
 ---
 
@@ -890,6 +890,6 @@ $ echo 'console.log "Hello, Rip!"' > test.rip && bun test.rip
 - ✅ **Two-way binding** (`<=>` operator - automatic for inputs)
 - ✅ **Ruby constructors** (`ClassName.new()` - elegant instantiation)
 
-**Version 2.5.0. Available now. Clone and go.**
+**Version 2.5.1. Available now. Clone and go.**
 
 This approach is ready. Give it a try.

package/docs/dist/rip.browser.js

@@ -2705,6 +2705,28 @@ Rewriter = function() {
         }
         if (!inRender)
           return 1;
+        if (tag === "IDENTIFIER" && !token.spaced) {
+          let parts = [token[1]];
+          let j = i + 1;
+          while (j + 1 < tokens.length) {
+            const hyphen = tokens[j];
+            const nextPart = tokens[j + 1];
+            if (hyphen[0] === "-" && !hyphen.spaced && (nextPart[0] === "IDENTIFIER" || nextPart[0] === "PROPERTY")) {
+              parts.push(nextPart[1]);
+              j += 2;
+              if (nextPart[0] === "PROPERTY")
+                break;
+            } else {
+              break;
+            }
+          }
+          if (parts.length > 1 && j > i + 1 && tokens[j - 1][0] === "PROPERTY") {
+            token[0] = "STRING";
+            token[1] = `"${parts.join("-")}"`;
+            tokens.splice(i + 1, j - i - 1);
+            return 1;
+          }
+        }
         if (tag === ".") {
           const prevToken = i > 0 ? tokens[i - 1] : null;
           const prevTag = prevToken ? prevToken[0] : null;
@@ -9314,8 +9336,8 @@ function compileToJS(source, options = {}) {
   return new Compiler(options).compileToJS(source);
 }
 // src/browser.js
-var VERSION = "2.5.0";
-var BUILD_DATE = "2026-01-16@05:08:49GMT";
+var VERSION = "2.5.1";
+var BUILD_DATE = "2026-01-16@07:47:41GMT";
 var dedent = (s) => {
   const m = s.match(/^[ \t]*(?=\S)/gm);
   const i = Math.min(...(m || []).map((x) => x.length));