New Bridgetown::Component class with a ViewComponent-ish API

[jaredcwhite]

Resolves #140 (!!). Touches upon #251

Breaking Change ⚠️ – This retools the ERB template engine to provide automatic HTML escaping along with html_safe functionality courtesy of ActiveSupport. This means that when referencing front matter data or outside API sources, you'll need to use <%== value %> (double-equals), or the safehelper or html_safe string method if you want actual HTML injected. The one exception is rendered template content (aka content or yield in layouts), so bear that in mind when considering XSS vectors. Obviously escaping does not apply when using render/partial/liquid_render helpers (so remember it's possible somewhere in there also lurks an XSS vector).

---

This PR adds a bona fide Ruby component/template layer to Bridgetown, with an API very much inspired by GitHub's ViewComponent library for Rails. This is no accident! I have a "shim" in the works to support ViewComponent in Bridgetown directly—however, it brings with it additional complexity, more Rails gem dependencies, and a few less-than-desirable workarounds. That's acceptable for "component design systems" you'd like to use across both Bridgetown and Rails.

But for just Bridgetown sites with minimal overhead, I've been thinking for a while now we probably need our own simple component base class. I prefer this to partials, and while I don't plan on deprecating partials, our primary "Ruby templates" story will heavily revolve around real components. Components are isolated from global values/view state (other than site) and can be more easily tested and reused—basically all the same reasons ViewComponent is preferable to partials in Rails.

Here's what a Bridgetown Component looks like:

# src/_components/birthday_greeting.rb
class BirthdayGreeting < Bridgetown::Component
  def initialize(name:, age:)
    @name = name
    @age = age
  end

  def greeting
    "Hello #{@name}"
  end
end

<!-- src/_components/birthday_greeting.erb -->

<p><%= greeting %>! Happy Birthday! You're <%= @age %> today.</p>

<!-- Now let's use our component! -->
<!-- src/birthday.erb -->

<h1>Surprise!</h1>

<%= render BirthdayGreeting.new(name: "Pascal", age: "42") %>

Pretty standard stuff. Content blocks are supported, nested components within components work fine, helpers are delegated to the initial view class, multiple template engines are supported (currently ERB, Serbea, Slim, and Haml)—or you can define a template or call method (roughly equivalent) on the Ruby file directly and return a string (via heredoc, tag builder DSL, whatever) and not even need a template file.

There's also a before_render hook and a render? conditional just like ViewComponent. However, I don't think I'll tackle a "Slottable" API this go around…a possible V2 for the future?

• Tests
• Documentation

[jaredcwhite]

Figured out a way to isolate site as well, so now Ruby components are pretty much globals-free just like Liquid components. But you can add @site = Bridgetown::Current.site to your component initializer if you want to and then site will work in the template without having pass site in as an argument.

[render]

Your Render PR Server URL is https://bridgetown-api-pr-268.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c1jsuvlua9vq7q3lfvsg.

[render]

Your Render PR Server URL is https://bridgetown-main-pr-268.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c1jsv05ua9vq7q3lg000.

[jaredcwhite]

There are a few changes in here to support the ViewComponent library as well…and in fact I've tested calling ViewComponents from BridgetownComponents and visa-versa all in the same project with both ERB and Serbea templates back and forth. Took a ridiculous amount of trial-and-error, but I think I've finally cracked this nut.

[jaredcwhite]

FYI: the amount of shim code for VC required has become fairly minimal thanks to recent upstream improvements. https://github.com/bridgetownrb/bridgetown-view-component/blob/cc98b3963b4baa81263e4bf189ca5889a993f36e/lib/bridgetown-view-component.rb

[jaredcwhite]

OK, I think the code and tests are in pretty good shape. On to massive updates to the documentation! 😱

[render]

Your Render PR Server URL is https://bridgetown-beta-pr-268.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c1tirbrs1gh5nitfgnk0.