@teleporthq/teleport-plugin-next-workflows 0.43.45 → 0.43.47

package/__tests__/middleware-guest-order-details.test.ts

@@ -0,0 +1,258 @@
+import { compileGeneratedMiddleware } from './_helpers/run-generated-middleware'
+
+/**
+ * Guest checkout regression, end to end through the GENERATED middleware.
+ *
+ * The e-commerce list/details pair deliberately shares a static base — the
+ * order history is served from `/orders` and a single order from
+ * `/orders/[order_number]` — so a reader can drop the last path segment to get
+ * back to the listing. The listing legitimately requires auth (a guest has no
+ * order history), the details page does not: its page-load SQL matches
+ * `user_id = <session user>` OR `user_id = <anonymous localStorage UUID>`, and
+ * a guest order is stamped with the latter.
+ *
+ * `generateMiddlewareFile` already skipped row-owned self-guarded pages from
+ * `protectedRoutes`, but that was not enough: the middleware matches a request
+ * against every protected route as a PREFIX, so `/orders/ORD-42` matched the
+ * listing's `/orders` entry and every guest was redirected to
+ * `/sign-in?callbackUrl=/orders/ORD-42` — right after paying, and right after
+ * the COD "order placed" toast. Buyers with a stale session cookie never saw
+ * it, which is why it looked intermittent.
+ *
+ * The fix emits the self-guarded page's full route pattern and waives ONLY
+ * inherited, role-free protection for paths that pattern matches.
+ */
+
+const baseAuth: any = {
+  enabled: true,
+  dataSourceId: 'ds-1',
+  dataSourceType: 'postgres',
+  passwordAuthEnabled: true,
+  providers: [],
+  roles: ['admin'],
+  tables: {},
+  folderProtection: {},
+  authPages: {
+    signIn: { pageId: 'sign-in', pageName: 'sign-in', route: '/sign-in' },
+    signUp: { pageId: 'sign-up', pageName: 'sign-up', route: '/sign-up' },
+  },
+  callbackBaseUrl: '',
+  envKeys: {},
+  customUserProperties: [],
+}
+
+const ordersListProtection = {
+  requiresAuth: true,
+  allowedRoles: [] as string[],
+  pageName: 'orders-list',
+  route: '/orders',
+}
+
+const orderDetailsProtection = {
+  requiresAuth: true,
+  allowedRoles: [] as string[],
+  pageName: 'order-details',
+  route: '/orders',
+  routePattern: '/orders/[order_number]',
+  rowOwnerColumn: 'user_id',
+  rowOwnerTable: 'teleport_orders',
+  rowOwnerDifferentiator: 'order_number',
+}
+
+const storeAuth = (overrides: Record<string, unknown> = {}) =>
+  ({
+    ...baseAuth,
+    pageProtection: {
+      OL: ordersListProtection,
+      OD: orderDetailsProtection,
+      ADMIN: {
+        requiresAuth: true,
+        allowedRoles: ['admin'],
+        pageName: 'admin',
+        route: '/admin',
+      },
+    },
+    ...overrides,
+  } as any)
+
+describe('generated middleware: guest access to a row-owned order-details route', () => {
+  const run = compileGeneratedMiddleware(storeAuth())
+
+  it('lets an anonymous buyer reach the order they just placed', async () => {
+    // The single path both checkout branches land on: the COD branch navigates
+    // here directly, and Stripe/PayPal return to `<this>?payment=success`
+    // (`nextUrl.pathname` excludes the query, so the decision is made here).
+    expect(await run('/orders/ORD-42')).toEqual({ kind: 'next' })
+  })
+
+  it('matches the same order route with a trailing slash', async () => {
+    // Next.js serves both forms; matching the raw pathname would make the
+    // slashed variant miss the self-guarded pattern and inherit the listing's
+    // protection.
+    expect(await run('/orders/ORD-42/')).toEqual({ kind: 'next' })
+  })
+
+  it('URL-encoded order numbers still resolve to the details route', async () => {
+    expect(await run('/orders/ORD%2F42')).toEqual({ kind: 'next' })
+  })
+
+  it('still forces sign-in on the orders LISTING itself', async () => {
+    const result = await run('/orders')
+    expect(result.kind).toBe('redirect')
+    expect(result.location).toContain('/sign-in')
+  })
+
+  it('does not waive protection for a deeper path the details page never serves', async () => {
+    // `/orders/[order_number]` compiles to a single-segment matcher, so a
+    // crafted `/orders/ORD-42/anything` keeps the listing's protection.
+    const result = await run('/orders/ORD-42/edit')
+    expect(result.kind).toBe('redirect')
+    expect(result.location).toContain('/sign-in')
+  })
+
+  it('keeps the admin subtree gated', async () => {
+    expect((await run('/admin')).kind).toBe('redirect')
+    expect((await run('/admin/orders')).kind).toBe('redirect')
+  })
+
+  it('lets a signed-in buyer reach their order history', async () => {
+    expect(await run('/orders', { sessionUser: { id: 'u-1', role: 'user' } })).toEqual({
+      kind: 'next',
+    })
+  })
+
+  it('still bounces a non-admin off the admin subtree', async () => {
+    const result = await run('/admin/orders', { sessionUser: { id: 'u-1', role: 'user' } })
+    expect(result.kind).toBe('redirect')
+  })
+})
+
+describe('generated middleware: self-guard waiver stays narrow', () => {
+  it('does not waive protection when the ancestor route demands a role', async () => {
+    // A staff-only subtree is an absolute gate the row-level WHERE clause
+    // cannot reproduce, so the guest must NOT slip through it.
+    const run = compileGeneratedMiddleware(
+      storeAuth({
+        pageProtection: {
+          STAFF_LIST: {
+            requiresAuth: true,
+            allowedRoles: ['staff'],
+            pageName: 'staff-orders',
+            route: '/staff-orders',
+          },
+          STAFF_DETAILS: {
+            requiresAuth: true,
+            allowedRoles: [],
+            pageName: 'staff-order-details',
+            route: '/staff-orders',
+            routePattern: '/staff-orders/[order_number]',
+            rowOwnerColumn: 'user_id',
+            rowOwnerDifferentiator: 'order_number',
+          },
+        },
+      })
+    )
+
+    const result = await run('/staff-orders/ORD-42')
+    expect(result.kind).toBe('redirect')
+    expect(result.location).toContain('/sign-in')
+  })
+
+  it("does not waive a page's OWN exact protection", async () => {
+    // Contrived but load-bearing: if some other protected page is published at
+    // exactly the path a self-guarded pattern matches, that page's own entry
+    // wins. Only INHERITED protection is waivable.
+    const run = compileGeneratedMiddleware(
+      storeAuth({
+        pageProtection: {
+          OL: ordersListProtection,
+          OD: orderDetailsProtection,
+          CLASH: {
+            requiresAuth: true,
+            allowedRoles: [],
+            pageName: 'orders-archive',
+            route: '/orders/archive',
+          },
+        },
+      })
+    )
+
+    const result = await run('/orders/archive')
+    expect(result.kind).toBe('redirect')
+    expect(result.location).toContain('/sign-in')
+  })
+
+  it('reconstructs the pattern for UIDLs emitted before `routePattern` existed', async () => {
+    // Older projects carry only `route` + `rowOwnerDifferentiator`. As long as
+    // the route is the real static base, the pattern is derivable.
+    const run = compileGeneratedMiddleware(
+      storeAuth({
+        pageProtection: {
+          OL: ordersListProtection,
+          OD: {
+            requiresAuth: true,
+            allowedRoles: [],
+            pageName: 'order-details',
+            route: '/orders',
+            rowOwnerColumn: 'user_id',
+            rowOwnerDifferentiator: 'order_number',
+          },
+        },
+      })
+    )
+
+    expect(await run('/orders/ORD-42')).toEqual({ kind: 'next' })
+    expect((await run('/orders')).kind).toBe('redirect')
+  })
+
+  it('leaves projects without any self-guarded page completely unchanged', async () => {
+    const run = compileGeneratedMiddleware({
+      ...baseAuth,
+      pageProtection: {
+        ACCOUNT: {
+          requiresAuth: true,
+          allowedRoles: [],
+          pageName: 'account',
+          route: '/account',
+        },
+      },
+    } as any)
+
+    expect((await run('/account')).kind).toBe('redirect')
+    expect((await run('/account/settings')).kind).toBe('redirect')
+    expect(await run('/about')).toEqual({ kind: 'next' })
+  })
+})
+
+describe('generated middleware: two pages claiming one route key', () => {
+  it('merges their rules instead of letting document order pick a winner', async () => {
+    // A list/details pair shares its static base by design, and a user can also
+    // point two pages at the same custom URL. One prefix key gates the whole
+    // subtree, so the stricter rule has to survive — otherwise whichever page
+    // the document happened to list last silently decided the access rules.
+    const run = compileGeneratedMiddleware({
+      ...baseAuth,
+      pageProtection: {
+        PUBLIC_ISH: {
+          requiresAuth: true,
+          allowedRoles: [],
+          pageName: 'reports',
+          route: '/reports',
+        },
+        ADMIN_ONLY: {
+          requiresAuth: true,
+          allowedRoles: ['admin'],
+          pageName: 'reports-admin',
+          route: '/reports',
+        },
+      },
+    } as any)
+
+    expect((await run('/reports', { sessionUser: { id: 'u-1', role: 'user' } })).kind).toBe(
+      'redirect'
+    )
+    expect(await run('/reports', { sessionUser: { id: 'u-2', role: 'admin' } })).toEqual({
+      kind: 'next',
+    })
+  })
+})

package/__tests__/middleware-row-owned-pages.test.ts

@@ -1,4 +1,8 @@
 import { generateMiddlewareFile } from '../src/auth-generator'
+import {
+  extractProtectedRoutes,
+  extractSelfGuardedRoutes,
+} from './_helpers/run-generated-middleware'
 
 // Guarding the regression where a guest checkout buyer lands on
 // `/order-details/<order_number>` after Stripe redirect and the
@@ -51,8 +55,11 @@ describe('generateMiddlewareFile: row-owned self-guarded pages', () => {
 
     // /order-details must NOT appear in protectedRoutes — the
     // page-load SQL `user_id = userId OR user_id = anonymousUserId`
-    // is the source of truth for ownership.
-    expect(code).not.toContain('"/order-details"')
+    // is the source of truth for ownership. It DOES appear in
+    // selfGuardedRoutes, which is how the middleware recognises the
+    // requests it must let through when an ancestor route is protected.
+    expect(extractProtectedRoutes(code)).toEqual({})
+    expect(extractSelfGuardedRoutes(code)).toEqual(['/order-details/[order_number]'])
   })
 
   it('still protects a row-owned page that requires a specific role', () => {
@@ -74,8 +81,11 @@ describe('generateMiddlewareFile: row-owned self-guarded pages', () => {
       },
     } as any)
 
-    expect(code).toContain('"/admin/orders/[id]"')
-    expect(code).toContain('"admin"')
+    expect(extractProtectedRoutes(code)['/admin/orders/[id]']).toEqual({
+      requiresAuth: true,
+      allowedRoles: ['admin'],
+    })
+    expect(extractSelfGuardedRoutes(code)).toEqual([])
   })
 
   it('keeps non-row-owned pages protected as before', () => {
@@ -94,7 +104,11 @@ describe('generateMiddlewareFile: row-owned self-guarded pages', () => {
       },
     } as any)
 
-    expect(code).toContain('"/orders-list"')
+    expect(extractProtectedRoutes(code)['/orders-list']).toEqual({
+      requiresAuth: true,
+      allowedRoles: [],
+    })
+    expect(extractSelfGuardedRoutes(code)).toEqual([])
   })
 
   it('honours folder-level role gating even when a child page is row-owned', () => {
@@ -124,8 +138,12 @@ describe('generateMiddlewareFile: row-owned self-guarded pages', () => {
       },
     } as any)
 
-    expect(code).toContain('"/tickets/[id]"')
-    expect(code).toContain('"staff"')
+    expect(extractProtectedRoutes(code)['/tickets/[id]']).toEqual({
+      requiresAuth: true,
+      allowedRoles: ['staff'],
+    })
+    // The folder's role gate is absolute, so the page loses its waiver.
+    expect(extractSelfGuardedRoutes(code)).toEqual([])
   })
 
   it('skips a row-owned page even when wrapped in a role-less folder', () => {
@@ -156,7 +174,8 @@ describe('generateMiddlewareFile: row-owned self-guarded pages', () => {
       },
     } as any)
 
-    expect(code).not.toContain('"/order-details"')
+    expect(extractProtectedRoutes(code)).toEqual({})
+    expect(extractSelfGuardedRoutes(code)).toEqual(['/order-details'])
   })
 
   it('treats `rowOwnerColumn` as the sole signal — pages without it stay protected', () => {
@@ -176,6 +195,10 @@ describe('generateMiddlewareFile: row-owned self-guarded pages', () => {
       },
     } as any)
 
-    expect(code).toContain('"/something"')
+    expect(extractProtectedRoutes(code)['/something']).toEqual({
+      requiresAuth: true,
+      allowedRoles: [],
+    })
+    expect(extractSelfGuardedRoutes(code)).toEqual([])
   })
 })

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:/)
+  })
+})

package/__tests__/strip-event-handler-attrs.test.ts

@@ -0,0 +1,59 @@
+import { stripEventHandlerAttrs } from '../src/workflow-project-plugin'
+
+// UIDL `attrs` hold data, never functions — an `on*`-named attr (the alerts
+// fixture shipped `onClick: ""` on the Resolved pill) becomes a non-function
+// JSX event prop that React invokes on click: `func.apply is not a function`.
+// runBefore strips them so behavior stays on `events` / workflow triggers.
+
+const element = (name: string, attrs: Record<string, unknown>, children: unknown[] = []) => ({
+  type: 'element',
+  content: { elementType: 'button', name, attrs, children },
+})
+
+const projectUidl = (): any => ({
+  root: {
+    name: 'Root',
+    stateDefinitions: {},
+    node: element('Page', { id: { type: 'static', content: 'page' } }, [
+      element('ResolvedPill', {
+        id: { type: 'static', content: 'status-resolved-btn' },
+        'data-value': { type: 'static', content: 'Resolved' },
+        onClick: { type: 'static', content: '' },
+      }),
+    ]),
+  },
+  components: {
+    Card: {
+      name: 'Card',
+      node: element('Card', {
+        onMouseEnter: { type: 'static', content: 'highlight()' },
+        // lowercase second letter — NOT an event handler pattern, must survive
+        onboarding: { type: 'static', content: 'step-1' },
+      }),
+    },
+  },
+})
+
+describe('stripEventHandlerAttrs', () => {
+  it('removes on[A-Z]* attrs from pages and components, keeps everything else', () => {
+    const uidl = projectUidl()
+    stripEventHandlerAttrs(uidl)
+
+    const pill = uidl.root.node.content.children[0].content
+    expect(pill.attrs.onClick).toBeUndefined()
+    expect(pill.attrs.id.content).toBe('status-resolved-btn')
+    expect(pill.attrs['data-value'].content).toBe('Resolved')
+
+    const card = uidl.components.Card.node.content
+    expect(card.attrs.onMouseEnter).toBeUndefined()
+    expect(card.attrs.onboarding.content).toBe('step-1')
+  })
+
+  it('tolerates projects without components or attrs', () => {
+    const uidl: any = {
+      root: { name: 'Root', node: element('Bare', undefined as any) },
+    }
+    delete uidl.root.node.content.attrs
+    expect(() => stripEventHandlerAttrs(uidl)).not.toThrow()
+  })
+})