feat: support JS expression in mustache tag

package.json

@@ -36,6 +36,7 @@
     "@codemirror/language": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.0.0",
     "@medv/finder": "^2.1.0",
+    "@n8n_io/riot-tmpl": "^1.0.1",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",
     "@tiptap/extension-image": "^2.0.0-beta.30",
     "@tiptap/extension-link": "^2.0.0-beta.43",

src/background/BackgroundUtils.js

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { waitTabLoaded } from '@/newtab/utils/workflowEngine/helper';
+import { waitTabLoaded } from '@/newtab/workflowEngine/helper';
 
 class BackgroundUtils {
   static async openDashboard(url, updateTab = true) {

src/components/newtab/shared/SharedLogsTable.vue

@@ -114,7 +114,7 @@
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { countDuration } from '@/utils/helper';
-import { workflowState } from '@/newtab/utils/workflowEngine';
+import { workflowState } from '@/newtab/workflowEngine';
 import dayjs from '@/lib/dayjs';
 
 defineProps({

src/components/newtab/shared/SharedWorkflowState.vue

@@ -59,7 +59,7 @@
 import browser from 'webextension-polyfill';
 import { useI18n } from 'vue-i18n';
 import { getBlocks } from '@/utils/getSharedData';
-import { workflowState } from '@/newtab/utils/workflowEngine';
+import { workflowState } from '@/newtab/workflowEngine';
 import dayjs from '@/lib/dayjs';
 
 const props = defineProps({

src/components/newtab/workflow/WorkflowRunning.vue

@@ -43,7 +43,7 @@
 import browser from 'webextension-polyfill';
 import { useI18n } from 'vue-i18n';
 import { getBlocks } from '@/utils/getSharedData';
-import { workflowState } from '@/newtab/utils/workflowEngine';
+import { workflowState } from '@/newtab/workflowEngine';
 import dayjs from '@/lib/dayjs';
 
 defineProps({

src/components/newtab/workflow/editor/EditorLocalActions.vue

@@ -327,7 +327,7 @@ import { tagColors } from '@/utils/shared';
 import { parseJSON, findTriggerBlock } from '@/utils/helper';
 import { exportWorkflow, convertWorkflow } from '@/utils/workflowData';
 import { registerWorkflowTrigger } from '@/utils/workflowTrigger';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import getTriggerText from '@/utils/triggerText';
 import convertWorkflowData from '@/utils/convertWorkflowData';
 import WorkflowShareTeam from '@/components/newtab/workflow/WorkflowShareTeam.vue';

src/components/newtab/workflows/WorkflowsHosted.vue

@@ -15,7 +15,7 @@ import { useI18n } from 'vue-i18n';
 import { useDialog } from '@/composable/dialog';
 import { arraySorter } from '@/utils/helper';
 import { useHostedWorkflowStore } from '@/stores/hostedWorkflow';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import SharedCard from '@/components/newtab/shared/SharedCard.vue';
 
 const props = defineProps({

src/components/newtab/workflows/WorkflowsLocal.vue

@@ -112,7 +112,7 @@ import { useDialog } from '@/composable/dialog';
 import { useWorkflowStore } from '@/stores/workflow';
 import { exportWorkflow } from '@/utils/workflowData';
 import { useSharedWorkflowStore } from '@/stores/sharedWorkflow';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import WorkflowsLocalCard from './WorkflowsLocalCard.vue';
 
 const props = defineProps({

src/components/newtab/workflows/WorkflowsShared.vue

@@ -12,7 +12,7 @@
 import { computed } from 'vue';
 import { useSharedWorkflowStore } from '@/stores/sharedWorkflow';
 import { arraySorter } from '@/utils/helper';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import SharedCard from '@/components/newtab/shared/SharedCard.vue';
 
 const props = defineProps({

src/components/newtab/workflows/WorkflowsUserTeam.vue

@@ -61,7 +61,7 @@ import { useTeamWorkflowStore } from '@/stores/teamWorkflow';
 import { arraySorter } from '@/utils/helper';
 import { useDialog } from '@/composable/dialog';
 import { tagColors } from '@/utils/shared';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import SharedCard from '@/components/newtab/shared/SharedCard.vue';
 
 const props = defineProps({

src/components/popup/home/HomeTeamWorkflows.vue

@@ -35,7 +35,7 @@ import { useUserStore } from '@/stores/user';
 import { sendMessage } from '@/utils/message';
 import { useTeamWorkflowStore } from '@/stores/teamWorkflow';
 import { tagColors } from '@/utils/shared';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import dayjs from '@/lib/dayjs';
 
 const props = defineProps({

src/newtab/App.vue

@@ -77,7 +77,7 @@ import AppSidebar from '@/components/newtab/app/AppSidebar.vue';
 import dataMigration from '@/utils/dataMigration';
 import iconFirefox from '@/assets/svg/logoFirefox.svg';
 import iconChrome from '@/assets/svg/logo.svg';
-import { executeWorkflow } from './utils/workflowEngine';
+import { executeWorkflow } from './workflowEngine';
 
 let icon;
 if (window.location.protocol === 'moz-extension:') {

src/newtab/pages/logs/Running.vue

@@ -80,7 +80,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { countDuration } from '@/utils/helper';
 import { useWorkflowStore } from '@/stores/workflow';
-import { workflowState } from '@/newtab/utils/workflowEngine';
+import { workflowState } from '@/newtab/workflowEngine';
 import dbLogs from '@/db/logs';
 import dayjs from '@/lib/dayjs';
 import LogsHistory from '@/components/newtab/logs/LogsHistory.vue';

src/newtab/pages/workflows/Host.vue

@@ -120,7 +120,7 @@ import { useGroupTooltip } from '@/composable/groupTooltip';
 import { findTriggerBlock } from '@/utils/helper';
 import convertWorkflowData from '@/utils/convertWorkflowData';
 import { useWorkflowStore } from '@/stores/workflow';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import { useHostedWorkflowStore } from '@/stores/hostedWorkflow';
 import getTriggerText from '@/utils/triggerText';
 import EditorLogs from '@/components/newtab/workflow/editor/EditorLogs.vue';

src/newtab/pages/workflows/[id].vue

@@ -317,12 +317,12 @@ import { getWorkflowPermissions } from '@/utils/workflowData';
 import { fetchApi } from '@/utils/api';
 import { getBlocks } from '@/utils/getSharedData';
 import { excludeGroupBlocks } from '@/utils/shared';
-import { functions } from '@/utils/referenceData/mustacheReplacer';
 import { useGroupTooltip } from '@/composable/groupTooltip';
 import { useCommandManager } from '@/composable/commandManager';
 import { debounce, parseJSON, throttle } from '@/utils/helper';
-import { executeWorkflow } from '@/newtab/utils/workflowEngine';
+import { executeWorkflow } from '@/newtab/workflowEngine';
 import { registerWorkflowTrigger } from '@/utils/workflowTrigger';
+import functions from '@/newtab/workflowEngine/templating/templatingFunctions';
 import browser from 'webextension-polyfill';
 import dbStorage from '@/db/storage';
 import DroppedNode from '@/utils/editor/DroppedNode';

src/newtab/utils/workflowEngine/WorkflowEngine.js → src/newtab/workflowEngine/WorkflowEngine.js

@@ -312,7 +312,7 @@ class WorkflowEngine {
 
   async executeQueue() {
     const { workflowQueue } = await browser.storage.local.get('workflowQueue');
-    const queueIndex = (workflowQueue || []).indexOf(this.workflow.id);
+    const queueIndex = (workflowQueue || []).indexOf(this.workflow?.id);
 
     if (!workflowQueue || queueIndex === -1) return;
 
@@ -342,6 +342,29 @@ class WorkflowEngine {
   }
 
   async destroy(status, message, blockDetail) {
+    const cleanUp = () => {
+      this.id = null;
+      this.states = null;
+      this.logger = null;
+      this.saveLog = null;
+      this.workflow = null;
+      this.blocksHandler = null;
+      this.parentWorkflow = null;
+
+      this.isDestroyed = true;
+      this.referenceData = null;
+      this.eventListeners = null;
+      this.packagesCache = null;
+      this.extractedGroup = null;
+      this.connectionsMap = null;
+      this.waitConnections = null;
+      this.blocks = null;
+      this.history = null;
+      this.columnsId = null;
+      this.historyCtxData = null;
+      this.preloadScripts = null;
+    };
+
     try {
       if (this.isDestroyed) return;
       if (this.isUsingProxy) browser.proxy.settings.clear({});
@@ -461,29 +484,11 @@ class WorkflowEngine {
           },
         });
       }
+
+      cleanUp();
     } catch (error) {
       console.error(error);
-    } finally {
-      this.id = null;
-      this.states = null;
-      this.logger = null;
-      this.saveLog = null;
-      this.workflow = null;
-      this.blocksHandler = null;
-      this.parentWorkflow = null;
-
-      this.isDestroyed = true;
-      this.referenceData = null;
-      this.eventListeners = null;
-      this.packagesCache = null;
-      this.extractedGroup = null;
-      this.connectionsMap = null;
-      this.waitConnections = null;
-      this.blocks = null;
-      this.history = null;
-      this.columnsId = null;
-      this.historyCtxData = null;
-      this.preloadScripts = null;
+      cleanUp();
     }
   }
 

src/newtab/utils/workflowEngine/WorkflowWorker.js → src/newtab/workflowEngine/WorkflowWorker.js

@@ -6,8 +6,8 @@ import {
   parseJSON,
   isObject,
 } from '@/utils/helper';
-import referenceData from '@/utils/referenceData';
-import mustacheReplacer from '@/utils/referenceData/mustacheReplacer';
+import templating from './templating';
+import renderString from './templating/renderString';
 import { convertData, waitTabLoaded } from './helper';
 import injectContentScript from './injectContentScript';
 
@@ -167,7 +167,7 @@ class WorkflowWorker {
       activeTabUrl: this.activeTab.url,
     };
 
-    const replacedBlock = referenceData({
+    const replacedBlock = await templating({
       block,
       data: refData,
       refKeys:
@@ -242,16 +242,16 @@ class WorkflowWorker {
         }
 
         if (blockOnError.insertData) {
-          blockOnError.dataToInsert.forEach((item) => {
-            let value = mustacheReplacer(item.value, refData)?.value;
+          for (const item of blockOnError.dataToInsert) {
+            let value = await renderString(item.value, refData)?.value;
             value = parseJSON(value, value);
 
             if (item.type === 'variable') {
               this.setVariable(item.name, value);
             } else {
               this.addDataToColumn(item.name, value);
             }
-          });
+          }
         }
 
         const nextBlocks = this.getBlockConnections(

src/newtab/utils/workflowEngine/blocksHandler/handlerConditions.js → src/newtab/workflowEngine/blocksHandler/handlerConditions.js

@@ -1,8 +1,8 @@
 import { customAlphabet } from 'nanoid/non-secure';
 import browser from 'webextension-polyfill';
 import compareBlockValue from '@/utils/compareBlockValue';
-import mustacheReplacer from '@/utils/referenceData/mustacheReplacer';
 import testConditions from '@/utils/testConditions';
+import renderString from '../templating/renderString';
 import { automaRefDataStr, messageSandbox } from '../helper';
 
 const nanoid = customAlphabet('1234567890abcdef', 5);
@@ -147,14 +147,12 @@ async function conditions({ data, id }, { prevBlockData, refData }) {
       outputId = data.conditions[conditionsResult.index].id;
     }
   } else {
-    data.conditions.forEach(({ type, value, compareValue, id: itemId }) => {
-      if (isConditionMet) return;
+    for (const { type, value, compareValue, id: itemId } of data.conditions) {
+      if (isConditionMet) break;
 
-      const firstValue = mustacheReplacer(
-        compareValue ?? prevData,
-        refData
-      ).value;
-      const secondValue = mustacheReplacer(value, refData).value;
+      const firstValue = await renderString(compareValue ?? prevData, refData)
+        .value;
+      const secondValue = await renderString(value, refData).value;
 
       Object.assign(replacedValue, firstValue.list, secondValue.list);
 
@@ -169,7 +167,7 @@ async function conditions({ data, id }, { prevBlockData, refData }) {
         resultData = value;
         isConditionMet = true;
       }
-    });
+    }
   }
 
   return {

src/newtab/utils/workflowEngine/blocksHandler/handlerInsertData.js → src/newtab/workflowEngine/blocksHandler/handlerInsertData.js

@@ -1,7 +1,7 @@
 import Papa from 'papaparse';
 import { parseJSON } from '@/utils/helper';
 import getFile from '@/utils/getFile';
-import mustacheReplacer from '@/utils/referenceData/mustacheReplacer';
+import renderString from '../templating/renderString';
 
 async function insertData({ id, data }, { refData }) {
   const replacedValueList = {};
@@ -10,7 +10,7 @@ async function insertData({ id, data }, { refData }) {
     let value = '';
 
     if (item.isFile) {
-      const replacedPath = mustacheReplacer(item.filePath || '', refData);
+      const replacedPath = await renderString(item.filePath || '', refData);
       const path = replacedPath.value;
       const isJSON = path.endsWith('.json');
       const isCSV = path.endsWith('.csv');
@@ -35,7 +35,7 @@ async function insertData({ id, data }, { refData }) {
       value = result;
       Object.assign(replacedValueList, replacedPath.list);
     } else {
-      const replacedValue = mustacheReplacer(item.value, refData);
+      const replacedValue = await renderString(item.value, refData);
       value = parseJSON(replacedValue.value, replacedValue.value);
       Object.assign(replacedValueList, replacedValue.list);
     }

src/newtab/utils/workflowEngine/blocksHandler/handlerWebhook.js → src/newtab/workflowEngine/blocksHandler/handlerWebhook.js

@@ -1,7 +1,7 @@
 import objectPath from 'object-path';
 import { isWhitespace } from '@/utils/helper';
 import { executeWebhook } from '@/utils/webhookUtil';
-import mustacheReplacer from '@/utils/referenceData/mustacheReplacer';
+import renderString from '../templating/renderString';
 
 export async function webhook({ data, id }, { refData }) {
   const nextBlockId = this.getBlockConnections(id);
@@ -17,11 +17,11 @@ export async function webhook({ data, id }, { refData }) {
     }
 
     const newHeaders = [];
-    data.headers.forEach(({ value, name }) => {
-      const newValue = mustacheReplacer(value, refData).value;
+    for (const { value, name } of data.headers) {
+      const newValue = await renderString(value, refData).value;
 
       newHeaders.push({ name, value: newValue });
-    });
+    }
 
     const response = await executeWebhook({ ...data, headers: newHeaders });
 

src/newtab/utils/workflowEngine/helper.js → src/newtab/workflowEngine/helper.js

@@ -7,7 +7,7 @@ export function messageSandbox(type, data = {}) {
   return new Promise((resolve) => {
     const messageId = nanoid();
 
-    const iframeEl = document.querySelector('#sandbox');
+    const iframeEl = document.getElementById('sandbox');
     iframeEl.contentWindow.postMessage({ id: messageId, type, ...data }, '*');
 
     const messageListener = ({ data: messageData }) => {

src/newtab/workflowEngine/templating/index.js

@@ -0,0 +1,40 @@
+import objectPath from 'object-path';
+import cloneDeep from 'lodash.clonedeep';
+import renderString from './renderString';
+
+export default async function ({ block, refKeys, data }) {
+  if (!refKeys || refKeys.length === 0) return block;
+
+  const copyBlock = cloneDeep(block);
+  const addReplacedValue = (value) => {
+    if (!copyBlock.replacedValue) copyBlock.replacedValue = {};
+    copyBlock.replacedValue = { ...copyBlock.replacedValue, ...value };
+  };
+
+  for (const blockDataKey of refKeys) {
+    const currentData = objectPath.get(copyBlock.data, blockDataKey);
+    /* eslint-disable-next-line */
+    if (!currentData) continue;
+
+    if (Array.isArray(currentData)) {
+      for (let index = 0; index < currentData.length; index += 1) {
+        const value = currentData[index];
+        const renderedValue = await renderString(value, data);
+
+        addReplacedValue(renderedValue.list);
+        objectPath.set(
+          copyBlock.data,
+          `${blockDataKey}.${index}`,
+          renderedValue.value
+        );
+      }
+    } else if (typeof currentData === 'string') {
+      const renderedValue = await renderString(currentData, data);
+
+      addReplacedValue(renderedValue.list);
+      objectPath.set(copyBlock.data, blockDataKey, renderedValue.value);
+    }
+  }
+
+  return copyBlock;
+}