From 719c957272a61a7344978ba8e23aa104a3f0ffbe Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Wed, 11 Dec 2024 10:58:37 +1100
Subject: [PATCH] Remove `lodash` dependency (#383)

---
 .changeset/soft-days-care.md   |  5 +++++
 lib/getStaticTypes.js          | 20 ++++++++++++++++++--
 package.json                   |  2 --
 pnpm-lock.yaml                 | 10 ----------
 src/Playroom/Frames/Frames.tsx |  3 +--
 src/utils/componentsToHints.ts |  6 +++---
 6 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/soft-days-care.md

diff --git a/.changeset/soft-days-care.md b/.changeset/soft-days-care.md
new file mode 100644
index 00000000..d00a2336
--- /dev/null
+++ b/.changeset/soft-days-care.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Remove `lodash` dependency
diff --git a/lib/getStaticTypes.js b/lib/getStaticTypes.js
index 0e8d9404..b8d8b974 100644
--- a/lib/getStaticTypes.js
+++ b/lib/getStaticTypes.js
@@ -1,7 +1,5 @@
 const findUp = require('find-up');
 const fastGlob = require('fast-glob');
-const keyBy = require('lodash/keyBy');
-const mapValues = require('lodash/mapValues');
 const fs = require('fs');
 const ts = require('typescript');
 const path = require('path');
@@ -16,6 +14,24 @@ const parsePropType = (propType) => {
   return [];
 };
 
+/**
+ * Modified from https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore?tab=readme-ov-file#_keyby.
+ * Only supports arrays and expects a `key` to be provided.
+ */
+const keyBy = (array = [], key) =>
+  array.reduce(
+    (previousValue, currentValue) => ({
+      ...previousValue,
+      [currentValue[key]]: currentValue,
+    }),
+    {}
+  );
+
+const mapValues = (object, callback) =>
+  Object.fromEntries(
+    Object.entries(object).map(([key, value]) => [key, callback(value)])
+  );
+
 module.exports = async (playroomConfig) => {
   const {
     cwd,
diff --git a/package.json b/package.json
index 1447927e..d7e94316 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,6 @@
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
-    "@types/lodash": "^4.14.191",
     "@types/prettier": "^2.7.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
@@ -96,7 +95,6 @@
     "history": "^5.3.0",
     "html-webpack-plugin": "^5.5.0",
     "localforage": "^1.10.0",
-    "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6960314..0eb6ae7a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,9 +29,6 @@ dependencies:
   '@types/codemirror':
     specifier: ^5.60.5
     version: 5.60.5
-  '@types/lodash':
-    specifier: ^4.14.191
-    version: 4.14.191
   '@types/prettier':
     specifier: ^2.7.1
     version: 2.7.1
@@ -101,9 +98,6 @@ dependencies:
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
-  lodash:
-    specifier: ^4.17.21
-    version: 4.17.21
   lz-string:
     specifier: ^1.5.0
     version: 1.5.0
@@ -2827,10 +2821,6 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
-  /@types/lodash@4.14.191:
-    resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
-    dev: false
-
   /@types/mime@1.3.5:
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
     dev: false
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 2484b973..b90a50ef 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import flatMap from 'lodash/flatMap';
 import Iframe from './Iframe';
 import { compileJsx } from '../../utils/compileJsx';
 import type { PlayroomProps } from '../Playroom';
@@ -21,7 +20,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
   const renderCode = useRef<string>('');
 
-  const frames = flatMap(widths, (width) =>
+  const frames = widths.flatMap((width) =>
     themes.map((theme) => ({
       theme,
       width,
diff --git a/src/utils/componentsToHints.ts b/src/utils/componentsToHints.ts
index 8d02b94a..e4e22eb1 100644
--- a/src/utils/componentsToHints.ts
+++ b/src/utils/componentsToHints.ts
@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 // @ts-expect-error
 import parsePropTypes from 'parse-prop-types';
 import type { PlayroomProps } from '../Playroom/Playroom';
@@ -24,8 +23,9 @@ export default (
         };
       }
 
-      const parsedPropTypes = parsePropTypes(components[componentName]);
-      const filteredPropTypes = omit(parsedPropTypes, 'children');
+      const { children, ...filteredPropTypes } = parsePropTypes(
+        components[componentName]
+      );
       const propNames = Object.keys(filteredPropTypes);
 
       return {