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

Comparing version 0.45.2-alpha.0 to 0.45.3-alpha.0

__tests__/embed-lottie-node/index.ts

@@ -1,4 +0,4 @@
-import { wrapHtmlNode, createEmbedDivWrapperNode } from '../../src/resolvers/embed-node/utils'
+import { wrapHtmlNode } from '../../src/resolvers/embed-node/utils'
 import { elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
-import { UIDLElementNode, UIDLStyleDefinitions } from '@teleporthq/teleport-types'
+import { UIDLElementNode } from '@teleporthq/teleport-types'
 
@@ -23,7 +23,12 @@ describe('wrap html-node element', () => {
     const result = wrapHtmlNode(node, {})
-    expect(result.content.elementType).toBe('div')
+    expect(result.content.elementType).toBe('container')
     expect(result.content.children?.length).toBe(1)
     const childNode = result.content.children?.[0] as UIDLElementNode
-    expect(childNode.content.elementType).toBe('html-node')
-    expect(childNode.content.attrs?.html.content).toBe(
+    expect(childNode.content.elementType).toBe('container')
+    expect(childNode.content.children?.length).toBe(1)
+
+    expect(childNode.content.style).toMatchObject({ display: staticNode('contents') })
+    const subChildNode = childNode.content.children?.[0] as UIDLElementNode
+    expect(subChildNode.content.elementType).toBe('html-node')
+    expect(subChildNode.content.attrs?.html.content).toBe(
       `<blockquote class='twitter-tweet'><p lang='en' dir='ltr'>Feels like the last 20 mins of Don’t Look Up right about now…</p>&mdash; Netflix (@netflix) <a href='https://twitter.com/netflix/status/1593420772948598784?ref_src=twsrc%5Etfw'>November 18, 2022</a></blockquote> <script async src='https://platform.twitter.com/widgets.js'></script>`
@@ -33,28 +38,1 @@ )
 })
-
-describe('create div', () => {
-  it('creates wrapping div', () => {
-    const node = elementNode(
-      'html-node',
-      {
-        html: {
-          type: 'raw',
-          content: `<blockquote class='twitter-tweet'><p lang='en' dir='ltr'>Feels like the last 20 mins of Don’t Look Up right about now…</p>&mdash; Netflix (@netflix) <a href='https://twitter.com/netflix/status/1593420772948598784?ref_src=twsrc%5Etfw'>November 18, 2022</a></blockquote> <script async src='https://platform.twitter.com/widgets.js'></script>`,
-        },
-      },
-      [],
-      undefined,
-      {
-        width: staticNode('100px'),
-      }
-    )
-
-    const result = createEmbedDivWrapperNode(node)
-
-    expect(result.content.elementType).toBe('div')
-    expect(result.content.children?.length).toBe(0)
-    expect(result.content.attrs?.html).toBeUndefined()
-    expect(result.content.style).toBeDefined()
-    expect(Object.keys(result.content.style as UIDLStyleDefinitions).length).toBe(1)
-  })
-})

__tests__/utils.ts

@@ -85,2 +85,11 @@ import {
 
+  it('counts duplicate nodes considering camel case names as well', async () => {
+    const node = elementNode('About-Me', {}, [elementNode('aboutMe')])
+    const lookup: Record<string, { count: number; nextKey: string }> = {}
+    createNodesLookup(node, lookup)
+
+    expect(lookup['about-me'].count).toBe(2)
+    expect(lookup['about-me'].nextKey).toBe('0')
+  })
+
   it('adds zero padding when counting keys', async () => {
@@ -87,0 +96,0 @@ const node = elementNode('container')

dist/cjs/resolvers/embed-node/utils.d.ts

 import { GeneratorOptions, UIDLElementNode } from '@teleporthq/teleport-types';
 export declare const wrapHtmlNode: (node: UIDLElementNode, options: GeneratorOptions) => UIDLElementNode;
-export declare const createEmbedDivWrapperNode: (node: UIDLElementNode) => UIDLElementNode;
 //# sourceMappingURL=utils.d.ts.map

dist/cjs/resolvers/embed-node/utils.js

@@ -14,5 +14,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createEmbedDivWrapperNode = exports.wrapHtmlNode = void 0;
+exports.wrapHtmlNode = void 0;
 var wrapHtmlNode = function (node, options) {
-    var _a = node.content, children = _a.children, attrs = _a.attrs;
+    var children = node.content.children;
     node.content.children = children === null || children === void 0 ? void 0 : children.map(function (child) {
@@ -34,34 +34,39 @@ var _a;
     });
-    var newNode;
-    if (attrs === null || attrs === void 0 ? void 0 : attrs.html) {
-        newNode = (0, exports.createEmbedDivWrapperNode)(node);
+    var elementType = node.content.elementType;
+    if (elementType !== 'html-node') {
+        return node;
     }
-    if (newNode) {
-        newNode.content.children.push(node);
-        node.content.style = {};
-        node.content.referencedStyles = {};
-        node.content.events = {};
-        return newNode;
-    }
-    return node;
-};
-exports.wrapHtmlNode = wrapHtmlNode;
-var createEmbedDivWrapperNode = function (node) {
-    var attrs = Object.keys(node.content.attrs).reduce(function (acc, attrKey) {
-        if (attrKey !== 'html') {
-            acc[attrKey] = node.content.attrs[attrKey];
-        }
-        return acc;
-    }, {});
     return {
         type: 'element',
-        content: __assign(__assign({}, node.content), { attrs: attrs, style: {
-                display: {
-                    type: 'static',
-                    content: 'contents',
+        content: {
+            elementType: 'container',
+            attrs: {},
+            style: node.content.style,
+            referencedStyles: node.content.referencedStyles,
+            events: node.content.events,
+            children: [
+                {
+                    type: 'element',
+                    content: {
+                        elementType: 'container',
+                        referencedStyles: {},
+                        style: {
+                            display: {
+                                type: 'static',
+                                content: 'contents',
+                            },
+                        },
+                        children: [
+                            {
+                                type: 'element',
+                                content: __assign(__assign({}, node.content), { events: {}, referencedStyles: {}, style: {} }),
+                            },
+                        ],
+                    },
                 },
-            }, elementType: 'div', semanticType: 'div', children: [] }),
+            ],
+        },
     };
 };
-exports.createEmbedDivWrapperNode = createEmbedDivWrapperNode;
+exports.wrapHtmlNode = wrapHtmlNode;
 //# sourceMappingURL=utils.js.map

dist/cjs/resolvers/style-set-definitions/index.js

@@ -33,3 +33,3 @@ "use strict";
         var styleRef = styleSets[styleId];
-        var _a = styleRef.conditions, conditions = _a === void 0 ? [] : _a;
+        var _a = styleRef.conditions, conditions = _a === void 0 ? [] : _a, _b = styleRef.content, content = _b === void 0 ? {} : _b;
         if (conditions.length === 0) {
@@ -39,3 +39,3 @@ acc[styleId] = __assign(__assign({}, styleRef), { content: (0, utils_1.prefixAssetURLs)(styleRef.content, options === null || options === void 0 ? void 0 : options.assets) });
         }
-        var _b = conditions.reduce(function (_a, item) {
+        var _c = conditions.reduce(function (_a, item) {
             var media = _a[0], state = _a[1];
@@ -49,4 +49,4 @@ if (item.type === 'screen-size') {
             return [media, state];
-        }, [[], []]), mediaStyles = _b[0], elementStates = _b[1];
-        acc[styleId] = __assign(__assign({}, styleRef), { conditions: __spreadArray(__spreadArray([], elementStates, true), mediaStyles.sort(function (a, b) { return b.meta.maxWidth - a.meta.maxWidth; }), true) });
+        }, [[], []]), mediaStyles = _c[0], elementStates = _c[1];
+        acc[styleId] = __assign(__assign({}, styleRef), { content: (0, utils_1.prefixAssetURLs)(content, options === null || options === void 0 ? void 0 : options.assets), conditions: __spreadArray(__spreadArray([], elementStates, true), mediaStyles.sort(function (a, b) { return b.meta.maxWidth - a.meta.maxWidth; }), true) });
         return acc;
@@ -53,0 +53,0 @@ }, {});

dist/cjs/utils.js

@@ -255,4 +255,4 @@ "use strict";
         // NextKey will be appended to the node name to ensure uniqueness inside the component
-        // Element name is stored as a lower case string in the lookup
-        var nodeOcurrence = lookup[element.name.toLowerCase()];
+        // Element name is stored as a lower case string in the lookup, considering camel case
+        var nodeOcurrence = lookup[teleport_shared_1.StringUtils.camelCaseToDashCase(element.name)];
         if (nodeOcurrence.count === 1) {
@@ -285,5 +285,17 @@ // If the name ocurrence is unique we use it as it is
     teleport_shared_1.UIDLUtils.traverseElements(node, function (element) {
-        // Element name is stored as a lower case string in the lookup
-        var elementName = element.name.toLowerCase();
-        nodeAndElementLookup(elementName, lookup);
+        // Element name is stored as a lower case string in the lookup, considering camel case
+        var elementName = teleport_shared_1.StringUtils.camelCaseToDashCase(element.name);
+        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;
+        }
     });
@@ -410,14 +422,16 @@ };
             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)) {
+                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)
-                    var styleList = parseStaticStyles(staticContent_1);
+                    var styleList = parseStaticStyles(staticContent);
                     styleList = styleList.map(function (subStyle) {
-                        var asset = staticContent_1.indexOf('url(') === -1
-                            ? subStyle
-                            : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
+                        var asset = subStyle;
+                        var match = subStyle.match(/url\(['"]?(.*?")['"]?\)/);
+                        if (match) {
+                            asset = match[1].replace(/('|")/g, '');
+                        }
                         /*
@@ -424,0 +438,0 @@ background image such as gradient shouldn't be urls

dist/esm/resolvers/embed-node/utils.d.ts

 import { GeneratorOptions, UIDLElementNode } from '@teleporthq/teleport-types';
 export declare const wrapHtmlNode: (node: UIDLElementNode, options: GeneratorOptions) => UIDLElementNode;
-export declare const createEmbedDivWrapperNode: (node: UIDLElementNode) => UIDLElementNode;
 //# sourceMappingURL=utils.d.ts.map

dist/esm/resolvers/embed-node/utils.js

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {
 export var wrapHtmlNode = function (node, options) {
-    var _a = node.content, children = _a.children, attrs = _a.attrs;
+    var children = node.content.children;
     node.content.children = children === null || children === void 0 ? void 0 : children.map(function (child) {
@@ -31,32 +31,38 @@ var _a;
     });
-    var newNode;
-    if (attrs === null || attrs === void 0 ? void 0 : attrs.html) {
-        newNode = createEmbedDivWrapperNode(node);
+    var elementType = node.content.elementType;
+    if (elementType !== 'html-node') {
+        return node;
     }
-    if (newNode) {
-        newNode.content.children.push(node);
-        node.content.style = {};
-        node.content.referencedStyles = {};
-        node.content.events = {};
-        return newNode;
-    }
-    return node;
-};
-export var createEmbedDivWrapperNode = function (node) {
-    var attrs = Object.keys(node.content.attrs).reduce(function (acc, attrKey) {
-        if (attrKey !== 'html') {
-            acc[attrKey] = node.content.attrs[attrKey];
-        }
-        return acc;
-    }, {});
     return {
         type: 'element',
-        content: __assign(__assign({}, node.content), { attrs: attrs, style: {
-                display: {
-                    type: 'static',
-                    content: 'contents',
+        content: {
+            elementType: 'container',
+            attrs: {},
+            style: node.content.style,
+            referencedStyles: node.content.referencedStyles,
+            events: node.content.events,
+            children: [
+                {
+                    type: 'element',
+                    content: {
+                        elementType: 'container',
+                        referencedStyles: {},
+                        style: {
+                            display: {
+                                type: 'static',
+                                content: 'contents',
+                            },
+                        },
+                        children: [
+                            {
+                                type: 'element',
+                                content: __assign(__assign({}, node.content), { events: {}, referencedStyles: {}, style: {} }),
+                            },
+                        ],
+                    },
                 },
-            }, elementType: 'div', semanticType: 'div', children: [] }),
+            ],
+        },
     };
 };
 //# sourceMappingURL=utils.js.map

dist/esm/resolvers/style-set-definitions/index.js

@@ -30,3 +30,3 @@ /*
         var styleRef = styleSets[styleId];
-        var _a = styleRef.conditions, conditions = _a === void 0 ? [] : _a;
+        var _a = styleRef.conditions, conditions = _a === void 0 ? [] : _a, _b = styleRef.content, content = _b === void 0 ? {} : _b;
         if (conditions.length === 0) {
@@ -36,3 +36,3 @@ acc[styleId] = __assign(__assign({}, styleRef), { content: prefixAssetURLs(styleRef.content, options === null || options === void 0 ? void 0 : options.assets) });
         }
-        var _b = conditions.reduce(function (_a, item) {
+        var _c = conditions.reduce(function (_a, item) {
             var media = _a[0], state = _a[1];
@@ -46,4 +46,4 @@ if (item.type === 'screen-size') {
             return [media, state];
-        }, [[], []]), mediaStyles = _b[0], elementStates = _b[1];
-        acc[styleId] = __assign(__assign({}, styleRef), { conditions: __spreadArray(__spreadArray([], elementStates, true), mediaStyles.sort(function (a, b) { return b.meta.maxWidth - a.meta.maxWidth; }), true) });
+        }, [[], []]), mediaStyles = _c[0], elementStates = _c[1];
+        acc[styleId] = __assign(__assign({}, styleRef), { content: prefixAssetURLs(content, options === null || options === void 0 ? void 0 : options.assets), conditions: __spreadArray(__spreadArray([], elementStates, true), mediaStyles.sort(function (a, b) { return b.meta.maxWidth - a.meta.maxWidth; }), true) });
         return acc;
@@ -50,0 +50,0 @@ }, {});

dist/esm/utils.js

@@ -242,4 +242,4 @@ var __assign = (this && this.__assign) || function () {
         // NextKey will be appended to the node name to ensure uniqueness inside the component
-        // Element name is stored as a lower case string in the lookup
-        var nodeOcurrence = lookup[element.name.toLowerCase()];
+        // Element name is stored as a lower case string in the lookup, considering camel case
+        var nodeOcurrence = lookup[StringUtils.camelCaseToDashCase(element.name)];
         if (nodeOcurrence.count === 1) {
@@ -271,5 +271,17 @@ // If the name ocurrence is unique we use it as it is
     UIDLUtils.traverseElements(node, function (element) {
-        // Element name is stored as a lower case string in the lookup
-        var elementName = element.name.toLowerCase();
-        nodeAndElementLookup(elementName, lookup);
+        // Element name is stored as a lower case string in the lookup, considering camel case
+        var elementName = StringUtils.camelCaseToDashCase(element.name);
+        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;
+        }
     });
@@ -392,14 +404,16 @@ };
             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)) {
+                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)
-                    var styleList = parseStaticStyles(staticContent_1);
+                    var styleList = parseStaticStyles(staticContent);
                     styleList = styleList.map(function (subStyle) {
-                        var asset = staticContent_1.indexOf('url(') === -1
-                            ? subStyle
-                            : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '');
+                        var asset = subStyle;
+                        var match = subStyle.match(/url\(['"]?(.*?")['"]?\)/);
+                        if (match) {
+                            asset = match[1].replace(/('|")/g, '');
+                        }
                         /*
@@ -406,0 +420,0 @@ background image such as gradient shouldn't be urls

package.json

 {
   "name": "@teleporthq/teleport-uidl-resolver",
-  "version": "0.45.2-alpha.0",
+  "version": "0.45.3-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.45.1-alpha.0",
-    "@teleporthq/teleport-types": "^0.45.1-alpha.0",
-    "@teleporthq/teleport-uidl-builders": "^0.45.1-alpha.0",
+    "@teleporthq/teleport-shared": "^0.45.3-alpha.0",
+    "@teleporthq/teleport-types": "^0.45.3-alpha.0",
+    "@teleporthq/teleport-uidl-builders": "^0.45.3-alpha.0",
     "deepmerge": "^4.0.0"
   },
-  "gitHead": "1765a8f5493ce997f23e7d251cccbf841bf074c3"
+  "gitHead": "760994b7309da1fd8a9956691d760f5b88aa268a"
 }

src/resolvers/embed-node/utils.ts

@@ -1,5 +0,5 @@
-import { GeneratorOptions, UIDLAttributeValue, UIDLElementNode } from '@teleporthq/teleport-types'
+import { GeneratorOptions, UIDLElementNode } from '@teleporthq/teleport-types'
 
 export const wrapHtmlNode = (node: UIDLElementNode, options: GeneratorOptions): UIDLElementNode => {
-  const { children, attrs } = node.content
+  const { children } = node.content
 
@@ -26,48 +26,43 @@ node.content.children = children?.map((child) => {
 
-  let newNode
-  if (attrs?.html) {
-    newNode = createEmbedDivWrapperNode(node)
+  const { elementType } = node.content
+  if (elementType !== 'html-node') {
+    return node
   }
 
-  if (newNode) {
-    newNode.content.children.push(node)
-
-    node.content.style = {}
-    node.content.referencedStyles = {}
-    node.content.events = {}
-
-    return newNode
-  }
-
-  return node
-}
-
-export const createEmbedDivWrapperNode = (node: UIDLElementNode): UIDLElementNode => {
-  const attrs = Object.keys(node.content.attrs).reduce(
-    (acc: Record<string, UIDLAttributeValue>, attrKey: string) => {
-      if (attrKey !== 'html') {
-        acc[attrKey] = node.content.attrs[attrKey]
-      }
-
-      return acc
-    },
-    {}
-  )
-
   return {
     type: 'element',
     content: {
-      ...node.content,
-      attrs,
-      style: {
-        display: {
-          type: 'static',
-          content: 'contents',
+      elementType: 'container',
+      attrs: {},
+      style: node.content.style,
+      referencedStyles: node.content.referencedStyles,
+      events: node.content.events,
+      children: [
+        {
+          type: 'element',
+          content: {
+            elementType: 'container',
+            referencedStyles: {},
+            style: {
+              display: {
+                type: 'static',
+                content: 'contents',
+              },
+            },
+            children: [
+              {
+                type: 'element',
+                content: {
+                  ...node.content,
+                  events: {},
+                  referencedStyles: {},
+                  style: {},
+                },
+              },
+            ],
+          },
         },
-      },
-      elementType: 'div',
-      semanticType: 'div',
-      children: [],
+      ],
     },
   }
 }

src/resolvers/style-set-definitions/index.ts

@@ -20,3 +20,3 @@ /*
     const styleRef = styleSets[styleId]
-    const { conditions = [] } = styleRef
+    const { conditions = [], content = {} } = styleRef
 
@@ -52,2 +52,3 @@ if (conditions.length === 0) {
       ...styleRef,
+      content: prefixAssetURLs(content, options?.assets),
       conditions: [
@@ -54,0 +55,0 @@ ...elementStates,

src/utils.ts

@@ -311,4 +311,4 @@ import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
     // NextKey will be appended to the node name to ensure uniqueness inside the component
-    // Element name is stored as a lower case string in the lookup
-    const nodeOcurrence = lookup[element.name.toLowerCase()]
+    // Element name is stored as a lower case string in the lookup, considering camel case
+    const nodeOcurrence = lookup[StringUtils.camelCaseToDashCase(element.name)]
 
@@ -343,5 +343,18 @@ if (nodeOcurrence.count === 1) {
   UIDLUtils.traverseElements(node, (element) => {
-    // Element name is stored as a lower case string in the lookup
-    const elementName = element.name.toLowerCase()
-    nodeAndElementLookup(elementName, lookup)
+    // Element name is stored as a lower case string in the lookup, considering camel case
+    const elementName = StringUtils.camelCaseToDashCase(element.name)
+    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
+    }
   })
@@ -500,6 +513,7 @@ }
           styleList = styleList.map((subStyle) => {
-            const asset =
-              staticContent.indexOf('url(') === -1
-                ? subStyle
-                : subStyle.match(/\((.*?)\)/)[1].replace(/('|")/g, '')
+            let asset = subStyle
+            const match = subStyle.match(/url\(['"]?(.*?")['"]?\)/)
+            if (match) {
+              asset = match[1].replace(/('|")/g, '')
+            }
 
@@ -506,0 +520,0 @@ /*

No alert changes

Improved metrics

Total package byte prevSize

333824

increased by0.69%

Lines of code

4995

increased by0.81%

Dependency changes

• + Added@teleporthq/teleport-shared@0.45.3-alpha.0(transitive)

• + Added@teleporthq/teleport-types@0.45.3-alpha.0(transitive)

• + Added@teleporthq/teleport-uidl-builders@0.45.3-alpha.0(transitive)

• - Removed@teleporthq/teleport-shared@0.45.1-alpha.0(transitive)

• - Removed@teleporthq/teleport-types@0.45.1-alpha.0(transitive)

• - Removed@teleporthq/teleport-uidl-builders@0.45.1-alpha.0(transitive)

• Updated@teleporthq/teleport-shared@^0.45.3-alpha.0

• Updated@teleporthq/teleport-types@^0.45.3-alpha.0

• Updated@teleporthq/teleport-uidl-builders@^0.45.3-alpha.0