prettydiff - npm Package Compare versions

Comparing version 100.2.6 to 100.2.7

api/optionDef.ts

@@ -462,3 +462,3 @@ /*global global*/
             api       : "any",
-            default   : "3",
+            default   : 3,
             definition: "When to break consecutively chained methods and properties onto separate lines. " +
@@ -472,2 +472,11 @@ "A negative value disables this option. A value of 0 ensures method chains are ne" +
         },
+        minify_keep_comments : {
+            api       : "any",
+            default   : false,
+            definition: "Prevents minification from stripping out comments.",
+            label     : "Keep Comments",
+            lexer     : "any",
+            mode      : "minify",
+            type      : "boolean"
+        },
         minify_wrap      : {
@@ -474,0 +483,0 @@ api       : "any",

beautify/markup.ts

@@ -601,5 +601,2 @@ /*global global, prettydiff*/
                 if (data.lexer[a] === lexer || prettydiff.beautify[data.lexer[a]] === undefined) {
-                    if (data.token[a] === "</prettydiffli>" && options.correct === true) {
-                        data.token[a] = "</li>";
-                    }
                     if ((data.types[a] === "start" || data.types[a] === "singleton" || data.types[a] === "xml" || data.types[a] === "sgml") && data.types[a].indexOf("attribute") < 0 && a < c - 1 && data.types[a + 1] !== undefined && data.types[a + 1].indexOf("attribute") > -1) {
@@ -610,3 +607,3 @@ attributeEnd();
                         multiline();
-                    } else if (data.token[a] !== "</prettydiffli>") {
+                    } else {
                         build.push(data.token[a]);
@@ -641,5 +638,2 @@ if (levels[a] === -10 && a < c - 1) {
             }
-            if (options.new_line === true && a === data.token.length && levels[a - 1] < 0) {
-                build.push(lf);
-            }
             return build.join("");
@@ -646,0 +640,0 @@ }());

beautify/style.ts

@@ -194,4 +194,3 @@ /*global global, prettydiff*/
             };
-        let output:string     = "",
-            indent:number   = options.indent_level,
+        let indent:number   = options.indent_level,
             mixin:boolean    = false,
@@ -380,9 +379,5 @@ a:number        = 0;
         prettydiff.iterator = len - 1;
-        if (options.new_line === true && a === data.token.length && build[build.length - 1].indexOf(lf) < 0) {
-            build.push(lf);
-        }
-        output = build.join("");
-        return output;
+        return build.join("");
     };
     global.prettydiff.beautify.style = style;
 }());

js/api/optionDef.js

@@ -462,3 +462,3 @@ /*global global*/
             api: "any",
-            default: "3",
+            default: 3,
             definition: "When to break consecutively chained methods and properties onto separate lines. " +
@@ -472,2 +472,11 @@ "A negative value disables this option. A value of 0 ensures method chains are ne" +
         },
+        minify_keep_comments: {
+            api: "any",
+            default: false,
+            definition: "Prevents minification from stripping out comments.",
+            label: "Keep Comments",
+            lexer: "any",
+            mode: "minify",
+            type: "boolean"
+        },
         minify_wrap: {
@@ -474,0 +483,0 @@ api: "any",

js/beautify/markup.js

@@ -600,5 +600,2 @@ /*global global, prettydiff*/
                 if (data.lexer[a] === lexer || prettydiff.beautify[data.lexer[a]] === undefined) {
-                    if (data.token[a] === "</prettydiffli>" && options.correct === true) {
-                        data.token[a] = "</li>";
-                    }
                     if ((data.types[a] === "start" || data.types[a] === "singleton" || data.types[a] === "xml" || data.types[a] === "sgml") && data.types[a].indexOf("attribute") < 0 && a < c - 1 && data.types[a + 1] !== undefined && data.types[a + 1].indexOf("attribute") > -1) {
@@ -610,3 +607,3 @@ attributeEnd();
                     }
-                    else if (data.token[a] !== "</prettydiffli>") {
+                    else {
                         build.push(data.token[a]);
@@ -644,5 +641,2 @@ if (levels[a] === -10 && a < c - 1) {
             }
-            if (options.new_line === true && a === data.token.length && levels[a - 1] < 0) {
-                build.push(lf);
-            }
             return build.join("");
@@ -649,0 +643,0 @@ }());

js/beautify/style.js

@@ -183,3 +183,3 @@ /*global global, prettydiff*/
         };
-        let output = "", indent = options.indent_level, mixin = false, a = 0;
+        let indent = options.indent_level, mixin = false, a = 0;
         if (options.vertical === true && options.compressed_css === false) {
@@ -384,9 +384,5 @@ a = len;
         prettydiff.iterator = len - 1;
-        if (options.new_line === true && a === data.token.length && build[build.length - 1].indexOf(lf) < 0) {
-            build.push(lf);
-        }
-        output = build.join("");
-        return output;
+        return build.join("");
     };
     global.prettydiff.beautify.style = style;
 }());

js/minify/markup.js

@@ -110,7 +110,12 @@ /*global global, prettydiff*/
                     else if (data.types[a] === "comment") {
-                        if (comstart < 0) {
-                            comstart = a;
+                        if (options.minify_keep_comments === true) {
+                            level.push(0);
                         }
-                        if (data.types[a + 1] !== "comment") {
-                            comment();
+                        else {
+                            if (comstart < 0) {
+                                comstart = a;
+                            }
+                            if (data.types[a + 1] !== "comment") {
+                                comment();
+                            }
                         }
@@ -197,4 +202,17 @@ }
                     }
-                    if (data.types[a] !== "comment" && data.types[a] !== "comment_attribute") {
-                        build.push(data.token[a]);
+                    if (options.minify_keep_comments === true || (data.types[a] !== "comment" && data.types[a] !== "comment_attribute")) {
+                        if (data.types[a] === "comment") {
+                            if (data.types[a - 1] !== "comment") {
+                                build.push(lf);
+                                build.push(lf);
+                            }
+                            build.push(data.token[a]);
+                            if (data.types[a + 1] !== "comment") {
+                                build.push(lf);
+                            }
+                            build.push(lf);
+                        }
+                        else {
+                            build.push(data.token[a]);
+                        }
                         count = count + data.token[a].length;
@@ -214,3 +232,3 @@ if ((data.types[a] === "template" || data.types[a] === "template_start") && data.types[a - 1] === "content" && options.mode === "minify" && levels[a] === -20) {
                     next = a + 1;
-                    if (next < c - 1 && data.types[next].indexOf("comment") > -1) {
+                    if (next < c - 1 && data.types[next].indexOf("comment") > -1 && options.minify_keep_comments === false) {
                         do {
@@ -217,0 +235,0 @@ next = next + 1;

js/minify/script.js

@@ -37,3 +37,3 @@ /*global global, prettydiff*/
         let a = options.start, count = 0, external = "";
-        if (options.top_comments === true && data.types[a] === "comment" && options.start === 0) {
+        if (options.top_comments === true && options.minify_keep_comments === false && data.types[a] === "comment" && options.start === 0) {
             if (a > 0) {
@@ -50,3 +50,14 @@ build.push(lf);
             if (data.lexer[a] === lexer || prettydiff.minify[data.lexer[a]] === undefined) {
-                if (data.types[a] !== "comment") {
+                if (data.types[a] === "comment" && options.minify_keep_comments === true) {
+                    if (data.types[a - 1] !== "comment" && a > 0) {
+                        build.push(lf);
+                        build.push(lf);
+                    }
+                    build.push(data.token[a]);
+                    if (data.types[a + 1] !== "comment") {
+                        build.push(lf);
+                    }
+                    build.push(lf);
+                }
+                else if (data.types[a] !== "comment") {
                     if (data.types[a - 1] === "operator" && data.types[a] === "operator" && data.token[a] !== "!") {
@@ -53,0 +64,0 @@ build.push(" ");

js/minify/style.js

@@ -12,3 +12,3 @@ /*global global, prettydiff*/
         //beautification loop
-        if (options.top_comments === true && data.types[a] === "comment" && options.start === 0) {
+        if (options.top_comments === true && options.minify_keep_comments === false && data.types[a] === "comment" && options.start === 0) {
             if (a > 0) {
@@ -25,4 +25,15 @@ build.push(lf);
             do {
-                if (data.types[a] !== "comment") {
+                if (data.types[a] === "comment" && options.minify_keep_comments === true) {
+                    if (data.types[a - 1] !== "comment" && a > 0) {
+                        build.push(lf);
+                        build.push(lf);
+                    }
                     build.push(data.token[a]);
+                    if (data.types[a + 1] !== "comment") {
+                        build.push(lf);
+                    }
+                    build.push(lf);
+                }
+                else if (data.types[a] !== "comment") {
+                    build.push(data.token[a]);
                     if (options.wrap > 0 && options.minify_wrap === true) {
@@ -29,0 +40,0 @@ count = count + data.token[a].length;

js/tests/simulations.js

@@ -349,3 +349,3 @@ // tests structure
             qualifier: "contains",
-            test: `${text.angry}* ${text.none + text.cyan}space_close       ${text.none}: Markup self-closing tags end will end with ' />' instead of '/>'.`
+            test: `${text.angry}* ${text.none + text.cyan}space_close         ${text.none}: Markup self-closing tags end will end with ' />' instead of '/>'.`
         },
@@ -355,3 +355,3 @@ {
             qualifier: "contains",
-            test: `${text.green}77${text.none} matching options.`
+            test: `${text.green}78${text.none} matching options.`
         },
@@ -358,0 +358,0 @@ {

minify/markup.ts

@@ -112,8 +112,12 @@ /*global global, prettydiff*/
                         } else if (data.types[a] === "comment") {
-                            if (comstart < 0) {
-                                comstart = a;
+                            if (options.minify_keep_comments === true) {
+                                level.push(0);
+                            } else {
+                                if (comstart < 0) {
+                                    comstart = a;
+                                }
+                                if (data.types[a + 1] !== "comment") {
+                                    comment();
+                                }
                             }
-                            if (data.types[a + 1] !== "comment") {
-                                comment();
-                            }
                         } else if (data.types[a] !== "comment") {
@@ -206,4 +210,16 @@ if (data.types[a] === "content") {
                     }
-                    if (data.types[a] !== "comment" && data.types[a] !== "comment_attribute") {
-                        build.push(data.token[a]);
+                    if (options.minify_keep_comments === true || (data.types[a] !== "comment" && data.types[a] !== "comment_attribute")) {
+                        if (data.types[a] === "comment") {
+                            if (data.types[a - 1] !== "comment") {
+                                build.push(lf);
+                                build.push(lf);
+                            }
+                            build.push(data.token[a]);
+                            if (data.types[a + 1] !== "comment") {
+                                build.push(lf);
+                            }
+                            build.push(lf);
+                        } else {
+                            build.push(data.token[a]);
+                        }
                         count = count + data.token[a].length;
@@ -222,3 +238,3 @@ if ((data.types[a] === "template" || data.types[a] === "template_start") && data.types[a - 1] === "content" && options.mode === "minify" && levels[a] === -20) {
                     next = a + 1;
-                    if (next < c - 1 && data.types[next].indexOf("comment") > -1) {
+                    if (next < c - 1 && data.types[next].indexOf("comment") > -1 && options.minify_keep_comments === false) {
                         do {
@@ -225,0 +241,0 @@ next = next + 1;

minify/script.ts

@@ -44,3 +44,3 @@ /*global global, prettydiff*/
             external:string = "";
-        if (options.top_comments === true && data.types[a] === "comment" && options.start === 0) {
+        if (options.top_comments === true && options.minify_keep_comments === false && data.types[a] === "comment" && options.start === 0) {
             if (a > 0) {
@@ -57,3 +57,13 @@ build.push(lf);
             if (data.lexer[a] === lexer || prettydiff.minify[data.lexer[a]] === undefined) {
-                if (data.types[a] !== "comment") {
+                if (data.types[a] === "comment" && options.minify_keep_comments === true) {
+                    if (data.types[a - 1] !== "comment" && a > 0) {
+                        build.push(lf);
+                        build.push(lf);
+                    }
+                    build.push(data.token[a]);
+                    if (data.types[a + 1] !== "comment") {
+                        build.push(lf);
+                    }
+                    build.push(lf);
+                } else if (data.types[a] !== "comment") {
                     if (data.types[a - 1] === "operator" && data.types[a] === "operator" && data.token[a] !== "!") {
@@ -60,0 +70,0 @@ build.push(" ");

minify/style.ts

@@ -21,3 +21,3 @@ /*global global, prettydiff*/
         //beautification loop
-        if (options.top_comments === true && data.types[a] === "comment" && options.start === 0) {
+        if (options.top_comments === true && options.minify_keep_comments === false && data.types[a] === "comment" && options.start === 0) {
             if (a > 0) {
@@ -34,4 +34,14 @@ build.push(lf);
             do {
-                if (data.types[a] !== "comment") {
+                if (data.types[a] === "comment" && options.minify_keep_comments === true) {
+                    if (data.types[a - 1] !== "comment" && a > 0) {
+                        build.push(lf);
+                        build.push(lf);
+                    }
                     build.push(data.token[a]);
+                    if (data.types[a + 1] !== "comment") {
+                        build.push(lf);
+                    }
+                    build.push(lf);
+                } else if (data.types[a] !== "comment") {
+                    build.push(data.token[a]);
                     if (options.wrap > 0 && options.minify_wrap === true) {
@@ -38,0 +48,0 @@ count = count + data.token[a].length;

mode.ts

@@ -354,2 +354,5 @@ /*global global, window*/
             },
+            lf:string = (options.crlf === true)
+                ? "\r\n"
+                : "\n",
             // prettydiff file insertion start
@@ -726,2 +729,7 @@ prettydiff:any = {};
         }
+        if (options.new_line === true) {
+            result = result.replace(/\s*$/, lf);
+        } else {
+            result = result.replace(/\s+$/, "");
+        }
         if (options.complete_document === true && options.jsscope !== "report") {
@@ -728,0 +736,0 @@ // finalFile insertion start

options.md

@@ -526,2 +526,13 @@ # Pretty Diff Options
 
+## minify_keep_comments
+property | value
+-----------|---
+api        | any
+default    | false
+definition | Prevents minification from stripping out comments.
+label      | Keep Comments
+lexer      | any
+mode       | minify
+type       | boolean
+
 ## minify_wrap
@@ -528,0 +539,0 @@ property | value

package.json

@@ -10,3 +10,3 @@ {
         "file-saver": "^1.3.8",
-        "sparser": "^1.0.9"
+        "sparser": "^1.0.14"
     },
@@ -43,3 +43,3 @@ "description": "A language aware diff tool.",
     },
-    "version": "100.2.6"
+    "version": "100.2.7"
 }

tests/formatted/beautify_script_javascript_indent_size-2_indent_level-2_indent_char-x.txt

@@ -18,2 +18,2 @@ function jspretty__tokenize() {
 xxxx};
-xxxx
+xxxx

tests/formatted/beautify_script_javascript_jsscope-report_brace_line.txt

@@ -1,1 +0,1 @@
-<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li>2</li><li class="fold" title="folds from line 3 to line 40">-3</li><li>4</li><li class="fold" title="folds from line 5 to line 35">-5</li><li class="fold" title="folds from line 6 to line 14">-6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li class="fold" title="folds from line 15 to line 24">-15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li class="fold" title="folds from line 25 to line 34">-25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ol><ol class="data"><li class="c0">    /*prettydiff.com wrap:80 object_sort:true vertical:true brace_line:true*/<em class="line">&#xA;</em></li><li class="c0">    /*global global*/<em class="line">&#xA;</em></li><li class="l0">(function <em class="s0">options_init</em>(): void <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>"use strict";<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>const <em class="s1">optionDef</em> = {<em class="line">&#xA;</em></li><li class="c0">        // accessibility : {<em class="line">&#xA;</em></li><li class="c0">        //    api       : "any",<em class="line">&#xA;</em></li><li class="c0">        //    mode      : "analysis",<em class="line">&#xA;</em></li><li class="c0">        //    lexer     : "markup",<em class="line">&#xA;</em></li><li class="c0">        //    label     : "Accessibility Analysis",<em class="line">&#xA;</em></li><li class="c0">        //    type      : "boolean",<em class="line">&#xA;</em></li><li class="c0">        //    definition: "Whether analysis of HTML should include an accessibility report.",<em class="line">&#xA;</em></li><li class="c0">        //    default   : false<em class="line">&#xA;</em></li><li class="c0">        // },<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>brace_line: {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>api       : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>default   : false,<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>definition: "If true a new line character will be inserted after opening curly braces and bef" +<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span>"ore closing curly braces.",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>label     : "Brace Lines",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>lexer     : "script",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>mode      : "beautify",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>type      : "boolean"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>},<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>wrap      : {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>api       : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>default   : 0,<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>definition: "Character width limit before applying word wrap. A 0 value disables this option." +<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span>" A negative value concatenates script strings.",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>label     : "Wrap",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>lexer     : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>mode      : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>type      : "number"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>}<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>};<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s0">global</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.prettydiff<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.api<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.optionDef  = <em class="s1">optionDef</em>;<em class="line">&#xA;</em></li><li class="l0"><em class="s1">}</em>());<em class="line">&#xA;</em></li></ol></div>
+<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li>2</li><li class="fold" title="folds from line 3 to line 40">-3</li><li>4</li><li class="fold" title="folds from line 5 to line 35">-5</li><li class="fold" title="folds from line 6 to line 14">-6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li class="fold" title="folds from line 15 to line 24">-15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li class="fold" title="folds from line 25 to line 34">-25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ol><ol class="data"><li class="c0">    /*prettydiff.com wrap:80 object_sort:true vertical:true brace_line:true*/<em class="line">&#xA;</em></li><li class="c0">    /*global global*/<em class="line">&#xA;</em></li><li class="l0">(function <em class="s0">options_init</em>(): void <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>"use strict";<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>const <em class="s1">optionDef</em> = {<em class="line">&#xA;</em></li><li class="c0">        // accessibility : {<em class="line">&#xA;</em></li><li class="c0">        //    api       : "any",<em class="line">&#xA;</em></li><li class="c0">        //    mode      : "analysis",<em class="line">&#xA;</em></li><li class="c0">        //    lexer     : "markup",<em class="line">&#xA;</em></li><li class="c0">        //    label     : "Accessibility Analysis",<em class="line">&#xA;</em></li><li class="c0">        //    type      : "boolean",<em class="line">&#xA;</em></li><li class="c0">        //    definition: "Whether analysis of HTML should include an accessibility report.",<em class="line">&#xA;</em></li><li class="c0">        //    default   : false<em class="line">&#xA;</em></li><li class="c0">        // },<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>brace_line: {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>api       : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>default   : false,<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>definition: "If true a new line character will be inserted after opening curly braces and bef" +<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span>"ore closing curly braces.",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>label     : "Brace Lines",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>lexer     : "script",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>mode      : "beautify",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>type      : "boolean"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>},<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>wrap      : {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>api       : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>default   : 0,<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>definition: "Character width limit before applying word wrap. A 0 value disables this option." +<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span><span class="l1">    </span>" A negative value concatenates script strings.",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>label     : "Wrap",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>lexer     : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>mode      : "any",<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>type      : "number"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>}<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>};<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s0">global</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.prettydiff<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.api<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.optionDef  = <em class="s1">optionDef</em>;<em class="line">&#xA;</em></li><li class="l0"><em class="s1">}</em>());<em class="line">&#xA;</em></li></ol></div>

tests/formatted/beautify_script_javascript_jsscope-report.txt

@@ -1,1 +0,1 @@
-<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li class="fold" title="folds from line 2 to line 63">-2</li><li class="fold" title="folds from line 3 to line 25">-3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li class="fold" title="folds from line 27 to line 58">-27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li class="fold" title="folds from line 45 to line 57">-45</li><li class="fold" title="folds from line 46 to line 48">-46</li><li>47</li><li>48</li><li>49</li><li class="fold" title="folds from line 50 to line 52">-50</li><li>51</li><li>52</li><li class="fold" title="folds from line 53 to line 55">-53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li></ol><ol class="data"><li class="c0">    /*global global*/<em class="line">&#xA;</em></li><li class="l0">(function <em class="s0">pdcomment_init</em>() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="c0">    // parses the prettydiff settings comment<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - Source Priorities:<em class="line">&#xA;</em></li><li class="c0">    // * the prettydiff comment is only accepted if it occurs before non-comments<em class="line">&#xA;</em></li><li class="c0">    // (near the top)<em class="line">&#xA;</em></li><li class="c0">    // * options.source is the priority material for reading the comment<em class="line">&#xA;</em></li><li class="c0">    // * the prettydiff comment will be processed from options.diff only if it<em class="line">&#xA;</em></li><li class="c0">    // present there, missing from options.source, and options.mode is diff<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - Examples:<em class="line">&#xA;</em></li><li class="c0">    //    /*prettydiff.com width:80 preserve:4*/<em class="line">&#xA;</em></li><li class="c0">    //    /* prettydiff.com width:80 preserve:4 */<em class="line">&#xA;</em></li><li class="c0">    //    /*prettydiff.com width=80 preserve=4 */<em class="line">&#xA;</em></li><li class="c0">    //    // prettydiff.com width=80 preserve:4<em class="line">&#xA;</em></li><li class="c0">    //    &lt;!-- prettydiff.com width:80 preserve=4 --&gt;<em class="line">&#xA;</em></li><li class="c0">    //    &lt;!--prettydiff.com width:40 preserve:2--&gt;<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - Parsing Considerations:<em class="line">&#xA;</em></li><li class="c0">    // * there may be any amount of space at the start or end of the comment<em class="line">&#xA;</em></li><li class="c0">    // * "prettydiff.com" must exist at the start of the comment<em class="line">&#xA;</em></li><li class="c0">    // * comment must exist prior to non-comment tokens (near top of code)<em class="line">&#xA;</em></li><li class="c0">    // * parameters are name value pairs separated by white space<em class="line">&#xA;</em></li><li class="c0">    // * the delimiter separating name and value is either ":" or "=" characters<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>"use strict";<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>const <em class="s1">pdcomment</em>    = function <em class="s1">pdcomment_</em>(<em class="s2">options</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span>let <em class="s2">pdcom</em>   = <em class="s2">options</em>.source.search(/((\/(\*|\/))|&lt;!--*)\s*prettydiff\.com/),<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">a</em>       = (<em class="s2">pdcom</em> &gt; -1)<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>? <em class="s2">pdcom</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>: <em class="s2">options</em>.diff.search(/((\/(\*|\/))|&lt;!--*)\s*prettydiff\.com/),<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">b</em>       = 0,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">quote</em>   = "",<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">op</em>      = [];<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span>const <em class="s2">ops</em>   = [],<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">source</em>  = (<em class="s2">pdcom</em> &gt; -1)<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>? <em class="s2">options</em>.source<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>: <em class="s2">options</em>.diff,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">len</em>     = <em class="s2">source</em>.length,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">comment</em> = (<em class="s2">source</em>.charAt(<em class="s2">a</em>) === "&lt;")<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>? "&lt;!--"<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>: (<em class="s2">source</em>.charAt(<em class="s2">a</em> + 1) === "/")<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span><span class="l2">    </span>? "//"<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span><span class="l2">    </span>: "/\u002a",<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">esc</em>     = function <em class="s2">pdcomment_esc</em>() <em class="s3">{</em><em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>if (<em class="s2">source</em>.charAt(<em class="s2">a</em> - 1) !== "\\") <em class="s4">{</em><em class="line">&#xA;</em></li><li class="l4"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><span class="l3">    </span>return false;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><em class="s4">}</em><em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>let <em class="s3">x</em> = <em class="s2">a</em>;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>do <em class="s4">{</em><em class="line">&#xA;</em></li><li class="l4"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><span class="l3">    </span><em class="s3">x</em> = <em class="s3">x</em> - 1;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><em class="s4">}</em> while (<em class="s3">x</em> &gt; 0 &amp;&amp; <em class="s2">source</em>.charAt(<em class="s3">x</em>) === "\\");<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>if ((<em class="s2">a</em> - <em class="s3">x</em>) % 2 === 0) <em class="s4">{</em><em class="line">&#xA;</em></li><li class="l4"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><span class="l3">    </span>return true;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><em class="s4">}</em><em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>return false;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s3">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s2">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s0">global</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.prettydiff<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.api<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.pdcommenttttt = <em class="s1">pdcomment</em>;<em class="line">&#xA;</em></li><li class="l0"><em class="s1">}</em>());<em class="line">&#xA;</em></li></ol></div>
+<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li class="fold" title="folds from line 2 to line 63">-2</li><li class="fold" title="folds from line 3 to line 25">-3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li class="fold" title="folds from line 27 to line 58">-27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li class="fold" title="folds from line 45 to line 57">-45</li><li class="fold" title="folds from line 46 to line 48">-46</li><li>47</li><li>48</li><li>49</li><li class="fold" title="folds from line 50 to line 52">-50</li><li>51</li><li>52</li><li class="fold" title="folds from line 53 to line 55">-53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li></ol><ol class="data"><li class="c0">    /*global global*/<em class="line">&#xA;</em></li><li class="l0">(function <em class="s0">pdcomment_init</em>() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="c0">    // parses the prettydiff settings comment<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - Source Priorities:<em class="line">&#xA;</em></li><li class="c0">    // * the prettydiff comment is only accepted if it occurs before non-comments<em class="line">&#xA;</em></li><li class="c0">    // (near the top)<em class="line">&#xA;</em></li><li class="c0">    // * options.source is the priority material for reading the comment<em class="line">&#xA;</em></li><li class="c0">    // * the prettydiff comment will be processed from options.diff only if it<em class="line">&#xA;</em></li><li class="c0">    // present there, missing from options.source, and options.mode is diff<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - Examples:<em class="line">&#xA;</em></li><li class="c0">    //    /*prettydiff.com width:80 preserve:4*/<em class="line">&#xA;</em></li><li class="c0">    //    /* prettydiff.com width:80 preserve:4 */<em class="line">&#xA;</em></li><li class="c0">    //    /*prettydiff.com width=80 preserve=4 */<em class="line">&#xA;</em></li><li class="c0">    //    // prettydiff.com width=80 preserve:4<em class="line">&#xA;</em></li><li class="c0">    //    &lt;!-- prettydiff.com width:80 preserve=4 --&gt;<em class="line">&#xA;</em></li><li class="c0">    //    &lt;!--prettydiff.com width:40 preserve:2--&gt;<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - Parsing Considerations:<em class="line">&#xA;</em></li><li class="c0">    // * there may be any amount of space at the start or end of the comment<em class="line">&#xA;</em></li><li class="c0">    // * "prettydiff.com" must exist at the start of the comment<em class="line">&#xA;</em></li><li class="c0">    // * comment must exist prior to non-comment tokens (near top of code)<em class="line">&#xA;</em></li><li class="c0">    // * parameters are name value pairs separated by white space<em class="line">&#xA;</em></li><li class="c0">    // * the delimiter separating name and value is either ":" or "=" characters<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>"use strict";<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>const <em class="s1">pdcomment</em>    = function <em class="s1">pdcomment_</em>(<em class="s2">options</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span>let <em class="s2">pdcom</em>   = <em class="s2">options</em>.source.search(/((\/(\*|\/))|&lt;!--*)\s*prettydiff\.com/),<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">a</em>       = (<em class="s2">pdcom</em> &gt; -1)<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>? <em class="s2">pdcom</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>: <em class="s2">options</em>.diff.search(/((\/(\*|\/))|&lt;!--*)\s*prettydiff\.com/),<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">b</em>       = 0,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">quote</em>   = "",<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">op</em>      = [];<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span>const <em class="s2">ops</em>   = [],<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">source</em>  = (<em class="s2">pdcom</em> &gt; -1)<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>? <em class="s2">options</em>.source<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>: <em class="s2">options</em>.diff,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">len</em>     = <em class="s2">source</em>.length,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">comment</em> = (<em class="s2">source</em>.charAt(<em class="s2">a</em>) === "&lt;")<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>? "&lt;!--"<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span>: (<em class="s2">source</em>.charAt(<em class="s2">a</em> + 1) === "/")<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span><span class="l2">    </span>? "//"<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l2">    </span><span class="l2">    </span>: "/\u002a",<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s2">esc</em>     = function <em class="s2">pdcomment_esc</em>() <em class="s3">{</em><em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>if (<em class="s2">source</em>.charAt(<em class="s2">a</em> - 1) !== "\\") <em class="s4">{</em><em class="line">&#xA;</em></li><li class="l4"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><span class="l3">    </span>return false;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><em class="s4">}</em><em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>let <em class="s3">x</em> = <em class="s2">a</em>;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>do <em class="s4">{</em><em class="line">&#xA;</em></li><li class="l4"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><span class="l3">    </span><em class="s3">x</em> = <em class="s3">x</em> - 1;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><em class="s4">}</em> while (<em class="s3">x</em> &gt; 0 &amp;&amp; <em class="s2">source</em>.charAt(<em class="s3">x</em>) === "\\");<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>if ((<em class="s2">a</em> - <em class="s3">x</em>) % 2 === 0) <em class="s4">{</em><em class="line">&#xA;</em></li><li class="l4"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><span class="l3">    </span>return true;<em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span><em class="s4">}</em><em class="line">&#xA;</em></li><li class="l3"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><span class="l3">    </span>return false;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span><em class="s3">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s2">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s0">global</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.prettydiff<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.api<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>.pdcommenttttt = <em class="s1">pdcomment</em>;<em class="line">&#xA;</em></li><li class="l0"><em class="s1">}</em>());<em class="line">&#xA;</em></li></ol></div>

tests/formatted/beautify_script_javascript_lineCommentWrap_jsscope-report.txt

@@ -1,1 +0,1 @@
-<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li>2</li><li>3</li><li>4</li><li class="fold" title="folds from line 5 to line 70">-5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li></ol><ol class="data"><li class="c0">    /*prettydiff.com wrap:40 preserve:4*/<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // this is a long line comment that<em class="line">&#xA;</em></li><li class="c0">    // should wrap onto an additional line,<em class="line">&#xA;</em></li><li class="c0">    // but we will see<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // this comment has line breaks that<em class="line">&#xA;</em></li><li class="c0">    // should be preserved<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // line breaks can contain white space,<em class="line">&#xA;</em></li><li class="c0">    // which is to be ignored<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // the white space in line breaks could<em class="line">&#xA;</em></li><li class="c0">    // resemble code, but it should still be<em class="line">&#xA;</em></li><li class="c0">    // ignored<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // a long line that should wrap onto a<em class="line">&#xA;</em></li><li class="c0">    // much smaller following line, but we<em class="line">&#xA;</em></li><li class="c0">    // will see<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // comments starting with 4 spaces or a<em class="line">&#xA;</em></li><li class="c0">    // tab are treated as code and should<em class="line">&#xA;</em></li><li class="c0">    // not wrap<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    //    this is a long line that should not wrap as it is formatted as commented code in markdown<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // comments that start with either an<em class="line">&#xA;</em></li><li class="c0">    // asterisks, dash, or a number followed<em class="line">&#xA;</em></li><li class="c0">    // by a dot are list items and comments<em class="line">&#xA;</em></li><li class="c0">    // should not wrap onto list lines<em class="line">&#xA;</em></li><li class="c0">    // * star line, but i am going to make<em class="line">&#xA;</em></li><li class="c0">    // it longer to see if it wraps into the<em class="line">&#xA;</em></li><li class="c0">    // next line<em class="line">&#xA;</em></li><li class="c0">    // - dash line, but we also need to see<em class="line">&#xA;</em></li><li class="c0">    // if this wraps into the next line<em class="line">&#xA;</em></li><li class="c0">    // 46000. number line and again we need<em class="line">&#xA;</em></li><li class="c0">    // to see if this wraps into the next<em class="line">&#xA;</em></li><li class="c0">    // line<em class="line">&#xA;</em></li><li class="c0">    // * arrrrgghhh<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // comments starting with 4 spaces or a<em class="line">&#xA;</em></li><li class="c0">    // tab are treated as code and should<em class="line">&#xA;</em></li><li class="c0">    // not wrap<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    //    this is a long line that should not wrap as it is formatted as commented code in markdown<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // comments that start with either an<em class="line">&#xA;</em></li><li class="c0">    // asterisks, dash, or a number followed<em class="line">&#xA;</em></li><li class="c0">    // by a dot are list items and comments<em class="line">&#xA;</em></li><li class="c0">    // should not wrap onto list lines<em class="line">&#xA;</em></li><li class="c0">    // * star line, but i am going to make<em class="line">&#xA;</em></li><li class="c0">    // it longer to see if it wraps into the<em class="line">&#xA;</em></li><li class="c0">    // next line<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - dash line, but we also need to see<em class="line">&#xA;</em></li><li class="c0">    // if this wraps into the next line<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // 46000. number line and again we need<em class="line">&#xA;</em></li><li class="c0">    // to see if this wraps into the next<em class="line">&#xA;</em></li><li class="c0">    // line<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // * arrrrgghhh<em class="line">&#xA;</em></li></ol></div>
+<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li>2</li><li>3</li><li>4</li><li class="fold" title="folds from line 5 to line 70">-5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li></ol><ol class="data"><li class="c0">    /*prettydiff.com wrap:40 preserve:4*/<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // this is a long line comment that<em class="line">&#xA;</em></li><li class="c0">    // should wrap onto an additional line,<em class="line">&#xA;</em></li><li class="c0">    // but we will see<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // this comment has line breaks that<em class="line">&#xA;</em></li><li class="c0">    // should be preserved<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // line breaks can contain white space,<em class="line">&#xA;</em></li><li class="c0">    // which is to be ignored<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // the white space in line breaks could<em class="line">&#xA;</em></li><li class="c0">    // resemble code, but it should still be<em class="line">&#xA;</em></li><li class="c0">    // ignored<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // a long line that should wrap onto a<em class="line">&#xA;</em></li><li class="c0">    // much smaller following line, but we<em class="line">&#xA;</em></li><li class="c0">    // will see<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // comments starting with 4 spaces or a<em class="line">&#xA;</em></li><li class="c0">    // tab are treated as code and should<em class="line">&#xA;</em></li><li class="c0">    // not wrap<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    //    this is a long line that should not wrap as it is formatted as commented code in markdown<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // comments that start with either an<em class="line">&#xA;</em></li><li class="c0">    // asterisks, dash, or a number followed<em class="line">&#xA;</em></li><li class="c0">    // by a dot are list items and comments<em class="line">&#xA;</em></li><li class="c0">    // should not wrap onto list lines<em class="line">&#xA;</em></li><li class="c0">    // * star line, but i am going to make<em class="line">&#xA;</em></li><li class="c0">    // it longer to see if it wraps into the<em class="line">&#xA;</em></li><li class="c0">    // next line<em class="line">&#xA;</em></li><li class="c0">    // - dash line, but we also need to see<em class="line">&#xA;</em></li><li class="c0">    // if this wraps into the next line<em class="line">&#xA;</em></li><li class="c0">    // 46000. number line and again we need<em class="line">&#xA;</em></li><li class="c0">    // to see if this wraps into the next<em class="line">&#xA;</em></li><li class="c0">    // line<em class="line">&#xA;</em></li><li class="c0">    // * arrrrgghhh<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // comments starting with 4 spaces or a<em class="line">&#xA;</em></li><li class="c0">    // tab are treated as code and should<em class="line">&#xA;</em></li><li class="c0">    // not wrap<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    //    this is a long line that should not wrap as it is formatted as commented code in markdown<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // comments that start with either an<em class="line">&#xA;</em></li><li class="c0">    // asterisks, dash, or a number followed<em class="line">&#xA;</em></li><li class="c0">    // by a dot are list items and comments<em class="line">&#xA;</em></li><li class="c0">    // should not wrap onto list lines<em class="line">&#xA;</em></li><li class="c0">    // * star line, but i am going to make<em class="line">&#xA;</em></li><li class="c0">    // it longer to see if it wraps into the<em class="line">&#xA;</em></li><li class="c0">    // next line<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // - dash line, but we also need to see<em class="line">&#xA;</em></li><li class="c0">    // if this wraps into the next line<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // 46000. number line and again we need<em class="line">&#xA;</em></li><li class="c0">    // to see if this wraps into the next<em class="line">&#xA;</em></li><li class="c0">    // line<em class="line">&#xA;</em></li><li class="c0">    //<em class="line">&#xA;</em></li><li class="c0">    // * arrrrgghhh<em class="line">&#xA;</em></li></ol></div>

tests/formatted/beautify_script_javascript_pseudoHoist_jsscope-report.txt

@@ -1,1 +0,1 @@
-<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li class="fold" title="folds from line 1 to line 7">-1</li><li class="fold" title="folds from line 2 to line 4">-2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ol><ol class="data"><li>function <em class="s0">y</em>() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>const <em class="s1">x</em> = function (<em class="s2">e</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span>return <em class="s2">e</em> + <em class="s1">a</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s2">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>let <em class="s1">a</em>   = 0;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>return <em class="s1">x</em>(5);<em class="line">&#xA;</em></li><li class="l0"><em class="s1">}</em><em class="line">&#xA;</em></li></ol></div>
+<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>0</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li class="fold" title="folds from line 1 to line 7">-1</li><li class="fold" title="folds from line 2 to line 4">-2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ol><ol class="data"><li>function <em class="s0">y</em>() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>const <em class="s1">x</em> = function (<em class="s2">e</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l1">    </span>return <em class="s2">e</em> + <em class="s1">a</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><em class="s2">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>let <em class="s1">a</em>   = 0;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span>return <em class="s1">x</em>(5);<em class="line">&#xA;</em></li><li class="l0"><em class="s1">}</em><em class="line">&#xA;</em></li></ol></div>

tests/formatted/beautify_script_jsx_big_jsscope-report_preserve-4_wrap-0.txt

@@ -1,1 +0,1 @@
-<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>1</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li class="fold" title="folds from line 2 to line 17">-2</li><li class="fold" title="folds from line 3 to line 16">-3</li><li class="fold" title="folds from line 4 to line 15">-4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li class="fold" title="folds from line 18 to line 36">-18</li><li>19</li><li class="fold" title="folds from line 20 to line 24">-20</li><li>21</li><li>22</li><li>23</li><li>24</li><li class="fold" title="folds from line 25 to line 35">-25</li><li>26</li><li>27</li><li>28</li><li class="fold" title="folds from line 29 to line 34">-29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li class="fold" title="folds from line 37 to line 51">-37</li><li class="fold" title="folds from line 38 to line 50">-38</li><li>39</li><li>40</li><li>41</li><li class="fold" title="folds from line 42 to line 49">-42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li class="fold" title="folds from line 52 to line 66">-52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li class="fold" title="folds from line 85 to line 87">-85</li><li>86</li><li>87</li><li class="fold" title="folds from line 88 to line 94">-88</li><li class="fold" title="folds from line 89 to line 93">-89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li class="fold" title="folds from line 95 to line 98">-95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li class="fold" title="folds from line 101 to line 123">-101</li><li class="fold" title="folds from line 102 to line 104">-102</li><li>103</li><li>104</li><li class="fold" title="folds from line 105 to line 107">-105</li><li>106</li><li>107</li><li class="fold" title="folds from line 108 to line 110">-108</li><li>109</li><li>110</li><li class="fold" title="folds from line 111 to line 117">-111</li><li class="fold" title="folds from line 112 to line 116">-112</li><li>113</li><li>114</li><li>115</li><li>116</li><li>117</li><li class="fold" title="folds from line 118 to line 122">-118</li><li class="fold" title="folds from line 119 to line 121">-119</li><li>120</li><li>121</li><li>122</li><li>123</li><li class="fold" title="folds from line 124 to line 127">-124</li><li>125</li><li>126</li><li>127</li><li>128</li><li>129</li><li class="fold" title="folds from line 130 to line 152">-130</li><li class="fold" title="folds from line 131 to line 133">-131</li><li>132</li><li>133</li><li class="fold" title="folds from line 134 to line 136">-134</li><li>135</li><li>136</li><li class="fold" title="folds from line 137 to line 139">-137</li><li>138</li><li>139</li><li class="fold" title="folds from line 140 to line 146">-140</li><li class="fold" title="folds from line 141 to line 145">-141</li><li>142</li><li>143</li><li>144</li><li>145</li><li>146</li><li class="fold" title="folds from line 147 to line 151">-147</li><li class="fold" title="folds from line 148 to line 150">-148</li><li>149</li><li>150</li><li>151</li><li>152</li><li class="fold" title="folds from line 153 to line 156">-153</li><li>154</li><li>155</li><li>156</li><li>157</li><li>158</li><li class="fold" title="folds from line 159 to line 171">-159</li><li class="fold" title="folds from line 160 to line 170">-160</li><li class="fold" title="folds from line 161 to line 163">-161</li><li>162</li><li>163</li><li>164</li><li>165</li><li>166</li><li>167</li><li>168</li><li>169</li><li>170</li><li>171</li><li class="fold" title="folds from line 172 to line 216">-172</li><li class="fold" title="folds from line 173 to line 175">-173</li><li>174</li><li>175</li><li class="fold" title="folds from line 176 to line 184">-176</li><li>177</li><li>178</li><li>179</li><li>180</li><li>181</li><li>182</li><li>183</li><li>184</li><li class="fold" title="folds from line 185 to line 187">-185</li><li>186</li><li>187</li><li class="fold" title="folds from line 188 to line 215">-188</li><li class="fold" title="folds from line 189 to line 214">-189</li><li>190</li><li>191</li><li>192</li><li>193</li><li>194</li><li>195</li><li>196</li><li>197</li><li>198</li><li>199</li><li>200</li><li>201</li><li>202</li><li>203</li><li>204</li><li>205</li><li>206</li><li>207</li><li>208</li><li>209</li><li>210</li><li>211</li><li>212</li><li>213</li><li>214</li><li>215</li><li>216</li><li class="fold" title="folds from line 217 to line 220">-217</li><li>218</li><li>219</li><li>220</li><li>221</li><li>222</li><li>223</li><li class="fold" title="folds from line 224 to line 258">-224</li><li class="fold" title="folds from line 225 to line 227">-225</li><li>226</li><li>227</li><li class="fold" title="folds from line 228 to line 236">-228</li><li class="fold" title="folds from line 229 to line 235">-229</li><li>230</li><li>231</li><li>232</li><li>233</li><li>234</li><li>235</li><li>236</li><li class="fold" title="folds from line 237 to line 257">-237</li><li class="fold" title="folds from line 238 to line 256">-238</li><li>239</li><li>240</li><li>241</li><li>242</li><li>243</li><li>244</li><li>245</li><li>246</li><li>247</li><li>248</li><li>249</li><li>250</li><li>251</li><li>252</li><li>253</li><li>254</li><li>255</li><li>256</li><li>257</li><li>258</li><li class="fold" title="folds from line 259 to line 262">-259</li><li>260</li><li>261</li><li>262</li><li>263</li><li>264</li><li class="fold" title="folds from line 265 to line 276">-265</li><li class="fold" title="folds from line 266 to line 275">-266</li><li>267</li><li class="fold" title="folds from line 268 to line 274">-268</li><li>269</li><li>270</li><li>271</li><li>272</li><li>273</li><li>274</li><li>275</li><li>276</li><li class="fold" title="folds from line 277 to line 281">-277</li><li>278</li><li>279</li><li>280</li><li>281</li><li class="fold" title="folds from line 282 to line 287">-282</li><li>283</li><li>284</li><li>285</li><li>286</li><li>287</li><li>288</li><li class="fold" title="folds from line 289 to line 304">-289</li><li class="fold" title="folds from line 290 to line 303">-290</li><li class="fold" title="folds from line 291 to line 293">-291</li><li>292</li><li class="fold" title="folds from line 293 to line 302">-293</li><li class="fold" title="folds from line 294 to line 301">-294</li><li>295</li><li>296</li><li>297</li><li>298</li><li>299</li><li>300</li><li>301</li><li>302</li><li>303</li><li>304</li><li class="fold" title="folds from line 305 to line 345">-305</li><li class="fold" title="folds from line 306 to line 308">-306</li><li>307</li><li>308</li><li>309</li><li class="fold" title="folds from line 310 to line 344">-310</li><li class="fold" title="folds from line 311 to line 343">-311</li><li>312</li><li>313</li><li>314</li><li>315</li><li>316</li><li>317</li><li>318</li><li>319</li><li>320</li><li>321</li><li>322</li><li>323</li><li>324</li><li>325</li><li>326</li><li>327</li><li>328</li><li>329</li><li>330</li><li>331</li><li>332</li><li>333</li><li>334</li><li>335</li><li>336</li><li>337</li><li>338</li><li>339</li><li>340</li><li>341</li><li>342</li><li>343</li><li>344</li><li>345</li></ol><ol class="data"><li class="c0">    /*prettydiff.com space_close:false, variable_list:list*/<em class="line">&#xA;</em></li><li class="l0">var <em class="s0">ListItem</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;li className="ListItem"&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;a href={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        "/items/" + <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            .props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            .item<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            .id;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        this.props.item.name<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;/a&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/li&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">List</em> = React.createClass({<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render    : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return &lt;ul className="List"&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>    this.renderList()<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>&lt;/ul&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>renderList: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.map(function (<em class="s2">item</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>return &lt;ListItem item={<em class="s2">item</em>}<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    key={<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>        <em class="s2">item</em>.id;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    }/&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="s2">}</em>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">Mist</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>renderList: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.map(function (<em class="s2">item</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>return &lt;ListItem item={<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>        return &lt;tag&gt;{<em class="s2">item</em>}&lt;/tag&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    }<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    key={<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>        <em class="s2">item</em>.id;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    }/&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="s2">}</em>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">content</em> = (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>&lt;Nav&gt; {/* child comment, put {} around */}<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>    &lt;Person /* multi<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span> line<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span> comment */<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        //attr="test"<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        name={<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>            window.isLoggedIn<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>                ? window.name<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>                : '';<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        }<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        // end of line comment<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>    /&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>&lt;/Nav&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">qwer</em> = &lt;Dropdown&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    A dropdown list<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    &lt;Menu&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>        &lt;MenuItem&gt;Do Something&lt;/MenuItem&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>        &lt;MenuItem&gt;Do Something Fun!&lt;/MenuItem&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>        &lt;MenuItem&gt;Do Something Else&lt;/MenuItem&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    &lt;/Menu&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;/DropDown&gt;;<em class="line">&#xA;</em></li><li class="l0">render(dropdown);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // JSX<em class="line">&#xA;</em></li><li class="l0">var <em class="s0">box</em> = &lt;Box&gt; {<em class="line">&#xA;</em></li><li class="l0">    shouldShowAnswer(user)<em class="line">&#xA;</em></li><li class="l0">        ? &lt;Answer value={false}&gt;no&lt;/Answer&gt;<em class="line">&#xA;</em></li><li class="l0">        : &lt;Box.Comment&gt;<em class="line">&#xA;</em></li><li class="l0">            Text Content<em class="line">&#xA;</em></li><li class="l0">        &lt;/Box.Comment&gt;;<em class="line">&#xA;</em></li><li class="l0">} &lt;/Box&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">a</em> = function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>return &lt;tsdf&gt;asdf&lt;/tsdf&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">HelloMessage</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l1">    </span>render: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>return &lt;div&gt;Hello {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>    <strong class="new">this</strong>.props.name;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>}&lt;/div&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l1">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;HelloMessage name="John"/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">Timer</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentDidMount   : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.interval = setInterval(<strong class="new">this</strong>.tick, 1000);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentWillUnmount: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>clearInterval(<strong class="new">this</strong>.interval);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>getInitialState     : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return {secondsElapsed: 0};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render              : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div&gt;Seconds Elapsed: {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    <strong class="new">this</strong>.state.secondsElapsed;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>}&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>tick                : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>secondsElapsed: <strong class="new">this</strong>.state.secondsElapsed + 1<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;Timer/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">Timer</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentDidMount   : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.interval = setInterval(<strong class="new">this</strong>.tick, 1000);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentWillUnmount: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>clearInterval(<strong class="new">this</strong>.interval);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>getInitialState     : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return {secondsElapsed: 0};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render              : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div&gt;Seconds Elapsed: {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    <strong class="new">this</strong>.state.secondsElapsed;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>}&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>tick                : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>secondsElapsed: <strong class="new">this</strong>.state.secondsElapsed + 1<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;Timer/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">TodoList</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>var <em class="s1">createItem</em> = function (<em class="s2">itemText</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>return &lt;li&gt;{<em class="s2">itemText</em>}&lt;/li&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><em class="s2">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return &lt;ul&gt;{<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>    <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>        .props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>        .items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>        .map(<em class="s1">createItem</em>);<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>}&lt;/ul&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">TodoApp</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>getInitialState: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return {items: [], text: ''};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>handleSubmit   : function (<em class="s1">e</em>) <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><em class="s1">e</em>.preventDefault();<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>var <em class="s1">nextItems</em> = <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.state<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.concat([<strong class="new">this</strong>.state.text]),<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="s1">nextText</em>  = '';<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({items: <em class="s1">nextItems</em>, text: <em class="s1">nextText</em>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>onChange       : function (<em class="s1">e</em>) <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({text: <em class="s1">e</em>.target.value});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render         : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;h3&gt;TODO&lt;/h3&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;TodoList items={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        <strong class="new">this</strong>.state.items;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;form onSubmit={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        <strong class="new">this</strong>.handleSubmit;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        &lt;input onChange={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                <strong class="new">this</strong>.onChange;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            value={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                <strong class="new">this</strong>.state.text;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        &lt;button&gt;{<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            'Add #' + (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    .state<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    .items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    .length + 1<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            );<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }&lt;/button&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;/form&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;TodoApp/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">converter</em> = <strong class='new'>new</strong> Showdown.converter(),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">MarkdownEditor</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>getInitialState: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return {value: 'Type some *markdown* here!'};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>handleChange   : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>value: <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.refs<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.textarea<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.getDOMNode()<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.value<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render         : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div className="MarkdownEditor"&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;h3&gt;Input&lt;/h3&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;textarea onChange={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            <strong class="new">this</strong>.handleChange;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        ref="textarea"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        defaultValue={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            <strong class="new">this</strong>.state.value;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;h3&gt;Output&lt;/h3&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;div className="content"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        dangerouslySetInnerHTML={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                __html: <em class="s0">converter</em>.makeHtml(<strong class="new">this</strong>.state.value)<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            };<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;MarkdownEditor/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">import React from 'react';<em class="line">&#xA;</em></li><li class="l0">class MyComponent extends React.Component {<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>var <em class="s1">a</em> = 1;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;h1 style={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    {margin: 0};<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>}&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    Test<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/h1&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">}<em class="line">&#xA;</em></li><li class="l0">export const <em class="s0">Welcome</em> = ({name}) =&gt; (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;div&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    Hello, {name}.<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="l0">ReactDOM.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;Voting hasVoted='Trainspotting' winner='Trainspotting'<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    pair={pair}/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>document.getElementById('app'),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>asdf<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">class Header extends Component {<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>renderLinks() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>if (<strong class="new">this</strong>.props.authenticated) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>return(<em class="s0">a</em>);<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><em class="s2">}</em> else <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>return [<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;li className="nav-item" key="signin"&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    &lt;Link className="nav-link" to="/signin"&gt;Sign in&lt;/Link&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;/li&gt;,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;li className="nav-item" key="signout"&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    &lt;Link className="nav-link" to="/signup "&gt;Sign Up&lt;/Link&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;/li&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>];<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><em class="s2">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">}<em class="line">&#xA;</em></li><li class="l0">export default class kisharNine extends Component {<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>constructor(props) <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>super(props);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;Navigator initialRoute={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            title: 'My Initial Scene',<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            index: 0<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        };<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    renderScene={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        (route, navigator) =&gt; &lt;MyScene title={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                route.title;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            // Function to call when a new scene should be displayed<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            onForward={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                () =&gt; {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    const <em class="s1">nextIndex</em> = route.index + 1;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    navigator.push({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                        index: <em class="s1">nextIndex</em>,<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                        title: 'Scene ' + <em class="s1">nextIndex</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    });<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            // Function to call to go back to the previous scene<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            onBack={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                () =&gt; {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    if (route.index &gt; 0) {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                        navigator.pop();<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }/&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">}<em class="line">&#xA;</em></li></ol></div>
+<p>Scope analysis does not provide support for undeclared variables.</p><p><em>0</em> instances of <strong>missing semicolons</strong> counted.</p><p><em>1</em> unnecessary instances of the keyword <strong>new</strong> counted.</p><div class="beautify" data-prettydiff-ignore="true"><ol class="count"><li>1</li><li class="fold" title="folds from line 2 to line 17">-2</li><li class="fold" title="folds from line 3 to line 16">-3</li><li class="fold" title="folds from line 4 to line 15">-4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li class="fold" title="folds from line 18 to line 36">-18</li><li>19</li><li class="fold" title="folds from line 20 to line 24">-20</li><li>21</li><li>22</li><li>23</li><li>24</li><li class="fold" title="folds from line 25 to line 35">-25</li><li>26</li><li>27</li><li>28</li><li class="fold" title="folds from line 29 to line 34">-29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li class="fold" title="folds from line 37 to line 51">-37</li><li class="fold" title="folds from line 38 to line 50">-38</li><li>39</li><li>40</li><li>41</li><li class="fold" title="folds from line 42 to line 49">-42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li class="fold" title="folds from line 52 to line 66">-52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li><li class="fold" title="folds from line 85 to line 87">-85</li><li>86</li><li>87</li><li class="fold" title="folds from line 88 to line 94">-88</li><li class="fold" title="folds from line 89 to line 93">-89</li><li>90</li><li>91</li><li>92</li><li>93</li><li>94</li><li class="fold" title="folds from line 95 to line 98">-95</li><li>96</li><li>97</li><li>98</li><li>99</li><li>100</li><li class="fold" title="folds from line 101 to line 123">-101</li><li class="fold" title="folds from line 102 to line 104">-102</li><li>103</li><li>104</li><li class="fold" title="folds from line 105 to line 107">-105</li><li>106</li><li>107</li><li class="fold" title="folds from line 108 to line 110">-108</li><li>109</li><li>110</li><li class="fold" title="folds from line 111 to line 117">-111</li><li class="fold" title="folds from line 112 to line 116">-112</li><li>113</li><li>114</li><li>115</li><li>116</li><li>117</li><li class="fold" title="folds from line 118 to line 122">-118</li><li class="fold" title="folds from line 119 to line 121">-119</li><li>120</li><li>121</li><li>122</li><li>123</li><li class="fold" title="folds from line 124 to line 127">-124</li><li>125</li><li>126</li><li>127</li><li>128</li><li>129</li><li class="fold" title="folds from line 130 to line 152">-130</li><li class="fold" title="folds from line 131 to line 133">-131</li><li>132</li><li>133</li><li class="fold" title="folds from line 134 to line 136">-134</li><li>135</li><li>136</li><li class="fold" title="folds from line 137 to line 139">-137</li><li>138</li><li>139</li><li class="fold" title="folds from line 140 to line 146">-140</li><li class="fold" title="folds from line 141 to line 145">-141</li><li>142</li><li>143</li><li>144</li><li>145</li><li>146</li><li class="fold" title="folds from line 147 to line 151">-147</li><li class="fold" title="folds from line 148 to line 150">-148</li><li>149</li><li>150</li><li>151</li><li>152</li><li class="fold" title="folds from line 153 to line 156">-153</li><li>154</li><li>155</li><li>156</li><li>157</li><li>158</li><li class="fold" title="folds from line 159 to line 171">-159</li><li class="fold" title="folds from line 160 to line 170">-160</li><li class="fold" title="folds from line 161 to line 163">-161</li><li>162</li><li>163</li><li>164</li><li>165</li><li>166</li><li>167</li><li>168</li><li>169</li><li>170</li><li>171</li><li class="fold" title="folds from line 172 to line 216">-172</li><li class="fold" title="folds from line 173 to line 175">-173</li><li>174</li><li>175</li><li class="fold" title="folds from line 176 to line 184">-176</li><li>177</li><li>178</li><li>179</li><li>180</li><li>181</li><li>182</li><li>183</li><li>184</li><li class="fold" title="folds from line 185 to line 187">-185</li><li>186</li><li>187</li><li class="fold" title="folds from line 188 to line 215">-188</li><li class="fold" title="folds from line 189 to line 214">-189</li><li>190</li><li>191</li><li>192</li><li>193</li><li>194</li><li>195</li><li>196</li><li>197</li><li>198</li><li>199</li><li>200</li><li>201</li><li>202</li><li>203</li><li>204</li><li>205</li><li>206</li><li>207</li><li>208</li><li>209</li><li>210</li><li>211</li><li>212</li><li>213</li><li>214</li><li>215</li><li>216</li><li class="fold" title="folds from line 217 to line 220">-217</li><li>218</li><li>219</li><li>220</li><li>221</li><li>222</li><li>223</li><li class="fold" title="folds from line 224 to line 258">-224</li><li class="fold" title="folds from line 225 to line 227">-225</li><li>226</li><li>227</li><li class="fold" title="folds from line 228 to line 236">-228</li><li class="fold" title="folds from line 229 to line 235">-229</li><li>230</li><li>231</li><li>232</li><li>233</li><li>234</li><li>235</li><li>236</li><li class="fold" title="folds from line 237 to line 257">-237</li><li class="fold" title="folds from line 238 to line 256">-238</li><li>239</li><li>240</li><li>241</li><li>242</li><li>243</li><li>244</li><li>245</li><li>246</li><li>247</li><li>248</li><li>249</li><li>250</li><li>251</li><li>252</li><li>253</li><li>254</li><li>255</li><li>256</li><li>257</li><li>258</li><li class="fold" title="folds from line 259 to line 262">-259</li><li>260</li><li>261</li><li>262</li><li>263</li><li>264</li><li class="fold" title="folds from line 265 to line 276">-265</li><li class="fold" title="folds from line 266 to line 275">-266</li><li>267</li><li class="fold" title="folds from line 268 to line 274">-268</li><li>269</li><li>270</li><li>271</li><li>272</li><li>273</li><li>274</li><li>275</li><li>276</li><li class="fold" title="folds from line 277 to line 281">-277</li><li>278</li><li>279</li><li>280</li><li>281</li><li class="fold" title="folds from line 282 to line 287">-282</li><li>283</li><li>284</li><li>285</li><li>286</li><li>287</li><li>288</li><li class="fold" title="folds from line 289 to line 304">-289</li><li class="fold" title="folds from line 290 to line 303">-290</li><li class="fold" title="folds from line 291 to line 293">-291</li><li>292</li><li class="fold" title="folds from line 293 to line 302">-293</li><li class="fold" title="folds from line 294 to line 301">-294</li><li>295</li><li>296</li><li>297</li><li>298</li><li>299</li><li>300</li><li>301</li><li>302</li><li>303</li><li>304</li><li class="fold" title="folds from line 305 to line 345">-305</li><li class="fold" title="folds from line 306 to line 308">-306</li><li>307</li><li>308</li><li>309</li><li class="fold" title="folds from line 310 to line 344">-310</li><li class="fold" title="folds from line 311 to line 343">-311</li><li>312</li><li>313</li><li>314</li><li>315</li><li>316</li><li>317</li><li>318</li><li>319</li><li>320</li><li>321</li><li>322</li><li>323</li><li>324</li><li>325</li><li>326</li><li>327</li><li>328</li><li>329</li><li>330</li><li>331</li><li>332</li><li>333</li><li>334</li><li>335</li><li>336</li><li>337</li><li>338</li><li>339</li><li>340</li><li>341</li><li>342</li><li>343</li><li>344</li><li>345</li></ol><ol class="data"><li class="c0">    /*prettydiff.com space_close:false, variable_list:list*/<em class="line">&#xA;</em></li><li class="l0">var <em class="s0">ListItem</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;li className="ListItem"&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;a href={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        "/items/" + <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            .props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            .item<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            .id;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        this.props.item.name<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;/a&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/li&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">List</em> = React.createClass({<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render    : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return &lt;ul className="List"&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>    this.renderList()<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>&lt;/ul&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>renderList: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.map(function (<em class="s2">item</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>return &lt;ListItem item={<em class="s2">item</em>}<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    key={<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>        <em class="s2">item</em>.id;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    }/&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="s2">}</em>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">Mist</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>renderList: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>.map(function (<em class="s2">item</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>return &lt;ListItem item={<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>        return &lt;tag&gt;{<em class="s2">item</em>}&lt;/tag&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    }<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    key={<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>        <em class="s2">item</em>.id;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    }/&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="s2">}</em>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">content</em> = (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>&lt;Nav&gt; {/* child comment, put {} around */}<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>    &lt;Person /* multi<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span> line<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span> comment */<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        //attr="test"<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        name={<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>            window.isLoggedIn<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>                ? window.name<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>                : '';<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        }<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>        // end of line comment<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>    /&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>&lt;/Nav&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">qwer</em> = &lt;Dropdown&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    A dropdown list<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    &lt;Menu&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>        &lt;MenuItem&gt;Do Something&lt;/MenuItem&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>        &lt;MenuItem&gt;Do Something Fun!&lt;/MenuItem&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>        &lt;MenuItem&gt;Do Something Else&lt;/MenuItem&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    &lt;/Menu&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;/DropDown&gt;;<em class="line">&#xA;</em></li><li class="l0">render(dropdown);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="c0">    // JSX<em class="line">&#xA;</em></li><li class="l0">var <em class="s0">box</em> = &lt;Box&gt; {<em class="line">&#xA;</em></li><li class="l0">    shouldShowAnswer(user)<em class="line">&#xA;</em></li><li class="l0">        ? &lt;Answer value={false}&gt;no&lt;/Answer&gt;<em class="line">&#xA;</em></li><li class="l0">        : &lt;Box.Comment&gt;<em class="line">&#xA;</em></li><li class="l0">            Text Content<em class="line">&#xA;</em></li><li class="l0">        &lt;/Box.Comment&gt;;<em class="line">&#xA;</em></li><li class="l0">} &lt;/Box&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">a</em> = function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span>return &lt;tsdf&gt;asdf&lt;/tsdf&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">HelloMessage</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l1">    </span>render: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>return &lt;div&gt;Hello {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>    <strong class="new">this</strong>.props.name;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>}&lt;/div&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l1">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;HelloMessage name="John"/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">Timer</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentDidMount   : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.interval = setInterval(<strong class="new">this</strong>.tick, 1000);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentWillUnmount: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>clearInterval(<strong class="new">this</strong>.interval);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>getInitialState     : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return {secondsElapsed: 0};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render              : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div&gt;Seconds Elapsed: {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    <strong class="new">this</strong>.state.secondsElapsed;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>}&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>tick                : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>secondsElapsed: <strong class="new">this</strong>.state.secondsElapsed + 1<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;Timer/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">Timer</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentDidMount   : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.interval = setInterval(<strong class="new">this</strong>.tick, 1000);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>componentWillUnmount: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>clearInterval(<strong class="new">this</strong>.interval);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>getInitialState     : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return {secondsElapsed: 0};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render              : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div&gt;Seconds Elapsed: {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    <strong class="new">this</strong>.state.secondsElapsed;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>}&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>tick                : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>secondsElapsed: <strong class="new">this</strong>.state.secondsElapsed + 1<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;Timer/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">TodoList</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>var <em class="s1">createItem</em> = function (<em class="s2">itemText</em>) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>return &lt;li&gt;{<em class="s2">itemText</em>}&lt;/li&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><em class="s2">}</em>;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return &lt;ul&gt;{<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>    <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>        .props<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>        .items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>        .map(<em class="s1">createItem</em>);<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>}&lt;/ul&gt;;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>}),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">TodoApp</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>getInitialState: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return {items: [], text: ''};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>handleSubmit   : function (<em class="s1">e</em>) <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><em class="s1">e</em>.preventDefault();<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>var <em class="s1">nextItems</em> = <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.state<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.concat([<strong class="new">this</strong>.state.text]),<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="s1">nextText</em>  = '';<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({items: <em class="s1">nextItems</em>, text: <em class="s1">nextText</em>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>onChange       : function (<em class="s1">e</em>) <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({text: <em class="s1">e</em>.target.value});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render         : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;h3&gt;TODO&lt;/h3&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;TodoList items={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        <strong class="new">this</strong>.state.items;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;form onSubmit={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        <strong class="new">this</strong>.handleSubmit;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        &lt;input onChange={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                <strong class="new">this</strong>.onChange;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            value={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                <strong class="new">this</strong>.state.text;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        &lt;button&gt;{<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            'Add #' + (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    .state<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    .items<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    .length + 1<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            );<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }&lt;/button&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;/form&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;TodoApp/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">var <em class="s0">converter</em> = <strong class='new'>new</strong> Showdown.converter(),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s0">MarkdownEditor</em> = React.createClass({<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>getInitialState: function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return {value: 'Type some *markdown* here!'};<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>handleChange   : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><strong class="new">this</strong>.setState({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>value: <strong class="new">this</strong><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.refs<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.textarea<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.getDOMNode()<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l1">    </span>.value<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em>,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span>render         : function () <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;div className="MarkdownEditor"&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;h3&gt;Input&lt;/h3&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;textarea onChange={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            <strong class="new">this</strong>.handleChange;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        ref="textarea"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        defaultValue={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            <strong class="new">this</strong>.state.value;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;h3&gt;Output&lt;/h3&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    &lt;div className="content"<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        dangerouslySetInnerHTML={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                __html: <em class="s0">converter</em>.makeHtml(<strong class="new">this</strong>.state.value)<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            };<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>});<em class="line">&#xA;</em></li><li class="l0">React.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;MarkdownEditor/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>mountNode<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">import React from 'react';<em class="line">&#xA;</em></li><li class="l0">class MyComponent extends React.Component {<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>var <em class="s1">a</em> = 1;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;h1 style={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    {margin: 0};<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>}&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    Test<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;/h1&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">}<em class="line">&#xA;</em></li><li class="l0">export const <em class="s0">Welcome</em> = ({name}) =&gt; (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;div&gt;<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    Hello, {name}.<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;/div&gt;<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="l0">ReactDOM.render (<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>&lt;Voting hasVoted='Trainspotting' winner='Trainspotting'<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>    pair={pair}/&gt;,<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>document.getElementById('app'),<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>asdf<em class="line">&#xA;</em></li><li class="l0">);<em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0">class Header extends Component {<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>renderLinks() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>if (<strong class="new">this</strong>.props.authenticated) <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>return(<em class="s0">a</em>);<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><em class="s2">}</em> else <em class="s2">{</em><em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>return [<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;li className="nav-item" key="signin"&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    &lt;Link className="nav-link" to="/signin"&gt;Sign in&lt;/Link&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;/li&gt;,<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;li className="nav-item" key="signout"&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>    &lt;Link className="nav-link" to="/signup "&gt;Sign Up&lt;/Link&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><span class="l2">    </span>&lt;/li&gt;<em class="line">&#xA;</em></li><li class="l2"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>];<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><em class="s2">}</em><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">}<em class="line">&#xA;</em></li><li class="l0">export default class kisharNine extends Component {<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>constructor(props) <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>super(props);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="s0"><em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span>render() <em class="s1">{</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>return (<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>&lt;Navigator initialRoute={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            title: 'My Initial Scene',<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            index: 0<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        };<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    renderScene={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>        (route, navigator) =&gt; &lt;MyScene title={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                route.title;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            // Function to call when a new scene should be displayed<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            onForward={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                () =&gt; {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    const <em class="s1">nextIndex</em> = route.index + 1;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    navigator.push({<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                        index: <em class="s1">nextIndex</em>,<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                        title: 'Scene ' + <em class="s1">nextIndex</em><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    });<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span><em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            // Function to call to go back to the previous scene<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            onBack={<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                () =&gt; {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    if (route.index &gt; 0) {<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                        navigator.pop();<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                    }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>                }<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>            }/&gt;;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span><span class="l1">    </span>    }/&gt;<em class="line">&#xA;</em></li><li class="l1"><span class="l0">    </span><span class="l0">    </span>);<em class="line">&#xA;</em></li><li class="l0"><span class="l0">    </span><em class="s1">}</em><em class="line">&#xA;</em></li><li class="l0">}<em class="line">&#xA;</em></li></ol></div>

tests/simulations.ts

@@ -356,3 +356,3 @@
                 qualifier: "contains",
-                test: `${text.angry}* ${text.none + text.cyan}space_close       ${text.none}: Markup self-closing tags end will end with ' />' instead of '/>'.`
+                test: `${text.angry}* ${text.none + text.cyan}space_close         ${text.none}: Markup self-closing tags end will end with ' />' instead of '/>'.`
             },
@@ -362,3 +362,3 @@ {
                 qualifier: "contains",
-                test: `${text.green}77${text.none} matching options.`
+                test: `${text.green}78${text.none} matching options.`
             },
@@ -365,0 +365,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

6910003

increased by0.21%

Number of package files

311

increased by4.01%

Lines of code

104751

increased by0.26%

Dependency changes

• Updatedsparser@^1.0.14