How to use @teleporthq/teleport-types - 10 common examples

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

it('should explicitly send prop if style is using one prop variable', async () => {
      const styledComponentsGenerator = createReactComponentGenerator(
        ReactStyleVariation.StyledComponents
      )
      const result = await styledComponentsGenerator.generateComponent(
        ComponentWithValidSingleStlye
      )
      const jsFile = findFileByType(result.files, FileType.JS)

      expect(jsFile).toBeDefined()
      expect(jsFile.content).toContain(' props.height}')
    })

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

defaultValue: 'red',
        },
      }
      const style: UIDLStyleDefinitions = {
        'background-color': dynamicNode('prop', 'backgroundColor'),
        'border-color': dynamicNode('prop', 'borderColor'),
      }
      const uidl = component(
        'ComponentWithSingleDashCaseStyle',
        elementNode('container', {}, [staticNode('Hello')], null, style),
        propDefnitions,
        {}
      )

      const styledComponentsGenerator = createReactComponentGenerator(
        ReactStyleVariation.StyledComponents
      )
      const result = await styledComponentsGenerator.generateComponent(uidl)

      const jsFile = findFileByType(result.files, FileType.JS)

      expect(jsFile).toBeDefined()
      expect(jsFile.content).toContain(' props.backgroundColor}')
      // tslint:disable-next-line:no-invalid-template-strings
      expect(jsFile.content).toContain('border-color: ${(props) => props.borderColor}')
    })

}

    if (hasDefaultProps) {
      const defaultPropsAst = buildDefaultPropsAst(componentClassName, uidl.propDefinitions)
      chunks.push({
        type: ChunkType.AST,
        fileType: FileType.JS,
        name: defaultPropsChunkName,
        linkAfter: [componentChunkName],
        content: defaultPropsAst,
      })
      exportChunk.linkAfter.push(defaultPropsChunkName)
    }

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

    // push export of component after declarations of types
    exportChunk.linkAfter.push(typesOfPropsChunkName)

    return structure
  }

const processor: PostProcessor = (codeChunks) => {
    let jsCode
    let cssCode
    let htmlCode

    if (codeChunks[FileType.HTML]) {
      htmlCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.HTML])
    } else {
      throw new Error('No code chunk of type HTML found, vue file concatenation aborded')
    }

    if (codeChunks[FileType.JS]) {
      jsCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.JS])
    } else {
      throw new Error('No code chunk of type JS found, vue file concatenation aborded')
    }

    // if no CSS, skip the <style></style>
    if (codeChunks[FileType.CSS]) {
      cssCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.CSS])
    }

    const formattedHTMLCode = StringUtils.addSpacesToEachLine(' '.repeat(2), htmlCode)
    const vueCode = buildVueFile(formattedHTMLCode, jsCode, cssCode)

    return {
      [FileType.VUE]: vueCode,
    }

content: jssStylesArray.join('\n'),
        linkAfter: [],
      })

      /**
       * Setup an import statement for the styles
       * The name of the file is either in the meta of the component generator
       * or we fallback to the name of the component
       */
      const cssFileName = UIDLUtils.getStyleFileName(uidl)

      if (declareDependency === 'decorator' && componentDecoratorChunk) {
        const decoratorAST = componentDecoratorChunk.content
        const decoratorParam = decoratorAST.expression.arguments[0]
        ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
          `${cssFileName}.${FileType.CSS}`,
        ])
      }

      if (declareDependency === 'import') {
        dependencies.styles = {
          // styles will not be used in this case as we have importJustPath flag set
          type: 'local',
          path: `./${cssFileName}.${FileType.CSS}`,
          meta: {
            importJustPath: true,
          },
        }
      }
    }

    return structure

} else {
            // jsx object expression
            const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
              StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
            )
            ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
          }
        }
      }
    })

    if (jssStylesArray.length > 0) {
      chunks.push({
        type: ChunkType.STRING,
        name: chunkName,
        fileType: FileType.CSS,
        content: jssStylesArray.join('\n'),
        linkAfter: [],
      })

      /**
       * Setup an import statement for the styles
       * The name of the file is either in the meta of the component generator
       * or we fallback to the name of the component
       */
      const cssFileName = UIDLUtils.getStyleFileName(uidl)

      if (declareDependency === 'decorator' && componentDecoratorChunk) {
        const decoratorAST = componentDecoratorChunk.content
        const decoratorParam = decoratorAST.expression.arguments[0]
        ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
          `${cssFileName}.${FileType.CSS}`,

let htmlCode

    if (codeChunks[FileType.HTML]) {
      htmlCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.HTML])
    } else {
      throw new Error('No code chunk of type HTML found, vue file concatenation aborded')
    }

    if (codeChunks[FileType.JS]) {
      jsCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.JS])
    } else {
      throw new Error('No code chunk of type JS found, vue file concatenation aborded')
    }

    // if no CSS, skip the <style></style>
    if (codeChunks[FileType.CSS]) {
      cssCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.CSS])
    }

    const formattedHTMLCode = StringUtils.addSpacesToEachLine(' '.repeat(2), htmlCode)
    const vueCode = buildVueFile(formattedHTMLCode, jsCode, cssCode)

    return {
      [FileType.VUE]: vueCode,
    }
  }