Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const routes = UIDLUtils.extractRoutes(uidl)
const routeDefinitions = uidl.stateDefinitions.route
/* The name should be injected only with AppRoot only then it acts as entry point,
Sending only Root because app is appended while generation of decorators*/
const params = {
tag: 'app-root',
shadow: true,
}
const decoratorAST = ASTBuilders.createComponentDecorator(params)
chunks.push({
name: componentDecoratorChunkName,
type: ChunkType.AST,
fileType: FileType.TSX,
content: [decoratorAST],
linkAfter: [importChunkName],
})
const classDeclarationAST = createClassDeclaration(routes, routeDefinitions)
chunks.push({
name: componentChunkName,
type: ChunkType.AST,
fileType: FileType.TSX,
content: classDeclarationAST,
linkAfter: [componentDecoratorChunkName],
})
return structure
}
it('Should generate chunks for routing', async () => {
const rootUIDL = projectUIDL.root as ComponentUIDL
const structure: ComponentStructure = {
uidl: rootUIDL,
options: {},
chunks: [],
dependencies: {},
}
const { dependencies, chunks } = await stencilAppRouting(structure)
expect(chunks.length).toBe(2)
expect(Object.keys(dependencies).length).toBe(2)
expect(chunks[0].name).toBe('component-decorator')
expect(chunks[0].fileType).toBe(FileType.TSX)
expect(chunks[0].type).toBe(ChunkType.AST)
expect(chunks[0].content).toBeDefined()
expect(chunks[1].name).toBe('jsx-component')
expect(chunks[1].fileType).toBe(FileType.TSX)
expect(chunks[1].type).toBe(ChunkType.AST)
expect(chunks[1].content).toBeDefined()
})
})
},
},
dynamicRefPrefix: {
prop: 'props.',
},
},
type: ChunkType.AST,
fileType: FileType.TSX,
linkAfter: ['import-local'],
content: {},
}
const decoratorChunk: ChunkDefinition = {
name: 'component-decorator',
type: ChunkType.AST,
fileType: FileType.TSX,
linkAfter: ['import-local'],
content: {
expression: {
arguments: [
{
properties: [],
},
],
},
},
}
it('generates a string chunk out of the styles, adds the className and the decorator reference', async () => {
const style = {
height: staticNode('100px'),
}
nodesLookup: {
container: {
openingElement: {
name: {
name: '',
},
attributes: [],
},
},
},
dynamicRefPrefix: {
prop: 'props.',
},
},
type: ChunkType.AST,
fileType: FileType.TSX,
linkAfter: ['import-local'],
content: {},
}
const decoratorChunk: ChunkDefinition = {
name: 'component-decorator',
type: ChunkType.AST,
fileType: FileType.TSX,
linkAfter: ['import-local'],
content: {
expression: {
arguments: [
{
properties: [],
},
],
const createStencilProjectGenerator = () => {
const prettierJS = createPrettierJSPostProcessor({ fileType: FileType.TSX })
const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })
const stencilComponentGenerator = createStencilComponentGenerator()
stencilComponentGenerator.addMapping(StencilProjectMapping as Mapping)
const routingComponentGenerator = createComponentGenerator()
routingComponentGenerator.addPlugin(stencilAppRouting)
routingComponentGenerator.addPlugin(importStatementsPlugin)
routingComponentGenerator.addPostProcessor(prettierJS)
const htmlFileGenerator = createComponentGenerator()
const prettierHTML = createPrettierHTMLPostProcessor()
htmlFileGenerator.addPostProcessor(prettierHTML)
const generator = createProjectGenerator({
components: {
const decoratorAST = ASTBuilders.createComponentDecorator(params)
chunks.push({
name: componentDecoratorChunkName,
type: ChunkType.AST,
fileType: FileType.TSX,
content: [decoratorAST],
linkAfter: [importChunkName],
})
const classDeclarationAST = createClassDeclaration(routes, routeDefinitions)
chunks.push({
name: componentChunkName,
type: ChunkType.AST,
fileType: FileType.TSX,
content: classDeclarationAST,
linkAfter: [componentDecoratorChunkName],
})
return structure
}
const createStencilComponentGenerator = ({
mappings = [],
plugins = [],
postprocessors = [],
}: GeneratorFactoryParams = {}): ComponentGenerator => {
const generator = createComponentGenerator()
const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })
const stencilStylePlugin = createCSSPlugin({
declareDependency: 'decorator',
templateStyle: 'jsx',
templateChunkName: 'jsx-component',
})
const prettierJS = createPrettierJSPostProcessor({ fileType: FileType.TSX })
generator.addMapping(StencilMapping)
mappings.forEach((mapping) => generator.addMapping(mapping))
generator.addPlugin(stencilComponentPlugin)
generator.addPlugin(stencilStylePlugin)
plugins.forEach((plugin) => generator.addPlugin(plugin))
generator.addPlugin(importStatementsPlugin)
generator.addPostProcessor(prettierJS)
postprocessors.forEach((postprocessor) => generator.addPostProcessor(postprocessor))
return generator
}
const createStencilProjectGenerator = () => {
const prettierJS = createPrettierJSPostProcessor({ fileType: FileType.TSX })
const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })
const stencilComponentGenerator = createStencilComponentGenerator()
stencilComponentGenerator.addMapping(StencilProjectMapping as Mapping)
const routingComponentGenerator = createComponentGenerator()
routingComponentGenerator.addPlugin(stencilAppRouting)
routingComponentGenerator.addPlugin(importStatementsPlugin)
routingComponentGenerator.addPostProcessor(prettierJS)
const htmlFileGenerator = createComponentGenerator()
const prettierHTML = createPrettierHTMLPostProcessor()
htmlFileGenerator.addPostProcessor(prettierHTML)
const generator = createProjectGenerator({
components: {
generator: stencilComponentGenerator,
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],
})
structure.chunks.push({
type: ChunkType.AST,
fileType: FileType.TSX,
name: componentChunkName,
meta: {
nodesLookup,
dynamicRefPrefix: jsxOptions.dynamicReferencePrefixMap,
},
const decoratorAST = ASTBuilders.createComponentDecorator(params)
structure.chunks.push({
type: ChunkType.AST,
fileType: FileType.TSX,
name: componentDecoratorChunkName,
meta: {
nodesLookup,
},
content: decoratorAST,
linkAfter: [importChunkName],
})
structure.chunks.push({
type: ChunkType.AST,
fileType: FileType.TSX,
name: componentChunkName,
meta: {
nodesLookup,
dynamicRefPrefix: jsxOptions.dynamicReferencePrefixMap,
},
content: exportAST,
linkAfter: [importChunkName],
})
return structure
}