refactor: remove ramda from render (#1834)

diegomura · May 29, 2022 · 7e97bb5 · 7e97bb5
1 parent 1f38d3f
commit 7e97bb5
Show file tree

Hide file tree

Showing 72 changed files with 405 additions and 1,055 deletions.
diff --git a/.changeset/strange-dodos-happen.md b/.changeset/strange-dodos-happen.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/render': major
+---
+
+refactor: remove ramda from render package
diff --git a/packages/render/package.json b/packages/render/package.json
@@ -25,7 +25,6 @@
     "color-string": "^1.5.3",
     "normalize-svg-path": "^1.1.0",
     "parse-svg-path": "^0.1.2",
-    "ramda": "^0.26.1",
     "svg-arc-to-cubic-bezier": "^3.2.0"
   },
   "files": [

diff --git a/packages/render/src/index.js b/packages/render/src/index.js
@@ -1,14 +1,12 @@
 import renderNode from './primitives/renderNode';
 import addMetadata from './operations/addMetadata';
 
-const renderDocument = ctx => doc => {
+const render = (ctx, doc) => {
   const pages = doc.children || [];
-  pages.forEach(renderNode(ctx));
-};
 
-const render = (ctx, doc) => {
-  addMetadata(ctx)(doc);
-  renderDocument(ctx)(doc);
+  addMetadata(ctx, doc);
+
+  pages.forEach(page => renderNode(ctx, page));
 
   ctx.end();
 

diff --git a/packages/render/src/operations/addMetadata.js b/packages/render/src/operations/addMetadata.js
@@ -1,10 +1,5 @@
 /* eslint-disable no-param-reassign */
 
-import * as R from 'ramda';
-
-const getDocumentProp = target => (or, prop) =>
-  R.pathOr(or, ['props', prop], target);
-
 const setPDFMetadata = target => (key, value) => {
   if (value) target.info[key] = value;
 };
@@ -16,24 +11,22 @@ const setPDFMetadata = target => (key, value) => {
  * @param {Object} doc document root
  */
 const addMetadata = (ctx, doc) => {
-  const getProp = getDocumentProp(doc);
   const setProp = setPDFMetadata(ctx);
 
-  const title = getProp(null, 'title');
-  const author = getProp(null, 'author');
-  const subject = getProp(null, 'subject');
-  const keywords = getProp(null, 'keywords');
-  const creator = getProp('react-pdf', 'creator');
-  const producer = getProp('react-pdf', 'producer');
+  const props = doc.props || {};
+  const title = props.title || null;
+  const author = props.author || null;
+  const subject = props.subject || null;
+  const keywords = props.keywords || null;
+  const creator = props.creator || 'react-pdf';
+  const producer = props.producer || 'react-pdf';
 
   setProp('Title', title);
   setProp('Author', author);
   setProp('Subject', subject);
   setProp('Keywords', keywords);
   setProp('Creator', creator);
   setProp('Producer', producer);
-
-  return doc;
 };
 
-export default R.curryN(2, addMetadata);
+export default addMetadata;
diff --git a/packages/render/src/operations/clipNode.js b/packages/render/src/operations/clipNode.js
@@ -1,11 +1,9 @@
-import * as R from 'ramda';
-
 // This constant is used to approximate a symmetrical arc using a cubic
 // Bezier curve.
 const KAPPA = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
 
 const clipNode = (ctx, node) => {
-  if (!node.style) return node;
+  if (!node.style) return;
 
   const { top, left, width, height } = node.box;
 
@@ -67,8 +65,6 @@ const clipNode = (ctx, node) => {
   ctx.bezierCurveTo(left, top + ctl, left + ctl, top, left + rtl, top);
   ctx.closePath();
   ctx.clip();
-
-  return node;
 };
 
-export default R.curryN(2, clipNode);
+export default clipNode;
diff --git a/packages/render/src/operations/restore.js b/packages/render/src/operations/restore.js
diff --git a/packages/render/src/operations/save.js b/packages/render/src/operations/save.js
diff --git a/packages/render/src/operations/setDestination.js b/packages/render/src/operations/setDestination.js
@@ -1,11 +1,7 @@
-import * as R from 'ramda';
-
 const setDestination = (ctx, node) => {
   if (node.props?.id) {
     ctx.addNamedDestination(node.props.id, 'XYZ', null, node.box.top, null);
   }
+};
 
-  return node;
-}
-
-export default R.curryN(2, setDestination);
+export default setDestination;
diff --git a/packages/render/src/operations/setLink.js b/packages/render/src/operations/setLink.js
@@ -1,17 +1,9 @@
-import * as R from 'ramda';
-
-const DEST_REGEXP = /^#.+/;
-
-const isSrcId = R.test(DEST_REGEXP);
-
-const getSource = node => {
-  const props = node.props || {};
-  return props.src || props.href;
-};
+const isSrcId = value => /^#.+/.test(value);
 
 const setLink = (ctx, node) => {
+  const props = node.props || {};
   const { top, left, width, height } = node.box;
-  const src = getSource(node);
+  const src = props.src || props.href;
 
   if (src) {
     const isId = isSrcId(src);
@@ -20,8 +12,6 @@ const setLink = (ctx, node) => {
 
     ctx[method](left, top, width, height, value);
   }
-
-  return node;
 };
 
-export default R.curryN(2, setLink);
+export default setLink;
diff --git a/packages/render/src/operations/transform.js b/packages/render/src/operations/transform.js
@@ -1,5 +1,3 @@
-import * as R from 'ramda';
-
 // TODO: Implement using only matrices to support skew and even more operations than css.
 
 const applySingleTransformation = (ctx, transform, origin) => {
@@ -36,16 +34,14 @@ const applySingleTransformation = (ctx, transform, origin) => {
 };
 
 const applyTransformations = (ctx, node) => {
-  if (!node.origin) return node;
+  if (!node.origin) return;
 
   const origin = [node.origin.left, node.origin.top];
   const operations = node.style?.transform || node.props?.transform || [];
 
   operations.forEach(operation => {
     applySingleTransformation(ctx, operation, origin);
   });
-
-  return node;
 };
 
-export default R.curryN(2, applyTransformations);
+export default applyTransformations;
diff --git a/packages/render/src/primitives/renderBackground.js b/packages/render/src/primitives/renderBackground.js
@@ -1,38 +1,29 @@
-import * as R from 'ramda';
-
-import save from '../operations/save';
-import restore from '../operations/restore';
 import clipNode from '../operations/clipNode';
 import parseColor from '../utils/parseColor';
+import isNil from '../../../fns/isNil';
 
 const drawBackground = (ctx, node) => {
-  if (node.box && node.style.backgroundColor) {
-    const { top, left, width, height } = node.box;
-    const color = parseColor(node.style.backgroundColor);
-    const nodeOpacity = R.isNil(node.style?.opacity) ? 1 : node.style.opacity;
-    const opacity = Math.min(color.opacity, nodeOpacity);
-
-    ctx
-      .fillOpacity(opacity)
-      .fillColor(color.value)
-      .rect(left, top, width, height)
-      .fill();
-  }
-
-  return node;
+  const { top, left, width, height } = node.box;
+  const color = parseColor(node.style.backgroundColor);
+  const nodeOpacity = isNil(node.style?.opacity) ? 1 : node.style.opacity;
+  const opacity = Math.min(color.opacity, nodeOpacity);
+
+  ctx
+    .fillOpacity(opacity)
+    .fillColor(color.value)
+    .rect(left, top, width, height)
+    .fill();
 };
 
 const renderBackground = (ctx, node) => {
   const hasBackground = !!node.box && !!node.style?.backgroundColor;
 
   if (hasBackground) {
-    save(ctx, node);
+    ctx.save();
     clipNode(ctx, node);
     drawBackground(ctx, node);
-    restore(ctx, node);
+    ctx.restore();
   }
-
-  return node;
 };
 
-export default R.curryN(2, renderBackground);
+export default renderBackground;
diff --git a/packages/render/src/primitives/renderBorders.js b/packages/render/src/primitives/renderBorders.js
@@ -1,5 +1,3 @@
-import * as R from 'ramda';
-
 // Ref: https://www.w3.org/TR/css-backgrounds-3/#borders
 
 // This constant is used to approximate a symmetrical arc using a cubic Bezier curve.
@@ -604,7 +602,7 @@ const shouldRenderBorders = node =>
     node.box.borderLeftWidth);
 
 const renderBorders = (ctx, node) => {
-  if (!shouldRenderBorders(node)) return node;
+  if (!shouldRenderBorders(node)) return;
 
   const {
     width,
@@ -687,8 +685,6 @@ const renderBorders = (ctx, node) => {
   }
 
   ctx.restore();
-
-  return node;
 };
 
-export default R.curryN(2, renderBorders);
+export default renderBorders;
diff --git a/packages/render/src/primitives/renderCanvas.js b/packages/render/src/primitives/renderCanvas.js
@@ -1,5 +1,3 @@
-import * as R from 'ramda';
-
 const availableMethods = [
   'dash',
   'clip',
@@ -52,15 +50,13 @@ const painter = ctx => {
   return p;
 };
 
-const defaultsZero = R.propOr(0);
-
 const renderCanvas = (ctx, node) => {
   const { top, left, width, height } = node.box;
 
-  const paddingTop = defaultsZero('paddingTop', node.box);
-  const paddingLeft = defaultsZero('paddingLeft', node.box);
-  const paddingRight = defaultsZero('paddingRight', node.box);
-  const paddingBottom = defaultsZero('paddingBottom', node.box);
+  const paddingTop = node.box.paddingTop || 0;
+  const paddingLeft = node.box.paddingLeft || 0;
+  const paddingRight = node.box.paddingRight || 0;
+  const paddingBottom = node.box.paddingBottom || 0;
 
   const availableWidth = width - paddingLeft - paddingRight;
   const availableHeight = height - paddingTop - paddingBottom;
@@ -78,8 +74,6 @@ const renderCanvas = (ctx, node) => {
   }
 
   ctx.restore();
-
-  return node;
 };
 
-export default R.curryN(2, renderCanvas);
+export default renderCanvas;
diff --git a/packages/render/src/primitives/renderCircle.js b/packages/render/src/primitives/renderCircle.js
@@ -1,17 +1,11 @@
-import * as R from 'ramda';
-
 import { drawEllipse } from './renderEllipse';
 
-const getProp = (p, v) => R.path(['props', p], v);
-
 const renderCircle = (ctx, node) => {
-  const cx = getProp('cx', node);
-  const cy = getProp('cy', node);
-  const r = getProp('r', node);
+  const cx = node.props?.cx;
+  const cy = node.props?.cy;
+  const r = node.props?.r;
 
   drawEllipse(ctx, cx, cy, r, r);
-
-  return node;
 };
 
-export default R.curryN(2, renderCircle);
+export default renderCircle;