v2

.eslintrc.json

@@ -11,9 +11,9 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": "latest",
     "sourceType": "module",
-    "project": "./tsconfig.json"
+    "project": true
   },
   "plugins": [
     "@typescript-eslint",
@@ -26,7 +26,9 @@
   "overrides": [
     {
       "files": [
-        "./tools/*.ts"
+        "./tools/*.ts",
+        "./integration-test/*.ts",
+        "./tsup.config.ts"
       ],
       "rules": {
         "import/no-extraneous-dependencies": "off"

.github/workflows/ci.yml

@@ -44,14 +44,14 @@ jobs:
           github-token: ${{ secrets.github_token }}
       - name: Benchmark (show)
         if: ${{ github.event_name == 'push' }}
-        run: yarn tsnode tools/benchmark.ts
+        run: yarn tsx tools/benchmark.ts
       - name: Benchmark (write)
         if: ${{ github.event_name == 'pull_request' }}
         run: |
           echo "# Performance benchmark" >> bench.txt
           echo ${{ github.event.pull_request.head.sha }} >> bench.txt
           echo '```' >> bench.txt
-          yarn tsnode tools/benchmark.ts >> bench.txt
+          yarn tsx tools/benchmark.ts >> bench.txt
           echo '```' >> bench.txt
       - name: Store results
         if: ${{ github.event_name == 'pull_request' }}

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## Version 2
+
+- Breaking changes:
+  - Targeting ES6,
+  - Default export removed,
+  - IIFE build removed.
+- The distribution becomes ESM first, while remaining dual (CJS support remains).
+  - The right files should be chosen automatically from the `dist` folder:
+    - for ESM: `index.js` and `index.d.ts`,
+    - for CJS: `index.cjs` and `index.d.cts`.
+- Features:
+  - Performance improvement: 1.6 times faster.
+- How to migrate:
+  - Replace default import with a named one.
+
+```typescript
+// before:
+import mergeSx from "merge-sx";
+// after:
+import { mergeSx } from "merge-sx";
+```
+
 ## Version 1
 
 ### v1.4.0

README.md

@@ -16,6 +16,8 @@ yarn add merge-sx
 The utility provides a very simple and semantically clean interface, that supports conditional and optional inclusions.
 
 ```ts
+import { mergeSx } from "merge-sx";
+
 // Merge your SxProps
 mergeSx(sx1, sx2 /*, ... */);
 // Merge optionally
@@ -50,11 +52,11 @@ support for conditional and optional inclusions, providing a very simple and sem
 The utility has been tested to support up to 65535 arguments.
 
 ```text
-┌─────────────┬─────────┬────────┬───────┬───────┐
-│ N arguments │   10    │  100   │ 1000  │ 10000 │
-├─────────────┼─────────┼────────┼───────┼───────┤
-│ ops/s       │ 8476396 │ 975246 │ 94453 │ 10414 │
-└─────────────┴─────────┴────────┴───────┴───────┘
+┌─────────────┬──────────┬─────────┬────────┬───────┐
+│ N arguments │   10     │   100   │  1000  │ 10000 │
+├─────────────┼──────────┼─────────┼────────┼───────┤
+│ ops/s       │ 13615624 │ 1273083 │ 122746 │ 14686 │
+└─────────────┴──────────┴─────────┴────────┴───────┘
 ```
 
 ## Examples

integration-test/integration.spec.ts

@@ -1,5 +1,6 @@
 import type { SxProps, Theme } from "@mui/system";
-import mergeSx from "merge-sx";
+import { mergeSx } from "merge-sx";
+import { describe, test, expect } from "vitest";
 
 describe("Integration", () => {
   test("mergeSx() operates SxProps", () => {

integration-test/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["*.ts"],
+  "compilerOptions": {
+    "noEmit": true
+  }
+}

package.json

@@ -1,29 +1,31 @@
 {
   "name": "merge-sx",
-  "version": "1.4.0",
+  "version": "2.0.0-beta1",
   "description": "Combines multiple SxProps for Material UI components.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
       },
-      "script": {
-        "default": "./dist/index.global.js"
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       }
     }
   },
+  "files": [
+    "dist",
+    "*.md"
+  ],
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/RobinTail/merge-sx.git"
+    "url": "git+https://github.com/RobinTail/merge-sx.git"
   },
   "homepage": "https://github.com/RobinTail/merge-sx",
   "author": {
@@ -32,40 +34,40 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsup",
-    "lint": "eslint src",
-    "test": "tsc -p tsconfig.unit.json && jest src",
-    "intTest": "tsc -p tsconfig.int.json && jest integration-test",
+    "build": "tsup && attw --pack",
+    "lint": "eslint src integration-test",
+    "test": "tsc -p tsconfig.unit.json && vitest run src --coverage",
+    "intTest": "tsc -p integration-test/tsconfig.json && vitest run -r integration-test",
     "mdfix": "prettier *.md --write",
     "postversion": "git push && git push --tags",
-    "prepublishOnly": "yarn lint && yarn test && yarn build",
-    "tsnode": "node -r @swc-node/register"
+    "prepublishOnly": "yarn lint && yarn test && yarn build"
   },
   "peerDependencies": {
     "@mui/material": "^5.1.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.13.3",
     "@mui/system": "^5.15.0",
-    "@swc-node/register": "^1.5.4",
-    "@swc/core": "^1.3.14",
-    "@swc/jest": "^0.2.23",
-    "@types/benchmark": "^2.1.2",
-    "@types/jest": "^29.2.2",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/benchmark": "^2.1.5",
+    "@types/node": "^20.10.4",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitest/coverage-istanbul": "^1.0.4",
     "benchmark": "^2.1.4",
-    "eslint": "^8.27.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "jest": "^29.2.2",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.0.1",
     "prettier": "3.1.1",
     "react": "^18",
     "react-dom": "^18",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.3"
+    "tsup": "^8.0.1",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.4"
   },
   "keywords": [
     "react",

src/mergeSx.spec.ts → src/index.spec.ts

@@ -1,5 +1,6 @@
 import type { SxProps, Theme } from "@mui/system";
-import { mergeSx } from "./mergeSx";
+import { mergeSx } from "./index";
+import { describe, it, expect } from "vitest";
 
 describe("mergeSx()", () => {
   describe("simple cases", () => {

src/index.ts

@@ -1,5 +1,33 @@
-import { mergeSx as implementation } from "./mergeSx";
+import type { SxProps } from "@mui/system";
 
-export const mergeSx = implementation;
-export const sxMerge = mergeSx;
-export default mergeSx;
+type PureSx<T extends object> = Exclude<SxProps<T>, ReadonlyArray<any>>;
+type SxAsArray<T extends object> = Array<PureSx<T>>;
+
+/**
+ * @desc Combines multiple SxProps
+ * @author Anna Bocharova
+ * @link https://stackoverflow.com/a/71533846
+ * @link https://mui.com/system/getting-started/the-sx-prop/#array-values
+ * @link https://mui.com/system/getting-started/the-sx-prop/#passing-the-sx-prop
+ * @requires SxProps from MUI 5.1.0 or higher
+ * @see https://github.com/mui/material-ui/releases/tag/v5.1.0
+ * @link https://github.com/mui/material-ui/pull/29297
+ * @since v0.1.4 using for..of instead of reducer for performance reasons
+ */
+export const mergeSx = <T extends object>(
+  ...styles: (SxProps<T> | false | undefined)[]
+): SxProps<T> => {
+  const capacitor: SxAsArray<T> = [];
+  for (const sx of styles) {
+    if (sx) {
+      if (Array.isArray(sx)) {
+        for (const sub of sx as SxAsArray<T>) {
+          capacitor.push(sub);
+        }
+      } else {
+        capacitor.push(sx as PureSx<T>);
+      }
+    }
+  }
+  return capacitor;
+};

tools/benchmark.ts

@@ -1,24 +1,22 @@
 import { SxProps, Theme } from "@mui/system";
-import { Suite, Target } from "benchmark";
-// eslint-disable-next-line import/extensions
-import mergeSx from "../src/index.ts";
+import bench from "benchmark";
+import { mergeSx } from "../src";
 
 const results: Record<string, Record<number, number>> = {};
 
 Promise.all(
   [10, 100, 1000, 10000].map(
     (count) =>
       new Promise((resolve) => {
-        const suite = new Suite(`Performance`);
+        const suite = new bench.Suite(`Performance`);
 
         const styles = new Array<SxProps<Theme>>(count).fill({ mt: 1 });
 
         suite
           .add("Current implementation", () => {
             mergeSx(...styles);
           })
-          .on("cycle", (event: Event) => {
-            const target = event.target as unknown as Target;
+          .on("cycle", ({ target }: bench.Event) => {
             results[target.name!] = {
               ...results[target.name!],
               [count]: Math.round(target.hz!),

tsconfig.json

@@ -1,10 +1,10 @@
 {
+  "extends": "@tsconfig/node18/tsconfig.json",
   "compilerOptions": {
     "strict": true,
-    "target": "ES5",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "skipLibCheck": true,
-    "allowImportingTsExtensions": true
+    "target": "ES6",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true
   }
 }

tsconfig.unit.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["integration-test"],
+  "include": ["src"],
   "compilerOptions": {
     "noEmit": true
   }