@teleporthq/teleport-shared 0.27.2 → 0.27.3-alpha.2

package/src/index.ts

@@ -1,5 +1,6 @@
 import * as Constants from './constants'
 import * as StringUtils from './utils/string-utils'
 import * as UIDLUtils from './utils/uidl-utils'
+import * as GenericUtils from './utils/generic'
 
-export { Constants, StringUtils, UIDLUtils }
+export { Constants, StringUtils, UIDLUtils, GenericUtils }

package/src/utils/generic.ts

@@ -0,0 +1,68 @@
+export const generateLocalDependenciesPrefix = (fromPath: string[], toPath: string[]): string => {
+  /*
+    Remove common path elements from the beginning of the
+    components and pages full path (if any)
+
+    For example, having:
+    - fromPath = ['src', 'components']
+    - toPath = ['src', 'pages']
+
+    If we want to have an import statement that goes from the pages folder to the
+    components folder, we only need to go back one step, so we are removing
+    the first element from both the paths ('src') and build the dependencyPrefix accordingly
+  */
+  const [firstPath, secondPath] = removeCommonStartingPointsFromPaths([fromPath, toPath])
+
+  // We have to go back as many folders as there are defined in the pages path
+  let dependencyPrefix = '../'.repeat(firstPath.length)
+
+  // if 'fromPath' is parent for 'toPath', the path starts from './'
+  if (firstPath.length === 0) {
+    secondPath.unshift('.')
+  }
+
+  dependencyPrefix += secondPath
+    .map((folder) => {
+      return `${folder}/`
+    })
+    .join('')
+
+  return dependencyPrefix
+}
+
+const removeCommonStartingPointsFromPaths = (paths: string[][]): string[][] => {
+  const pathsClone: string[][] = JSON.parse(JSON.stringify(paths))
+
+  const shortestPathLength = Math.min(
+    ...pathsClone.map((path) => {
+      return path.length
+    })
+  )
+
+  let elementIndex = 0
+  let elementsFromIndexAreEqual = true
+
+  while (elementIndex < shortestPathLength && elementsFromIndexAreEqual) {
+    const firstPathElementsFromIndex = pathsClone.map((path: string[]) => {
+      return path[0]
+    })
+
+    if (elementsFromArrayAreEqual(firstPathElementsFromIndex)) {
+      // If the first elements from every path are equal, remove it
+      pathsClone.forEach((path) => {
+        path.shift()
+      })
+    } else {
+      elementsFromIndexAreEqual = false
+    }
+    elementIndex += 1
+  }
+
+  return pathsClone
+}
+
+const elementsFromArrayAreEqual = (arrayOfElements: string[]): boolean => {
+  return arrayOfElements.every((element: string) => {
+    return element === arrayOfElements[0]
+  })
+}

package/src/utils/string-utils.ts

@@ -5,6 +5,7 @@ export const dashCaseToCamelCase = (str: string): string =>
   str.replace(/[-_]+(.)?/g, (_, chr) => (chr ? chr.toUpperCase() : ''))
 
 export const capitalize = (str: string): string => str[0].toUpperCase() + str.slice(1)
+export const camelize = (str: string): string => str[0].toLowerCase() + str.slice(1)
 
 export const dashCaseToUpperCamelCase = (str: string) => capitalize(dashCaseToCamelCase(str))
 
@@ -36,6 +37,10 @@ export const slugify = (str: string): string => {
     .replace(/&/g, '-and-') // Replace & with 'and'
 }
 
+export const createStateOrPropStoringValue = (value: string) => camelize(dashCaseToCamelCase(value))
+export const createStateStoringFunction = (value: string) =>
+  `set${capitalize(dashCaseToUpperCamelCase(value))}`
+
 export const addSpacesToEachLine = (spaces: string, str: string) => {
   // indent the first line
   const respaced = spaces + str

package/src/utils/uidl-utils.ts

@@ -20,9 +20,12 @@ import {
   UIDLStyleSheetContent,
   UIDLComponentStyleReference,
   UIDLRootComponent,
+  ProjectContext,
+  Resource,
   GeneratorOptions,
 } from '@teleporthq/teleport-types'
 import { basename } from 'path'
+import { StringUtils } from '..'
 
 export const extractRoutes = (rootComponent: UIDLRootComponent) => {
   // Assuming root element starts with a UIDLElementNode
@@ -141,7 +144,7 @@ export const prefixAssetsPath = (
      - asset is missing in the project packer
      - It's not a asset and so we don't need to provide any mapping for it
 
-    Note: We need to check for decoded asset name as well as for some special characters such as katakana / kanjis / hiraganas 
+    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
   */
 
@@ -222,6 +225,29 @@ export const traverseNodes = (
       }
       break
 
+    case 'cms-list':
+      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.nodes.empty) {
+        traverseNodes(node.content.nodes.empty, fn)
+      }
+      break
+
+    case 'cms-item':
+      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)
+      }
+      break
+
     case 'repeat':
       traverseNodes(node.content.node, fn, node)
       traverseNodes(node.content.dataSource, fn, node)
@@ -247,7 +273,72 @@ export const traverseNodes = (
 
     default:
       throw new Error(
-        `traverseNodes was given an unsupported node type ${JSON.stringify(node, null, 2)}`
+        `traverseNodes was given an unsupported node type: ${JSON.stringify(node, null, 2)}`
+      )
+  }
+}
+
+export const traverseResources = (
+  node: UIDLNode,
+  fn: (node: Resource, parentNode: UIDLNode) => void
+) => {
+  switch (node.type) {
+    case 'element':
+      const { children } = node.content
+
+      if (children) {
+        children.forEach((child) => {
+          traverseResources(child, fn)
+        })
+      }
+      break
+
+    case 'cms-list':
+      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)
+      }
+      if (node.content.nodes.empty) {
+        traverseResources(node.content.nodes.empty, fn)
+      }
+      break
+
+    case 'cms-item':
+      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
+
+    case 'conditional':
+      traverseResources(node.content.node, fn)
+      break
+
+    case 'slot':
+      if (node.content.fallback) {
+        traverseResources(node.content.fallback, fn)
+      }
+      break
+
+    case 'static':
+    case 'dynamic':
+    case 'import':
+    case 'raw':
+      break
+
+    default:
+      throw new Error(
+        `traverseResources was given an unsupported node type: ${JSON.stringify(node, null, 2)}`
       )
   }
 }
@@ -275,6 +366,29 @@ export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => v
       }
       break
 
+    case 'cms-list':
+      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.nodes.empty) {
+        traverseElements(node.content.nodes.empty, fn)
+      }
+      break
+
+    case 'cms-item':
+      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)
+      }
+      break
+
     case 'repeat':
       traverseElements(node.content.node, fn)
       break
@@ -296,7 +410,11 @@ export const traverseElements = (node: UIDLNode, fn: (element: UIDLElement) => v
 
     default:
       throw new Error(
-        `traverseElements was given an unsupported node type ${JSON.stringify(node, null, 2)}`
+        `traverseElements was given an unsupported node type : ${node.type}, ${JSON.stringify(
+          node,
+          null,
+          2
+        )}`
       )
   }
 }
@@ -312,6 +430,29 @@ export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent)
 
       break
 
+    case 'cms-list':
+      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.nodes.empty) {
+        traverseRepeats(node.content.nodes.empty, 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)
+      }
+      break
+
     case 'repeat':
       fn(node.content)
 
@@ -335,7 +476,11 @@ export const traverseRepeats = (node: UIDLNode, fn: (element: UIDLRepeatContent)
 
     default:
       throw new Error(
-        `traverseRepeats was given an unsupported node type ${JSON.stringify(node, null, 2)}`
+        `traverseRepeats was given an unsupported node type: ${node.type} - ${JSON.stringify(
+          node,
+          null,
+          2
+        )}`
       )
   }
 }
@@ -465,7 +610,7 @@ export const transformStringAssignmentToJson = (
       type: 'dynamic',
       content: {
         referenceType,
-        id: path,
+        id: StringUtils.createStateOrPropStoringValue(path),
       },
     }
   }
@@ -492,13 +637,27 @@ export const transformStylesAssignmentsToJson = (
 
     if (!Array.isArray(styleContentAtKey) && entityType === 'object') {
       // if this value is already properly declared, make sure it is not
-      const { type } = styleContentAtKey as Record<string, unknown>
+      const { type, content } = styleContentAtKey as UIDLStaticValue | UIDLDynamicReference
 
-      if (['dynamic', 'static'].indexOf(type as string) !== -1) {
-        acc[key] = styleContentAtKey as UIDLStyleValue
+      if (type === 'static') {
+        acc[key] = styleContentAtKey as UIDLStaticValue
         return acc
       }
 
+      if (type === 'dynamic') {
+        if (['state', 'prop'].includes(content?.referenceType)) {
+          acc[key] = {
+            type,
+            content: {
+              ...content,
+              id: StringUtils.createStateOrPropStoringValue(content.id),
+            },
+          }
+        } else {
+          acc[key] = styleContentAtKey as UIDLDynamicReference
+        }
+      }
+
       return acc
     }
 
@@ -533,11 +692,37 @@ 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 Record<string, unknown>
-      if (['dynamic', 'static', 'import', 'comp-style', 'raw'].indexOf(type as string) !== -1) {
+      if (['static', 'import', 'raw'].indexOf(type as string) !== -1) {
         acc[key] = attributeContent as UIDLAttributeValue
         return acc
       }
 
+      if (type === 'comp-style') {
+        acc[key] = {
+          type: 'comp-style',
+          content: StringUtils.createStateOrPropStoringValue(
+            (attributeContent as UIDLComponentStyleReference).content
+          ),
+        }
+        return acc
+      }
+
+      const { content } = attributeContent as UIDLDynamicReference
+      if (type === 'dynamic') {
+        if (['state', 'prop'].includes(content?.referenceType)) {
+          acc[key] = {
+            type,
+            content: {
+              ...content,
+              id: StringUtils.createStateOrPropStoringValue(content.id),
+            },
+          }
+        } else {
+          acc[key] = attributeContent as UIDLAttributeValue
+        }
+        return acc
+      }
+
       throw new Error(
         `transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(
           attributeContent,
@@ -546,14 +731,6 @@ export const transformAttributesAssignmentsToJson = (
         )}`
       )
     }
-
-    throw new Error(
-      `transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(
-        attributeContent,
-        null,
-        2
-      )}`
-    )
   }, newStyleObject)
 
   return newStyleObject
@@ -596,6 +773,29 @@ export const removeChildNodes = (
       removeChildNodes(node.content.node, criteria)
       break
 
+    case 'cms-list':
+      removeChildNodes(node.content.nodes.success, criteria)
+      if (node.content.nodes.error) {
+        removeChildNodes(node.content.nodes.error, criteria)
+      }
+      if (node.content.nodes.loading) {
+        removeChildNodes(node.content.nodes.loading, criteria)
+      }
+      if (node.content.nodes.empty) {
+        removeChildNodes(node.content.nodes.empty, criteria)
+      }
+      break
+
+    case 'cms-item':
+      removeChildNodes(node.content.nodes.success, criteria)
+      if (node.content.nodes.error) {
+        removeChildNodes(node.content.nodes.error, criteria)
+      }
+      if (node.content.nodes.loading) {
+        removeChildNodes(node.content.nodes.loading, criteria)
+      }
+      break
+
     case 'conditional':
       removeChildNodes(node.content.node, criteria)
       break
@@ -632,3 +832,120 @@ export const extractExternalDependencies = (dependencies: Record<string, UIDLDep
       return acc
     }, {})
 }
+
+export const extractContextDependenciesFromNode = (
+  node: UIDLNode,
+  projectContexts: Record<string, ProjectContext>,
+  foundDependencies: Record<string, ProjectContext> = {}
+) => {
+  switch (node.type) {
+    case 'element':
+      if (node.content.attrs) {
+        Object.keys(node.content.attrs).forEach((key) => {
+          const attr = node.content.attrs[key]
+          if (attr.type === 'dynamic' && attr.content.referenceType === 'ctx') {
+            const contextName = attr.content.ctxId || attr.content.id
+            if (projectContexts[contextName]) {
+              foundDependencies[contextName] = projectContexts[contextName]
+            }
+          }
+        })
+      }
+      if (node.content.children) {
+        node.content.children.forEach((child) => {
+          extractContextDependenciesFromNode(child, projectContexts, foundDependencies)
+        })
+      }
+      break
+
+    case 'cms-list':
+      extractContextDependenciesFromNode(
+        node.content.nodes.success,
+        projectContexts,
+        foundDependencies
+      )
+      if (node.content.nodes.error) {
+        extractContextDependenciesFromNode(
+          node.content.nodes.error,
+          projectContexts,
+          foundDependencies
+        )
+      }
+      if (node.content.nodes.loading) {
+        extractContextDependenciesFromNode(
+          node.content.nodes.loading,
+          projectContexts,
+          foundDependencies
+        )
+      }
+      if (node.content.nodes.empty) {
+        extractContextDependenciesFromNode(
+          node.content.nodes.empty,
+          projectContexts,
+          foundDependencies
+        )
+      }
+      break
+
+    case 'cms-item':
+      extractContextDependenciesFromNode(
+        node.content.nodes.success,
+        projectContexts,
+        foundDependencies
+      )
+      if (node.content.nodes.error) {
+        extractContextDependenciesFromNode(
+          node.content.nodes.error,
+          projectContexts,
+          foundDependencies
+        )
+      }
+      if (node.content.nodes.loading) {
+        extractContextDependenciesFromNode(
+          node.content.nodes.loading,
+          projectContexts,
+          foundDependencies
+        )
+      }
+      break
+
+    case 'repeat':
+      extractContextDependenciesFromNode(node.content.node, projectContexts, foundDependencies)
+      break
+
+    case 'conditional':
+      extractContextDependenciesFromNode(node.content.node, projectContexts, foundDependencies)
+      break
+
+    case 'slot':
+      if (node.content.fallback) {
+        extractContextDependenciesFromNode(
+          node.content.fallback,
+          projectContexts,
+          foundDependencies
+        )
+      }
+      break
+
+    case 'static':
+    case 'raw':
+      break
+
+    case 'dynamic':
+      if (node.content.referenceType === 'ctx') {
+        foundDependencies[node.content.id] = projectContexts[node.content.id]
+      }
+      break
+
+    default:
+      throw new Error(
+        `extractContextDependenciesFromNode was given an unsupported node type ${JSON.stringify(
+          node,
+          null,
+          2
+        )}`
+      )
+  }
+
+  return foundDependencies
+}