Remove lodash dependency

.changeset/soft-days-care.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Remove `lodash` dependency

cypress/projects/themed/playroom.config.js

@@ -4,7 +4,7 @@ module.exports = {
   themes: './themes',
   outputPath: './dist',
   openBrowser: false,
-  paramType: 'search',
+  paramType: 'hash',
   port: 9001,
   storageKey: 'playroom-example-themed',
 };

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,

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",

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,

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 {