Add support for passing the event object for eventHandlers, also add support for expressions and dynamic references as newState values (#961)

Author: vladgrecu

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

@@ -58,15 +58,24 @@ export const addEventHandlerToTag = (
   })
 
   let expressionContent: types.ArrowFunctionExpression | types.Expression
+  const functionParams = eventHandlerStatements.some(
+    (eventHandler) => eventHandler.includeEventObject
+  )
+    ? [t.identifier('event')]
+    : []
+
   if (eventHandlerASTStatements.length === 1) {
     const expression = eventHandlerASTStatements[0].expression
 
     expressionContent =
       expression.type === 'CallExpression' && expression.arguments.length === 0
         ? (expression.callee as types.ArrowFunctionExpression | types.Expression)
-        : t.arrowFunctionExpression([], expression)
+        : t.arrowFunctionExpression(functionParams, expression)
   } else {
-    expressionContent = t.arrowFunctionExpression([], t.blockStatement(eventHandlerASTStatements))
+    expressionContent = t.arrowFunctionExpression(
+      functionParams,
+      t.blockStatement(eventHandlerASTStatements)
+    )
   }
 
   tag.openingElement.attributes.push(
@@ -122,10 +131,21 @@ const createStateChangeStatement = (
     ? options.dynamicReferencePrefixMap.state + '.'
     : ''
 
-  const newStateValue =
-    eventHandlerStatement.newState === '$toggle'
-      ? t.unaryExpression('!', t.identifier(statePrefix + stateKey))
-      : convertValueToLiteral(eventHandlerStatement.newState, stateDefinition.type)
+  let newStateValue
+
+  if (eventHandlerStatement.newState === '$toggle') {
+    newStateValue = t.unaryExpression('!', t.identifier(statePrefix + stateKey))
+  } else if (typeof eventHandlerStatement.newState === 'object') {
+    if (eventHandlerStatement.newState.type === 'expr') {
+      newStateValue = getExpressionFromUIDLExpressionNode(eventHandlerStatement.newState)
+    } else if (eventHandlerStatement.newState.type === 'dynamic') {
+      newStateValue = createDynamicValueExpression(eventHandlerStatement.newState, options)
+    } else {
+      newStateValue = convertValueToLiteral(eventHandlerStatement.newState, stateDefinition.type)
+    }
+  } else {
+    newStateValue = convertValueToLiteral(eventHandlerStatement.newState, stateDefinition.type)
+  }
 
   switch (options.stateHandling) {
     case 'hooks':

packages/teleport-types/src/uidl.ts

@@ -683,12 +683,14 @@ export interface UIDLPropCallEvent {
   type: 'propCall'
   calls: string
   args?: Array<string | number | boolean>
+  includeEventObject?: boolean
 }
 
 export interface UIDLStateModifierEvent {
   type: 'stateChange'
   modifies: string
-  newState: string | number | boolean
+  newState: string | number | boolean | UIDLDynamicReference | UIDLExpressionValue
+  includeEventObject?: boolean
 }
 
 export type UIDLEventHandlerStatement = UIDLPropCallEvent | UIDLStateModifierEvent

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

@@ -549,12 +549,14 @@ export const propCallEventDecoder: Decoder<UIDLPropCallEvent> = object({
   type: constant('propCall'),
   calls: string(),
   args: optional(array(union(string(), number(), boolean()))),
+  includeEventObject: optional(boolean()),
 })
 
 export const stateChangeEventDecoder: Decoder<UIDLStateModifierEvent> = object({
   type: constant('stateChange'),
   modifies: string(),
-  newState: union(string(), number(), boolean()),
+  newState: union(string(), number(), boolean(), dynamicValueDecoder, expressionValueDecoder),
+  includeEventObject: optional(boolean()),
 })
 
 export const urlLinkNodeDecoder: Decoder<VUIDLURLLinkNode> = object({