doc: code comments in utils function

Author: 0gust1

utils.js

@@ -21,18 +21,22 @@ export function splitObjectByKeys(obj, keys) {
 }
 
 export function processAttributesAndConfig(nodeUrl, config = {}) {
-  // clone the config object to avoid side effects for other images
+
+  // Clone/deepcopy the config object to avoid side effects for other images
+  // Due to the way we process the config, we need to make sure we don't modify the original object
+  // => https://github.com/lzinga/mdsvex-enhanced-images/issues/9
   let configCopy = JSON.parse(JSON.stringify(config));
 
   // create a standard url (to cleanly parse the query string)
   const url = new URL(nodeUrl, "http://localhost"); // base url is irrelevant but needed by URL constructor
 
-  /* CSS class names handling */
+  /* Query string CSS class names handling */
   // get possible "class" entries from the query string
   const searchParams = new URLSearchParams(url.search);
   const classesInQuery = searchParams
     .getAll("class")
-    .flatMap((e) => e.split(";"));
+    .flatMap((e) => e.split(";")) // class names can be separated by ';' in the query string
+    .map((c)=> c.trim()); 
 
   // merge classes from the query string with the ones from the config (if any)
   //  - normalize the possible classes from config
@@ -54,7 +58,8 @@ export function processAttributesAndConfig(nodeUrl, config = {}) {
   const combinedClassesAttrStr =
     allClasses.length > 0 ? `class="${allClasses.join(" ")}"` : "";
 
-  // classes processed: remove them from searchParams and config
+  // Classes processed: remove them from searchParams and config
+  // here, we mutate the configCopy object, but as it's a copy, so no side effects (see above)
   searchParams.delete("class");
   if (configCopy.attributes) {
     delete configCopy.attributes.class;
@@ -65,14 +70,13 @@ export function processAttributesAndConfig(nodeUrl, config = {}) {
   // get the rest of the query string as attributes
   const urlParamsAttributes = Object.fromEntries(searchParams);
 
-  // split the attributes from urlParamsAttributes into attributes and directives
+  // split the attributes from urlParamsAttributes into attributes and image directives
   const [attributes, directives] = splitObjectByKeys(
     urlParamsAttributes,
     possibleAttributes
   );
 
-  // Combine config.attributes with attributes from URL, with URL parameters taking precedence
-
+  // Combine/merge config.attributes with attributes from URL, with URL parameters taking precedence
   const combinedAttributes = {
     ...(configCopy?.attributes ?? {}),
     ...attributes,
@@ -82,16 +86,17 @@ export function processAttributesAndConfig(nodeUrl, config = {}) {
     .map(([key, value]) => `${key}="${value}"`)
     .join(" ");
 
-  // Combine directives from config with directives from URL, with URL parameters taking precedence
+  // Combine/merge image directives from config with image directives from URL, with URL parameters taking precedence
   const combinedDirectives = {
     ...(configCopy?.imagetoolsDirectives ?? {}),
     ...directives,
   };
 
-  // finally, format the combined directives as URL parameters
+  // Finally, format the combined directives as URL parameters
   const combinedDirectivesStr = Object.entries(combinedDirectives)
     .map(([key, value]) => `${key}=${value}`)
     .join("&");
+    
   const combinedDirectivesUrlParams = combinedDirectivesStr
     ? `&${combinedDirectivesStr}`
     : "";