Add logic to properly handle Phlex::SVG

[marcoroth]

This pull request adds logic to handle the svg method using the block syntax introduced via phlex-ruby/phlex#493.

For example a document like:

<svg>
  <path d="123"></path>
</svg>

now uses the a param for the svg block and now calls path on it:

 svg { |s| s.path(d: "123") }

Resolves #138

[marcoroth]

@stephannv sadly I can't implement the case-sensitive tag names due to how Nokogiri parses HTML 🙄

Either we can have case-sensitive tag names or boolean attributes (#120), but we can't have both at the same time...

Related: https://twitter.com/marcoroth_/status/1649619900573335553

[stephannv]

@stephannv sadly I can't implement the case-sensitive tag names due to how Nokogiri parses HTML 🙄

Either we can have case-sensitive tag names or boolean attributes (#120), but we can't have both at the same time...

Related: https://twitter.com/marcoroth_/status/1649619900573335553

@marcoroth I think we could have a SVG element list with camel cased elements and check against it:

CAMELIZED_SVG_ELEMENTS = Phlex::SomethingToGetRegisteredSVGElements.filter { |el| el =~ /[A-Z]/ }
# OR
CAMELIZED_SVG_ELEMENTS = %w[animateMotion animateTransform clipPath feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence foreignObject linearGradient radialGradient textPath]

# on `handle_svg_node`
node.children.each do |child|
  child.traverse do |subchild|
    method_name = CAMELIZED_SVG_ELEMENTS.find { |el| el.downcase == subchild.name } || subchild.name
    subchild.name = "#{options.svg_param}.#{method_name}"
  end
end

What do you think?

EDIT:
It is possible to use a map instead an array:

CAMELIZED_SVG_ELEMENTS = { "animatemotion" => "animateMotion", ... }
...
method_name = CAMELIZED_SVG_ELEMENTS[subchild.name] || subchild.name

[marcoroth]

@stephannv good idea, thank you!

Just pushed cd262e2. While this doesn't solve the issue of supporting regular case-sensitive tags it's good enough for the SVG case. I'll open a new issue for supporting case-sensitive tags in general.

[marcoroth]

Issue for supporting case-sensitive elements: #140

[stephannv]

It's working. Thanks, marcoroth.

[marcoroth]

Nice, awesome! 🙌🏼