Merge pull request #130 from chasefleming/chasefleming/merge-attrs

Create `Merge` method for attributes

attrs/README.md

@@ -9,6 +9,9 @@ The `attrs` subpackage within `elem-go` offers a comprehensive set of constants
 - [Available HTML Attributes](#available-html-attributes)
 - [Using `Props` Type](#using-props-type)
 - [Examples](#examples)
+- [Utilities](#utilities)
+  - [`Merge`](#merge)
+  - [`DataAttr`](#dataattr)
 
 ## Introduction
 
@@ -54,4 +57,46 @@ buttonAttrs := attrs.Props{
 button := elem.Button(buttonAttrs, elem.Text("Submit"))
 ```
 
-In this example, attributes for the button element are defined using the attrs.Props map with attrs constants.
+In this example, attributes for the button element are defined using the attrs.Props map with attrs constants.
+
+## Utilities
+
+The `attrs` subpackage also includes utility functions to enhance the attribute manipulation process.
+
+### `Merge`
+
+The `Merge` function allows you to merge multiple `attrs.Props` maps into a single map. This is useful when you want to combine attribute maps for an element. Note that if there are conflicting keys, the last map's value will override the previous ones.
+
+#### Usage
+
+```go
+defaultButtonAttrs := attrs.Props{
+    attrs.Class: "btn",
+    attrs.Type:  "button",
+}
+
+primaryButtonAttrs := attrs.Props{
+    attrs.Class: "btn btn-primary", // Overrides the Class attribute from defaultButtonAttrs
+    attrs.ID:    "submitBtn",
+}
+
+mergedButtonAttrs := attrs.Merge(defaultButtonAttrs, primaryButtonAttrs)
+
+button := elem.Button(mergedButtonAttrs, elem.Text("Submit"))
+```
+
+In this example, the `Merge` function is used to combine the default button attributes with the primary button attributes. The `Class` attribute from the `primaryButtonAttrs` map overrides the `Class` attribute from the `defaultButtonAttrs` map.
+
+### `DataAttr`
+
+The `DataAttr` function is a convenient way to define `data-*` attributes for HTML elements. It takes the attribute name and value as arguments and returns a map of `data-*` attributes.
+
+#### Usage
+
+```go
+dataAttrs := attrs.DataAttr("foobar") // Outputs "data-foobar"
+```
+
+In this example, the `DataAttr` function is used to define a `data-foobar` attribute key for an HTML element.
+
+By using the `attrs` subpackage, you can ensure type safety and correctness when working with HTML attributes in Go, making your development process smoother and more efficient.

attrs/utils.go

@@ -2,10 +2,21 @@ package attrs
 
 import "strings"
 
-// DataAttr returns the name for a data attribute
+// DataAttr returns the name for a data attribute.
 func DataAttr(name string) string {
 	var builder strings.Builder
 	builder.WriteString(DataPrefix)
 	builder.WriteString(name)
 	return builder.String()
 }
+
+// Merge merges multiple attribute maps into a single map, with later maps overriding earlier ones.
+func Merge(attrMaps ...Props) Props {
+	mergedAttrs := Props{}
+	for _, attrMap := range attrMaps {
+		for key, value := range attrMap {
+			mergedAttrs[key] = value
+		}
+	}
+	return mergedAttrs
+}

attrs/utils_test.go

@@ -11,3 +11,25 @@ func TestDataAttr(t *testing.T) {
 	expected := "data-foobar"
 	assert.Equal(t, expected, actual)
 }
+
+func TestMerge(t *testing.T) {
+	baseStyle := Props{
+		"Width": "100px",
+		"Color": "blue",
+	}
+
+	additionalStyle := Props{
+		"Color":           "red", // This should override the blue color in baseStyle
+		"BackgroundColor": "yellow",
+	}
+
+	expectedMergedStyle := Props{
+		"Width":           "100px",
+		"Color":           "red",
+		"BackgroundColor": "yellow",
+	}
+
+	mergedStyle := Merge(baseStyle, additionalStyle)
+
+	assert.Equal(t, expectedMergedStyle, mergedStyle)
+}