@teleporthq/teleport-shared 0.41.0 → 0.42.0

package/src/utils/uidl-utils.ts

@@ -32,7 +32,10 @@ export const extractRoutes = (rootComponent: UIDLRootComponent) => {
 
   // Look for conditional nodes in the first level children of the root element
   return rootElement.children.filter(
-    (child) => child.type === 'conditional' && child.content.reference.content.id === 'route'
+    (child) =>
+      child.type === 'conditional' &&
+      child.content.reference.type === 'dynamic' &&
+      child.content.reference.content.id === 'route'
   ) as UIDLConditionalNode[]
 }
 
@@ -143,6 +146,10 @@ export const prefixAssetsPath = (
   const assetName = basename(originalString)
   const decodedAssetName = decodeURIComponent(assetName)
 
+  // Extract the full path from the original string (normalize to remove leading slash)
+  const fullPath = originalString.startsWith('/') ? originalString.slice(1) : originalString
+  const decodedFullPath = decodeURIComponent(fullPath)
+
   /*
     If the value is missing from the mapping, it means
      - asset is missing in the project packer
@@ -150,9 +157,14 @@ export const prefixAssetsPath = (
 
     Note: We need to check for decoded asset name as well as for some special characters such as katakana / kanjis / hiraganas
     the src / url leading to the asset can be encoded and we need to check the decoded version against the asset mapping
+
+    Try full-path lookup first (to handle duplicate filenames in different folders),
+    then fall back to basename-only (for backward compatibility)
   */
 
   if (
+    !(typeof mappings[fullPath] === 'string') &&
+    !(typeof mappings[decodedFullPath] === 'string') &&
     !(typeof mappings[assetName] === 'string') &&
     !(typeof mappings[decodedAssetName] === 'string')
   ) {
@@ -161,10 +173,17 @@ export const prefixAssetsPath = (
 
   /*
     need to use either the original or decoded assetName to retrieve its mapping if there is one
+    Priority: fullPath > decodedFullPath > assetName > decodedAssetName
   */
 
   const assetNameUsedForMapping =
-    typeof mappings[assetName] === 'string' ? assetName : decodedAssetName
+    typeof mappings[fullPath] === 'string'
+      ? fullPath
+      : typeof mappings[decodedFullPath] === 'string'
+      ? decodedFullPath
+      : typeof mappings[assetName] === 'string'
+      ? assetName
+      : decodedAssetName
 
   /*
     If the value from the mapping is an empty string
@@ -195,14 +214,35 @@ export const traverseNodes = (
   fn: (node: UIDLNode | UIDLComponentStyleReference, parentNode: UIDLNode) => void,
   parent: UIDLNode | null = null
 ) => {
+  if (!node.type) {
+    return
+  }
+
   fn(node, parent)
 
   switch (node.type) {
     case 'element':
+      // Check if this element node is wrapping a data-source node
+      // This happens when node.content has a 'type' property that is a data-source type
+      if (
+        node.content &&
+        typeof node.content === 'object' &&
+        'type' in node.content &&
+        (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')
+      ) {
+        // Treat the entire node.content as a data-source node
+        traverseNodes(node.content as any, fn, node)
+        break
+      }
+
       const { attrs, children, style, abilities, referencedStyles } = node.content
       if (attrs) {
         Object.keys(attrs).forEach((attrKey) => {
-          traverseNodes(attrs[attrKey], fn, node)
+          const attr = attrs[attrKey]
+          if (attr.type === 'object') {
+            return
+          }
+          traverseNodes(attr, fn, node)
         })
       }
 
@@ -244,6 +284,9 @@ export const traverseNodes = (
       if (node.content.nodes.empty) {
         traverseNodes(node.content.nodes.empty, fn)
       }
+      if (node.content.nodes.loading) {
+        traverseNodes(node.content.nodes.loading, fn)
+      }
       break
 
     case 'cms-item':
@@ -256,6 +299,54 @@ export const traverseNodes = (
       }
       break
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseNodes(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseNodes(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseNodes(node.content.mappings[key], fn)
+      })
+      break
+
+    case 'data-source-item':
+      if (node.content.nodes?.success) {
+        traverseNodes(node.content.nodes.success, fn)
+      }
+      if (node.content.nodes?.error) {
+        traverseNodes(node.content.nodes.error, fn)
+      }
+      if (node.content.nodes?.loading) {
+        traverseNodes(node.content.nodes.loading, fn)
+      }
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          traverseNodes(child, fn, node)
+        })
+      }
+      break
+
+    case 'data-source-list':
+      if (node.content.nodes?.success) {
+        traverseNodes(node.content.nodes.success, fn)
+      }
+      if (node.content.nodes?.error) {
+        traverseNodes(node.content.nodes.error, fn)
+      }
+      if (node.content.nodes?.loading) {
+        traverseNodes(node.content.nodes.loading, fn)
+      }
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          traverseNodes(child, fn, node)
+        })
+      }
+      break
+
     case 'repeat':
       traverseNodes(node.content.node, fn, node)
       traverseNodes(node.content.dataSource, fn, node)
@@ -294,6 +385,18 @@ export const traverseResources = (
 ) => {
   switch (node.type) {
     case 'element':
+      // Check if this element node is wrapping a data-source node
+      if (
+        node.content &&
+        typeof node.content === 'object' &&
+        'type' in node.content &&
+        (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')
+      ) {
+        // Treat the entire node.content as a data-source node
+        traverseResources(node.content as any, fn)
+        break
+      }
+
       const { children } = node.content
 
       if (children) {
@@ -318,6 +421,9 @@ export const traverseResources = (
       if (node.content.nodes.empty) {
         traverseResources(node.content.nodes.empty, fn)
       }
+      if (node.content.nodes.loading) {
+        traverseResources(node.content.nodes.loading, fn)
+      }
       break
 
     case 'cms-item':
@@ -330,6 +436,44 @@ export const traverseResources = (
       }
       break
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseResources(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseResources(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseResources(node.content.mappings[key], fn)
+      })
+      break
+
+    case 'data-source-item':
+      if (node.content.nodes?.success) {
+        traverseResources(node.content.nodes.success, fn)
+      }
+      if (node.content.nodes?.error) {
+        traverseResources(node.content.nodes.error, fn)
+      }
+      if (node.content.nodes?.loading) {
+        traverseResources(node.content.nodes.loading, fn)
+      }
+      break
+
+    case 'data-source-list':
+      if (node.content.nodes?.success) {
+        traverseResources(node.content.nodes.success, fn)
+      }
+      if (node.content.nodes?.error) {
+        traverseResources(node.content.nodes.error, fn)
+      }
+      if (node.content.nodes?.loading) {
+        traverseResources(node.content.nodes.loading, fn)
+      }
+      break
+
     case 'repeat':
       traverseResources(node.content.node, fn)
       break
@@ -360,19 +504,45 @@ export const traverseResources = (
 const traverseStyleObject = (style: UIDLStyleDefinitions) => {
   Object.keys(style).forEach((styleKey) => {
     const styleValue = style[styleKey]
-    // TODO: cross-check the support for the strings as content for styles
     if (styleValue.type !== 'static' && styleValue.type !== 'dynamic') {
-      throw new Error(`We support only 'static' and 'dynamic' content for styles`)
+      throw new Error(`We support only 'static' and 'dynamic' content for styles \n
+        Received \n
+        ${JSON.stringify(styleValue, null, 2)}`)
     }
   })
 }
 
 // Parses a node structure recursively and applies a function to each UIDLElement instance
 export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => void) => {
+  if (!node || !node.type) {
+    return
+  }
+
   switch (node.type) {
     case 'element':
+      // Check if this element node is wrapping a data-source node
+      if (
+        node.content &&
+        typeof node.content === 'object' &&
+        'type' in node.content &&
+        (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')
+      ) {
+        // Treat the entire node.content as a data-source node
+        traverseElements(node.content as any, fn)
+        break
+      }
+
       fn(node.content)
 
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
       if (node.content.children) {
         node.content.children.forEach((child) => {
           traverseElements(child, fn)
@@ -388,6 +558,16 @@ export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => v
       if (node.content.nodes.loading) {
         traverseElements(node.content.nodes.loading, fn)
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
       break
 
     case 'cms-list-repeater':
@@ -395,6 +575,9 @@ export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => v
       if (node.content.nodes.empty) {
         traverseElements(node.content.nodes.empty, fn)
       }
+      if (node.content.nodes.loading) {
+        traverseElements(node.content.nodes.loading, fn)
+      }
 
       break
 
@@ -406,6 +589,80 @@ export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => v
       if (node.content.nodes.loading) {
         traverseElements(node.content.nodes.loading, fn)
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
+      break
+
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseElements(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseElements(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseElements(node.content.mappings[key], fn)
+      })
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
+      break
+
+    case 'data-source-item':
+      if (node.content.nodes?.success) {
+        traverseElements(node.content.nodes.success, fn)
+      }
+      if (node.content.nodes?.error) {
+        traverseElements(node.content.nodes.error, fn)
+      }
+      if (node.content.nodes?.loading) {
+        traverseElements(node.content.nodes.loading, fn)
+      }
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+      break
+
+    case 'data-source-list':
+      if (node.content.nodes?.success) {
+        traverseElements(node.content.nodes.success, fn)
+      }
+      if (node.content.nodes?.error) {
+        traverseElements(node.content.nodes.error, fn)
+      }
+      if (node.content.nodes?.loading) {
+        traverseElements(node.content.nodes.loading, fn)
+      }
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
       break
 
     case 'repeat':
@@ -431,18 +688,39 @@ export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => v
 
     default:
       throw new Error(
-        `traverseElements was given an unsupported node type : ${node.type}, ${JSON.stringify(
-          node,
-          null,
-          2
-        )}`
+        `traverseElements was given an unsupported node type : \n ${JSON.stringify(node, null, 2)}`
       )
   }
 }
 
 export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent) => void) => {
+  if (!node || !node.type) {
+    return
+  }
+
   switch (node.type) {
     case 'element':
+      // Check if this element node is wrapping a data-source node
+      if (
+        node.content &&
+        typeof node.content === 'object' &&
+        'type' in node.content &&
+        (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')
+      ) {
+        // Treat the entire node.content as a data-source node
+        traverseRepeats(node.content as any, fn)
+        break
+      }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+
       if (node.content.children) {
         node.content.children.forEach((child) => {
           traverseRepeats(child, fn)
@@ -459,6 +737,16 @@ export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent)
       if (node.content.nodes.loading) {
         traverseRepeats(node.content.nodes.loading, fn)
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+
       break
 
     case 'cms-list-repeater':
@@ -466,17 +754,55 @@ export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent)
       if (node.content.nodes.empty) {
         traverseRepeats(node.content.nodes.empty, fn)
       }
+      if (node.content.nodes.loading) {
+        traverseRepeats(node.content.nodes.loading, fn)
+      }
 
       break
 
     case 'cms-item':
       traverseRepeats(node.content.nodes.success, fn)
+
       if (node.content.nodes.error) {
         traverseRepeats(node.content.nodes.error, fn)
       }
+
       if (node.content.nodes.loading) {
         traverseRepeats(node.content.nodes.loading, fn)
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+      break
+
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseRepeats(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseRepeats(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseRepeats(node.content.mappings[key], fn)
+      })
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+
       break
 
     case 'repeat':
@@ -495,6 +821,30 @@ export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent)
       }
       break
 
+    case 'data-source-item':
+      if ((node as any).content.nodes?.success) {
+        traverseRepeats((node as any).content.nodes.success, fn)
+      }
+      if ((node as any).content.nodes?.error) {
+        traverseRepeats((node as any).content.nodes.error, fn)
+      }
+      if ((node as any).content.nodes?.loading) {
+        traverseRepeats((node as any).content.nodes.loading, fn)
+      }
+      break
+
+    case 'data-source-list':
+      if ((node as any).content.nodes?.success) {
+        traverseRepeats((node as any).content.nodes.success, fn)
+      }
+      if ((node as any).content.nodes?.error) {
+        traverseRepeats((node as any).content.nodes.error, fn)
+      }
+      if ((node as any).content.nodes?.loading) {
+        traverseRepeats((node as any).content.nodes.loading, fn)
+      }
+      break
+
     case 'static':
     case 'dynamic':
     case 'raw':
@@ -518,6 +868,7 @@ interface SplitResponse {
   dynamicStyles: UIDLStyleDefinitions
   tokenStyles: UIDLStyleDefinitions
 }
+
 export const splitDynamicAndStaticStyles = (
   style: UIDLStyleDefinitions | Record<string, UIDLStyleSheetContent>
 ): SplitResponse => {
@@ -672,13 +1023,13 @@ export const transformStylesAssignmentsToJson = (
         return acc
       }
 
-      if (type === 'dynamic') {
+      if (type === 'dynamic' && content.referenceType !== 'global') {
         if (['state', 'prop'].includes(content?.referenceType)) {
           acc[key] = {
             type,
             content: {
               ...content,
-              id: StringUtils.createStateOrPropStoringValue(content.id),
+              id: generateIdWithRefPath(content.id, content.refPath),
             },
           }
         } else {
@@ -701,6 +1052,23 @@ export const transformStylesAssignmentsToJson = (
   return newStyleObject
 }
 
+export const generateIdWithRefPath = (contentId: string, refPath?: string[]) => {
+  let processedId = contentId
+  if (refPath) {
+    const processedRefPath = refPath.reduce((acc, path) => {
+      return `${acc}?.['${path}']`
+    }, '')
+
+    // This is a bit ugly, but in some cases props are parsed twice or already generated.
+    // To avoid possible bugs, this should be a good safety measure
+    if (!processedId.includes(processedRefPath)) {
+      processedId = `${processedId}${processedRefPath}`
+    }
+  }
+
+  return StringUtils.createStateOrPropStoringValue(processedId)
+}
+
 /*
   All the props passed to the components are transformed to a unique case
   to minimize the collision of using cameCalse in one place and dashCase in
@@ -728,47 +1096,64 @@ export const transformAttributesAssignmentsToJson = (
     }
 
     if (!Array.isArray(attributeContent) && entityType === 'object') {
-      // if this value is already properly declared, make sure it is not
       const { type } = attributeContent as UIDLAttributeValue
-      if (['static', 'import', 'raw', 'expr'].indexOf(type as string) !== -1) {
-        const propKey = isLocalComponent ? StringUtils.createStateOrPropStoringValue(key) : key
-        acc[propKey] = attributeContent as UIDLAttributeValue
-        return acc
-      }
 
-      if (type === 'comp-style') {
-        acc[key] = {
-          type: 'comp-style',
-          content: StringUtils.createStateOrPropStoringValue(
-            (attributeContent as UIDLComponentStyleReference).content
-          ),
+      switch (type) {
+        case 'import':
+        case 'static':
+        case 'raw':
+        case 'expr': {
+          const propKey = isLocalComponent ? StringUtils.createStateOrPropStoringValue(key) : key
+          acc[propKey] = attributeContent as UIDLAttributeValue
+          return acc
         }
-        return acc
-      }
 
-      const { content } = attributeContent as UIDLDynamicReference
-      if (type === 'dynamic') {
-        if (['state', 'prop'].includes(content?.referenceType)) {
+        case 'comp-style': {
           acc[key] = {
-            type,
-            content: {
-              ...content,
-              id: StringUtils.createStateOrPropStoringValue(content.id),
-            },
+            type: 'comp-style',
+            content: StringUtils.createStateOrPropStoringValue(
+              (attributeContent as UIDLComponentStyleReference).content
+            ),
           }
-        } else {
+          return acc
+        }
+
+        case 'dynamic': {
+          const { content } = attributeContent as UIDLDynamicReference
+          // global id's dont need to be transformed. As they are constants and each one is handled by the generator
+          // depending on the context and the framework.
+          if (
+            ['state', 'prop'].includes(content?.referenceType) &&
+            content.referenceType !== 'global'
+          ) {
+            acc[key] = {
+              type,
+              content: {
+                ...content,
+                id: generateIdWithRefPath(content.id, content.refPath),
+              },
+            }
+          } else {
+            acc[key] = attributeContent as UIDLAttributeValue
+          }
+          return acc
+        }
+
+        case 'object':
+        case 'element':
           acc[key] = attributeContent as UIDLAttributeValue
+          return acc
+
+        default: {
+          throw new Error(
+            `transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(
+              attributeContent,
+              null,
+              2
+            )}`
+          )
         }
-        return acc
       }
-
-      throw new Error(
-        `transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(
-          attributeContent,
-          null,
-          2
-        )}`
-      )
     }
   }, newAttrObject)
 
@@ -827,6 +1212,9 @@ export const removeChildNodes = (
       if (node.content.nodes.empty) {
         removeChildNodes(node.content.nodes.empty, criteria)
       }
+      if (node.content.nodes.loading) {
+        removeChildNodes(node.content.nodes.loading, criteria)
+      }
 
       break
     case 'cms-item':
@@ -839,6 +1227,20 @@ export const removeChildNodes = (
       }
       break
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        removeChildNodes(node.content.nodes.fallback, criteria)
+      }
+
+      if (node.content.nodes?.error) {
+        removeChildNodes(node.content.nodes.error, criteria)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        removeChildNodes(node.content.mappings[key], criteria)
+      })
+      break
+
     case 'conditional':
       removeChildNodes(node.content.node, criteria)
       break