fix: slow post message

src/application/index.js

@@ -59,31 +59,37 @@ export default class ModV {
     });
 
     this.$worker.addEventListener("message", e => {
+      const message = e.data;
+      const { type } = message;
+
+      // if (
+      //   type !== "metrics/SET_FPS_MEASURE" &&
+      //   type !== "modules/UPDATE_ACTIVE_MODULE_PROP" &&
+      //   type !== "beats/SET_BPM" &&
+      //   type !== "beats/SET_KICK" &&
+      //   type !== "tick"
+      // ) {
+      //   console.log(`⚙️%c ${type}`, "color: red");
+      // }
+
       if (e.data.type === "tick" && this.ready) {
         this.tick(e.data.payload);
         return;
       }
 
-      const message = e.data;
-      const { type } = message;
-
       if (Array.isArray(message)) {
         return;
       }
       const payload = e.data.payload ? JSON.parse(e.data.payload) : undefined;
 
-      // if (
-      //   type !== "metrics/SET_FPS_MEASURE" &&
-      //   type !== "modules/UPDATE_ACTIVE_MODULE_PROP" &&
-      //   type !== "beats/SET_BPM" &&
-      //   type !== "beats/SET_KICK"
-      // ) {
-      if (this.debug) {
-        console.log(`⚙️%c ${type}`, "color: red", payload);
+      if (type === "commitQueue") {
+        for (let i = 0; i < payload.length; i++) {
+          const commit = payload[i];
+          store.commit(commit.type, commit.payload);
+        }
+      } else {
+        store.commit(type, payload);
       }
-      // }
-
-      store.commit(type, payload);
     });
 
     const that = this;
@@ -92,10 +98,9 @@ export default class ModV {
       state: store.state,
       getters: store.getters,
 
-      async commit(...args) {
-        return await that.$asyncWorker.postMessage(
+      commit(...args) {
+        return that.$worker.postMessage(
           {
-            __async: true,
             type: "commit",
             identifier: args[0],
             payload: args[1]
@@ -104,8 +109,8 @@ export default class ModV {
         );
       },
 
-      async dispatch(...args) {
-        return await that.$asyncWorker.postMessage(
+      dispatch(...args) {
+        return that.$asyncWorker.postMessage(
           {
             __async: true,
             type: "dispatch",

src/application/worker/index.worker.js

@@ -9,42 +9,105 @@ async function start() {
   const store = require("./store").default;
   const loop = require("./loop").default;
   const grabCanvasPlugin = require("../plugins/grab-canvas").default;
+  const get = require("lodash.get");
 
   const { tick: frameTick } = require("./frame-counter");
   const { getFeatures, setFeatures } = require("./audio-features");
   // const featureAssignmentPlugin = require("../plugins/feature-assignment");
 
   let interval = store.getters["fps/interval"];
 
+  const commitQueue = [];
+
   store.subscribe(mutation => {
-    const { type, payload } = mutation;
+    const { type: mutationType, payload: mutationPayload } = mutation;
 
-    if (type === "beats/SET_BPM" || type === "fps/SET_FPS") {
-      store.dispatch("tweens/updateBpm", { bpm: payload.bpm });
+    if (mutationType === "beats/SET_BPM" || mutationType === "fps/SET_FPS") {
+      store.dispatch("tweens/updateBpm", { bpm: mutationPayload.bpm });
     }
 
-    if (type === "beats/SET_KICK" && payload.kick === lastKick) {
+    if (
+      mutationType === "beats/SET_KICK" &&
+      mutationPayload.kick === lastKick
+    ) {
       return;
-    } else if (type === "beats/SET_KICK" && payload.kick !== lastKick) {
-      lastKick = payload.kick;
+    } else if (
+      mutationType === "beats/SET_KICK" &&
+      mutationPayload.kick !== lastKick
+    ) {
+      lastKick = mutationPayload.kick;
     }
 
-    if (type === "fps/SET_FPS") {
+    if (mutationType === "fps/SET_FPS") {
       interval = store.getters["fps/interval"];
     }
 
     if (
-      type === "modules/UPDATE_ACTIVE_MODULE" &&
-      (payload.key !== "props" || payload.key !== "meta")
+      mutationType === "modules/UPDATE_ACTIVE_MODULE" &&
+      (mutationPayload.key !== "props" || mutationPayload.key !== "meta")
     ) {
       return;
     }
 
+    const {
+      inputs: { inputs, inputLinks }
+    } = store.state;
+
+    // Update mutation type Input Links
+    const mutationTypeInputLinks = Object.values(inputLinks).filter(
+      link => link.type === "mutation"
+    );
+    const inputLinksLength = mutationTypeInputLinks.length;
+    for (let i = 0; i < inputLinksLength; ++i) {
+      const link = mutationTypeInputLinks[i];
+      const inputId = link.id;
+      const bind = inputs[inputId];
+
+      const { type, location, data } = bind;
+
+      const { location: linkLocation, match } = link;
+
+      if (match.type !== mutationType) {
+        continue;
+      }
+
+      let payloadMatches = false;
+
+      if (match.payload) {
+        const matchPayloadKeys = Object.keys(match.payload);
+        payloadMatches = matchPayloadKeys.every(key => {
+          const value = match.payload[key];
+          return value === mutationPayload[key];
+        });
+      } else {
+        payloadMatches = true;
+      }
+
+      if (!payloadMatches) {
+        continue;
+      }
+
+      const value = get(store.state, linkLocation);
+
+      if (type === "action") {
+        store.dispatch(location, { ...data, data: value });
+      } else if (type === "commit") {
+        store.commit(location, { ...data, data: value });
+      }
+    }
+
+    commitQueue.push(mutation);
+  });
+
+  function sendCommitQueue() {
+    const commits = JSON.stringify(commitQueue);
+    commitQueue.splice(0, commitQueue.length);
+
     self.postMessage({
-      type,
-      payload: JSON.stringify(payload)
+      type: "commitQueue",
+      payload: commits
     });
-  });
+  }
 
   store.dispatch("plugins/add", grabCanvasPlugin);
 
@@ -177,6 +240,7 @@ async function start() {
   }
 
   function frameActions(delta) {
+    sendCommitQueue();
     self.postMessage({
       type: "tick",
       payload: delta

src/application/worker/loop.js

@@ -69,8 +69,24 @@ function loop(delta, features, fftOutput) {
       location: linkLocation,
       args: linkArguments,
       min,
-      max
+      max,
+      source
     } = link;
+
+    const moduleId = store.state.inputs.inputs[inputId].data.moduleId;
+
+    // check if the module is enabled for meyda sources, and if it is not, skip it
+    // mutation linkTypes are also skipped as they're handled in index.worker.js in
+    // the store commit subscription
+    if (
+      linkType === "mutation" ||
+      (source === "meyda" &&
+        moduleId &&
+        !store.state.modules.active[moduleId].meta.enabled)
+    ) {
+      continue;
+    }
+
     let value;
 
     if (linkType === "getter" && linkArguments) {

src/application/worker/store/modules/inputs.js

@@ -1,8 +1,82 @@
 import Vue from "vue";
-
 import uuidv4 from "uuid/v4";
 import SWAP from "./common/swap";
 
+/**
+ * InputLinkType enum string values.
+ * @enum {String}
+ */
+// eslint-disable-next-line
+const InputLinkType = {
+  getter: "getter",
+  mutation: "mutation",
+  state: "state"
+};
+
+/**
+ * @typedef {Object} InputLink
+ *
+ * @property {String}  inputId             The ID of the @Input to link to
+ *
+ * @property {InputLinkType}  type         The type of the @InputLink
+ *
+ * @property {String}  source              Identifies what created and/or manages this input link
+ *
+ * @property {Number}  [min]               Minimum expected value, will scale the incoming value to
+ *                                         the input's min/max if min and max are set
+ *
+ * @property {Number}  [max]               Maximum expected value, will scale the incoming value to
+ *                                         the input's min/max if min and max are set
+ */
+
+/**
+ * @typedef {Object} InputLinkGetterType
+ *
+ * @property {String} location             location of the getter in the store, e.g. meyda/getFeature
+ *
+ * @property {Array}  [args]               arguments for a getter that is a function, e.g. ["energy"]
+ *
+ *
+ * ⚠️ updates every frame
+ * Reads a getter in the store, possibly with arguments, defined in ?args, and applies that to the
+ * input link defined with inputId
+ * @typedef {InputLink & InputLinkGetterType} InputLinkGetter
+ */
+
+/**
+ * @typedef {Object} InputLinkMutationType
+ *
+ * @property {String} location             location of the value to read in the store, e.g.
+ *                                         midi.devices[1].channelData[1][144]
+ *
+ * @property {Object} match                parameters of the mutation to match
+ *
+ * @property {String} match.type           Mutation type from the store, e.g. midi/WRITE_DATA
+ *
+ * @property {String} [match.payload]      Key-value pairs to match in the mutation payload, e.g.
+ *                                         {
+                                             id: `${id}-${name}-${manufacturer}`,
+                                             channel: 1,
+                                             type: 144,
+                                           }
+ *
+ * Waits for a mutation type, defined with match.type, possibly checks the mutation payload for
+ * specific unique parameters, defined on match.?payload, and applies a store value, specified
+ * with location, to the input link defined with inputId
+ * @typedef {InputLink & InputLinkMutationType} InputLinkMutation
+ */
+
+/**
+ * @typedef {Object} InputLinkStateType
+ *
+ * @property {String} location             location of the getter in the store, e.g.
+ *                                         midi.devices[1].channelData[1][144]
+ *
+ * ⚠️ updates every frame
+ * Reads a location in the store and applies that to the input link defined with inputId
+ * @typedef {InputLink & InputLinkStateType} InputLinkState
+ */
+
 function getDefaultState() {
   return {
     focusedInput: { id: null, title: null },
@@ -41,6 +115,7 @@ const actions = {
       min = 0,
       max = 1,
       source,
+      match,
       writeToSwap
     }
   ) {
@@ -52,7 +127,16 @@ const actions = {
       return false;
     }
 
-    const inputLink = { id: inputId, location, type, args, min, max, source };
+    const inputLink = {
+      id: inputId,
+      location,
+      type,
+      args,
+      min,
+      max,
+      source,
+      match
+    };
     if (!writeTo.inputs[inputId]) {
       console.warn(
         "Did not create inputLink. Could not find input with id",

src/components/InputLinkComponents/AudioFeatures.vue

@@ -122,8 +122,11 @@ export default {
       if (this.feature === "kick") {
         this.$modV.store.dispatch("inputs/createInputLink", {
           inputId: this.inputId,
-          type: "state",
+          type: "mutation",
           location: "beats.kick",
+          match: {
+            type: "beats/SET_KICK"
+          },
           source: "meyda",
           args: [this.feature]
         });

src/components/InputLinkComponents/MIDI.vue

@@ -56,9 +56,17 @@ export default {
 
       this.hasLink = await this.$modV.store.dispatch("inputs/createInputLink", {
         inputId: this.inputId,
-        type: "state",
+        type: "mutation",
         source: "midi",
         location: `midi.devices['${id}-${name}-${manufacturer}'].channelData['${channel}']['${type}']`,
+        match: {
+          type: "midi/WRITE_DATA",
+          payload: {
+            id: `${id}-${name}-${manufacturer}`,
+            channel,
+            type
+          }
+        },
         min: 0,
         max: 1
       });