voterunner

commit

4977b9314e03e724a59bc4faf7cc73c17eec73e3

parent

0e5a0ca498301a2678fa04938198f03ae8418ad4

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2017-11-18 10:17

switch from virtual-dom to preact

smaller and better maintained

Diffstat

2 files changed, 29 insertions, 22 deletions

diff --git a/package.json b/package.json

@@ -12,8 +12,8 @@
   12    12 	},
   13    13 	"devDependencies": {
   14    14 		"mfbs": "^3.1.1",
   15    -1 		"socket.io-client": "^1.7.4",
   16    -1 		"virtual-dom": "^2.1.1"
   -1    15 		"preact": "^8.2.6",
   -1    16 		"socket.io-client": "^1.7.4"
   17    17 	},
   18    18 	"author": "Tobias Bengfort",
   19    19 	"license": "AGPL-3+"

diff --git a/static/src/voterunner.js b/static/src/voterunner.js

@@ -1,5 +1,5 @@
    1    -1 var virtualDom = require('virtual-dom');
    2    -1 var h = require('virtual-dom/h');
   -1     1 var preact = require('preact');
   -1     2 var h = require('preact').h;
    3     3 var MarkdownIt = require('markdown-it');
    4     4 var io = require('socket.io-client');
    5     5 
@@ -98,46 +98,53 @@ var tplNode = function(nodes, node, ID) {
   98    98 		delegateAttrs.disabled = true;
   99    99 	}
  100   100 
  101    -1 	return h('li.node#node-' + node.id, {
   -1   101 	return h('li', {
  102   102 		key: 'node-' + node.id,
  103    -1 		className: classList.join(' '),
   -1   103 		id: 'node-' + node.id,
   -1   104 		className: 'node ' + classList.join(' '),
  104   105 	}, [
  105    -1 		h('article.body', [
  106    -1 			h('header.header', [
  107    -1 				h('button.expand', {
   -1   106 		h('article', {
   -1   107 			className: 'body',
   -1   108 		}, [
   -1   109 			h('header', {
   -1   110 				className: 'header',
   -1   111 			}, [
   -1   112 				h('button', {
   -1   113 					className: 'expand',
  108   114 					title: _(node.expanded ? 'collapse' : 'expand'),
  109   115 				}),
  110    -1 				h('div.votes', '' + getVotes(nodes, node)),
  111    -1 				h('button.delegate', {
   -1   116 				h('div', {className: 'votes'}, '' + getVotes(nodes, node)),
   -1   117 				h('button', {
   -1   118 					className: 'delegate',
  112   119 					title: _('delegate to ') + getName(node),
  113   120 					attributes: delegateAttrs,
  114   121 				}, '+'),
  115    -1 				h('div.name', getName(node)),
   -1   122 				h('div', {className: 'name'}, getName(node)),
  116   123 			]),
  117    -1 			h('div.comment', {
  118    -1 				innerHTML: md.render(node.comment || ''),
   -1   124 			h('div', {
   -1   125 				className: 'comment',
   -1   126 				dangerouslySetInnerHTML: {
   -1   127 					__html: md.render(node.comment || '')
   -1   128 				},
  119   129 			}),
  120   130 		]),
  121    -1 		h('ul.tree', tplFollowers(nodes, node.id, ID)),
   -1   131 		h('ul', {className: 'tree'}, tplFollowers(nodes, node.id, ID)),
  122   132 	]);
  123   133 };
  124   134 
  125   135 var template = function(nodes, ID) {
  126    -1 	return h('ul.tree', tplFollowers(nodes, null, ID));
   -1   136 	return h('ul', {className: 'tree'}, tplFollowers(nodes, null, ID));
  127   137 };
  128   138 
  129   139 var initVDom = function(wrapper, nodes, ID, afterRender) {
  130    -1 	var tree = template(nodes, ID);
  131    -1 	var element = virtualDom.create(tree);
  132   140 	wrapper.innerHTML = '';
  133    -1 	wrapper.appendChild(element);
   -1   141 	var tree = template(nodes, ID);
   -1   142 	var element = preact.render(tree, wrapper);
  134   143 	afterRender();
  135   144 
  136   145 	return function(newState) {
  137   146 		var newTree = template(newState, ID);
  138    -1 		var patches = virtualDom.diff(tree, newTree);
  139    -1 		virtualDom.patch(element, patches);
  140    -1 		tree = newTree;
   -1   147 		preact.render(newTree, wrapper, element);
  141   148 		afterRender();
  142   149 	};
  143   150 };