chore: upgrade prettier to v3

.prettierrc

@@ -1,5 +1,7 @@
 {
+  "trailingComma": "es5",
   "importOrder": ["<THIRD_PARTY_MODULES>", "^\\.\\./(.*)$", "^[./]"],
   "importOrderSeparation": true,
-  "importOrderCaseInsensitive": true
+  "importOrderCaseInsensitive": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

package.json

@@ -44,7 +44,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.0",
     "@semantic-release/npm": "^13.1.5",
-    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/jest": "^29.5.14",
     "@types/lodash.camelcase": "^4.3.9",
     "@types/lodash.kebabcase": "^4.1.9",
@@ -68,8 +68,8 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.upperfirst": "^4.3.1",
     "mjml": "^5.0.1",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.3",
+    "prettier": "^3.9.6",
+    "pretty-quick": "^4.2.2",
     "react": "^18.3",
     "react-dom": "^18.3",
     "semantic-release": "^24.0.0",

scripts/generate-mjml-react.ts

@@ -48,7 +48,7 @@ const OTHER_SUPPORTED_COMPONENTS = [
 
 const MJML_COMPONENTS_TO_GENERATE = [
   ...OTHER_SUPPORTED_COMPONENTS.map(
-    (componentName) => ({ componentName } as IMjmlComponent)
+    (componentName) => ({ componentName }) as IMjmlComponent
   ),
   ...PRESET_CORE_COMPONENTS,
 ];

src/utils/mjml-component-utils.ts

@@ -5,21 +5,24 @@ const DANGEROUSLY_SET_INNER_HTML = "dangerouslySetInnerHTML";
 export function convertPropsToMjmlAttributes<P>(props: {
   [K in keyof P]: unknown;
 }) {
-  const mjmlProps = Object.entries(props).reduce((mjmlProps, [prop, value]) => {
-    const mjmlProp =
-      prop === DANGEROUSLY_SET_INNER_HTML ? prop : kebabCase(prop);
-    const mjmlValue = convertPropValueToMjml(mjmlProp, value);
+  const mjmlProps = Object.entries(props).reduce(
+    (mjmlProps, [prop, value]) => {
+      const mjmlProp =
+        prop === DANGEROUSLY_SET_INNER_HTML ? prop : kebabCase(prop);
+      const mjmlValue = convertPropValueToMjml(mjmlProp, value);
 
-    if (mjmlValue === undefined || prop === "className") {
+      if (mjmlValue === undefined || prop === "className") {
+        return mjmlProps;
+      }
+      if (prop === "mjmlClass") {
+        mjmlProps["mj-class"] = mjmlValue;
+      } else {
+        mjmlProps[mjmlProp] = mjmlValue;
+      }
       return mjmlProps;
-    }
-    if (prop === "mjmlClass") {
-      mjmlProps["mj-class"] = mjmlValue;
-    } else {
-      mjmlProps[mjmlProp] = mjmlValue;
-    }
-    return mjmlProps;
-  }, {} as Record<string, string | object>);
+    },
+    {} as Record<string, string | object>
+  );
 
   // className is a special prop used extensively in react in place of the html class attribute.
   // mjml uses a different name (css-class) for the same thing.

test/generate-mjml-react/getPropTypeFromMjmlAttributeType.test.ts

@@ -69,7 +69,7 @@ describe("getPropTypeFromMjmlAttributeType", () => {
             ({
               mjmlType,
               attribute,
-            } as { mjmlType: string; attribute: string })
+            }) as { mjmlType: string; attribute: string }
         );
       })
     );