feat(background): add export-data handler

package.json

@@ -26,6 +26,7 @@
     "dayjs": "^1.10.7",
     "drawflow": "^0.0.49",
     "nanoid": "3.1.28",
+    "papaparse": "^5.3.1",
     "tiny-emitter": "^2.1.0",
     "tippy.js": "^6.3.1",
     "v-remixicon": "^0.1.1",

src/background/blocks-handler.js

@@ -1,11 +1,28 @@
 /* eslint-disable no-underscore-dangle */
 import browser from 'webextension-polyfill';
+import { objectHasKey } from '@/utils/helper';
+import dataExporter from '@/utils/data-exporter';
 
 function getBlockConnection(block, index = 1) {
   const blockId = block.outputs[`output_${index}`].connections[0]?.node;
 
   return blockId;
 }
+function converData(data, type) {
+  let result = data;
+
+  switch (type) {
+    case 'integer':
+      result = +data.replace(/\D+/g, '');
+      break;
+    case 'boolean':
+      result = Boolean(data);
+      break;
+    default:
+  }
+
+  return result;
+}
 
 export function trigger(block) {
   return new Promise((resolve) => {
@@ -29,7 +46,7 @@ export function openWebsite(block) {
           once: true,
           callback: async (tabId, changeInfo, deleteListener) => {
             if (changeInfo.status !== 'complete') return;
-            console.log(changeInfo.status !== 'complete', 'clll');
+
             try {
               await browser.tabs.executeScript(tabId, {
                 file: './contentScript.bundle.js',
@@ -68,7 +85,17 @@ export function interactionHandler(block) {
       once: true,
       delay: block.name === 'link' ? 5000 : 0,
       callback: (data) => {
-        this.data.push(data);
+        if (objectHasKey(block.data, 'dataColumn')) {
+          const column =
+            Object.values(this.workflow.dataColumns).find(
+              ({ name }) => name === block.data.dataColumn
+            ) ?? {};
+          const name = column.name || 'column';
+          console.log(column, converData(data, column.type));
+          (this.data[name] = this.data[name] || []).push(
+            converData(data, column.type)
+          );
+        }
 
         resolve({
           data,
@@ -89,3 +116,14 @@ export function delay(block) {
     }, block.data.time);
   });
 }
+
+export function exportData(block) {
+  return new Promise((resolve) => {
+    dataExporter(this.data, block.data.type);
+
+    resolve({
+      data: '',
+      nextBlockId: getBlockConnection(block),
+    });
+  });
+}

src/background/workflow-engine.js

@@ -8,7 +8,6 @@ function tabMessageHandler({ type, data }) {
   const listener = this.tabMessageListeners[type];
 
   if (listener) {
-    console.log(listener.delay, 'delay....');
     setTimeout(() => {
       listener.callback(data);
     }, listener.delay || 0);
@@ -61,7 +60,7 @@ class WorkflowEngine {
     this.workflow = workflow;
     this.blocks = {};
     this.blocksArr = [];
-    this.data = [];
+    this.data = {};
     this.isDestroyed = false;
     this.isPaused = false;
     this.isInsidePaused = false;
@@ -104,12 +103,12 @@ class WorkflowEngine {
   destroy() {
     // save log
     browser.tabs.onRemoved.removeListener(this.tabRemovedHandler);
+    browser.tabs.onUpdated.removeListener(this.tabUpdatedHandler);
 
     this.isDestroyed = true;
   }
 
   _blockHandler(block, prevBlockData) {
-    console.log(this.isInsidePaused, 'isInsidePaused');
     if (this.isDestroyed) {
       console.log(
         '%cDestroyed',

src/components/block/BlockExportData.vue

@@ -49,9 +49,9 @@ const componentId = useComponentId('block-delay');
 const block = useEditorBlock(`#${componentId}`, props.editor);
 
 const exportTypes = [
-  { name: 'JSON', id: 'JSON' },
-  { name: 'CSV', id: 'CSV' },
-  { name: 'Plain text', id: 'plain' },
+  { name: 'JSON', id: 'json' },
+  { name: 'CSV', id: 'csv' },
+  { name: 'Plain text', id: 'plain-text' },
 ];
 
 function handleInput({ target }) {

src/components/newtab/workflow/WorkflowDataColumns.vue

@@ -25,11 +25,6 @@
         class="flex-1"
         placeholder="Column name"
       />
-      <ui-input
-        v-model="columns[index].default"
-        class="flex-1"
-        placeholder="Default value"
-      />
       <ui-select
         v-model="columns[index].type"
         class="flex-1"
@@ -60,6 +55,7 @@ const emit = defineEmits(['update', 'close']);
 const dataTypes = [
   { id: 'string', name: 'Text' },
   { id: 'integer', name: 'Number' },
+  { id: 'boolean', name: 'Boolean' },
 ];
 
 const state = reactive({
@@ -75,7 +71,7 @@ function addColumn() {
 
   if (isColumnExists || state.query.trim() === '') return;
 
-  state.columns.push({ name: state.query, default: '', type: 'string' });
+  state.columns.push({ name: state.query, type: 'string' });
   state.query = '';
 }
 

src/components/newtab/workflow/edit/EditInteractionBase.vue

@@ -8,13 +8,14 @@
     @change="updateData({ description: $event })"
   />
   <ui-input
+    v-if="!hideSelector"
     :model-value="data.selector"
     placeholder="Element selector"
     class="mb-1 w-full"
     @change="updateData({ selector: $event })"
   />
   <ui-checkbox
-    v-if="!data.disableMultiple"
+    v-if="!hideSelector || !data.disableMultiple"
     :model-value="data.multiple"
     @change="updateData({ multiple: $event })"
   >
@@ -28,6 +29,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  hideSelector: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['update:data', 'change']);
 

src/content/blocks-handler.js

@@ -121,8 +121,6 @@ export function link({ data }) {
 
     if (url) window.location.href = url;
 
-    // setTimeout(() => {
     resolve('');
-    // }, 2000);
   });
 }

src/utils/shared.js

@@ -76,7 +76,7 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
-      type: 'JSON',
+      type: 'json',
     },
   },
   'element-scroll': {

yarn.lock

@@ -4848,6 +4848,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+papaparse@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.3.1.tgz#770b7a9124d821d4b2132132b7bd7dce7194b5b1"
+  integrity sha512-Dbt2yjLJrCwH2sRqKFFJaN5XgIASO9YOFeFP8rIBRG2Ain8mqk5r1M6DkfvqEVozVcz3r3HaUGw253hA1nLIcA==
+
 param-case@^3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"