Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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,
}
}