refactor: remove ramda from layout package (#1827)

refactor: remove rambda from layout package

.changeset/dirty-geckos-agree.md

@@ -0,0 +1,7 @@
+---
+'@react-pdf/layout': major
+'@react-pdf/examples': patch
+'@react-pdf/render': patch
+---
+
+refactor: remove ramda from layout package

packages/examples/package.json

@@ -12,8 +12,7 @@
   },
   "dependencies": {
     "@react-pdf/renderer": "^2.0.6",
-    "camelcase": "^6.2.0",
-    "ramda": "^0.27.1"
+    "camelcase": "^6.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.0",

packages/layout/src/utils/asyncCompose.js → packages/fns/asyncCompose.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-await-in-loop */
 
-import * as R from 'ramda';
+import reverse from './reverse';
 
 /**
  * Performs right-to-left function composition with async functions support
@@ -9,7 +9,7 @@ import * as R from 'ramda';
  */
 const asyncCompose = (...fns) => async (value, ...args) => {
   let result = value;
-  const reversedFns = R.reverse(fns);
+  const reversedFns = reverse(fns);
 
   for (let i = 0; i < reversedFns.length; i += 1) {
     const fn = reversedFns[i];

packages/layout/tests/utils/capitalize.test.js → packages/fns/capitalize.test.js

@@ -1,4 +1,4 @@
-import capitalize from '../../src/utils/capitalize';
+import capitalize from './capitalize';
 
 describe('capitalize', () => {
   test('should return undefined for undefined', () => {

packages/fns/mapValues.js

@@ -0,0 +1,10 @@
+const mapValues = (object, fn) => {
+  const entries = Object.entries(object);
+
+  return entries.reduce((acc, [key, value], index) => {
+    acc[key] = fn(value, key, index);
+    return acc;
+  }, {});
+};
+
+export default mapValues;

packages/render/tests/utils/matchPercent.test.js → packages/fns/matchPercent.test.js

@@ -1,4 +1,4 @@
-import matchPercent from '../../src/utils/matchPercent';
+import matchPercent from './matchPercent';
 
 describe('match percent', () => {
   test('should return null for null input', () => {

packages/fns/omit.js

@@ -1,7 +1,13 @@
-const omit = (key, object) => {
+import castArray from './castArray';
+
+const omit = (keys, object) => {
+  const _keys = castArray(keys);
+
   const copy = Object.assign({}, object);
 
-  delete copy[key];
+  _keys.forEach(key => {
+    delete copy[key];
+  });
 
   return copy;
 };

packages/fns/omit.test.js

@@ -3,7 +3,11 @@ import omit from './omit';
 describe('omit', () => {
   const obj = { a: 1, b: 2, c: 3 };
 
-  test('copies an object omitting the listed properties', () => {
+  test('copies an object omitting the listed property', () => {
     expect(omit('a', obj), { b: 2, c: 3 });
   });
+
+  test('copies an object omitting the listed properties', () => {
+    expect(omit(['a', 'c'], obj), { c: 3 });
+  });
 });

packages/fns/pick.js

@@ -0,0 +1,13 @@
+const pick = (keys, obj) => {
+  const result = {};
+
+  for (let i = 0; i < keys.length; i += 1) {
+    const key = keys[i];
+
+    if (key in obj) result[key] = obj[key];
+  }
+
+  return result;
+};
+
+export default pick;

packages/fns/upperFirst.js

@@ -0,0 +1,12 @@
+/**
+ * Capitalize first letter of string
+ *
+ * @param {String} string
+ * @returns {String} capitalized string
+ */
+const upperFirst = value => {
+  if (!value) return value;
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};
+
+export default upperFirst;

packages/layout/tests/utils/upperFirst.test.js → packages/fns/upperFirst.test.js

@@ -1,4 +1,4 @@
-import upperFirst from '../../src/utils/upperFirst';
+import upperFirst from './upperFirst';
 
 describe('upperFirst', () => {
   test('should return undefined for undefined', () => {

packages/layout/package.json

@@ -27,8 +27,7 @@
     "@react-pdf/yoga": "^2.0.4",
     "cross-fetch": "^3.1.5",
     "emoji-regex": "^8.0.0",
-    "queue": "^6.0.1",
-    "ramda": "^0.26.1"
+    "queue": "^6.0.1"
   },
   "devDependencies": {
     "jest-fetch-mock": "^2.1.1"

packages/layout/src/canvas/measureCanvas.js

@@ -1,14 +1,12 @@
 /* eslint-disable no-param-reassign */
 
-import * as R from 'ramda';
-
 import getMargin from '../node/getMargin';
 import getPadding from '../node/getPadding';
 import isHeightAuto from '../page/isHeightAuto';
 
 const SAFETY_HEIGHT = 10;
 
-const getMax = R.reduce(R.max, -Infinity);
+const getMax = values => Math.max(-Infinity, ...values);
 
 /**
  * Helper object to predict canvas size
@@ -21,7 +19,10 @@ const measureCtx = () => {
   const nil = () => ctx;
   const addPoint = (x, y) => points.push([x, y]);
 
-  const moveTo = R.compose(nil, addPoint);
+  const moveTo = (...args) => {
+    addPoint(...args);
+    return ctx;
+  };
 
   const rect = (x, y, w, h) => {
     addPoint(x, y);
@@ -44,7 +45,7 @@ const measureCtx = () => {
 
   const polygon = (...pts) => {
     points.push(...pts);
-    return nil();
+    return ctx;
   };
 
   // Change dimensions
@@ -87,9 +88,8 @@ const measureCtx = () => {
   ctx.linearGradient = nil;
   ctx.radialGradient = nil;
 
-  ctx.getWidth = () => R.compose(getMax, R.pluck(0))(points);
-
-  ctx.getHeight = () => R.compose(getMax, R.pluck(1))(points);
+  ctx.getWidth = () => getMax(points.map(p => p[0]));
+  ctx.getHeight = () => getMax(points.map(p => p[1]));
 
   return ctx;
 };
@@ -105,7 +105,7 @@ const measureCtx = () => {
  * @param {Number} heightMode
  * @returns {Object} canvas width and height
  */
-const measureCanvas = (page, node) => {
+const measureCanvas = (page, node) => () => {
   const imageMargin = getMargin(node);
   const pagePadding = getPadding(page);
   const pageArea = isHeightAuto(page)
@@ -127,4 +127,4 @@ const measureCanvas = (page, node) => {
   return { height, width };
 };
 
-export default R.curryN(6, measureCanvas);
+export default measureCanvas;

packages/layout/src/image/measureImage.js

@@ -1,4 +1,3 @@
-import * as R from 'ramda';
 import Yoga from '@react-pdf/yoga';
 
 import getRatio from './getRatio';
@@ -19,7 +18,7 @@ const SAFETY_HEIGHT = 10;
  * @param {Number} heightMode
  * @returns {Object} image width and height
  */
-const measureImage = (page, node, width, widthMode, height, heightMode) => {
+const measureImage = (page, node) => (width, widthMode, height, heightMode) => {
   const imageRatio = getRatio(node);
   const imageMargin = getMargin(node);
   const pagePadding = getPadding(page);
@@ -79,4 +78,4 @@ const measureImage = (page, node, width, widthMode, height, heightMode) => {
   return { height, width };
 };
 
-export default R.curryN(6, measureImage);
+export default measureImage;

packages/layout/src/index.js

@@ -1,6 +1,4 @@
-// import * as R from 'ramda';
-
-import asyncCompose from './utils/asyncCompose';
+import asyncCompose from '../../fns/asyncCompose';
 import resolveSvg from './steps/resolveSvg';
 import resolveZIndex from './steps/resolveZIndex';
 import resolveAssets from './steps/resolveAssets';
@@ -16,9 +14,6 @@ import resolvePercentRadius from './steps/resolvePercentRadius';
 import resolvePercentHeight from './steps/resolvePercentHeight';
 import resolveLinkSubstitution from './steps/resolveLinkSubstitution';
 
-// const startTimer = name => R.tap(() => console.time(name));
-// const endTimer = name => R.tap(() => console.timeEnd(name));
-
 const layout = asyncCompose(
   resolveZIndex,
   resolveOrigins,

packages/layout/src/node/createInstance.js

@@ -1,13 +1,10 @@
-import * as R from 'ramda';
 import { TextInstance } from '@react-pdf/primitives';
 
-import castArray from '../utils/castArray';
+import castArray from '../../../fns/castArray';
 
-const isString = R.is(String);
+const isString = value => typeof value === 'string';
 
-const isNumber = R.is(Number);
-
-const isNotString = R.complement(isString);
+const isNumber = value => typeof value === 'number';
 
 /**
  * Transforms a react element instance to internal element format
@@ -21,15 +18,15 @@ const createInstance = element => {
   if (isString(element) || isNumber(element))
     return { type: TextInstance, value: `${element}` };
 
-  if (isNotString(element.type))
+  if (!isString(element.type))
     return createInstance(element.type(element.props));
 
   const {
     type,
     props: { style = {}, children = [], ...props },
   } = element;
 
-  const nextChildren = R.compose(R.map(createInstance), castArray)(children);
+  const nextChildren = castArray(children).map(createInstance);
 
   return {
     type,

packages/layout/src/node/getNodesHeight.js

@@ -1,5 +1,3 @@
-import * as R from 'ramda';
-
 /**
  * Get many nodes height
  *
@@ -10,7 +8,7 @@ const getNodesHeight = nodes => {
   let max = 0;
   let min = Infinity;
 
-  if (R.isEmpty(nodes)) return 0;
+  if (!nodes || nodes.length === 0) return 0;
 
   for (let i = 0; i < nodes.length; i += 1) {
     const node = nodes[i];

packages/layout/src/node/getOrigin.js

@@ -1,8 +1,8 @@
-import * as R from 'ramda';
+import isNil from '../../../fns/isNil';
+import matchPercent from '../../../fns/matchPercent';
 
-import matchPercent from '../utils/matchPercent';
-
-const getTransformStyle = s => R.pathOr('50%', ['style', s]);
+const getTransformStyle = s => node =>
+  isNil(node.style?.[s]) ? '50%' : node.style?.[s];
 
 /**
  * Get node origin

packages/layout/src/node/getWrap.js

@@ -1,20 +1,13 @@
-import * as R from 'ramda';
 import * as P from '@react-pdf/primitives';
 
-const isType = R.propEq('type');
+import isNil from '../../../fns/isNil';
 
-const isSvg = isType(P.Svg);
+const NON_WRAP_TYPES = [P.Svg, P.Note, P.Image, P.Canvas];
 
-const isNote = isType(P.Note);
+const getWrap = node => {
+  if (NON_WRAP_TYPES.includes(node.type)) return false;
 
-const isImage = isType(P.Image);
-
-const isCanvas = isType(P.Canvas);
-
-const getWrap = R.ifElse(
-  R.anyPass([isSvg, isNote, isImage, isCanvas]),
-  R.always(false),
-  R.pathOr(true, ['props', 'wrap']),
-);
+  return isNil(node.props?.wrap) ? true : node.props.wrap;
+};
 
 export default getWrap;

packages/layout/src/node/isFixed.js

@@ -1,5 +1,3 @@
-import * as R from 'ramda';
-
-const isFixed = R.pathEq(['props', 'fixed'], true);
+const isFixed = node => node.props?.fixed === true;
 
 export default isFixed;

packages/layout/src/node/removePaddings.js

@@ -1,22 +1,29 @@
-import * as R from 'ramda';
-
 import setPadding from './setPadding';
+import omit from '../../../fns/omit';
+
+const PADDING_PROPS = [
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+];
 
 /**
  * Removes padding on node
  *
  * @param {Object} node
  * @returns {Object} node without padding
  */
-const removePaddings = R.compose(
-  setPadding(0),
-  R.dissocPath(['style', 'padding']),
-  R.dissocPath(['style', 'paddingTop']),
-  R.dissocPath(['style', 'paddingRight']),
-  R.dissocPath(['style', 'paddingBottom']),
-  R.dissocPath(['style', 'paddingLeft']),
-  R.dissocPath(['style', 'paddingHorizontal']),
-  R.dissocPath(['style', 'paddingVertical']),
-);
+const removePaddings = node => {
+  const style = omit(PADDING_PROPS, node.style || {});
+  const newNode = Object.assign({}, node, { style });
+
+  setPadding(0)(newNode);
+
+  return newNode;
+};
 
 export default removePaddings;