Convert to hyperscript

package.json

@@ -9,6 +9,7 @@
     "emoji-named-characters": "^1.0.2",
     "emoji-server": "^1.0.0",
     "human-time": "^0.0.1",
+    "hyperscript": "2.0.2",
     "lrucache": "^1.0.2",
     "pull-cat": "^1.1.11",
     "pull-paramap": "^1.2.1",

render.js

@@ -4,6 +4,7 @@ var marked = require("ssb-marked");
 var htime = require("human-time");
 var emojis = require("emoji-named-characters");
 var cat = require("pull-cat");
+var h = require('hyperscript');
 
 var emojiDir = path.join(require.resolve("emoji-named-characters"), "../pngs");
 
@@ -39,17 +40,11 @@ MdRenderer.prototype.urltransform = function(href) {
 };
 
 MdRenderer.prototype.image = function(href, title, text) {
-  return (
+  return h('img',
-    '<img src="' +
+	   { src: this.opts.img_base + href,
-    this.opts.img_base +
+	     alt: text,
-    escape(href) +
+	     title: title
-    '"' +
+	   }).outerHTML;
-    ' alt="' +
-    text +
-    '"' +
-    (title ? ' title="' + title + '"' : "") +
-    (this.options.xhtml ? "/>" : ">")
-  );
 };
 
 function renderEmoji(emoji) {
@@ -59,16 +54,12 @@ function renderEmoji(emoji) {
     ? opts.blob_base + encodeURIComponent(mentions[emoji])
     : emoji in emojis && opts.emoji_base + escape(emoji) + '.png';
   return url
-    ? '<img src="' +
+	? h('img.ssb-emoji',
-        url +
+	    { src: url,
-        '"' +
+	      alt: ':' + escape(emoji) + ':',
-        ' alt=":' +
+	      title: ':' + escape(emoji) + ':',
-        escape(emoji) +
+	      height: 16, width: 16
-        ':"' +
+	    }).outerHTML
-        ' title=":' +
-        escape(emoji) +
-        ':"' +
-        ' class="ssb-emoji" height="16" width="16">'
     : ":" + emoji + ":";
 }
 
@@ -99,44 +90,46 @@ function wrap(before, after) {
   };
 }
 
+function callToAction() {
+  return h('a.call-to-action',
+	   { href: 'https://www.scuttlebutt.nz' },
+	   'Join Scuttlebutt now').outerHTML;
+}
+
+function toolTipTop() {
+  return h('span.top-tip',
+	   'You are reading content from ',
+	   h('a', { href: 'https://www.scuttlebutt.nz' },
+	     'Scuttlebutt')).outerHTML;
+}
+
 function renderAbout(opts, about, showAllHTML = "") {
+  var figCaption = h('figcaption');
+  figCaption.innerHTML = 'Feed of ' + about.name + '<br>' +
+	(about.description != undefined ? 
+	 marked(about.description, opts.marked) : '');
   return pull(
     pull.map(renderMsg.bind(this, opts)),
-    wrap(
+    wrap(toolTipTop() + '<main>' +
-      '<span class="top-tip">You are reading content from ' +
+	 h('article',
-        '<a href="https://www.scuttlebutt.nz">Scuttlebutt</a>' +
+	   h('header',
-      '</span>' +
+	     h('figure',
-      '<main>' +
+	       h('img',
-      '<article><header><figure>' +
+		 { src: opts.img_base + about.image,
-      '<img src="' + opts.img_base + escape(about.image) + '" ' +
+		   height: 200,
-            'height="200" width="200"><figcaption>' +
+		   width: 200
-	    'Feed of ' + about.name + '<br/>' +
+		 }),
-	    (about.description != undefined ? 
+	       figCaption)
-	     marked(about.description, opts.marked) : '') +
+	    )).outerHTML,
-	    '</figcaption></figure></header></article>', 
+	 showAllHTML + '</main>' + callToAction())
-
-      showAllHTML + '</main>' +
-      '<a class="call-to-action" href="https://www.scuttlebutt.nz">' +
-        'Join Scuttlebutt now' +
-      '</a>'
-    )
   );
 }
 
 function renderThread(opts, showAllHTML = "") {
   return pull(
     pull.map(renderMsg.bind(this, opts)),
-    wrap(
+    wrap(toolTipTop() + '<main>', 
-      '<span class="top-tip">You are reading content from ' +
+	 showAllHTML + '</main>' + callToAction())
-        '<a href="https://www.scuttlebutt.nz">Scuttlebutt</a>' +
-      '</span>' +
-      '<main>',
-
-      showAllHTML + '</main>' +
-      '<a class="call-to-action" href="https://www.scuttlebutt.nz">' +
-        'Join Scuttlebutt now' +
-      '</a>'
-    )
   );
 }
 
@@ -320,45 +313,32 @@ function docWrite(str) {
 function renderMsg(opts, msg) {
   var c = msg.value.content || {};
   var name = encodeURIComponent(msg.key);
-  return (
+  return h('article#' + name,
-    '<article id="' +
+	   h('header',
-    name +
+	     h('figure',
-    '">' +
+	       h('img', { alt: '',
-      '<header>' +
+			  src: opts.img_base + msg.author.image,
-        '<figure>' +
+			  height: 50, width: 50 }),
-          '<img alt="" ' +
+	       h('figcaption',
-            'src="' + opts.img_base + escape(msg.author.image) + '" ' +
+		 h('a.ssb-avatar-name',
-            'height="50" width="50">' +
+		   { href: opts.base + escape(msg.value.author) },
-          '<figcaption>' +
+		   msg.author.name),
-            '<a class="ssb-avatar-name"' +
+		 msgTimestamp(msg, opts.base + name)))),
-            ' href="' + opts.base +
+	   render(opts, c)).outerHTML;
-            escape(msg.value.author) +
-            '"' +
-            ">" + msg.author.name + "</a>" +
-            msgTimestamp(msg, opts.base + name) +
-          '</figcaption>' +
-        '</figure>' +
-      '</header>' +
-      render(opts, c) +
-    "</article>"
-  );
 }
 
 function msgTimestamp(msg, link) {
   var date = new Date(msg.value.timestamp);
   var isoStr = date.toISOString();
-  return (
+  return h('time.ssb-timestamp',
-    '<time class="ssb-timestamp" datetime="' + isoStr + '">' +
+	   { datetime: isoStr },
-      '<a ' +
+	   h('a',
-      'href="' + link + '" ' +
+	     { href: link,
-      'title="' + isoStr + '" ' +
+	       title: isoStr },
-      '>' + formatDate(date) + '</a>' +
+	     formatDate(date)));
-    '</time>'
-  );
 }
 
 function formatDate(date) {
-  // return date.toISOString().replace('T', ' ')
   return htime(date);
 }
 
@@ -366,106 +346,102 @@ function render(opts, c) {
   var base = opts.base;
   if (c.type === "post") {
     var channel = c.channel
-      ? '<div class="top-right"><a href="' + base + 'channel/' + c.channel + '">#' + c.channel + "</a></div>"
+	? h('div.top-right',
-      : "";
+	    h('a',
-    return channel + renderPost(opts, c);
+	      { href: base + 'channel/' + c.channel },
+	      '#' + c.channel))
+	: "";
+    return [channel, renderPost(opts, c)];
   } else if (c.type == "vote" && c.vote.expression == "Dig") {
     var channel = c.channel
-      ? ' in <a href="' + base + 'channel/' + c.channel + '">#' + c.channel + "</a>"
+	? [' in ',
-      : "";
+	   h('a',
+	     { href: base + 'channel/' + c.channel },
+	     '#' + c.channel)]
+	: "";
     var linkedText = "this";
     if (typeof c.vote.linkedText != "undefined")
-      linkedText = c.vote.linkedText.substring(0, 75);
+	linkedText = c.vote.linkedText.substring(0, 75);
-    return ('<span class="status">' +
+    return h('span.status',
-      'Liked ' +
+	     ['Liked ',
-      '<a href="' + base +
+	      h('a', { href: base + c.vote.link }, linkedText),
-      c.vote.link +
+	      channel]);
-      '">' +
-      linkedText +
-      "</a>" +
-      channel +
-      '</span>'
-    );
   } else if (c.type == "vote") {
     var linkedText = "this";
     if (typeof c.vote.linkedText != "undefined")
       linkedText = c.vote.linkedText.substring(0, 75);
-    return '<span class="status">' +
+      return h('span.status',
-      'Voted <a href="' + base + c.vote.link + '">' + linkedText + "</a>" +
+	       ['Voted ',
-      '</span>';
+		h('a', { href: base + c.vote.link }, linkedText)]);
   } else if (c.type == "contact" && c.following) {
     var name = c.contact;
-    if (typeof c.contactAbout != "undefined") name = c.contactAbout.name;
+    if (typeof c.contactAbout != "undefined")
-    return '<span class="status">' +
+	name = c.contactAbout.name;
-      'Followed <a href="' + base + c.contact + '">' + name + "</a>" +
+    return h('span.status',
-      '</span>';
+	     ['Followed ',
+	      h('a', { href: base + c.contact }, name)]);
   } else if (c.type == "contact" && !c.following) {
     var name = c.contact;
-    if (typeof c.contactAbout != "undefined") name = c.contactAbout.name;
+    if (typeof c.contactAbout != "undefined")
-    return '<span class="status">' +
+	name = c.contactAbout.name;
-      'Unfollowed <a href="' + base + c.contact + '">' + name + "</a>" +
+    return h('span.status',
-      '</span>';
+	     ['Unfollowed ',
+	      h('a', { href: base + c.contact }, name)]);
   } else if (typeof c == "string") {
-    return '<span class="status">' +
+    return h('span.status', 'Wrote something private')
-      "Wrote something private" +
-      '</span>';
   }
   else if (c.type == "about") {
-    return '<span class="status">' +
+    return [h('span.status', 'Changed something in about'),
-      "Changed something in about" +
+ 	    renderDefault(c)];
-      '</span>' +
-      renderDefault(c);
   }
   else if (c.type == "issue") {
-    return '<span class="status">' +
+    return [h('span.status',
-      "Created a git issue" + (c.repoName != undefined ? " in repo " + c.repoName : "") + renderPost(opts, c) +
+	     "Created a git issue" +
-      '</span>';
+	      (c.repoName != undefined ? " in repo " + c.repoName : ""),
+	      renderPost(opts, c))];
   }
   else if (c.type == "git-update") {
-    return '<span class="status">' +
+    return h('span.status',
-      "Did a git update " + (c.repoName != undefined ? " in repo " + c.repoName : "") +
+	     "Did a git update " +
-      "<br/>" +
+	     (c.repoName != undefined ? " in repo " + c.repoName : "") +
-     (c.commits != undefined ? c.commits.map(com => { return "-" +com.title; }).join("<br/>") : "") +
+	     '<br>' +
-      '</span>'
+	     (c.commits != undefined ?
+	      c.commits.map(com => { return "-" +com.title; }).join('<br>') : ""));
   }
   else if (c.type == "ssb-dns") {
-    return '<span class="status">' +
+    return [h('span.status', 'Updated DNS'), renderDefault(c)];
-      "Updated DNS" +
-      '</span>' +
-      renderDefault(c);
   }
   else if (c.type == "pub") {
-    return '<span class="status">' +
+    return h('span.status', 'Connected to the pub ' + c.address.host);
-      "Connected to the pub " + c.address.host +
-      '</span>'
   }
   else if (c.type == "channel" && c.subscribed)
-    return '<span class="status">' +
+    return h('span.status',
-      'Subscribed to channel <a href="' + base + 'channel/' +
+	     'Subscribed to channel ',
-      c.channel +
+	     h('a',
-      '">#' +
+	       { href: base + 'channel/' + c.channel },
-      c.channel +
+	       '#' + c.channel));
-      "</a>" +
-      '</span>';
   else if (c.type == "channel" && !c.subscribed)
-    return '<span class="status">' +
+    return h('span.status',
-      'Unsubscribed from channel <a href="' + base + 'channel/' +
+	     'Unsubscribed from channel ',
-      c.channel +
+	     h('a',
-      '">#' +
+	       { href: base + 'channel/' + c.channel },
-      c.channel +
+	       '#' + c.channel))
-      "</a>" +
-      '</span>';
   else return renderDefault(c);
 }
 
 function renderPost(opts, c) {
   opts.mentions = {};
-  if (Array.isArray(c.mentions)) c.mentions.forEach(function (link) {
+  if (Array.isArray(c.mentions)) {
-    if (link && link.name && link.link) opts.mentions[link.name] = link.link;
+      c.mentions.forEach(function (link) {
-  });
+	  if (link && link.name && link.link)
-  return '<section>' + marked(String(c.text), opts.marked) + "</section>";
+	      opts.mentions[link.name] = link.link;
+      });
+  }
+  var s = h('section');
+  s.innerHTML = marked(String(c.text), opts.marked);
+  return s;
 }
 
 function renderDefault(c) {
-  return "<pre>" + JSON.stringify(c, 0, 2) + "</pre>";
+  return h('pre', JSON.stringify(c, 0, 2));
 }