From 17746fb741020a7705789f32d3d54ba542dfe585 Mon Sep 17 00:00:00 2001
From: Joel Drapper <joel@drapper.me>
Date: Tue, 3 Sep 2024 03:02:58 +0100
Subject: [PATCH] Update under-the-hood.md

---
 guide/under-the-hood.md | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/guide/under-the-hood.md b/guide/under-the-hood.md
index ba5744d..43b9830 100644
--- a/guide/under-the-hood.md
+++ b/guide/under-the-hood.md
@@ -339,3 +339,51 @@ end
 ```
 
 This is a little mind-bending. We’re now always passing a block to `view_template`, that yields self to the block that was passed to `call` if a block was passed.
+
+The final `Component` class should look like this — just 33 lines of Ruby:
+
+```ruby
+class Component
+  def call(buffer = [])
+    @buffer = buffer
+    view_template { yield(self) if block_given? }
+    @buffer.join
+  end
+
+  def div(content = nil, **attributes)
+    @buffer << "<div"
+
+    attributes.each do |key, value|
+      @buffer << " #{key}=\"#{value}\""
+    end
+
+    @buffer << ">"
+
+    if content
+      @buffer << content
+    elsif block_given?
+      yield
+    end
+
+    @buffer << "</div>"
+  end
+
+  def plain(content)
+    @buffer << content
+  end
+
+  def render(component, &)
+    component.call(@buffer, &)
+  end
+end
+```
+
+Our `HelloWorld` component with the `card.title` interface should now render the title correctly:
+
+```html
+<div class="outer">
+  <div class="card">
+    <div class="card-title">Hello, World!</div>
+  </div>
+</div>
+```