feat: publish esm-only package

.eslintrc.js → .eslintrc.cjs

@@ -16,8 +16,6 @@ module.exports = {
     "react-hooks",
     "import",
     /* testing plugins */
-    "jest",
-    "jest-dom",
     "testing-library",
   ],
   extends: [
@@ -89,7 +87,8 @@ module.exports = {
       },
     ],
     "@typescript-eslint/no-var-requires": "off",
-
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-import-type-side-effects": "error",
     /* react rules */
     "react/display-name": "off",
     "react/jsx-curly-brace-presence": ["error", { props: "never" }],
@@ -116,26 +115,8 @@ module.exports = {
         "import/no-unassigned-import": "off",
       },
     },
-    {
-      files: ["**/?(*.)+(test).ts?(x)"],
-      extends: ["plugin:jest/recommended", "plugin:jest/style"],
-      rules: {
-        "jest/expect-expect": [
-          "warn",
-          {
-            assertFunctionNames: ["expect*"],
-            additionalTestBlockFunctions: [],
-          },
-        ],
-        "jest/no-standalone-expect": [
-          "error",
-          { additionalTestBlockFunctions: ["afterEach"] },
-        ],
-      },
-    },
     {
       files: ["test/**/*"],
-      env: { jest: true },
       rules: {
         "no-undef": "off",
         "@typescript-eslint/no-unused-expressions": "off",
@@ -144,7 +125,7 @@ module.exports = {
     },
     {
       files: ["**/?(*.)+(test).tsx"],
-      extends: ["plugin:testing-library/react", "plugin:jest-dom/recommended"],
+      extends: ["plugin:testing-library/react"],
       rules: {
         "testing-library/prefer-user-event": "error",
       },

package.json

@@ -18,6 +18,7 @@
     "url": "https://github.com/Faire/mjml-react/issues"
   },
   "main": "dist/index.js",
+  "type": "module",
   "types": "dist/index.d.ts",
   "directories": {
     "test": "test"
@@ -27,16 +28,15 @@
     "access": "public"
   },
   "scripts": {
-    "build-dist": "/bin/rm -rf dist && yarn build-cjs && yarn build-esm",
-    "build-cjs": "tsc -p tsconfig.json",
-    "build-esm": "tsc -p tsconfig-esm.json",
+    "build-dist": "/bin/rm -rf dist && yarn build-esm",
+    "build-esm": "tsc -p tsconfig.json",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "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": "vitest run",
+    "test-dist-skip-build": "vitest run --config vitest-dist.config.js",
     "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",
+    "generate-mjml-react": "node scripts/generate-mjml-react.ts",
+    "build-mjml-react": "node scripts/build-mjml-react.ts",
     "prepare": "husky install"
   },
   "devDependencies": {
@@ -45,7 +45,6 @@
     "@semantic-release/github": "^12.0.0",
     "@semantic-release/npm": "^13.1.5",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
-    "@types/jest": "^29.5.14",
     "@types/lodash.camelcase": "^4.3.9",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/lodash.upperfirst": "^4.3.9",
@@ -55,16 +54,14 @@
     "@types/react-dom": "^18.3",
     "@typescript-eslint/eslint-plugin": "^8.59.2",
     "@typescript-eslint/parser": "^8.59.2",
+    "@vitejs/plugin-react": "^6.1.1",
     "del": "^6.0.0",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.15.2",
-    "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-testing-library": "^7.16.2",
     "husky": "^8.0.0",
-    "jest": "^29.7.0",
     "lodash.camelcase": "^4.3.0",
     "lodash.upperfirst": "^4.3.1",
     "mjml": "^5.0.1",
@@ -73,16 +70,15 @@
     "react": "^18.3",
     "react-dom": "^18.3",
     "semantic-release": "^24.0.0",
-    "ts-jest": "^29.4.9",
-    "ts-node": "^10.9.2",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0"
   },
   "peerDependencies": {
     "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"
   },
-  "module": "dist/esm/index.js",
   "dependencies": {
     "lodash.kebabcase": "^4.1.1"
   },

scripts/generate-mjml-react.ts

@@ -1,20 +1,18 @@
-#!/usr/bin/env ts-node
-
 /**
  * Generate the mjml components
  *
- * usage `node --require ts-node/register scripts/generate-mjml-react.ts`
+ * usage `node scripts/generate-mjml-react.ts`
  */
 import * as childProcess from "child_process";
 import * as del from "del";
 import * as fs from "fs";
 import camelCase from "lodash.camelcase";
 import upperFirst from "lodash.upperfirst";
 // @ts-expect-error - no types available for mjml-preset-core
-import * as presetCore from "mjml-preset-core";
+import presetCore from "mjml-preset-core";
 import * as path from "path";
 
-import { getPropTypeFromMjmlAttributeType } from "./generate-mjml-react-utils/getPropTypeFromMjmlAttributeType";
+import { getPropTypeFromMjmlAttributeType } from "./generate-mjml-react-utils/getPropTypeFromMjmlAttributeType.ts";
 
 const MJML_REACT_DIR = "src";
 
@@ -182,7 +180,7 @@ ${GENERATED_HEADER_TSX}
 
 import React from "react";
 
-import { convertPropsToMjmlAttributes } from "../${UTILS_FILE}";
+import { convertPropsToMjmlAttributes } from "../${UTILS_FILE}/index.ts";
 
 export interface I${reactName}Props {
   ${types}
@@ -250,8 +248,8 @@ ${GENERATED_HEADER_TSX}
 ${MJML_COMPONENTS_TO_GENERATE.map(({ componentName }) => {
   const mjmlPackageName = componentName.replace("mj-", "mjml-");
   const reactName = upperFirst(camelCase(mjmlPackageName));
-  return `export { ${reactName} } from './${reactName}';
-export type { I${reactName}Props } from './${reactName}';`;
+  return `export { ${reactName} } from './${reactName}.tsx';
+export type { I${reactName}Props } from './${reactName}.tsx';`;
 }).join("\n")}
 `
 );
@@ -263,8 +261,8 @@ fs.writeFileSync(
   `
 ${GENERATED_HEADER_TSX}
 
-export * from "./${UTILS_FILE}";
-export * from "./${MJML_COMPONENTS_FOLDER}";
+export * from "./${UTILS_FILE}/index.ts";
+export * from "./${MJML_COMPONENTS_FOLDER}/index.tsx";
 `
 );
 

src/extensions/index.ts

@@ -1,5 +1,5 @@
-export { MjmlComment } from "./mjml-comment";
-export { MjmlConditionalComment } from "./mjml-conditional-comment";
-export { MjmlYahooStyle } from "./mjml-yahoo-style";
-export { MjmlTrackingPixel } from "./mjml-tracking-pixel";
-export { MjmlHtml } from "./mjml-html";
+export { MjmlComment } from "./mjml-comment.ts";
+export { MjmlConditionalComment } from "./mjml-conditional-comment.tsx";
+export { MjmlYahooStyle } from "./mjml-yahoo-style.tsx";
+export { MjmlTrackingPixel } from "./mjml-tracking-pixel.tsx";
+export { MjmlHtml } from "./mjml-html.ts";

src/extensions/mjml-comment.ts

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { convertPropsToMjmlAttributes } from "../utils";
+import { convertPropsToMjmlAttributes } from "../utils/index.ts";
 
 export class MjmlComment extends Component<{ children?: React.ReactNode }> {
   render() {

src/extensions/mjml-conditional-comment.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { MjmlComment } from "./mjml-comment";
+import { MjmlComment } from "./mjml-comment.ts";
 
 interface IMjmlConditionalComment {
   children?: React.ReactNode;

src/extensions/mjml-tracking-pixel.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { MjmlRaw } from "..";
+import { MjmlRaw } from "../mjml/MjmlRaw.tsx";
 
 interface IMjmlTrackingPixel {
   src: string;

src/extensions/mjml-yahoo-style.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { MjmlRaw } from "..";
+import { MjmlRaw } from "../mjml/MjmlRaw.tsx";
 
 export class MjmlYahooStyle extends Component<{ children?: React.ReactNode }> {
   render() {

src/index.tsx

@@ -3,5 +3,5 @@
  * Modify `scripts/generate-mjml-react.ts` to make changes to these files
  */
 
-export * from "./utils";
-export * from "./mjml";
+export * from "./utils/index.ts";
+export * from "./mjml/index.tsx";