Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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) {
const shouldImportEventEmitter = Object.keys(methodsObject).some((method) => {
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 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])
}
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)
export const createPrettierHTMLPostProcessor = (options: PostProcessorFactoryOptions = {}) => {
const fileType = options.fileType || FileType.HTML
const formatOptions = { ...Constants.PRETTIER_CONFIG, ...options.formatOptions }
const processor: PostProcessor = (codeChunks) => {
if (codeChunks[fileType]) {
codeChunks[fileType] = format(codeChunks[fileType], {
...formatOptions,
htmlWhitespaceSensitivity: 'ignore',
plugins: [parserHTML],
parser: 'html',
})
} else {
console.warn('No code chunk of type HTML found, prettier-html did not perform any operation')
}
return codeChunks
}
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,
},
methodsObject
const getFileName = (
fileType: string,
fileName: string,
styleFileName: string,
templateFileName: string
) => {
if (fileType === FileType.CSS) {
return styleFileName || fileName
}
if (fileType === FileType.HTML) {
return templateFileName || fileName
}
return fileName
}
if (asset.options && asset.options.iconType) {
HASTUtils.addAttributeToNode(iconTag, 'type', asset.options.iconType)
}
if (asset.options && asset.options.iconSizes) {
HASTUtils.addAttributeToNode(iconTag, 'sizes', asset.options.iconSizes)
}
HASTUtils.addChildNode(headNode, iconTag)
}
})
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'],
},
],
}
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
}