@teleporthq/teleport-plugin-next-workflows 0.45.8 → 0.45.13

package/src/trigger-generator.ts

@@ -24,6 +24,45 @@ import { elementVisibleObserverCode } from './element-visible-trigger'
 export const formControlPropertyReads = (elementRef: string): string =>
   `value: ${elementRef}.value, checked: ${elementRef}.checked, files: ${elementRef}.files`
 
+/* The channel the "Emit Custom Event" node dispatches on. */
+const CUSTOM_EVENT_CHANNEL = 'workflow:custom:'
+
+const intervalControlEventNames = (controlEventName: string): string[] => [
+  CUSTOM_EVENT_CHANNEL + controlEventName,
+  controlEventName,
+]
+
+/* A timer's control event is heard on the channel the emit node dispatches on,
+   and under its bare name for a page that dispatches it by hand. The two names
+   differ, so one dispatch reaches the handler once.
+   The event may say what it wants: a detail of 'start' or 'stop', or an object
+   whose `action` or `command` is one of them, does exactly that, and asking
+   for the state the timer is already in changes nothing. Any other event
+   toggles the timer. */
+export const intervalControlListenerSource = (safeId: string, controlEventName: string): string =>
+  `    var __iv_ctrlHandler_${safeId} = function(event) {\n` +
+  `      var detail = event && event.detail;\n` +
+  `      var command = typeof detail === 'string' ? detail : detail && (detail.action || detail.command);\n` +
+  `      if (command === 'start') { __iv_start_${safeId}(); }\n` +
+  `      else if (command === 'stop') { __iv_stop_${safeId}(); }\n` +
+  `      else if (__iv_running_${safeId}) { __iv_stop_${safeId}(); }\n` +
+  `      else { __iv_start_${safeId}(); }\n` +
+  `    };\n` +
+  intervalControlEventNames(controlEventName)
+    .map(
+      (name) =>
+        `    window.addEventListener(${JSON.stringify(name)}, __iv_ctrlHandler_${safeId});\n`
+    )
+    .join('')
+
+export const intervalControlTeardownSource = (safeId: string, controlEventName: string): string =>
+  intervalControlEventNames(controlEventName)
+    .map(
+      (name) =>
+        `      window.removeEventListener(${JSON.stringify(name)}, __iv_ctrlHandler_${safeId});\n`
+    )
+    .join('')
+
 export const generateTriggerCode = (workflow: UIDLWorkflow, workflowVarName: string): string => {
   const trigger = workflow.trigger
   const triggerType = trigger.type
@@ -733,11 +772,7 @@ const generateIntervalTrigger = (
     ${
       controlEventName
         ? `
-    var __iv_ctrlHandler_${safeId} = function() {
-      if (__iv_running_${safeId}) { __iv_stop_${safeId}(); }
-      else { __iv_start_${safeId}(); }
-    };
-    window.addEventListener('${controlEventName}', __iv_ctrlHandler_${safeId});`
+${intervalControlListenerSource(safeId, controlEventName)}`
         : ''
     }
 
@@ -751,11 +786,7 @@ const generateIntervalTrigger = (
           ? `document.removeEventListener('visibilitychange', __iv_visHandler_${safeId});`
           : ''
       }
-      ${
-        controlEventName
-          ? `window.removeEventListener('${controlEventName}', __iv_ctrlHandler_${safeId});`
-          : ''
-      }
+      ${controlEventName ? intervalControlTeardownSource(safeId, controlEventName) : ''}
     };`
 }
 

package/src/workflow-component-plugin.ts

@@ -29,7 +29,12 @@ import { WorkflowExecutionEnv } from './types'
 import { getAPIRouteFileName, hasStreamingAINode } from './api-route-generator'
 import { REALTIME_TRIGGER_TYPES, REALTIME_NODE_TYPES } from './graph-utils'
 import { neutraliseIsLoggedInGates } from './is-logged-in-gate'
-import { TRACK_LEAD_SOURCE, formControlPropertyReads } from './trigger-generator'
+import {
+  TRACK_LEAD_SOURCE,
+  formControlPropertyReads,
+  intervalControlListenerSource,
+  intervalControlTeardownSource,
+} from './trigger-generator'
 import { elementVisibleObserverCode } from './element-visible-trigger'
 import { restoreControlledSelectValue } from './controlled-select'
 import { resolveScrollPoint } from './scroll-points'
@@ -1912,7 +1917,20 @@ ${globalStateChangeHandlerLines.join('\n')}
 `
 }
 
-const generateElementHandler = (et: ElementTriggerInfo): string => {
+/* The bound element's `data-*` attributes, as trigger fields a workflow reads
+   by name: `data-tab-index` is `dataTabIndex`, the name the static HTML export
+   resolves from the same attribute. Values are the attribute strings. The
+   result is the object the trigger's own fields are then assigned onto, so no
+   attribute can replace one of them. */
+const datasetTriggerFieldsSource = (element: string): string =>
+  `Object.keys((${element} && ${element}.dataset) || {}).reduce(function(fields, key) { fields['data' + key.charAt(0).toUpperCase() + key.slice(1)] = ${element}.dataset[key]; return fields; }, {})`
+
+/* The submitted fields are spread FIRST so a field literally named `formData`,
+   `formId`, `element` or `timestamp` can never shadow the reserved keys. */
+const formTriggerContextSource = (elementId: string): string =>
+  `Object.assign({}, formData, { fields: formData, formData: formData, formId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() })`
+
+export const generateElementHandler = (et: ElementTriggerInfo): string => {
   const safeId = et.workflow.id.replace(/[^a-zA-Z0-9]/g, '_')
   const config = et.triggerConfig
   const elementId = et.elementId
@@ -1936,9 +1954,17 @@ const generateElementHandler = (et: ElementTriggerInfo): string => {
       // the bound element when the user clicks a child — e.g. the payment
       // provider row sets `data-provider-name` on the row div, but a click
       // on the inner label span would otherwise resolve to an empty dataset.
+      // A debounced run starts after the event has finished dispatching, when
+      // `currentTarget` is already null, so the bound element is read before
+      // the timer is set.
+      const boundElement = debounce
+        ? '__bound || event.target'
+        : 'event.currentTarget || event.target'
       body +=
-        `    const __te = event.currentTarget || event.target;\n` +
-        `    const triggerContext = { elementId: '${elementId}', triggerElement: __te, element: __te, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY };\n` +
+        `    const __te = ${boundElement};\n` +
+        `    const triggerContext = Object.assign(${datasetTriggerFieldsSource(
+          '__te'
+        )}, { elementId: '${elementId}', triggerElement: __te, element: __te, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY });\n` +
         `    return __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});`
 
       if (debounce) {
@@ -1946,6 +1972,7 @@ const generateElementHandler = (et: ElementTriggerInfo): string => {
           `(function() {\n` +
           `      let timer = null;\n` +
           `      return function(event) {\n` +
+          `        const __bound = event.currentTarget;\n` +
           `        clearTimeout(timer);\n` +
           `        timer = setTimeout(async function() {\n` +
           `    ${body}\n` +
@@ -1972,17 +1999,15 @@ const generateElementHandler = (et: ElementTriggerInfo): string => {
       // name as missing. `general-extract-form-data` already returns its fields
       // flat for exactly this reason; the trigger now matches it, so both
       // `params[0].name` and `params[0].formData.name` resolve.
-      //
-      // The spread comes FIRST so a field literally named `formData`, `formId`,
-      // `element` or `timestamp` can never shadow the reserved keys the runtime
-      // and the workflow editor depend on.
+      // The context is built by `formTriggerContextSource`, shared with the
+      // native-listener fallback.
       return (
         `async function(event) {\n` +
         (preventDefault ? '    event.preventDefault();\n' : '') +
         `    const formData = {};\n` +
         `    const fd = new FormData(event.target);\n` +
         `    fd.forEach(function(v, k) { formData[k] = v; });\n` +
-        `    const triggerContext = Object.assign({}, formData, { fields: formData, formData: formData, formId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() });\n` +
+        `    const triggerContext = ${formTriggerContextSource(elementId)};\n` +
         // Growth analytics: a form whose workflow ran to the end is a lead.
         // __execWf resolves undefined when the run threw, so only a finished
         // run reports.
@@ -2081,7 +2106,10 @@ const generateElementHandler = (et: ElementTriggerInfo): string => {
   }
 }
 
-const generateUnmatchedElementFallback = (et: ElementTriggerInfo, safeId: string): string => {
+export const generateUnmatchedElementFallback = (
+  et: ElementTriggerInfo,
+  safeId: string
+): string => {
   const config = et.triggerConfig
   const elementId = et.elementId
   const domEvent = getDOMEventName(et.workflow.trigger.type, config)
@@ -2104,20 +2132,24 @@ const generateUnmatchedElementFallback = (et: ElementTriggerInfo, safeId: string
       `        const formData = {};\n` +
       `        const fd = new FormData(event.target);\n` +
       `        fd.forEach(function(v, k) { formData[k] = v; });\n` +
-      `        const triggerContext = { formData: formData, formId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n`
+      `        const triggerContext = ${formTriggerContextSource(elementId)};\n`
   } else if (isInput) {
     handlerBody += `        const triggerContext = { value: event.target.value, elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now() };\n`
   } else if (et.workflow.trigger.type === 'event-element-event') {
     // See `event-element-event` in `generateElementHandler` for why we
     // include `value`/`checked`/`files` unconditionally.
-    handlerBody += `        const triggerContext = { elementId: '${elementId}', eventType: '${domEvent}', triggerElement: event.target, element: event.target, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY, offsetX: event.offsetX, offsetY: event.offsetY, button: event.button, deltaX: event.deltaX, deltaY: event.deltaY, deltaMode: event.deltaMode, key: event.key, ${formControlPropertyReads(
+    handlerBody += `        const triggerContext = { elementId: '${elementId}', eventType: '${domEvent}', triggerElement: event.target, element: event.target, target: event.target, currentTarget: __el_${safeId}, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY, offsetX: event.offsetX, offsetY: event.offsetY, button: event.button, deltaX: event.deltaX, deltaY: event.deltaY, deltaMode: event.deltaMode, key: event.key, ${formControlPropertyReads(
       'event.target'
     )} };\n`
     if (domEvent === 'drop') {
       handlerBody += `        if (event.dataTransfer && event.dataTransfer.files) { triggerContext.files = Array.from(event.dataTransfer.files); }\n`
     }
   } else {
-    handlerBody += `        const triggerContext = { elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY };\n`
+    // The listener sits on `__el_<id>`, so that is the element whose
+    // attributes are delivered, whichever child was clicked.
+    handlerBody += `        const triggerContext = Object.assign(${datasetTriggerFieldsSource(
+      `__el_${safeId}`
+    )}, { elementId: '${elementId}', triggerElement: event.target, element: event.target, timestamp: Date.now(), clientX: event.clientX, clientY: event.clientY });\n`
   }
 
   handlerBody += `        __execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId});`
@@ -2169,7 +2201,7 @@ const generateLoadedTriggerRun = (
       `      cleanups.push(function() { clearTimeout(__delay_${safeId}); });\n`
     : `      ${execCall};\n`
 
-const generateLifecycleTrigger = (wf: UIDLWorkflow, safeId: string): string => {
+export const generateLifecycleTrigger = (wf: UIDLWorkflow, safeId: string): string => {
   const trigger = wf.trigger
   const config = (trigger.config || {}) as Record<string, unknown>
   const execCall = `__execWf(__wfConfig_${safeId}, triggerContext, __wfServerUrls_${safeId})`
@@ -2539,12 +2571,7 @@ const generateLifecycleTrigger = (wf: UIDLWorkflow, safeId: string): string => {
       }
 
       if (controlEventName) {
-        intervalCode +=
-          `    var __iv_ctrlHandler_${safeId} = function() {\n` +
-          `      if (__iv_running_${safeId}) { __iv_stop_${safeId}(); }\n` +
-          `      else { __iv_start_${safeId}(); }\n` +
-          `    };\n` +
-          `    window.addEventListener('${controlEventName}', __iv_ctrlHandler_${safeId});\n`
+        intervalCode += intervalControlListenerSource(safeId, controlEventName)
       }
 
       if (autoStart) {
@@ -2558,9 +2585,7 @@ const generateLifecycleTrigger = (wf: UIDLWorkflow, safeId: string): string => {
         (!runWhileHidden
           ? `      document.removeEventListener('visibilitychange', __iv_visHandler_${safeId});\n`
           : '') +
-        (controlEventName
-          ? `      window.removeEventListener('${controlEventName}', __iv_ctrlHandler_${safeId});\n`
-          : '') +
+        (controlEventName ? intervalControlTeardownSource(safeId, controlEventName) : '') +
         `    });`
 
       return intervalCode