fix: lodash imports for CommonJS

Co-authored-by: Matus Sabo <[email protected]>

Author: dnotes

.changeset/tender-buses-remember.md

@@ -0,0 +1,6 @@
+---
+"@quickpickle/playwright": patch
+"quickpickle": patch
+---
+
+Fix and optimize lodash imports for CommonJS

packages/main/package.json

@@ -35,7 +35,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && FORMAT=cjs rollup -c",
     "type-check": "tsc --noEmit",
     "test:watch": "vitest",
     "test": "vitest --run"
@@ -46,9 +46,12 @@
     "@cucumber/gherkin": "^29.0.0",
     "@cucumber/messages": "^22.0.0",
     "@cucumber/tag-expressions": "^6.1.1",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@optimize-lodash/esbuild-plugin": "^3.0.0",
+    "@optimize-lodash/rollup-plugin": "^5.0.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
@@ -57,7 +60,7 @@
     "@types/node": "^18.19.66",
     "@vitest/browser": "^2.1.6",
     "playwright": "^1.49.0",
-    "rollup": "^3.29.5",
+    "rollup": "^4.27.4",
     "typescript": "^5.7.2",
     "vite": "^6.0.7",
     "vitest": "^2.1.6"

packages/main/rollup.config.js

@@ -1,18 +1,15 @@
 import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
+import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin'
+
+let cjs = process.env.FORMAT === 'cjs' ? 'cjs' : '';
 
 export default {
   input: 'src/index.ts',
   output: [
     {
-      file: 'dist/index.cjs',
-      format: 'cjs',
-      sourcemap: true,
-      exports: 'named',
-    },
-    {
-      file: 'dist/index.esm.js',
-      format: 'esm',
+      file: `dist/index.${cjs || 'esm.js'}`,
+      format: cjs || 'esm',
       sourcemap: true,
       exports: 'named',
     },
@@ -23,8 +20,12 @@ export default {
       values: {
         'import.meta?.env?.MODE': JSON.stringify('production'),
         'process?.env?.NODE_ENV': JSON.stringify('production'),
+        'lodash-es': cjs ? 'lodash' : 'lodash-es',
       }
     }),
+    optimizeLodashImports({
+      appendDotJs: false,
+    }),
     typescript({
       tsconfig: './tsconfig.json',
       declaration: true,
@@ -37,5 +38,6 @@ export default {
     '@cucumber/messages',
     '@cucumber/tag-expressions',
     'lodash-es',
+    'lodash',
   ]
 };

packages/playwright/package.json

@@ -59,7 +59,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && FORMAT=cjs rollup -c",
     "playwright-install-ci": "playwright install-deps && playwright install chromium",
     "type-check": "tsc --noEmit",
     "test:watch": "vitest",
@@ -68,6 +68,7 @@
   "author": "David Hunt",
   "dependencies": {
     "@playwright/test": "^1.49.0",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "pixelmatch": "^6.0.0",
     "playwright": "^1.49.0",
@@ -76,6 +77,7 @@
     "vite": "^5.4.11"
   },
   "devDependencies": {
+    "@optimize-lodash/rollup-plugin": "^5.0.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
     "@types/jest-image-snapshot": "^6.4.0",

packages/playwright/rollup.config.js

@@ -2,6 +2,9 @@ import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
 import glob from 'fast-glob';
 import path from 'node:path';
+import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin'
+
+let cjs = process.env.FORMAT === 'cjs' ? 'cjs' : '';
 
 const input = Object.fromEntries(
   glob.sync('src/**/*.ts').map(file => [
@@ -16,27 +19,24 @@ export default {
   output: [
     {
       dir: 'dist',
-      format: 'cjs',
+      format: cjs || 'esm',
       sourcemap: true,
       exports: 'named',
-      entryFileNames: '[name].cjs'
+      entryFileNames: `[name].${cjs || 'mjs'}`
     },
-    {
-      dir: 'dist',
-      format: 'esm',
-      sourcemap: true,
-      exports: 'named',
-      entryFileNames: '[name].mjs'
-    }
   ],
   plugins: [
     replace({
       preventAssignment: true,
       values: {
         'import.meta?.env?.MODE': JSON.stringify('production'),
         'process?.env?.NODE_ENV': JSON.stringify('production'),
+        'lodash-es': cjs ? 'lodash' : 'lodash-es',
       }
     }),
+    optimizeLodashImports({
+      appendDotJs: false,
+    }),
     typescript({
       tsconfig: './tsconfig.json',
       declaration: true,
@@ -51,6 +51,7 @@ export default {
     'node:url',
     'node:fs',
     'lodash-es',
+    'lodash',
     'pngjs',
     'pixelmatch',
   ]