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

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)
      expect(typeof validationResult).toBe('object')

it('works with a state reference', () => {
    const node = dynamicNode('state', 'isActive')
    const result = createConditionIdentifier(node, params, options)

    expect(result.key).toBe('isActive')
    expect(result.prefix).toBe('this')
    expect(result.type).toBe('boolean')
  })

click: [
      {
        type: 'propCall',
        calls: 'onClose',
      },
      {
        type: 'stateChange',
        modifies: 'fakeState',
        newState: false,
      },
    ],
  }
  const uidl: ComponentUIDL = component(
    'PropEventComponent',
    elementNode('container', {}, [
      dynamicNode('prop', 'message'),
      elementNode('button', {}, [staticNode('close')], null, null, events),
    ]),
    propDefinitions
  )

  it('Adds EmitEmitter to the import', async () => {
    const result = await generator.generateComponent(uidl)
    const tsFile = findFileByType(result.files, TS_FILE)
    const htmlFile = findFileByType(result.files, HTML_FILE)

    expect(result.files.length).toBe(2)
    expect(tsFile.content).toContain(`Output, EventEmitter`)
    expect(tsFile.content).toContain(`@Output`)
    expect(tsFile.content).toContain(`onClose: EventEmitter = new EventEmitter()`)
    expect(tsFile.content).toContain(`this.onClose.emit()`)
    expect(htmlFile.content).toContain(`(click)="handleButtonClick()"`)

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

    expect(code).toContain('v-for="(item, index) in items"')
  })

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

    expect(code).toContain('v-for="(item, index) in items"')

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,
      }
    ),
  ]),
  {
    items: definition('object', { test: '123' }),
    test: definition('string', '123'),
    content: definition('object', { heading: 'Hello World' }),

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')]),
      dynamicNode('prop', 'items'),
      {}

import { createReactComponentGenerator } from '../../src'
import {
  ComponentUIDL,
  GeneratedFile,
  UIDLPropDefinition,
  UIDLStyleDefinitions,
  FileType,
  ReactStyleVariation,
} from '@teleporthq/teleport-types'
import { staticNode, dynamicNode, component, elementNode } from '@teleporthq/teleport-uidl-builders'

const ComponentWithValidStyle: ComponentUIDL = component(
  'ComponentWithAttrProp',
  elementNode('container', {}, [], null, {
    flexDirection: dynamicNode('prop', 'direction'),
    height: dynamicNode('prop', 'config.height'),
    alignSelf: staticNode('center'),
  }),
  {
    direction: {
      type: 'string',
      defaultValue: 'row',
    },
    config: {
      type: 'object',
      defaultValue: {
        height: 32,
      },
    },
  },
  {}

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,
      }
    ),
  ]),
  {
    items: definition('object', { test: '123' }),
    test: definition('string', '123'),
    content: definition('object', { heading: 'Hello World' }),
  },
  {}

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,
      }
    ),
  ]),
  {
    items: definition('object', { test: '123' }),
    test: definition('string', '123'),
    content: definition('object', { heading: 'Hello World' }),
  },
  {}
)

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