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

{
        value: 'about',
        pageOptions: { fileName: 'about', componentName: 'About', navLink: '/about' },
      },
      {
        value: 'contact',
        pageOptions: { fileName: 'contact', componentName: 'Contact', navLink: '/contact' },
      },
    ]

    const structure: ComponentStructure = {
      chunks: [],
      options: {},
      uidl: component(
        'Test',
        elementNode('Router', {}, [
          conditionalNode(dynamicNode('state', 'route'), elementNode('container'), 'home'),
          conditionalNode(dynamicNode('state', 'route'), elementNode('container'), 'about'),
          conditionalNode(dynamicNode('state', 'route'), elementNode('container'), 'contact'),
        ]),
        {},
        {
          route: routeDefinition,
        }
      ),
      dependencies: {},
    }
    const result = await plugin(structure)

    // no change to the input UIDL
    expect(JSON.stringify(result.uidl)).toBe(JSON.stringify(structure.uidl))

it('counts duplicate nodes inside the UIDL', async () => {
    const node = elementNode('container', {}, [
      elementNode('container', {}, [elementNode('text'), elementNode('text'), elementNode('text')]),
    ])

    const lookup: Record = {}
    createNodesLookup(node, lookup)

    expect(lookup.container.count).toBe(2)
    expect(lookup.container.nextKey).toBe('0')
    expect(lookup.text.count).toBe(3)
    expect(lookup.container.nextKey).toBe('0')
  })

it('adds a <style> element', async () => {
    const style = {
      height: staticNode('100px'),
    }
    const element = elementNode('div', {}, [], null, style)
    element.content.key = 'container'
    const group = elementNode('Fragment', {}, [element])
    group.content.key = 'group'
    const uidlSample = component('StyledJSX', group)

    const structure: ComponentStructure = {
      uidl: uidlSample,
      options: {},
      chunks: [componentChunk],
      dependencies: {},
    }

    const { chunks } = await plugin(structure)

    expect(chunks.length).toBe(1)
    const nodeReference = componentChunk.meta.nodesLookup.group
    expect(nodeReference.children.length).toBe(1)
</style>

describe('checkForIllegalNames', () => {
  const comp = component(
    'Component',
    elementNode('container'),
    {
      'my-title': definition('string', 'test'),
    },
    {
      isVisible: definition('boolean', false),
    }
  )

  comp.outputOptions = {
    componentClassName: 'Component',
    fileName: 'component',
  }

  it('checks component name', () => {
    checkForIllegalNames(comp, mapping)
    expect(comp.outputOptions.componentClassName).toBe('AppComponent')

component,
  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('adds zero padding when counting keys', async () => {
    const node = elementNode('container')

    const lookup: Record = {
      container: {
        count: 9,
        nextKey: '0',
      },
    }
    createNodesLookup(node, lookup)

    expect(lookup.container.count).toBe(10)
    expect(lookup.container.nextKey).toBe('00')
  })
})

import {
  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'),
      {

const uidl = (dependency) => {
  return component(
    'Component with dependencies',
    elementNode(
      dependency.name,
      {},
      [],
      componentDependency(dependency.type, dependency.path, dependency.version, dependency.option)
    ),
    {},
    { title: definition('boolean', true) }
  )
}

const uidl = (dependency) => {
  return component(
    'Component With Dependencies',
    elementNode(
      dependency.name,
      {},
      [],
      componentDependency(dependency.type, dependency.path, dependency.version, dependency.option)
    ),
    {},
    { title: definition('boolean', true) }
  )
}