From 68c84b57d08b93ee3735e33f737bf6058843420a Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Tue, 6 Oct 2020 08:32:39 -0700 Subject: [PATCH] Code formatting updates. --- foundations-high-performance-react.org | 28 +++++++++++++++-------- manuscript/putting-it-all-together.markua | 10 +++++--- manuscript/reconciliation.markua | 18 ++++++++++----- 3 files changed, 38 insertions(+), 18 deletions(-) diff --git a/foundations-high-performance-react.org b/foundations-high-performance-react.org index 37cb160..9d9259c 100644 --- a/foundations-high-performance-react.org +++ b/foundations-high-performance-react.org @@ -501,7 +501,8 @@ tree, keyed by the ~container~. const renderTrees = {}; function render(element, container) { const tree = - render_internal(element, container, renderTrees[container]); + render_internal(element, container, + renderTrees[container]); // render complete, store the updated tree renderTrees[container] = tree; } @@ -538,9 +539,11 @@ function render_internal(element, container, prevElement) { domElement = createDOMElement(element); } setDOMProps(element, domElement, prevElement); - children = renderChildren(element, domElement, prevElement); + children = + renderChildren(element, domElement, prevElement); - if (!prevElement || domElement !== prevElement.domElement) { + if (!prevElement || + domElement !== prevElement.domElement) { container.appendChild(domElement); } @@ -642,16 +645,19 @@ position is passed to ~render_internal~, or ~undefined~ if there is no corresponding element, like when the list of children has grown. #+BEGIN_SRC javascript -function renderChildren(element, domElement, prevElement = { props: { children: [] }}) { +function renderChildren(element, domElement, + prevElement = { props: { children: [] }}) { const elementLen = element.props.children.length; const prevElementLen = prevElement.props.children.length; // remove now unused elements - for (let i = elementLen; i < prevElementLen - elementLen; i++) { + for (let i = elementLen; i < prevElementLen - elementLen; + i++) { removeDOMElement(element.props.children[i]); } // render existing and new elements return element.props.children.map((child, i) => { - const prevChild = i < prevElementLen ? prevElement.props.children[i] : undefined; + const prevChild = i < prevElementLen ? + prevElement.props.children[i] : undefined; return render_internal(child, domElement, prevChild); }); } @@ -729,12 +735,15 @@ const SayNow = ({ dateTime }) => { const App = () => { return ['div', { 'className': 'header' }, [SayNow({ dateTime: new Date() }), - ['input', { 'type': 'submit', 'disabled': 'disabled' }, []] + ['input', + { 'type': 'submit', 'disabled': 'disabled' }, + []] ] ]; } -render(createElement(App()), document.getElementById('root')); +render(createElement(App()), + document.getElementById('root')); #+END_SRC We are creating two components, that output JSM, as we defined it @@ -748,7 +757,8 @@ The next step is to call render multiple times. #+BEGIN_SRC javascript setInterval(() => - render(createElement(App()), document.getElementById('root')), + render(createElement(App()), + document.getElementById('root')), 1000); #+END_SRC diff --git a/manuscript/putting-it-all-together.markua b/manuscript/putting-it-all-together.markua index 10951e3..3a3f726 100644 --- a/manuscript/putting-it-all-together.markua +++ b/manuscript/putting-it-all-together.markua @@ -11,12 +11,15 @@ const SayNow = ({ dateTime }) => { const App = () => { return ['div', { 'className': 'header' }, [SayNow({ dateTime: new Date() }), - ['input', { 'type': 'submit', 'disabled': 'disabled' }, []] + ['input', + { 'type': 'submit', 'disabled': 'disabled' }, + []] ] ]; } -render(createElement(App()), document.getElementById('root')); +render(createElement(App()), + document.getElementById('root')); ``` We are creating two components, that output JSM, as we defined it earlier. We create one component prop for the `SayNow` component: `dateTime`. It gets passed from the `App` component. The `SayNow` component prints out the `DateTime` passed in to it. You might notice that we are passing props the same way one does in the real React, and it just works! @@ -26,7 +29,8 @@ The next step is to call render multiple times. {format: "javascript"} ``` setInterval(() => - render(createElement(App()), document.getElementById('root')), + render(createElement(App()), + document.getElementById('root')), 1000); ``` diff --git a/manuscript/reconciliation.markua b/manuscript/reconciliation.markua index da2f9ce..c2eea6b 100644 --- a/manuscript/reconciliation.markua +++ b/manuscript/reconciliation.markua @@ -46,7 +46,8 @@ Here we begin by adding a global object that will store our last render tree, ke const renderTrees = {}; function render(element, container) { const tree = - render_internal(element, container, renderTrees[container]); + render_internal(element, container, + renderTrees[container]); // render complete, store the updated tree renderTrees[container] = tree; } @@ -72,9 +73,11 @@ function render_internal(element, container, prevElement) { domElement = createDOMElement(element); } setDOMProps(element, domElement, prevElement); - children = renderChildren(element, domElement, prevElement); + children = + renderChildren(element, domElement, prevElement); - if (!prevElement || domElement !== prevElement.domElement) { + if (!prevElement || + domElement !== prevElement.domElement) { container.appendChild(domElement); } @@ -144,16 +147,19 @@ For rendering children we use two loops. The first loop removes any elements tha {format: "javascript"} ``` -function renderChildren(element, domElement, prevElement = { props: { children: [] }}) { +function renderChildren(element, domElement, + prevElement = { props: { children: [] }}) { const elementLen = element.props.children.length; const prevElementLen = prevElement.props.children.length; // remove now unused elements - for (let i = elementLen; i < prevElementLen - elementLen; i++) { + for (let i = elementLen; i < prevElementLen - elementLen; + i++) { removeDOMElement(element.props.children[i]); } // render existing and new elements return element.props.children.map((child, i) => { - const prevChild = i < prevElementLen ? prevElement.props.children[i] : undefined; + const prevChild = i < prevElementLen ? + prevElement.props.children[i] : undefined; return render_internal(child, domElement, prevChild); }); }