@teleporthq/teleport-shared - npm Package Compare versions

Comparing version 0.35.0-alpha.0 to 0.35.0

__tests__/utils/string-utils.ts

@@ -135,2 +135,5 @@ import {
   })
+  it('works with single upper case words', () => {
+    expect(camelCaseToDashCase('AiAmAComponent')).toBe('ai-am-a-component')
+  })
 })
@@ -137,0 +140,0 @@

dist/cjs/utils/string-utils.js

@@ -5,3 +5,3 @@ "use strict";
 var camelCaseToDashCase = function (str) {
-    return str.replace(/([a-z])(?=[A-Z])|([A-Z0-9][A-Z])(?=[A-Z][a-z])/g, '$1$2-').toLowerCase();
+    return str.replace(/([a-z])(?=[A-Z])|([A-Z0-9])(?=[A-Z][a-z])/g, '$1$2-').toLowerCase();
 };
@@ -8,0 +8,0 @@ exports.camelCaseToDashCase = camelCaseToDashCase;

dist/cjs/utils/uidl-utils.d.ts

@@ -39,3 +39,3 @@ import { ComponentUIDL, UIDLStyleDefinitions, UIDLConditionalNode, UIDLElement, UIDLNode, UIDLStaticValue, UIDLAttributeValue, UIDLDynamicReference, UIDLRepeatContent, UIDLRepeatMeta, UIDLElementNode, UIDLDependency, UIDLStyleValue, UIDLStyleSheetContent, UIDLComponentStyleReference, UIDLRootComponent, UIDLResourceItem, GeneratorOptions } from '@teleporthq/teleport-types';
 export declare const transformStylesAssignmentsToJson: (styleObject: Record<string, unknown>) => UIDLStyleDefinitions;
-export declare const transformAttributesAssignmentsToJson: (attributesObject: Record<string, unknown>) => Record<string, UIDLAttributeValue>;
+export declare const transformAttributesAssignmentsToJson: (attributesObject: Record<string, unknown>, isLocalComponent?: boolean) => Record<string, UIDLAttributeValue>;
 export declare const findFirstElementNode: (node: UIDLNode) => UIDLElementNode;
@@ -42,0 +42,0 @@ export declare const removeChildNodes: (node: UIDLNode, criteria: (element: UIDLNode) => boolean) => void;

dist/cjs/utils/uidl-utils.js

@@ -22,3 +22,7 @@ "use strict";
     // 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';
+    });
 };
@@ -111,5 +115,8 @@ exports.extractRoutes = extractRoutes;
     }
-    if (!originalString.startsWith('/')) {
+    if (typeof originalString !== 'string') {
         return originalString;
     }
+    if (!(originalString === null || originalString === void 0 ? void 0 : originalString.startsWith('/'))) {
+        return originalString;
+    }
     var prefix = assets.prefix, _a = assets.mappings, mappings = _a === void 0 ? {} : _a, identifier = assets.identifier;
@@ -157,3 +164,3 @@ var assetName = (0, path_1.basename)(originalString);
 var traverseNodes = function (node, fn, parent) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     if (parent === void 0) { parent = null; }
@@ -163,3 +170,3 @@ fn(node, parent);
         case 'element':
-            var _d = node.content, attrs_1 = _d.attrs, children = _d.children, style = _d.style, abilities = _d.abilities, referencedStyles = _d.referencedStyles;
+            var _g = node.content, attrs_1 = _g.attrs, children = _g.children, style = _g.style, abilities = _g.abilities, referencedStyles = _g.referencedStyles;
             if (attrs_1) {
@@ -213,2 +220,13 @@ Object.keys(attrs_1).forEach(function (attrKey) {
             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 'repeat':
@@ -241,2 +259,3 @@ (0, exports.traverseNodes)(node.content.node, fn, node);
 var traverseResources = function (node, fn) {
+    var _a, _b, _c;
     switch (node.type) {
@@ -275,2 +294,13 @@ case 'element':
             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 'repeat':
@@ -300,5 +330,4 @@ (0, exports.traverseResources)(node.content.node, fn);
         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)));
         }
@@ -309,5 +338,15 @@ });
 var traverseElements = function (node, fn) {
+    var _a, _b, _c;
     switch (node.type) {
         case 'element':
             fn(node.content);
+            if (node.content.attrs) {
+                for (var _i = 0, _d = Object.keys(node.content.attrs); _i < _d.length; _i++) {
+                    var attrKey = _d[_i];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
             if (node.content.children) {
@@ -327,2 +366,11 @@ node.content.children.forEach(function (child) {
             }
+            if (node.content.attrs) {
+                for (var _e = 0, _f = Object.keys(node.content.attrs); _e < _f.length; _e++) {
+                    var attrKey = _f[_e];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
             break;
@@ -343,3 +391,32 @@ case 'cms-list-repeater':
             }
+            if (node.content.attrs) {
+                for (var _g = 0, _h = Object.keys(node.content.attrs); _g < _h.length; _g++) {
+                    var attrKey = _h[_g];
+                    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 _j = 0, _k = Object.keys(node.content.attrs); _j < _k.length; _j++) {
+                    var attrKey = _k[_j];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseElements)(attrValue, fn);
+                    }
+                }
+            }
+            break;
         case 'repeat':
@@ -363,3 +440,3 @@ (0, exports.traverseElements)(node.content.node, fn);
         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)));
     }
@@ -369,4 +446,14 @@ };
 var traverseRepeats = function (node, fn) {
+    var _a, _b, _c;
     switch (node.type) {
         case 'element':
+            if (node.content.attrs) {
+                for (var _i = 0, _d = Object.keys(node.content.attrs); _i < _d.length; _i++) {
+                    var attrKey = _d[_i];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
             if (node.content.children) {
@@ -386,2 +473,11 @@ node.content.children.forEach(function (child) {
             }
+            if (node.content.attrs) {
+                for (var _e = 0, _f = Object.keys(node.content.attrs); _e < _f.length; _e++) {
+                    var attrKey = _f[_e];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
             break;
@@ -402,3 +498,32 @@ case 'cms-list-repeater':
             }
+            if (node.content.attrs) {
+                for (var _g = 0, _h = Object.keys(node.content.attrs); _g < _h.length; _g++) {
+                    var attrKey = _h[_g];
+                    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 _j = 0, _k = Object.keys(node.content.attrs); _j < _k.length; _j++) {
+                    var attrKey = _k[_j];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        (0, exports.traverseRepeats)(attrValue, fn);
+                    }
+                }
+            }
+            break;
         case 'repeat':
@@ -559,4 +684,11 @@ fn(node.content);
 exports.transformStylesAssignmentsToJson = transformStylesAssignmentsToJson;
-var transformAttributesAssignmentsToJson = function (attributesObject) {
-    var newStyleObject = {};
+/*
+  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
+  another place. So, all the attrs that are being passed to the local compoenents
+  need to be transformed since these are basically props.
+*/
+var transformAttributesAssignmentsToJson = function (attributesObject, isLocalComponent) {
+    if (isLocalComponent === void 0) { isLocalComponent = false; }
+    var newAttrObject = {};
     Object.keys(attributesObject).reduce(function (acc, key) {
@@ -566,36 +698,47 @@ var attributeContent = attributesObject[key];
         if (['string', 'number'].indexOf(entityType) !== -1) {
-            acc[key] = (0, exports.transformStringAssignmentToJson)(attributeContent);
+            var propKey = isLocalComponent ? __1.StringUtils.createStateOrPropStoringValue(key) : key;
+            acc[propKey] = (0, exports.transformStringAssignmentToJson)(attributeContent);
             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) {
-                acc[key] = 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;
+                    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) }),
+                        };
+                    }
+                    else {
+                        acc[key] = attributeContent;
+                    }
+                    return acc;
+                }
+                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)));
         }
-    }, newStyleObject);
-    return newStyleObject;
+    }, newAttrObject);
+    return newAttrObject;
 };
@@ -621,2 +764,3 @@ exports.transformAttributesAssignmentsToJson = transformAttributesAssignmentsToJson;
 var removeChildNodes = function (node, criteria) {
+    var _a, _b, _c;
     switch (node.type) {
@@ -658,2 +802,13 @@ case 'element':
             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':
@@ -660,0 +815,0 @@ (0, exports.removeChildNodes)(node.content.node, criteria);

dist/esm/utils/string-utils.js

 export var camelCaseToDashCase = function (str) {
-    return str.replace(/([a-z])(?=[A-Z])|([A-Z0-9][A-Z])(?=[A-Z][a-z])/g, '$1$2-').toLowerCase();
+    return str.replace(/([a-z])(?=[A-Z])|([A-Z0-9])(?=[A-Z][a-z])/g, '$1$2-').toLowerCase();
 };
@@ -4,0 +4,0 @@ export var dashCaseToCamelCase = function (str) {

dist/esm/utils/uidl-utils.d.ts

@@ -39,3 +39,3 @@ import { ComponentUIDL, UIDLStyleDefinitions, UIDLConditionalNode, UIDLElement, UIDLNode, UIDLStaticValue, UIDLAttributeValue, UIDLDynamicReference, UIDLRepeatContent, UIDLRepeatMeta, UIDLElementNode, UIDLDependency, UIDLStyleValue, UIDLStyleSheetContent, UIDLComponentStyleReference, UIDLRootComponent, UIDLResourceItem, GeneratorOptions } from '@teleporthq/teleport-types';
 export declare const transformStylesAssignmentsToJson: (styleObject: Record<string, unknown>) => UIDLStyleDefinitions;
-export declare const transformAttributesAssignmentsToJson: (attributesObject: Record<string, unknown>) => Record<string, UIDLAttributeValue>;
+export declare const transformAttributesAssignmentsToJson: (attributesObject: Record<string, unknown>, isLocalComponent?: boolean) => Record<string, UIDLAttributeValue>;
 export declare const findFirstElementNode: (node: UIDLNode) => UIDLElementNode;
@@ -42,0 +42,0 @@ export declare const removeChildNodes: (node: UIDLNode, criteria: (element: UIDLNode) => boolean) => void;

dist/esm/utils/uidl-utils.js

@@ -19,3 +19,7 @@ var __assign = (this && this.__assign) || function () {
     // 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';
+    });
 };
@@ -99,5 +103,8 @@ export var createWebComponentFriendlyName = function (componentName) {
     }
-    if (!originalString.startsWith('/')) {
+    if (typeof originalString !== 'string') {
         return originalString;
     }
+    if (!(originalString === null || originalString === void 0 ? void 0 : originalString.startsWith('/'))) {
+        return originalString;
+    }
     var prefix = assets.prefix, _a = assets.mappings, mappings = _a === void 0 ? {} : _a, identifier = assets.identifier;
@@ -143,3 +150,3 @@ var assetName = basename(originalString);
 export var traverseNodes = function (node, fn, parent) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     if (parent === void 0) { parent = null; }
@@ -149,3 +156,3 @@ fn(node, parent);
         case 'element':
-            var _d = node.content, attrs_1 = _d.attrs, children = _d.children, style = _d.style, abilities = _d.abilities, referencedStyles = _d.referencedStyles;
+            var _g = node.content, attrs_1 = _g.attrs, children = _g.children, style = _g.style, abilities = _g.abilities, referencedStyles = _g.referencedStyles;
             if (attrs_1) {
@@ -199,2 +206,13 @@ Object.keys(attrs_1).forEach(function (attrKey) {
             break;
+        case 'cms-mixed-type':
+            if ((_d = node.content.nodes) === null || _d === void 0 ? void 0 : _d.fallback) {
+                traverseNodes(node.content.nodes.fallback, fn);
+            }
+            if ((_e = node.content.nodes) === null || _e === void 0 ? void 0 : _e.error) {
+                traverseNodes(node.content.nodes.error, fn);
+            }
+            Object.keys(((_f = node.content) === null || _f === void 0 ? void 0 : _f.mappings) || {}).forEach(function (key) {
+                traverseNodes(node.content.mappings[key], fn);
+            });
+            break;
         case 'repeat':
@@ -226,2 +244,3 @@ traverseNodes(node.content.node, fn, node);
 export var traverseResources = function (node, fn) {
+    var _a, _b, _c;
     switch (node.type) {
@@ -260,2 +279,13 @@ case 'element':
             break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                traverseResources(node.content.nodes.fallback, fn);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                traverseResources(node.content.nodes.error, fn);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                traverseResources(node.content.mappings[key], fn);
+            });
+            break;
         case 'repeat':
@@ -284,5 +314,4 @@ traverseResources(node.content.node, fn);
         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)));
         }
@@ -293,5 +322,15 @@ });
 export var traverseElements = function (node, fn) {
+    var _a, _b, _c;
     switch (node.type) {
         case 'element':
             fn(node.content);
+            if (node.content.attrs) {
+                for (var _i = 0, _d = Object.keys(node.content.attrs); _i < _d.length; _i++) {
+                    var attrKey = _d[_i];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseElements(attrValue, fn);
+                    }
+                }
+            }
             if (node.content.children) {
@@ -311,2 +350,11 @@ node.content.children.forEach(function (child) {
             }
+            if (node.content.attrs) {
+                for (var _e = 0, _f = Object.keys(node.content.attrs); _e < _f.length; _e++) {
+                    var attrKey = _f[_e];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseElements(attrValue, fn);
+                    }
+                }
+            }
             break;
@@ -327,3 +375,32 @@ case 'cms-list-repeater':
             }
+            if (node.content.attrs) {
+                for (var _g = 0, _h = Object.keys(node.content.attrs); _g < _h.length; _g++) {
+                    var attrKey = _h[_g];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseElements(attrValue, fn);
+                    }
+                }
+            }
             break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                traverseElements(node.content.nodes.fallback, fn);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                traverseElements(node.content.nodes.error, fn);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                traverseElements(node.content.mappings[key], fn);
+            });
+            if (node.content.attrs) {
+                for (var _j = 0, _k = Object.keys(node.content.attrs); _j < _k.length; _j++) {
+                    var attrKey = _k[_j];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseElements(attrValue, fn);
+                    }
+                }
+            }
+            break;
         case 'repeat':
@@ -347,8 +424,18 @@ traverseElements(node.content.node, fn);
         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)));
     }
 };
 export var traverseRepeats = function (node, fn) {
+    var _a, _b, _c;
     switch (node.type) {
         case 'element':
+            if (node.content.attrs) {
+                for (var _i = 0, _d = Object.keys(node.content.attrs); _i < _d.length; _i++) {
+                    var attrKey = _d[_i];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseRepeats(attrValue, fn);
+                    }
+                }
+            }
             if (node.content.children) {
@@ -368,2 +455,11 @@ node.content.children.forEach(function (child) {
             }
+            if (node.content.attrs) {
+                for (var _e = 0, _f = Object.keys(node.content.attrs); _e < _f.length; _e++) {
+                    var attrKey = _f[_e];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseRepeats(attrValue, fn);
+                    }
+                }
+            }
             break;
@@ -384,3 +480,32 @@ case 'cms-list-repeater':
             }
+            if (node.content.attrs) {
+                for (var _g = 0, _h = Object.keys(node.content.attrs); _g < _h.length; _g++) {
+                    var attrKey = _h[_g];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseRepeats(attrValue, fn);
+                    }
+                }
+            }
             break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                traverseRepeats(node.content.nodes.fallback, fn);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                traverseRepeats(node.content.nodes.error, fn);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                traverseRepeats(node.content.mappings[key], fn);
+            });
+            if (node.content.attrs) {
+                for (var _j = 0, _k = Object.keys(node.content.attrs); _j < _k.length; _j++) {
+                    var attrKey = _k[_j];
+                    var attrValue = node.content.attrs[attrKey];
+                    if (attrValue.type === 'element') {
+                        traverseRepeats(attrValue, fn);
+                    }
+                }
+            }
+            break;
         case 'repeat':
@@ -535,4 +660,11 @@ fn(node.content);
 };
-export var transformAttributesAssignmentsToJson = function (attributesObject) {
-    var newStyleObject = {};
+/*
+  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
+  another place. So, all the attrs that are being passed to the local compoenents
+  need to be transformed since these are basically props.
+*/
+export var transformAttributesAssignmentsToJson = function (attributesObject, isLocalComponent) {
+    if (isLocalComponent === void 0) { isLocalComponent = false; }
+    var newAttrObject = {};
     Object.keys(attributesObject).reduce(function (acc, key) {
@@ -542,36 +674,47 @@ var attributeContent = attributesObject[key];
         if (['string', 'number'].indexOf(entityType) !== -1) {
-            acc[key] = transformStringAssignmentToJson(attributeContent);
+            var propKey = isLocalComponent ? StringUtils.createStateOrPropStoringValue(key) : key;
+            acc[propKey] = transformStringAssignmentToJson(attributeContent);
             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) {
-                acc[key] = attributeContent;
-                return acc;
-            }
-            if (type === 'comp-style') {
-                acc[key] = {
-                    type: 'comp-style',
-                    content: 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 ? StringUtils.createStateOrPropStoringValue(key) : key;
+                    acc[propKey] = attributeContent;
+                    return acc;
+                }
+                case 'comp-style': {
                     acc[key] = {
-                        type: type,
-                        content: __assign(__assign({}, content), { id: StringUtils.createStateOrPropStoringValue(content.id) }),
+                        type: 'comp-style',
+                        content: StringUtils.createStateOrPropStoringValue(attributeContent.content),
                     };
+                    return acc;
                 }
-                else {
+                case 'dynamic': {
+                    var content = attributeContent.content;
+                    if (['state', 'prop'].includes(content === null || content === void 0 ? void 0 : content.referenceType)) {
+                        acc[key] = {
+                            type: type,
+                            content: __assign(__assign({}, content), { id: StringUtils.createStateOrPropStoringValue(content.id) }),
+                        };
+                    }
+                    else {
+                        acc[key] = attributeContent;
+                    }
+                    return acc;
+                }
+                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)));
         }
-    }, newStyleObject);
-    return newStyleObject;
+    }, newAttrObject);
+    return newAttrObject;
 };
@@ -595,2 +738,3 @@ export var findFirstElementNode = function (node) {
 export var removeChildNodes = function (node, criteria) {
+    var _a, _b, _c;
     switch (node.type) {
@@ -632,2 +776,13 @@ case 'element':
             break;
+        case 'cms-mixed-type':
+            if ((_a = node.content.nodes) === null || _a === void 0 ? void 0 : _a.fallback) {
+                removeChildNodes(node.content.nodes.fallback, criteria);
+            }
+            if ((_b = node.content.nodes) === null || _b === void 0 ? void 0 : _b.error) {
+                removeChildNodes(node.content.nodes.error, criteria);
+            }
+            Object.keys(((_c = node.content) === null || _c === void 0 ? void 0 : _c.mappings) || {}).forEach(function (key) {
+                removeChildNodes(node.content.mappings[key], criteria);
+            });
+            break;
         case 'conditional':
@@ -634,0 +789,0 @@ removeChildNodes(node.content.node, criteria);

package.json

 {
   "name": "@teleporthq/teleport-shared",
-  "version": "0.35.0-alpha.0",
+  "version": "0.35.0",
   "description": "A utility belt for the entire teleportHQ ecosystem",
@@ -28,7 +28,7 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-types": "^0.35.0-alpha.0",
+    "@teleporthq/teleport-types": "^0.35.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "e8ce842bf620a51081ff6f1cdf95b276325c19d2"
+  "gitHead": "ae4ff86d5380c1d74575847a2b91c863713c1d8e"
 }

src/utils/string-utils.ts

 export const camelCaseToDashCase = (str: string): string =>
-  str.replace(/([a-z])(?=[A-Z])|([A-Z0-9][A-Z])(?=[A-Z][a-z])/g, '$1$2-').toLowerCase()
+  str.replace(/([a-z])(?=[A-Z])|([A-Z0-9])(?=[A-Z][a-z])/g, '$1$2-').toLowerCase()
 export const dashCaseToCamelCase = (str: string): string =>
@@ -4,0 +4,0 @@ str.replace(/[-_]+(.)?/g, (_, chr) => (chr ? chr.toUpperCase() : ''))

src/utils/uidl-utils.ts

@@ -35,3 +35,6 @@ import {
   return rootElement.children.filter(
-    (child) => child.type === 'conditional' && child.content.reference.content.id === 'route'
+    (child) =>
+      child.type === 'conditional' &&
+      child.content.reference.type === 'dynamic' &&
+      child.content.reference.content.id === 'route'
   ) as UIDLConditionalNode[]
@@ -53,2 +56,3 @@ }
   const friendlyName = removeIllegalCharacters(uidl.name) || defaultComponentName
+
   if (!uidl.outputOptions.fileName) {
@@ -135,6 +139,10 @@ uidl.outputOptions.fileName = camelCaseToDashCase(friendlyName)
 
-  if (!originalString.startsWith('/')) {
+  if (typeof originalString !== 'string') {
     return originalString
   }
 
+  if (!originalString?.startsWith('/')) {
+    return originalString
+  }
+
   const { prefix, mappings = {}, identifier } = assets
@@ -257,2 +265,16 @@ const assetName = basename(originalString)
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseNodes(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseNodes(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseNodes(node.content.mappings[key], fn)
+      })
+      break
+
     case 'repeat':
@@ -332,2 +354,16 @@ traverseNodes(node.content.node, fn, node)
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseResources(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseResources(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseResources(node.content.mappings[key], fn)
+      })
+      break
+
     case 'repeat':
@@ -363,5 +399,6 @@ traverseResources(node.content.node, fn)
     const 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
+        Received \n
+        ${JSON.stringify(styleValue, null, 2)}`)
     }
@@ -377,2 +414,11 @@ })
 
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
       if (node.content.children) {
@@ -393,2 +439,12 @@ node.content.children.forEach((child) => {
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
       break
@@ -412,4 +468,38 @@
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
       break
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseElements(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseElements(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseElements(node.content.mappings[key], fn)
+      })
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseElements(attrValue, fn)
+          }
+        }
+      }
+
+      break
+
     case 'repeat':
@@ -438,7 +528,3 @@ traverseElements(node.content.node, fn)
       throw new Error(
-        `traverseElements was given an unsupported node type : ${node.type}, ${JSON.stringify(
-          node,
-          null,
-          2
-        )}`
+        `traverseElements was given an unsupported node type : \n ${JSON.stringify(node, null, 2)}`
       )
@@ -451,2 +537,11 @@ }
     case 'element':
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+
       if (node.content.children) {
@@ -468,2 +563,12 @@ node.content.children.forEach((child) => {
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+
       break
@@ -481,10 +586,45 @@
       traverseRepeats(node.content.nodes.success, fn)
+
       if (node.content.nodes.error) {
         traverseRepeats(node.content.nodes.error, fn)
       }
+
       if (node.content.nodes.loading) {
         traverseRepeats(node.content.nodes.loading, fn)
       }
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
       break
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        traverseRepeats(node.content.nodes.fallback, fn)
+      }
+
+      if (node.content.nodes?.error) {
+        traverseRepeats(node.content.nodes.error, fn)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        traverseRepeats(node.content.mappings[key], fn)
+      })
+
+      if (node.content.attrs) {
+        for (const attrKey of Object.keys(node.content.attrs)) {
+          const attrValue = node.content.attrs[attrKey]
+          if (attrValue.type === 'element') {
+            traverseRepeats(attrValue, fn)
+          }
+        }
+      }
+
+      break
+
     case 'repeat':
@@ -529,2 +669,3 @@ fn(node.content)
 }
+
 export const splitDynamicAndStaticStyles = (
@@ -713,6 +854,14 @@ style: UIDLStyleDefinitions | Record<string, UIDLStyleSheetContent>
 
+/*
+  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
+  another place. So, all the attrs that are being passed to the local compoenents
+  need to be transformed since these are basically props.
+*/
+
 export const transformAttributesAssignmentsToJson = (
-  attributesObject: Record<string, unknown>
+  attributesObject: Record<string, unknown>,
+  isLocalComponent = false
 ): Record<string, UIDLAttributeValue> => {
-  const newStyleObject: Record<string, UIDLAttributeValue> = {}
+  const newAttrObject: Record<string, UIDLAttributeValue> = {}
 
@@ -724,3 +873,5 @@ Object.keys(attributesObject).reduce((acc, key) => {
     if (['string', 'number'].indexOf(entityType) !== -1) {
-      acc[key] = transformStringAssignmentToJson(
+      const propKey = isLocalComponent ? StringUtils.createStateOrPropStoringValue(key) : key
+
+      acc[propKey] = transformStringAssignmentToJson(
         attributeContent as string | number
@@ -732,46 +883,58 @@ ) as UIDLAttributeValue
     if (!Array.isArray(attributeContent) && entityType === 'object') {
-      // if this value is already properly declared, make sure it is not
-      const { type } = attributeContent as Record<string, unknown>
-      if (['static', 'import', 'raw', 'expr'].indexOf(type as string) !== -1) {
-        acc[key] = attributeContent as UIDLAttributeValue
-        return acc
-      }
+      const { type } = attributeContent as UIDLAttributeValue
 
-      if (type === 'comp-style') {
-        acc[key] = {
-          type: 'comp-style',
-          content: StringUtils.createStateOrPropStoringValue(
-            (attributeContent as UIDLComponentStyleReference).content
-          ),
+      switch (type) {
+        case 'import':
+        case 'static':
+        case 'raw':
+        case 'expr': {
+          const propKey = isLocalComponent ? StringUtils.createStateOrPropStoringValue(key) : key
+          acc[propKey] = attributeContent as UIDLAttributeValue
+          return acc
         }
-        return acc
-      }
 
-      const { content } = attributeContent as UIDLDynamicReference
-      if (type === 'dynamic') {
-        if (['state', 'prop'].includes(content?.referenceType)) {
+        case 'comp-style': {
           acc[key] = {
-            type,
-            content: {
-              ...content,
-              id: StringUtils.createStateOrPropStoringValue(content.id),
-            },
+            type: 'comp-style',
+            content: StringUtils.createStateOrPropStoringValue(
+              (attributeContent as UIDLComponentStyleReference).content
+            ),
           }
-        } else {
+          return acc
+        }
+
+        case 'dynamic': {
+          const { content } = attributeContent as UIDLDynamicReference
+          if (['state', 'prop'].includes(content?.referenceType)) {
+            acc[key] = {
+              type,
+              content: {
+                ...content,
+                id: StringUtils.createStateOrPropStoringValue(content.id),
+              },
+            }
+          } else {
+            acc[key] = attributeContent as UIDLAttributeValue
+          }
+          return acc
+        }
+
+        case 'element':
           acc[key] = attributeContent as UIDLAttributeValue
+          return acc
+
+        default: {
+          throw new Error(
+            `transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(
+              attributeContent,
+              null,
+              2
+            )}`
+          )
         }
-        return acc
       }
-
-      throw new Error(
-        `transformAttributesAssignmentsToJson encountered a style value that is not supported ${JSON.stringify(
-          attributeContent,
-          null,
-          2
-        )}`
-      )
     }
-  }, newStyleObject)
+  }, newAttrObject)
 
-  return newStyleObject
+  return newAttrObject
 }
@@ -843,2 +1006,16 @@
 
+    case 'cms-mixed-type':
+      if (node.content.nodes?.fallback) {
+        removeChildNodes(node.content.nodes.fallback, criteria)
+      }
+
+      if (node.content.nodes?.error) {
+        removeChildNodes(node.content.nodes.error, criteria)
+      }
+
+      Object.keys(node.content?.mappings || {}).forEach((key) => {
+        removeChildNodes(node.content.mappings[key], criteria)
+      })
+      break
+
     case 'conditional':
@@ -845,0 +1022,0 @@ removeChildNodes(node.content.node, criteria)

No alert changes

Improved metrics

Total package byte prevSize

276590

increased by17.14%

Lines of code

3857

increased by13.31%

Dependency changes

• Updated@teleporthq/teleport-types@^0.35.0