Repository: teleporthq/teleport-code-generators
Pull request #753 (2023-03-28 13:02:49)

fix/default-props-containing-assets-fix
fixing default props path if default props is an asset


Patch:
diff --git a/packages/teleport-shared/src/utils/uidl-utils.ts b/packages/teleport-shared/src/utils/uidl-utils.ts
index a074225e..218a887c 100644
--- a/packages/teleport-shared/src/utils/uidl-utils.ts
+++ b/packages/teleport-shared/src/utils/uidl-utils.ts
@@ -142,15 +142,9 @@ export const prefixAssetsPath = (
   */
 
   if (!mappings[assetName]) {
-    if (!identifier) {
-      return [prefix, assetName].join('/')
-    }
     return [prefix, identifier, assetName].join('/')
   }
 
-  if (!identifier) {
-    return [prefix, mappings[assetName], assetName].join('/')
-  }
   return [prefix, identifier, mappings[assetName], assetName].join('/')
 }
 
diff --git a/packages/teleport-uidl-resolver/src/resolver.ts b/packages/teleport-uidl-resolver/src/resolver.ts
index aea11a29..6c54ff26 100644
--- a/packages/teleport-uidl-resolver/src/resolver.ts
+++ b/packages/teleport-uidl-resolver/src/resolver.ts
@@ -45,6 +45,10 @@ export default class Resolver {
 
     utils.checkForIllegalNames(uidl, mapping)
 
+    utils.checkForDefaultPropsContainingAssets(uidl, options.assets)
+
+    utils.checkForDefaultStateValueContainingAssets(uidl, options.assets)
+
     resolveAbilities(uidl, newOptions)
 
     resolveReferencedStyle(uidl, newOptions)
diff --git a/packages/teleport-uidl-resolver/src/utils.ts b/packages/teleport-uidl-resolver/src/utils.ts
index 7e87e2f8..4e7c4e82 100644
--- a/packages/teleport-uidl-resolver/src/utils.ts
+++ b/packages/teleport-uidl-resolver/src/utils.ts
@@ -1,4 +1,5 @@
 import { UIDLUtils, StringUtils } from '@teleporthq/teleport-shared'
+import { prefixAssetsPath } from '@teleporthq/teleport-shared/dist/cjs/utils/uidl-utils'
 import {
   UIDLEventDefinitions,
   UIDLElement,
@@ -492,3 +493,31 @@ export const checkForIllegalNames = (uidl: ComponentUIDL, mapping: Mapping) => {
     })
   }
 }
+
+export const checkForDefaultPropsContainingAssets = (
+  uidl: ComponentUIDL,
+  assets: GeneratorOptions['assets']
+) => {
+  if (uidl.propDefinitions) {
+    Object.keys(uidl.propDefinitions).forEach((prop) => {
+      const propDefaultValue = uidl.propDefinitions[prop].defaultValue
+      if (typeof propDefaultValue === 'string' && assets) {
+        uidl.propDefinitions[prop].defaultValue = prefixAssetsPath(propDefaultValue, assets)
+      }
+    })
+  }
+}
+
+export const checkForDefaultStateValueContainingAssets = (
+  uidl: ComponentUIDL,
+  assets: GeneratorOptions['assets']
+) => {
+  if (uidl.stateDefinitions) {
+    Object.keys(uidl.stateDefinitions).forEach((state) => {
+      const stateDefaultValue = uidl.stateDefinitions[state].defaultValue
+      if (typeof stateDefaultValue === 'string' && assets) {
+        uidl.stateDefinitions[state].defaultValue = prefixAssetsPath(stateDefaultValue, assets)
+      }
+    })
+  }
+}


Test patch:
diff --git a/packages/teleport-shared/__tests__/utils/uidl-utils.ts b/packages/teleport-shared/__tests__/utils/uidl-utils.ts
index 3f8c4033..03fbc84c 100644
--- a/packages/teleport-shared/__tests__/utils/uidl-utils.ts
+++ b/packages/teleport-shared/__tests__/utils/uidl-utils.ts
@@ -474,23 +474,6 @@ describe('prefixAssetsPath', () => {
       })
     ).toBe('/no/identifier/custom/kitten.png')
   })
-
-  it('returns the original string appended with custom path for the asset without identifier', () => {
-    expect(
-      prefixAssetsPath('/kitten.png', {
-        prefix: '/noidentifier',
-        mappings: { 'kitten.png': 'custom' },
-      })
-    ).toBe('/noidentifier/custom/kitten.png')
-  })
-
-  it('returns the original string appended with prefix without identifier', () => {
-    expect(
-      prefixAssetsPath('/kitten.png', {
-        prefix: '/noidentifier',
-      })
-    ).toBe('/noidentifier/kitten.png')
-  })
 })
 
 const nodeToTraverse = elementNode(
diff --git a/packages/teleport-uidl-resolver/__tests__/utils.ts b/packages/teleport-uidl-resolver/__tests__/utils.ts
index 25143b4f..8da9e3fa 100644
--- a/packages/teleport-uidl-resolver/__tests__/utils.ts
+++ b/packages/teleport-uidl-resolver/__tests__/utils.ts
@@ -13,6 +13,8 @@ import {
   ensureDataSourceUniqueness,
   mergeMappings,
   checkForIllegalNames,
+  checkForDefaultPropsContainingAssets,
+  checkForDefaultStateValueContainingAssets,
 } from '../src/utils'
 import { UIDLElement, UIDLNode, UIDLRepeatNode, Mapping } from '@teleporthq/teleport-types'
 import mapping from './mapping.json'
@@ -175,7 +177,7 @@ describe('resolveChildren', () => {
 
     const result = resolveChildren(mappedChildren, originalChildren)
     expect(result.length).toBe(1)
-    const innerChildren = ((result[0].content as unknown) as UIDLElement).children
+    const innerChildren = (result[0].content as unknown as UIDLElement).children
     expect(innerChildren.length).toBe(1)
     expect(innerChildren[0].content).toBe('original-text')
   })
@@ -195,7 +197,7 @@ describe('resolveChildren', () => {
 
     const result = resolveChildren(mappedChildren, originalChildren)
     expect(result.length).toBe(1)
-    const innerChildren = ((result[0].content as unknown) as UIDLElement).children
+    const innerChildren = (result[0].content as unknown as UIDLElement).children
     expect(innerChildren.length).toBe(3)
     expect(innerChildren[0].content).toBe('original-text')
     expect(innerChildren[1].content).toBe('other-original-text')
@@ -218,7 +220,7 @@ describe('resolveChildren', () => {
 
     const result = resolveChildren(mappedChildren, originalChildren)
     expect(result.length).toBe(1)
-    const innerChildren = ((result[0].content as unknown) as UIDLElement).children
+    const innerChildren = (result[0].content as unknown as UIDLElement).children
     expect(innerChildren.length).toBe(5)
     expect(innerChildren[0].content).toBe('original-text')
     expect(innerChildren[1].content).toBe('other-original-text')
@@ -356,3 +358,68 @@ describe('checkForIllegalNames', () => {
     expect(() => checkForIllegalNames(comp, mapping)).toThrowError()
   })
 })
+
+describe('checkForDefaultPropsContainingAssets', () => {
+  const comp = component('Component', elementNode('image'), {
+    myImage: {
+      type: 'string',
+      defaultValue: '/kittens.png',
+    },
+  })
+
+  const assets = {
+    prefix: 'public',
+    identifier: 'assets',
+    mappings: { 'kittens.png': 'sub1/sub2' },
+  }
+
+  it('find and fix defaultProp containing an asset', () => {
+    checkForDefaultPropsContainingAssets(comp, assets)
+    expect(comp.propDefinitions).toBeDefined()
+    if (comp.propDefinitions) {
+      expect(comp.propDefinitions.myImage).toBeDefined()
+      expect(comp.propDefinitions.myImage.defaultValue).toContain(
+        'public/assets/sub1/sub2/kittens.png'
+      )
+    }
+  })
+})
+
+describe('checkForDefaultStateValueContainingAssets', () => {
+  const comp = component(
+    'Component',
+    elementNode('image'),
+    {
+      myImage: {
+        type: 'string',
+        defaultValue: '/kittens.png',
+      },
+    },
+    {
+      imageState: {
+        type: 'string',
+        defaultValue: '/dogs.png',
+      },
+    }
+  )
+
+  const assets = {
+    prefix: 'public',
+    identifier: 'assets',
+    mappings: {
+      'kittens.png': 'sub1/sub2',
+      'dogs.png': 'dog/pictures',
+    },
+  }
+
+  it('find and fix defaultProp containing an asset', () => {
+    checkForDefaultStateValueContainingAssets(comp, assets)
+    expect(comp.stateDefinitions).toBeDefined()
+    if (comp.stateDefinitions) {
+      expect(comp.stateDefinitions.imageState).toBeDefined()
+      expect(comp.stateDefinitions.imageState.defaultValue).toContain(
+        'public/assets/dog/pictures/dogs.png'
+      )
+    }
+  })
+})