@teleporthq/teleport-plugin-next-workflows 0.43.46 → 0.43.48

package/__tests__/element-trigger-static-attr-replace.test.ts

@@ -0,0 +1,99 @@
+import { parse } from '@babel/parser'
+import generate from '@babel/generator'
+import { createNextWorkflowPlugin } from '../src/workflow-component-plugin'
+
+// Regression guard for the "Resolved pill crashes with `func.apply is not a
+// function`" bug.
+//
+// The alerts-inbox fixture carried a stray STATIC attr `onClick: ""` on
+// `status-resolved-btn` (junk from the element author — behavior belongs in
+// `events` / workflow triggers). The trigger injector saw an existing onClick
+// attr, found its value was a string literal rather than an expression, and
+// `continue`d — silently dropping the workflow wiring AND shipping
+// `onClick=""`, which React invokes as a listener on click and crashes.
+// The fix replaces a non-expression event prop with the workflow handler.
+
+const clickWorkflow = (elementHtmlId: string) => ({
+  id: 'wf-resolved-pill',
+  name: 'Sync Status Filter Segment Copy 3',
+  trigger: {
+    type: 'event-element-clicked',
+    nodeId: 'trigger-click',
+    scope: 'element',
+    config: { elementHtmlId, eventType: 'click' },
+  },
+  nodes: [
+    {
+      id: 'update-1',
+      type: 'state-update-local-state',
+      config: { property: 'statusFilterSegment', value: 'Resolved' },
+      stepNumber: 1,
+    },
+  ],
+  edges: [{ id: 'e1', source: 'trigger-click', target: 'update-1' }],
+})
+
+const parseComponentChunk = (source: string) => {
+  const ast = parse(source, { plugins: ['jsx'] })
+  return {
+    type: 'chunk-type-ast',
+    name: 'jsx-component',
+    content: ast.program.body[0],
+  }
+}
+
+const runPlugin = async (componentSource: string) => {
+  const chunk = parseComponentChunk(componentSource)
+  const structure: any = {
+    uidl: {
+      name: 'AlertsInbox',
+      outputOptions: { pageId: 'page-alerts', fileName: 'alerts-inbox' },
+      stateDefinitions: {},
+      node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+    },
+    chunks: [chunk],
+    options: {
+      workflows: {
+        workflows: { 'wf-resolved-pill': clickWorkflow('status-resolved-btn') },
+        customNodes: {},
+      },
+    },
+    dependencies: {},
+  }
+  const plugin = createNextWorkflowPlugin({ isPage: true })
+  await plugin(structure)
+  return generate(chunk.content as any).code
+}
+
+describe('element trigger wiring over a non-expression event prop', () => {
+  it('replaces a static onClick="" with the workflow handler call', async () => {
+    const code = await runPlugin(`const AlertsInbox = (props) => {
+      return (
+        <button id="status-resolved-btn" onClick="">Resolved</button>
+      )
+    }`)
+    expect(code).not.toContain('onClick=""')
+    expect(code).toContain(`__wfRef.current.elementTriggers["status-resolved-btn"]["onClick"]`)
+  })
+
+  it('still combines with an existing expression handler', async () => {
+    const code = await runPlugin(`const AlertsInbox = (props) => {
+      return (
+        <button id="status-resolved-btn" onClick={() => setStatusFilterSegment('Resolved')}>
+          Resolved
+        </button>
+      )
+    }`)
+    expect(code).toContain(`setStatusFilterSegment('Resolved')`)
+    expect(code).toContain(`__wfRef.current.elementTriggers["status-resolved-btn"]["onClick"]`)
+  })
+
+  it('adds the handler directly when the element has no event prop', async () => {
+    const code = await runPlugin(`const AlertsInbox = (props) => {
+      return (
+        <button id="status-resolved-btn">Resolved</button>
+      )
+    }`)
+    expect(code).toContain(`__wfRef.current.elementTriggers["status-resolved-btn"]["onClick"]`)
+  })
+})

package/__tests__/element-visible-trigger-scoping.test.ts

@@ -0,0 +1,296 @@
+// `event-element-visible` is a LIFECYCLE trigger (IntersectionObserver, no React
+// event prop) that is nonetheless bound to ONE element. Two defects followed
+// from that, both shipped in run a15472af's cookie-consent banner:
+//
+//   1. The observer looked the element up by `config.nodeId` — the
+//      project-document id (`TQ_…`) — instead of `config.elementHtmlId`, the DOM
+//      id the generator actually emits. `getElementById` returned null on every
+//      page, so the observer was never constructed and the banner (whose only
+//      writer is that workflow) could never appear. 408 dead lookups across 24
+//      files.
+//
+//   2. Having no React prop, it fell into `lifecycleWorkflows`, which were
+//      activated unconditionally — bypassing the JSX-presence prune that is the
+//      only thing scoping element workflows to a page. One workflow shipped into
+//      EVERY generated file, 17 per page, including 404.js and logo.js.
+
+import { createNextWorkflowPlugin } from '../src/workflow-component-plugin'
+
+const HTML_ID = 'thq_container_pu-S'
+const NODE_ID = 'TQ__X8oOlJm82'
+
+const elementVisibleWorkflow = (config: Record<string, unknown>) => ({
+  id: 'wf-cookie-visible',
+  name: 'Cookie Consent Check on Load',
+  trigger: {
+    type: 'event-element-visible',
+    nodeId: 'trigger-element-visible',
+    scope: 'element',
+    config,
+  },
+  nodes: [
+    {
+      id: 'update-1',
+      type: 'state-update-local-state',
+      config: { property: 'cookieConsentVisible', value: true },
+      stepNumber: 1,
+      label: 'Show banner',
+    },
+  ],
+  edges: [{ id: 'e1', source: 'trigger-element-visible', target: 'update-1' }],
+})
+
+/** A JSX tree whose root element carries `id={HTML_ID}` — i.e. the page that owns it. */
+const jsxWithElementId = (elementId: string | null) => ({
+  type: 'chunk-type-ast',
+  name: 'jsx-component',
+  content: {
+    type: 'VariableDeclaration',
+    declarations: [
+      {
+        type: 'VariableDeclarator',
+        init: {
+          type: 'ArrowFunctionExpression',
+          body: {
+            type: 'BlockStatement',
+            body: [
+              {
+                type: 'ReturnStatement',
+                argument: elementId
+                  ? {
+                      type: 'JSXElement',
+                      openingElement: {
+                        type: 'JSXOpeningElement',
+                        name: { type: 'JSXIdentifier', name: 'div' },
+                        attributes: [
+                          {
+                            type: 'JSXAttribute',
+                            name: { type: 'JSXIdentifier', name: 'id' },
+                            value: { type: 'StringLiteral', value: elementId },
+                          },
+                        ],
+                      },
+                      children: [],
+                    }
+                  : {
+                      type: 'JSXElement',
+                      openingElement: {
+                        type: 'JSXOpeningElement',
+                        name: { type: 'JSXIdentifier', name: 'div' },
+                        attributes: [],
+                      },
+                      children: [],
+                    },
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+})
+
+const getWorkflowModule = async (
+  workflow: any,
+  renderedElementId: string | null
+): Promise<string | null> => {
+  const plugin = createNextWorkflowPlugin({ isPage: true })
+  const structure: any = {
+    uidl: {
+      name: 'Dashboard',
+      node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+      stateDefinitions: { cookieConsentVisible: { type: 'boolean', defaultValue: false } },
+    },
+    chunks: [jsxWithElementId(renderedElementId)],
+    options: { workflows: { workflows: { [workflow.id]: workflow }, customNodes: {} } },
+    dependencies: {},
+  }
+  await plugin(structure)
+  const moduleChunk = (structure.chunks as any[]).find((c: any) => c.name === 'workflow-module')
+  return moduleChunk ? String(moduleChunk.content) : null
+}
+
+describe('event-element-visible — element lookup', () => {
+  it('observes the DOM id, not the project-document node id', async () => {
+    const code = await getWorkflowModule(
+      elementVisibleWorkflow({ nodeId: NODE_ID, elementHtmlId: HTML_ID, once: true }),
+      HTML_ID
+    )
+    expect(code).not.toBeNull()
+    expect(code).toContain(`document.getElementById('${HTML_ID}')`)
+    expect(code).not.toContain(NODE_ID)
+  })
+
+  it('reports the DOM id in the trigger context too', async () => {
+    const code = await getWorkflowModule(
+      elementVisibleWorkflow({ nodeId: NODE_ID, elementHtmlId: HTML_ID, once: true }),
+      HTML_ID
+    )
+    expect(code).toContain(`elementId: '${HTML_ID}'`)
+  })
+
+  it('still falls back to nodeId when no html id was mapped', async () => {
+    const code = await getWorkflowModule(
+      elementVisibleWorkflow({ nodeId: NODE_ID, once: true }),
+      NODE_ID
+    )
+    expect(code).toContain(`document.getElementById('${NODE_ID}')`)
+  })
+})
+
+describe('event-element-visible — per-page scoping', () => {
+  it('is generated into the page that renders its element', async () => {
+    const code = await getWorkflowModule(
+      elementVisibleWorkflow({ nodeId: NODE_ID, elementHtmlId: HTML_ID, once: true }),
+      HTML_ID
+    )
+    expect(code).not.toBeNull()
+    expect(code).toContain('Element visible')
+  })
+
+  it('is NOT generated into a page that does not render its element', async () => {
+    // The 404 / logo case: 17 dead observers per file for a banner it never has.
+    const code = await getWorkflowModule(
+      elementVisibleWorkflow({ nodeId: NODE_ID, elementHtmlId: HTML_ID, once: true }),
+      'thq_container_somewhere_else'
+    )
+    expect(code === null || !code.includes('Element visible')).toBe(true)
+  })
+
+  it('stays active when the trigger names no element at all (nothing to prune against)', async () => {
+    const code = await getWorkflowModule(
+      elementVisibleWorkflow({ once: true }),
+      'thq_container_somewhere_else'
+    )
+    expect(code).not.toBeNull()
+    expect(code).toContain('Element visible')
+  })
+
+  it('leaves element-less lifecycle workflows (page-loaded) unconditionally active', async () => {
+    const pageLoaded = {
+      id: 'wf-page-loaded',
+      name: 'Init Page',
+      // `allPages` because an UNSCOPED page-loaded is deliberately skipped by
+      // pre-existing relevance filtering (workflow-component-plugin.ts:2653-2660)
+      // — unrelated to element scoping, but it would mask what this asserts.
+      trigger: {
+        type: 'event-page-loaded',
+        nodeId: 't1',
+        scope: 'page',
+        config: { allPages: true },
+      },
+      nodes: [
+        {
+          id: 'update-1',
+          type: 'state-update-local-state',
+          config: { property: 'cookieConsentVisible', value: true },
+          stepNumber: 1,
+          label: 'x',
+        },
+      ],
+      edges: [{ id: 'e1', source: 't1', target: 'update-1' }],
+    }
+    const code = await getWorkflowModule(pageLoaded, 'unrelated-element')
+    expect(code).not.toBeNull()
+  })
+})
+
+// Regression for the product-card `ReferenceError: __wfConfig_… is not defined`
+// crash. The per-page prune removed the unmatched element-visible workflow from
+// the CONFIG emission (`activeWorkflows`) but NOT from the lifecycle HANDLER
+// emission — so the module still contained an IntersectionObserver that resolves
+// its target with a DOCUMENT-WIDE `getElementById`, matches the shared cookie
+// banner another component rendered, and calls `__execWf(__wfConfig_<id>)` for a
+// config that was never declared. The single-workflow "not generated" test above
+// can't catch it: with only the unmatched workflow the whole module is empty. The
+// bug needs a SECOND, active workflow keeping the module alive — exactly the
+// product card, which has real click handlers plus ~23 riding cookie observers.
+describe('event-element-visible — config/handler integrity when the module is kept alive', () => {
+  // Unconditionally-active (no element target) — stands in for the card's real
+  // click workflows: it keeps the workflow module non-empty.
+  const keepAliveWorkflow = {
+    id: 'wf-keep-alive',
+    name: 'Init Card',
+    trigger: {
+      type: 'event-page-loaded',
+      nodeId: 't-alive',
+      scope: 'page',
+      config: { allPages: true },
+    },
+    nodes: [
+      {
+        id: 'a1',
+        type: 'state-update-local-state',
+        config: { property: 'cookieConsentVisible', value: true },
+        stepNumber: 1,
+        label: 'x',
+      },
+    ],
+    edges: [{ id: 'ea', source: 't-alive', target: 'a1' }],
+  }
+
+  const getModuleForWorkflows = async (
+    wfs: any[],
+    renderedElementId: string | null
+  ): Promise<string | null> => {
+    const plugin = createNextWorkflowPlugin({ isPage: true })
+    const workflowsMap: Record<string, any> = {}
+    for (const wf of wfs) {
+      workflowsMap[wf.id] = wf
+    }
+    const structure: any = {
+      uidl: {
+        name: 'ProductCard',
+        node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+        stateDefinitions: { cookieConsentVisible: { type: 'boolean', defaultValue: false } },
+      },
+      chunks: [jsxWithElementId(renderedElementId)],
+      options: { workflows: { workflows: workflowsMap, customNodes: {} } },
+      dependencies: {},
+    }
+    await plugin(structure)
+    const moduleChunk = (structure.chunks as any[]).find((c: any) => c.name === 'workflow-module')
+    return moduleChunk ? String(moduleChunk.content) : null
+  }
+
+  it('prunes an unmatched element-visible handler even when another workflow keeps the module alive', async () => {
+    const cookie = elementVisibleWorkflow({
+      nodeId: NODE_ID,
+      elementHtmlId: 'thq_not_on_this_card',
+      once: true,
+    })
+    const code = await getModuleForWorkflows([keepAliveWorkflow, cookie], HTML_ID)
+    expect(code).not.toBeNull()
+    // The keep-alive workflow is present, so the module really is non-empty.
+    expect(code).toContain('const __wfConfig_wf_keep_alive =')
+    // The unmatched cookie observer must be fully gone: no config, no handler,
+    // no reference to its element.
+    expect(code).not.toContain('__wfConfig_wf_cookie_visible')
+    expect(code).not.toContain('thq_not_on_this_card')
+  })
+
+  it('leaves no dangling __wfConfig_ reference (every used config is declared)', async () => {
+    const cookie = elementVisibleWorkflow({
+      nodeId: NODE_ID,
+      elementHtmlId: 'thq_not_on_this_card',
+      once: true,
+    })
+    const code = (await getModuleForWorkflows([keepAliveWorkflow, cookie], HTML_ID)) || ''
+    const declared = new Set(
+      Array.from(code.matchAll(/const (__wfConfig_[A-Za-z0-9_]+)\s*=/g)).map((m) => m[1])
+    )
+    const used = new Set(
+      Array.from(code.matchAll(/__execWf\(\s*(__wfConfig_[A-Za-z0-9_]+)/g)).map((m) => m[1])
+    )
+    const dangling = Array.from(used).filter((id) => !declared.has(id))
+    expect(dangling).toEqual([])
+  })
+
+  it('still emits the element-visible workflow on the card that DOES render its element', async () => {
+    const cookie = elementVisibleWorkflow({ nodeId: NODE_ID, elementHtmlId: HTML_ID, once: true })
+    const code = await getModuleForWorkflows([keepAliveWorkflow, cookie], HTML_ID)
+    expect(code).not.toBeNull()
+    expect(code).toContain('Element visible')
+    expect(code).toContain('const __wfConfig_wf_cookie_visible =')
+  })
+})

package/__tests__/payment-charge-user-handler-serialization.test.ts

@@ -44,9 +44,11 @@ describe('payment-charge-user handler serialization survives minification-style
     expect(fnStart).toBeGreaterThan(-1)
     // The next function declaration marks the end of toStripeMinorUnits's
     // body (functions are concatenated back-to-back by generateHandler()).
-    const nextFnStart = handlerSource.indexOf('function chargeWithStripe', fnStart)
-    expect(nextFnStart).toBeGreaterThan(fnStart)
-    const body = handlerSource.slice(fnStart, nextFnStart)
+    // chargeWithStripe is `async function …` — the slice must stop BEFORE the
+    // `async` keyword or the extracted body ends with a dangling `async`.
+    const nextFn = /(?:async\s+)?function chargeWithStripe/.exec(handlerSource.slice(fnStart))
+    expect(nextFn).not.toBeNull()
+    const body = handlerSource.slice(fnStart, fnStart + nextFn!.index)
     expect(body).toContain('JPY')
     expect(body).toContain('BHD')
   })
@@ -62,8 +64,8 @@ describe('payment-charge-user handler serialization survives minification-style
   describe('toStripeMinorUnits — extracted from the serialized handler source', () => {
     const toStripeMinorUnits = (() => {
       const fnStart = handlerSource.indexOf('function toStripeMinorUnits')
-      const nextFnStart = handlerSource.indexOf('function chargeWithStripe', fnStart)
-      const body = handlerSource.slice(fnStart, nextFnStart)
+      const nextFn = /(?:async\s+)?function chargeWithStripe/.exec(handlerSource.slice(fnStart))
+      const body = handlerSource.slice(fnStart, fnStart + (nextFn as RegExpExecArray).index)
       return new Function(body + '\nreturn toStripeMinorUnits;')() as (
         major: unknown,
         currency: string

package/__tests__/payment-redirect-and-order-notification.test.ts

@@ -51,10 +51,12 @@ describe('payment-charge-user emits __redirectUrl alongside __terminal', () => {
     // reset-isPlacingOrder) are NOT executed before the buyer
     // leaves for Stripe — the cart should only clear on the
     // payment-success return URL.
-    const stripeBlock = handlerSource.slice(
-      handlerSource.indexOf('checkoutUrl: checkoutUrl'),
-      handlerSource.indexOf('checkoutUrl: checkoutUrl') + 300
-    )
+    // The source uses object shorthand (`{ checkoutUrl, ... }`), so anchor on
+    // the explicit __redirectUrl entry and assert __terminal sits in the same
+    // return object.
+    const anchor = handlerSource.indexOf('__redirectUrl: checkoutUrl')
+    expect(anchor).toBeGreaterThan(-1)
+    const stripeBlock = handlerSource.slice(Math.max(0, anchor - 300), anchor + 300)
     expect(stripeBlock).toContain('__terminal: true')
     expect(stripeBlock).toContain('__redirectUrl: checkoutUrl')
   })

package/__tests__/raw-sql-param-binding.test.ts

@@ -107,6 +107,88 @@ describe('parameterizeWorkflowRawSqlInterpolations', () => {
   })
 })
 
+describe('CASE/WHEN/THEN/ELSE and TRIM(... FROM ...) value positions', () => {
+  it('binds tokens after WHEN as positional parameters', () => {
+    const res = parameterizeRawSqlInterpolations(
+      "SELECT * FROM events WHERE (CASE WHEN {{ dateRange }} = 'today' THEN start_time < CURRENT_DATE WHEN {{ dateRange }} = '7d' THEN start_time < NOW() ELSE TRUE END)",
+      [{ name: 'dateRange', value: ref('get-range', 'value') }]
+    )
+    expect(res.residuals).toEqual([])
+    expect(res.query).toContain('CASE WHEN $1 =')
+    expect(res.query).toContain('WHEN $2 =')
+    expect(res.params).toHaveLength(2)
+  })
+
+  it('binds the operand of TRIM(BOTH FROM {{ token }})', () => {
+    const value = ref('get-status', 'value')
+    const res = parameterizeRawSqlInterpolations(
+      "SELECT * FROM t WHERE TRIM(BOTH FROM {{ status }}) IN ('', 'All')",
+      [{ name: 'status', value }]
+    )
+    expect(res.query).toBe("SELECT * FROM t WHERE TRIM(BOTH FROM $1) IN ('', 'All')")
+    expect(res.params).toEqual([value])
+    expect(res.residuals).toEqual([])
+  })
+
+  it('binds TRIM(LEADING/TRAILING ... FROM {{ token }}) variants', () => {
+    const value = ref('n', 'v')
+    for (const sql of [
+      "SELECT TRIM(LEADING '0' FROM {{ v }})",
+      'SELECT TRIM(TRAILING FROM {{ v }})',
+      'SELECT TRIM(FROM {{ v }})',
+    ]) {
+      const res = parameterizeRawSqlInterpolations(sql, [{ name: 'v', value }])
+      expect(res.residuals).toEqual([])
+      expect(res.params).toEqual([value])
+    }
+  })
+
+  it('still refuses a plain FROM {{ table }} identifier position', () => {
+    const res = parameterizeRawSqlInterpolations('SELECT * FROM {{ table }}', [
+      { name: 'table', value: ref('n', 't') },
+    ])
+    expect(res.residuals).toEqual(['{{ table }}'])
+  })
+
+  it('parameterizes the full alerts-filter fixture query with zero residuals', () => {
+    // Verbatim from examples/uidl-samples/project.json node `query-alerts` — the
+    // query this guard refused (8 residuals) before CASE/WHEN and TRIM(... FROM ...)
+    // were recognised as value positions.
+    const query =
+      "SELECT a.id, a.vehicle_id, a.driver_id, a.type_field, a.severity, a.occurred_at, a.resolved FROM alerts a WHERE (TRIM(BOTH FROM {{statusFilterSegment}}) IN ('', 'All') OR (CASE WHEN {{statusFilterSegment}} = 'Active' THEN a.resolved = false WHEN {{statusFilterSegment}} = 'Resolved' THEN a.resolved = true WHEN {{statusFilterSegment}} = 'Acknowledged' THEN EXISTS (SELECT 1 FROM alert_actions aa WHERE aa.alert_id = a.id AND aa.action_field = 'Acknowledged') ELSE false END)) AND ({{severityFilterSelect}} = 'All' OR a.severity = {{severityFilterSelect}}) AND (TRIM(BOTH FROM {{searchAlertsInput}}) = '' OR a.type_field ILIKE '%' || {{searchAlertsInput}} || '%') AND ({{timeRangeSelect}} = 'All Time' OR a.occurred_at >= CASE WHEN {{timeRangeSelect}} = 'Last 24h' THEN NOW() - INTERVAL '24 hours' WHEN {{timeRangeSelect}} = 'Last 7d' THEN NOW() - INTERVAL '7 days' WHEN {{timeRangeSelect}} = 'Last 30d' THEN NOW() - INTERVAL '30 days' ELSE a.occurred_at END) ORDER BY a.occurred_at DESC"
+    const status = ref('get-status', 'value')
+    const severity = ref('get-severity', 'value')
+    const search = ref('get-search', 'value')
+    const time = ref('get-time', 'value')
+    const res = parameterizeRawSqlInterpolations(query, [
+      { name: 'statusFilterSegment', value: status },
+      { name: 'severityFilterSelect', value: severity },
+      { name: 'searchAlertsInput', value: search },
+      { name: 'timeRangeSelect', value: time },
+    ])
+    expect(res.residuals).toEqual([])
+    expect(res.query).not.toContain('{{')
+    expect(res.params).toEqual([
+      status,
+      status,
+      status,
+      status,
+      severity,
+      severity,
+      search,
+      search,
+      time,
+      time,
+      time,
+      time,
+    ])
+    expect(res.query).toContain('TRIM(BOTH FROM $1)')
+    expect(res.query).toContain('CASE WHEN $2 =')
+    expect(res.query).toContain("ILIKE '%' || $8 || '%'")
+    expect(res.query).toContain('$12')
+  })
+})
+
 describe('parameterizeAllWorkflowRawSql', () => {
   it('walks both workflows and customNodes (id-keyed records)', () => {
     const value = ref('n', 'ids')

package/__tests__/reserved-word-state-binding.test.ts

@@ -0,0 +1,112 @@
+/**
+ * The page-level `__createWorkflowHandlers(stateSetters, stateTypes, stateValuesRef)`
+ * maps are keyed BY THE UIDL STATE NAME — that is what the runtime looks up when
+ * a node config says `{"property": "class"}` or a `state-batch-update` carries
+ * `{"key": "class"}`. Both shapes appear verbatim in the run that broke.
+ *
+ * So the fix for the reserved-word crash has to be asymmetric:
+ *   KEY   → the UIDL name, ALWAYS (renaming it silently breaks every workflow
+ *           binding written against it — `__stateNameMap` has no camel→original
+ *           entry, so the runtime would just warn "no setter for class" and skip)
+ *   VALUE → the sanitised React binding, because `const [class, …]` is a
+ *           SyntaxError and the whole project build dies on it.
+ */
+
+import generate from '@babel/generator'
+import * as types from '@babel/types'
+import { createNextWorkflowPlugin } from '../src/workflow-component-plugin'
+
+/** `const Page = (props) => { return null }` — the shape the plugin injects into. */
+const buildComponentChunkContent = (): types.VariableDeclaration =>
+  types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('AddCharacter'),
+      types.arrowFunctionExpression(
+        [types.identifier('props')],
+        types.blockStatement([types.returnStatement(types.nullLiteral())])
+      )
+    ),
+  ])
+
+const buildStructure = (stateNames: string[]): any => {
+  const triggerNodeId = 'trigger-1'
+  const workflow = {
+    id: 'wf-1',
+    name: 'Batch update from the form',
+    trigger: {
+      type: 'event-page-loaded',
+      nodeId: triggerNodeId,
+      scope: 'page',
+      config: { pageId: 'page-1' },
+    },
+    nodes: [
+      {
+        id: 'batch-1',
+        type: 'state-batch-update',
+        config: {
+          scope: 'local',
+          updates: stateNames.map((name) => ({ key: name, value: '' })),
+        },
+        stepNumber: 1,
+        label: 'Batch State Update',
+      },
+    ],
+    edges: [{ id: 'e', source: triggerNodeId, target: 'batch-1' }],
+  }
+  return {
+    uidl: {
+      name: 'AddCharacter',
+      outputOptions: { pageId: 'page-1', fileName: 'add-character' },
+      node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+      stateDefinitions: Object.fromEntries(
+        stateNames.map((name) => [name, { type: 'string', defaultValue: '' }])
+      ),
+    },
+    chunks: [
+      {
+        type: 'chunk-type-ast',
+        name: 'jsx-component',
+        content: buildComponentChunkContent(),
+      },
+    ],
+    options: { workflows: { workflows: { 'wf-1': workflow }, customNodes: {} } },
+    dependencies: {},
+  }
+}
+
+const generateComponentCode = async (stateNames: string[]): Promise<string> => {
+  const plugin = createNextWorkflowPlugin({ isPage: true })
+  const structure = buildStructure(stateNames)
+  await plugin(structure as any)
+  const componentChunk = (structure.chunks as any[]).find((c: any) => c.name === 'jsx-component')
+  // The maps are injected into the component BODY, not the module chunk.
+  return generate(componentChunk.content).code
+}
+
+describe('reserved-word state in the workflow runtime maps', () => {
+  it('keys every map by the UIDL name so `config.property` still resolves', async () => {
+    const code = await generateComponentCode(['class', 'characterName'])
+    // `{ class: … }` is a legal object key even though `class` is reserved.
+    expect(code).toMatch(/class:\s*setClass/)
+    expect(code).toMatch(/class:\s*["']string["']/)
+  })
+
+  it('binds the VALUE to the sanitised identifier the state hook declared', async () => {
+    const code = await generateComponentCode(['class', 'characterName'])
+    // __wfStateRef.current = { class: class_ }  — never `class: class`.
+    expect(code).toMatch(/class:\s*class_/)
+    expect(code).not.toMatch(/class:\s*class\b(?!_)/)
+  })
+
+  it('leaves ordinary state names byte-identical', async () => {
+    const code = await generateComponentCode(['class', 'characterName'])
+    expect(code).toMatch(/characterName:\s*characterName/)
+    expect(code).toMatch(/characterName:\s*setCharacterName/)
+  })
+
+  it('quotes a key that is not identifier syntax instead of emitting it bare', async () => {
+    const code = await generateComponentCode(['my key'])
+    expect(code).toContain('"my key"')
+    expect(code).not.toMatch(/[^"']my key:/)
+  })
+})