How to use the @teleporthq/teleport-plugin-common.ASTUtils.addAttributeToJSXTag function in @teleporthq/teleport-plugin-common

const { settings, meta, assets, manifest } = uidl.globals

  const htmlNode = ASTBuilders.createJSXTag('html')
  const headNode = ASTBuilders.createJSXTag('Head')
  const bodyNode = ASTBuilders.createJSXTag('body')

  const mainNode = ASTBuilders.createJSXTag('Main')
  const nextScriptNode = ASTBuilders.createJSXTag('NextScript')
  ASTUtils.addChildJSXTag(bodyNode, mainNode)
  ASTUtils.addChildJSXTag(bodyNode, nextScriptNode)

  ASTUtils.addChildJSXTag(htmlNode, headNode)
  ASTUtils.addChildJSXTag(htmlNode, bodyNode)

  if (settings.language) {
    ASTUtils.addAttributeToJSXTag(htmlNode, 'lang', settings.language)
  }

  // NOTE: Title is added in per page, not in the layout file

  if (manifest) {
    const linkTag = ASTBuilders.createJSXTag('link')
    ASTUtils.addAttributeToJSXTag(linkTag, 'rel', 'manifest')
    ASTUtils.addAttributeToJSXTag(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
    ASTUtils.addChildJSXTag(headNode, linkTag)
  }

  meta.forEach((metaItem) => {
    const metaTag = ASTBuilders.createJSXTag('meta')
    Object.keys(metaItem).forEach((key) => {
      const metaValue = UIDLUtils.prefixAssetsPath(options.assetsPrefix, metaItem[key])
      ASTUtils.addAttributeToJSXTag(metaTag, key, metaValue)

? `styles.${jsFriendlyClassName}`
              : `styles['${className}']`

          ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
        }

        if (Object.keys(dynamicStyles).length) {
          const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)

          const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
            StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
          )

          // If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
          if (Object.keys(inlineStyles).length > 0) {
            ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
          }
        }
      }
    })

export const generateStyledJSXTag = (content: string): types.JSXElement => {
  const templateLiteral = ASTUtils.stringAsTemplateLiteral(content)
  const styleContent = ASTBuilders.createJSXExpresionContainer(templateLiteral)
  const styleTag = ASTBuilders.createJSXTag('style', [styleContent])
  ASTUtils.addChildJSXText(styleTag, '\n') // for better formatting
  ASTUtils.addAttributeToJSXTag(styleTag, 'jsx')
  return styleTag
}

const generateHTMLNode = (uidl: ProjectUIDL, options: EntryFileOptions, t = types) => {
  const { settings, meta, assets } = uidl.globals

  const htmlNode = ASTBuilders.createJSXTag('html')
  const headNode = ASTBuilders.createJSXTag('head')
  const bodyNode = ASTBuilders.createJSXTag('body')
  const noScriptNode = ASTBuilders.createJSXTag('noscript')

  if (uidl.globals.manifest) {
    const manifestTag = ASTBuilders.createJSXTag('link')
    ASTUtils.addAttributeToJSXTag(manifestTag, 'rel', 'manifest')
    ASTUtils.addAttributeToJSXTag(manifestTag, 'href', '/manifest.json')
    ASTUtils.addChildJSXTag(headNode, manifestTag)
  }

  const charSetMetaTag = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(charSetMetaTag, 'charSet', 'utf-8')
  ASTUtils.addChildJSXTag(headNode, charSetMetaTag)

  const httpMetaTag = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(httpMetaTag, 'httpEquiv', 'x-ua-compatible')
  ASTUtils.addAttributeToJSXTag(httpMetaTag, 'content', 'ie=edge')
  ASTUtils.addChildJSXTag(headNode, httpMetaTag)

  const viewPortMeta = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(viewPortMeta, 'name', 'viewport')
  ASTUtils.addAttributeToJSXTag(

const { settings, meta, assets } = uidl.globals

  const htmlNode = ASTBuilders.createJSXTag('html')
  const headNode = ASTBuilders.createJSXTag('head')
  const bodyNode = ASTBuilders.createJSXTag('body')
  const noScriptNode = ASTBuilders.createJSXTag('noscript')

  if (uidl.globals.manifest) {
    const manifestTag = ASTBuilders.createJSXTag('link')
    ASTUtils.addAttributeToJSXTag(manifestTag, 'rel', 'manifest')
    ASTUtils.addAttributeToJSXTag(manifestTag, 'href', '/manifest.json')
    ASTUtils.addChildJSXTag(headNode, manifestTag)
  }

  const charSetMetaTag = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(charSetMetaTag, 'charSet', 'utf-8')
  ASTUtils.addChildJSXTag(headNode, charSetMetaTag)

  const httpMetaTag = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(httpMetaTag, 'httpEquiv', 'x-ua-compatible')
  ASTUtils.addAttributeToJSXTag(httpMetaTag, 'content', 'ie=edge')
  ASTUtils.addChildJSXTag(headNode, httpMetaTag)

  const viewPortMeta = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(viewPortMeta, 'name', 'viewport')
  ASTUtils.addAttributeToJSXTag(
    viewPortMeta,
    'content',
    'width=device-width, initial-scale=1, shrink-to-fit=no'
  )
  ASTUtils.addChildJSXTag(headNode, viewPortMeta)

const noScriptNode = ASTBuilders.createJSXTag('noscript')

  if (uidl.globals.manifest) {
    const manifestTag = ASTBuilders.createJSXTag('link')
    ASTUtils.addAttributeToJSXTag(manifestTag, 'rel', 'manifest')
    ASTUtils.addAttributeToJSXTag(manifestTag, 'href', '/manifest.json')
    ASTUtils.addChildJSXTag(headNode, manifestTag)
  }

  const charSetMetaTag = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(charSetMetaTag, 'charSet', 'utf-8')
  ASTUtils.addChildJSXTag(headNode, charSetMetaTag)

  const httpMetaTag = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(httpMetaTag, 'httpEquiv', 'x-ua-compatible')
  ASTUtils.addAttributeToJSXTag(httpMetaTag, 'content', 'ie=edge')
  ASTUtils.addChildJSXTag(headNode, httpMetaTag)

  const viewPortMeta = ASTBuilders.createSelfClosingJSXTag('meta')
  ASTUtils.addAttributeToJSXTag(viewPortMeta, 'name', 'viewport')
  ASTUtils.addAttributeToJSXTag(
    viewPortMeta,
    'content',
    'width=device-width, initial-scale=1, shrink-to-fit=no'
  )
  ASTUtils.addChildJSXTag(headNode, viewPortMeta)

  addJSXExpressionContainer(bodyNode, 'props', 'preBodyComponents')

  ASTUtils.addChildJSXText(noScriptNode, 'This app works best with JavaScript enabled.')
  ASTUtils.addAttributeToJSXTag(noScriptNode, 'key', 'noscript')
  ASTUtils.addAttributeToJSXTag(noScriptNode, 'id', 'gatsby-noscript')

export const constructRouteJSX = (flavour: string, componentName: string, path: string) => {
  let JSXRoutePrefix: string
  let route: types.JSXElement

  if (flavour === 'preact') {
    JSXRoutePrefix = componentName
    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
  } else {
    JSXRoutePrefix = 'Route'
    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
    ASTUtils.addAttributeToJSXTag(route, 'exact')
    ASTUtils.addDynamicAttributeToJSXTag(route, 'component', componentName)
  }

  ASTUtils.addAttributeToJSXTag(route, 'path', path)

  return route
}

export const constructRouteJSX = (flavour: string, componentName: string, path: string) => {
  let JSXRoutePrefix: string
  let route: types.JSXElement

  if (flavour === 'preact') {
    JSXRoutePrefix = componentName
    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
  } else {
    JSXRoutePrefix = 'Route'
    route = ASTBuilders.createSelfClosingJSXTag(JSXRoutePrefix)
    ASTUtils.addAttributeToJSXTag(route, 'exact')
    ASTUtils.addDynamicAttributeToJSXTag(route, 'component', componentName)
  }

  ASTUtils.addAttributeToJSXTag(route, 'path', path)

  return route
}

Object.keys(tag).forEach((key) => {
          ASTUtils.addAttributeToJSXTag(metaAST, key, tag[key])
        })
        headASTTags.push(metaAST)

routes.forEach((routeNode) => {
    const pageKey = routeNode.content.value.toString()
    const pageDefinition = routeDefinitions.values.find((route) => route.value === pageKey)
    const { componentName, navLink } = pageDefinition.pageOptions

    const stencilRouteTag = ASTBuilders.createJSXTag('stencil-route')
    ASTUtils.addAttributeToJSXTag(stencilRouteTag, 'url', navLink)
    if (navLink === '/') {
      ASTUtils.addAttributeToJSXTag(stencilRouteTag, 'exact', true)
    }
    ASTUtils.addAttributeToJSXTag(
      stencilRouteTag,
      'component',
      UIDLUtils.createWebComponentFriendlyName(componentName)
    )
    ASTUtils.addChildJSXTag(stencilRouteSwitchTag, stencilRouteTag)
  })