refactor: remove all three runtime dependencies

.github/workflows/ci.yml

@@ -108,7 +108,10 @@ jobs:
           cd /tmp/consumer
           node -e "
             const vm = require('node:vm'), fs = require('node:fs');
-            const sandbox = { React: require('react'), _: require('lodash'), PropTypes: require('prop-types'), console };
+            // React is the only global the bundle reads. The package has no
+            // runtime dependencies, so anything else here would mask a
+            // regression that reintroduced one.
+            const sandbox = { React: require('react'), console };
             vm.createContext(sandbox);
             vm.runInContext(fs.readFileSync('node_modules/react-xarrows/lib/index.umd.js', 'utf8'), sandbox);
             const umd = sandbox.reactXarrow;

package.json

@@ -46,11 +46,6 @@
     "url": "https://github.com/Eliav2/react-xarrows"
   },
   "bugs": "https://github.com/Eliav2/react-xarrows/issues",
-  "dependencies": {
-    "@types/prop-types": "^15.7.3",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.7.2"
-  },
   "funding": {
     "type": "individual",
     "url": "https://www.paypal.com/donate?hosted_button_id=CRQ343F9VTRS8"
@@ -64,7 +59,6 @@
     "@microsoft/api-extractor": "^7.58.12",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
-    "@types/lodash": "^4.14.168",
     "@types/node": "^26.1.2",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",

src/Xarrow/Xarrow.tsx

@@ -2,11 +2,10 @@
 import { xarrowPropsType } from '../types';
 import useXarrowProps from './useXarrowProps';
 import { XarrowContext } from '../Xwrapper';
-import XarrowPropTypes from './propTypes';
 import { getPosition } from './utils/GetPosition';
 import { getTotalLength } from './utils';
 
 const log = console.log;
 
 const Xarrow: React.FC<xarrowPropsType> = (props: xarrowPropsType) => {
   // log('xarrow update');
@@ -20,7 +19,7 @@
     lineDashAnimRef: useRef<SVGElement>(null),
     headOpacityAnimRef: useRef<SVGElement>(null),
   });
   const { svgRef, lineRef, headRef, tailRef, lineDrawAnimRef, lineDashAnimRef, headOpacityAnimRef } = mainRef.current;
   useContext(XarrowContext);
   const xProps = useXarrowProps(props, mainRef.current);
   const [propsRefs] = xProps;
@@ -161,9 +160,9 @@
 
       const handleDrawAmimEnd = () => {
         setDrawAnimEnded(true);
         // @ts-ignore
         headOpacityAnimRef.current?.beginElement();
         // @ts-ignore
         lineDashAnimRef.current?.beginElement();
       };
       // Deliberately does not depend on the arrowhead. This listener is what
@@ -222,7 +221,7 @@
               strokeWidth={strokeWidth}
               fill="transparent"
               pointerEvents="visibleStroke"
               {...(passProps as any)}
               {...arrowBodyProps}>
               <>
                 {drawAnimEnded || !animateDrawing ? (
@@ -261,7 +260,7 @@
                 fill={tailColor}
                 pointerEvents="auto"
                 transform={`translate(${xOffsetTail},${yOffsetTail}) rotate(${st.tailOrient}) scale(${st.fTailSize})`}
                 {...(passProps as any)}
                 {...arrowTailProps}>
                 {tailShape.svgElem}
               </g>
@@ -270,13 +269,13 @@
             {/* head of the arrow */}
             {showHead ? (
               <g
                 ref={headRef as any}
                 // d={normalArrowShape}
                 fill={headColor}
                 pointerEvents="auto"
                 transform={`translate(${xOffsetHead},${yOffsetHead}) rotate(${st.headOrient}) scale(${st.fHeadSize})`}
                 opacity={animateDrawing && !drawAnimEnded ? 0 : 1}
                 {...(passProps as any)}
                 {...arrowHeadProps}>
                 {/* No repeatCount: SMIL rejects 0 and logs "Unexpected value 0
                     parsing repeatCount attribute", and the default of a single
@@ -380,9 +379,4 @@
   );
 };
 
-//////////////////////////////
-// propTypes
-
-Xarrow.propTypes = XarrowPropTypes;
-
 export default Xarrow;

src/Xarrow/useXarrowProps.ts

@@ -10,7 +10,6 @@
   xarrowPropsType,
 } from '../types';
 import { getElementByPropGiven, getElemPos, xStr2absRelative } from './utils';
-import _ from 'lodash';
 import { arrowShapes, cAnchorEdge, cArrowShapes } from '../constants';
 import { anchorEdgeType, dimensionType } from '../privateTypes';
 
@@ -136,7 +135,7 @@
 const parseNumWithUpdatePos = (userProp, _, updatePos) => withUpdate(Number(userProp), updatePos);
 const parseNum = (userProp) => Number(userProp);
 
 type ParsePropFunc = (userProp: any, prevProp?: any, updatePos?: any) => any;
 
 const parsePropsFuncs: Required<{ [key in keyof xarrowPropsType]: ParsePropFunc }> = {
   start: (userProp) => getElementByPropGiven(userProp),
@@ -294,24 +293,29 @@
 
 // const parseAllProps = () => parseGivenProps(defaultProps, initialParsedProps);
 
-function deepCompareEquals(a, b) {
-  return _.isEqual(a, b);
-}
+// The only values ever compared here are element positions, which getElemPos
+// always returns as four numbers, including on its null-element branch. A
+// general deep-equality helper (this used to be lodash isEqual) is more than
+// this needs, and would also have to be careful around the refs and React
+// elements that appear elsewhere in the props.
+const samePosition = (a: dimensionType | undefined, b: dimensionType | undefined) => {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.x === b.x && a.y === b.y && a.right === b.right && a.bottom === b.bottom;
+};
 
-function useDeepCompareMemoize(value) {
-  const ref = useRef();
-  // it can be done by using useMemo as well
-  // but useRef is rather cleaner and easier
+function usePositionMemoize(value: dimensionType) {
+  const ref = useRef<dimensionType>();
 
-  if (!deepCompareEquals(value, ref.current)) {
+  if (!samePosition(value, ref.current)) {
     ref.current = value;
   }
 
   return ref.current;
 }
 
-function useDeepCompareEffect(callback, dependencies) {
-  useLayoutEffect(callback, dependencies.map(useDeepCompareMemoize));
+function usePositionEffect(callback: () => void, dependencies: dimensionType[]) {
+  useLayoutEffect(callback, dependencies.map(usePositionMemoize));
 }
 
 /**
@@ -350,14 +354,14 @@
   // rerender whenever position of start element or end element changes
   const [valVars, setValVars] = useState(initialValVars);
   const startPos = getElemPos(propsRefs.start);
-  useDeepCompareEffect(() => {
+  usePositionEffect(() => {
     valVars.startPos = startPos;
     shouldUpdatePosition.current = true;
     setValVars({ ...valVars });
     // console.log('start update pos', startPos);
   }, [startPos]);
   const endPos = getElemPos(propsRefs.end);
-  useDeepCompareEffect(() => {
+  usePositionEffect(() => {
     valVars.endPos = endPos;
     shouldUpdatePosition.current = true;
     setValVars({ ...valVars });

src/Xarrow/utils/GetPosition.tsx

@@ -2,7 +2,6 @@ import { useXarrowPropsResType } from '../useXarrowProps';
 import React from 'react';
 import { calcAnchors } from '../anchors';
 import { getShortestLine, getSvgPos, getTotalLength } from './index';
-import _ from 'lodash';
 import { cPaths } from '../../constants';
 import { buzzierMinSols, bzFunction } from './buzzier';
 
@@ -48,8 +47,8 @@ export const getPosition = (xProps: useXarrowPropsResType, mainRef: React.Mutabl
 
   const startAnchorPosition = chosenStart.anchor.position;
   let endAnchorPosition = chosenEnd.anchor.position;
-  const startPoint = _.pick(chosenStart, ['x', 'y']),
-    endPoint = _.pick(chosenEnd, ['x', 'y']);
+  const startPoint = { x: chosenStart.x, y: chosenStart.y },
+    endPoint = { x: chosenEnd.x, y: chosenEnd.y };
 
   const mainDivPos = getSvgPos(svgRef);
   let cx0 = Math.min(startPoint.x, endPoint.x) - mainDivPos.x;

vite.config.mts

@@ -48,12 +48,11 @@ export default defineConfig({
         ({ es: 'index.mjs', cjs: 'index.cjs', umd: 'index.umd.js' })[format] ?? `index.${format}.js`,
     },
     rollupOptions: {
-      external: ['react', 'prop-types', 'lodash'],
+      // React is the only external left. The package has no runtime
+      // dependencies, so a script-tag consumer needs nothing but React.
+      external: ['react'],
       output: {
-        // lodash is read as `_`, which is the only global lodash actually
-        // defines. The webpack build asked for `root["lodash"]`, which lodash
-        // never sets, so the script-tag path was broken before this.
-        globals: { react: 'React', 'prop-types': 'PropTypes', lodash: '_' },
+        globals: { react: 'React' },
         // The entry mixes a default export with named ones. `named` keeps the
         // default reachable at `.default`, which is what the webpack UMD build
         // already did, so script-tag consumers see no change.