feat: Upgrade to MJML5 and prepare for V4 release

[AshCorr]

Upgrades @faire/mjml-react to MJML v5 which was released a few weeks ago. This is a breaking change as:

• MJML v5 switches to using async functions, in particular the mjmlToHtml function, meaning @faire/mjml-react will also have to use async functions.
• MJML v5 also drops the html-minifier dependency in exchange for htmlnano + cssnano and

This PR also prepares the documentations for a V4 release. Previously the documentation hinted at a V4 release that would include more type safety, however its been 3 years since work on that V4 release began and it seems like it might be dead now, so I've removed that documentation for the time being in order to use the v4 tag for this breaking change.

Fixes #145

[faizhasim]

@AshCorr @emmclaughlin , any ways we can help on this? Keen to see this out.

[AshCorr]

@AshCorr @emmclaughlin , any ways we can help on this? Keen to see this out.

Ah sorry, I got a bit stuck. For some reason the dist tests (yarn test-dist) keep failing with the following error:

TypeError: cssnano is not a function

However the same tests work fine in dev mode (yarn test), not entirely sure whats happening and why it specifically fails in dist mode. I have a suspicion its due to how htmlnano optionally imports cssnano here.

Attaching a debugger I noticed that when running yarn test-dist the cssnano import for some reason resolves to this package (@faire/mjml-react)

[anajavi]

However the same tests work fine in dev mode (yarn test), not entirely sure whats happening and why it specifically fails in dist mode. I have a suspicion its due to how htmlnano optionally imports cssnano here.

Attaching a debugger I noticed that when running yarn test-dist the cssnano import for some reason resolves to this package (@faire/mjml-react)

yarn test-dist works for me if I change moduleNameMapper in jest-dist.config.js to:

  moduleNameMapper: {
    "^src(.*)$": "<rootDir>/dist$1",
  },

mjml-react/jest-dist.config.js

Line 8 in 44a28ea

"src(.*)$": "<rootDir>/dist$1",

Don't know if it is the right fix, but this points that the problem lies in jest config.

edit: actually it just makes the tests not to run against dist. so ignore this

[anajavi]

The cssnano has its main defined as `src/index.js:
https://github.com/cssnano/cssnano/blob/master/packages/cssnano/package.json#L5

The jest-dist.config.js moduleNameMapper mangles it to <rootDir>/dist/index.js

That is why cssnano import gets @faire/mjml-react as its module.

Setting the moduleNameMapper to include ../src used in tests fixes it while still running tests against dist.

  moduleNameMapper: {
    "\\.\\./src(.*)$": "<rootDir>/dist$1",
  },

It ain't pretty fix though.

[faizhasim]

^\\.\\./src(.*)$ seems good enough to target only the files in this repo.

[anajavi]

Since this is going to be v4 release, I'd bump the tsconfig target to es2020 too.
https://github.com/Faire/mjml-react/blob/main/tsconfig.json#L5

Easier to use debugger when async..await is not transformed.

[AshCorr]

The cssnano has its main defined as `src/index.js: https://github.com/cssnano/cssnano/blob/master/packages/cssnano/package.json#L5

The jest-dist.config.js moduleNameMapper mangles it to <rootDir>/dist/index.js

That is why cssnano import gets @faire/mjml-react as its module.

Setting the moduleNameMapper to include ../src used in tests fixes it while still running tests against dist.

  moduleNameMapper: {
    "\\.\\./src(.*)$": "<rootDir>/dist$1",
  },

It ain't pretty fix though.

Aha! Thanks, I'll give that a shot and update this PR today!

[anajavi]

This PR is still draft. Should it be set to ready for review?

[AshCorr]

This PR is still draft. Should it be set to ready for review?

Just testing everything!

Also wondering if we should do some dependency upgrades, but maybe that should be a follow up PR. Would be nice to release V4 with the latest versions of everything rather than just MJML.

[AshCorr]

Alrighty, I published a test version to @ashcorr/mjml-react@1.0.2 and tried using it in for one of our services and the new version of the library seems to behave appropriately. Tried with minification both on and off and didn't notice any issues.

Obviously we're not going to be using all of the functionality of mjml-react, so this test wouldn't have covered everything, but hopefully the unit tests that mjml-react has will be enough to catch any other regressions.

[AshCorr]

Without --experimental-vm-modules Jest seemingly explodes due to a dependency on prettier@3.0.0 by mjml-core

prettier/prettier#15769 (I tried upgrading to Jest v30 and it didnt fix the issue)

[anajavi]

Also wondering if we should do some dependency upgrades, but maybe that should be a follow up PR. Would be nice to release V4 with the latest versions of everything rather than just MJML.

I created a PR for typescript upgrade #149.

[AshCorr]

@emmclaughlin FYI!

[emmclaughlin]

Thanks for taking this on! Left a few comments