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

)

    chunks.push({
      type: ChunkType.HAST,
      name: angularTemplateChunkName,
      fileType: FileType.HTML,
      meta: {
        nodesLookup: templateLookup,
      },
      content: templateContent,
      linkAfter: [],
    })

    const componentName = UIDLUtils.getComponentClassName(uidl)
    const params = {
      selector: UIDLUtils.createWebComponentFriendlyName(componentName),
      templateUrl: `${UIDLUtils.getComponentFileName(uidl)}.${FileType.HTML}`,
    }
    const componentDecoratorAST = ASTBuilders.createComponentDecorator(params)

    chunks.push({
      type: ChunkType.AST,
      name: componentDecoratorChunkName,
      fileType: FileType.TS,
      linkAfter: tsChunkAfter,
      content: componentDecoratorAST,
    })

    /* We need to import EventEmitter and Output in Angular to temit events to the parent
    So, to make sure if we need to import them we need to loop through all the methods and
    check if any of them are referring to the function that is passed as prop*/
    if (Object.keys(methodsObject).length > 0) {

        customElementTagName: (value) => UIDLUtils.createWebComponentFriendlyName(value),
        dependencyHandling: 'ignore',

        customElementTagName: (value) => UIDLUtils.createWebComponentFriendlyName(value),
        dependencyHandling: 'import',

      customElementTag: (name: string) => UIDLUtils.createWebComponentFriendlyName(name),
    }

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

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 decoratorAST = ASTBuilders.createComponentDecorator(params)

    structure.chunks.push({
      type: ChunkType.AST,
      fileType: FileType.TSX,
      name: componentDecoratorChunkName,
      meta: {
        nodesLookup,
      },
      content: decoratorAST,
      linkAfter: [importChunkName],
    })