@teleporthq/teleport-plugin-html-base-component - npm Package Compare versions

Comparing version 0.37.3 to 0.37.6

dist/cjs/node-handlers.js

@@ -89,3 +89,3 @@ "use strict";
 var generateHtmlSyntax = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementNode, dynamicNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, usedProp, dynamicConditions, matchCondition, conditionString, isConditionPassing;
+    var _a, elementNode, dynamicNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, refPath, usedProp, defaultValue, _i, refPath_1, path, dynamicConditions, matchCondition, conditionString, isConditionPassing;
     return __generator(this, function (_e) {
@@ -123,3 +123,3 @@ switch (_e.label) {
                 }
-                _d = reference.content, referenceType = _d.referenceType, id = _d.id;
+                _d = reference.content, referenceType = _d.referenceType, id = _d.id, refPath = _d.refPath;
                 switch (referenceType) {
@@ -131,3 +131,12 @@ case 'prop': {
                         }
-                        dynamicConditions = createConditionalStatement(staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions, usedProp.defaultValue);
+                        defaultValue = usedProp.defaultValue;
+                        for (_i = 0, refPath_1 = refPath; _i < refPath_1.length; _i++) {
+                            path = refPath_1[_i];
+                            defaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[path];
+                        }
+                        // Safety measure in case no value is found
+                        if (!defaultValue) {
+                            defaultValue = usedProp.defaultValue;
+                        }
+                        dynamicConditions = createConditionalStatement(staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions, defaultValue);
                         matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
@@ -440,41 +449,40 @@ conditionString = dynamicConditions.join(" ".concat(matchCondition, " "));
 }); };
-var generateDynamicNode = function (node, 
-/* tslint:disable variable-name */
-_compName, nodesLookup, propDefinitions, stateDefinitions) { return __awaiter(void 0, void 0, void 0, function () {
-    var localeTag, commentNode, usedReferenceValue, pathKeys, value, elementNode, spanTagWrapper, commentNode, spanTagWrapper, commentNode, spanTag;
+var generateDynamicNode = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var localeTag, commentNode, usedReferenceValue, elementNode, elementTag, spanTagWrapper, commentNode, spanTag;
     return __generator(this, function (_a) {
-        if (node.content.referenceType === 'locale') {
-            localeTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
-            commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for locale ".concat(node.content.id));
-            teleport_plugin_common_1.HASTUtils.addChildNode(localeTag, commentNode);
-            return [2 /*return*/, localeTag];
-        }
-        usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
-        if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
-            pathKeys = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean);
-            pathKeys.shift();
-            value = teleport_shared_1.GenericUtils.getValueFromPath(pathKeys.join('.'), usedReferenceValue.defaultValue);
-            if (value) {
-                return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(String(value))];
-            }
-        }
-        if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
-            elementNode = usedReferenceValue.defaultValue;
-            if (elementNode.content.key in nodesLookup) {
+        switch (_a.label) {
+            case 0:
+                if (node.content.referenceType === 'locale') {
+                    localeTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
+                    commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for locale ".concat(node.content.id));
+                    teleport_plugin_common_1.HASTUtils.addChildNode(localeTag, commentNode);
+                    return [2 /*return*/, localeTag];
+                }
+                usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                if ((usedReferenceValue.type === 'object' || usedReferenceValue.type === 'array') &&
+                    usedReferenceValue.defaultValue) {
+                    // Let's say users are biding the prop to a node using something like this "fields.Title"
+                    // But the fields in the object is the value where the object is defined either in propDefinitions
+                    // or on the attrs. So, we just need to parsed the rest of the object path and get the value from the object.
+                    return [2 /*return*/, teleport_plugin_common_1.HASTBuilders.createTextNode(String(extractDefaultValueFromRefPath(usedReferenceValue.defaultValue, node.content.refPath)))];
+                }
+                if (!(usedReferenceValue.type === 'element')) return [3 /*break*/, 4];
+                elementNode = usedReferenceValue.defaultValue;
+                if (!elementNode) return [3 /*break*/, 3];
+                if (!(elementNode.content.key in nodesLookup)) return [3 /*break*/, 1];
                 return [2 /*return*/, nodesLookup[elementNode.content.key]];
-            }
-            spanTagWrapper = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
-            commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for slot ".concat(node.content.id));
-            teleport_plugin_common_1.HASTUtils.addChildNode(spanTagWrapper, commentNode);
-            return [2 /*return*/, spanTagWrapper];
+            case 1: return [4 /*yield*/, (0, exports.generateHtmlSyntax)(elementNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 2:
+                elementTag = _a.sent();
+                return [2 /*return*/, elementTag];
+            case 3:
+                spanTagWrapper = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
+                commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for slot ".concat(node.content.id));
+                teleport_plugin_common_1.HASTUtils.addChildNode(spanTagWrapper, commentNode);
+                return [2 /*return*/, spanTagWrapper];
+            case 4:
+                spanTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
+                teleport_plugin_common_1.HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue));
+                return [2 /*return*/, spanTag];
         }
-        if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue === undefined) {
-            spanTagWrapper = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
-            commentNode = teleport_plugin_common_1.HASTBuilders.createComment("Content for slot ".concat(node.content.id));
-            teleport_plugin_common_1.HASTUtils.addChildNode(spanTagWrapper, commentNode);
-            return [2 /*return*/, spanTagWrapper];
-        }
-        spanTag = teleport_plugin_common_1.HASTBuilders.createHTMLNode('span');
-        teleport_plugin_common_1.HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue));
-        return [2 /*return*/, spanTag];
     });
@@ -484,3 +492,3 @@ }); };
     Object.keys(styles).forEach(function (styleKey) {
-        var _a;
+        var _a, _b;
         var style = styles[styleKey];
@@ -490,3 +498,3 @@ if (style.type === 'dynamic' && ((_a = style.content) === null || _a === void 0 ? void 0 : _a.referenceType) !== 'token') {
             if (referencedValue.type === 'string' || referencedValue.type === 'number') {
-                style = String(referencedValue.defaultValue);
+                style = String(extractDefaultValueFromRefPath(referencedValue.defaultValue, (_b = style === null || style === void 0 ? void 0 : style.content) === null || _b === void 0 ? void 0 : _b.refPath));
             }
@@ -556,3 +564,3 @@ node.content.style[styleKey] = typeof style === 'string' ? (0, teleport_uidl_builders_1.staticNode)(style) : style;
                 var value = getValueFromReference(content.id, content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
-                teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value.defaultValue));
+                teleport_plugin_common_1.HASTUtils.addAttributeToNode(htmlNode, attrKey, String(extractDefaultValueFromRefPath(value.defaultValue, content.refPath)));
                 break;
@@ -580,7 +588,7 @@ }
 var getValueFromReference = function (key, definitions) {
-    var usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key];
+    var usedReferenceValue = definitions[key.includes('?.') ? key.split('?.')[0] : key];
     if (!usedReferenceValue) {
         throw new teleport_types_1.HTMLComponentGeneratorError("Definition for ".concat(key, " is missing from ").concat(JSON.stringify(definitions, null, 2)));
     }
-    if (['string', 'number', 'object', 'element'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) === false) {
+    if (['string', 'number', 'object', 'element', 'array'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) === false) {
         throw new teleport_types_1.HTMLComponentGeneratorError("Attribute is using dynamic value, but received of type ".concat(JSON.stringify(usedReferenceValue, null, 2)));
@@ -594,2 +602,8 @@ }
 };
+var extractDefaultValueFromRefPath = function (propDefaultValue, refPath) {
+    if (typeof propDefaultValue !== 'object' || !(refPath === null || refPath === void 0 ? void 0 : refPath.length)) {
+        return propDefaultValue;
+    }
+    return teleport_shared_1.GenericUtils.getValueFromPath(refPath.join('.'), propDefaultValue);
+};
 //# sourceMappingURL=node-handlers.js.map

dist/esm/node-handlers.js

@@ -86,3 +86,3 @@ var __assign = (this && this.__assign) || function () {
 export var generateHtmlSyntax = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, elementNode, dynamicNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, usedProp, dynamicConditions, matchCondition, conditionString, isConditionPassing;
+    var _a, elementNode, dynamicNode, conditionalNodeComment, _b, staticValue, reference, _c, conditions, matchingCriteria, _d, referenceType, id, refPath, usedProp, defaultValue, _i, refPath_1, path, dynamicConditions, matchCondition, conditionString, isConditionPassing;
     return __generator(this, function (_e) {
@@ -120,3 +120,3 @@ switch (_e.label) {
                 }
-                _d = reference.content, referenceType = _d.referenceType, id = _d.id;
+                _d = reference.content, referenceType = _d.referenceType, id = _d.id, refPath = _d.refPath;
                 switch (referenceType) {
@@ -128,3 +128,12 @@ case 'prop': {
                         }
-                        dynamicConditions = createConditionalStatement(staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions, usedProp.defaultValue);
+                        defaultValue = usedProp.defaultValue;
+                        for (_i = 0, refPath_1 = refPath; _i < refPath_1.length; _i++) {
+                            path = refPath_1[_i];
+                            defaultValue = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[path];
+                        }
+                        // Safety measure in case no value is found
+                        if (!defaultValue) {
+                            defaultValue = usedProp.defaultValue;
+                        }
+                        dynamicConditions = createConditionalStatement(staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions, defaultValue);
                         matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||';
@@ -436,41 +445,40 @@ conditionString = dynamicConditions.join(" ".concat(matchCondition, " "));
 }); };
-var generateDynamicNode = function (node, 
-/* tslint:disable variable-name */
-_compName, nodesLookup, propDefinitions, stateDefinitions) { return __awaiter(void 0, void 0, void 0, function () {
-    var localeTag, commentNode, usedReferenceValue, pathKeys, value, elementNode, spanTagWrapper, commentNode, spanTagWrapper, commentNode, spanTag;
+var generateDynamicNode = function (node, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure) { return __awaiter(void 0, void 0, void 0, function () {
+    var localeTag, commentNode, usedReferenceValue, elementNode, elementTag, spanTagWrapper, commentNode, spanTag;
     return __generator(this, function (_a) {
-        if (node.content.referenceType === 'locale') {
-            localeTag = HASTBuilders.createHTMLNode('span');
-            commentNode = HASTBuilders.createComment("Content for locale ".concat(node.content.id));
-            HASTUtils.addChildNode(localeTag, commentNode);
-            return [2 /*return*/, localeTag];
-        }
-        usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
-        if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
-            pathKeys = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean);
-            pathKeys.shift();
-            value = GenericUtils.getValueFromPath(pathKeys.join('.'), usedReferenceValue.defaultValue);
-            if (value) {
-                return [2 /*return*/, HASTBuilders.createTextNode(String(value))];
-            }
-        }
-        if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
-            elementNode = usedReferenceValue.defaultValue;
-            if (elementNode.content.key in nodesLookup) {
+        switch (_a.label) {
+            case 0:
+                if (node.content.referenceType === 'locale') {
+                    localeTag = HASTBuilders.createHTMLNode('span');
+                    commentNode = HASTBuilders.createComment("Content for locale ".concat(node.content.id));
+                    HASTUtils.addChildNode(localeTag, commentNode);
+                    return [2 /*return*/, localeTag];
+                }
+                usedReferenceValue = getValueFromReference(node.content.id, node.content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
+                if ((usedReferenceValue.type === 'object' || usedReferenceValue.type === 'array') &&
+                    usedReferenceValue.defaultValue) {
+                    // Let's say users are biding the prop to a node using something like this "fields.Title"
+                    // But the fields in the object is the value where the object is defined either in propDefinitions
+                    // or on the attrs. So, we just need to parsed the rest of the object path and get the value from the object.
+                    return [2 /*return*/, HASTBuilders.createTextNode(String(extractDefaultValueFromRefPath(usedReferenceValue.defaultValue, node.content.refPath)))];
+                }
+                if (!(usedReferenceValue.type === 'element')) return [3 /*break*/, 4];
+                elementNode = usedReferenceValue.defaultValue;
+                if (!elementNode) return [3 /*break*/, 3];
+                if (!(elementNode.content.key in nodesLookup)) return [3 /*break*/, 1];
                 return [2 /*return*/, nodesLookup[elementNode.content.key]];
-            }
-            spanTagWrapper = HASTBuilders.createHTMLNode('span');
-            commentNode = HASTBuilders.createComment("Content for slot ".concat(node.content.id));
-            HASTUtils.addChildNode(spanTagWrapper, commentNode);
-            return [2 /*return*/, spanTagWrapper];
+            case 1: return [4 /*yield*/, generateHtmlSyntax(elementNode, compName, nodesLookup, propDefinitions, stateDefinitions, subComponentOptions, structure)];
+            case 2:
+                elementTag = _a.sent();
+                return [2 /*return*/, elementTag];
+            case 3:
+                spanTagWrapper = HASTBuilders.createHTMLNode('span');
+                commentNode = HASTBuilders.createComment("Content for slot ".concat(node.content.id));
+                HASTUtils.addChildNode(spanTagWrapper, commentNode);
+                return [2 /*return*/, spanTagWrapper];
+            case 4:
+                spanTag = HASTBuilders.createHTMLNode('span');
+                HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue));
+                return [2 /*return*/, spanTag];
         }
-        if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue === undefined) {
-            spanTagWrapper = HASTBuilders.createHTMLNode('span');
-            commentNode = HASTBuilders.createComment("Content for slot ".concat(node.content.id));
-            HASTUtils.addChildNode(spanTagWrapper, commentNode);
-            return [2 /*return*/, spanTagWrapper];
-        }
-        spanTag = HASTBuilders.createHTMLNode('span');
-        HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue));
-        return [2 /*return*/, spanTag];
     });
@@ -480,3 +488,3 @@ }); };
     Object.keys(styles).forEach(function (styleKey) {
-        var _a;
+        var _a, _b;
         var style = styles[styleKey];
@@ -486,3 +494,3 @@ if (style.type === 'dynamic' && ((_a = style.content) === null || _a === void 0 ? void 0 : _a.referenceType) !== 'token') {
             if (referencedValue.type === 'string' || referencedValue.type === 'number') {
-                style = String(referencedValue.defaultValue);
+                style = String(extractDefaultValueFromRefPath(referencedValue.defaultValue, (_b = style === null || style === void 0 ? void 0 : style.content) === null || _b === void 0 ? void 0 : _b.refPath));
             }
@@ -552,3 +560,3 @@ node.content.style[styleKey] = typeof style === 'string' ? staticNode(style) : style;
                 var value = getValueFromReference(content.id, content.referenceType === 'prop' ? propDefinitions : stateDefinitions);
-                HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value.defaultValue));
+                HASTUtils.addAttributeToNode(htmlNode, attrKey, String(extractDefaultValueFromRefPath(value.defaultValue, content.refPath)));
                 break;
@@ -576,7 +584,7 @@ }
 var getValueFromReference = function (key, definitions) {
-    var usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key];
+    var usedReferenceValue = definitions[key.includes('?.') ? key.split('?.')[0] : key];
     if (!usedReferenceValue) {
         throw new HTMLComponentGeneratorError("Definition for ".concat(key, " is missing from ").concat(JSON.stringify(definitions, null, 2)));
     }
-    if (['string', 'number', 'object', 'element'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) === false) {
+    if (['string', 'number', 'object', 'element', 'array'].includes(usedReferenceValue === null || usedReferenceValue === void 0 ? void 0 : usedReferenceValue.type) === false) {
         throw new HTMLComponentGeneratorError("Attribute is using dynamic value, but received of type ".concat(JSON.stringify(usedReferenceValue, null, 2)));
@@ -590,2 +598,8 @@ }
 };
+var extractDefaultValueFromRefPath = function (propDefaultValue, refPath) {
+    if (typeof propDefaultValue !== 'object' || !(refPath === null || refPath === void 0 ? void 0 : refPath.length)) {
+        return propDefaultValue;
+    }
+    return GenericUtils.getValueFromPath(refPath.join('.'), propDefaultValue);
+};
 //# sourceMappingURL=node-handlers.js.map

package.json

 {
   "name": "@teleporthq/teleport-plugin-html-base-component",
-  "version": "0.37.3",
+  "version": "0.37.6",
   "description": "A plugin for handling the skeleton/baseline of a base html component",
@@ -27,9 +27,9 @@ "author": "teleportHQ",
   "dependencies": {
-    "@teleporthq/teleport-plugin-common": "^0.37.3",
-    "@teleporthq/teleport-plugin-css": "^0.37.3",
-    "@teleporthq/teleport-shared": "^0.37.3",
-    "@teleporthq/teleport-types": "^0.37.3",
-    "@teleporthq/teleport-uidl-builders": "^0.37.3"
+    "@teleporthq/teleport-plugin-common": "^0.37.6",
+    "@teleporthq/teleport-plugin-css": "^0.37.6",
+    "@teleporthq/teleport-shared": "^0.37.6",
+    "@teleporthq/teleport-types": "^0.37.6",
+    "@teleporthq/teleport-uidl-builders": "^0.37.6"
   },
-  "gitHead": "c4a91ebb3cddb547ff0a635ffe2036a609560434"
+  "gitHead": "463fe45a6f7a5300c06cf8f544c7b522a9ad99fe"
 }

src/node-handlers.ts

@@ -26,2 +26,3 @@ import {
   UIDLConditionalNode,
+  PropDefaultValueTypes,
 } from '@teleporthq/teleport-types'
@@ -147,3 +148,3 @@ import { join, relative } from 'path'
       const {
-        content: { referenceType, id },
+        content: { referenceType, id, refPath },
       } = reference
@@ -158,2 +159,12 @@
 
+          let defaultValue = usedProp.defaultValue
+          for (const path of refPath) {
+            defaultValue = (defaultValue as Record<string, unknown[]>)?.[path]
+          }
+
+          // Safety measure in case no value is found
+          if (!defaultValue) {
+            defaultValue = usedProp.defaultValue
+          }
+
           // Since we know the operand and the default value from the prop.
@@ -165,3 +176,3 @@ // We can try building the condition and check if the condition is true or false.
             staticValue !== undefined ? [{ operand: staticValue, operation: '===' }] : conditions,
-            usedProp.defaultValue
+            defaultValue
           )
@@ -622,7 +633,8 @@ const matchCondition = matchingCriteria && matchingCriteria === 'all' ? '&&' : '||'
   node,
-  /* tslint:disable variable-name */
-  _compName,
+  compName,
   nodesLookup,
   propDefinitions,
-  stateDefinitions
+  stateDefinitions,
+  subComponentOptions,
+  structure
 ): Promise<HastNode | HastText> => {
@@ -641,24 +653,36 @@ if (node.content.referenceType === 'locale') {
 
-  if (usedReferenceValue.type === 'object' && usedReferenceValue.defaultValue) {
+  if (
+    (usedReferenceValue.type === 'object' || usedReferenceValue.type === 'array') &&
+    usedReferenceValue.defaultValue
+  ) {
     // Let's say users are biding the prop to a node using something like this "fields.Title"
     // But the fields in the object is the value where the object is defined either in propDefinitions
     // or on the attrs. So, we just need to parsed the rest of the object path and get the value from the object.
-    const pathKeys: string[] = node.content.id.split(/\.|\[(['"]?)(.+?)\1\]/).filter(Boolean)
-    pathKeys.shift()
-
-    const value = GenericUtils.getValueFromPath(
-      pathKeys.join('.'),
-      usedReferenceValue.defaultValue as Record<string, UIDLPropDefinition>
+    return HASTBuilders.createTextNode(
+      String(
+        extractDefaultValueFromRefPath(
+          usedReferenceValue.defaultValue as Record<string, UIDLPropDefinition>,
+          node.content.refPath
+        )
+      )
     )
-
-    if (value) {
-      return HASTBuilders.createTextNode(String(value))
-    }
   }
 
-  if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue) {
+  if (usedReferenceValue.type === 'element') {
     const elementNode = usedReferenceValue.defaultValue as UIDLElementNode
-
-    if (elementNode.content.key in nodesLookup) {
-      return nodesLookup[elementNode.content.key]
+    if (elementNode) {
+      if (elementNode.content.key in nodesLookup) {
+        return nodesLookup[elementNode.content.key]
+      } else {
+        const elementTag = await generateHtmlSyntax(
+          elementNode,
+          compName,
+          nodesLookup,
+          propDefinitions,
+          stateDefinitions,
+          subComponentOptions,
+          structure
+        )
+        return elementTag
+      }
     }
@@ -672,9 +696,2 @@
 
-  if (usedReferenceValue.type === 'element' && usedReferenceValue.defaultValue === undefined) {
-    const spanTagWrapper = HASTBuilders.createHTMLNode('span')
-    const commentNode = HASTBuilders.createComment(`Content for slot ${node.content.id}`)
-    HASTUtils.addChildNode(spanTagWrapper, commentNode)
-    return spanTagWrapper
-  }
-
   const spanTag = HASTBuilders.createHTMLNode('span')
@@ -699,3 +716,5 @@ HASTUtils.addTextNode(spanTag, String(usedReferenceValue.defaultValue))
       if (referencedValue.type === 'string' || referencedValue.type === 'number') {
-        style = String(referencedValue.defaultValue)
+        style = String(
+          extractDefaultValueFromRefPath(referencedValue.defaultValue, style?.content?.refPath)
+        )
       }
@@ -794,3 +813,7 @@ node.content.style[styleKey] = typeof style === 'string' ? staticNode(style) : style
 
-        HASTUtils.addAttributeToNode(htmlNode, attrKey, String(value.defaultValue))
+        HASTUtils.addAttributeToNode(
+          htmlNode,
+          attrKey,
+          String(extractDefaultValueFromRefPath(value.defaultValue, content.refPath))
+        )
         break
@@ -823,3 +846,3 @@ }
 ): UIDLPropDefinition | undefined => {
-  const usedReferenceValue = definitions[key.includes('.') ? key.split('.')[0] : key]
+  const usedReferenceValue = definitions[key.includes('?.') ? key.split('?.')[0] : key]
 
@@ -832,3 +855,5 @@ if (!usedReferenceValue) {
 
-  if (['string', 'number', 'object', 'element'].includes(usedReferenceValue?.type) === false) {
+  if (
+    ['string', 'number', 'object', 'element', 'array'].includes(usedReferenceValue?.type) === false
+  ) {
     throw new HTMLComponentGeneratorError(
@@ -858,1 +883,12 @@ `Attribute is using dynamic value, but received of type ${JSON.stringify(
 }
+
+const extractDefaultValueFromRefPath = (
+  propDefaultValue: PropDefaultValueTypes,
+  refPath?: string[]
+) => {
+  if (typeof propDefaultValue !== 'object' || !refPath?.length) {
+    return propDefaultValue
+  }
+
+  return GenericUtils.getValueFromPath(refPath.join('.'), propDefaultValue) as PropDefaultValueTypes
+}

No alert changes

Improved metrics

Total package byte prevSize

234581

increased by2%

Lines of code

2493

increased by2.63%

Dependency changes

• Updated@teleporthq/teleport-plugin-common@^0.37.6

• Updated@teleporthq/teleport-plugin-css@^0.37.6

• Updated@teleporthq/teleport-shared@^0.37.6

• Updated@teleporthq/teleport-types@^0.37.6

• Updated@teleporthq/teleport-uidl-builders@^0.37.6