How to use the @teleporthq/teleport-shared.UIDLUtils.traverseElements function in @teleporthq/teleport-shared

export const resolveNavlinks = (uidlNode: UIDLNode, routesDefinition: UIDLStateDefinition) => {
  UIDLUtils.traverseElements(uidlNode, (element) => {
    if (element.elementType === 'navlink') {
      const transitionAttribute = element.attrs.transitionTo
      if (!transitionAttribute) {
        // Fallback for when transitionTo is not present
        console.warn(
          `transitionTo was missing from element: '${element.elementType}'. Falling back to navlink: '/'`
        )
        element.attrs.transitionTo = {
          type: 'static',
          content: '/',
        }

        return
      }

      if (transitionAttribute.type !== 'static') {

export const createNodesLookup = (node: UIDLNode, lookup: ElementsLookup) => {
  UIDLUtils.traverseElements(node, (element) => {
    // Element name is stored as a lower case string in the lookup
    const elementName = element.name.toLowerCase()
    if (!lookup[elementName]) {
      lookup[elementName] = {
        count: 0,
        nextKey: '0',
      }
    }

    lookup[elementName].count++
    const newCount = lookup[elementName].count
    if (newCount > 9 && isPowerOfTen(newCount)) {
      // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
      // nextKey will start either from: '0', '00', '000', etc.
      lookup[elementName].nextKey = '0' + lookup[elementName].nextKey
    }

const reactStyledJSXPlugin: ComponentPlugin = async (structure) => {
    const { uidl, chunks } = structure
    const { node } = uidl

    const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
    if (!componentChunk) {
      return structure
    }

    const jsxNodesLookup = componentChunk.meta.nodesLookup
    const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop

    const styleJSXString: string[] = []

    UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        // Generating the string templates for the dynamic styles
        const styleRules = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return `\$\{${propsPrefix}.${styleValue.content.id}\}`
          }
          throw new Error(
            `Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        styleJSXString.push(StyleBuilders.createCSSClass(className, styleRules))
        ASTUtils.addClassStringOnJSXTag(root, className)
      }

const inlineStylesPlugin: ComponentPlugin = async (structure) => {
    const { uidl, chunks } = structure
    const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)

    if (!componentChunk) {
      return structure
    }

    UIDLUtils.traverseElements(uidl.node, (element) => {
      const { style, key } = element

      if (style && Object.keys(style).length > 0) {
        const jsxASTTag = componentChunk.meta.nodesLookup[key]
        const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
        if (!jsxASTTag) {
          return
        }

        // Nested styles are ignored
        const rootStyles = UIDLUtils.cleanupNestedStyles(style)
        const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
          StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
        )

        ASTUtils.addAttributeToJSXTag(jsxASTTag, 'style', inlineStyles)

const reactStyledComponentsPlugin: ComponentPlugin = async (structure) => {
    const { uidl, chunks, dependencies } = structure
    const { node, name } = uidl
    const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
    if (!componentChunk) {
      return structure
    }

    const jsxNodesLookup = componentChunk.meta.nodesLookup as Record
    const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
    const jssStyleMap: Record = {}

    UIDLUtils.traverseElements(node, (element) => {
      let { style } = element
      const { key, elementType } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        let className = StringUtils.dashCaseToUpperCamelCase(key)

        // Styled components might create an element that clashes with native element (Text, View, Image, etc.)
        if (
          illegalComponentNames.includes(className) ||
          StringUtils.dashCaseToUpperCamelCase(key) === name ||
          Object.keys(dependencies).includes(className)
        ) {
          className = `Styled${className}`
        }

        const timesReferred = countPropReferences(style, 0)

const cssModulesPlugin: ComponentPlugin = async (structure) => {
    const { uidl, chunks, dependencies } = structure

    const componentChunk = chunks.filter((chunk) => chunk.name === componentChunkName)[0]

    if (!componentChunk) {
      throw new Error(
        `JSX based component chunk with name ${componentChunkName} was required and not found.`
      )
    }

    const cssClasses: string[] = []
    const astNodesLookup = componentChunk.meta.nodesLookup || {}
    const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop

    UIDLUtils.traverseElements(uidl.node, (element) => {
      const { style, key } = element
      if (style) {
        const root = astNodesLookup[key]
        const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)

        if (Object.keys(staticStyles).length > 0) {
          const className = StringUtils.camelCaseToDashCase(key)
          const jsFriendlyClassName = StringUtils.dashCaseToCamelCase(className)

          cssClasses.push(
            StyleBuilders.createCSSClass(
              className,
              StyleUtils.getContentOfStyleObject(staticStyles)
            )
          )

Object.keys(components).forEach((componentKey) => {
    const component = components[componentKey]
    const componentPath = UIDLUtils.getComponentFolderPath(component)
    const fromPath = strategy.components.path.concat(componentPath)

    UIDLUtils.traverseElements(component.node, (element) => {
      if (isLocalDependency(element)) {
        setLocalDependencyPath(element, components, fromPath, strategy.components.path)
      }
    })
  })
}

const cssModulesPlugin: ComponentPlugin = async (structure) => {
    const { uidl, chunks, dependencies } = structure

    const componentChunk = chunks.filter((chunk) => chunk.name === componentChunkName)[0]

    if (!componentChunk) {
      throw new Error(
        `JSX based component chunk with name ${componentChunkName} was required and not found.`
      )
    }

    const cssClasses: string[] = []
    const astNodesLookup = componentChunk.meta.nodesLookup || {}
    const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop

    UIDLUtils.traverseElements(uidl.node, (element) => {
      const { style, key } = element
      if (style) {
        const root = astNodesLookup[key]
        const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)

        if (Object.keys(staticStyles).length > 0) {
          const className = StringUtils.camelCaseToDashCase(key)
          const jsFriendlyClassName = StringUtils.dashCaseToCamelCase(className)

          cssClasses.push(
            StyleBuilders.createCSSClass(
              className,
              StyleUtils.getContentOfStyleObject(staticStyles)
            )
          )

const reactJSSPlugin: ComponentPlugin = async (structure) => {
    const { uidl, chunks, dependencies } = structure

    const { node } = uidl

    const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
    if (!componentChunk) {
      return structure
    }

    const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
    const jsxNodesLookup = componentChunk.meta.nodesLookup
    const jssStyleMap: Record = {}

    UIDLUtils.traverseElements(node, (element) => {
      const { style, key } = element
      if (style && Object.keys(style).length > 0) {
        const root = jsxNodesLookup[key]
        const className = StringUtils.camelCaseToDashCase(key)
        jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
          if (styleValue.content.referenceType === 'prop') {
            return new ParsedASTNode(
              ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
            )
          }
          throw new Error(
            `Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
          )
        })
        ASTUtils.addDynamicAttributeToJSXTag(
          root,

export const checkComponentExistence = (input: ProjectUIDL) => {
  const errors: string[] = []
  const components = Object.keys(input.components)

  UIDLUtils.traverseElements(input.root.node, (element) => {
    if (
      element.dependency &&
      element.dependency.type === 'local' &&
      !components.includes(element.elementType)
    ) {
      const errorMsg = `\nThe component "${element.elementType}" is not defined in the UIDL's component section.`
      errors.push(errorMsg)
    }
  })
  return errors
}