How to use the @teleporthq/teleport-plugin-common.ASTBuilders.createSelfClosingJSXTag function in @teleporthq/teleport-plugin-common

uidl.seo.assets.forEach((asset) => {
        // TODO: Handle other asset types when needed
        if (asset.type === 'canonical') {
          const canonicalLink = ASTBuilders.createSelfClosingJSXTag('link')
          ASTUtils.addAttributeToJSXTag(canonicalLink, 'rel', 'canonical')
          ASTUtils.addAttributeToJSXTag(canonicalLink, 'href', asset.path)
          headASTTags.push(canonicalLink)
        }
      })
    }

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')
  ASTUtils.addChildJSXTag(bodyNode, noScriptNode)

  addSpreadAttributes(htmlNode, 'props', 'htmlAttributes')

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)

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

  ASTUtils.addChildJSXText(noScriptNode, 'This app works best with JavaScript enabled.')

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
}

uidl.seo.metaTags.forEach((tag) => {
        const metaAST = ASTBuilders.createSelfClosingJSXTag('meta')
        Object.keys(tag).forEach((key) => {
          ASTUtils.addAttributeToJSXTag(metaAST, key, tag[key])
        })
        headASTTags.push(metaAST)
      })
    }

const jsxOptions: JSXGenerationOptions = {
      dynamicReferencePrefixMap: {
        prop: 'this',
        state: 'this',
        local: '',
      },
      dependencyHandling: 'ignore',
      stateHandling: 'mutation',
      slotHandling: 'native',
      customElementTag: (name: string) => UIDLUtils.createWebComponentFriendlyName(name),
    }

    const jsxTagStructure = createJSXSyntax(uidl.node, jsxParams, jsxOptions)

    if (uidl.seo && uidl.seo.title) {
      const titleAST = ASTBuilders.createSelfClosingJSXTag('stencil-route-title')
      ASTUtils.addAttributeToJSXTag(titleAST, 'pageTitle', uidl.seo.title)
      jsxTagStructure.children.unshift(titleAST)
    }

    const componentName = UIDLUtils.getComponentClassName(uidl)
    const exportAST = createClassDeclaration(
      componentName,
      propDefinitions,
      stateDefinitions,
      jsxTagStructure
    )

    const params = {
      tag: UIDLUtils.createWebComponentFriendlyName(componentName),
      shadow: true,
    }

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(
    viewPortMeta,
    'content',
    'width=device-width, initial-scale=1, shrink-to-fit=no'
  )
  ASTUtils.addChildJSXTag(headNode, viewPortMeta)

linkAfter: [importChunkName],
    })

    if (flavor === 'preact') {
      const exportJSXApp = ASTBuilders.createDefaultExport('App')

      structure.chunks.push({
        type: ChunkType.AST,
        fileType: FileType.JS,
        name: domRenderChunkName,
        content: exportJSXApp,
        linkAfter: [componentChunkName],
      })
    } else {
      const reactDomBind = ASTBuilders.createFunctionCall('ReactDOM.render', [
        ASTBuilders.createSelfClosingJSXTag(uidl.name),
        ASTBuilders.createFunctionCall('document.getElementById', ['app']),
      ])

      structure.chunks.push({
        type: ChunkType.AST,
        fileType: FileType.JS,
        name: domRenderChunkName,
        content: reactDomBind,
        linkAfter: [componentChunkName],
      })
    }

    return structure
  }

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
}

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

  ASTBuilders.appendAssetsAST(assets, options, headNode, bodyNode)

  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)
    })
    ASTUtils.addChildJSXTag(headNode, metaTag)
  })

  const bodyDiv = ASTBuilders.createSelfClosingJSXTag('div')
  ASTUtils.addAttributeToJSXTag(bodyDiv, 'id', '___gatsby')
  bodyDiv.openingElement.attributes.push(
    t.jsxAttribute(
      t.jsxIdentifier('key'),
      t.jsxExpressionContainer(
        t.templateLiteral([t.templateElement({ raw: 'body', cooked: 'body' })], [])
      )
    )
  )
  bodyDiv.openingElement.attributes.push(
    t.jsxAttribute(
      t.jsxIdentifier('dangerouslySetInnerHTML'),
      t.jsxExpressionContainer(
        t.objectExpression([
          t.objectProperty(
            t.identifier('__html'),