Support Dynamic values and Expression as operand of a Conditional Element

packages/teleport-plugin-common/src/node-handlers/node-to-html/utils.ts

@@ -7,6 +7,8 @@ import {
   UIDLAttributeValue,
   UIDLEventHandlerStatement,
   UIDLElementNode,
+  UIDLExpressionValue,
+  UIDLDynamicReference,
 } from '@teleporthq/teleport-types'
 import { HTMLTemplateGenerationParams, HTMLTemplateSyntax } from './types'
 import { createHTMLNode } from '../../builders/hast-builders'
@@ -195,7 +197,7 @@ const createConditional = (
 const stringifyConditionalExpression = (
   identifier: string,
   operation: string,
-  value: string | number | boolean
+  value: string | number | boolean | UIDLDynamicReference | UIDLExpressionValue
 ) => {
   if (typeof value === 'boolean') {
     return `${value ? '' : '!'}${identifier}`
@@ -205,5 +207,17 @@ const stringifyConditionalExpression = (
     return `${identifier} ${operation} '${value}'`
   }
 
+  if (typeof value === 'number') {
+    return `${identifier} ${operation} ${value}`
+  }
+
+  if (value.type === 'dynamic') {
+    return `${identifier} ${operation} ${value.content.id}`
+  }
+
+  if (value.type === 'expr') {
+    return `${identifier} ${operation} ${value.content}`
+  }
+
   return `${identifier} ${operation} ${value}`
 }

packages/teleport-plugin-common/src/node-handlers/node-to-jsx/utils.ts

@@ -4,6 +4,7 @@ import {
   convertToBinaryOperator,
   convertToUnaryOperator,
   convertValueToLiteral,
+  getExpressionFromUIDLExpressionNode,
 } from '../../utils/ast-utils'
 import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
 import {
@@ -284,7 +285,7 @@ export const createConditionalJSXExpression = (
 export const createBinaryExpression = (
   condition: {
     operation: string
-    operand?: string | number | boolean
+    operand?: string | number | boolean | UIDLDynamicReference | UIDLExpressionValue
   },
   conditionalIdentifier: ConditionalIdentifier,
   t = types
@@ -308,6 +309,28 @@ export const createBinaryExpression = (
   }
 
   if (operand !== undefined) {
+    if (typeof operand === 'object' && 'type' in operand && operand.type === 'expr') {
+      const exprIdentifier = getExpressionFromUIDLExpressionNode(operand)
+
+      return t.binaryExpression(convertToBinaryOperator(operation), identifier, exprIdentifier)
+    }
+
+    if (typeof operand === 'object' && 'type' in operand && operand.type === 'dynamic') {
+      const dynamicValueIdentifier = createDynamicValueExpression(operand, {
+        dynamicReferencePrefixMap: {
+          prop: 'props',
+          state: '',
+          local: '',
+        },
+      })
+
+      return t.binaryExpression(
+        convertToBinaryOperator(operation),
+        identifier,
+        dynamicValueIdentifier
+      )
+    }
+
     const stateValueIdentifier = convertValueToLiteral(operand, conditionalIdentifier.type)
 
     return t.binaryExpression(convertToBinaryOperator(operation), identifier, stateValueIdentifier)

packages/teleport-types/src/uidl.ts

@@ -532,7 +532,7 @@ export interface UIDLConditionalNode {
 export interface UIDLConditionalExpression {
   conditions: Array<{
     operation: string
-    operand?: string | boolean | number
+    operand?: string | boolean | number | UIDLDynamicReference | UIDLExpressionValue
   }>
   // In the code generation phase, we are only supporting 'all' or '||'
   // Maybe the type checking for this can be improved.

packages/teleport-uidl-validator/src/decoders/utils.ts

@@ -784,7 +784,12 @@ export const conditionalNodeDecoder: Decoder<VUIDLConditionalNode> = object({
     condition: optional(
       object({
         conditions: array(
-          object({ operation: string(), operand: optional(union(string(), number(), boolean())) })
+          object({
+            operation: string(),
+            operand: optional(
+              union(string(), number(), boolean(), dynamicValueDecoder, expressionValueDecoder)
+            ),
+          })
         ),
         matchingCriteria: optional(string()),
       })