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
This commit is contained in:
Cory McWilliams 2021-12-29 16:01:34 +00:00
parent 0bf216bb1a
commit 62e9dfea90
5 changed files with 40 additions and 39 deletions

View File

@ -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"}}

View File

@ -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"

View File

@ -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>
<md-chip v-for="vote in Object.keys(votes2)" v-bind:key="vote">
{{vote + (votes2[vote].length > 1 ? ' (' + votes2[vote].length + ')' : '')}}
<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(votes[message.id] || {})" v-bind:key="vote">
{{vote + (votes[message.id][vote].length > 1 ? ' (' + votes[message.id][vote].length + ')' : '')}}
</md-chip>
</md-app-content>
</md-app>`,

View File

@ -1,3 +1,4 @@
"use strict";
Vue.component('tf-user', {
data: function() { return {
show_user_dialog: false,
@ -49,7 +50,7 @@ Vue.component('tf-user', {
},
},
template: `<span @click="show_user()">
{{users[id] && users[id].name ? users[id].name : id}}
{{users[id] && users[id].name ? users[id].name : id}}
<md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip>
<md-dialog :md-active.sync="show_user_dialog">
<md-dialog-title>{{users[id] && users[id].name ? users[id].name : id}}</md-dialog-title>

View File

@ -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') {
g_data.messages.push(event.data[key]);
g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
g_data.messages.splice(100);
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);
}
} 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) {