@teleporthq/teleport-shared 0.41.0 → 0.42.0

package/dist/cjs/utils/uidl-utils.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractExternalDependencies = exports.removeChildNodes = exports.findFirstElementNode = exports.transformAttributesAssignmentsToJson = exports.transformStylesAssignmentsToJson = exports.transformStringAssignmentToJson = exports.transformDynamicStyles = exports.cleanupDynamicStyles = exports.splitDynamicAndStaticStyles = exports.traverseRepeats = exports.traverseElements = exports.traverseResources = exports.traverseNodes = exports.cloneObject = exports.prefixAssetsPath = exports.getRepeatIteratorNameAndKey = exports.getComponentClassName = exports.getComponentFolderPath = exports.getTemplateFileName = exports.getStyleFileName = exports.getComponentFileName = exports.setFriendlyOutputOptions = exports.createWebComponentFriendlyName = exports.extractRoutes = void 0;
+exports.extractExternalDependencies = exports.removeChildNodes = exports.findFirstElementNode = exports.transformAttributesAssignmentsToJson = exports.generateIdWithRefPath = exports.transformStylesAssignmentsToJson = exports.transformStringAssignmentToJson = exports.transformDynamicStyles = exports.cleanupDynamicStyles = exports.splitDynamicAndStaticStyles = exports.traverseRepeats = exports.traverseElements = exports.traverseResources = exports.traverseNodes = exports.cloneObject = exports.prefixAssetsPath = exports.getRepeatIteratorNameAndKey = exports.getComponentClassName = exports.getComponentFolderPath = exports.getTemplateFileName = exports.getStyleFileName = exports.getComponentFileName = exports.setFriendlyOutputOptions = exports.createWebComponentFriendlyName = exports.extractRoutes = void 0;
 var string_utils_1 = require("./string-utils");
 var path_1 = require("path");
 var __1 = require("..");
@@ -19,7 +19,11 @@ var extractRoutes = function (rootComponent) {
     // Assuming root element starts with a UIDLElementNode
     var rootElement = rootComponent.node.content;
     // Look for conditional nodes in the first level children of the root element
-    return rootElement.children.filter(function (child) { return child.type === 'conditional' && child.content.reference.content.id === 'route'; });
+    return rootElement.children.filter(function (child) {
+        return child.type === 'conditional' &&
+            child.content.reference.type === 'dynamic' &&
+            child.content.reference.content.id === 'route';
+    });
 };
 exports.extractRoutes = extractRoutes;
 var createWebComponentFriendlyName = function (componentName) {
@@ -116,6 +120,9 @@ var prefixAssetsPath = function (originalString, assets) {
     var prefix = assets.prefix, _a = assets.mappings, mappings = _a === void 0 ? {} : _a, identifier = assets.identifier;
     var assetName = (0, path_1.basename)(originalString);
     var decodedAssetName = decodeURIComponent(assetName);
+    // Extract the full path from the original string (normalize to remove leading slash)
+    var fullPath = originalString.startsWith('/') ? originalString.slice(1) : originalString;
+    var decodedFullPath = decodeURIComponent(fullPath);
     /*
       If the value is missing from the mapping, it means
        - asset is missing in the project packer
@@ -123,15 +130,27 @@ var prefixAssetsPath = function (originalString, assets) {
   
       Note: We need to check for decoded asset name as well as for some special characters such as katakana / kanjis / hiraganas
       the src / url leading to the asset can be encoded and we need to check the decoded version against the asset mapping
+  
+      Try full-path lookup first (to handle duplicate filenames in different folders),
+      then fall back to basename-only (for backward compatibility)
     */
-    if (!(typeof mappings[assetName] === 'string') &&
+    if (!(typeof mappings[fullPath] === 'string') &&
+        !(typeof mappings[decodedFullPath] === 'string') &&
+        !(typeof mappings[assetName] === 'string') &&
         !(typeof mappings[decodedAssetName] === 'string')) {
         return originalString;
     }
     /*
       need to use either the original or decoded assetName to retrieve its mapping if there is one
+      Priority: fullPath > decodedFullPath > assetName > decodedAssetName
     */
-    var assetNameUsedForMapping = typeof mappings[assetName] === 'string' ? assetName : decodedAssetName;
+    var assetNameUsedForMapping = typeof mappings[fullPath] === 'string'
+        ? fullPath
+        : typeof mappings[decodedFullPath] === 'string'
+            ? decodedFullPath
+            : typeof mappings[assetName] === 'string'
+                ? assetName
+                : decodedAssetName;
     /*
       If the value from the mapping is an empty string
       we need to not join it in the return path as it would append
@@ -155,15 +174,32 @@ exports.cloneObject = cloneObject;
 // This function parses all the UIDLNodes in a tree structure
 // enabling a function to be applied to each individual node
 var traverseNodes = function (node, fn, parent) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     if (parent === void 0) { parent = null; }
+    if (!node.type) {
+        return;
+    }
     fn(node, parent);
     switch (node.type) {
         case 'element':
-            var _d = node.content, attrs_1 = _d.attrs, children = _d.children, style = _d.style, abilities = _d.abilities, referencedStyles = _d.referencedStyles;
+            // Check if this element node is wrapping a data-source node
+            // This happens when node.content has a 'type' property that is a data-source type
+            if (node.content &&
+                typeof node.content === 'object' &&
+                'type' in node.content &&
+                (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')) {
+                // Treat the entire node.content as a data-source node
+                (0, exports.traverseNodes)(node.content, fn, node);
+                break;
+            }
+            var _o = node.content, attrs_1 = _o.attrs, children = _o.children, style = _o.style, abilities = _o.abilities, referencedStyles = _o.referencedStyles;
             if (attrs_1) {
                 Object.keys(attrs_1).forEach(function (attrKey) {
-                    (0, exports.traverseNodes)(attrs_1[attrKey], fn, node);
+                    var attr = attrs_1[attrKey];
+                    if (attr.type === 'object') {
+                        return;
+                    }
+                    (0, exports.traverseNodes)(attr, fn, node);
                 });
             }
             if (referencedStyles && Object.keys(referencedStyles).length > 0) {
@@ -199,6 +235,9 @@ var traverseNodes = function (node, fn, parent) {
             if (node.content.nodes.empty) {
                 (0, exports.traverseNodes)(node.content.nodes.empty, fn);
             }
+            if (node.content.nodes.loading) {
+                (0, exports.traverseNodes)(node.content.nodes.loading, fn);
+            }
             break;
         case 'cms-item':
             (0, exports.traverseNodes)(node.content.nodes.success, fn);
@@ -209,6 +248,49 @@ var traverseNodes = function (node, fn, parent) {
                 (0, exports.traverseNodes)(node.content.nodes.loading, fn);
             }
             break;
+        case 'cms-mixed-type':
+            if ((_d = node.content.nodes) === null || _d === void 0 ? void 0 : _d.fallback) {
+                (0, exports.traverseNodes)(node.content.nodes.fallback, fn);
+            }
+            if ((_e = node.content.nodes) === null || _e === void 0 ? void 0 : _e.error) {
+                (0, exports.traverseNodes)(node.content.nodes.error, fn);
+            }
+            Object.keys(((_f = node.content) === null || _f === void 0 ? void 0 : _f.mappings) || {}).forEach(function (key) {
+                (0, exports.traverseNodes)(node.content.mappings[key], fn);
+            });
+            break;
+        case 'data-source-item':
+            if ((_g = node.content.nodes) === null || _g === void 0 ? void 0 : _g.success) {
+                (0, exports.traverseNodes)(node.content.nodes.success, fn);
+            }
+            if ((_h = node.content.nodes) === null || _h === void 0 ? void 0 : _h.error) {
+                (0, exports.traverseNodes)(node.content.nodes.error, fn);
+            }
+            if ((_j = node.content.nodes) === null || _j === void 0 ? void 0 : _j.loading) {
+                (0, exports.traverseNodes)(node.content.nodes.loading, fn);
+            }
+            if (node.content.children) {
+                node.content.children.forEach(function (child) {
+                    (0, exports.traverseNodes)(child, fn, node);
+                });
+            }
+            break;
+        case 'data-source-list':
+            if ((_k = node.content.nodes) === null || _k === void 0 ? void 0 : _k.success) {
+                (0, exports.traverseNodes)(node.content.nodes.success, fn);
+            }
+            if ((_l = node.content.nodes) === null || _l === void 0 ? void 0 : _l.error) {
+                (0, exports.traverseNodes)(node.content.nodes.error, fn);
+            }
+            if ((_m = node.content.nodes) === null || _m === void 0 ? void 0 : _m.loading) {
+                (0, exports.traverseNodes)(node.content.nodes.loading, fn);
+            }
+            if (node.content.children) {
+                node.content.children.forEach(function (child) {
+                    (0, exports.traverseNodes)(child, fn, node);
+                });
+            }
+            break;
         case 'repeat':
             (0, exports.traverseNodes)(node.content.node, fn, node);
             (0, exports.traverseNodes)(node.content.dataSource, fn, node);
@@ -236,8 +318,18 @@ var traverseNodes = function (node, fn, parent) {
 };
 exports.traverseNodes = traverseNodes;
 var traverseResources = function (node, fn) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     switch (node.type) {
         case 'element':
+            // Check if this element node is wrapping a data-source node
+            if (node.content &&
+                typeof node.content === 'object' &&
+                'type' in node.content &&
+                (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')) {
+                // Treat the entire node.content as a data-source node
+                (0, exports.traverseResources)(node.content, fn);
+                break;
+            }
             var children = node.content.children;
             if (children) {
                 children.forEach(function (child) {
@@ -259,6 +351,9 @@ var traverseResources = function (node, fn) {
             if (node.content.nodes.empty) {
                 (0, exports.traverseResources)(node.content.nodes.empty, fn);
             }
+            if (node.content.nodes.loading) {
+                (0, exports.traverseResources)(node.content.nodes.loading, fn);
+            }
             break;
         case 'cms-item':
             (0, exports.traverseResources)(node.content.nodes.success, fn);
@@ -269,6 +364,39 @@ var traverseResources = function (node, fn) {
                 (0, exports.traverseResources)(node.content.nodes.loading, fn);
             }
             break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                (0, exports.traverseResources)(node.content.nodes.fallback, fn);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                (0, exports.traverseResources)(node.content.nodes.error, fn);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                (0, exports.traverseResources)(node.content.mappings[key], fn);
+            });
+            break;
+        case 'data-source-item':
+            if ((_d = node.content.nodes) === null || _d === void 0 ? void 0 : _d.success) {
+                (0, exports.traverseResources)(node.content.nodes.success, fn);
+            }
+            if ((_e = node.content.nodes) === null || _e === void 0 ? void 0 : _e.error) {
+                (0, exports.traverseResources)(node.content.nodes.error, fn);
+            }
+            if ((_f = node.content.nodes) === null || _f === void 0 ? void 0 : _f.loading) {
+                (0, exports.traverseResources)(node.content.nodes.loading, fn);
+            }
+            break;
+        case 'data-source-list':
+            if ((_g = node.content.nodes) === null || _g === void 0 ? void 0 : _g.success) {
+                (0, exports.traverseResources)(node.content.nodes.success, fn);
+            }
+            if ((_h = node.content.nodes) === null || _h === void 0 ? void 0 : _h.error) {
+                (0, exports.traverseResources)(node.content.nodes.error, fn);
+            }
+            if ((_j = node.content.nodes) === null || _j === void 0 ? void 0 : _j.loading) {
+                (0, exports.traverseResources)(node.content.nodes.loading, fn);
+            }
+            break;
         case 'repeat':
             (0, exports.traverseResources)(node.content.node, fn);
             break;
@@ -293,17 +421,38 @@ exports.traverseResources = traverseResources;
 var traverseStyleObject = function (style) {
     Object.keys(style).forEach(function (styleKey) {
         var styleValue = style[styleKey];
-        // TODO: cross-check the support for the strings as content for styles
         if (styleValue.type !== 'static' && styleValue.type !== 'dynamic') {
-            throw new Error("We support only 'static' and 'dynamic' content for styles");
+            throw new Error("We support only 'static' and 'dynamic' content for styles \n\n        Received \n\n        ".concat(JSON.stringify(styleValue, null, 2)));
         }
     });
 };
 // Parses a node structure recursively and applies a function to each UIDLElement instance
 var traverseElements = function (node, fn) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (!node || !node.type) {
+        return;
+    }
     switch (node.type) {
         case 'element':
+            // Check if this element node is wrapping a data-source node
+            if (node.content &&
+                typeof node.content === 'object' &&
+                'type' in node.content &&
+                (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')) {
+                // Treat the entire node.content as a data-source node
+                (0, exports.traverseElements)(node.content, fn);
+                break;
+            }
             fn(node.content);
+            if (node.content.attrs) {
+                for (var _i = 0, _k = Object.keys(node.content.attrs); _i < _k.length; _i++) {
+                    var attrKey = _k[_i];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
             if (node.content.children) {
                 node.content.children.forEach(function (child) {
                     (0, exports.traverseElements)(child, fn);
@@ -318,12 +467,24 @@ var traverseElements = function (node, fn) {
             if (node.content.nodes.loading) {
                 (0, exports.traverseElements)(node.content.nodes.loading, fn);
             }
+            if (node.content.attrs) {
+                for (var _l = 0, _m = Object.keys(node.content.attrs); _l < _m.length; _l++) {
+                    var attrKey = _m[_l];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
             break;
         case 'cms-list-repeater':
             (0, exports.traverseElements)(node.content.nodes.list, fn);
             if (node.content.nodes.empty) {
                 (0, exports.traverseElements)(node.content.nodes.empty, fn);
             }
+            if (node.content.nodes.loading) {
+                (0, exports.traverseElements)(node.content.nodes.loading, fn);
+            }
             break;
         case 'cms-item':
             (0, exports.traverseElements)(node.content.nodes.success, fn);
@@ -333,6 +494,75 @@ var traverseElements = function (node, fn) {
             if (node.content.nodes.loading) {
                 (0, exports.traverseElements)(node.content.nodes.loading, fn);
             }
+            if (node.content.attrs) {
+                for (var _o = 0, _p = Object.keys(node.content.attrs); _o < _p.length; _o++) {
+                    var attrKey = _p[_o];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
+            break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                (0, exports.traverseElements)(node.content.nodes.fallback, fn);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                (0, exports.traverseElements)(node.content.nodes.error, fn);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                (0, exports.traverseElements)(node.content.mappings[key], fn);
+            });
+            if (node.content.attrs) {
+                for (var _q = 0, _r = Object.keys(node.content.attrs); _q < _r.length; _q++) {
+                    var attrKey = _r[_q];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
+            break;
+        case 'data-source-item':
+            if ((_d = node.content.nodes) === null || _d === void 0 ? void 0 : _d.success) {
+                (0, exports.traverseElements)(node.content.nodes.success, fn);
+            }
+            if ((_e = node.content.nodes) === null || _e === void 0 ? void 0 : _e.error) {
+                (0, exports.traverseElements)(node.content.nodes.error, fn);
+            }
+            if ((_f = node.content.nodes) === null || _f === void 0 ? void 0 : _f.loading) {
+                (0, exports.traverseElements)(node.content.nodes.loading, fn);
+            }
+            if (node.content.attrs) {
+                for (var _s = 0, _t = Object.keys(node.content.attrs); _s < _t.length; _s++) {
+                    var attrKey = _t[_s];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
+            break;
+        case 'data-source-list':
+            if ((_g = node.content.nodes) === null || _g === void 0 ? void 0 : _g.success) {
+                (0, exports.traverseElements)(node.content.nodes.success, fn);
+            }
+            if ((_h = node.content.nodes) === null || _h === void 0 ? void 0 : _h.error) {
+                (0, exports.traverseElements)(node.content.nodes.error, fn);
+            }
+            if ((_j = node.content.nodes) === null || _j === void 0 ? void 0 : _j.loading) {
+                (0, exports.traverseElements)(node.content.nodes.loading, fn);
+            }
+            if (node.content.attrs) {
+                for (var _u = 0, _v = Object.keys(node.content.attrs); _u < _v.length; _u++) {
+                    var attrKey = _v[_u];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
             break;
         case 'repeat':
             (0, exports.traverseElements)(node.content.node, fn);
@@ -352,13 +582,35 @@ var traverseElements = function (node, fn) {
         case 'expr':
             break;
         default:
-            throw new Error("traverseElements was given an unsupported node type : ".concat(node.type, ", ").concat(JSON.stringify(node, null, 2)));
+            throw new Error("traverseElements was given an unsupported node type : \n ".concat(JSON.stringify(node, null, 2)));
     }
 };
 exports.traverseElements = traverseElements;
 var traverseRepeats = function (node, fn) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (!node || !node.type) {
+        return;
+    }
     switch (node.type) {
         case 'element':
+            // Check if this element node is wrapping a data-source node
+            if (node.content &&
+                typeof node.content === 'object' &&
+                'type' in node.content &&
+                (node.content.type === 'data-source-item' || node.content.type === 'data-source-list')) {
+                // Treat the entire node.content as a data-source node
+                (0, exports.traverseRepeats)(node.content, fn);
+                break;
+            }
+            if (node.content.attrs) {
+                for (var _i = 0, _k = Object.keys(node.content.attrs); _i < _k.length; _i++) {
+                    var attrKey = _k[_i];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
             if (node.content.children) {
                 node.content.children.forEach(function (child) {
                     (0, exports.traverseRepeats)(child, fn);
@@ -373,12 +625,24 @@ var traverseRepeats = function (node, fn) {
             if (node.content.nodes.loading) {
                 (0, exports.traverseRepeats)(node.content.nodes.loading, fn);
             }
+            if (node.content.attrs) {
+                for (var _l = 0, _m = Object.keys(node.content.attrs); _l < _m.length; _l++) {
+                    var attrKey = _m[_l];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
             break;
         case 'cms-list-repeater':
             (0, exports.traverseRepeats)(node.content.nodes.list, fn);
             if (node.content.nodes.empty) {
                 (0, exports.traverseRepeats)(node.content.nodes.empty, fn);
             }
+            if (node.content.nodes.loading) {
+                (0, exports.traverseRepeats)(node.content.nodes.loading, fn);
+            }
             break;
         case 'cms-item':
             (0, exports.traverseRepeats)(node.content.nodes.success, fn);
@@ -388,6 +652,35 @@ var traverseRepeats = function (node, fn) {
             if (node.content.nodes.loading) {
                 (0, exports.traverseRepeats)(node.content.nodes.loading, fn);
             }
+            if (node.content.attrs) {
+                for (var _o = 0, _p = Object.keys(node.content.attrs); _o < _p.length; _o++) {
+                    var attrKey = _p[_o];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
+            break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                (0, exports.traverseRepeats)(node.content.nodes.fallback, fn);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                (0, exports.traverseRepeats)(node.content.nodes.error, fn);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                (0, exports.traverseRepeats)(node.content.mappings[key], fn);
+            });
+            if (node.content.attrs) {
+                for (var _q = 0, _r = Object.keys(node.content.attrs); _q < _r.length; _q++) {
+                    var attrKey = _r[_q];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
             break;
         case 'repeat':
             fn(node.content);
@@ -401,6 +694,28 @@ var traverseRepeats = function (node, fn) {
                 (0, exports.traverseRepeats)(node.content.fallback, fn);
             }
             break;
+        case 'data-source-item':
+            if ((_d = node.content.nodes) === null || _d === void 0 ? void 0 : _d.success) {
+                (0, exports.traverseRepeats)(node.content.nodes.success, fn);
+            }
+            if ((_e = node.content.nodes) === null || _e === void 0 ? void 0 : _e.error) {
+                (0, exports.traverseRepeats)(node.content.nodes.error, fn);
+            }
+            if ((_f = node.content.nodes) === null || _f === void 0 ? void 0 : _f.loading) {
+                (0, exports.traverseRepeats)(node.content.nodes.loading, fn);
+            }
+            break;
+        case 'data-source-list':
+            if ((_g = node.content.nodes) === null || _g === void 0 ? void 0 : _g.success) {
+                (0, exports.traverseRepeats)(node.content.nodes.success, fn);
+            }
+            if ((_h = node.content.nodes) === null || _h === void 0 ? void 0 : _h.error) {
+                (0, exports.traverseRepeats)(node.content.nodes.error, fn);
+            }
+            if ((_j = node.content.nodes) === null || _j === void 0 ? void 0 : _j.loading) {
+                (0, exports.traverseRepeats)(node.content.nodes.loading, fn);
+            }
+            break;
         case 'static':
         case 'dynamic':
         case 'raw':
@@ -526,11 +841,11 @@ var transformStylesAssignmentsToJson = function (styleObject) {
                 acc[key] = styleContentAtKey;
                 return acc;
             }
-            if (type === 'dynamic') {
+            if (type === 'dynamic' && content.referenceType !== 'global') {
                 if (['state', 'prop'].includes(content === null || content === void 0 ? void 0 : content.referenceType)) {
                     acc[key] = {
                         type: type,
-                        content: __assign(__assign({}, content), { id: __1.StringUtils.createStateOrPropStoringValue(content.id) }),
+                        content: __assign(__assign({}, content), { id: (0, exports.generateIdWithRefPath)(content.id, content.refPath) }),
                     };
                 }
                 else {
@@ -544,6 +859,21 @@ var transformStylesAssignmentsToJson = function (styleObject) {
     return newStyleObject;
 };
 exports.transformStylesAssignmentsToJson = transformStylesAssignmentsToJson;
+var generateIdWithRefPath = function (contentId, refPath) {
+    var processedId = contentId;
+    if (refPath) {
+        var processedRefPath = refPath.reduce(function (acc, path) {
+            return "".concat(acc, "?.['").concat(path, "']");
+        }, '');
+        // This is a bit ugly, but in some cases props are parsed twice or already generated.
+        // To avoid possible bugs, this should be a good safety measure
+        if (!processedId.includes(processedRefPath)) {
+            processedId = "".concat(processedId).concat(processedRefPath);
+        }
+    }
+    return __1.StringUtils.createStateOrPropStoringValue(processedId);
+};
+exports.generateIdWithRefPath = generateIdWithRefPath;
 /*
   All the props passed to the components are transformed to a unique case
   to minimize the collision of using cameCalse in one place and dashCase in
@@ -562,34 +892,47 @@ var transformAttributesAssignmentsToJson = function (attributesObject, isLocalCo
             return acc;
         }
         if (!Array.isArray(attributeContent) && entityType === 'object') {
-            // if this value is already properly declared, make sure it is not
             var type = attributeContent.type;
-            if (['static', 'import', 'raw', 'expr'].indexOf(type) !== -1) {
-                var propKey = isLocalComponent ? __1.StringUtils.createStateOrPropStoringValue(key) : key;
-                acc[propKey] = attributeContent;
-                return acc;
-            }
-            if (type === 'comp-style') {
-                acc[key] = {
-                    type: 'comp-style',
-                    content: __1.StringUtils.createStateOrPropStoringValue(attributeContent.content),
-                };
-                return acc;
-            }
-            var content = attributeContent.content;
-            if (type === 'dynamic') {
-                if (['state', 'prop'].includes(content === null || content === void 0 ? void 0 : content.referenceType)) {
+            switch (type) {
+                case 'import':
+                case 'static':
+                case 'raw':
+                case 'expr': {
+                    var propKey = isLocalComponent ? __1.StringUtils.createStateOrPropStoringValue(key) : key;
+                    acc[propKey] = attributeContent;
+                    return acc;
+                }
+                case 'comp-style': {
                     acc[key] = {
-                        type: type,
-                        content: __assign(__assign({}, content), { id: __1.StringUtils.createStateOrPropStoringValue(content.id) }),
+                        type: 'comp-style',
+                        content: __1.StringUtils.createStateOrPropStoringValue(attributeContent.content),
                     };
+                    return acc;
                 }
-                else {
+                case 'dynamic': {
+                    var content = attributeContent.content;
+                    // global id's dont need to be transformed. As they are constants and each one is handled by the generator
+                    // depending on the context and the framework.
+                    if (['state', 'prop'].includes(content === null || content === void 0 ? void 0 : content.referenceType) &&
+                        content.referenceType !== 'global') {
+                        acc[key] = {
+                            type: type,
+                            content: __assign(__assign({}, content), { id: (0, exports.generateIdWithRefPath)(content.id, content.refPath) }),
+                        };
+                    }
+                    else {
+                        acc[key] = attributeContent;
+                    }
+                    return acc;
+                }
+                case 'object':
+                case 'element':
                     acc[key] = attributeContent;
+                    return acc;
+                default: {
+                    throw new Error("transformAttributesAssignmentsToJson encountered a style value that is not supported ".concat(JSON.stringify(attributeContent, null, 2)));
                 }
-                return acc;
             }
-            throw new Error("transformAttributesAssignmentsToJson encountered a style value that is not supported ".concat(JSON.stringify(attributeContent, null, 2)));
         }
     }, newAttrObject);
     return newAttrObject;
@@ -613,6 +956,7 @@ var findFirstElementNode = function (node) {
 };
 exports.findFirstElementNode = findFirstElementNode;
 var removeChildNodes = function (node, criteria) {
+    var _a, _b, _c;
     switch (node.type) {
         case 'element':
             if (node.content.children) {
@@ -639,6 +983,9 @@ var removeChildNodes = function (node, criteria) {
             if (node.content.nodes.empty) {
                 (0, exports.removeChildNodes)(node.content.nodes.empty, criteria);
             }
+            if (node.content.nodes.loading) {
+                (0, exports.removeChildNodes)(node.content.nodes.loading, criteria);
+            }
             break;
         case 'cms-item':
             (0, exports.removeChildNodes)(node.content.nodes.success, criteria);
@@ -649,6 +996,17 @@ var removeChildNodes = function (node, criteria) {
                 (0, exports.removeChildNodes)(node.content.nodes.loading, criteria);
             }
             break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                (0, exports.removeChildNodes)(node.content.nodes.fallback, criteria);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                (0, exports.removeChildNodes)(node.content.nodes.error, criteria);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                (0, exports.removeChildNodes)(node.content.mappings[key], criteria);
+            });
+            break;
         case 'conditional':
             (0, exports.removeChildNodes)(node.content.node, criteria);
             break;