@teleporthq/teleport-plugin-next-workflows 0.43.75 → 0.44.1

package/src/nodes/storage/storage-local-remove.ts

@@ -1,10 +1,14 @@
 import { NodeHandlerGenerator, handlerToString } from '../types'
 
+// Same-tab notice of the removal, as storage-local-set gives for a write.
 async function storage_local_remove(config: any, context: Record<string, unknown>) {
   const key = config.key
 
   try {
     localStorage.removeItem(key)
+    window.dispatchEvent(
+      new CustomEvent('teleport:local-storage', { detail: { key, value: null } })
+    )
     return { success: true }
   } catch (err: unknown) {
     return { success: false, error: (err as Error).message }

package/src/nodes/storage/storage-local-set.ts

@@ -1,5 +1,8 @@
 import { NodeHandlerGenerator, handlerToString } from '../types'
 
+// A write in the visitor's own tab fires no `storage` event. This one lets page
+// scripts react at once: Google consent mode is granted by the cookie banner's
+// Accept, which is this step (teleport-project-generator-next google-consent-mode).
 async function storage_local_set(config: any, context: Record<string, unknown>) {
   const key = config.key
   const value = config.value
@@ -7,6 +10,9 @@ async function storage_local_set(config: any, context: Record<string, unknown>)
   try {
     const serialized = typeof value === 'string' ? value : JSON.stringify(value)
     localStorage.setItem(key, serialized)
+    window.dispatchEvent(
+      new CustomEvent('teleport:local-storage', { detail: { key, value: serialized } })
+    )
     return { success: true }
   } catch (err: unknown) {
     return { success: false, error: (err as Error).message }

package/src/page-arrival.ts

@@ -0,0 +1,115 @@
+import {
+  ComponentUIDL,
+  UIDLElement,
+  UIDLNode,
+  UIDLWorkflow,
+  UIDLWorkflows,
+} from '@teleporthq/teleport-types'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
+import { getRelevantWorkflows, resolveLifecycleTriggerElementId } from './workflow-scope'
+
+/**
+ * Lifecycle triggers that fire because the page appeared. They run when the
+ * page or component carrying them mounts, so the page has to remount on every
+ * arrival (see `PageArrival.remountPageOnArrival`).
+ */
+const PAGE_ARRIVAL_TRIGGER_TYPES = new Set([
+  'event-page-loaded',
+  'event-element-visible',
+  'event-component-loaded',
+])
+
+export const isPageArrivalWorkflow = (workflow: UIDLWorkflow): boolean =>
+  PAGE_ARRIVAL_TRIGGER_TYPES.has(workflow.trigger.type)
+
+/** Every static `id` in a node tree — the ids an element-visible trigger can observe. */
+const collectStaticElementIds = (node: UIDLNode): Set<string> => {
+  const ids = new Set<string>()
+  UIDLUtils.traverseElements(node, (element) => {
+    const id = element.attrs?.id
+    if (id?.type === 'static' && typeof id.content === 'string') {
+      ids.add(id.content)
+    }
+  })
+  return ids
+}
+
+/**
+ * The project component a node renders. Local dependencies are resolved before
+ * the pages are generated, which rewrites `semanticType` to the component's
+ * class name — the original key still matches a component that was not renamed.
+ */
+const findRenderedComponent = (
+  element: UIDLElement,
+  projectComponents: Record<string, ComponentUIDL>
+): ComponentUIDL | undefined => {
+  if (element.dependency?.type !== 'local') {
+    return undefined
+  }
+  const reference = element.semanticType || element.elementType
+  return (
+    projectComponents[reference] ||
+    Object.values(projectComponents).find(
+      (component) => UIDLUtils.getComponentClassName(component) === reference
+    )
+  )
+}
+
+/** The components a node tree renders, directly or through other components. */
+const collectRenderedComponents = (
+  node: UIDLNode,
+  projectComponents: Record<string, ComponentUIDL>,
+  rendered: Set<ComponentUIDL>
+): Set<ComponentUIDL> => {
+  UIDLUtils.traverseElements(node, (element) => {
+    const component = findRenderedComponent(element, projectComponents)
+    if (component && !rendered.has(component)) {
+      rendered.add(component)
+      collectRenderedComponents(component.node, projectComponents, rendered)
+    }
+  })
+  return rendered
+}
+
+/**
+ * Mirrors what the workflow plugin emits into the component: the workflows it
+ * finds relevant, with an element-visible trigger kept only when the observed
+ * element is rendered by the component itself.
+ */
+const componentRunsOnArrival = (component: ComponentUIDL, workflows: UIDLWorkflows): boolean => {
+  const arrivalWorkflows = getRelevantWorkflows(workflows, component, false).filter(
+    isPageArrivalWorkflow
+  )
+  if (arrivalWorkflows.length === 0) {
+    return false
+  }
+  const elementIds = collectStaticElementIds(component.node)
+  return arrivalWorkflows.some((workflow) => {
+    const targetId = resolveLifecycleTriggerElementId(
+      workflow.trigger.type,
+      (workflow.trigger.config || {}) as Record<string, unknown>
+    )
+    return (
+      workflow.trigger.type !== 'event-element-visible' ||
+      (targetId !== null && elementIds.has(targetId))
+    )
+  })
+}
+
+/**
+ * True when a component the page renders runs a workflow when it appears — an
+ * element-visible trigger on one of its elements, a component-loaded trigger.
+ * The component mounts again only when the page around it does, so such a page
+ * remounts on every arrival even when it has no arrival trigger of its own.
+ */
+export const pageRendersArrivalComponent = (
+  pageNode: UIDLNode,
+  workflows: UIDLWorkflows,
+  projectComponents?: Record<string, ComponentUIDL>
+): boolean => {
+  if (!projectComponents) {
+    return false
+  }
+  const rendered = collectRenderedComponents(pageNode, projectComponents, new Set())
+  return Array.from(rendered).some((component) => componentRunsOnArrival(component, workflows))
+}

package/src/payments/index.ts

@@ -2,6 +2,7 @@ import {
   FileType,
   ProjectPluginStructure,
   ProjectUIDL,
+  UIDLEcommercePaymentProvider,
   UIDLWorkflows,
 } from '@teleporthq/teleport-types'
 import { generatePaymentCoreCode } from './payment-core-code'
@@ -63,6 +64,18 @@ export const isPaymentWebhookConfig = (webhookConfig: unknown): boolean =>
   ((webhookConfig || {}) as { signatureAlgorithm?: unknown }).signatureAlgorithm ===
     PAYMENT_DRIVER_SIGNATURE_ALGORITHM
 
+/**
+ * The providers the site is paid through: the store's (`ecommerceSettings`),
+ * or — on a site that takes payments without a store, for its bookings —
+ * `paymentSettings`'.
+ */
+export const readUidlPaymentProviders = (
+  uidl: Pick<ProjectUIDL, 'ecommerceSettings' | 'paymentSettings'> | undefined
+): UIDLEcommercePaymentProvider[] =>
+  (uidl?.ecommerceSettings
+    ? uidl.ecommerceSettings.paymentProviders
+    : uidl?.paymentSettings?.paymentProviders) || []
+
 /**
  * The providers this store needs a driver for: every provider its checkout
  * offers, every provider a payment webhook verifies through, and Stripe +
@@ -71,11 +84,11 @@ export const isPaymentWebhookConfig = (webhookConfig: unknown): boolean =>
  * payment, in which case no driver module is written.
  */
 export const resolveStorePaymentDriverIds = (
-  uidl: Pick<ProjectUIDL, 'ecommerceSettings'> & { workflows?: UIDLWorkflows },
+  uidl: Pick<ProjectUIDL, 'ecommerceSettings' | 'paymentSettings'> & { workflows?: UIDLWorkflows },
   usedNodeTypes: Iterable<string>
 ): PaymentDriverId[] => {
   const wanted = new Set<PaymentDriverId>()
-  for (const provider of uidl.ecommerceSettings?.paymentProviders || []) {
+  for (const provider of readUidlPaymentProviders(uidl)) {
     const id = String(provider?.type || '').toLowerCase()
     if (isPaymentDriverId(id)) {
       wanted.add(id)
@@ -98,13 +111,13 @@ const ENV_NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/
 
 /**
  * The secret the merchant saved each live provider credential under, as the
- * editor exported it (`ecommerceSettings.paymentProviders[].credentials`).
+ * editor exported it (`paymentProviders[].credentials` of either block).
  */
 export const readDeclaredPaymentCredentials = (
-  uidl: Pick<ProjectUIDL, 'ecommerceSettings'> | undefined
+  uidl: Pick<ProjectUIDL, 'ecommerceSettings' | 'paymentSettings'> | undefined
 ): DeclaredPaymentCredentials => {
   const declared: DeclaredPaymentCredentials = {}
-  for (const provider of uidl?.ecommerceSettings?.paymentProviders || []) {
+  for (const provider of readUidlPaymentProviders(uidl)) {
     const id = String(provider?.type || '').toLowerCase()
     if (!isPaymentDriverId(id)) {
       continue

package/src/segment-splitter.ts

@@ -1,6 +1,6 @@
 import { UIDLWorkflow, UIDLWorkflowNode, UIDLWorkflowEdge } from '@teleporthq/teleport-types'
 import { WorkflowSegment, WorkflowExecutionEnv } from './types'
-import { getLoopBodyNodes, getNodeById, getTopologicalOrder } from './graph-utils'
+import { getDependents, getLoopBodyNodes, getNodeById, getTopologicalOrder } from './graph-utils'
 import { nodeRegistry } from './nodes'
 import { AWAIT_RESULT_CONFIG_KEY } from './await-result'
 import { WELCOME_EMAIL_CONFIG_KEYS } from './transactional-email-code'
@@ -144,25 +144,54 @@ export const splitIntoSegments = (workflow: UIDLWorkflow): WorkflowSegment[] =>
       ? workflow.edges.filter((e) => !errorBranchIds.has(e.source) && !errorBranchIds.has(e.target))
       : workflow.edges
 
-  const order = getTopologicalOrder(mainNodes, mainEdges)
   // Loop bodies must execute as a single unit at runtime. The split-by-env
   // walk below would otherwise drop AI/server steps in one segment and the
   // client-only post-processing into another, leaving the loop's body half-
-  // executed for every iteration. We reorder the topo so all body nodes sit
-  // immediately after their owning loop, and we record a single forced env
-  // (server if any body or the loop itself needs server, else client) so the
-  // forthcoming env walk emits one segment for the loop + body.
-  const { reorderedOrder, forcedEnvByNodeId } = enforceLoopBodyIntegrity(
-    order,
+  // executed for every iteration. Every loop + body gets a single forced env
+  // (server if any body or the loop itself needs server, else client), and the
+  // topo order is rearranged so all body nodes sit immediately after their
+  // owning loop, so the env walk emits one segment for the loop + body.
+  const forcedEnvByNodeId = resolveLoopClusterEnvs(mainNodes, mainEdges)
+  const order = getTopologicalOrder(
     mainNodes,
-    mainEdges
+    mainEdges,
+    (node) => forcedEnvByNodeId.get(node.id) ?? resolveFixedExecutionEnv(node)
   )
+  const reorderedOrder = hoistLoopBodies(order, mainNodes, mainEdges)
   const segments: WorkflowSegment[] = []
   let currentEnv: WorkflowExecutionEnv | null = null
   let currentNodeIds: string[] = []
   let segClientCount = 0
   let segServerCount = 0
 
+  // A server route runs its segment's nodes by stepNumber, never by edge, so a
+  // node must not join a segment holding one of its inputs at a later step (a
+  // join also reached by a shorter path, a value read across branches): the
+  // route would run it first. Loop bodies run inside their loop, at the loop's
+  // step, and never leave its segment.
+  const inputsById = new Map<string, string[]>()
+  Object.entries(getDependents(mainNodes, mainEdges)).forEach(([source, dependents]) =>
+    dependents.forEach((id) => inputsById.set(id, [...(inputsById.get(id) || []), source]))
+  )
+  const loopStepByBodyNodeId = new Map<string, number>()
+  mainNodes
+    .filter((n) => n.type === 'general-loop')
+    .forEach((loop) =>
+      getLoopBodyNodes(loop.id, mainEdges).forEach((id) =>
+        loopStepByBodyNodeId.set(
+          id,
+          Math.min(loopStepByBodyNodeId.get(id) ?? Infinity, loop.stepNumber || 0)
+        )
+      )
+    )
+  const runsAtStep = (nodeId: string): number =>
+    loopStepByBodyNodeId.get(nodeId) ?? (getNodeById(mainNodes, nodeId)?.stepNumber || 0)
+  const readsALaterStepOfThisSegment = (node: UIDLWorkflowNode): boolean =>
+    !loopStepByBodyNodeId.has(node.id) &&
+    (inputsById.get(node.id) || []).some(
+      (inputId) => currentNodeIds.includes(inputId) && runsAtStep(inputId) > (node.stepNumber || 0)
+    )
+
   const flushSegment = () => {
     if (currentNodeIds.length === 0 || currentEnv === null) {
       return
@@ -196,7 +225,10 @@ export const splitIntoSegments = (workflow: UIDLWorkflow): WorkflowSegment[] =>
     const forced = forcedEnvByNodeId.get(nodeId)
     const nodeEnv = forced ?? resolveExecutionEnv(node, currentEnv)
 
-    if (currentEnv !== null && nodeEnv !== currentEnv) {
+    if (
+      currentEnv !== null &&
+      (nodeEnv !== currentEnv || (nodeEnv === 'server' && readsALaterStepOfThisSegment(node)))
+    ) {
       flushSegment()
     }
     currentEnv = nodeEnv
@@ -208,10 +240,7 @@ export const splitIntoSegments = (workflow: UIDLWorkflow): WorkflowSegment[] =>
 }
 
 /**
- * Re-arrange the topological node order so every loop's body nodes sit
- * directly after the loop, and pick a single execution env for the
- * (loop + body) cluster. Nested loops are processed inner-first so the outer
- * loop's body window already contains the inner body in the right order.
+ * The single execution env of every (loop + body) cluster.
  *
  * Why an explicit env override is needed: a body that mixes universal /
  * server / client nodes (e.g. fetch → AI prompt → custom-js with
@@ -224,19 +253,58 @@ export const splitIntoSegments = (workflow: UIDLWorkflow): WorkflowSegment[] =>
  * runs the same string of JS regardless of where it executes); the inverse
  * is not true for AI / HTTP-with-secret nodes. When no member is server, we
  * keep the cluster on the client so DOM- or window-bound bodies still work.
+ * A node of nested loops takes its outermost loop's env, which is server
+ * whenever an inner loop's is.
  */
-const enforceLoopBodyIntegrity = (
-  order: string[],
+const resolveLoopClusterEnvs = (
   mainNodes: UIDLWorkflowNode[],
   mainEdges: UIDLWorkflowEdge[]
-): {
-  reorderedOrder: string[]
-  forcedEnvByNodeId: Map<string, WorkflowExecutionEnv>
-} => {
+): Map<string, WorkflowExecutionEnv> => {
   const forcedEnvByNodeId = new Map<string, WorkflowExecutionEnv>()
+  for (const loop of mainNodes.filter((n) => n.type === 'general-loop')) {
+    const bodyIds = getLoopBodyNodes(loop.id, mainEdges)
+    if (bodyIds.length === 0) {
+      continue
+    }
+    const clusterMembers = [loop.id, ...bodyIds]
+      .map((id) => getNodeById(mainNodes, id))
+      .filter((n): n is UIDLWorkflowNode => Boolean(n))
+    const clusterEnv: WorkflowExecutionEnv = clusterMembers.some(
+      (member) => resolveExecutionEnv(member, null) === 'server'
+    )
+      ? 'server'
+      : 'client'
+    for (const member of clusterMembers) {
+      if (forcedEnvByNodeId.get(member.id) !== 'server') {
+        forcedEnvByNodeId.set(member.id, clusterEnv)
+      }
+    }
+  }
+  return forcedEnvByNodeId
+}
+
+/**
+ * Where a node runs whatever ran before it, or `null` for a node that takes the
+ * env of the node before it (an if-statement): it fits either side.
+ */
+const resolveFixedExecutionEnv = (node: UIDLWorkflowNode): WorkflowExecutionEnv | null => {
+  const env = resolveExecutionEnv(node, 'server')
+  return env === resolveExecutionEnv(node, 'client') ? env : null
+}
+
+/**
+ * Re-arrange the topological node order so every loop's body nodes sit
+ * directly after the loop. Nested loops are processed inner-first so the outer
+ * loop's body window already contains the inner body in the right order.
+ */
+const hoistLoopBodies = (
+  order: string[],
+  mainNodes: UIDLWorkflowNode[],
+  mainEdges: UIDLWorkflowEdge[]
+): string[] => {
   const loopNodes = mainNodes.filter((n) => n.type === 'general-loop')
   if (loopNodes.length === 0) {
-    return { reorderedOrder: order, forcedEnvByNodeId }
+    return order
   }
 
   // Process inner loops before outer ones: an inner loop's body is a subset
@@ -253,20 +321,6 @@ const enforceLoopBodyIntegrity = (
     }
 
     const clusterIds = new Set<string>([loopId, ...bodyIds])
-    const clusterMembers = Array.from(clusterIds)
-      .map((id) => getNodeById(mainNodes, id))
-      .filter((n): n is UIDLWorkflowNode => Boolean(n))
-
-    let clusterEnv: WorkflowExecutionEnv = 'client'
-    for (const member of clusterMembers) {
-      if (resolveExecutionEnv(member, null) === 'server') {
-        clusterEnv = 'server'
-        break
-      }
-    }
-    for (const member of clusterMembers) {
-      forcedEnvByNodeId.set(member.id, clusterEnv)
-    }
 
     // Hoist body nodes (preserving their existing relative order) immediately
     // after the loop. Other nodes keep their relative position.
@@ -283,7 +337,7 @@ const enforceLoopBodyIntegrity = (
     ]
   }
 
-  return { reorderedOrder: working, forcedEnvByNodeId }
+  return working
 }
 
 /**

package/src/transactional-email-code.ts

@@ -5,6 +5,7 @@
  * every route stays byte-for-byte consistent.
  */
 import { UIDLLocalizedEmailTemplates } from '@teleporthq/teleport-types'
+import { EmailSender } from '@teleporthq/teleport-shared'
 import { getEmailProviderDependencies } from './invoice/email-sender-code'
 import { EMAIL_LOCALE_FILE_NAME, EMAIL_LOCALE_PATH } from './email-locale/email-locale-scope'
 
@@ -39,24 +40,28 @@ export interface TransactionalEmailLedger {
   relativePrefix: string
 }
 
-// Provider-specific `__sendProviderEmail({ from, to, subject, html, apiKey,
-// tokenValues?, userId? })`. No attachment (unlike the invoice sender). When
-// no provider is configured the function is a no-op so the route stays
-// self-contained and never throws. With `ledger`, the provider function is
-// emitted as `__sendProviderEmailRaw` and `__sendProviderEmail` records every
-// attempt (success or throw) before returning / rethrowing.
+// Provider-specific `__sendProviderEmail({ from, fromName?, to, subject, html,
+// apiKey, tokenValues?, userId? })`, preceded by the `__emailSender` helper that
+// names the sender. No attachment (unlike the invoice sender). When no provider
+// is configured the function is a no-op so the route stays self-contained and
+// never throws. With `ledger`, the provider function is emitted as
+// `__sendProviderEmailRaw` and `__sendProviderEmail` records every attempt
+// (success or throw) before returning / rethrowing.
 export const generateProviderSendFunction = (
   provider?: string | null,
   ledger?: TransactionalEmailLedger
 ): string => {
   const raw = generateRawProviderSendFunction(provider)
-  if (!ledger || !provider || !SUPPORTED_EMAIL_PROVIDERS.has(provider)) {
+  if (!provider || !SUPPORTED_EMAIL_PROVIDERS.has(provider)) {
     return raw
   }
-  return `${raw.replace(
-    'async function __sendProviderEmail(',
-    'async function __sendProviderEmailRaw('
-  )}
+  const senderHelper = EmailSender.generateEmailSenderHelperCode()
+  if (!ledger) {
+    return `${senderHelper}
+${raw}`
+  }
+  return `${senderHelper}
+${raw.replace('async function __sendProviderEmail(', 'async function __sendProviderEmailRaw(')}
 
 var __sentEmailLog = require('${ledger.relativePrefix}/utils/email/sent-email-log');
 
@@ -67,12 +72,14 @@ async function __sendProviderEmail(msg) {
   } catch (err) {
     failure = err;
   }
+  var sender = __emailSender({ from: msg.from, name: msg.fromName });
   // Recorded in the background; the route settles the ledger before it replies.
   __sentEmailLog.recordSentEmail({
     emailType: ${JSON.stringify(ledger.emailType)},
     audience: 'customer',
     to: msg.to,
-    from: msg.from,
+    from: sender.email,
+    fromName: sender.name,
     subject: msg.subject,
     html: msg.html,
     payload: msg.tokenValues,
@@ -93,20 +100,26 @@ const generateRawProviderSendFunction = (provider?: string | null): string => {
       return `async function __sendProviderEmail(msg) {
   var Resend = require('resend').Resend;
   var resend = new Resend(msg.apiKey);
-  var result = await resend.emails.send({ from: msg.from, to: [msg.to], subject: msg.subject, html: msg.html });
+  var sender = __emailSender({ from: msg.from, name: msg.fromName });
+  var result = await resend.emails.send({ from: sender.header, to: [msg.to], subject: msg.subject, html: msg.html });
   if (result && result.error) { throw new Error(result.error.message || 'Failed to send email'); }
 }`
     case 'sendgrid':
+      // SendGrid reads a "Name <email>" string's name verbatim, quotes included,
+      // so a named sender goes as its two parts.
       return `async function __sendProviderEmail(msg) {
   var sgMail = require('@sendgrid/mail');
   sgMail.setApiKey(msg.apiKey);
-  await sgMail.send({ to: msg.to, from: msg.from, subject: msg.subject, html: msg.html });
+  var sender = __emailSender({ from: msg.from, name: msg.fromName });
+  var from = sender.name ? { email: sender.email, name: sender.name } : sender.email;
+  await sgMail.send({ to: msg.to, from: from, subject: msg.subject, html: msg.html });
 }`
     case 'postmark':
       return `async function __sendProviderEmail(msg) {
   var postmark = require('postmark');
   var client = new postmark.ServerClient(msg.apiKey);
-  await client.sendEmail({ From: msg.from, To: msg.to, Subject: msg.subject, HtmlBody: msg.html });
+  var sender = __emailSender({ from: msg.from, name: msg.fromName });
+  await client.sendEmail({ From: sender.header, To: msg.to, Subject: msg.subject, HtmlBody: msg.html });
 }`
     case 'mailgun':
       return `async function __sendProviderEmail(msg) {
@@ -116,7 +129,8 @@ const generateRawProviderSendFunction = (provider?: string | null): string => {
   if (!domain) { throw new Error('Mailgun domain not configured'); }
   var mailgun = new Mailgun(formData);
   var mg = mailgun.client({ username: 'api', key: msg.apiKey });
-  await mg.messages.create(domain, { from: msg.from, to: [msg.to], subject: msg.subject, html: msg.html });
+  var sender = __emailSender({ from: msg.from, name: msg.fromName });
+  await mg.messages.create(domain, { from: sender.header, to: [msg.to], subject: msg.subject, html: msg.html });
 }`
     case 'mailersend':
       return `async function __sendProviderEmail(msg) {
@@ -125,11 +139,8 @@ const generateRawProviderSendFunction = (provider?: string | null): string => {
   var Sender = require('mailersend').Sender;
   var Recipient = require('mailersend').Recipient;
   var mailerSend = new MailerSend({ apiKey: msg.apiKey });
-  var fromStr = String(msg.from || '').trim();
-  var m = /^(.*)<([^<>]+)>\\s*$/.exec(fromStr);
-  var fromEmail = m ? m[2].trim() : fromStr;
-  var fromName = m ? m[1].trim() : '';
-  var sender = new Sender(fromEmail, fromName || fromEmail);
+  var from = __emailSender({ from: msg.from, name: msg.fromName });
+  var sender = new Sender(from.email, from.name || from.email);
   var params = new EmailParams().setFrom(sender).setTo([new Recipient(msg.to)]).setSubject(msg.subject).setHtml(msg.html);
   await mailerSend.email.send(params);
 }`