From a65a3bde0bee7d3d28c30775ec955260ed61e96c Mon Sep 17 00:00:00 2001 From: Marek Date: Mon, 27 Jun 2016 19:00:54 +0200 Subject: New syntax for tag helpers i.e. tag.br instead of tag(br) #25195 --- actionview/CHANGELOG.md | 25 +++ .../lib/action_view/helpers/form_options_helper.rb | 2 +- actionview/lib/action_view/helpers/tag_helper.rb | 229 ++++++++++++++++----- actionview/lib/action_view/helpers/tags/base.rb | 4 +- .../test/_builder_tag_nested_in_content_tag.erb | 3 + actionview/test/template/tag_helper_test.rb | 164 ++++++++++++++- 6 files changed, 364 insertions(+), 63 deletions(-) create mode 100644 actionview/test/fixtures/test/_builder_tag_nested_in_content_tag.erb diff --git a/actionview/CHANGELOG.md b/actionview/CHANGELOG.md index 099842025c..ab4b46c56e 100644 --- a/actionview/CHANGELOG.md +++ b/actionview/CHANGELOG.md @@ -1,3 +1,28 @@ +* New syntax for tag helpers. Avoid positional parameters and support HTML5 by default. + Example usage of tag helpers before: + + ```ruby + tag(:br, nil, true) + content_tag(:div, content_tag(:p, "Hello world!"), class: "strong") + + <%= content_tag :div, class: "strong" do -%> + Hello world! + <% end -%> + ``` + + Example usage of tag helpers after: + + ```ruby + tag.br + tag.div tag.p("Hello world!"), class: "strong" + + <%= tag.div class: "strong" do %> + Hello world! + <% end %> + ``` + + *Marek Kirejczyk*, *Kasper Timm Hansen* + * Change `datetime_field` and `datetime_field_tag` to generate `datetime-local` fields. As a new specification of the HTML 5 the text field type `datetime` will no longer exist diff --git a/actionview/lib/action_view/helpers/form_options_helper.rb b/actionview/lib/action_view/helpers/form_options_helper.rb index b277efd7b6..06b696f281 100644 --- a/actionview/lib/action_view/helpers/form_options_helper.rb +++ b/actionview/lib/action_view/helpers/form_options_helper.rb @@ -363,7 +363,7 @@ module ActionView html_attributes[:disabled] ||= disabled && option_value_selected?(value, disabled) html_attributes[:value] = value - content_tag_string(:option, text, html_attributes) + tag_builder.content_tag_string(:option, text, html_attributes) end.join("\n").html_safe end diff --git a/actionview/lib/action_view/helpers/tag_helper.rb b/actionview/lib/action_view/helpers/tag_helper.rb index 42e7358a1d..09923be568 100644 --- a/actionview/lib/action_view/helpers/tag_helper.rb +++ b/actionview/lib/action_view/helpers/tag_helper.rb @@ -4,8 +4,8 @@ require 'set' module ActionView # = Action View Tag Helpers module Helpers #:nodoc: - # Provides methods to generate HTML tags programmatically when you can't use - # a Builder. By default, they output XHTML compliant tags. + # Provides methods to generate HTML tags programmatically both as a modern + # HTML5 compliant builder style and legacy XHTML compliant tags. module TagHelper extend ActiveSupport::Concern include CaptureHelper @@ -26,7 +26,167 @@ module ActionView PRE_CONTENT_STRINGS[:textarea] = "\n" PRE_CONTENT_STRINGS["textarea"] = "\n" + class TagBuilder #:nodoc: + include CaptureHelper + include OutputSafetyHelper + VOID_ELEMENTS = %i(base br col embed hr img input keygen link meta param source track wbr).to_set + + def initialize(view_context) + @view_context = view_context + end + + def tag_string(name, content = nil, escape_attributes: true, **options, &block) + content = @view_context.capture(self, &block) if block_given? + if VOID_ELEMENTS.include?(name) && content.nil? + "<#{name.to_s.dasherize}#{tag_options(options, escape_attributes)}>".html_safe + else + content_tag_string(name.to_s.dasherize, content || '', options, escape_attributes) + end + end + + def content_tag_string(name, content, options, escape = true) + tag_options = tag_options(options, escape) if options + content = ERB::Util.unwrapped_html_escape(content) if escape + "<#{name}#{tag_options}>#{PRE_CONTENT_STRINGS[name]}#{content}".html_safe + end + + def tag_options(options, escape = true) + return if options.blank? + output = "" + sep = " ".freeze + options.each_pair do |key, value| + if TAG_PREFIXES.include?(key) && value.is_a?(Hash) + value.each_pair do |k, v| + next if v.nil? + output << sep + output << prefix_tag_option(key, k, v, escape) + end + elsif BOOLEAN_ATTRIBUTES.include?(key) + if value + output << sep + output << boolean_tag_option(key) + end + elsif !value.nil? + output << sep + output << tag_option(key, value, escape) + end + end + output unless output.empty? + end + + def boolean_tag_option(key) + %(#{key}="#{key}") + end + + def tag_option(key, value, escape) + if value.is_a?(Array) + value = escape ? safe_join(value, " ".freeze) : value.join(" ".freeze) + else + value = escape ? ERB::Util.unwrapped_html_escape(value) : value + end + %(#{key}="#{value}") + end + + private + def prefix_tag_option(prefix, key, value, escape) + key = "#{prefix}-#{key.to_s.dasherize}" + unless value.is_a?(String) || value.is_a?(Symbol) || value.is_a?(BigDecimal) + value = value.to_json + end + tag_option(key, value, escape) + end + + def respond_to_missing?(*args) + true + end + + def method_missing(called, *args, &block) + tag_string(called, *args, &block) + end + + end + + # Returns an HTML tag. + # + # === Building HTML tags + # Builds HTML5 compliant tags with a tag proxy. Every tag can be built with: + # + # tag.(optional content, options) + # + # where tag name can be e.g. br, div, section, article, or any tag really. + # + # ==== Passing content + # Tags can pass content to embed within it: + # + # tag.h1 'All shit fit to print' # =>

All shit fit to print

+ # + # tag.div tag.p('Hello world!') # =>

Hello world!

+ # + # Content can also be captured with a block. Great for ERB templates: + # + # <%= tag.p do %> + # The next great American novel starts here. + # <% end %> + # # =>

The next great American novel starts here.

+ # + # ==== Options + # Any passed options becomes attributes on the generated tag. + # + # tag.section class: %w( kitties puppies ) + # # =>
+ # + # tag.section id: dom_id(@post) + # # =>
+ # + # Pass true for any attributes that can render with no values like +disabled+. + # + # tag.input type: 'text', disabled: true + # # => + # + # HTML5 data-* attributes can be set with a single +data+ key + # pointing to a hash of sub-attributes. + # + # To play nicely with JavaScript conventions sub-attributes are dasherized. + # + # tag.article data: { user_id: 123 } + # # =>
+ # + # Thus data-user-id can be accessed as dataset.userId. + # + # Data attribute values are encoded to JSON, with the exception of strings, symbols and + # BigDecimals. + # This may come in handy when using jQuery's HTML5-aware .data() + # from 1.4.3. + # + # tag.div data: { city_state: %w( Chigaco IL ) } + # # =>
+ # + # The generated attributes are escaped by default, but it can be turned off with + # +escape_attributes+. + # + # tag.img src: 'open & shut.png' + # # => + # + # tag.img src: 'open & shut.png', escape_attributes: false + # # => + # + # The tag builder respects + # [HTML5 void elements](https://www.w3.org/TR/html5/syntax.html#void-elements) + # if no content is passed, and omits closing tags for those elements. + # + # # A standard element: + # tag.div # =>
+ # + # # A void element: + # tag.br # =>
+ # + # === Legacy syntax + # Following format is legacy syntax. It will be deprecated in future versions of rails. + # + # tag(tag_name, options) + # + # === Building HTML tags # Returns an empty HTML tag of type +name+ which by default is XHTML # compliant. Set +open+ to true to create an open tag compatible # with HTML 4.0 and below. Add HTML attributes by passing an attributes @@ -72,8 +232,12 @@ module ActionView # # tag("div", data: {name: 'Stephen', city_state: %w(Chicago IL)}) # # =>
- def tag(name, options = nil, open = false, escape = true) - "<#{name}#{tag_options(options, escape) if options}#{open ? ">" : " />"}".html_safe + def tag(name = nil, options = nil, open = false, escape = true) + if name.nil? + tag_builder + else + "<#{name}#{tag_builder.tag_options(options, escape) if options}#{open ? ">" : " />"}".html_safe + end end # Returns an HTML block tag of type +name+ surrounding the +content+. Add @@ -81,6 +245,7 @@ module ActionView # Instead of passing the content as an argument, you can also use a block # in which case, you pass your +options+ as the second parameter. # Set escape to false to disable attribute value escaping. + # Note: this is legacy syntax, see +tag+ method description for details. # # ==== Options # The +options+ hash can be used with attributes with no value like (disabled and @@ -104,9 +269,9 @@ module ActionView def content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block) if block_given? options = content_or_options_with_block if content_or_options_with_block.is_a?(Hash) - content_tag_string(name, capture(&block), options, escape) + tag_builder.content_tag_string(name, capture(&block), options, escape) else - content_tag_string(name, content_or_options_with_block, options, escape) + tag_builder.content_tag_string(name, content_or_options_with_block, options, escape) end end @@ -140,56 +305,8 @@ module ActionView end private - - def content_tag_string(name, content, options, escape = true) - tag_options = tag_options(options, escape) if options - content = ERB::Util.unwrapped_html_escape(content) if escape - "<#{name}#{tag_options}>#{PRE_CONTENT_STRINGS[name]}#{content}".html_safe - end - - def tag_options(options, escape = true) - return if options.blank? - output = "" - sep = " ".freeze - options.each_pair do |key, value| - if TAG_PREFIXES.include?(key) && value.is_a?(Hash) - value.each_pair do |k, v| - next if v.nil? - output << sep - output << prefix_tag_option(key, k, v, escape) - end - elsif BOOLEAN_ATTRIBUTES.include?(key) - if value - output << sep - output << boolean_tag_option(key) - end - elsif !value.nil? - output << sep - output << tag_option(key, value, escape) - end - end - output unless output.empty? - end - - def prefix_tag_option(prefix, key, value, escape) - key = "#{prefix}-#{key.to_s.dasherize}" - unless value.is_a?(String) || value.is_a?(Symbol) || value.is_a?(BigDecimal) - value = value.to_json - end - tag_option(key, value, escape) - end - - def boolean_tag_option(key) - %(#{key}="#{key}") - end - - def tag_option(key, value, escape) - if value.is_a?(Array) - value = escape ? safe_join(value, " ".freeze) : value.join(" ".freeze) - else - value = escape ? ERB::Util.unwrapped_html_escape(value) : value - end - %(#{key}="#{value}") + def tag_builder + @tag_builder ||= TagBuilder.new(self) end end end diff --git a/actionview/lib/action_view/helpers/tags/base.rb b/actionview/lib/action_view/helpers/tags/base.rb index d57f26ba4f..086eaa4aab 100644 --- a/actionview/lib/action_view/helpers/tags/base.rb +++ b/actionview/lib/action_view/helpers/tags/base.rb @@ -143,10 +143,10 @@ module ActionView def add_options(option_tags, options, value = nil) if options[:include_blank] - option_tags = content_tag_string('option', options[:include_blank].kind_of?(String) ? options[:include_blank] : nil, :value => '') + "\n" + option_tags + option_tags = tag_builder.content_tag_string('option', options[:include_blank].kind_of?(String) ? options[:include_blank] : nil, :value => '') + "\n" + option_tags end if value.blank? && options[:prompt] - option_tags = content_tag_string('option', prompt_text(options[:prompt]), :value => '') + "\n" + option_tags + option_tags = tag_builder.content_tag_string('option', prompt_text(options[:prompt]), :value => '') + "\n" + option_tags end option_tags end diff --git a/actionview/test/fixtures/test/_builder_tag_nested_in_content_tag.erb b/actionview/test/fixtures/test/_builder_tag_nested_in_content_tag.erb new file mode 100644 index 0000000000..ddad7ec3ac --- /dev/null +++ b/actionview/test/fixtures/test/_builder_tag_nested_in_content_tag.erb @@ -0,0 +1,3 @@ +<%= tag.p do %> + <%= tag.b 'Hello' %> +<% end %> diff --git a/actionview/test/template/tag_helper_test.rb b/actionview/test/template/tag_helper_test.rb index f3956a31f6..4ed3252c63 100644 --- a/actionview/test/template/tag_helper_test.rb +++ b/actionview/test/template/tag_helper_test.rb @@ -11,6 +11,24 @@ class TagHelperTest < ActionView::TestCase assert_equal "
", tag("br", nil, true) end + def test_tag_builder + assert_equal "", tag.span + assert_equal "", tag.span(class: "bookmark") + end + + def test_tag_builder_void_tag + assert_equal "
", tag.br + assert_equal "
", tag.br(class: 'some_class') + end + + def test_tag_builder_void_tag_with_forced_content + assert_equal "
some content
", tag.br("some content") + end + + def test_tag_builder_is_singleton + assert_equal tag, tag + end + def test_tag_options str = tag("p", "class" => "show", :class => "elsewhere") assert_match(/class="show"/, str) @@ -21,19 +39,36 @@ class TagHelperTest < ActionView::TestCase assert_equal "

", tag("p", :ignored => nil) end + def test_tag_builder_options_rejects_nil_option + assert_equal "

", tag.p(ignored: nil) + end + def test_tag_options_accepts_false_option assert_equal "

", tag("p", :value => false) end + def test_tag_builder_options_accepts_false_option + assert_equal "

", tag.p(value: false) + end + def test_tag_options_accepts_blank_option assert_equal "

", tag("p", :included => '') end + def test_tag_builder_options_accepts_blank_option + assert_equal "

", tag.p(included: '') + end + def test_tag_options_converts_boolean_option assert_dom_equal '

', tag("p", :disabled => true, :itemscope => true, :multiple => true, :readonly => true, :allowfullscreen => true, :seamless => true, :typemustmatch => true, :sortable => true, :default => true, :inert => true, :truespeed => true) end + def test_tag_builder_options_converts_boolean_option + assert_dom_equal '

', + tag.p(disabled: true, itemscope: true, multiple: true, readonly: true, allowfullscreen: true, seamless: true, typemustmatch: true, sortable: true, default: true, inert: true, truespeed: true) + end + def test_content_tag assert_equal "Create", content_tag("a", "Create", "href" => "create") assert content_tag("a", "Create", "href" => "create").html_safe? @@ -45,43 +80,96 @@ class TagHelperTest < ActionView::TestCase content_tag(:p, '', nil, false) end + def test_tag_builder_with_content + assert_equal "

Content
", tag.div("Content", id: "post_1") + assert tag.div("Content", id: "post_1").html_safe? + assert_equal tag.div("Content", id: "post_1"), + tag.div("Content", "id": "post_1") + assert_equal "

<script>evil_js</script>

", + tag.p("") + assert_equal "

", + tag.p('', escape_attributes: false) + end + + def test_tag_builder_nested + assert_equal "
content
", + tag.div { "content" } + assert_equal "
hello
", + tag.div(id: 'header') { |tag| tag.span 'hello' } + assert_equal "
hello
", + tag.div(id: 'header') { |tag| tag.div(class: 'world') { tag.span 'hello' } } + end + def test_content_tag_with_block_in_erb buffer = render_erb("<%= content_tag(:div) do %>Hello world!<% end %>") assert_dom_equal "
Hello world!
", buffer end + def test_tag_builder_with_block_in_erb + buffer = render_erb("<%= tag.div do %>Hello world!<% end %>") + assert_dom_equal "
Hello world!
", buffer + end + def test_content_tag_with_block_in_erb_containing_non_displayed_erb buffer = render_erb("<%= content_tag(:p) do %><% 1 %><% end %>") assert_dom_equal "

", buffer end + def test_tag_builder_with_block_in_erb_containing_non_displayed_erb + buffer = render_erb("<%= tag.p do %><% 1 %><% end %>") + assert_dom_equal "

", buffer + end + def test_content_tag_with_block_and_options_in_erb buffer = render_erb("<%= content_tag(:div, :class => 'green') do %>Hello world!<% end %>") assert_dom_equal %(
Hello world!
), buffer end + def test_tag_builder_with_block_and_options_in_erb + buffer = render_erb("<%= tag.div(class: 'green') do %>Hello world!<% end %>") + assert_dom_equal %(
Hello world!
), buffer + end + def test_content_tag_with_block_and_options_out_of_erb assert_dom_equal %(
Hello world!
), content_tag(:div, :class => "green") { "Hello world!" } end + def test_tag_builder_with_block_and_options_out_of_erb + assert_dom_equal %(
Hello world!
), tag.div(class: "green") { "Hello world!" } + end + def test_content_tag_with_block_and_options_outside_out_of_erb assert_equal content_tag("a", "Create", :href => "create"), content_tag("a", "href" => "create") { "Create" } end + def test_tag_builder_with_block_and_options_outside_out_of_erb + assert_equal tag.a("Create", href: "create"), + tag.a("href": "create") { "Create" } + end + def test_content_tag_with_block_and_non_string_outside_out_of_erb assert_equal content_tag("p"), content_tag("p") { 3.times { "do_something" } } end + def test_tag_builder_with_block_and_non_string_outside_out_of_erb + assert_equal tag.p, + tag.p { 3.times { "do_something" } } + end + def test_content_tag_nested_in_content_tag_out_of_erb assert_equal content_tag("p", content_tag("b", "Hello")), content_tag("p") { content_tag("b", "Hello") }, output_buffer + assert_equal tag.p(tag.b("Hello")), + tag.p {tag.b("Hello") }, + output_buffer end def test_content_tag_nested_in_content_tag_in_erb assert_equal "

\n Hello\n

", view.render("test/content_tag_nested_in_content_tag") + assert_equal "

\n Hello\n

", view.render("test/builder_tag_nested_in_content_tag") end def test_content_tag_with_escaped_array_class @@ -95,6 +183,17 @@ class TagHelperTest < ActionView::TestCase assert_equal "

limelight

", str end + def test_tag_builder_with_escaped_array_class + str = tag.p "limelight", class: ["song", "play>"] + assert_equal "

limelight

", str + + str = tag.p "limelight", class: ["song", "play"] + assert_equal "

limelight

", str + + str = tag.p "limelight", class: ["song", ["play"]] + assert_equal "

limelight

", str + end + def test_content_tag_with_unescaped_array_class str = content_tag('p', "limelight", {:class => ["song", "play>"]}, false) assert_equal "

\">limelight

", str @@ -103,21 +202,43 @@ class TagHelperTest < ActionView::TestCase assert_equal "

\">limelight

", str end + def test_tag_builder_with_unescaped_array_class + str = tag.p "limelight", class: ["song", "play>"], escape_attributes: false + assert_equal "

\">limelight

", str + + str = tag.p "limelight", class: ["song", ["play>"]], escape_attributes: false + assert_equal "

\">limelight

", str + end + def test_content_tag_with_empty_array_class str = content_tag('p', 'limelight', {:class => []}) assert_equal '

limelight

', str end + def test_tag_builder_with_empty_array_class + assert_equal '

limelight

', tag.p('limelight', class: []) + end + def test_content_tag_with_unescaped_empty_array_class str = content_tag('p', 'limelight', {:class => []}, false) assert_equal '

limelight

', str end + def test_tag_builder_with_unescaped_empty_array_class + str = tag.p 'limelight', class: [], escape_attributes: false + assert_equal '

limelight

', str + end + def test_content_tag_with_data_attributes assert_dom_equal '

limelight

', content_tag('p', "limelight", data: { number: 1, string: 'hello', string_with_quotes: 'double"quote"party"' }) end + def test_tag_builder_with_data_attributes + assert_dom_equal '

limelight

', + tag.p("limelight", data: { number: 1, string: 'hello', string_with_quotes: 'double"quote"party"' }) + end + def test_cdata_section assert_equal "]]>", cdata_section("") end @@ -139,20 +260,24 @@ class TagHelperTest < ActionView::TestCase def test_tag_honors_html_safe_for_param_values ['1&2', '1 < 2', '“test“'].each do |escaped| assert_equal %(), tag('a', :href => escaped.html_safe) + assert_equal %(), tag.a(href: escaped.html_safe) end end def test_tag_honors_html_safe_with_escaped_array_class - str = tag('p', :class => ['song>', raw('play>')]) - assert_equal '

', str + assert_equal '

', tag('p', :class => ['song>', raw('play>')]) + assert_equal '

', tag('p', :class => [raw('song>'), 'play>']) + end - str = tag('p', :class => [raw('song>'), 'play>']) - assert_equal '

', str + def test_tag_builder_honors_html_safe_with_escaped_array_class + assert_equal '

', tag.p(class: ['song>', raw('play>')]) + assert_equal '

', tag.p(class: [raw('song>'), 'play>']) end def test_skip_invalid_escaped_attributes ['&1;', 'dfa3;', '& #123;'].each do |escaped| assert_equal %(), tag('a', :href => escaped) + assert_equal %(), tag.a(href: escaped) end end @@ -160,10 +285,20 @@ class TagHelperTest < ActionView::TestCase assert_equal '', tag('a', { :href => '&' }, false, false) end + def test_tag_builder_disable_escaping + assert_equal '', tag.a(href: '&', escape_attributes: false) + assert_equal 'cnt', tag.a(href: '&' , escape_attributes: false) { "cnt"} + assert_equal '
', tag.br("data-hidden": '&' , escape_attributes: false) + assert_equal 'content', tag.a("content", href: '&', escape_attributes: false) + assert_equal 'content', tag.a(href: '&', escape_attributes: false) { "content"} + end + def test_data_attributes ['data', :data].each { |data| assert_dom_equal '', tag('a', { data => { a_float: 3.14, a_big_decimal: BigDecimal.new("-123.456"), a_number: 1, string: 'hello', symbol: :foo, array: [1, 2, 3], hash: { key: 'value'}, string_with_quotes: 'double"quote"party"' } }) + assert_dom_equal '', + tag.a(data: { a_float: 3.14, a_big_decimal: BigDecimal.new("-123.456"), a_number: 1, string: 'hello', symbol: :foo, array: [1, 2, 3], hash: { key: 'value'}, string_with_quotes: 'double"quote"party"' }) } end @@ -171,6 +306,8 @@ class TagHelperTest < ActionView::TestCase ['aria', :aria].each { |aria| assert_dom_equal '', tag('a', { aria => { a_float: 3.14, a_big_decimal: BigDecimal.new("-123.456"), a_number: 1, string: 'hello', symbol: :foo, array: [1, 2, 3], hash: { key: 'value'}, string_with_quotes: 'double"quote"party"' } }) + assert_dom_equal '', + tag.a(aria: { a_float: 3.14, a_big_decimal: BigDecimal.new("-123.456"), a_number: 1, string: 'hello', symbol: :foo, array: [1, 2, 3], hash: { key: 'value'}, string_with_quotes: 'double"quote"party"' }) } end @@ -179,4 +316,23 @@ class TagHelperTest < ActionView::TestCase div_type2 = content_tag(:div, 'test', { data: {tooltip: nil} }) assert_dom_equal div_type1, div_type2 end + + def test_tag_builder_link_to_data_nil_equal + div_type1 = tag.div 'test', { 'data-tooltip': nil } + div_type2 = tag.div 'test', { data: {tooltip: nil} } + assert_dom_equal div_type1, div_type2 + end + + def test_tag_builder_allow_call_via_method_object + assert_equal "", tag.method(:foo).call + end + + def test_tag_builder_dasherize_names + assert_equal "", tag.img_slider + end + + def test_respond_to + assert_respond_to tag, :any_tag + end + end -- cgit v1.2.3