Trying to improve some of my slow vue code by pre-computing some things.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3718 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/index.json

@@ -1 +1 @@
-{"type":"tildefriends-app","files":{"app.js":"&LPDR4ZoE/qdPy9djmNFUfblXk7W1znMbwuAXp3/zWPI=.sha256","index.html":"&6UkH58DRXi8Y5bnfKWv9CgU5XJ2MWrJ7vzqL/uau5eg=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&t/QhZVt/e3LN3HgSoqe8C81pjq4ZS6uiWcqGOB4NX4Q=.sha256","tf-message.js":"&VNC8ptzGXWAVl9LBBZfrk3YmweA8PQ02d7/wZxWXoAA=.sha256","tf.js":"&Br2AswUPq0krVdr6JF/0r64qF/QLK7iOSC3bf1jqEDI=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
+{"type":"tildefriends-app","files":{"app.js":"&LPDR4ZoE/qdPy9djmNFUfblXk7W1znMbwuAXp3/zWPI=.sha256","index.html":"&LGgeVc7llvfOU2gbnQZ60PGYCgcNjtEdHd1vjnJXLaU=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&uD6N8xUmrjXwIr95nkH/YjuZST6W1Q2MuJ8u6Vcmo6Q=.sha256","tf-message.js":"&KjVh7zASx0TZtZTsS6lJ7T70K9tyXcf+ink4vK7gSWI=.sha256","tf.js":"&r3w4aWGpCJ6J/x/K8hKAx6nohTuXHwVGvTDohJdnhiE=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}

apps/cory/index/index.html

@@ -75,7 +75,6 @@
 					</md-card>
 					<tf-message
 						v-for="message in messages"
-						v-if="!content_json(message).root || !messages.some(m => m.id == content_json(message).root)"
 						v-bind:message="message"
 						v-bind:messages="messages"
 						v-bind:key="message.id"

apps/cory/index/tf-message.js

@@ -1,3 +1,4 @@
+"use strict";
 Vue.component('tf-message', {
 	props: ['message', 'messages', 'votes'],
 	data: function() { return { showRaw: false } },
@@ -9,26 +10,6 @@ Vue.component('tf-message', {
 				return undefined;
 			}
 		},
-		sub_messages: function() {
-			var id = this.message.id;
-			return this.messages.filter(function (x) {
-				try {
-					return JSON.parse(x.content).root == id;
-				} catch {}
-			});
-		},
-		votes2: function() {
-			var id = this.message.id;
-			var votes = this.votes[id] || [];
-			return votes.reduce(function (accum, value) {
-				var expression = JSON.parse(value.content).vote.expression;
-				if (!accum[expression]) {
-					accum[expression] = [];
-				}
-				accum[expression].push(value);
-				return accum;
-			}, {});
-		}
 	},
 	methods: {
 		markdown: function(md) {
@@ -36,13 +17,6 @@ Vue.component('tf-message', {
 			var writer = new commonmark.HtmlRenderer();
 			return writer.render(reader.parse(md));
 		},
-		json: function(message) {
-			try {
-				return JSON.parse(message.content);
-			} catch {
-				return undefined;
-			}
-		},
 	},
 	template: `<md-app class="md-elevation-8" style="margin: 1em" v-if="!content_json || ['pub', 'vote'].indexOf(content_json.type) == -1">
 <md-app-toolbar>
@@ -74,9 +48,9 @@ Vue.component('tf-message', {
 		<div v-else-if="content_json && content_json.type == 'contact'"><tf-user :id="message.author"></tf-user> {{content_json.following ? '==&gt;' : '=/=&gt;'}} <tf-user :id="content_json.contact"></tf-user></div>
 		<div v-else>{{message.content}}</div>
 	</div>
-	<tf-message v-for="sub_message in sub_messages" v-bind:message="sub_message" v-bind:messages="messages" v-bind:votes="votes" v-bind:key="sub_message.id"></tf-message>
+	<tf-message v-for="sub_message in (message.children || [])" v-bind:message="sub_message" v-bind:messages="messages" v-bind:votes="votes" v-bind:key="sub_message.id"></tf-message>
-	<md-chip v-for="vote in Object.keys(votes2)" v-bind:key="vote">
+	<md-chip v-for="vote in Object.keys(votes[message.id] || {})" v-bind:key="vote">
-		{{vote + (votes2[vote].length > 1 ? ' (' + votes2[vote].length + ')' : '')}}
+		{{vote + (votes[message.id][vote].length > 1 ? ' (' + votes[message.id][vote].length + ')' : '')}}
 	</md-chip>
 </md-app-content>
 </md-app>`,

apps/cory/index/tf-user.js

@@ -1,3 +1,4 @@
+"use strict";
 Vue.component('tf-user', {
 	data: function() { return {
 		show_user_dialog: false,

apps/cory/index/tf.js

@@ -19,9 +19,32 @@ var g_data_initial = JSON.parse(JSON.stringify(g_data));
 window.addEventListener('message', function(event) {
 	var key = Object.keys(event.data)[0];
 	if (key == 'message') {
+		event.data[key].children = [];
+		var found = false;
+		var root = JSON.parse(event.data[key].content).root;
+		if (root) {
+			for (let message of g_data.messages) {
+				if (root == message.id) {
+					message.children.push(event.data[key]);
+					message.children.sort((x, y) => y.timestamp - x.timestamp);
+					found = true;
+				}
+			}
+		}
+		if (!found) {
+			for (let message of g_data.messages) {
+				if (JSON.parse(message.content).root == event.data[key].id) {
+					event.data[key].children.push(message);
+					event.data[key].children.sort((x, y) => y.timestamp - x.timestamp);
+					g_data.messages.splice(g_data.messages.indexOf(message), 1);
+					break;
+				}
+			}
+		}
+		if (!found) {
 			g_data.messages.push(event.data[key]);
 			g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
-		g_data.messages.splice(100);
+		}
 	} else if (key + 's' in g_data && Array.isArray(g_data[key + 's'])) {
 		g_data[key + 's'].push(event.data[key]);
 	} else if (key == 'user') {
@@ -44,11 +67,15 @@ window.addEventListener('message', function(event) {
 		g_data.apps = event.data.apps;
 	} else if (key == 'votes') {
 		event.data.votes.forEach(function(vote) {
-			var link = JSON.parse(vote.content).vote.link;
+			var content = JSON.parse(vote.content);
+			var link = content.vote.link;
 			if (!g_data.votes[link]) {
-				Vue.set(g_data.votes, link, []);
+				Vue.set(g_data.votes, link, {});
 			}
-			g_data.votes[link].push(vote);
+			if (!g_data.votes[link][content.vote.expression]) {
+				Vue.set(g_data.votes[link], content.vote.expression, []);
+			}
+			g_data.votes[link][content.vote.expression].push({author: vote.author, value: content.vote.value});
 		});
 	} else if (key == 'clear') {
 		Object.keys(g_data_initial).forEach(function(key) {