@teleporthq/teleport-uidl-resolver - npm Package Compare versions

Comparing version 0.27.8 to 0.28.0-alpha.0

__tests__/abilities/mocks.ts

@@ -21,3 +21,6 @@ import {
   content: {
-    routeName: 'home',
+    routeName: {
+      type: 'static',
+      content: 'home',
+    },
   },
@@ -24,0 +27,0 @@ })

__tests__/abilities/utils.ts

@@ -59,3 +59,3 @@ import { insertLinks, createLinkNode } from '../../src/resolvers/abilities/utils'
     expect(secondChildAfterInsertLinks.content.attrs.transitionTo.content).toBe(
-      `/${navlink.content.routeName}`
+      `/${navlink.content.routeName.content}`
     )
@@ -62,0 +62,0 @@ })

__tests__/utils.ts

@@ -20,12 +20,4 @@ import {
   resolveElement,
-  parseStaticStyles,
-  prefixAssetURLs,
 } from '../src/utils'
-import {
-  UIDLElement,
-  UIDLNode,
-  UIDLRepeatNode,
-  Mapping,
-  UIDLStyleDefinitions,
-} from '@teleporthq/teleport-types'
+import { UIDLElement, UIDLNode, UIDLRepeatNode, Mapping } from '@teleporthq/teleport-types'
 import mapping from './mapping.json'
@@ -487,40 +479,1 @@
 })
-
-describe('parseBackgroundWithMultipleStyles', () => {
-  const styleToParse: UIDLStyleDefinitions = {
-    backgroundImage: {
-      type: 'static',
-      content:
-        'linear-gradient(90deg, rgb(189, 195, 199) 0.00%,rgba(44, 62, 80, 0.5) 100.00%),url("/kittens.png")',
-    },
-  }
-
-  const assets = {
-    prefix: 'public',
-    identifier: 'assets',
-    mappings: {
-      'kittens.png': 'sub1/sub2',
-      'dogs.png': 'dog/pictures',
-    },
-  }
-  it('correctly splits the style content into two separate styles', () => {
-    const parsedStyle = parseStaticStyles(styleToParse.backgroundImage.content as string)
-    expect(parsedStyle).toBeDefined()
-    expect(parsedStyle.length).toBe(2)
-    expect(parsedStyle[0]).toBe(
-      'linear-gradient(90deg, rgb(189, 195, 199) 0.00%,rgba(44, 62, 80, 0.5) 100.00%)'
-    )
-    expect(parsedStyle[1]).toBe('url("/kittens.png")')
-  })
-
-  it('correctly generates background image style with correct url', () => {
-    const parsedStyle = prefixAssetURLs(styleToParse, assets)
-    expect(parsedStyle.backgroundImage).toBeDefined()
-    expect(parsedStyle.backgroundImage.content).toBeDefined()
-    if (parsedStyle.backgroundImage.content) {
-      expect(parsedStyle.backgroundImage.content).toContain(
-        'linear-gradient(90deg, rgb(189, 195, 199) 0.00%,rgba(44, 62, 80, 0.5) 100.00%),url("public/assets/sub1/sub2/kittens.png")'
-      )
-    }
-  })
-})

dist/cjs/html-mapping.js

@@ -31,3 +31,3 @@ "use strict";
                 path: 'dangerous-html',
-                version: '0.1.13',
+                version: '0.1.12',
                 meta: {
@@ -38,2 +38,11 @@ importJustPath: true,
         },
+        'date-time-node': {
+            elementType: 'date-time-primitive',
+            dependency: {
+                type: 'package',
+                version: 'github:teleporthq/date-time-primitive',
+                path: '@teleporthq/date-time-primitive',
+                meta: { importJustPath: true },
+            },
+        },
         'lottie-node': {
@@ -40,0 +49,0 @@ elementType: 'lottie-player',

dist/cjs/resolver.js

@@ -85,2 +85,3 @@ "use strict";
         utils.createNodesLookup(uidl.node, nodesLookup);
+        utils.createCMSNodesLookup(uidl.node, nodesLookup);
         utils.generateUniqueKeys(uidl.node, nodesLookup);
@@ -87,0 +88,0 @@ utils.ensureDataSourceUniqueness(uidl.node);

dist/cjs/resolvers/abilities/utils.js

@@ -37,2 +37,29 @@ "use strict";
         }
+        if (child.type === 'cms-list') {
+            var _b = child.content.nodes, success = _b.success, error = _b.error, empty = _b.empty, loading = _b.loading;
+            if (success) {
+                (0, exports.insertLinks)(success, options, false, node);
+            }
+            if (error) {
+                (0, exports.insertLinks)(error, options, false, node);
+            }
+            if (empty) {
+                (0, exports.insertLinks)(empty, options, false, node);
+            }
+            if (loading) {
+                (0, exports.insertLinks)(loading, options, false, node);
+            }
+        }
+        if (child.type === 'cms-item') {
+            var _c = child.content.nodes, success = _c.success, error = _c.error, loading = _c.loading;
+            if (success) {
+                (0, exports.insertLinks)(success, options, false, node);
+            }
+            if (error) {
+                (0, exports.insertLinks)(error, options, false, node);
+            }
+            if (loading) {
+                (0, exports.insertLinks)(loading, options, false, node);
+            }
+        }
         return child;
@@ -87,3 +114,8 @@ });
 var getLinkElementType = function (link) {
-    return link.type === 'navlink' ? 'navlink' : 'link';
+    // for now I'm making all dynamic links local.
+    // Maybe navlinks could have a dynamic reference,
+    // not just a staic on in the future, but for now
+    // (for the CMS demo) the navlink was too robust
+    // to change
+    return link.type === 'navlink' || link.type === 'dynamic' ? 'navlink' : 'link';
 };
@@ -115,8 +147,9 @@ var createLinkAttributes = function (link, options) {
         }
+        case 'dynamic':
+            return {
+                transitionTo: link,
+            };
         case 'navlink': {
             return {
-                transitionTo: {
-                    type: 'static',
-                    content: resolveNavlink(link.content.routeName, options),
-                },
+                transitionTo: resolveNavlink(link.content.routeName, options),
             };
@@ -142,20 +175,31 @@ }
 };
-var resolveNavlink = function (routeName, options) {
+var resolveNavlink = function (route, options) {
     var _a, _b;
     if (options.skipNavlinkResolver) {
-        return routeName;
+        return route;
     }
-    if (routeName.startsWith('/')) {
+    var type = route.type, routeName = route.content;
+    if (type !== 'static') {
+        return route;
+    }
+    if (routeName.toString().startsWith('/')) {
         // attribute was explicitly set as a custom navlink
-        return routeName;
+        return route;
     }
-    var friendlyURL = teleport_shared_1.StringUtils.camelCaseToDashCase(teleport_shared_1.StringUtils.removeIllegalCharacters(routeName));
+    var friendlyURL = teleport_shared_1.StringUtils.camelCaseToDashCase(teleport_shared_1.StringUtils.removeIllegalCharacters(routeName.toString()));
     var transitionRoute = options.projectRouteDefinition
-        ? options.projectRouteDefinition.values.find(function (route) { return route.value === routeName; })
+        ? options.projectRouteDefinition.values.find(function (routeItem) { return routeItem.value === routeName; })
         : null;
     if (!transitionRoute) {
-        return "/".concat(friendlyURL);
+        return {
+            type: 'static',
+            content: "/".concat(friendlyURL),
+        };
     }
-    return (_b = (_a = transitionRoute === null || transitionRoute === void 0 ? void 0 : transitionRoute.pageOptions) === null || _a === void 0 ? void 0 : _a.navLink) !== null && _b !== void 0 ? _b : "/".concat(friendlyURL);
+    var value = (_b = (_a = transitionRoute === null || transitionRoute === void 0 ? void 0 : transitionRoute.pageOptions) === null || _a === void 0 ? void 0 : _a.navLink) !== null && _b !== void 0 ? _b : "/".concat(friendlyURL);
+    return {
+        type: 'static',
+        content: value,
+    };
 };
 //# sourceMappingURL=utils.js.map

dist/cjs/utils.d.ts

@@ -1,3 +0,3 @@
-import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference } from '@teleporthq/teleport-types';
-type ElementsLookup = Record<string, {
+import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference, UIDLConditionalNode } from '@teleporthq/teleport-types';
+declare type ElementsLookup = Record<string, {
     count: number;
@@ -10,2 +10,3 @@ nextKey: string;
 export declare const resolveNode: (uidlNode: UIDLNode, options: GeneratorOptions) => void;
+export declare const resolveConditional: (condNode: UIDLConditionalNode, options: GeneratorOptions) => void;
 export declare const resolveElement: (element: UIDLElement, options: GeneratorOptions) => void;
@@ -15,4 +16,4 @@ export declare const resolveChildren: (mappedChildren: UIDLNode[], originalChildren?: UIDLNode[]) => UIDLNode[];
 export declare const createNodesLookup: (node: UIDLNode, lookup: ElementsLookup) => void;
+export declare const createCMSNodesLookup: (node: UIDLNode, lookup: ElementsLookup) => void;
 export declare const ensureDataSourceUniqueness: (node: UIDLNode) => void;
-export declare function parseStaticStyles(styles: string): string[];
 /**
@@ -19,0 +20,0 @@ * Prefixes all urls inside the style object with the assetsPrefix

dist/cjs/utils.js

@@ -26,3 +26,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkForDefaultStateValueContainingAssets = exports.checkForDefaultPropsContainingAssets = exports.checkForIllegalNames = exports.prefixAssetURLs = exports.parseStaticStyles = exports.ensureDataSourceUniqueness = exports.createNodesLookup = exports.generateUniqueKeys = exports.resolveChildren = exports.resolveElement = exports.resolveNode = exports.removeIgnoredNodes = exports.resolveMetaTags = exports.mergeMappings = void 0;
+exports.checkForDefaultStateValueContainingAssets = exports.checkForDefaultPropsContainingAssets = exports.checkForIllegalNames = exports.prefixAssetURLs = exports.ensureDataSourceUniqueness = exports.createCMSNodesLookup = exports.createNodesLookup = exports.generateUniqueKeys = exports.resolveChildren = exports.resolveElement = exports.resolveConditional = exports.resolveNode = exports.removeIgnoredNodes = exports.resolveMetaTags = exports.mergeMappings = void 0;
 var teleport_shared_1 = require("@teleporthq/teleport-shared");
@@ -71,2 +71,3 @@ var deepmerge_1 = __importDefault(require("deepmerge"));
     teleport_shared_1.UIDLUtils.traverseNodes(uidlNode, function (node, parentNode) {
+        var _a, _b;
         if (node.type === 'element') {
@@ -78,5 +79,24 @@ (0, exports.resolveElement)(node.content, options);
         }
+        if (node.type === 'conditional') {
+            (0, exports.resolveConditional)(node, options);
+        }
+        if (node.type === 'cms-item') {
+            node.content.name = ((_a = node.content) === null || _a === void 0 ? void 0 : _a.name) || 'cms-item';
+        }
+        if (node.type === 'cms-list') {
+            node.content.name = ((_b = node.content) === null || _b === void 0 ? void 0 : _b.name) || 'cms-list';
+        }
     });
 };
 exports.resolveNode = resolveNode;
+var resolveConditional = function (condNode, options) {
+    var _a;
+    if ((_a = condNode.content) === null || _a === void 0 ? void 0 : _a.node) {
+        var _b = condNode.content.node, type = _b.type, content = _b.content;
+        if (type === 'element') {
+            (0, exports.resolveElement)(content, options);
+        }
+    }
+};
+exports.resolveConditional = resolveConditional;
 var resolveElement = function (element, options) {
@@ -216,2 +236,16 @@ var _a;
 var generateUniqueKeys = function (node, lookup) {
+    teleport_shared_1.UIDLUtils.traverseNodes(node, function (child) {
+        if (child.type !== 'cms-item' && child.type !== 'cms-list') {
+            return;
+        }
+        var nodeOcurrence = lookup[child.content.name.toLowerCase()];
+        if (nodeOcurrence.count === 1) {
+            child.content.key = child.content.name;
+        }
+        else {
+            var currentKey = nodeOcurrence.nextKey;
+            child.content.key = generateKey(child.content.name, currentKey);
+            nodeOcurrence.nextKey = generateNextIncrementalKey(currentKey);
+        }
+    });
     teleport_shared_1.UIDLUtils.traverseElements(node, function (element) {
@@ -251,18 +285,31 @@ // If a certain node name (ex: "container") is present multiple times in the component, it will be counted here
         var elementName = element.name.toLowerCase();
-        if (!lookup[elementName]) {
-            lookup[elementName] = {
-                count: 0,
-                nextKey: '0',
-            };
+        nodeAndElementLookup(elementName, lookup);
+    });
+};
+exports.createNodesLookup = createNodesLookup;
+var createCMSNodesLookup = function (node, lookup) {
+    teleport_shared_1.UIDLUtils.traverseNodes(node, function (child) {
+        if (child.type !== 'cms-item' && child.type !== 'cms-list') {
+            return;
         }
-        lookup[elementName].count++;
-        var newCount = lookup[elementName].count;
-        if (newCount > 9 && isPowerOfTen(newCount)) {
-            // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
-            // nextKey will start either from: '0', '00', '000', etc.
-            lookup[elementName].nextKey = '0' + lookup[elementName].nextKey;
-        }
+        var nodeName = child.content.name.toLowerCase();
+        nodeAndElementLookup(nodeName, lookup);
     });
 };
-exports.createNodesLookup = createNodesLookup;
+exports.createCMSNodesLookup = createCMSNodesLookup;
+var nodeAndElementLookup = function (elementName, lookup) {
+    if (!lookup[elementName]) {
+        lookup[elementName] = {
+            count: 0,
+            nextKey: '0',
+        };
+    }
+    lookup[elementName].count++;
+    var newCount = lookup[elementName].count;
+    if (newCount > 9 && isPowerOfTen(newCount)) {
+        // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
+        // nextKey will start either from: '0', '00', '000', etc.
+        lookup[elementName].nextKey = '0' + lookup[elementName].nextKey;
+    }
+};
 var isPowerOfTen = function (value) {
@@ -277,2 +324,6 @@ while (value > 9 && value % 10 === 0) {
     teleport_shared_1.UIDLUtils.traverseRepeats(node, function (repeat) {
+        var _a;
+        if (!((_a = repeat.dataSource) === null || _a === void 0 ? void 0 : _a.type)) {
+            return;
+        }
         if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
@@ -289,55 +340,2 @@ repeat.meta = repeat.meta || {};
 };
-function parseStaticStyles(styles) {
-    var stylesList = [];
-    var tokens = /[,\(\)]/;
-    var parens = 0;
-    var buffer = '';
-    if (styles == null) {
-        return stylesList;
-    }
-    while (styles.length) {
-        var match = tokens.exec(styles);
-        if (!match) {
-            break;
-        }
-        var char = match[0];
-        var ignoreChar = false;
-        var foundAssetId = false;
-        switch (char) {
-            case ',':
-                if (!parens) {
-                    if (buffer) {
-                        stylesList.push(buffer.trim());
-                        buffer = '';
-                    }
-                    else {
-                        foundAssetId = true;
-                    }
-                    ignoreChar = true;
-                }
-                break;
-            case '(':
-                parens++;
-                break;
-            case ')':
-                parens--;
-                break;
-            default:
-                break;
-        }
-        var index = match.index + 1;
-        buffer += styles.slice(0, ignoreChar ? index - 1 : index);
-        styles = styles.slice(index);
-        if (foundAssetId) {
-            stylesList.push(buffer.trim());
-            buffer = '';
-            ignoreChar = true;
-        }
-    }
-    if (buffer.length || styles.length) {
-        stylesList.push((buffer + styles).trim());
-    }
-    return stylesList;
-}
-exports.parseStaticStyles = parseStaticStyles;
 /**
@@ -357,29 +355,25 @@ * Prefixes all urls inside the style object with the assetsPrefix
             case 'static':
-                var staticContent_1 = styleValue.content;
-                if (typeof staticContent_1 === 'number') {
+                var staticContent = styleValue.content;
+                if (typeof staticContent === 'number') {
                     acc[styleKey] = styleValue;
                     return acc;
                 }
-                if (typeof staticContent_1 === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
-                    // need to split the styles in case of multiple background being added (eg: gradient + bgImage)
-                    var styleList = parseStaticStyles(staticContent_1);
-                    styleList = styleList.map(function (subStyle) {
-                        var asset = staticContent_1.indexOf('url(') === -1
-                            ? subStyle
-                            : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
-                        /*
-                          background image such as gradient shouldn't be urls
-                          we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
-                          but we don't compute and generate a url)
-                        */
-                        if (!asset.startsWith('/')) {
-                            return subStyle;
-                        }
-                        var url = teleport_shared_1.UIDLUtils.prefixAssetsPath(asset, assets);
-                        var newStyleValue = "url(\"".concat(url, "\")");
-                        return newStyleValue;
-                    });
+                if (typeof staticContent === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
+                    var asset = staticContent.indexOf('url(') === -1
+                        ? staticContent
+                        : staticContent.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
+                    /*
+                      background image such as gradient shouldn't be urls
+                      we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
+                      but we don't compute and generate a url)
+                    */
+                    if (!asset.startsWith('/')) {
+                        acc[styleKey] = styleValue;
+                        return acc;
+                    }
+                    var url = teleport_shared_1.UIDLUtils.prefixAssetsPath(asset, assets);
+                    var newStyleValue = "url(\"".concat(url, "\")");
                     acc[styleKey] = {
                         type: 'static',
-                        content: styleList.join(','),
+                        content: newStyleValue,
                     };
@@ -465,16 +459,12 @@ }
     }
-    if (uidl.propDefinitions) {
-        Object.keys(uidl.propDefinitions).forEach(function (prop) {
-            if (illegalPropNames.includes(prop)) {
-                throw new Error("Illegal prop key '".concat(prop, "'"));
-            }
-        });
-    }
-    if (uidl.stateDefinitions) {
-        Object.keys(uidl.stateDefinitions).forEach(function (state) {
-            if (illegalPropNames.includes(state)) {
-                throw new Error("Illegal state key '".concat(state, "'"));
-            }
-        });
-    }
+    Object.keys(uidl.propDefinitions || {}).forEach(function (prop) {
+        if (illegalPropNames.includes(prop)) {
+            throw new Error("Illegal prop key '".concat(prop, "'"));
+        }
+    });
+    Object.keys(uidl.stateDefinitions || {}).forEach(function (state) {
+        if (illegalPropNames.includes(state)) {
+            throw new Error("Illegal state key '".concat(state, "'"));
+        }
+    });
 };
@@ -481,0 +471,0 @@ exports.checkForIllegalNames = checkForIllegalNames;

dist/esm/html-mapping.js

@@ -28,3 +28,3 @@ export var HTMLMapping = {
                 path: 'dangerous-html',
-                version: '0.1.13',
+                version: '0.1.12',
                 meta: {
@@ -35,2 +35,11 @@ importJustPath: true,
         },
+        'date-time-node': {
+            elementType: 'date-time-primitive',
+            dependency: {
+                type: 'package',
+                version: 'github:teleporthq/date-time-primitive',
+                path: '@teleporthq/date-time-primitive',
+                meta: { importJustPath: true },
+            },
+        },
         'lottie-node': {
@@ -37,0 +46,0 @@ elementType: 'lottie-player',

dist/esm/resolver.js

@@ -60,2 +60,3 @@ var __assign = (this && this.__assign) || function () {
         utils.createNodesLookup(uidl.node, nodesLookup);
+        utils.createCMSNodesLookup(uidl.node, nodesLookup);
         utils.generateUniqueKeys(uidl.node, nodesLookup);
@@ -62,0 +63,0 @@ utils.ensureDataSourceUniqueness(uidl.node);

dist/esm/resolvers/abilities/utils.js

@@ -34,2 +34,29 @@ var __assign = (this && this.__assign) || function () {
         }
+        if (child.type === 'cms-list') {
+            var _b = child.content.nodes, success = _b.success, error = _b.error, empty = _b.empty, loading = _b.loading;
+            if (success) {
+                insertLinks(success, options, false, node);
+            }
+            if (error) {
+                insertLinks(error, options, false, node);
+            }
+            if (empty) {
+                insertLinks(empty, options, false, node);
+            }
+            if (loading) {
+                insertLinks(loading, options, false, node);
+            }
+        }
+        if (child.type === 'cms-item') {
+            var _c = child.content.nodes, success = _c.success, error = _c.error, loading = _c.loading;
+            if (success) {
+                insertLinks(success, options, false, node);
+            }
+            if (error) {
+                insertLinks(error, options, false, node);
+            }
+            if (loading) {
+                insertLinks(loading, options, false, node);
+            }
+        }
         return child;
@@ -82,3 +109,8 @@ });
 var getLinkElementType = function (link) {
-    return link.type === 'navlink' ? 'navlink' : 'link';
+    // for now I'm making all dynamic links local.
+    // Maybe navlinks could have a dynamic reference,
+    // not just a staic on in the future, but for now
+    // (for the CMS demo) the navlink was too robust
+    // to change
+    return link.type === 'navlink' || link.type === 'dynamic' ? 'navlink' : 'link';
 };
@@ -110,8 +142,9 @@ var createLinkAttributes = function (link, options) {
         }
+        case 'dynamic':
+            return {
+                transitionTo: link,
+            };
         case 'navlink': {
             return {
-                transitionTo: {
-                    type: 'static',
-                    content: resolveNavlink(link.content.routeName, options),
-                },
+                transitionTo: resolveNavlink(link.content.routeName, options),
             };
@@ -137,20 +170,31 @@ }
 };
-var resolveNavlink = function (routeName, options) {
+var resolveNavlink = function (route, options) {
     var _a, _b;
     if (options.skipNavlinkResolver) {
-        return routeName;
+        return route;
     }
-    if (routeName.startsWith('/')) {
+    var type = route.type, routeName = route.content;
+    if (type !== 'static') {
+        return route;
+    }
+    if (routeName.toString().startsWith('/')) {
         // attribute was explicitly set as a custom navlink
-        return routeName;
+        return route;
     }
-    var friendlyURL = StringUtils.camelCaseToDashCase(StringUtils.removeIllegalCharacters(routeName));
+    var friendlyURL = StringUtils.camelCaseToDashCase(StringUtils.removeIllegalCharacters(routeName.toString()));
     var transitionRoute = options.projectRouteDefinition
-        ? options.projectRouteDefinition.values.find(function (route) { return route.value === routeName; })
+        ? options.projectRouteDefinition.values.find(function (routeItem) { return routeItem.value === routeName; })
         : null;
     if (!transitionRoute) {
-        return "/".concat(friendlyURL);
+        return {
+            type: 'static',
+            content: "/".concat(friendlyURL),
+        };
     }
-    return (_b = (_a = transitionRoute === null || transitionRoute === void 0 ? void 0 : transitionRoute.pageOptions) === null || _a === void 0 ? void 0 : _a.navLink) !== null && _b !== void 0 ? _b : "/".concat(friendlyURL);
+    var value = (_b = (_a = transitionRoute === null || transitionRoute === void 0 ? void 0 : transitionRoute.pageOptions) === null || _a === void 0 ? void 0 : _a.navLink) !== null && _b !== void 0 ? _b : "/".concat(friendlyURL);
+    return {
+        type: 'static',
+        content: value,
+    };
 };
 //# sourceMappingURL=utils.js.map

dist/esm/utils.d.ts

@@ -1,3 +0,3 @@
-import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference } from '@teleporthq/teleport-types';
-type ElementsLookup = Record<string, {
+import { UIDLElement, UIDLNode, Mapping, GeneratorOptions, ComponentUIDL, UIDLStyleSetTokenReference, UIDLStaticValue, UIDLDynamicReference, UIDLConditionalNode } from '@teleporthq/teleport-types';
+declare type ElementsLookup = Record<string, {
     count: number;
@@ -10,2 +10,3 @@ nextKey: string;
 export declare const resolveNode: (uidlNode: UIDLNode, options: GeneratorOptions) => void;
+export declare const resolveConditional: (condNode: UIDLConditionalNode, options: GeneratorOptions) => void;
 export declare const resolveElement: (element: UIDLElement, options: GeneratorOptions) => void;
@@ -15,4 +16,4 @@ export declare const resolveChildren: (mappedChildren: UIDLNode[], originalChildren?: UIDLNode[]) => UIDLNode[];
 export declare const createNodesLookup: (node: UIDLNode, lookup: ElementsLookup) => void;
+export declare const createCMSNodesLookup: (node: UIDLNode, lookup: ElementsLookup) => void;
 export declare const ensureDataSourceUniqueness: (node: UIDLNode) => void;
-export declare function parseStaticStyles(styles: string): string[];
 /**
@@ -19,0 +20,0 @@ * Prefixes all urls inside the style object with the assetsPrefix

dist/esm/utils.js

@@ -61,2 +61,3 @@ var __assign = (this && this.__assign) || function () {
     UIDLUtils.traverseNodes(uidlNode, function (node, parentNode) {
+        var _a, _b;
         if (node.type === 'element') {
@@ -68,4 +69,22 @@ resolveElement(node.content, options);
         }
+        if (node.type === 'conditional') {
+            resolveConditional(node, options);
+        }
+        if (node.type === 'cms-item') {
+            node.content.name = ((_a = node.content) === null || _a === void 0 ? void 0 : _a.name) || 'cms-item';
+        }
+        if (node.type === 'cms-list') {
+            node.content.name = ((_b = node.content) === null || _b === void 0 ? void 0 : _b.name) || 'cms-list';
+        }
     });
 };
+export var resolveConditional = function (condNode, options) {
+    var _a;
+    if ((_a = condNode.content) === null || _a === void 0 ? void 0 : _a.node) {
+        var _b = condNode.content.node, type = _b.type, content = _b.content;
+        if (type === 'element') {
+            resolveElement(content, options);
+        }
+    }
+};
 export var resolveElement = function (element, options) {
@@ -203,2 +222,16 @@ var _a;
 export var generateUniqueKeys = function (node, lookup) {
+    UIDLUtils.traverseNodes(node, function (child) {
+        if (child.type !== 'cms-item' && child.type !== 'cms-list') {
+            return;
+        }
+        var nodeOcurrence = lookup[child.content.name.toLowerCase()];
+        if (nodeOcurrence.count === 1) {
+            child.content.key = child.content.name;
+        }
+        else {
+            var currentKey = nodeOcurrence.nextKey;
+            child.content.key = generateKey(child.content.name, currentKey);
+            nodeOcurrence.nextKey = generateNextIncrementalKey(currentKey);
+        }
+    });
     UIDLUtils.traverseElements(node, function (element) {
@@ -237,17 +270,29 @@ // If a certain node name (ex: "container") is present multiple times in the component, it will be counted here
         var elementName = element.name.toLowerCase();
-        if (!lookup[elementName]) {
-            lookup[elementName] = {
-                count: 0,
-                nextKey: '0',
-            };
+        nodeAndElementLookup(elementName, lookup);
+    });
+};
+export var createCMSNodesLookup = function (node, lookup) {
+    UIDLUtils.traverseNodes(node, function (child) {
+        if (child.type !== 'cms-item' && child.type !== 'cms-list') {
+            return;
         }
-        lookup[elementName].count++;
-        var newCount = lookup[elementName].count;
-        if (newCount > 9 && isPowerOfTen(newCount)) {
-            // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
-            // nextKey will start either from: '0', '00', '000', etc.
-            lookup[elementName].nextKey = '0' + lookup[elementName].nextKey;
-        }
+        var nodeName = child.content.name.toLowerCase();
+        nodeAndElementLookup(nodeName, lookup);
     });
 };
+var nodeAndElementLookup = function (elementName, lookup) {
+    if (!lookup[elementName]) {
+        lookup[elementName] = {
+            count: 0,
+            nextKey: '0',
+        };
+    }
+    lookup[elementName].count++;
+    var newCount = lookup[elementName].count;
+    if (newCount > 9 && isPowerOfTen(newCount)) {
+        // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
+        // nextKey will start either from: '0', '00', '000', etc.
+        lookup[elementName].nextKey = '0' + lookup[elementName].nextKey;
+    }
+};
 var isPowerOfTen = function (value) {
@@ -262,2 +307,6 @@ while (value > 9 && value % 10 === 0) {
     UIDLUtils.traverseRepeats(node, function (repeat) {
+        var _a;
+        if (!((_a = repeat.dataSource) === null || _a === void 0 ? void 0 : _a.type)) {
+            return;
+        }
         if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
@@ -273,54 +322,2 @@ repeat.meta = repeat.meta || {};
 };
-export function parseStaticStyles(styles) {
-    var stylesList = [];
-    var tokens = /[,\(\)]/;
-    var parens = 0;
-    var buffer = '';
-    if (styles == null) {
-        return stylesList;
-    }
-    while (styles.length) {
-        var match = tokens.exec(styles);
-        if (!match) {
-            break;
-        }
-        var char = match[0];
-        var ignoreChar = false;
-        var foundAssetId = false;
-        switch (char) {
-            case ',':
-                if (!parens) {
-                    if (buffer) {
-                        stylesList.push(buffer.trim());
-                        buffer = '';
-                    }
-                    else {
-                        foundAssetId = true;
-                    }
-                    ignoreChar = true;
-                }
-                break;
-            case '(':
-                parens++;
-                break;
-            case ')':
-                parens--;
-                break;
-            default:
-                break;
-        }
-        var index = match.index + 1;
-        buffer += styles.slice(0, ignoreChar ? index - 1 : index);
-        styles = styles.slice(index);
-        if (foundAssetId) {
-            stylesList.push(buffer.trim());
-            buffer = '';
-            ignoreChar = true;
-        }
-    }
-    if (buffer.length || styles.length) {
-        stylesList.push((buffer + styles).trim());
-    }
-    return stylesList;
-}
 /**
@@ -340,29 +337,25 @@ * Prefixes all urls inside the style object with the assetsPrefix
             case 'static':
-                var staticContent_1 = styleValue.content;
-                if (typeof staticContent_1 === 'number') {
+                var staticContent = styleValue.content;
+                if (typeof staticContent === 'number') {
                     acc[styleKey] = styleValue;
                     return acc;
                 }
-                if (typeof staticContent_1 === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
-                    // need to split the styles in case of multiple background being added (eg: gradient + bgImage)
-                    var styleList = parseStaticStyles(staticContent_1);
-                    styleList = styleList.map(function (subStyle) {
-                        var asset = staticContent_1.indexOf('url(') === -1
-                            ? subStyle
-                            : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
-                        /*
-                          background image such as gradient shouldn't be urls
-                          we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
-                          but we don't compute and generate a url)
-                        */
-                        if (!asset.startsWith('/')) {
-                            return subStyle;
-                        }
-                        var url = UIDLUtils.prefixAssetsPath(asset, assets);
-                        var newStyleValue = "url(\"".concat(url, "\")");
-                        return newStyleValue;
-                    });
+                if (typeof staticContent === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
+                    var asset = staticContent.indexOf('url(') === -1
+                        ? staticContent
+                        : staticContent.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
+                    /*
+                      background image such as gradient shouldn't be urls
+                      we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
+                      but we don't compute and generate a url)
+                    */
+                    if (!asset.startsWith('/')) {
+                        acc[styleKey] = styleValue;
+                        return acc;
+                    }
+                    var url = UIDLUtils.prefixAssetsPath(asset, assets);
+                    var newStyleValue = "url(\"".concat(url, "\")");
                     acc[styleKey] = {
                         type: 'static',
-                        content: styleList.join(','),
+                        content: newStyleValue,
                     };
@@ -447,16 +440,12 @@ }
     }
-    if (uidl.propDefinitions) {
-        Object.keys(uidl.propDefinitions).forEach(function (prop) {
-            if (illegalPropNames.includes(prop)) {
-                throw new Error("Illegal prop key '".concat(prop, "'"));
-            }
-        });
-    }
-    if (uidl.stateDefinitions) {
-        Object.keys(uidl.stateDefinitions).forEach(function (state) {
-            if (illegalPropNames.includes(state)) {
-                throw new Error("Illegal state key '".concat(state, "'"));
-            }
-        });
-    }
+    Object.keys(uidl.propDefinitions || {}).forEach(function (prop) {
+        if (illegalPropNames.includes(prop)) {
+            throw new Error("Illegal prop key '".concat(prop, "'"));
+        }
+    });
+    Object.keys(uidl.stateDefinitions || {}).forEach(function (state) {
+        if (illegalPropNames.includes(state)) {
+            throw new Error("Illegal state key '".concat(state, "'"));
+        }
+    });
 };
@@ -463,0 +452,0 @@ export var checkForDefaultPropsContainingAssets = function (uidl, assets) {

package.json

 {
   "name": "@teleporthq/teleport-uidl-resolver",
-  "version": "0.27.8",
+  "version": "0.28.0-alpha.0",
   "description": "A small package that handles the transition from UIDL to HTML elements and has support for custom mappings.",
@@ -27,8 +27,8 @@ "author": "teleportHQ",
   "dependencies": {
-    "@teleporthq/teleport-shared": "^0.27.8",
-    "@teleporthq/teleport-types": "^0.27.8",
-    "@teleporthq/teleport-uidl-builders": "^0.27.8",
+    "@teleporthq/teleport-shared": "^0.28.0-alpha.0",
+    "@teleporthq/teleport-types": "^0.28.0-alpha.0",
+    "@teleporthq/teleport-uidl-builders": "^0.28.0-alpha.0",
     "deepmerge": "^4.0.0"
   },
-  "gitHead": "3ae7c0728720e2b5b1663c57e08283ede422c227"
+  "gitHead": "250d0e95a830f2b404486d3ad4f7a3739a74c77f"
 }

src/html-mapping.ts

@@ -30,3 +30,3 @@ import { Mapping } from '@teleporthq/teleport-types'
         path: 'dangerous-html',
-        version: '0.1.13',
+        version: '0.1.12',
         meta: {
@@ -37,2 +37,11 @@ importJustPath: true,
     },
+    'date-time-node': {
+      elementType: 'date-time-primitive',
+      dependency: {
+        type: 'package',
+        version: 'github:teleporthq/date-time-primitive',
+        path: '@teleporthq/date-time-primitive',
+        meta: { importJustPath: true },
+      },
+    },
     'lottie-node': {
@@ -39,0 +48,0 @@ elementType: 'lottie-player',

src/resolver.ts

@@ -64,2 +64,3 @@ import * as utils from './utils'
     utils.createNodesLookup(uidl.node, nodesLookup)
+    utils.createCMSNodesLookup(uidl.node, nodesLookup)
     utils.generateUniqueKeys(uidl.node, nodesLookup)
@@ -66,0 +67,0 @@

src/resolvers/abilities/utils.ts

@@ -37,2 +37,42 @@ import { StringUtils } from '@teleporthq/teleport-shared'
 
+    if (child.type === 'cms-list') {
+      const {
+        nodes: { success, error, empty, loading },
+      } = child.content
+
+      if (success) {
+        insertLinks(success, options, false, node)
+      }
+
+      if (error) {
+        insertLinks(error, options, false, node)
+      }
+
+      if (empty) {
+        insertLinks(empty, options, false, node)
+      }
+
+      if (loading) {
+        insertLinks(loading, options, false, node)
+      }
+    }
+
+    if (child.type === 'cms-item') {
+      const {
+        nodes: { success, error, loading },
+      } = child.content
+
+      if (success) {
+        insertLinks(success, options, false, node)
+      }
+
+      if (error) {
+        insertLinks(error, options, false, node)
+      }
+
+      if (loading) {
+        insertLinks(loading, options, false, node)
+      }
+    }
+
     return child
@@ -105,3 +145,8 @@ })
 const getLinkElementType = (link: UIDLLinkNode): string => {
-  return link.type === 'navlink' ? 'navlink' : 'link'
+  // for now I'm making all dynamic links local.
+  // Maybe navlinks could have a dynamic reference,
+  // not just a staic on in the future, but for now
+  // (for the CMS demo) the navlink was too robust
+  // to change
+  return link.type === 'navlink' || link.type === 'dynamic' ? 'navlink' : 'link'
 }
@@ -141,8 +186,10 @@
 
+    case 'dynamic':
+      return {
+        transitionTo: link,
+      }
+
     case 'navlink': {
       return {
-        transitionTo: {
-          type: 'static',
-          content: resolveNavlink(link.content.routeName, options),
-        },
+        transitionTo: resolveNavlink(link.content.routeName, options),
       }
@@ -175,25 +222,42 @@ }
 
-const resolveNavlink = (routeName: string, options: GeneratorOptions) => {
+const resolveNavlink = (
+  route: UIDLAttributeValue,
+  options: GeneratorOptions
+): UIDLAttributeValue => {
   if (options.skipNavlinkResolver) {
-    return routeName
+    return route
   }
 
-  if (routeName.startsWith('/')) {
+  const { type, content: routeName } = route
+
+  if (type !== 'static') {
+    return route
+  }
+
+  if (routeName.toString().startsWith('/')) {
     // attribute was explicitly set as a custom navlink
-    return routeName
+    return route
   }
 
   const friendlyURL = StringUtils.camelCaseToDashCase(
-    StringUtils.removeIllegalCharacters(routeName)
+    StringUtils.removeIllegalCharacters(routeName.toString())
   )
 
   const transitionRoute = options.projectRouteDefinition
-    ? options.projectRouteDefinition.values.find((route) => route.value === routeName)
+    ? options.projectRouteDefinition.values.find((routeItem) => routeItem.value === routeName)
     : null
 
   if (!transitionRoute) {
-    return `/${friendlyURL}`
+    return {
+      type: 'static',
+      content: `/${friendlyURL}`,
+    }
   }
 
-  return transitionRoute?.pageOptions?.navLink ?? `/${friendlyURL}`
+  const value = transitionRoute?.pageOptions?.navLink ?? `/${friendlyURL}`
+
+  return {
+    type: 'static',
+    content: value,
+  }
 }

src/utils.ts

@@ -16,2 +16,3 @@ import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
   UIDLDynamicReference,
+  UIDLConditionalNode,
 } from '@teleporthq/teleport-types'
@@ -59,3 +60,3 @@ import deepmerge from 'deepmerge'
     Object.keys(tag).forEach((key) => {
-      tag[key] = UIDLUtils.prefixAssetsPath(tag[key], options.assets)
+      tag[key] = UIDLUtils.prefixAssetsPath(tag[key] as string, options.assets)
     })
@@ -85,5 +86,26 @@ })
     }
+
+    if (node.type === 'conditional') {
+      resolveConditional(node, options)
+    }
+
+    if (node.type === 'cms-item') {
+      node.content.name = node.content?.name || 'cms-item'
+    }
+
+    if (node.type === 'cms-list') {
+      node.content.name = node.content?.name || 'cms-list'
+    }
   })
 }
 
+export const resolveConditional = (condNode: UIDLConditionalNode, options: GeneratorOptions) => {
+  if (condNode.content?.node) {
+    const { type, content } = condNode.content.node
+    if (type === 'element') {
+      resolveElement(content, options)
+    }
+  }
+}
+
 export const resolveElement = (element: UIDLElement, options: GeneratorOptions) => {
@@ -266,2 +288,17 @@ const { mapping, localDependenciesPrefix } = options
 export const generateUniqueKeys = (node: UIDLNode, lookup: ElementsLookup) => {
+  UIDLUtils.traverseNodes(node, (child) => {
+    if (child.type !== 'cms-item' && child.type !== 'cms-list') {
+      return
+    }
+
+    const nodeOcurrence = lookup[child.content.name.toLowerCase()]
+    if (nodeOcurrence.count === 1) {
+      child.content.key = child.content.name
+    } else {
+      const currentKey = nodeOcurrence.nextKey
+      child.content.key = generateKey(child.content.name, currentKey)
+      nodeOcurrence.nextKey = generateNextIncrementalKey(currentKey)
+    }
+  })
+
   UIDLUtils.traverseElements(node, (element) => {
@@ -303,19 +340,33 @@ // If a certain node name (ex: "container") is present multiple times in the component, it will be counted here
     const elementName = element.name.toLowerCase()
-    if (!lookup[elementName]) {
-      lookup[elementName] = {
-        count: 0,
-        nextKey: '0',
-      }
-    }
+    nodeAndElementLookup(elementName, lookup)
+  })
+}
 
-    lookup[elementName].count++
-    const newCount = lookup[elementName].count
-    if (newCount > 9 && isPowerOfTen(newCount)) {
-      // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
-      // nextKey will start either from: '0', '00', '000', etc.
-      lookup[elementName].nextKey = '0' + lookup[elementName].nextKey
+export const createCMSNodesLookup = (node: UIDLNode, lookup: ElementsLookup) => {
+  UIDLUtils.traverseNodes(node, (child) => {
+    if (child.type !== 'cms-item' && child.type !== 'cms-list') {
+      return
     }
+    const nodeName = child.content.name.toLowerCase()
+    nodeAndElementLookup(nodeName, lookup)
   })
 }
 
+const nodeAndElementLookup = (elementName: string, lookup: ElementsLookup) => {
+  if (!lookup[elementName]) {
+    lookup[elementName] = {
+      count: 0,
+      nextKey: '0',
+    }
+  }
+
+  lookup[elementName].count++
+  const newCount = lookup[elementName].count
+  if (newCount > 9 && isPowerOfTen(newCount)) {
+    // Add a '0' each time we pass a power of ten: 10, 100, 1000, etc.
+    // nextKey will start either from: '0', '00', '000', etc.
+    lookup[elementName].nextKey = '0' + lookup[elementName].nextKey
+  }
+}
+
 const isPowerOfTen = (value: number) => {
@@ -332,3 +383,7 @@ while (value > 9 && value % 10 === 0) {
 
-  UIDLUtils.traverseRepeats(node, (repeat) => {
+  UIDLUtils.traverseRepeats(node, (repeat: UIDLRepeatContent) => {
+    if (!repeat.dataSource?.type) {
+      return
+    }
+
     if (repeat.dataSource.type === 'static' && !customDataSourceIdentifierExists(repeat)) {
@@ -346,62 +401,2 @@ repeat.meta = repeat.meta || {}
 
-export function parseStaticStyles(styles: string) {
-  const stylesList: string[] = []
-  const tokens = /[,\(\)]/
-  let parens = 0
-  let buffer = ''
-
-  if (styles == null) {
-    return stylesList
-  }
-
-  while (styles.length) {
-    const match = tokens.exec(styles)
-    if (!match) {
-      break
-    }
-    const char = match[0]
-    let ignoreChar = false
-    let foundAssetId = false
-
-    switch (char) {
-      case ',':
-        if (!parens) {
-          if (buffer) {
-            stylesList.push(buffer.trim())
-            buffer = ''
-          } else {
-            foundAssetId = true
-          }
-
-          ignoreChar = true
-        }
-        break
-      case '(':
-        parens++
-        break
-      case ')':
-        parens--
-        break
-      default:
-        break
-    }
-
-    const index = match.index + 1
-    buffer += styles.slice(0, ignoreChar ? index - 1 : index)
-    styles = styles.slice(index)
-
-    if (foundAssetId) {
-      stylesList.push(buffer.trim())
-      buffer = ''
-      ignoreChar = true
-    }
-  }
-
-  if (buffer.length || styles.length) {
-    stylesList.push((buffer + styles).trim())
-  }
-
-  return stylesList
-}
-
 /**
@@ -435,27 +430,22 @@ * Prefixes all urls inside the style object with the assetsPrefix
         if (typeof staticContent === 'string' && STYLE_PROPERTIES_WITH_URL.includes(styleKey)) {
-          // need to split the styles in case of multiple background being added (eg: gradient + bgImage)
-          let styleList = parseStaticStyles(staticContent)
-          styleList = styleList.map((subStyle) => {
-            const asset =
-              staticContent.indexOf('url(') === -1
-                ? subStyle
-                : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '')
+          const asset =
+            staticContent.indexOf('url(') === -1
+              ? staticContent
+              : staticContent.match(/\((.*?)\)/)[1].replace(/('|")/g, '')
 
-            /*
-              background image such as gradient shouldn't be urls
-              we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function 
-              but we don't compute and generate a url)
-            */
-            if (!asset.startsWith('/')) {
-              return subStyle
-            }
+          /*
+            background image such as gradient shouldn't be urls
+            we prevent that by checking if the value is actually an asset or not (same check as in the prefixAssetsPath function
+            but we don't compute and generate a url)
+          */
+          if (!asset.startsWith('/')) {
+            acc[styleKey] = styleValue
+            return acc
+          }
 
-            const url = UIDLUtils.prefixAssetsPath(asset, assets)
-            const newStyleValue = `url("${url}")`
-            return newStyleValue
-          })
-
+          const url = UIDLUtils.prefixAssetsPath(asset, assets)
+          const newStyleValue = `url("${url}")`
           acc[styleKey] = {
             type: 'static',
-            content: styleList.join(','),
+            content: newStyleValue,
           } as T
@@ -478,3 +468,2 @@ } else {
   const resolvedAttrs: Record<string, UIDLAttributeValue> = {}
-
   // This will gather all the attributes from the UIDL which are mapped using the elements-mapping
@@ -564,17 +553,13 @@ // These attributes will not be added on the tag as they are, but using the elements-mapping
 
-  if (uidl.propDefinitions) {
-    Object.keys(uidl.propDefinitions).forEach((prop) => {
-      if (illegalPropNames.includes(prop)) {
-        throw new Error(`Illegal prop key '${prop}'`)
-      }
-    })
-  }
+  Object.keys(uidl.propDefinitions || {}).forEach((prop) => {
+    if (illegalPropNames.includes(prop)) {
+      throw new Error(`Illegal prop key '${prop}'`)
+    }
+  })
 
-  if (uidl.stateDefinitions) {
-    Object.keys(uidl.stateDefinitions).forEach((state) => {
-      if (illegalPropNames.includes(state)) {
-        throw new Error(`Illegal state key '${state}'`)
-      }
-    })
-  }
+  Object.keys(uidl.stateDefinitions || {}).forEach((state) => {
+    if (illegalPropNames.includes(state)) {
+      throw new Error(`Illegal state key '${state}'`)
+    }
+  })
 }
@@ -581,0 +566,0 @@

No alert changes

Improved metrics

Total package byte prevSize

311305

1.52%

Lines of code

4619

2.12%

Dependency changes

• + Added

  @teleporthq/teleport-shared@0.28.0
  (transitive)

• + Added

  @teleporthq/teleport-types@0.28.0
  (transitive)

• + Added

  @teleporthq/teleport-uidl-builders@0.28.0
  (transitive)

• - Removed

  @teleporthq/teleport-shared@0.27.9
  (transitive)

• - Removed

  @teleporthq/teleport-types@0.27.8
  (transitive)

• - Removed

  @teleporthq/teleport-uidl-builders@0.27.8
  (transitive)

• Updated

  @teleporthq/teleport-shared@^0.28.0-alpha.0

• Updated

  @teleporthq/teleport-types@^0.28.0-alpha.0

• Updated

  @teleporthq/teleport-uidl-builders@^0.28.0-alpha.0