Remove need for .map(...).join('')

When building UI out of arrays, I expect it to work a bit like React

Unfortunately, that's not how JavaScript works. When using a template
literal, when JavaScript encounters an array, it calls `toString()` on
it. The default `Array.prototype.toString()` joins the elements with
a comma, `this.join(',')`.

When a bunch of commas get inserted in between the elements we're trying
to add to the page, things look ugly. So we need to use `join('')` every
time we want to render an array.

Unless! We override the default `Array.prototype.toString`, and make it
join with empty string by default.

An alternative approach would be to use a tagged template, such as:

    html`<h1>stuff here</h1> ${myArray.map(...)}`

While I might reach for a tagged template in a larger app where globally
changing Array's default join behavior might cause frustration, this
app is small enough that I think think using the global override seems
more useful.

Author: chadoh

docs/index.html

@@ -832,7 +832,7 @@
 },{}],"V5Xt":[function(require,module,exports) {
 "use strict";var e=this&&this.__awaiter||function(e,t,r,n){return new(r||(r=Promise))(function(o,a){function u(e){try{c(n.next(e))}catch(t){a(t)}}function i(e){try{c(n.throw(e))}catch(t){a(t)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(u,i)}c((n=n.apply(e,t||[])).next())})},t=this&&this.__generator||function(e,t){var r,n,o,a,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(a){return function(i){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;u;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,n=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=(o=u.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=t.call(e,u)}catch(i){a=[6,i],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,i])}}},r=this&&this.__spreadArrays||function(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],u=0,i=a.length;u<i;u++,o++)n[o]=a[u];return n},n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var o=n(require("eth-provider")),a=n(require("web3")),u=require("./abi.json"),i=new a.default(o.default("infura")),c=["0xc54c5db63ab0e79fbb9555373b969093deb17859","0xde40122f2a86db6af51e20c79653f6cb8b30eda0"];function l(){return e(this,void 0,void 0,function(){return t(this,function(e){switch(e.label){case 0:return[4,Promise.all(c.map(function(e){return new i.eth.Contract(u,e).getPastEvents("SetupDao",{fromBlock:"earliest"})}))];case 1:return[2,e.sent().reduce(function(e,t){return r(e,t)})]}})})}exports.default=l;
 },{"eth-provider":"IAcA","web3":"iQj9","./abi.json":"Scdb"}],"ZCfc":[function(require,module,exports) {
-"use strict";var t=this&&this.__awaiter||function(t,n,e,r){return new(e||(e=Promise))(function(o,a){function d(t){try{u(r.next(t))}catch(n){a(n)}}function c(t){try{u(r.throw(t))}catch(n){a(n)}}function u(t){var n;t.done?o(t.value):(n=t.value,n instanceof e?n:new e(function(t){t(n)})).then(d,c)}u((r=r.apply(t,n||[])).next())})},n=this&&this.__generator||function(t,n){var e,r,o,a,d={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(e)throw new TypeError("Generator is already executing.");for(;d;)try{if(e=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return d.label++,{value:a[1],done:!1};case 5:d.label++,r=a[1],a=[0];continue;case 7:a=d.ops.pop(),d.trys.pop();continue;default:if(!(o=(o=d.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){d=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){d.label=a[1];break}if(6===a[0]&&d.label<o[1]){d.label=o[1],o=a;break}if(o&&d.label<o[2]){d.label=o[2],d.ops.push(a);break}o[2]&&d.ops.pop(),d.trys.pop();continue}a=n.call(t,d)}catch(c){a=[6,c],r=0}finally{e=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}},e=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("./getSuccesses"));function o(){return t(this,void 0,void 0,function(){var t,e;return n(this,function(n){switch(n.label){case 0:return(t=document.getElementById("data"))?[4,r.default()]:[2];case 1:return e=n.sent(),t.innerHTML="\n    <h1>\n      "+e.length+" Open Enterprise DAOs have been created on mainnet\n    </h1>\n    <table>\n      <thead>\n        <tr>\n          <th>&nbsp;</th>\n          <th>address</th>\n          <th>blockHash</th>\n          <th>blockNumber</th>\n          <th>logIndex</th>\n          <th>transactionHash</th>\n          <th>transactionIndex</th>\n          <th>returnValues.dao</th>\n          <th>event</th>\n          <th>signature</th>\n          <th>raw.data</th>\n        </tr>\n      </thead>\n      <tbody>\n        "+e.map(function(t,n){return'\n          <tr>\n            <td class="right">'+(n+1)+"</td>\n            <td><code>"+t.address+"</code></td>\n            <td><code>"+t.blockHash+"</code></td>\n            <td><code>"+t.blockNumber+"</code></td>\n            <td><code>"+t.logIndex+"</code></td>\n            <td><code>"+t.transactionHash+"</code></td>\n            <td><code>"+t.transactionIndex+'</code></td>\n            <td>\n              <a target="_blank" href="https://mainnet.aragon.org/#/'+t.returnValues.dao+'">\n                <code>'+t.returnValues.dao+"</code>\n              </a>\n            </td>\n            <td><code>"+t.event+"</code></td>\n            <td><code>"+t.signature+"</code></td>\n            <td><code>"+t.raw.data+"</code></td>\n          </tr>\n        "}).join("")+"\n      </tbody>\n    </table>\n  ",[2]}})})}document.body.onload=o;
+"use strict";var t=this&&this.__awaiter||function(t,n,e,r){return new(e||(e=Promise))(function(o,a){function d(t){try{u(r.next(t))}catch(n){a(n)}}function c(t){try{u(r.throw(t))}catch(n){a(n)}}function u(t){var n;t.done?o(t.value):(n=t.value,n instanceof e?n:new e(function(t){t(n)})).then(d,c)}u((r=r.apply(t,n||[])).next())})},n=this&&this.__generator||function(t,n){var e,r,o,a,d={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(e)throw new TypeError("Generator is already executing.");for(;d;)try{if(e=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return d.label++,{value:a[1],done:!1};case 5:d.label++,r=a[1],a=[0];continue;case 7:a=d.ops.pop(),d.trys.pop();continue;default:if(!(o=(o=d.trys).length>0&&o[o.length-1])&&(6===a[0]||2===a[0])){d=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){d.label=a[1];break}if(6===a[0]&&d.label<o[1]){d.label=o[1],o=a;break}if(o&&d.label<o[2]){d.label=o[2],d.ops.push(a);break}o[2]&&d.ops.pop(),d.trys.pop();continue}a=n.call(t,d)}catch(c){a=[6,c],r=0}finally{e=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}},e=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("./getSuccesses"));function o(){return t(this,void 0,void 0,function(){var t,e;return n(this,function(n){switch(n.label){case 0:return(t=document.getElementById("data"))?[4,r.default()]:[2];case 1:return e=n.sent(),t.innerHTML="\n    <h1>\n      "+e.length+" Open Enterprise DAOs have been created on mainnet\n    </h1>\n    <table>\n      <thead>\n        <tr>\n          <th>&nbsp;</th>\n          <th>address</th>\n          <th>blockHash</th>\n          <th>blockNumber</th>\n          <th>logIndex</th>\n          <th>transactionHash</th>\n          <th>transactionIndex</th>\n          <th>returnValues.dao</th>\n          <th>event</th>\n          <th>signature</th>\n          <th>raw.data</th>\n        </tr>\n      </thead>\n      <tbody>\n        "+e.map(function(t,n){return'\n          <tr>\n            <td class="right">'+(n+1)+"</td>\n            <td><code>"+t.address+"</code></td>\n            <td><code>"+t.blockHash+"</code></td>\n            <td><code>"+t.blockNumber+"</code></td>\n            <td><code>"+t.logIndex+"</code></td>\n            <td><code>"+t.transactionHash+"</code></td>\n            <td><code>"+t.transactionIndex+'</code></td>\n            <td>\n              <a target="_blank" href="https://mainnet.aragon.org/#/'+t.returnValues.dao+'">\n                <code>'+t.returnValues.dao+"</code>\n              </a>\n            </td>\n            <td><code>"+t.event+"</code></td>\n            <td><code>"+t.signature+"</code></td>\n            <td><code>"+t.raw.data+"</code></td>\n          </tr>\n        "})+"\n      </tbody>\n    </table>\n  ",[2]}})})}Array.prototype.toString=function(){return this.join("")},document.body.onload=o;
 },{"./getSuccesses":"V5Xt"}]},{},["ZCfc"], null)
-//# sourceMappingURL=/main.897a3e52.js.map</script>
+//# sourceMappingURL=/main.f5ad2319.js.map</script>
 </body></html>

src/main.ts

@@ -1,5 +1,9 @@
 import getSuccesses from './getSuccesses'
 
+Array.prototype.toString = function() {
+  return this.join('')
+}
+
 async function main() {
   const data = document.getElementById('data')
   if (!data) return
@@ -44,7 +48,7 @@ async function main() {
             <td><code>${dao.signature}</code></td>
             <td><code>${dao.raw.data}</code></td>
           </tr>
-        `).join('')}
+        `)}
       </tbody>
     </table>
   `