@teleporthq/teleport-plugin-common 0.41.0 → 0.42.0

package/src/utils/ast-utils.ts

@@ -12,9 +12,10 @@ import {
   UIDLPropValue,
   UIDLExpressionValue,
   UIDLStateValue,
+  HastNode,
 } from '@teleporthq/teleport-types'
 import babelPresetReact from '@babel/preset-react'
-import { ASTUtils } from '..'
+import { UnaryOperation, BinaryOperator } from './types'
 
 /**
  * Adds a class definition string to an existing string of classes
@@ -23,14 +24,20 @@ export const addClassStringOnJSXTag = (
   jsxNode: types.JSXElement,
   classString: string,
   classAttributeName?: string,
-  dynamicValues: Array<types.MemberExpression | types.Identifier> = []
+  dynamicValues: Array<types.MemberExpression | types.Identifier | types.ConditionalExpression> = []
 ) => {
-  const classAttribute = getClassAttribute(jsxNode, { createIfNotFound: true, classAttributeName })
+  if (classString === '' && dynamicValues.length === 0) {
+    return
+  }
 
+  const classAttribute = getClassAttribute(jsxNode, { createIfNotFound: true, classAttributeName })
   if (dynamicValues.length === 0) {
     if (classAttribute.value && classAttribute.value.type === 'StringLiteral') {
       const classArray = classAttribute.value.value.split(' ')
-      classArray.push(classString)
+      if (classString) {
+        classArray.push(classString)
+      }
+      classArray.filter((item) => item)
       classAttribute.value.value = classArray.join(' ').trim()
     } else {
       throw new Error(
@@ -43,7 +50,9 @@ export const addClassStringOnJSXTag = (
     if (classAttribute.value && classAttribute.value.type === 'StringLiteral') {
       const classArray = classAttribute.value.value.split(' ')
       const quasis: types.TemplateElement[] = []
-      const expression: Array<types.MemberExpression | types.Identifier> = []
+      const expression: Array<
+        types.MemberExpression | types.Identifier | types.ConditionalExpression
+      > = []
 
       quasis.push(
         types.templateElement({
@@ -164,17 +173,21 @@ export const addDynamicExpressionAttributeToJSXTag = (
 export const addMultipleDynamicAttributesToJSXTag = (
   jsxASTNode: types.JSXElement,
   name: string,
-  attrValues: Array<types.MemberExpression | types.Identifier> = [],
+  attrValues: Array<types.MemberExpression | types.Identifier | types.StringLiteral> = [],
   t = types
 ) => {
-  const memberExpressions: Array<types.Identifier | types.MemberExpression> = []
+  const memberExpressions: Array<types.Identifier | types.MemberExpression | types.StringLiteral> =
+    []
   const templateElements: types.TemplateElement[] = []
-
   if (attrValues.length === 0) {
     return
   }
 
-  let content: types.TemplateLiteral | types.MemberExpression | types.Identifier
+  let content:
+    | types.TemplateLiteral
+    | types.MemberExpression
+    | types.Identifier
+    | types.StringLiteral
   if (attrValues.length === 1) {
     content = attrValues[0]
   } else {
@@ -210,19 +223,36 @@ export const stringAsTemplateLiteral = (str: string): types.TemplateLiteral => {
   return container.expression as types.TemplateLiteral
 }
 
+/**
+ * Converts HTML attribute names to React/JSX camelCase format
+ * Preserves data-* and aria-* attributes as-is
+ */
+const convertToReactAttributeName = (attrName: string): string => {
+  // Keep data-* and aria-* attributes as-is (React supports these)
+  if (attrName.startsWith('data-') || attrName.startsWith('aria-')) {
+    return attrName
+  }
+
+  // Convert hyphenated attributes to camelCase for React
+  return attrName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
 export const addAttributeToJSXTag = (
   jsxNode: types.JSXElement,
   attrName: string,
   attrValue?: boolean | unknown,
   t = types
 ) => {
-  const nameOfAttribute = t.jsxIdentifier(attrName)
+  const reactAttrName = convertToReactAttributeName(attrName)
+  const nameOfAttribute = t.jsxIdentifier(reactAttrName)
   let attributeDefinition
   if (typeof attrValue === 'boolean') {
     attributeDefinition = t.jsxAttribute(
       nameOfAttribute,
       attrValue === true ? undefined : t.jsxExpressionContainer(t.booleanLiteral(attrValue))
     )
+  } else if (t.isNode(attrValue) && t.isJSXElement(attrValue)) {
+    attributeDefinition = t.jsxAttribute(nameOfAttribute, t.jsxExpressionContainer(attrValue))
   } else {
     attributeDefinition = t.jsxAttribute(
       nameOfAttribute,
@@ -230,6 +260,17 @@ export const addAttributeToJSXTag = (
     )
   }
 
+  const attribute: types.JSXAttribute = jsxNode.openingElement.attributes.find((attr) => {
+    if (attr.type === 'JSXAttribute') {
+      return attr.name.name === reactAttrName
+    }
+  }) as types.JSXAttribute
+
+  if (attribute && attribute.value && attribute.value.type === 'StringLiteral') {
+    attribute.value.value = `${attribute.value.value} ${attrValue}`
+    return
+  }
+
   jsxNode.openingElement.attributes.push(attributeDefinition)
 }
 
@@ -300,7 +341,18 @@ export const objectToObjectExpression = (
     const value = objectMap[key]
     let computedLiteralValue = null
 
-    if (value instanceof ParsedASTNode || value.constructor.name === 'ParsedASTNode') {
+    if (value === undefined) {
+      return acc
+    }
+
+    // Handle null values explicitly - they are valid in array mappers with different schemas
+    if (value === null) {
+      computedLiteralValue = t.nullLiteral()
+    }
+    // This is for function props that have successfully been parsed.
+    else if (typeof value === 'object' && 'functionExpressionParseResult' in value) {
+      computedLiteralValue = value.functionExpressionParseResult
+    } else if (value instanceof ParsedASTNode || value.constructor.name === 'ParsedASTNode') {
       computedLiteralValue = (value as ParsedASTNode).ast
     } else if (typeof value === 'boolean') {
       computedLiteralValue = t.booleanLiteral(value)
@@ -396,7 +448,7 @@ export const getTSAnnotationForType = (type: any, t = types) => {
     case 'boolean':
       return t.tsBooleanKeyword()
     default:
-      return t.tsUnknownKeyword()
+      return t.tsAnyKeyword()
   }
 }
 
@@ -496,7 +548,7 @@ export const createReturnExpressionSyntax = (
     createStateHookAST(stateKey, stateDefinitions[stateKey])
   )
 
-  return t.blockStatement([...stateHooks, ...Object.values(windowImports), returnStatement] || [])
+  return t.blockStatement([...stateHooks, ...Object.values(windowImports), returnStatement])
 }
 
 /**
@@ -543,9 +595,7 @@ export const wrapObjectPropertiesWithExpression = (properties: types.ObjectPrope
 
 export const generateRemoteResourceASTs = (resource: UIDLResourceItem) => {
   const fetchUrl = computeFetchUrl(resource)
-  const authHeaderAST = computeAuthorizationHeaderAST(resource?.headers)
   const headersASTs = resource?.headers ? generateRESTHeadersAST(resource.headers) : []
-
   const queryParams = generateURLParamsAST(resource?.params)
   const fetchUrlQuasis = fetchUrl.quasis
   const queryParamsQuasis = queryParams?.quasis || [types.templateElement({ raw: '', cooked: '' })]
@@ -560,60 +610,8 @@ export const generateRemoteResourceASTs = (resource: UIDLResourceItem) => {
     queryParamsQuasis.pop()
   }
 
-  const paramsDeclerations: Array<types.ObjectProperty | types.SpreadElement> = Object.keys(
-    resource?.params || {}
-  ).reduce((acc: Array<types.ObjectProperty | types.SpreadElement>, item) => {
-    const prop = resource.params[item]
-    if (prop.type === 'static') {
-      acc.push(types.objectProperty(types.stringLiteral(item), ASTUtils.resolveObjectValue(prop)))
-    }
-
-    if (prop.type === 'expr') {
-      acc.push(
-        types.objectProperty(
-          types.stringLiteral(item),
-          ASTUtils.getExpressionFromUIDLExpressionNode(prop)
-        )
-      )
-    }
-
-    if (prop.type === 'dynamic') {
-      acc.push(
-        types.spreadElement(
-          types.logicalExpression(
-            '&&',
-            types.memberExpression(
-              types.identifier('params'),
-              types.stringLiteral(prop.content.id),
-              true,
-              false
-            ),
-            types.objectExpression([
-              types.objectProperty(
-                types.stringLiteral(item),
-                types.memberExpression(
-                  types.identifier('params'),
-                  types.stringLiteral(prop.content.id),
-                  true,
-                  false
-                )
-              ),
-            ])
-          )
-        )
-      )
-    }
-
-    return acc
-  }, [])
-
-  const paramsAST = types.variableDeclaration('const', [
-    types.variableDeclarator(
-      types.identifier('urlParams'),
-      types.objectExpression(paramsDeclerations)
-    ),
-  ])
-
+  const urlParamsDecleration = generateParamsAST(resource?.params)
+  const bodyParamsDecleration = generateParamsAST(resource?.body)
   const url = queryParams?.quasis
     ? types.templateLiteral(
         [...fetchUrlQuasis, ...queryParamsQuasis],
@@ -628,31 +626,113 @@ export const generateRemoteResourceASTs = (resource: UIDLResourceItem) => {
 
   let allHeaders: types.ObjectProperty[] = []
 
-  if (authHeaderAST) {
-    allHeaders.push(authHeaderAST)
+  if (resource?.headers?.authToken) {
+    allHeaders.push(computeAuthorizationHeaderAST(resource?.headers))
   }
 
   if (headersASTs.length) {
     allHeaders = allHeaders.concat(headersASTs)
   }
 
-  const headers = types.objectProperty(
-    types.identifier('headers'),
-    types.objectExpression(allHeaders)
-  )
-
-  const fetchAST = types.variableDeclaration('const', [
+  const fetchAST = types.variableDeclaration('let', [
     types.variableDeclarator(
       types.identifier('data'),
       types.awaitExpression(
         types.callExpression(types.identifier('fetch'), [
           url,
-          types.objectExpression([method, headers]),
+          types.objectExpression([
+            method,
+            ...(allHeaders.length > 0
+              ? [
+                  types.objectProperty(
+                    types.identifier('headers'),
+                    types.objectExpression(allHeaders)
+                  ),
+                ]
+              : []),
+            ...(bodyParamsDecleration.length > 0 && resource?.method === 'POST'
+              ? [
+                  types.objectProperty(
+                    types.identifier('body'),
+                    types.callExpression(
+                      types.memberExpression(
+                        types.identifier('JSON'),
+                        types.identifier('stringify')
+                      ),
+                      [types.identifier('bodyParams')]
+                    )
+                  ),
+                ]
+              : []),
+          ]),
         ])
       )
     ),
   ])
 
+  // Fallback in case i18n interferes with normal CMS flows
+  // Only generate fallback if locale parameter exists
+  const hasLocaleParam = resource?.params?.locale !== undefined
+  let fallbackAST = null
+
+  if (hasLocaleParam) {
+    const fallbackParams = JSON.parse(JSON.stringify(resource))
+    delete fallbackParams?.params?.locale
+    const fallbackUrlParamsDeclaration = generateParamsAST(fallbackParams?.params)
+    const assignmentOfNewUrlParams = types.expressionStatement(
+      types.assignmentExpression(
+        '=',
+        types.identifier('urlParams'),
+        types.objectExpression([...fallbackUrlParamsDeclaration])
+      )
+    )
+
+    const assignmentExpressionAST = types.expressionStatement(
+      types.assignmentExpression(
+        '=',
+        types.identifier('data'),
+        types.awaitExpression(
+          types.callExpression(types.identifier('fetch'), [
+            url,
+            types.objectExpression([
+              method,
+              ...(allHeaders.length > 0
+                ? [
+                    types.objectProperty(
+                      types.identifier('headers'),
+                      types.objectExpression(allHeaders)
+                    ),
+                  ]
+                : []),
+              ...(bodyParamsDecleration.length > 0 && resource?.method === 'POST'
+                ? [
+                    types.objectProperty(
+                      types.identifier('body'),
+                      types.callExpression(
+                        types.memberExpression(
+                          types.identifier('JSON'),
+                          types.identifier('stringify')
+                        ),
+                        [types.identifier('bodyParams')]
+                      )
+                    ),
+                  ]
+                : []),
+            ]),
+          ])
+        )
+      )
+    )
+
+    fallbackAST = types.ifStatement(
+      types.binaryExpression(
+        '!==',
+        types.memberExpression(types.identifier('data'), types.identifier('status')),
+        types.numericLiteral(200)
+      ),
+      types.blockStatement([assignmentOfNewUrlParams, assignmentExpressionAST])
+    )
+  }
   const responseType = resource?.response?.type ?? 'json'
   let responseJSONAST
 
@@ -719,7 +799,80 @@ export const generateRemoteResourceASTs = (resource: UIDLResourceItem) => {
     }
   }
 
-  return [paramsAST, fetchAST, responseJSONAST]
+  return [
+    ...(urlParamsDecleration.length > 0
+      ? [
+          types.variableDeclaration('let', [
+            types.variableDeclarator(
+              types.identifier('urlParams'),
+              types.objectExpression(urlParamsDecleration)
+            ),
+          ]),
+        ]
+      : []),
+    ...(bodyParamsDecleration.length > 0
+      ? [
+          types.variableDeclaration('const', [
+            types.variableDeclarator(
+              types.identifier('bodyParams'),
+              types.objectExpression(bodyParamsDecleration)
+            ),
+          ]),
+        ]
+      : []),
+    fetchAST,
+    ...(fallbackAST ? [fallbackAST] : []),
+    responseJSONAST,
+  ].filter(Boolean)
+}
+
+const generateParamsAST = (
+  props: Record<string, UIDLStaticValue | UIDLPropValue | UIDLStateValue | UIDLExpressionValue>
+): Array<types.ObjectProperty | types.SpreadElement> => {
+  return Object.keys(props || {}).reduce(
+    (acc: Array<types.ObjectProperty | types.SpreadElement>, item) => {
+      const prop = props[item]
+      if (prop.type === 'static') {
+        acc.push(types.objectProperty(types.stringLiteral(item), resolveObjectValue(prop)))
+      }
+
+      if (prop.type === 'expr') {
+        acc.push(
+          types.objectProperty(types.stringLiteral(item), getExpressionFromUIDLExpressionNode(prop))
+        )
+      }
+
+      if (prop.type === 'dynamic') {
+        acc.push(
+          types.spreadElement(
+            types.logicalExpression(
+              '&&',
+              types.memberExpression(
+                types.identifier('params'),
+                types.stringLiteral(prop.content.id),
+                true,
+                false
+              ),
+              types.objectExpression([
+                types.objectProperty(
+                  types.stringLiteral(item),
+                  types.memberExpression(
+                    types.identifier('params'),
+                    types.stringLiteral(prop.content.id),
+                    true,
+                    false
+                  )
+                ),
+              ])
+            )
+          )
+        )
+      }
+
+      return acc
+    },
+    []
+  )
 }
 
 const generateRESTHeadersAST = (headers: UIDLResourceItem['headers']): types.ObjectProperty[] => {
@@ -754,6 +907,22 @@ export const generateMemberExpressionASTFromBase = (
   )
 }
 
+export const parseValuePath = (valuePath: Array<string | number>): Array<string | number> => {
+  return valuePath.map((segment) => {
+    if (typeof segment === 'string') {
+      const bracketMatch = segment.match(/^\[(\d+)\]$/)
+      if (bracketMatch) {
+        return parseInt(bracketMatch[1], 10)
+      }
+      const numericMatch = segment.match(/^\d+$/)
+      if (numericMatch) {
+        return parseInt(segment, 10)
+      }
+    }
+    return segment
+  })
+}
+
 export const generateMemberExpressionASTFromPath = (
   path: Array<string | number>
 ): types.OptionalMemberExpression | types.Identifier => {
@@ -769,7 +938,7 @@ export const generateMemberExpressionASTFromPath = (
     return types.optionalMemberExpression(
       generateMemberExpressionASTFromPath(pathClone),
       types.numericLiteral(currentPath),
-      false,
+      true,
       true
     )
   }
@@ -885,7 +1054,7 @@ const computeAuthorizationHeaderAST = (headers: UIDLResourceItem['headers']) =>
   )
 }
 
-const computeFetchUrl = (resource: UIDLResourceItem) => {
+export const computeFetchUrl = (resource: UIDLResourceItem) => {
   const { path } = resource
   const fetchBaseUrl = resolveResourceValue(path.baseUrl)
   const resourceRoute = resolveResourceValue(path.route)
@@ -894,7 +1063,11 @@ const computeFetchUrl = (resource: UIDLResourceItem) => {
   const routeType = path.route?.type
 
   if (baseUrlType === 'static' && routeType === 'static') {
-    const stringsToJoin = [fetchBaseUrl, resourceRoute].filter((item) => item).join('/')
+    const baseUrlStr = typeof fetchBaseUrl === 'string' ? fetchBaseUrl : String(fetchBaseUrl || '')
+    const routeStr = typeof resourceRoute === 'string' ? resourceRoute : String(resourceRoute || '')
+    const cleanBaseUrl = baseUrlStr.endsWith('/') ? baseUrlStr.slice(0, -1) : baseUrlStr
+    const cleanRoute = routeStr.startsWith('/') ? routeStr.slice(1) : routeStr
+    const stringsToJoin = [cleanBaseUrl, cleanRoute].filter((item) => item).join('/')
     return types.templateLiteral(
       [types.templateElement({ cooked: `${stringsToJoin}`, raw: `${stringsToJoin}` }, true)],
       []
@@ -983,6 +1156,7 @@ export const resolveObjectValue = (
   | types.NumericLiteral
   | types.BooleanLiteral
   | types.ObjectExpression
+  | types.ArrayExpression
   | types.Expression => {
   if (prop.type === 'static') {
     const value =
@@ -992,6 +1166,8 @@ export const resolveObjectValue = (
         ? types.booleanLiteral(prop.content)
         : typeof prop.content === 'number'
         ? types.numericLiteral(prop.content)
+        : Array.isArray(prop.content)
+        ? types.arrayExpression(prop.content.map((element) => convertValueToLiteral(element)))
         : typeof prop.content === 'object'
         ? objectToObjectExpression(prop.content as unknown as Record<string, unknown>)
         : types.identifier(String(prop.content))
@@ -1025,3 +1201,28 @@ export const getExpressionFromUIDLExpressionNode = (
 
   return theStatementOnlyWihtoutTheProgram.expression
 }
+
+export const isJSXElement = (value: types.JSXElement | HastNode): value is types.JSXElement =>
+  value.type === 'JSXElement'
+
+/**
+ * Because of the restrictions of the AST Types we need to have a clear subset of binary operators we can use
+ * @param operation - the operation defined in the UIDL for the current state branch
+ */
+export const convertToBinaryOperator = (operation: string): BinaryOperator => {
+  const allowedOperations = ['===', '!==', '>=', '<=', '>', '<']
+  if (allowedOperations.includes(operation)) {
+    return operation as BinaryOperator
+  } else {
+    return '==='
+  }
+}
+
+export const convertToUnaryOperator = (operation: string): UnaryOperation => {
+  const allowedOperations = ['!']
+  if (allowedOperations.includes(operation)) {
+    return operation as UnaryOperation
+  } else {
+    return '!'
+  }
+}

package/src/utils/hast-utils.ts

@@ -1,25 +1,53 @@
-import { HastNode } from '@teleporthq/teleport-types'
+import { HastNode, HastText } from '@teleporthq/teleport-types'
 import { createTextNode } from '../builders/hast-builders'
+import type { JSXElement } from '@babel/types'
+import { isJSXElement } from './ast-utils'
 
-export const addBooleanAttributeToNode = (node: HastNode, key: string, value: boolean = true) => {
+export const addBooleanAttributeToNode = (
+  node: HastNode | HastNode[],
+  key: string,
+  value: boolean = true
+) => {
+  if (Array.isArray(node)) {
+    node.forEach((subnode) => (subnode.properties[key] = value === true ? '' : false))
+    return
+  }
   node.properties[key] = value === true ? '' : false
-  /* adding empty string as @starptech/prettyhtml-hast-to-html which we are currently
-  using for generating HTML supports boolean way of adding attributes only for HTML
-  attributes but not for Vue*/
+  // Adding boolean attributes is currently onyl supported for template generators
 }
 
-export const addAttributeToNode = (node: HastNode, key: string, value: string) => {
+export const addAttributeToNode = (node: HastNode | HastNode[], key: string, value: string) => {
+  if (Array.isArray(node)) {
+    node.forEach((subnode) => (subnode.properties[key] = value))
+    return
+  }
   node.properties[key] = value
 }
 
-export const addClassToNode = (node: HastNode, className: string) => {
+export const addClassToNode = (node: HastNode | HastNode[], className: string) => {
+  if (Array.isArray(node)) {
+    node.forEach((subnode) => (subnode.properties.class = className))
+    return
+  }
   node.properties.class = className
 }
 
-export const addChildNode = (node: HastNode, child: HastNode) => {
+export const addChildNode = (node: HastNode | HastNode[], child: HastNode | HastText) => {
+  if (Array.isArray(node)) {
+    node.forEach((subnode) => subnode.children.push(child))
+    return
+  }
   node.children.push(child)
 }
 
-export const addTextNode = (node: HastNode, text: string) => {
+export const addTextNode = (node: HastNode | HastNode[], text: string) => {
+  if (Array.isArray(node)) {
+    node.forEach((subnode) => subnode.children.push(createTextNode(text)))
+    return
+  }
   node.children.push(createTextNode(text))
 }
+
+export const isHastElement = (value: JSXElement | HastNode): value is HastNode =>
+  isJSXElement(value) === false &&
+  ('properties' in value || 'children' in value || 'tagName' in value)

package/src/utils/types.ts

@@ -0,0 +1,25 @@
+export type BinaryOperator =
+  | '==='
+  | '+'
+  | '-'
+  | '/'
+  | '%'
+  | '*'
+  | '**'
+  | '&'
+  | '|'
+  | '>>'
+  | '>>>'
+  | '<<'
+  | '^'
+  | '=='
+  | '!='
+  | '!=='
+  | 'in'
+  | 'instanceof'
+  | '>'
+  | '<'
+  | '>='
+  | '<='
+
+export type UnaryOperation = '+' | '-' | 'void' | 'throw' | 'delete' | '!' | '~' | 'typeof'