How to use the @teleporthq/teleport-uidl-builders.repeatNode function in @teleporthq/teleport-uidl-builders

// @ts-ignore
import invalidProjectUidlSample from './project-invalid-sample.json'
// @ts-ignore
import noRouteProjectUidlSample from './project-invalid-sample-no-route.json'
import {
  component,
  definition,
  repeatNode,
  dynamicNode,
  elementNode,
} from '@teleporthq/teleport-uidl-builders'

const uidl = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  { items: definition('array', ['hello', 'world']) }
)

describe('Validate UIDL', () => {
  describe('Component UIDL Format', () => {
    it('returns object with valid=true and errorMsg="" if uidl is valid', () => {
      const validator = new Validator()
      const validationResult = validator.validateComponentSchema(uidl)

it('repeatNode', () => {
    const repeatNodeSample = repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    )
    expect(repeatNodeSample.content.node.type).toBe('element')
    expect(repeatNodeSample.content.node.content).toHaveProperty('name', 'div')
    expect(repeatNodeSample.content.node.content).toHaveProperty('children')
  })
})

definition,
  repeatNode,
  dynamicNode,
  elementNode,
} from '@teleporthq/teleport-uidl-builders'

const JS_FILE = 'js'
const findFileByType = (files: GeneratedFile[], type: string = JS_FILE) =>
  files.find((file) => file.fileType === type)

const generator = createReactComponentGenerator()

const uidl = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  {}
)

describe('Component with repeat node type', () => {
  it('renders code that contains map method', async () => {
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

it('set dataSourceIdentifier as "items" if only one repeat is in the node', () => {
    const repeatNodeSample = repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      { type: 'static', content: [] },
      {
        useIndex: true,
      }
    )

    ensureDataSourceUniqueness(repeatNodeSample)

    expect(repeatNodeSample.content.meta.dataSourceIdentifier).toBe('items')
  })

})
})

const nodeToTraverse = elementNode(
  'container',
  {},
  [
    staticNode('static'),
    dynamicNode('prop', 'title'),
    elementNode(
      'container',
      {
        attr: staticNode('dummy-attr'),
      },
      [
        repeatNode(elementNode('container', {}, []), dynamicNode('prop', 'items')),
        conditionalNode(dynamicNode('state', 'visible'), elementNode('text', {}, []), true),
        slotNode(staticNode('fallback'), 'slot-1'),
      ]
    ),
  ],
  null,
  {
    margin: staticNode('10px'),
    height: dynamicNode('prop', 'height'),
  }
)

describe('traverseNodes', () => {
  it('counts the total number of nodes', () => {
    let counter = 0
    traverseNodes(nodeToTraverse, () => counter++)

it('set incremental dataSourceIdenfiers if multiple repeat structures are in the node', () => {
    const repeatNodeSample = repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      { type: 'static', content: [] },
      {
        useIndex: true,
      }
    )

    const repeatNodeSample1 = JSON.parse(JSON.stringify(repeatNodeSample))
    const element = elementNode('container', {}, [repeatNodeSample, repeatNodeSample1])

    ensureDataSourceUniqueness(element)
    const firstRepeat = element.content.children[0] as UIDLRepeatNode
    const secondRepeat = element.content.children[1] as UIDLRepeatNode

    expect(firstRepeat.content.meta.dataSourceIdentifier).toBe('items')
    expect(secondRepeat.content.meta.dataSourceIdentifier).toBe('items1')

import {
  component,
  definition,
  repeatNode,
  dynamicNode,
  elementNode,
} from '@teleporthq/teleport-uidl-builders'

import { createVueComponentGenerator } from '../../src'

const vueGenerator = createVueComponentGenerator()

const uidl = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  {}
)

describe('Component Repeat Node', () => {
  it('renders code that contains map method', async () => {
    const result = await vueGenerator.generateComponent(uidl)
    const code = result.files[0].content

import { createReactComponentGenerator } from '../../src'
import { GeneratedFile } from '@teleporthq/teleport-types'

import {
  component,
  definition,
  repeatNode,
  dynamicNode,
  elementNode,
  staticNode,
} from '@teleporthq/teleport-uidl-builders'

const uidl = component(
  'ComponentWithAttrProp',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [
        elementNode(
          'div',
          {
            test: dynamicNode('local', 'index'),
            for: staticNode('mappedTest'),
            autoplay: staticNode('true'),
            'data-test': dynamicNode('prop', 'test'),
            'data-inner-value': dynamicNode('prop', 'content.heading'),
          },
          [dynamicNode('local', 'item')]
        ),
      ]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,

component,
  definition,
  repeatNode,
  dynamicNode,
  elementNode,
  staticNode,
} from '@teleporthq/teleport-uidl-builders'

const VUE_FILE = 'vue'
const findFileByType = (files: GeneratedFile[], type: string = VUE_FILE) =>
  files.find((file) => file.fileType === type)

const uidl = component(
  'ComponentWithAttrProp',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [
        elementNode(
          'div',
          {
            test: dynamicNode('local', 'index'),
            for: staticNode('mappedTest'),
            'data-test': dynamicNode('prop', 'test'),
            'data-static': staticNode('test'),
            'data-inner-value': dynamicNode('prop', 'content.heading'),
          },
          [dynamicNode('local', 'item')]
        ),
      ]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,

repeatNode,
  dynamicNode,
  elementNode,
} from '@teleporthq/teleport-uidl-builders'

const TS_FILE = 'ts'
const HTML_FILE = 'html'
const findFileByType = (files: GeneratedFile[], type: string = TS_FILE) =>
  files.find((file) => file.fileType === type)

const generator = createAngularComponentGenerator()

const uidl = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),
      dynamicNode('prop', 'items'),
      {
        useIndex: true,
      }
    ),
  ]),
  { items: definition('array', ['hello', 'world']) },
  {}
)

const uidlWithoutIndex = component(
  'Repeat Component',
  elementNode('container', {}, [
    repeatNode(
      elementNode('div', {}, [dynamicNode('local', 'item')]),