diff --git a/README.md b/README.md index c74c10b..29b50a6 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Thanks to Hotwire, it's now possible to build sophisticated server-rendered user With Theo, you can render a partial using HTML-like syntax: ```html - +<_button size="large" label%="label" /> ``` @@ -51,9 +51,9 @@ is equivalent to: Rendering a partial in ERB requires switching between HTML markup and Ruby code, and the `render` verb makes it difficult to imagine a page as a component structure. -In Theo, you render a partial by writing a tag with `-partial` suffix, for example: +In Theo, you render a partial by writing a tag with `_` prefix, for example: ```html -` +<_button size="large" />` ``` is equivalent to: ```erb @@ -62,9 +62,9 @@ is equivalent to: Naturally, partials can also include content, e.g.: ```html - +<_button size="large"> Create - + ``` > [!TIP] @@ -75,7 +75,7 @@ Naturally, partials can also include content, e.g.: You can render a collection of partials as follows: ```html - +<_widget collection%="widgets" /> ``` which is equivalent to: ```erb @@ -84,18 +84,18 @@ which is equivalent to: You can also customize the local variable name via the `as` attribute, e.g.: ```html - +<_widget collection%="widgets" as="item" /> ``` #### Boolean attributes If an attribute has no value, you can omit it, for example: ```html - +<_button disabled /> ``` is equivalent to: ```html - +<_button disabled="" /> ``` @@ -103,7 +103,7 @@ is equivalent to: To render a partial from another folder, use the 'path' attribute, e.g.: ```html - +<_widget path="widgets" /> ``` is equivalent to: ```erb @@ -115,9 +115,9 @@ is equivalent to: Partials can yield a value, such as a builder object that can be used by child partials. For example: ```html - - - +<_widget_builder yields="widget"> + <_widget_element widget%="widget" /> + ``` is equivalent to: ```erb @@ -130,9 +130,9 @@ is equivalent to: Instead of using `yields` attribute, a parent partial can indirectly pass a variable to its children using the `provide` and `inject` helpers. The example above can be modified as follows: ```html - - - +<_widget_builder> + <_widget_element /> + ``` `_widget_builder.html.theo`: @@ -156,7 +156,7 @@ Instead of using `yields` attribute, a parent partial can indirectly pass a vari You can freely mix ERB and Theo syntax, e.g.: ```erb <% if total_amount > 100 %> - + <_free_shipping amount%="total_amount" /> <% end %> ``` @@ -165,19 +165,19 @@ You can freely mix ERB and Theo syntax, e.g.: You can build a `
` element in ERB using [ActionView form helpers](https://guides.rubyonrails.org/form_helpers.html). Theo provides corresponding partials. For example: ```html - +<_form_with model%="widget" data-turbo-confirm="Are you sure?">
- - + <_label name="name" /> + <_text_field name="name" />
- - + <_label name="size" /> + <_select name="size" options%="['Big', 'Small']" />
- -
+ <_submit value="Create" /> + ``` is equivalent to: ```erb diff --git a/lib/theo-rails/theo.rb b/lib/theo-rails/theo.rb index a258524..20ffa4c 100644 --- a/lib/theo-rails/theo.rb +++ b/lib/theo-rails/theo.rb @@ -6,7 +6,7 @@ module Rails DYNAMIC_ATTRIBUTE = /(?:(?#{ATTRIBUTE_NAME.source})\s*%=\s*#{ATTRIBUTE_VALUE.source})/ ATTRIBUTES = /(?(?:\s+#{ATTRIBUTE.source})*)/ LITERAL_ATTRIBUTES = %i[path as yields].freeze - PARTIAL_TAG = /(?[\w-]+-partial)/ + PARTIAL_TAG = /(?_[\w-]+)/ PARTIAL = /(?:<#{PARTIAL_TAG.source}#{ATTRIBUTES.source}\s*>(?.*?)<\/\k>)|(?:<#{PARTIAL_TAG.source}#{ATTRIBUTES.source}\s*\/>)/im DYNAMIC_EXPRESSION = /^<%=([^%]*)%>$/ @@ -18,7 +18,7 @@ def process(source) # Partials source.gsub(PARTIAL) do |_| match = Regexp.last_match - partial = (match[:partial]).delete_suffix('-partial').underscore + partial = (match[:partial]).delete_prefix('_') attributes = match[:attrs] || '' content = match[:content]&.strip