feat: Upgrade to MJML5 and prepare for V4 release

README.md

@@ -25,20 +25,12 @@ V2 is a drop in replacement for https://github.com/wix-incubator/mjml-react/, wi
 
 ## What's new in V3?
 
-We wanted V3 of mjml-react to be fairly easy to migrate to from V2. We will implement more advanced features in V4. The main updates in V3 include:
+We wanted V3 of mjml-react to be fairly easy to migrate to from V2.
 
 - Typescript: mjml-react is now written in typescript which helps ensure correct props are passed to mjml components
 - Full mjml component support: We use an automated script for pulling mjml components and creating a corresponding mjml-react component. This means we get full support of all components available in the latest mjml version
 - Other small changes: add dangerouslySetInnerHTML in mjml-react for mjml ending tags, update testing, add in-code documenation
 
-## What's coming in V4?
-
-In V4 we are exploring exciting features that will make mjml-react even more powerful. This includes:
-
-- Improved prop type safety: help ensure correct formatting for props like padding, width, and height
-
-If you want to be on the cutting edge of what is being released, we are publishing a [v4-main-alpha version](https://www.npmjs.com/package/@faire/mjml-react/v/main-alpha) to npm.
-
 ## Getting Started
 
 1. Choose between rendering in mjml or mjml-browser based on your rendering environment. Also includes additional required dependencies.
@@ -64,7 +56,9 @@ import { renderToMjml } from "@faire/mjml-react/utils/renderToMjml";
 import { MJMLParseResults } from "mjml-core";
 import React from "react";
 
-export function renderReactToMjml(email: React.ReactElement): MJMLParseResults {
+export function renderReactToMjml(
+  email: React.ReactElement
+): Promise<MJMLParseResults> {
   return mjml2html(renderToMjml(email));
 }
 ```
@@ -86,7 +80,7 @@ import {
 
 import { renderReactToMjml } from "./renderReactToMjml";
 
-const { html, errors } = renderReactToMjml(
+const { html, errors } = await renderReactToMjml(
   <Mjml>
     <MjmlHead>
       <MjmlTitle>Last Minute Offer</MjmlTitle>
@@ -128,6 +122,13 @@ And as the result you will get a nice looking email HTML (works in mobile too!)
   keepComments: false,
   beautify: false,
   minify: true,
+  minifyOptions: {
+      collapseWhitespace: true,
+      minifyCss: true,
+      removeComments: 'all',
+      removeEmptyAttributes: true,
+      lowerCaseTags: true,
+  }
   validationLevel: 'strict'
 }
 ```

jest-dist.config.mjs

@@ -4,6 +4,6 @@ import baseConfig from "./jest.config.mjs";
 export default {
   ...baseConfig,
   moduleNameMapper: {
-    "src(.*)$": "<rootDir>/dist$1",
+    "\\.\\./src(.*)$": "<rootDir>/dist$1",
   },
 };

package.json

@@ -32,8 +32,8 @@
     "build-esm": "tsc -p tsconfig-esm.json",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "test": "jest",
-    "test-dist-skip-build": "jest --config=jest-dist.config.mjs",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "test-dist-skip-build": "node --experimental-vm-modules node_modules/jest/bin/jest.js --config=jest-dist.config.mjs",
     "test-dist": "yarn build-dist && yarn test-dist-skip-build",
     "generate-mjml-react": "ts-node scripts/generate-mjml-react.ts",
     "build-mjml-react": "ts-node scripts/build-mjml-react.ts",
@@ -50,7 +50,7 @@
     "@types/lodash.camelcase": "^4.3.9",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/lodash.upperfirst": "^4.3.9",
-    "@types/mjml": "^4.7.0",
+    "@types/mjml": "^5.0.0",
     "@types/node": "^22.19.0",
     "@types/react": "^18.3",
     "@types/react-dom": "^18.3",
@@ -68,7 +68,7 @@
     "jest": "^29.7.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.upperfirst": "^4.3.1",
-    "mjml": "^4.15.3",
+    "mjml": "^5.0.1",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.3",
     "react": "^18.3",
@@ -79,7 +79,7 @@
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "mjml": "^4.13.0",
+    "mjml": "^5.0.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },

src/utils/render.ts

@@ -1,4 +1,3 @@
-import { minify as htmlMinify } from "html-minifier";
 import mjml2html from "mjml";
 import { MJMLParsingOptions, MJMLJsonObject, MJMLParseError } from "mjml-core";
 import React from "react";
@@ -14,30 +13,21 @@ interface ConvertedHtml {
 export function render(
   email: React.ReactElement,
   options: MJMLParsingOptions = {}
-): ConvertedHtml {
+): Promise<ConvertedHtml> {
   const defaults: MJMLParsingOptions = {
     keepComments: false,
     beautify: false,
     validationLevel: "strict",
+    minifyOptions: {
+      collapseWhitespace: true,
+      minifyCss: true,
+      removeComments: "all",
+      removeEmptyAttributes: true,
+    },
   };
 
-  const parseResults: ConvertedHtml = mjml2html(renderToMjml(email), {
+  return mjml2html(renderToMjml(email), {
     ...defaults,
     ...options,
-    minify: undefined,
   });
-
-  if (options.minify) {
-    return {
-      html: htmlMinify(parseResults.html, {
-        caseSensitive: true,
-        collapseWhitespace: true,
-        minifyCSS: true,
-        removeComments: true,
-        removeEmptyAttributes: true,
-      }),
-    };
-  }
-
-  return parseResults;
 }

test/render.test.tsx

@@ -15,7 +15,7 @@ import {
 import { render } from "../src/utils/render";
 
 describe("render()", () => {
-  it("should render the HTML", () => {
+  it("should render the HTML", async () => {
     const email = (
       <Mjml>
         <MjmlHead>
@@ -28,35 +28,35 @@ describe("render()", () => {
         </MjmlBody>
       </Mjml>
     );
-    const { html } = render(email, { minify: true });
+    const { html } = await render(email, { minify: true });
     expect(html).toBeDefined();
     expect(html).toContain("<!doctype html>");
     expect(html).toContain("<title>Title</title>");
     expect(html).toContain("<p>Paragraph</p>");
   });
 
-  it("should throw an error if invalid markup is given", () => {
+  it("should throw an error if invalid markup is given", async () => {
     const email = (
       <Mjml>
         <MjmlBody>
           <div>Ooops!</div>
         </MjmlBody>
       </Mjml>
     );
-    expect(() => render(email)).toThrow(
+    await expect(() => render(email)).rejects.toThrow(
       "Element div doesn't exist or is not registered"
     );
   });
 
-  it("should not throw an error if soft validation level is passed", () => {
+  it("should not throw an error if soft validation level is passed", async () => {
     const email = (
       <Mjml>
         <MjmlBody>
           <div>Ooops!</div>
         </MjmlBody>
       </Mjml>
     );
-    const { errors } = render(email, {
+    const { errors } = await render(email, {
       validationLevel: "soft",
       minify: false,
     });
@@ -66,7 +66,7 @@ describe("render()", () => {
     );
   });
 
-  it("should handle all prop types (numbers, booleans, strings, objects, etc.) without error", () => {
+  it("should handle all prop types (numbers, booleans, strings, objects, etc.) without error", async () => {
     const email = (
       <Mjml>
         <MjmlBody>
@@ -88,7 +88,7 @@ describe("render()", () => {
         </MjmlBody>
       </Mjml>
     );
-    const { html, errors } = render(email);
+    const { html, errors } = await render(email);
     // Verify no errors when rendering the different prop types
     expect(errors).toHaveLength(0);
     expect(html).toBeDefined();

tsconfig-eslint.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig-base.json",
   "compilerOptions": {
     "module": "CommonJS",
-    "target": "es2015",
+    "target": "es2020",
     "outDir": "dist",
     "declaration": true
   },

tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig-base.json",
   "compilerOptions": {
     "module": "CommonJS",
-    "target": "es2015",
+    "target": "es2020",
     "outDir": "dist",
     "declaration": true
   }