From ede731e3a50733684dc550a2f103dab3d0418e03 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 24 Nov 2023 01:35:06 -0500 Subject: [PATCH 1/3] Add "BrewPage" component which updates only when needed --- client/homebrew/brewRenderer/brewRenderer.jsx | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 51921c8ca..d73a5082f 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -19,6 +19,21 @@ const Themes = require('themes/themes.json'); const PAGE_HEIGHT = 1056; const PPR_THRESHOLD = 50; +const BrewPage = createClass({ + displayName : `BrewPage`, + getDefaultProps : function() { + return { + contents : '', + index : 0 + } + }, + render : function() { + return
+
+
+ } +}); + const BrewRenderer = createClass({ displayName : 'BrewRenderer', getDefaultProps : function() { @@ -57,6 +72,7 @@ const BrewRenderer = createClass({ }, height : 0, lastRender :
, + renderedPages : [], componentWillUnmount : function() { window.removeEventListener('resize', this.updateSize); @@ -152,23 +168,21 @@ const BrewRenderer = createClass({ return
; else { cleanPageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) + const html = Markdown.render(cleanPageText); return ( -
-
-
+ ); } }, renderPages : function(){ if(this.state.usePPR){ - return _.map(this.state.pages, (page, index)=>{ - if(this.shouldRender(page, index) && typeof window !== 'undefined'){ - return this.renderPage(page, index); - } else { - return this.renderDummyPage(index); + _.forEach(this.state.pages, (page, index)=>{ + if((this.shouldRender(page, index) || !this.renderedPages[index]) && typeof window !== 'undefined'){ + this.renderedPages[index] = this.renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range } }); + return this.renderedPages; } if(this.props.errors && this.props.errors.length) return this.lastRender; this.lastRender = _.map(this.state.pages, (page, index)=>{ From 045fbbe1582fafbe1d7f245c19b4df6bfa313968 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 24 Nov 2023 01:36:04 -0500 Subject: [PATCH 2/3] lint --- client/homebrew/brewRenderer/brewRenderer.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index d73a5082f..f2771c359 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -20,17 +20,17 @@ const PAGE_HEIGHT = 1056; const PPR_THRESHOLD = 50; const BrewPage = createClass({ - displayName : `BrewPage`, + displayName : `BrewPage`, getDefaultProps : function() { return { contents : '', - index : 0 - } + index : 0 + }; }, render : function() { return
-
+
; } }); @@ -70,8 +70,8 @@ const BrewRenderer = createClass({
` }; }, - height : 0, - lastRender :
, + height : 0, + lastRender :
, renderedPages : [], componentWillUnmount : function() { From 93a7b110176b68f786b76b9b694c980e5e44a4c9 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Sat, 25 Nov 2023 23:23:39 -0500 Subject: [PATCH 3/3] Simplify "BrewPage" into Functional Component --- client/homebrew/brewRenderer/brewRenderer.jsx | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index f2771c359..1cd2a301e 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -19,20 +19,16 @@ const Themes = require('themes/themes.json'); const PAGE_HEIGHT = 1056; const PPR_THRESHOLD = 50; -const BrewPage = createClass({ - displayName : `BrewPage`, - getDefaultProps : function() { - return { - contents : '', - index : 0 - }; - }, - render : function() { - return
-
-
; - } -}); +const BrewPage = (props)=>{ + props = { + contents : '', + index : 0, + ...props + }; + return
+
+
; +}; const BrewRenderer = createClass({ displayName : 'BrewRenderer',