@teleporthq/teleport-plugin-common 0.44.0-alpha.0 → 0.44.0

package/__tests__/builders/html-builders.ts

@@ -3,7 +3,7 @@ import { createHTMLNode, createTextNode } from '../../src/builders/hast-builders
 describe('HTML Builders', () => {
   describe('createHTMLNode', () => {
     it('should create html node', () => {
-      const htmlNode = createHTMLNode('span', ['span'])
+      const htmlNode = createHTMLNode('span', [createHTMLNode('span', [])])
 
       expect(htmlNode).toHaveProperty('type')
       expect(htmlNode).toHaveProperty('tagName')
@@ -12,7 +12,14 @@ describe('HTML Builders', () => {
       expect(htmlNode.type).toBe('element')
       expect(htmlNode.tagName).toBe('span')
       expect(htmlNode.properties).toEqual({})
-      expect(htmlNode.children).toEqual(['span'])
+      expect(htmlNode.children).toEqual([
+        {
+          children: [],
+          tagName: 'span',
+          type: 'element',
+          properties: {},
+        },
+      ])
     })
   })
   describe('createTextNode', () => {

package/__tests__/builders/style-builders.ts

@@ -24,6 +24,29 @@ describe('CSS Class Generation', () => {
     expect(result).toEqual(`.name h1 > h2 .ab.cd #id {
   some-key: value;
   other-key: otherValue;
+}`)
+  })
+
+  it('attaches an ATTRIBUTE subselector with no separating space', () => {
+    // ⛔ THE SELECTED-PAGE CONTRACT. A numbered pagination strip repeats one
+    // authored node per visible page, so the copies cannot differ in the
+    // document. Both runtimes instead mark the showing page with
+    // `aria-current="page"` (`numbered-pagination.ts` here, `element-node.tsx`
+    // in the canvas editor), and the LOOK is a compound project class whose
+    // subselector is that attribute.
+    //
+    // A space before the bracket would turn this into a DESCENDANT selector —
+    // `.thq-page-number [aria-current='page']` matches something INSIDE the
+    // button, never the button — and the selected page would silently render
+    // identically to every other one. Which is exactly the bug the marker was
+    // added to fix.
+    const result = createCSSClassWithSelector('thq-page-number', "&[aria-current='page']", {
+      background: '#2563eb',
+      fontWeight: '600',
+    })
+    expect(result).toEqual(`.thq-page-number[aria-current='page'] {
+  background: #2563eb;
+  font-weight: 600;
 }`)
   })
 })

package/__tests__/node-handlers/node-to-html/index.ts

@@ -12,6 +12,8 @@ describe('generateHTMLTemplateSyntax', () => {
     dataObject: {},
     methodsObject: {},
     templateLookup: {},
+    propDefinitions: {},
+    stateDefinitions: {},
   }
 
   describe('uidl node', () => {

package/__tests__/node-handlers/node-to-jsx/attribute-value-mapper.ts

@@ -0,0 +1,77 @@
+import generator from '@babel/generator'
+import * as types from '@babel/types'
+import generateJSXSyntax from '../../../src/node-handlers/node-to-jsx'
+import {
+  JSXGenerationParams,
+  JSXGenerationOptions,
+} from '../../../src/node-handlers/node-to-jsx/types'
+import { UIDLElementNode } from '@teleporthq/teleport-types'
+
+/**
+ * An attribute bound through a value mapper renders through it, as a text
+ * binding does: a filter chip's `aria-pressed` reads the filter's state as
+ * "true" or "false", never as the filter's value.
+ */
+
+const MAPPER = [
+  'function mapValue(value) {',
+  "  return String(value) === 'On track' ? 'true' : 'false';",
+  '}',
+].join('\n')
+
+const chip = (valueMapper?: string): UIDLElementNode => ({
+  type: 'element',
+  content: {
+    key: 'chip',
+    elementType: 'button',
+    attrs: {
+      'aria-pressed': {
+        type: 'dynamic',
+        content: {
+          referenceType: 'state',
+          id: 'jobFilterStatus',
+          refPath: [],
+          ...(valueMapper ? { valueMapper } : {}),
+        },
+      },
+    },
+    children: [],
+  },
+})
+
+const params = (): JSXGenerationParams => ({
+  dependencies: {},
+  propDefinitions: {},
+  stateDefinitions: {
+    jobFilterStatus: { type: 'string', defaultValue: '' },
+  },
+  globalStateDefinitions: {},
+  nodesLookup: {},
+  windowImports: {},
+  localeReferences: [],
+  localeAttributeReferences: [],
+  globalReferences: [],
+  globalStateReferences: [],
+  hoistedConstants: [],
+})
+
+const options: JSXGenerationOptions = {
+  dynamicReferencePrefixMap: { prop: 'props', state: '', local: '' },
+}
+
+const render = (node: UIDLElementNode): string =>
+  generator(generateJSXSyntax(node, params(), options) as types.Node).code.replace(/\s+/g, ' ')
+
+describe('a dynamic attribute with a value mapper', () => {
+  it('renders the mapped value', () => {
+    const code = render(chip(MAPPER))
+    expect(code).toContain('aria-pressed={')
+    expect(code).toContain('mapValue(value)')
+    expect(code).toContain('jobFilterStatus')
+    expect(code).not.toContain('aria-pressed={jobFilterStatus}')
+  })
+
+  it('keeps a bare reference without one', () => {
+    expect(render(chip())).toContain('aria-pressed={jobFilterStatus}')
+  })
+})

package/__tests__/node-handlers/node-to-jsx/calendar-events-reviver.ts

@@ -0,0 +1,176 @@
+import * as types from '@babel/types'
+import generateJSXSyntax from '../../../src/node-handlers/node-to-jsx'
+import {
+  JSXGenerationParams,
+  JSXGenerationOptions,
+} from '../../../src/node-handlers/node-to-jsx/types'
+import { UIDLAttributeValue, UIDLDependency, UIDLElementNode } from '@teleporthq/teleport-types'
+
+const CALENDARKIT_DEPENDENCY: UIDLDependency = {
+  type: 'package',
+  path: 'calendarkit-basic',
+  version: '1.1.0',
+  meta: {
+    namedImport: true,
+  },
+}
+
+// Mirrors the post-resolver shape produced by the GUI's calendar-to-uidl
+// mapper: elementType is the React component name, dependency is embedded.
+const calendarNode = (
+  attrs: Record<string, UIDLAttributeValue>,
+  dependency: UIDLDependency = CALENDARKIT_DEPENDENCY,
+  elementType = 'BasicScheduler'
+): UIDLElementNode => ({
+  type: 'element',
+  content: {
+    key: 'calendar',
+    elementType,
+    dependency,
+    attrs,
+    children: [],
+  },
+})
+
+const buildParams = (): JSXGenerationParams => ({
+  dependencies: {},
+  propDefinitions: {},
+  stateDefinitions: {},
+  globalStateDefinitions: {},
+  nodesLookup: {},
+  windowImports: {},
+  localeReferences: [],
+  localeAttributeReferences: [],
+  globalReferences: [],
+  globalStateReferences: [],
+  hoistedConstants: [],
+})
+
+const options: JSXGenerationOptions = {
+  dynamicReferencePrefixMap: {
+    prop: 'props',
+    state: '',
+    local: '',
+  },
+}
+
+const getEventsAttr = (element: types.JSXElement): types.JSXAttribute | undefined =>
+  element.openingElement.attributes.find(
+    (attr): attr is types.JSXAttribute =>
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      attr.name.name === 'events'
+  )
+
+// Asserts the `.map((e) => ({ ...e, start: new Date(e.start), end: new Date(e.end) }))`
+// wrapper and returns the expression being mapped over (the guard or the array).
+const expectEventsReviver = (eventsAttr: types.JSXAttribute): types.Expression => {
+  expect(eventsAttr.value?.type).toBe('JSXExpressionContainer')
+  const expression = (eventsAttr.value as types.JSXExpressionContainer).expression
+
+  expect(expression.type).toBe('CallExpression')
+  const mapCall = expression as types.CallExpression
+  expect(mapCall.callee.type).toBe('MemberExpression')
+  const mapCallee = mapCall.callee as types.MemberExpression
+  expect((mapCallee.property as types.Identifier).name).toBe('map')
+
+  const arrow = mapCall.arguments[0] as types.ArrowFunctionExpression
+  expect(arrow.type).toBe('ArrowFunctionExpression')
+  const body = arrow.body as types.ObjectExpression
+  expect(body.type).toBe('ObjectExpression')
+  expect(body.properties[0].type).toBe('SpreadElement')
+
+  const dateProps = body.properties.slice(1) as types.ObjectProperty[]
+  const propNames = dateProps.map((prop) => (prop.key as types.Identifier).name)
+  expect(propNames).toEqual(['start', 'end'])
+  dateProps.forEach((prop) => {
+    expect(prop.value.type).toBe('NewExpression')
+    expect(((prop.value as types.NewExpression).callee as types.Identifier).name).toBe('Date')
+  })
+
+  return mapCallee.object as types.Expression
+}
+
+const expectArrayIsArrayGuard = (mapSource: types.Expression) => {
+  expect(mapSource.type).toBe('ConditionalExpression')
+  const guard = mapSource as types.ConditionalExpression
+  expect(guard.test.type).toBe('CallExpression')
+  const isArrayCall = guard.test as types.CallExpression
+  const isArrayCallee = isArrayCall.callee as types.MemberExpression
+  expect((isArrayCallee.object as types.Identifier).name).toBe('Array')
+  expect((isArrayCallee.property as types.Identifier).name).toBe('isArray')
+  expect(guard.alternate.type).toBe('ArrayExpression')
+  expect((guard.alternate as types.ArrayExpression).elements.length).toBe(0)
+}
+
+describe('calendarkit-basic BasicScheduler events revival', () => {
+  it('wraps a static events array with the Date revival map (no redundant guard)', () => {
+    const node = calendarNode({
+      view: { type: 'static', content: 'month' },
+      events: {
+        type: 'static',
+        content: [
+          { id: '1', title: 'Standup', start: '2026-06-10T09:00:00', end: '2026-06-10T09:30:00' },
+        ],
+      } as unknown as UIDLAttributeValue,
+    })
+
+    const result = generateJSXSyntax(node, buildParams(), options) as types.JSXElement
+    const eventsAttr = getEventsAttr(result)
+
+    expect(eventsAttr).toBeDefined()
+    const mapSource = expectEventsReviver(eventsAttr as types.JSXAttribute)
+    expect(mapSource.type).toBe('ArrayExpression')
+  })
+
+  it('wraps a dynamic state-bound events reference with the Array.isArray guard', () => {
+    const node = calendarNode({
+      events: {
+        type: 'dynamic',
+        content: { referenceType: 'state', id: 'calendarEvents' },
+      },
+    })
+
+    const result = generateJSXSyntax(node, buildParams(), options) as types.JSXElement
+    const eventsAttr = getEventsAttr(result)
+
+    expect(eventsAttr).toBeDefined()
+    const mapSource = expectEventsReviver(eventsAttr as types.JSXAttribute)
+    expectArrayIsArrayGuard(mapSource)
+
+    const guard = mapSource as types.ConditionalExpression
+    const isArrayArg = (guard.test as types.CallExpression).arguments[0] as types.Identifier
+    expect(isArrayArg.name).toBe('calendarEvents')
+  })
+
+  it('leaves the element untouched when events is missing — the library defaults to []', () => {
+    const node = calendarNode({
+      view: { type: 'static', content: 'week' },
+    })
+
+    const result = generateJSXSyntax(node, buildParams(), options) as types.JSXElement
+
+    expect(getEventsAttr(result)).toBeUndefined()
+  })
+
+  it('does not touch events attrs on elements from other packages', () => {
+    const node = calendarNode(
+      {
+        events: {
+          type: 'dynamic',
+          content: { referenceType: 'state', id: 'calendarEvents' },
+        },
+      },
+      { type: 'package', path: 'some-other-lib', version: '1.0.0' },
+      'OtherScheduler'
+    )
+
+    const result = generateJSXSyntax(node, buildParams(), options) as types.JSXElement
+    const eventsAttr = getEventsAttr(result)
+
+    expect(eventsAttr).toBeDefined()
+    const expression = ((eventsAttr as types.JSXAttribute).value as types.JSXExpressionContainer)
+      .expression
+    expect(expression.type).not.toBe('CallExpression')
+  })
+})

package/__tests__/node-handlers/node-to-jsx/cms-list-repeater-ecommerce-source.ts

@@ -0,0 +1,79 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import { elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLNode } from '@teleporthq/teleport-types'
+import generateJSXSyntax from '../../../src/node-handlers/node-to-jsx'
+import {
+  JSXGenerationParams,
+  JSXGenerationOptions,
+} from '../../../src/node-handlers/node-to-jsx/types'
+
+/**
+ * A repeater over the `ecommerce` global carries no array path — the editor's
+ * mapper keeps only the global's id — so the generator picks the array from the
+ * repeater's render-prop identifier. These pin that table: each e-commerce list
+ * the editor builds must land on the context array it was bound to, and an
+ * identifier the table does not know still means the cart's items.
+ */
+
+const params = (): JSXGenerationParams => ({
+  dependencies: {},
+  propDefinitions: {},
+  stateDefinitions: {},
+  globalStateDefinitions: {},
+  nodesLookup: {},
+  windowImports: {},
+  localeReferences: [],
+  localeAttributeReferences: [],
+  globalReferences: [],
+  globalStateReferences: [],
+  hoistedConstants: [],
+})
+
+const options: JSXGenerationOptions = {
+  dynamicReferencePrefixMap: {
+    prop: 'props',
+    state: '',
+    local: '',
+  },
+}
+
+const generate = (renderPropIdentifier: string): string => {
+  const repeater = {
+    type: 'cms-list-repeater',
+    content: {
+      elementType: 'Repeater',
+      name: 'repeater',
+      key: 'repeater',
+      renderPropIdentifier,
+      source: 'ecommerce',
+      nodes: {
+        list: elementNode('container', {}, [staticNode('row')]),
+      },
+    },
+  } as unknown as UIDLNode
+  const tree = elementNode('container', {}, [repeater])
+  return generator(generateJSXSyntax(tree, params(), options) as types.JSXElement).code
+}
+
+describe('cms-list-repeater over the ecommerce global', () => {
+  it('lists the shipping methods a checkout binds, not the cart items', () => {
+    expect(generate('shippingMethod')).toContain('items={ecommerce?.Cart?.shippingOptions || []}')
+  })
+
+  it('lists the discount sets a checkout offers, in both fulfilment shapes', () => {
+    expect(generate('discountOption')).toContain('items={ecommerce?.Cart?.discountOptions || []}')
+    expect(generate('discountOptionPickup')).toContain(
+      'items={ecommerce?.Cart?.discountOptionsPickup || []}'
+    )
+  })
+
+  it('keeps the payment-provider and store-location lists on their arrays', () => {
+    expect(generate('paymentProvider')).toContain('items={ecommerce?.paymentProviders || []}')
+    expect(generate('storeLocation')).toContain('items={ecommerce?.storeLocations || []}')
+  })
+
+  it('reads an identifier it does not know as the cart items', () => {
+    expect(generate('orderItem')).toContain('items={ecommerce?.Cart?.items || []}')
+  })
+})

package/__tests__/node-handlers/node-to-jsx/cms-list-repeater-loading.ts

@@ -0,0 +1,122 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import { elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLNode } from '@teleporthq/teleport-types'
+import generateJSXSyntax from '../../../src/node-handlers/node-to-jsx'
+import {
+  JSXGenerationParams,
+  JSXGenerationOptions,
+} from '../../../src/node-handlers/node-to-jsx/types'
+
+/**
+ * A repeater fed by a plain STATE has no `DataProvider` — nothing hoists its
+ * loading branch onto a `renderLoading` slot, so before `isLoading` existed the
+ * branch was generated and then thrown away, and a page that was still fetching
+ * showed its EMPTY branch ("no results") for the whole request.
+ *
+ * These tests pin both halves of the contract: the branch renders when the node
+ * carries the signal, and the emitted code is UNCHANGED when it does not — which
+ * is what keeps every data-source-backed mapper (products list, blog) on exactly
+ * the path it was on.
+ */
+
+const params = (): JSXGenerationParams => ({
+  dependencies: {},
+  propDefinitions: {},
+  stateDefinitions: {},
+  globalStateDefinitions: {},
+  nodesLookup: {},
+  windowImports: {},
+  localeReferences: [],
+  localeAttributeReferences: [],
+  globalReferences: [],
+  globalStateReferences: [],
+  hoistedConstants: [],
+})
+
+const options: JSXGenerationOptions = {
+  dynamicReferencePrefixMap: {
+    prop: 'props',
+    state: '',
+    local: '',
+  },
+}
+
+// Two children, so `unwrapTransparentRepeaterRoot` leaves the fragment in place —
+// the shape a listing's skeleton branch actually has.
+const loadingBranch = () =>
+  elementNode('fragment', {}, [
+    elementNode('container', {}, [staticNode('skeleton one')]),
+    elementNode('container', {}, [staticNode('skeleton two')]),
+  ])
+
+const repeaterNode = (isLoading?: { type: 'expr'; content: string }): UIDLNode =>
+  ({
+    type: 'cms-list-repeater',
+    content: {
+      elementType: 'Repeater',
+      name: 'repeater',
+      key: 'repeater',
+      renderPropIdentifier: 'favouriteProduct',
+      source: 'favouriteProducts',
+      nodes: {
+        list: elementNode('container', {}, [staticNode('row')]),
+        empty: elementNode('container', {}, [staticNode('No products available')]),
+        loading: loadingBranch(),
+      },
+      ...(isLoading ? { isLoading } : {}),
+    },
+  } as unknown as UIDLNode)
+
+// The repeater is generated through its PARENT, which is where a non-JSX result
+// gets wrapped in a `{ … }` expression container. Generating it standalone would
+// not exercise that.
+const generate = (isLoading?: { type: 'expr'; content: string }): string => {
+  const tree = elementNode('container', {}, [repeaterNode(isLoading)])
+  const ast = generateJSXSyntax(tree, params(), options) as types.JSXElement
+  return generator(ast).code
+}
+
+describe('cms-list-repeater loading branch', () => {
+  it('renders the loading branch instead of the repeater when isLoading is set', () => {
+    const code = generate({ type: 'expr', content: "isLoadingFavourites || ''" })
+
+    // `String(x) === "true"`, never a bare truthiness test: the flag is a string
+    // state, and the STRING `'false'` is truthy.
+    expect(code).toContain(`String(isLoadingFavourites || '') === "true"`)
+    expect(code).toContain('skeleton one')
+    expect(code).toContain('skeleton two')
+    // Still a ternary, not a replacement — the repeater is the other branch.
+    expect(code).toContain('<Repeater')
+    expect(code.indexOf('skeleton one')).toBeLessThan(code.indexOf('<Repeater'))
+  })
+
+  it('accepts a static flag', () => {
+    expect(generate()).not.toContain('String(')
+
+    const tree = elementNode('container', {}, [
+      {
+        ...(repeaterNode() as { content: unknown }),
+        content: {
+          ...(repeaterNode() as unknown as { content: Record<string, unknown> }).content,
+          isLoading: { type: 'static', content: 'true' },
+        },
+      } as unknown as UIDLNode,
+    ])
+    const code = generator(generateJSXSyntax(tree, params(), options) as types.JSXElement).code
+
+    expect(code).toContain(`String("true") === "true"`)
+  })
+
+  it('leaves a repeater WITHOUT isLoading exactly as it was', () => {
+    const code = generate()
+
+    // ⛔ The regression guard for every data-source-backed mapper: its loading
+    // branch is hoisted onto the `DataProvider`, so emitting it here as well
+    // would draw the same branch twice.
+    expect(code).not.toContain('String(')
+    expect(code).not.toContain('skeleton one')
+    expect(code).toContain('<Repeater')
+    expect(code).toContain('renderEmpty')
+  })
+})