How to use the @teleporthq/teleport-types.ChunkType.HAST function in @teleporthq/teleport-types

it('outputs two AST chunks with the corresponding chunk names', async () => {
    const result = await plugin(structure)

    // no change to the input UIDL
    expect(JSON.stringify(result.uidl)).toBe(JSON.stringify(structure.uidl))

    // AST chunks created
    expect(result.chunks.length).toBe(2)
    expect(result.chunks[0].type).toBe(ChunkType.HAST)
    expect(result.chunks[0].content).toBeDefined()
    expect(result.chunks[0].name).toBe('component-html')
    expect(result.chunks[1].type).toBe(ChunkType.AST)
    expect(result.chunks[1].content).toBeDefined()
    expect(result.chunks[1].name).toBe('component-js')

    // Dependencies
    expect(Object.keys(result.dependencies).length).toBe(0)
  })
})

it('outputs two AST chunks with the corresponding chunk names', async () => {
    const structure: ComponentStructure = {
      chunks: [],
      options: {},
      uidl: component('Test', elementNode('container')),
      dependencies: {},
    }
    const result = await plugin(structure)

    // no change to the input UIDL
    expect(JSON.stringify(result.uidl)).toBe(JSON.stringify(structure.uidl))

    // AST chunks created
    expect(result.chunks.length).toBe(3)
    expect(result.chunks[0].type).toBe(ChunkType.HAST)
    expect(result.chunks[0].content).toBeDefined()
    expect(result.chunks[0].name).toBe('template-chunk')
    expect(result.chunks[1].type).toBe(ChunkType.AST)
    expect(result.chunks[1].content).toBeDefined()
    expect(result.chunks[1].name).toBe('component-decorator')
    expect(result.chunks[2].type).toBe(ChunkType.AST)
    expect(result.chunks[2].content).toBeDefined()
    expect(result.chunks[2].name).toBe('angular-ts-chunk')
  })

elementNode('container'),
        {},
        {
          isVisible: {
            type: 'boolean',
            defaultValue: false,
          },
        }
      ),
      dependencies: {},
    }
    const result = await plugin(structure)

    // AST chunks created
    expect(result.chunks.length).toBe(3)
    expect(result.chunks[0].type).toBe(ChunkType.HAST)
    expect(result.chunks[0].content).toBeDefined()
    expect(result.chunks[0].name).toBe('template-chunk')
    expect(result.chunks[1].type).toBe(ChunkType.AST)
    expect(result.chunks[1].content).toBeDefined()
    expect(result.chunks[1].name).toBe('component-decorator')
    expect(result.chunks[2].type).toBe(ChunkType.AST)
    expect(result.chunks[2].content).toBeDefined()
    expect(result.chunks[2].name).toBe('angular-ts-chunk')
  })
})

import { generator as babelCodeGenerator } from './generators/js-ast-to-code'
import { generator as htmlGenerator } from './generators/html-to-string'
import {
  ChunkDefinition,
  CodeGeneratorFunction,
  ChunkContent,
  ChunkType,
} from '@teleporthq/teleport-types'

export default class Builder {
  private chunkDefinitions: ChunkDefinition[] = []

  private generators: { [key: string]: CodeGeneratorFunction } = {
    [ChunkType.AST]: babelCodeGenerator,
    [ChunkType.HAST]: htmlGenerator,
    [ChunkType.STRING]: (str: string) => str, // no-op for string chunks
  }

  constructor(chunkDefinitions: ChunkDefinition[] = []) {
    this.chunkDefinitions = chunkDefinitions
  }

  /**
   * Links all chunks together based on their requirements. Returns an array
   * of ordered chunk names which need to be compiled and glued together.
   */
  public link(chunkDefinitions: ChunkDefinition[] = []): string {
    const chunks = chunkDefinitions || this.chunkDefinitions
    if (chunks.length <= 0) {
      return ''
    }

describe('on html template based components', () => {
    const plugin = createCSSPlugin({ templateChunkName: 'template' })
    const componentChunk: ChunkDefinition = {
      name: 'template',
      meta: {
        nodesLookup: {
          container: {
            type: 'element',
            tagName: 'div',
            properties: {},
          },
        },
      },
      fileType: FileType.HTML,
      type: ChunkType.HAST,
      linkAfter: [],
      content: {},
    }

    it('generates no chunk if no styles exist', async () => {
      const uidlSample = component('CSSPlugin', elementNode('container'))
      const structure: ComponentStructure = {
        uidl: uidlSample,
        options: {},
        chunks: [componentChunk],
        dependencies: {},
      }

      const { chunks } = await plugin(structure)

      expect(chunks.length).toBe(1)

eventBinding: (value) => `@${value}`,
        valueBinding: (value) => `:${value}`,
        eventEmmitter: (value) => `this.$emit('${value}')`,
        conditionalAttr: 'v-if',
        repeatAttr: 'v-for',
        repeatIterator: (iteratorName, iteratedCollection, useIndex) => {
          const iterator = useIndex ? `(${iteratorName}, index)` : iteratorName
          return `${iterator} in ${iteratedCollection}`
        },
        customElementTagName: (value) => UIDLUtils.createWebComponentFriendlyName(value),
        dependencyHandling: 'import',
      }
    )

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

    const stateObject = uidl.stateDefinitions ? extractStateObject(uidl.stateDefinitions) : {}
    const jsContent = generateVueComponentJS(
      uidl,
      Object.keys(dependencies),
      {
        ...stateObject,
        ...dataObject,

valueBinding: (value, node?: UIDLElementNode) =>
          node && node.content.dependency ? `[${value}]` : `[attr.${value}]`,
        eventEmmitter: (value) => `this.$emit('${value}')`,
        conditionalAttr: '*ngIf',
        repeatAttr: '*ngFor',
        repeatIterator: (iteratorName, iteratedCollection, useIndex) => {
          const index = useIndex ? `; index as index` : ''
          return `let ${iteratorName} of ${iteratedCollection}${index}`
        },
        customElementTagName: (value) => UIDLUtils.createWebComponentFriendlyName(value),
        dependencyHandling: 'ignore',
      }
    )

    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)

if (customHeadContent) {
    HASTUtils.addTextNode(headNode, customHeadContent)
  }

  const chunks: Record = {
    [FileType.HTML]: [
      {
        name: 'doctype',
        type: ChunkType.STRING,
        fileType: FileType.HTML,
        content: '',
        linkAfter: [],
      },
      {
        name: 'html-node',
        type: ChunkType.HAST,
        fileType: FileType.HTML,
        content: htmlNode,
        linkAfter: ['doctype'],
      },
    ],
  }

  return chunks
}