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

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))

    // AST chunks created
    expect(result.chunks.length).toBe(1)
    expect(result.chunks[0].type).toBe(ChunkType.AST)

{
        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))

    // AST chunks created

},
      {
        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))

    // AST chunks created
    expect(result.chunks.length).toBe(2)
    expect(result.chunks[0].type).toBe(ChunkType.AST)

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))

    // AST chunks created

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

const generator = createAngularComponentGenerator()

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

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {

it('should return resolved UIDL', () => {
    const uidl = component(
      'Conditional Component',
      elementNode('container', {}, [
        conditionalNode(
          dynamicNode('state', 'isVisible'),
          elementNode('div', {}, [staticNode('Now you see me!')]),
          true
        ),
      ]),
      {},
      { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
    )

    const extraMapping = {
      elements: {
        container: {
          elementType: 'div',
        },
      },
    }

conditionalNode,
} from '@teleporthq/teleport-uidl-builders'

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

const vueGenerator = createVueComponentGenerator()

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {
    const result = await vueGenerator.generateComponent(uidl)
    const code = result.files[0].content

    expect(code).toContain('<span>Now you see me!</span>')
  })

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

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

const vueGenerator = createVueComponentGenerator()

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {

})

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++)
    expect(counter).toBe(15)

const generator = createReactComponentGenerator()

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

const uidl = component(
  'Conditional Component',
  elementNode('container', {}, [
    conditionalNode(
      dynamicNode('state', 'isVisible'),
      elementNode('text', {}, [staticNode('Now you see me!')]),
      true
    ),
    conditionalNode(
      dynamicNode('state', 'isShareable'),
      elementNode('text', {}, [staticNode('I am not shareable!')]),
      false
    ),
  ]),
  {},
  { isVisible: definition('boolean', true), isShareable: definition('boolean', false) }
)

describe('Component with conditional node type', () => {
  it('renders code with condition if value on state is true', async () => {
    const result = await generator.generateComponent(uidl)
    const jsFile = findFileByType(result.files, JS_FILE)

    expect(jsFile).toBeDefined()
    expect(jsFile.content).toContain('{isVisible &amp;&amp; <span>Now you see me!</span>}')