fix for dynamic image render

.changeset/many-ads-share.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': minor
+---
+
+fix dynamic image render

packages/layout/package.json

@@ -29,6 +29,7 @@
  "@react-pdf/yoga": "^4.1.2",
  "cross-fetch": "^3.1.5",
  "emoji-regex": "^10.2.1",
+ "lodash.flatten": "^4.4.0",
  "queue": "^6.0.1"
  },
  "devDependencies": {

packages/layout/src/node/createInstances.js

@@ -1,10 +1,15 @@
 import { castArray } from '@react-pdf/fns';
-import { TextInstance } from '@react-pdf/primitives';
+import { TextInstance, Image } from '@react-pdf/primitives';
+import flatten from 'lodash.flatten';
+
+import fetchImage from '../image/fetchImage';
 
 const isString = value => typeof value === 'string';
 
 const isNumber = value => typeof value === 'number';
 
+const isImage = value => value.type === Image;
+
 const isFragment = value =>
  value && value.type === Symbol.for('react.fragment');
 
@@ -16,7 +21,7 @@ const isFragment = value =>
  * @param {Object} React element
  * @returns {Array} parsed react elements
  */
-const createInstances = element => {
+const createInstances = async element => {
  if (!element) return [];
 
  if (isString(element) || isNumber(element)) {
@@ -34,16 +39,21 @@ const createInstances = element => {
  if (!isString(element.type)) {
  return createInstances(element.type(element.props));
  }
-
  const {
  type,
  props: { style = {}, children = [], ...props },
  } = element;
 
- const nextChildren = castArray(children).reduce(
- (acc, child) => acc.concat(createInstances(child)),
- [],
+ if (isImage(element)) {
+ const node = { props, type, style, box: {} };
+ await fetchImage(node);
+ return [node];
+ }
+
+ const instances = await Promise.all(
+ castArray(children).map(child => createInstances(child)),
  );
+ const nextChildren = flatten(instances);
 
  return [
  {

packages/layout/src/steps/resolvePagination.js

@@ -147,44 +147,51 @@ const shouldResolveDynamicNodes = node => {
  return isDynamic(node) || children.some(shouldResolveDynamicNodes);
 };
 
-const resolveDynamicNodes = (props, node) => {
+const resolveDynamicNodes = async (props, node) => {
  const isNodeDynamic = isDynamic(node);
 
  // Call render prop on dynamic nodes and append result to children
- const resolveChildren = (children = []) => {
+ const resolveChildren = async (children = []) => {
  if (isNodeDynamic) {
- const res = node.props.render(props);
- return createInstances(res)
- .filter(Boolean)
- .map(n => resolveDynamicNodes(props, n));
+ const dynamicRenderResult = node.props.render(props);
+ const dynamicInstances = await createInstances(dynamicRenderResult);
+ const resolvedDynamicNodes = await Promise.all(
+ dynamicInstances
+ .filter(Boolean)
+ .map(n => resolveDynamicNodes(props, n)),
+ );
+ return resolvedDynamicNodes;
  }
 
- return children.map(c => resolveDynamicNodes(props, c));
+ const resolvedChildren = await Promise.all(
+ children.map(c => resolveDynamicNodes(props, c)),
+ );
+ return resolvedChildren;
  };
 
  // We reset dynamic text box so it can be computed again later on
  const resetHeight = isNodeDynamic && isText(node);
  const box = resetHeight ? { ...node.box, height: 0 } : node.box;
 
- const children = resolveChildren(node.children);
+ const children = await resolveChildren(node.children);
  const lines = isNodeDynamic ? null : node.lines;
 
  return Object.assign({}, node, { box, lines, children });
 };
 
-const resolveDynamicPage = (props, page, fontStore) => {
+const resolveDynamicPage = async (props, page, fontStore) => {
  if (shouldResolveDynamicNodes(page)) {
- const resolvedPage = resolveDynamicNodes(props, page);
+ const resolvedPage = await resolveDynamicNodes(props, page);
  return relayoutPage(resolvedPage, fontStore);
  }
 
  return page;
 };
 
-const splitPage = (page, pageNumber, fontStore) => {
+const splitPage = async (page, pageNumber, fontStore) => {
  const wrapArea = getWrapArea(page);
  const contentArea = getContentArea(page);
- const dynamicPage = resolveDynamicPage({ pageNumber }, page, fontStore);
+ const dynamicPage = await resolveDynamicPage({ pageNumber }, page, fontStore);
  const height = page.style.height;
 
  const [currentChilds, nextChilds] = splitNodes(
@@ -217,7 +224,7 @@ const splitPage = (page, pageNumber, fontStore) => {
  return [currentPage, nextPage];
 };
 
-const resolvePageIndices = (fontStore, page, pageNumber, pages) => {
+const resolvePageIndices = async (fontStore, page, pageNumber, pages) => {
  const totalPages = pages.length;
 
  const props = {
@@ -242,18 +249,23 @@ const dissocSubPageData = page => {
  return omit(['subPageNumber', 'subPageTotalPages'], page);
 };
 
-const paginate = (page, pageNumber, fontStore) => {
+const paginate = async (page, pageNumber, fontStore) => {
  if (!page) return [];
 
  if (page.props?.wrap === false) return [page];
 
- let splittedPage = splitPage(page, pageNumber, fontStore);
+ let splittedPage = await splitPage(page, pageNumber, fontStore);
 
  const pages = [splittedPage[0]];
  let nextPage = splittedPage[1];
 
  while (nextPage !== null) {
- splittedPage = splitPage(nextPage, pageNumber + pages.length, fontStore);
+ // eslint-disable-next-line no-await-in-loop
+ splittedPage = await splitPage(
+ nextPage,
+ pageNumber + pages.length,
+ fontStore,
+ );
 
  pages.push(splittedPage[0]);
  nextPage = splittedPage[1];
@@ -270,24 +282,27 @@ const paginate = (page, pageNumber, fontStore) => {
  * @param {Object} fontStore font store
  * @returns {Object} layout node
  */
-const resolvePagination = (doc, fontStore) => {
+const resolvePagination = async (doc, fontStore) => {
  let pages = [];
  let pageNumber = 1;
 
- for (let i = 0; i < doc.children.length; i += 1) {
-  const page = doc.children[i];
- let subpages = paginate(page, pageNumber, fontStore);
-
+ // eslint-disable-next-line no-restricted-syntax
+ for (const page of doc.children) {
+ // eslint-disable-next-line no-await-in-loop
+ let subpages = await paginate(page, pageNumber, fontStore);
  subpages = assocSubPageData(subpages);
  pageNumber += subpages.length;
  pages = pages.concat(subpages);
  }
 
- pages = pages.map((...args) =>
- dissocSubPageData(resolvePageIndices(fontStore, ...args)),
- );
-
- return assingChildren(pages, doc);
+ const nextPages = [];
+ // eslint-disable-next-line no-restricted-syntax
+ for (const [index, page] of pages.entries()) {
+ // eslint-disable-next-line no-await-in-loop
+ const indices = await resolvePageIndices(fontStore, page, index, pages);
+ nextPages.push(dissocSubPageData(indices));
+ }
+ return assingChildren(nextPages, doc);
 };
 
 export default resolvePagination;