Merge pull request #45 from infinum/feature/new-helper

Release 1.3.1

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [1.3.1] - 2024-09-13
+- Helper `getFilteredAttributes` used on SSR components to filter out unwanted attributes and optimize the output.
+
 ## [1.3.0] - 2024-08-08
 - `twClasses` and `twClassesEditor` can now be passed as an array
 - Updated schemas to account for the `twClasses`/`twClassesEditor` changes.
@@ -40,6 +43,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
 
+[1.3.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.0...1.3.1
 [1.3.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.2.0...1.3.0
 [1.2.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.1.1...1.2.0
 [1.1.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.1.0...1.1.1

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",

scripts/editor/attributes.js

@@ -301,3 +301,28 @@ export const props = (newName, attributes, manual = {}) => {
 	// Return the original attribute for optimization purposes.
 	return output;
 };
+
+
+/**
+ * Filter attributes by array of keys. Used to provide alternative attributes to server side render component to prevent unnecessary rerender.
+ *
+ * @param {object} attributes Attributes data source.
+ * @param {array} filterAttributes Array of attributes to filter.
+ * @param {object} appendItems Append additional attributes.
+ *
+ * @returns {object}
+ */
+export const getFilteredAttributes = (attributes, filterAttributes, appendItems = {}) => {
+	const output = {};
+
+	for (const [key, value] of Object.entries(attributes)) {
+		if (filterAttributes.includes(key)) {
+			output[key] = value;
+		}
+	}
+
+	return {
+		...output,
+		...appendItems,
+	};
+};