Comma-separated tokens (#904)

WIP implementation of #882

Author: joeldrapper

lib/phlex/sgml.rb

@@ -608,7 +608,7 @@ def json_escape(string)
 		end
 	end
 
-	private def __nested_tokens__(tokens)
+	private def __nested_tokens__(tokens, sep = " ")
 		buffer = +""
 
 		i, length = 0, tokens.length
@@ -619,28 +619,28 @@ def json_escape(string)
 			case token
 			when String
 				if i > 0
-					buffer << " " << token
+					buffer << sep << token
 				else
 					buffer << token
 				end
 			when Symbol
 				if i > 0
-					buffer << " " << token.name.tr("_", "-")
+					buffer << sep << token.name.tr("_", "-")
 				else
 					buffer << token.name.tr("_", "-")
 				end
 			when Integer, Float, Phlex::SGML::SafeObject
 				if i > 0
-					buffer << " " << token.to_s
+					buffer << sep << token.to_s
 				else
 					buffer << token.to_s
 				end
 			when Array
 				if token.length > 0
 					if i > 0
-						buffer << " " << __nested_tokens__(token)
+						buffer << sep << __nested_tokens__(token, sep)
 					else
-						buffer << __nested_tokens__(token)
+						buffer << __nested_tokens__(token, sep)
 					end
 				end
 			when nil

lib/phlex/sgml/elements.rb

@@ -1,6 +1,41 @@
 # frozen_string_literal: true
 
 module Phlex::SGML::Elements
+	COMMA_SEPARATED_TOKENS = {
+		img: <<~RUBY,
+			if Array === (srcset_attribute = attributes[:srcset])
+				attributes[:srcset] = __nested_tokens__(srcset_attribute, ", ")
+			end
+		RUBY
+		link: <<~RUBY,
+			if Array === (media_attribute = attributes[:media])
+				attributes[:media] = __nested_tokens__(media_attribute, ", ")
+			end
+
+			if Array === (sizes_attribute = attributes[:sizes])
+				attributes[:sizes] = __nested_tokens__(sizes_attribute, ", ")
+			end
+
+			if Array === (imagesrcset_attribute = attributes[:imagesrcset])
+				rel_attribute = attributes[:rel] || attributes["rel"]
+				as_attribute = attributes[:as] || attributes["as"]
+
+				if ("preload" == rel_attribute || :preload == rel_attribute) && ("image" == as_attribute || :image == as_attribute)
+					attributes[:imagesrcset] = __nested_tokens__(imagesrcset_attribute, ", ")
+				end
+			end
+		RUBY
+		input: <<~RUBY,
+			if Array === (accept_attribute = attributes[:accept])
+				type_attribute = attributes[:type] || attributes["type"]
+
+				if "file" == type_attribute || :file == type_attribute
+					attributes[:accept] = __nested_tokens__(accept_attribute, ", ")
+				end
+			end
+		RUBY
+	}.freeze
+
 	def __registered_elements__
 		@__registered_elements__ ||= {}
 	end
@@ -23,6 +58,7 @@ def #{method_name}(**attributes)
 					if block_given # with content block
 						buffer << "<#{tag}"
 						begin
+							#{COMMA_SEPARATED_TOKENS[method_name]}
 							buffer << (Phlex::ATTRIBUTE_CACHE[attributes] ||= __attributes__(attributes))
 						ensure
 							buffer << ">"
@@ -53,6 +89,7 @@ def #{method_name}(**attributes)
 					else # without content
 						buffer << "<#{tag}"
 						begin
+							#{COMMA_SEPARATED_TOKENS[method_name]}
 							buffer << (::Phlex::ATTRIBUTE_CACHE[attributes] ||= __attributes__(attributes))
 						ensure
 							buffer << "></#{tag}>"
@@ -114,6 +151,7 @@ def #{method_name}(**attributes)
 				if attributes.length > 0 # with attributes
 					buffer << "<#{tag}"
 					begin
+						#{COMMA_SEPARATED_TOKENS[method_name]}
 						buffer << (::Phlex::ATTRIBUTE_CACHE[attributes] ||= __attributes__(attributes))
 					ensure
 						buffer << ">"

quickdraw/sgml/attributes.test.rb

@@ -538,6 +538,61 @@
 	end
 end
 
+test ":srcset on img with an Array" do
+	output = phlex { img(srcset: []) }
+	assert_equal_html output, %(<img srcset="">)
+
+	output = phlex { img(srcset: ["image.jpg 1x", "image@2x.jpg 2x"]) }
+	assert_equal_html output, %(<img srcset="image.jpg 1x, image@2x.jpg 2x">)
+end
+
+test ":media on link with an Array" do
+	output = phlex { link(media: []) }
+	assert_equal_html output, %(<link media="">)
+
+	output = phlex { link(media: ["screen", "print"]) }
+	assert_equal_html output, %(<link media="screen, print">)
+
+	output = phlex { link(media: ["(max-width: 600px)", "(min-width: 1200px)"]) }
+	assert_equal_html output, %(<link media="(max-width: 600px), (min-width: 1200px)">)
+end
+
+test ":sizes on link with an Array" do
+	output = phlex { link(sizes: []) }
+	assert_equal_html output, %(<link sizes="">)
+
+	output = phlex { link(sizes: ["16x16", "32x32", "64x64"]) }
+	assert_equal_html output, %(<link sizes="16x16, 32x32, 64x64">)
+end
+
+test ":imagesrcset on link with an Array when rel is preload and as is image" do
+	output = phlex { link(imagesrcset: [], rel: "preload", as: "image") }
+	assert_equal_html output, %(<link imagesrcset="" rel="preload" as="image">)
+
+	output = phlex { link(imagesrcset: ["image.jpg 1x", "image@2x.jpg 2x"], rel: "preload", as: "image") }
+	assert_equal_html output, %(<link imagesrcset="image.jpg 1x, image@2x.jpg 2x" rel="preload" as="image">)
+
+	output = phlex { link(imagesrcset: ["image.jpg 1x", "image@2x.jpg 2x"], rel: :preload, as: :image) }
+	assert_equal_html output, %(<link imagesrcset="image.jpg 1x, image@2x.jpg 2x" rel="preload" as="image">)
+
+	output = phlex { link(:imagesrcset => ["image.jpg 1x", "image@2x.jpg 2x"], "rel" => "preload", "as" => "image") }
+	assert_equal_html output, %(<link imagesrcset="image.jpg 1x, image@2x.jpg 2x" rel="preload" as="image">)
+end
+
+test ":accept on input with array when type is file" do
+	output = phlex { input(accept: [], type: "file") }
+	assert_equal_html output, %(<input accept="" type="file">)
+
+	output = phlex { input(accept: ["image/jpeg", "image/png"], type: "file") }
+	assert_equal_html output, %(<input accept="image/jpeg, image/png" type="file">)
+
+	output = phlex { input(accept: ["image/jpeg", "image/png"], type: :file) }
+	assert_equal_html output, %(<input accept="image/jpeg, image/png" type="file">)
+
+	output = phlex { input(:accept => ["image/jpeg", "image/png"], "type" => "file") }
+	assert_equal_html output, %(<input accept="image/jpeg, image/png" type="file">)
+end
+
 # This is just for coverage.
 Phlex::HTML.call do |c|
 	c.__send__(:__styles__, nil)