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

Comparing version 0.38.12 to 0.38.13

dist/cjs/utils.js

@@ -96,9 +96,11 @@ "use strict";
 var resolveElement = function (element, options) {
-    var _a;
+    var _a, _b, _c;
     var mapping = options.mapping, localDependenciesPrefix = options.localDependenciesPrefix;
     var eventsMapping = mapping.events, elementsMapping = mapping.elements, attributesMapping = mapping.attributes;
+    var isNextMappings = ((_a = mapping.elements.navlink) === null || _a === void 0 ? void 0 : _a.dependency) &&
+        ((_b = mapping.elements.navlink.dependency) === null || _b === void 0 ? void 0 : _b.path) === 'next/link';
     var originalElement = element;
     var originalElementType = originalElement.elementType;
     var mappedElement = elementsMapping[originalElement.elementType] || {
-        elementType: (_a = originalElement.semanticType) !== null && _a !== void 0 ? _a : originalElement.elementType, // identity mapping
+        elementType: (_c = originalElement.semanticType) !== null && _c !== void 0 ? _c : originalElement.elementType, // identity mapping
     };
@@ -165,2 +167,29 @@ // Setting up the name of the node based on the type, if it is not supplied
     }
+    // Unlike all other frameworks, nextjs doesn't pass attributes on the custom link component.
+    // For eg: If we have additational props on top of Link in react-router-dom. They are passed to the child.
+    // So, we need to manually find the attributes that are not supported by next and pass to the actual anchor tag.
+    // https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/link.tsx#L29-L54
+    if (isNextMappings && originalElement.elementType === 'Link' && originalElement.attrs) {
+        var unSupportedattributesForNextLink = Object.fromEntries(Object.entries(originalElement.attrs).filter(function (_a) {
+            var key = _a[0];
+            return [
+                'href',
+                'as',
+                'replace',
+                'scroll',
+                'shallow',
+                'passHref',
+                'prefetch',
+                'locale',
+                'legacyBehavior',
+                'onMouseEnter',
+                'onTouchStart',
+                'onClick',
+            ].includes(key) === false;
+        }));
+        if (unSupportedattributesForNextLink && originalElement.children[0].type === 'element') {
+            originalElement.children[0].content.attrs = __assign(__assign({}, originalElement.children[0].content.attrs), unSupportedattributesForNextLink);
+            Object.keys(unSupportedattributesForNextLink).forEach(function (key) { return delete originalElement.attrs[key]; });
+        }
+    }
 };
@@ -167,0 +196,0 @@ exports.resolveElement = resolveElement;

dist/esm/utils.js

@@ -86,9 +86,11 @@ var __assign = (this && this.__assign) || function () {
 export var resolveElement = function (element, options) {
-    var _a;
+    var _a, _b, _c;
     var mapping = options.mapping, localDependenciesPrefix = options.localDependenciesPrefix;
     var eventsMapping = mapping.events, elementsMapping = mapping.elements, attributesMapping = mapping.attributes;
+    var isNextMappings = ((_a = mapping.elements.navlink) === null || _a === void 0 ? void 0 : _a.dependency) &&
+        ((_b = mapping.elements.navlink.dependency) === null || _b === void 0 ? void 0 : _b.path) === 'next/link';
     var originalElement = element;
     var originalElementType = originalElement.elementType;
     var mappedElement = elementsMapping[originalElement.elementType] || {
-        elementType: (_a = originalElement.semanticType) !== null && _a !== void 0 ? _a : originalElement.elementType, // identity mapping
+        elementType: (_c = originalElement.semanticType) !== null && _c !== void 0 ? _c : originalElement.elementType, // identity mapping
     };
@@ -155,2 +157,29 @@ // Setting up the name of the node based on the type, if it is not supplied
     }
+    // Unlike all other frameworks, nextjs doesn't pass attributes on the custom link component.
+    // For eg: If we have additational props on top of Link in react-router-dom. They are passed to the child.
+    // So, we need to manually find the attributes that are not supported by next and pass to the actual anchor tag.
+    // https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/link.tsx#L29-L54
+    if (isNextMappings && originalElement.elementType === 'Link' && originalElement.attrs) {
+        var unSupportedattributesForNextLink = Object.fromEntries(Object.entries(originalElement.attrs).filter(function (_a) {
+            var key = _a[0];
+            return [
+                'href',
+                'as',
+                'replace',
+                'scroll',
+                'shallow',
+                'passHref',
+                'prefetch',
+                'locale',
+                'legacyBehavior',
+                'onMouseEnter',
+                'onTouchStart',
+                'onClick',
+            ].includes(key) === false;
+        }));
+        if (unSupportedattributesForNextLink && originalElement.children[0].type === 'element') {
+            originalElement.children[0].content.attrs = __assign(__assign({}, originalElement.children[0].content.attrs), unSupportedattributesForNextLink);
+            Object.keys(unSupportedattributesForNextLink).forEach(function (key) { return delete originalElement.attrs[key]; });
+        }
+    }
 };
@@ -157,0 +186,0 @@ export var resolveChildren = function (mappedChildren, originalChildren) {

package.json

 {
   "name": "@teleporthq/teleport-uidl-resolver",
-  "version": "0.38.12",
+  "version": "0.38.13",
   "description": "A small package that handles the transition from UIDL to HTML elements and has support for custom mappings.",
@@ -32,3 +32,3 @@ "author": "teleportHQ",
   },
-  "gitHead": "07b065d0821d18af43eaecced31d6be110d0b316"
+  "gitHead": "18bcbf67fb2eefe836b070cddacb57c037044f65"
 }

src/utils.ts

@@ -119,2 +119,5 @@ import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
   } = mapping
+  const isNextMappings =
+    mapping.elements.navlink?.dependency &&
+    mapping.elements.navlink.dependency?.path === 'next/link'
   const originalElement = element
@@ -211,2 +214,37 @@ const originalElementType = originalElement.elementType
   }
+
+  // Unlike all other frameworks, nextjs doesn't pass attributes on the custom link component.
+  // For eg: If we have additational props on top of Link in react-router-dom. They are passed to the child.
+  // So, we need to manually find the attributes that are not supported by next and pass to the actual anchor tag.
+  // https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/link.tsx#L29-L54
+  if (isNextMappings && originalElement.elementType === 'Link' && originalElement.attrs) {
+    const unSupportedattributesForNextLink = Object.fromEntries(
+      Object.entries(originalElement.attrs).filter(
+        ([key]) =>
+          [
+            'href',
+            'as',
+            'replace',
+            'scroll',
+            'shallow',
+            'passHref',
+            'prefetch',
+            'locale',
+            'legacyBehavior',
+            'onMouseEnter',
+            'onTouchStart',
+            'onClick',
+          ].includes(key) === false
+      )
+    )
+    if (unSupportedattributesForNextLink && originalElement.children[0].type === 'element') {
+      originalElement.children[0].content.attrs = {
+        ...originalElement.children[0].content.attrs,
+        ...unSupportedattributesForNextLink,
+      }
+      Object.keys(unSupportedattributesForNextLink).forEach(
+        (key) => delete originalElement.attrs[key]
+      )
+    }
+  }
 }
@@ -213,0 +251,0 @@

No alert changes

Improved metrics

Total package byte prevSize

362645

increased by1.92%

Lines of code

5268

increased by1.84%

No dependency changes