@teleporthq/teleport-plugin-next-workflows 0.45.9 → 0.45.14

package/__tests__/component-scope-interval.test.ts

@@ -0,0 +1,120 @@
+// An interval bound to a component runs INSIDE that component: its timer lives
+// in the component's own effect, where the component's state setters are, and
+// stops when the component is torn down. A page-scoped interval can do neither
+// for a component — its writes to component state are skipped — which is why
+// "switch the photo every 5 seconds" inside a component never worked.
+
+import { createNextWorkflowPlugin } from '../src/workflow-component-plugin'
+
+const rotationWorkflow = (scope: 'component' | 'page', config: Record<string, unknown>) => ({
+  id: 'wf-rotation',
+  name: 'Photo Rotation',
+  trigger: {
+    type: 'event-interval',
+    nodeId: 'trigger-interval',
+    scope,
+    config: { intervalMs: 5000, autoStart: true, ...config },
+  },
+  nodes: [
+    {
+      id: 'advance',
+      type: 'state-update-local-state',
+      config: { property: 'currentIndex', value: 1 },
+      stepNumber: 1,
+      label: 'Advance',
+    },
+  ],
+  edges: [{ id: 'e1', source: 'trigger-interval', target: 'advance' }],
+})
+
+const jsxComponentChunk = () => ({
+  type: 'chunk-type-ast',
+  name: 'jsx-component',
+  content: {
+    type: 'VariableDeclaration',
+    declarations: [
+      {
+        type: 'VariableDeclarator',
+        init: {
+          type: 'ArrowFunctionExpression',
+          body: {
+            type: 'BlockStatement',
+            body: [{ type: 'ReturnStatement', argument: null }],
+          },
+        },
+      },
+    ],
+  },
+})
+
+const getWorkflowModule = async (
+  uidl: Record<string, unknown>,
+  workflow: any,
+  isPage: boolean
+): Promise<string | null> => {
+  const plugin = createNextWorkflowPlugin({ isPage })
+  const structure: any = {
+    uidl: {
+      node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+      stateDefinitions: { currentIndex: { type: 'number', defaultValue: 0 } },
+      ...uidl,
+    },
+    chunks: [jsxComponentChunk()],
+    options: { workflows: { workflows: { [workflow.id]: workflow }, customNodes: {} } },
+    dependencies: {},
+  }
+  await plugin(structure)
+  const moduleChunk = structure.chunks.find((c: any) => c.name === 'workflow-module')
+  return moduleChunk ? String(moduleChunk.content) : null
+}
+
+describe('an interval bound to a component', () => {
+  const bound = { componentId: 'TQ_oneOfOne', componentName: 'One of One' }
+
+  it('is generated into that component, with its timer and its teardown', async () => {
+    const code = await getWorkflowModule(
+      { name: 'OneOfOne' },
+      rotationWorkflow('component', bound),
+      false
+    )
+
+    expect(code).not.toBeNull()
+    expect(code).toContain('Interval 5000ms')
+    expect(code).toContain('__iv_start_wf_rotation();')
+    expect(code).toContain('__iv_stop_wf_rotation();')
+    // The component's own handler factory, the one given its state setters.
+    expect(code).toContain('function __createWorkflowHandlers(stateSetters')
+  })
+
+  it('is generated into no page and no other component', async () => {
+    const intoPage = await getWorkflowModule(
+      { name: 'Home', outputOptions: { pageId: 'page-1', fileName: 'home' } },
+      rotationWorkflow('component', bound),
+      true
+    )
+    const intoOther = await getWorkflowModule(
+      { name: 'Footer' },
+      rotationWorkflow('component', bound),
+      false
+    )
+
+    expect(intoPage).toBeNull()
+    expect(intoOther).toBeNull()
+  })
+
+  it('leaves a page interval where it was: in its page, never in a component', async () => {
+    const intoPage = await getWorkflowModule(
+      { name: 'Home', outputOptions: { pageId: 'page-1', fileName: 'home' } },
+      rotationWorkflow('page', { pageId: 'page-1' }),
+      true
+    )
+    const intoComponent = await getWorkflowModule(
+      { name: 'OneOfOne' },
+      rotationWorkflow('page', { pageId: 'page-1' }),
+      false
+    )
+
+    expect(intoPage).toContain('Interval 5000ms')
+    expect(intoComponent).toBeNull()
+  })
+})

package/__tests__/element-trigger-context-fields.test.ts

@@ -0,0 +1,279 @@
+// What an element trigger hands its workflow, on both ways a handler reaches
+// the element: the React prop placed on it in the JSX, and the native listener
+// attached by id when the element is not in the component's own JSX.
+//
+// A click delivers the bound element's `data-*` attributes under the names the
+// static HTML export resolves (`data-tab-index` is `dataTabIndex`): a tab strip
+// repeats one authored button per tab, and the attribute is the only thing
+// that tells the buttons apart.
+
+import type { UIDLWorkflow } from '@teleporthq/teleport-types'
+import {
+  generateElementHandler,
+  generateUnmatchedElementFallback,
+} from '../src/workflow-component-plugin'
+
+const ELEMENT_ID = 'tab-button'
+const SAFE_ID = 'wf_tabs'
+
+const triggerInfo = (type: string, config: Record<string, unknown> = {}) => ({
+  workflow: {
+    id: 'wf-tabs',
+    name: 'Switch tab',
+    trigger: { nodeId: 'trigger', type, scope: 'element', config },
+    nodes: [],
+    edges: [],
+  } as unknown as UIDLWorkflow,
+  elementId: ELEMENT_ID,
+  reactProp: 'onClick',
+  triggerConfig: config,
+})
+
+type TriggerContext = Record<string, unknown>
+type Listener = (event: FakeEvent) => void
+
+interface FakeEvent {
+  type: string
+  target: FakeElement
+  currentTarget: FakeElement | null
+  clientX?: number
+  preventDefault: () => void
+  stopPropagation: () => void
+}
+
+/* The few things a handler touches on an element, behaving as a browser's do:
+   `dataset` holds the `data-*` attributes under camelCased keys, an event
+   bubbles to every ancestor with `currentTarget` set to the one being visited,
+   and `currentTarget` is null once the dispatch is over. */
+class FakeElement {
+  public dataset: Record<string, string> = {}
+  public parent: FakeElement | null = null
+  public formFields: Record<string, string> = {}
+  public value?: string
+  private listeners: Record<string, Listener[]> = {}
+
+  constructor(public id: string, dataAttributes: Record<string, string> = {}) {
+    for (const name of Object.keys(dataAttributes)) {
+      const key = name
+        .replace(/^data-/, '')
+        .replace(/-([a-z])/g, (_match, letter: string) => letter.toUpperCase())
+      this.dataset[key] = dataAttributes[name]
+    }
+  }
+
+  public append(child: FakeElement): FakeElement {
+    child.parent = this
+    return this
+  }
+
+  public addEventListener(type: string, listener: Listener): void {
+    this.listeners[type] = [...(this.listeners[type] || []), listener]
+  }
+
+  public removeEventListener(): void {
+    return undefined
+  }
+
+  public selfAndAncestors(): FakeElement[] {
+    return [this as FakeElement].concat(this.parent ? this.parent.selfAndAncestors() : [])
+  }
+
+  public dispatch(type: string, init: { clientX?: number } = {}): void {
+    const event: FakeEvent = {
+      type,
+      target: this,
+      currentTarget: null,
+      preventDefault: () => undefined,
+      stopPropagation: () => undefined,
+      ...init,
+    }
+    for (const visited of this.selfAndAncestors()) {
+      event.currentTarget = visited
+      ;(visited.listeners[type] || []).forEach((listener) => listener(event))
+    }
+    event.currentTarget = null
+  }
+}
+
+class FakeFormData {
+  constructor(private form: FakeElement) {}
+  public forEach(visit: (value: string, key: string) => void): void {
+    Object.keys(this.form.formFields).forEach((key) => visit(this.form.formFields[key], key))
+  }
+}
+
+const page = (bound: FakeElement, child: FakeElement) => {
+  bound.append(child)
+  const byId: Record<string, FakeElement> = { [bound.id]: bound, [child.id]: child }
+  const received: TriggerContext[] = []
+  const execWf = (_config: unknown, triggerContext: TriggerContext) => {
+    received.push(triggerContext)
+    return Promise.resolve({})
+  }
+  const document = { getElementById: (id: string) => byId[id] || null }
+  return { bound, child, document, received, execWf }
+}
+
+/** The React-prop handler, attached the way React attaches it: on the bound element. */
+const attachJsxHandler = (
+  site: ReturnType<typeof page>,
+  type: string,
+  domEvent: string,
+  config: Record<string, unknown> = {}
+) => {
+  const source = generateElementHandler(triggerInfo(type, config))
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  const handler = new Function(
+    '__execWf',
+    `__wfConfig_${SAFE_ID}`,
+    `__wfServerUrls_${SAFE_ID}`,
+    'FormData',
+    'window',
+    `return ${source};`
+  )(site.execWf, {}, {}, FakeFormData, {})
+  site.bound.addEventListener(domEvent, handler)
+  return source
+}
+
+const attachFallback = (
+  site: ReturnType<typeof page>,
+  type: string,
+  _domEvent: string,
+  config: Record<string, unknown> = {}
+) => {
+  const source = generateUnmatchedElementFallback(triggerInfo(type, config), SAFE_ID)
+  // eslint-disable-next-line @typescript-eslint/no-implied-eval
+  new Function(
+    'document',
+    'cleanups',
+    '__execWf',
+    `__wfConfig_${SAFE_ID}`,
+    `__wfServerUrls_${SAFE_ID}`,
+    'FormData',
+    source
+  )(site.document, [], site.execWf, {}, {}, FakeFormData)
+  return source
+}
+
+const tabPage = (dataAttributes: Record<string, string>) =>
+  page(new FakeElement(ELEMENT_ID, dataAttributes), new FakeElement('label'))
+
+const TAB_ATTRIBUTES = {
+  'data-tab-index': '2',
+  'data-panel-group-name': 'plans',
+  'data-element-id': 'shadow',
+}
+
+const clickLabel = (site: ReturnType<typeof page>) => site.child.dispatch('click', { clientX: 7 })
+
+describe('a click trigger delivers the bound element data attributes', () => {
+  const DATASET_MAPPING = `fields['data' + key.charAt(0).toUpperCase() + key.slice(1)]`
+
+  it.each([
+    ['the React prop', attachJsxHandler],
+    ['the native-listener fallback', attachFallback],
+  ])('through %s, read off the bound element when a child is clicked', (_name, attach) => {
+    const site = tabPage(TAB_ATTRIBUTES)
+    const source = attach(site, 'event-element-clicked', 'click')
+    expect(source).toContain(DATASET_MAPPING)
+
+    clickLabel(site)
+
+    expect(site.received).toHaveLength(1)
+    const [context] = site.received
+    expect(context.dataTabIndex).toBe('2')
+    expect(context.dataPanelGroupName).toBe('plans')
+    expect(context.elementId).toBe(ELEMENT_ID)
+    expect(context.clientX).toBe(7)
+    expect(typeof context.timestamp).toBe('number')
+  })
+
+  it.each([
+    ['the React prop', attachJsxHandler],
+    ['the native-listener fallback', attachFallback],
+  ])('through %s, an attribute never replaces a field of the trigger', (_name, attach) => {
+    // `data-element-id` is delivered as `dataElementId`; the trigger's own
+    // `elementId` is assigned after the attributes and stays what it was.
+    const site = tabPage(TAB_ATTRIBUTES)
+    attach(site, 'event-element-clicked', 'click')
+
+    clickLabel(site)
+
+    expect(site.received[0].dataElementId).toBe('shadow')
+    expect(site.received[0].elementId).toBe(ELEMENT_ID)
+  })
+
+  it('a debounced click still reads the bound element, after the event is over', async () => {
+    const site = tabPage(TAB_ATTRIBUTES)
+    attachJsxHandler(site, 'event-element-clicked', 'click', { debounce: 5 })
+
+    clickLabel(site)
+    await new Promise((resolve) => setTimeout(resolve, 30))
+
+    expect(site.received).toHaveLength(1)
+    expect(site.received[0].dataTabIndex).toBe('2')
+    expect(site.received[0].element).toBe(site.bound)
+  })
+
+  it('an element with no data attribute delivers the six trigger fields alone', () => {
+    const site = tabPage({})
+    attachJsxHandler(site, 'event-element-clicked', 'click')
+
+    clickLabel(site)
+
+    expect(Object.keys(site.received[0]).sort()).toEqual(
+      ['clientX', 'clientY', 'element', 'elementId', 'timestamp', 'triggerElement'].sort()
+    )
+  })
+})
+
+describe('the native-listener fallback delivers what the React prop delivers', () => {
+  it('a submitted form: every field at the top level, and under fields and formData', () => {
+    const formPage = () => {
+      const form = new FakeElement(ELEMENT_ID)
+      form.formFields = { email: 'a@b.co', plan: 'pro' }
+      return page(form, new FakeElement('email'))
+    }
+
+    const viaProp = formPage()
+    attachJsxHandler(viaProp, 'event-form-submitted', 'submit')
+    viaProp.bound.dispatch('submit')
+
+    const viaFallback = formPage()
+    const source = attachFallback(viaFallback, 'event-form-submitted', 'submit')
+    viaFallback.bound.dispatch('submit')
+
+    expect(source).toContain('Object.assign({}, formData, { fields: formData, formData: formData')
+    const [context] = viaFallback.received
+    expect(context.email).toBe('a@b.co')
+    expect(context.plan).toBe('pro')
+    expect(context.fields).toEqual({ email: 'a@b.co', plan: 'pro' })
+    expect(context.formData).toEqual({ email: 'a@b.co', plan: 'pro' })
+    expect(context.formId).toBe(ELEMENT_ID)
+    expect(Object.keys(context).sort()).toEqual(Object.keys(viaProp.received[0]).sort())
+  })
+
+  it('an element event: the control that fired as target, the bound element as currentTarget', () => {
+    const config = { eventType: 'change' }
+    const radioPage = () => {
+      const radio = new FakeElement('choice')
+      radio.value = 'b'
+      return page(new FakeElement(ELEMENT_ID), radio)
+    }
+
+    const viaProp = radioPage()
+    attachJsxHandler(viaProp, 'event-element-event', 'change', config)
+    viaProp.child.dispatch('change')
+
+    const viaFallback = radioPage()
+    const source = attachFallback(viaFallback, 'event-element-event', 'change', config)
+    viaFallback.child.dispatch('change')
+
+    expect(source).toContain(`target: event.target, currentTarget: __el_${SAFE_ID}`)
+    const [context] = viaFallback.received
+    expect(context.target).toBe(viaFallback.child)
+    expect(context.currentTarget).toBe(viaFallback.bound)
+    expect(context.value).toBe('b')
+    expect(Object.keys(context).sort()).toEqual(Object.keys(viaProp.received[0]).sort())
+  })
+})

package/__tests__/global-state-read-only-wiring.test.ts

@@ -0,0 +1,257 @@
+// A workflow reads a global state through the state values its file hands the
+// workflow runtime, and a global state is among them only when the file takes
+// it from `useGlobalState()`. A file whose workflows only READ a global state
+// used to get none of that, so the read was undefined: a timer in a component,
+// gated on a global on/off switch that a page flips, never ticked.
+
+import generate from '@babel/generator'
+import { createNextWorkflowPlugin } from '../src/workflow-component-plugin'
+import { buildStateGetHandlerSource } from '../src/nodes/state/_state-get'
+
+const GLOBAL_STATES = {
+  TQ_switch: { id: 'TQ_switch', name: 'tickerTimerEnabled', type: 'boolean', defaultValue: true },
+}
+
+const COMPONENT = { componentId: 'TQ_ticker', componentName: 'Ticker' }
+
+const node = (id: string, type: string, config: Record<string, unknown>) => ({
+  id,
+  type,
+  config,
+  stepNumber: 1,
+  label: id,
+})
+
+const UPDATE_COUNT = node('bump', 'state-update-local-state', { property: 'count', value: 1 })
+
+const timerWorkflow = (
+  nodes: Array<ReturnType<typeof node>>,
+  trigger: Record<string, unknown> = { scope: 'component', config: COMPONENT }
+) => ({
+  id: 'wf-ticker',
+  name: 'Ticker Count Update',
+  trigger: {
+    type: 'event-interval',
+    nodeId: 'tick',
+    scope: trigger.scope,
+    config: { intervalMs: 1000, autoStart: true, ...(trigger.config as object) },
+  },
+  nodes,
+  edges: nodes.map((target, index) => ({
+    id: `e${index}`,
+    source: index === 0 ? 'tick' : nodes[index - 1].id,
+    target: target.id,
+  })),
+})
+
+const jsxComponentChunk = () => ({
+  type: 'chunk-type-ast',
+  name: 'jsx-component',
+  content: {
+    type: 'VariableDeclaration',
+    kind: 'const',
+    declarations: [
+      {
+        type: 'VariableDeclarator',
+        id: { type: 'Identifier', name: 'Ticker' },
+        init: {
+          type: 'ArrowFunctionExpression',
+          params: [] as unknown[],
+          body: {
+            type: 'BlockStatement',
+            body: [{ type: 'ReturnStatement', argument: null as unknown }],
+            directives: [] as unknown[],
+          },
+        },
+      },
+    ],
+  },
+})
+
+interface Generated {
+  component: string
+  module: string
+  dependencies: Record<string, { path?: string }>
+}
+
+const generateFile = async (params: {
+  workflow: any
+  isPage: boolean
+  globalStateDefinitions?: Record<string, unknown>
+  customNodes?: Record<string, unknown>
+}): Promise<Generated> => {
+  const { workflow, isPage, globalStateDefinitions = GLOBAL_STATES, customNodes = {} } = params
+  const plugin = createNextWorkflowPlugin({ isPage })
+  const structure: any = {
+    uidl: {
+      name: isPage ? 'Home' : 'Ticker',
+      node: { type: 'element', content: { elementType: 'container', name: 'Container' } },
+      stateDefinitions: { count: { type: 'number', defaultValue: 0 } },
+      ...(isPage ? { outputOptions: { pageId: 'page-1', fileName: 'index' } } : {}),
+    },
+    chunks: [jsxComponentChunk()],
+    options: {
+      workflows: { workflows: { [workflow.id]: workflow }, customNodes },
+      globalStateDefinitions,
+    },
+    dependencies: {},
+  }
+  await plugin(structure)
+  const componentChunk = structure.chunks.find((c: any) => c.name === 'jsx-component')
+  const moduleChunk = structure.chunks.find((c: any) => c.name === 'workflow-module')
+  return {
+    component: generate(componentChunk.content).code,
+    module: moduleChunk ? String(moduleChunk.content) : '',
+    dependencies: structure.dependencies,
+  }
+}
+
+const HOOK =
+  /const \{\s*tickerTimerEnabled,\s*setTickerTimerEnabled,\s*refreshGlobalState\s*\} = useGlobalState\(\)/
+const VALUE_IN_REF =
+  /__wfStateRef\.current = \{\s*count: count,\s*tickerTimerEnabled: tickerTimerEnabled\s*\}/
+
+const expectGlobalStateWired = (file: Generated) => {
+  expect(file.dependencies.useGlobalState).toEqual({
+    type: 'local',
+    path: '@/global-state-context',
+    meta: { namedImport: true },
+  })
+  expect(file.component).toMatch(HOOK)
+  // Assigned on every render, after the hook: a change of the global value
+  // re-renders the file, and the next run reads the new value.
+  expect(file.component).toMatch(VALUE_IN_REF)
+  expect(file.component.indexOf('useGlobalState()')).toBeLessThan(
+    file.component.indexOf('__wfStateRef.current =')
+  )
+  // The runtime is told the state's type, and each run starts from the ref.
+  expect(file.component).toMatch(/tickerTimerEnabled: "boolean"/)
+  expect(file.module).toContain(
+    'triggerContext.__stateValues = Object.assign({}, stateValuesRef.current);'
+  )
+}
+
+const expectNoGlobalStateWiring = (file: Generated) => {
+  expect(file.dependencies.useGlobalState).toBeUndefined()
+  expect(file.component).not.toContain('useGlobalState')
+  expect(file.component).not.toContain('tickerTimerEnabled')
+  expect(file.component).toMatch(/__wfStateRef\.current = \{\s*count: count\s*\}/)
+}
+
+const READ_SWITCH = node('read-switch', 'state-get-global-state', {
+  property: 'tickerTimerEnabled',
+})
+
+describe('a file whose workflows only read a global state', () => {
+  it('a component gets the import, the hook, and the value in its state ref', async () => {
+    const file = await generateFile({
+      workflow: timerWorkflow([READ_SWITCH, UPDATE_COUNT]),
+      isPage: false,
+    })
+
+    expectGlobalStateWired(file)
+  })
+
+  it('a page gets the same', async () => {
+    const file = await generateFile({
+      workflow: timerWorkflow([READ_SWITCH, UPDATE_COUNT], {
+        scope: 'page',
+        config: { pageId: 'page-1' },
+      }),
+      isPage: true,
+    })
+
+    expectGlobalStateWired(file)
+  })
+
+  it('counts a read made inside a custom node the workflow calls', async () => {
+    const file = await generateFile({
+      workflow: timerWorkflow([
+        node('call', 'general-custom-node', { customNodeId: 'shared-check' }),
+        UPDATE_COUNT,
+      ]),
+      isPage: false,
+      customNodes: { 'shared-check': { id: 'shared-check', nodes: [READ_SWITCH], edges: [] } },
+    })
+
+    expectGlobalStateWired(file)
+  })
+
+  it.each([
+    ['a {{state.<name>}} token', { value: '{{state.tickerTimerEnabled}}' }],
+    [
+      'a context reference into the state values',
+      {
+        value: {
+          type: 'workflowContext',
+          nodeId: 'tick',
+          path: ['tick', '__stateValues', 'tickerTimerEnabled'],
+        },
+      },
+    ],
+    [
+      'an expression over the state values',
+      { expression: 'context.__stateValues.tickerTimerEnabled === true' },
+    ],
+  ])('counts a read written as %s', async (_form, config) => {
+    const file = await generateFile({
+      workflow: timerWorkflow([node('gate', 'general-if-statement', config), UPDATE_COUNT]),
+      isPage: false,
+    })
+
+    expectGlobalStateWired(file)
+  })
+})
+
+describe('a file that uses no global state is generated as before', () => {
+  it('a workflow on local state only gets no hook, in a project that has global states', async () => {
+    const file = await generateFile({ workflow: timerWorkflow([UPDATE_COUNT]), isPage: false })
+
+    expectNoGlobalStateWiring(file)
+  })
+
+  it.each([
+    ['a token naming a local state', { value: '{{state.count}}' }],
+    ['an expression over the state values naming none', { expression: '__stateValues.count > 3' }],
+    [
+      'a name that merely contains a global state name',
+      { expression: '__stateValues.tickerTimerEnabledLabel' },
+    ],
+  ])('%s gets no hook', async (_form, config) => {
+    const file = await generateFile({
+      workflow: timerWorkflow([node('gate', 'general-if-statement', config), UPDATE_COUNT]),
+      isPage: false,
+    })
+
+    expectNoGlobalStateWiring(file)
+  })
+
+  it('a read node in a project that declares no global state adds nothing', async () => {
+    const file = await generateFile({
+      workflow: timerWorkflow([READ_SWITCH, UPDATE_COUNT]),
+      isPage: false,
+      globalStateDefinitions: {},
+    })
+
+    expect(file.dependencies.useGlobalState).toBeUndefined()
+    expect(file.component).not.toContain('useGlobalState')
+  })
+})
+
+describe('the read node itself', () => {
+  it('returns the value the state ref held when the run started', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    const handler = new Function(`return ${buildStateGetHandlerSource('state_get_global_state')}`)()
+    const stateValuesRef = { current: { tickerTimerEnabled: true } }
+    const context = { __stateValues: { ...stateValuesRef.current } }
+
+    await expect(handler({ property: 'tickerTimerEnabled' }, context)).resolves.toEqual({
+      value: true,
+      key: 'tickerTimerEnabled',
+    })
+    await expect(handler({ property: 'tickerTimerEnabled' }, {})).resolves.toEqual({
+      value: undefined,
+      key: 'tickerTimerEnabled',
+    })
+  })
+})