Code formatting updates.

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
 

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);
 ```
 

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);
    });
 }