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 extractPageOptions = (
routeDefinitions: UIDLStateDefinition,
routeName: string,
useFileNameForNavigation = false
): UIDLPageOptions => {
const isHomePage = routeDefinitions.defaultValue === routeName
const pageDefinitions = routeDefinitions.values || []
const pageDefinition = pageDefinitions.find((stateDef) => stateDef.value === routeName)
// If no meta object is defined, the stateName is used
const defaultPageName = 'AppPage'
const friendlyStateName = StringUtils.removeIllegalCharacters(routeName) || defaultPageName // remove space, leading numbers, etc.
const friendlyComponentName = StringUtils.dashCaseToUpperCamelCase(friendlyStateName) // component name in UpperCamelCase
const friendlyFileName = StringUtils.camelCaseToDashCase(friendlyStateName) // file name in dash-case
let pageOptions: UIDLPageOptions = {
// default values extracted from state name
fileName: friendlyFileName,
componentName: friendlyComponentName,
navLink: '/' + (isHomePage ? '' : friendlyFileName),
}
if (pageDefinition && pageDefinition.pageOptions) {
// The pageDefinition values have precedence, defaults are fallbacks
pageOptions = {
...pageOptions,
...pageDefinition.pageOptions,
}
}
UIDLUtils.traverseElements(node, (element) => {
const { style, key } = element
if (!style) {
return
}
const { staticStyles, dynamicStyles } = UIDLUtils.splitDynamicAndStaticStyles(style)
const root = templateLookup[key]
if (Object.keys(staticStyles).length > 0) {
const elementClassName = StringUtils.camelCaseToDashCase(key)
const componentFileName = UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
const className = forceScoping // when the framework doesn't provide automating scoping for classNames
? `${componentFileName}-${elementClassName}`
: elementClassName
jssStylesArray.push(
StyleBuilders.createCSSClass(className, StyleUtils.getContentOfStyleObject(staticStyles))
)
if (templateStyle === 'html') {
HASTUtils.addClassToNode(root, className)
} else {
ASTUtils.addClassStringOnJSXTag(root, className, classAttributeName)
}
}
Object.keys(components).forEach((componentKey) => {
const component = components[componentKey]
// values coming from the input UIDL
const { fileName, componentClassName } = component.outputOptions || {
fileName: '',
componentClassName: '',
}
const defaultComponentName = 'AppComponent'
const friendlyName = StringUtils.removeIllegalCharacters(component.name) || defaultComponentName
const friendlyFileName = fileName || StringUtils.camelCaseToDashCase(friendlyName) // ex: primary-button
const friendlyComponentName =
componentClassName || StringUtils.dashCaseToUpperCamelCase(friendlyName) // ex: PrimaryButton
const folderPath = UIDLUtils.getComponentFolderPath(component)
const {
customComponentFileName,
customStyleFileName,
customTemplateFileName,
} = componentStrategyOptions
// If the component has its own folder, name is 'index' or an override from the strategy.
// In this case, the file name (dash converted) is used as the folder name
if (componentStrategyOptions.createFolderForEachComponent) {
component.outputOptions = {
componentClassName: friendlyComponentName,
fileName: (customComponentFileName && customComponentFileName(friendlyFileName)) || 'index',
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 resolveDependency = (
mappedElement: UIDLElement,
uidlDependency?: UIDLDependency,
localDependenciesPrefix = './'
) => {
// If dependency is specified at UIDL level it will have priority over the mapping one
const nodeDependency = uidlDependency || mappedElement.dependency
if (nodeDependency && nodeDependency.type === 'local') {
// When a dependency is specified without a path, we infer it is a local import.
// ex: PrimaryButton component should be written in a file called primary-button
// This is just a fallback for when the dependency path is not set by a project generator
const componentName = mappedElement.elementType
const componentFileName = StringUtils.camelCaseToDashCase(componentName)
// concatenate a trailing slash in case it's missing
if (localDependenciesPrefix[localDependenciesPrefix.length - 1] !== '/') {
localDependenciesPrefix = localDependenciesPrefix + '/'
}
nodeDependency.path = nodeDependency.path || localDependenciesPrefix + componentFileName
}
return nodeDependency
}
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)
)
)
// When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
const classNameIsJSFriendly = className === jsFriendlyClassName
const classReferenceIdentifier =
camelCaseClassNames || classNameIsJSFriendly
? `styles.${jsFriendlyClassName}`
: `styles['${className}']`
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,
classAttributeName,
`classes['${className}']`,
propsPrefix
)
importsAST = Object.keys(components).map((component) => {
return t.importDeclaration(
[t.importDefaultSpecifier(t.identifier(StringUtils.capitalize(component)))],
t.stringLiteral(`./${StringUtils.camelCaseToDashCase(component)}`)
)
})
Object.keys(styles).forEach((item) => {
if (typeof styles[item] === 'string') {
style = `${style}
${StringUtils.camelCaseToDashCase(item)}: ${styles[item]};`
} else {
style = `${style}
${item} {
${mapStyles(styles[item])}
};`
}
})
return style