Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
export const resolveNavlinks = (uidlNode: UIDLNode, routesDefinition: UIDLStateDefinition) => {
UIDLUtils.traverseElements(uidlNode, (element) => {
if (element.elementType === 'navlink') {
const transitionAttribute = element.attrs.transitionTo
if (!transitionAttribute) {
// Fallback for when transitionTo is not present
console.warn(
`transitionTo was missing from element: '${element.elementType}'. Falling back to navlink: '/'`
)
element.attrs.transitionTo = {
type: 'static',
content: '/',
}
return
}
if (transitionAttribute.type !== 'static') {
export const createNodesLookup = (node: UIDLNode, lookup: ElementsLookup) => {
UIDLUtils.traverseElements(node, (element) => {
// Element name is stored as a lower case string in the lookup
const elementName = element.name.toLowerCase()
if (!lookup[elementName]) {
lookup[elementName] = {
count: 0,
nextKey: '0',
}
}
lookup[elementName].count++
const newCount = lookup[elementName].count
if (newCount > 9 && isPowerOfTen(newCount)) {
// Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
// nextKey will start either from: '0', '00', '000', etc.
lookup[elementName].nextKey = '0' + lookup[elementName].nextKey
}
const reactStyledJSXPlugin: ComponentPlugin = async (structure) => {
const { uidl, chunks } = structure
const { node } = uidl
const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
if (!componentChunk) {
return structure
}
const jsxNodesLookup = componentChunk.meta.nodesLookup
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
const styleJSXString: string[] = []
UIDLUtils.traverseElements(node, (element) => {
const { style, key } = element
if (style && Object.keys(style).length > 0) {
const root = jsxNodesLookup[key]
const className = StringUtils.camelCaseToDashCase(key)
// Generating the string templates for the dynamic styles
const styleRules = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
if (styleValue.content.referenceType === 'prop') {
return `\$\{${propsPrefix}.${styleValue.content.id}\}`
}
throw new Error(
`Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
)
})
styleJSXString.push(StyleBuilders.createCSSClass(className, styleRules))
ASTUtils.addClassStringOnJSXTag(root, className)
}
const inlineStylesPlugin: ComponentPlugin = async (structure) => {
const { uidl, chunks } = structure
const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
if (!componentChunk) {
return structure
}
UIDLUtils.traverseElements(uidl.node, (element) => {
const { style, key } = element
if (style && Object.keys(style).length > 0) {
const jsxASTTag = componentChunk.meta.nodesLookup[key]
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
if (!jsxASTTag) {
return
}
// Nested styles are ignored
const rootStyles = UIDLUtils.cleanupNestedStyles(style)
const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
)
ASTUtils.addAttributeToJSXTag(jsxASTTag, 'style', inlineStyles)
const reactStyledComponentsPlugin: ComponentPlugin = async (structure) => {
const { uidl, chunks, dependencies } = structure
const { node, name } = uidl
const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
if (!componentChunk) {
return structure
}
const jsxNodesLookup = componentChunk.meta.nodesLookup as Record
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
const jssStyleMap: Record = {}
UIDLUtils.traverseElements(node, (element) => {
let { style } = element
const { key, elementType } = element
if (style && Object.keys(style).length > 0) {
const root = jsxNodesLookup[key]
let className = StringUtils.dashCaseToUpperCamelCase(key)
// Styled components might create an element that clashes with native element (Text, View, Image, etc.)
if (
illegalComponentNames.includes(className) ||
StringUtils.dashCaseToUpperCamelCase(key) === name ||
Object.keys(dependencies).includes(className)
) {
className = `Styled${className}`
}
const timesReferred = countPropReferences(style, 0)
const cssModulesPlugin: ComponentPlugin = async (structure) => {
const { uidl, chunks, dependencies } = structure
const componentChunk = chunks.filter((chunk) => chunk.name === componentChunkName)[0]
if (!componentChunk) {
throw new Error(
`JSX based component chunk with name ${componentChunkName} was required and not found.`
)
}
const cssClasses: string[] = []
const astNodesLookup = componentChunk.meta.nodesLookup || {}
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
UIDLUtils.traverseElements(uidl.node, (element) => {
const { style, key } = element
if (style) {
const root = astNodesLookup[key]
const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
if (Object.keys(staticStyles).length > 0) {
const className = StringUtils.camelCaseToDashCase(key)
const jsFriendlyClassName = StringUtils.dashCaseToCamelCase(className)
cssClasses.push(
StyleBuilders.createCSSClass(
className,
StyleUtils.getContentOfStyleObject(staticStyles)
)
)
Object.keys(components).forEach((componentKey) => {
const component = components[componentKey]
const componentPath = UIDLUtils.getComponentFolderPath(component)
const fromPath = strategy.components.path.concat(componentPath)
UIDLUtils.traverseElements(component.node, (element) => {
if (isLocalDependency(element)) {
setLocalDependencyPath(element, components, fromPath, strategy.components.path)
}
})
})
}
const cssModulesPlugin: ComponentPlugin = async (structure) => {
const { uidl, chunks, dependencies } = structure
const componentChunk = chunks.filter((chunk) => chunk.name === componentChunkName)[0]
if (!componentChunk) {
throw new Error(
`JSX based component chunk with name ${componentChunkName} was required and not found.`
)
}
const cssClasses: string[] = []
const astNodesLookup = componentChunk.meta.nodesLookup || {}
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
UIDLUtils.traverseElements(uidl.node, (element) => {
const { style, key } = element
if (style) {
const root = astNodesLookup[key]
const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
if (Object.keys(staticStyles).length > 0) {
const className = StringUtils.camelCaseToDashCase(key)
const jsFriendlyClassName = StringUtils.dashCaseToCamelCase(className)
cssClasses.push(
StyleBuilders.createCSSClass(
className,
StyleUtils.getContentOfStyleObject(staticStyles)
)
)
const reactJSSPlugin: ComponentPlugin = async (structure) => {
const { uidl, chunks, dependencies } = structure
const { node } = uidl
const componentChunk = chunks.find((chunk) => chunk.name === componentChunkName)
if (!componentChunk) {
return structure
}
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
const jsxNodesLookup = componentChunk.meta.nodesLookup
const jssStyleMap: Record = {}
UIDLUtils.traverseElements(node, (element) => {
const { style, key } = element
if (style && Object.keys(style).length > 0) {
const root = jsxNodesLookup[key]
const className = StringUtils.camelCaseToDashCase(key)
jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
if (styleValue.content.referenceType === 'prop') {
return new ParsedASTNode(
ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
)
}
throw new Error(
`Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
)
})
ASTUtils.addDynamicAttributeToJSXTag(
root,
export const checkComponentExistence = (input: ProjectUIDL) => {
const errors: string[] = []
const components = Object.keys(input.components)
UIDLUtils.traverseElements(input.root.node, (element) => {
if (
element.dependency &&
element.dependency.type === 'local' &&
!components.includes(element.elementType)
) {
const errorMsg = `\nThe component "${element.elementType}" is not defined in the UIDL's component section.`
errors.push(errorMsg)
}
})
return errors
}