(fix): Missing links for nodes in the default values for propDefiniti…

…ons (#911)

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

@@ -36,7 +36,7 @@ import {
 } from '../../utils/ast-utils'
 import { createJSXTag, createSelfClosingJSXTag } from '../../builders/ast-builders'
 import { DEFAULT_JSX_OPTIONS } from './constants'
-import { ASTBuilders, ASTUtils, createJSXSyntax } from '../..'
+import { ASTBuilders, ASTUtils } from '../..'
 
 const generateElementNode: NodeToJSX<UIDLElementNode, types.JSXElement> = (
   node,
@@ -202,30 +202,32 @@ const generateNode: NodeToJSX<UIDLNode, JSXASTReturnType[]> = (node, params, opt
     case 'dynamic':
       // If the dynamic node is a prop and has a default value,
       // we should use it with a logical expression. And the most used case is for named-slots.
-      if (
-        node.type === 'dynamic' &&
-        params.propDefinitions[node.content.id]?.type === 'element' &&
-        params.propDefinitions[node.content.id]?.defaultValue
-      ) {
+      const prop = params.propDefinitions[node.content.id]
+      if (prop?.type === 'element' && prop.defaultValue) {
         const prefix =
           options.dynamicReferencePrefixMap[
             node.content.referenceType as 'prop' | 'state' | 'local'
           ] || ''
 
+        const propDefault = prop.defaultValue as UIDLElementNode
+        const jsxNode = params.nodesLookup[propDefault.content.key]
+
+        if (jsxNode === undefined) {
+          throw Error(`Prop ${node.content.id} is of type element \n
+            The JSXNode of the prop-${node.content.id} is missing from the nodesLookup`)
+        }
+
         return [
           types.logicalExpression(
             '??',
             prefix === ''
               ? types.identifier(node.content.id)
               : types.memberExpression(types.identifier(prefix), types.identifier(node.content.id)),
-            createJSXSyntax(
-              params.propDefinitions[node.content.id].defaultValue as UIDLElementNode,
-              params,
-              options
-            )
+            jsxNode as types.JSXElement
           ),
         ]
       }
+
       return [createDynamicValueExpression(node, options)]
 
     case 'cms-item':

packages/teleport-plugin-react-base-component/src/index.ts

@@ -11,6 +11,7 @@ import {
   ComponentPlugin,
   ChunkType,
   FileType,
+  UIDLElementNode,
 } from '@teleporthq/teleport-types'
 import * as types from '@babel/types'
 
@@ -69,6 +70,17 @@ export const createReactComponentPlugin: ComponentPluginFactory<ReactPluginConfi
       domHTMLInjection: (content: string) => ASTBuilders.createDOMInjectionNode(content),
     }
 
+    /*
+      We need to generate jsx structure of every node that is defined in the UIDL.
+      If we use these nodes in the later stage of the code-generation depends on the usage of these nodes.
+    */
+    for (const propKey of Object.keys(propDefinitions)) {
+      const prop = propDefinitions[propKey]
+      if (prop.type === 'element' && typeof prop.defaultValue === 'object') {
+        createJSXSyntax(prop.defaultValue as UIDLElementNode, jsxParams, jsxOptions)
+      }
+    }
+
     const jsxTagStructure = createJSXSyntax(uidl.node, jsxParams, jsxOptions)
 
     const componentName = UIDLUtils.getComponentClassName(uidl)

packages/teleport-plugin-react-styled-components/src/index.ts

@@ -87,6 +87,16 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledCom
       }
 
       const root = jsxNodesLookup[key]
+      if (root === undefined) {
+        throw new PluginStyledComponent(
+          `Element \n ${JSON.stringify(
+            element,
+            null,
+            2
+          )} \n with key ${key} is missing from the template chunk`
+        )
+      }
+
       let className = StringUtils.dashCaseToUpperCamelCase(key)
 
       if (style) {

packages/teleport-uidl-resolver/src/resolvers/abilities/index.ts

@@ -1,6 +1,17 @@
-import { ComponentUIDL, GeneratorOptions } from '@teleporthq/teleport-types'
+import { ComponentUIDL, GeneratorOptions, UIDLElementNode } from '@teleporthq/teleport-types'
 import { insertLinks } from './utils'
 
 export const resolveAbilities = (uidl: ComponentUIDL, options: GeneratorOptions) => {
+  if (uidl.propDefinitions) {
+    for (const propKey of Object.keys(uidl.propDefinitions)) {
+      const prop = uidl.propDefinitions[propKey]
+      if (prop.type === 'element' && typeof prop.defaultValue === 'object') {
+        uidl.propDefinitions[propKey].defaultValue = insertLinks(
+          prop.defaultValue as UIDLElementNode,
+          options
+        )
+      }
+    }
+  }
   uidl.node = insertLinks(uidl.node, options)
 }