Formatting updates.

foundations-high-performance-react.org

@@ -12,6 +12,7 @@
 
 #+TITLE: Foundations of High-Performance React Applications
 #+AUTHOR: Thomas Hintz
+#+EXCLUDE_TAGS: noexport
 
 #+startup: indent
 #+tags: noexport sample frontmatter mainmatter backmatter
@@ -196,7 +197,8 @@ This is what I'm thinking:
 #+BEGIN_SRC javascript
 ['div', { 'className': 'header' },
    [['h1', {}, ['Hello']],
-    ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
+    ['input', { 'type': 'submit', 'disabled': 'disabled' },
+     []]
    ]
 ]
 #+END_SRC
@@ -380,7 +382,8 @@ function render(element, container) {
      .forEach((key) => domElement[key] = props[key]);
 
    // render its children
-    props.children.forEach((child) => render(child, domElement));
+   props.children.forEach((child) =>
+      render(child, domElement));
 
    // add our tree to the DOM!
    container.appendChild(domElement);
@@ -464,13 +467,13 @@ from the current tree and ~prevElement~ is the corresponding element
 in the tree from the previous render.
 
 #+BEGIN_SRC javascript
-    if (!element && prevElement)
+if (!element && prevElement)
    // delete dom element
-    else if (element && !prevElement)
+else if (element && !prevElement)
    // add new dom element, render children
-    else if (element.type === prevElement.type)
+else if (element.type === prevElement.type)
    // update dom element, render children
-    else if (element.type !== prevElement.type)
+else if (element.type !== prevElement.type)
    // replace dom element, render children
 #+END_SRC
 
@@ -719,19 +722,19 @@ At this point the only thing left to do is to create some components
 and use them!
 
 #+BEGIN_SRC javascript
-  const SayNow = ({ dateTime }) => {
+const SayNow = ({ dateTime }) => {
    return ['h1', {}, [`It is: ${dateTime}`]];
-  };
+};
 
-  const App = () => {
+const App = () => {
    return ['div', { 'className': 'header' },
            [SayNow({ dateTime: new Date() }),
             ['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
@@ -787,7 +790,7 @@ cause of a performance bottleneck? Or how do you use the React APIs in
 a performant way? These types of questions should be easier to track
 down and understand with the foundations covered and I hope this is
 only the start of your High-Performance React journey.
-* Image Test
+* Image Test                                                       :noexport:
 :PROPERTIES:
 :EXPORT_FILE_NAME: manuscript/image-test.markua
 :END:

manuscript/Book.txt

@@ -10,4 +10,3 @@ reconciliation.markua
 fibers.markua
 putting-it-all-together.markua
 conclusion.markua
-image-test.markua

manuscript/markup-in-javascript---jsx-.markua

@@ -34,7 +34,8 @@ This is what I'm thinking:
 ```
 ['div', { 'className': 'header' },
    [['h1', {}, ['Hello']],
-    ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
+    ['input', { 'type': 'submit', 'disabled': 'disabled' },
+     []]
    ]
 ]
 ```

manuscript/render.markua

@@ -42,7 +42,8 @@ function render(element, container) {
      .forEach((key) => domElement[key] = props[key]);
 
    // render its children
-    props.children.forEach((child) => render(child, domElement));
+   props.children.forEach((child) =>
+      render(child, domElement));
 
    // add our tree to the DOM!
    container.appendChild(domElement);