(feat): Support for nested asset-paths (#750)

* (feat): allow assets being referenced in nested paths

* Fix tests for asset handling

* fixed file injection path + added customizable asset folder path setting

* Fix for asset handling and file injection

---------

Co-authored-by: William Gounot <[email protected]>

Author: JayaKrishnaNamburu

examples/uidl-samples/project.json

@@ -111,7 +111,14 @@ const projectPublisherFactories: Omit<Record<PublisherType, Function>, Publisher
 
 export const packProject: PackProjectFunction = async (
   projectUIDL,
-  { projectType, publisher: publisherType, publishOptions = {}, assets = [], plugins = [] }
+  {
+    projectType,
+    publisher: publisherType,
+    publishOptions = {},
+    assets = [],
+    plugins = [],
+    assetsFolder = [Constants.ASSETS_IDENTIFIER],
+  }
 ) => {
   const packer = createProjectPacker()
   let publisher
@@ -159,7 +166,7 @@ export const packProject: PackProjectFunction = async (
 
   packer.setAssets({
     assets,
-    path: [Constants.ASSETS_IDENTIFIER],
+    path: assetsFolder,
   })
 
   packer.setGenerator(projectGeneratorFactory)

packages/teleport-code-generator/src/index.ts

@@ -7,6 +7,7 @@ import {
   HTMLComponentGenerator,
   ComponentUIDL,
   GeneratorFactoryParams,
+  GeneratorOptions,
 } from '@teleporthq/teleport-types'
 import { createComponentGenerator } from '@teleporthq/teleport-component-generator'
 import { StringUtils } from '@teleporthq/teleport-shared'
@@ -26,15 +27,19 @@ const createHTMLComponentGenerator: HTMLComponentGeneratorInstance = ({
   mappings.forEach((mapping) => resolver.addMapping(mapping))
 
   Object.defineProperty(generator, 'addExternalComponents', {
-    value: (params: { externals: Record<string, ComponentUIDL>; skipValidation?: boolean }) => {
-      const { externals = {}, skipValidation = false } = params
+    value: (params: {
+      externals: Record<string, ComponentUIDL>
+      skipValidation?: boolean
+      assets?: GeneratorOptions['assets']
+    }) => {
+      const { externals = {}, skipValidation = false, assets = {} } = params
       addExternals(
         Object.keys(externals).reduce((acc: Record<string, ComponentUIDL>, ext) => {
           const componentUIDL = skipValidation
             ? externals[ext]
             : Parser.parseComponentJSON(externals[ext] as unknown as Record<string, unknown>)
           const resolvedUIDL = resolver.resolveUIDL(componentUIDL, {
-            assetsPrefix: 'public',
+            assets,
           })
           acc[StringUtils.dashCaseToUpperCamelCase(ext)] = resolvedUIDL
           return acc

packages/teleport-component-generator-html/src/index.ts

@@ -191,7 +191,7 @@ export const appendAssetsAST = (
   assets.forEach((asset) => {
     let assetPath
     if ('path' in asset) {
-      assetPath = UIDLUtils.prefixAssetsPath(options.assetsPrefix, asset.path)
+      assetPath = UIDLUtils.prefixAssetsPath(asset.path, options?.assets)
     }
 
     // link canonical for SEO

packages/teleport-plugin-common/src/builders/ast-builders.ts

@@ -6,9 +6,12 @@ import HTMLTemplate from '../../src/project-template'
 import { FileType } from '@teleporthq/teleport-types'
 
 describe('Html Project Generator', () => {
-  const generator = createHTMLProjectGenerator()
-
   it('runs without crasing', async () => {
+    const generator = createHTMLProjectGenerator()
+    generator.setAssets({
+      mappings: {},
+      identifier: 'playground_assets',
+    })
     const { name, files, subFolders } = await generator.generateProject(uidlSample, HTMLTemplate)
     const aboutPage = files.find((page) => page.name === 'about' && page.fileType === FileType.HTML)
     const aboutCSS = files.find((page) => page.name === 'about' && page.fileType === FileType.CSS)
@@ -25,6 +28,10 @@ describe('Html Project Generator', () => {
 
   it('run withut crashing and appends entry things into single index.html', async () => {
     const singularGenerator = createHTMLProjectGenerator({ individualEntyFile: false })
+    singularGenerator.setAssets({
+      mappings: {},
+      identifier: 'playground_assets',
+    })
     const { name, files, subFolders } = await singularGenerator.generateProject(
       uidlSample,
       HTMLTemplate
@@ -42,15 +49,19 @@ describe('Html Project Generator', () => {
   })
 
   it('throws error when invalid UIDL sample is used', async () => {
+    const generator = createHTMLProjectGenerator()
     const result = generator.generateProject(invalidUidlSample, HTMLTemplate)
     await expect(result).rejects.toThrow(Error)
   })
 })
 
 describe('Unwinds the slot inside the component when used in page', () => {
-  const generator = createHTMLProjectGenerator()
-
   it('runs without crashing', async () => {
+    const generator = createHTMLProjectGenerator()
+    generator.setAssets({
+      mappings: {},
+      identifier: 'playground_assets',
+    })
     const result = await generator.generateProject(projectWithSlot, HTMLTemplate)
     const indexFile = result.files.find(
       (file) => file.name === 'index' && file.fileType === FileType.HTML

packages/teleport-project-generator-html/__tests__/end2end/index.ts

@@ -9,6 +9,11 @@ import uidlWithImages from '../../../examples/test-samples/html-image-use-cases.
 describe('Passes the rootClass which using the component', () => {
   it('run without crashing while using with HTML', async () => {
     const generator = createHTMLProjectGenerator()
+    generator.setAssets({
+      mappings: {},
+      identifier: 'playground_assets',
+      prefix: '/public',
+    })
     const result = await generator.generateProject(uidlWithCompStyleOverrides)
 
     const mainFile = result.files.find(
@@ -27,6 +32,11 @@ describe('Passes the rootClass which using the component', () => {
 describe('Image Resolution', () => {
   it('resolves all local assets to be refered from public folder', async () => {
     const generator = createHTMLProjectGenerator()
+    generator.setAssets({
+      mappings: {},
+      identifier: 'playground_assets',
+      prefix: '/public',
+    })
     const { files } = await generator.generateProject(uidlWithImages)
 
     const mainCSS = files.find((file) => file.name === 'home' && file.fileType === FileType.CSS)
@@ -60,7 +70,14 @@ describe('Image Resolution', () => {
 
   it('creates a default route if a page is marked as fallback', async () => {
     const generator = createHTMLProjectGenerator()
+
+    generator.setAssets({
+      mappings: {},
+      identifier: 'playground_assets',
+      prefix: '/public',
+    })
     generator.addPlugin(htmlErrorPageMapping)
+
     const { files } = await generator.generateProject(fallbackUidlSample, ProjectTemplate)
     const fallbackPage = files.find((file) => file.name === '404')
 

packages/teleport-project-generator-html/__tests__/index.ts

@@ -34,14 +34,18 @@ export const createDocumentFileChunks = (uidl: ProjectUIDL, options: EntryFileOp
   if (manifest) {
     const linkTag = ASTBuilders.createJSXTag('link')
     ASTUtils.addAttributeToJSXTag(linkTag, 'rel', 'manifest')
-    ASTUtils.addAttributeToJSXTag(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
+    ASTUtils.addAttributeToJSXTag(
+      linkTag,
+      'href',
+      UIDLUtils.prefixAssetsPath(`/manifest.json`, options.assets)
+    )
     ASTUtils.addChildJSXTag(headNode, linkTag)
   }
 
   meta.forEach((metaItem) => {
     const metaTag = ASTBuilders.createJSXTag('meta')
     Object.keys(metaItem).forEach((key) => {
-      const metaValue = UIDLUtils.prefixAssetsPath(options.assetsPrefix, metaItem[key])
+      const metaValue = UIDLUtils.prefixAssetsPath(metaItem[key], options.assets)
       ASTUtils.addAttributeToJSXTag(metaTag, key, metaValue)
     })
     ASTUtils.addChildJSXTag(headNode, metaTag)

packages/teleport-project-generator-next/src/utils.ts

@@ -1,6 +1,11 @@
 import { handlePackageJSON, createEntryFile, createManifestJSONFile } from '../src/file-handlers'
 import { PackageJSON } from '../src/types'
-import { GeneratedFolder, ProjectUIDL, FileType } from '@teleporthq/teleport-types'
+import {
+  GeneratedFolder,
+  ProjectUIDL,
+  FileType,
+  UIDLRootComponent,
+} from '@teleporthq/teleport-types'
 import { component, elementNode } from '@teleporthq/teleport-uidl-builders'
 import { createStrategyWithCommonGenerator } from './mocks'
 
@@ -9,7 +14,11 @@ import uidlSample from '../../../examples/test-samples/project-sample.json'
 describe('createHtmlIndexFile', () => {
   it('returns index file with prefixed assets and app file', async () => {
     const options = {
-      assetsPrefix: '/static',
+      assets: {
+        prefix: '',
+        mappings: {},
+        identifier: 'playground_assets',
+      },
       appRootOverride: '{{root-placeholder}}',
     }
     const [entryFile] = await createEntryFile(
@@ -25,16 +34,21 @@ describe('createHtmlIndexFile', () => {
 
 describe('createManifestJSONFile', () => {
   it('returns manifest file with prefixed assets', () => {
-    const assetsPrefix = 'playground'
-    const result = createManifestJSONFile(uidlSample as unknown as ProjectUIDL, assetsPrefix)
+    const result = createManifestJSONFile(uidlSample as unknown as ProjectUIDL, {
+      prefix: 'playground',
+      identifier: 'playground_assets',
+      mappings: { 'icons-192.png': '' },
+    })
 
     expect(result.name).toBe('manifest')
     expect(result.fileType).toBe('json')
     expect(result.content).toContain('"src": "playground/playground_assets/')
   })
 
   it('returns manifest file with no prefixed assets', () => {
-    const result = createManifestJSONFile(uidlSample as unknown as ProjectUIDL)
+    const result = createManifestJSONFile(uidlSample as unknown as ProjectUIDL, {
+      identifier: 'playground_assets',
+    })
 
     expect(result.name).toBe('manifest')
     expect(result.fileType).toBe('json')
@@ -46,7 +60,7 @@ describe('handlePackageJSON', () => {
   const uidl: ProjectUIDL = {
     name: 'test-project',
     globals: { settings: { title: 'Random', language: 'en' }, meta: [], assets: [] },
-    root: component('random', elementNode('container')),
+    root: component('random', elementNode('container')) as UIDLRootComponent,
   }
 
   const dependencies = {

packages/teleport-project-generator/__tests__/file-handlers.ts

@@ -47,7 +47,12 @@ describe('Generic Project Generator', () => {
       expect(generator.componentGenerator.generateComponent).toBeCalledWith(
         expect.objectContaining({ name: 'ExpandableArea' }),
         expect.objectContaining({
-          assetsPrefix: '/test/static',
+          assets: {
+            identifier: null,
+            mappings: {},
+            prefix: '/test/static',
+          },
+          designLanguage: undefined,
           mapping: {},
           skipValidation: true,
         })
@@ -105,7 +110,12 @@ describe('Generic Project Generator', () => {
       expect(generator.componentGenerator.generateComponent).toBeCalledWith(
         expect.objectContaining({ name: 'ExpandableArea' }),
         {
-          assetsPrefix: '/static',
+          assets: {
+            identifier: null,
+            mappings: {},
+            prefix: '/static',
+          },
+          designLanguage: undefined,
           projectRouteDefinition: uidl.root.stateDefinitions.route,
           mapping: {},
           skipValidation: true,
@@ -117,7 +127,12 @@ describe('Generic Project Generator', () => {
           name: 'Home',
         }),
         {
-          assetsPrefix: '/static',
+          assets: {
+            identifier: null,
+            mappings: {},
+            prefix: '/static',
+          },
+          designLanguage: undefined,
           projectRouteDefinition: uidl.root.stateDefinitions.route,
           mapping: {},
           skipValidation: true,
@@ -164,7 +179,12 @@ describe('Generic Project Generator', () => {
       expect(generator.componentGenerator.generateComponent).toBeCalledWith(
         expect.objectContaining({ name: 'ExpandableArea' }),
         {
-          assetsPrefix: '/test/static',
+          assets: {
+            identifier: null,
+            mappings: {},
+            prefix: '/test/static',
+          },
+          designLanguage: undefined,
           projectRouteDefinition: uidl.root.stateDefinitions.route,
           mapping: {},
           skipValidation: true,

packages/teleport-project-generator/__tests__/index.ts

@@ -123,7 +123,7 @@ export const createEntryFile = async (
   // If no function is provided in the strategy, the createHTMLEntryFileChunks is used by default
   const chunkGenerationFunction =
     strategy.entry?.chunkGenerationFunction || createHTMLEntryFileChunks
-  const { assetsPrefix } = entryFileOptions
+  const { assets } = entryFileOptions
   const options = { ...strategy.entry?.options, ...entryFileOptions }
 
   const appRootOverride = (options && options.appRootOverride) || null
@@ -132,7 +132,7 @@ export const createEntryFile = async (
   const customHeadContent = (options && options.customHeadContent) || null
   const customTags = (options && options.customTags) || []
   const chunks = chunkGenerationFunction(uidl, {
-    assetsPrefix,
+    assets,
     appRootOverride,
     customHeadContent,
     customTags,
@@ -147,7 +147,7 @@ const createHTMLEntryFileChunks = (
   uidl: ProjectUIDL,
   options: EntryFileOptions
 ): Record<string, ChunkDefinition[]> => {
-  const { assetsPrefix = '', appRootOverride, customHeadContent, customTags } = options
+  const { appRootOverride, customHeadContent, customTags } = options
   const { settings, meta, assets, manifest, customCode } = uidl.globals
 
   const htmlNode = HASTBuilders.createHTMLNode('html')
@@ -207,14 +207,18 @@ const createHTMLEntryFileChunks = (
   if (manifest) {
     const linkTag = HASTBuilders.createHTMLNode('link')
     HASTUtils.addAttributeToNode(linkTag, 'rel', 'manifest')
-    HASTUtils.addAttributeToNode(linkTag, 'href', `${options.assetsPrefix}/manifest.json`)
+    HASTUtils.addAttributeToNode(
+      linkTag,
+      'href',
+      UIDLUtils.prefixAssetsPath('/manifest.json', options.assets)
+    )
     HASTUtils.addChildNode(headNode, linkTag)
   }
 
   meta.forEach((metaItem) => {
     const metaTag = HASTBuilders.createHTMLNode('meta')
     Object.keys(metaItem).forEach((key) => {
-      const prefixedURL = UIDLUtils.prefixAssetsPath(assetsPrefix, metaItem[key])
+      const prefixedURL = UIDLUtils.prefixAssetsPath(metaItem[key], options.assets)
       HASTUtils.addAttributeToNode(metaTag, key, prefixedURL)
     })
     HASTUtils.addChildNode(headNode, metaTag)
@@ -223,7 +227,7 @@ const createHTMLEntryFileChunks = (
   assets.forEach((asset) => {
     let assetPath
     if ('path' in asset) {
-      assetPath = UIDLUtils.prefixAssetsPath(options.assetsPrefix, asset.path)
+      assetPath = UIDLUtils.prefixAssetsPath(asset.path, options.assets)
     }
 
     // link canonical for SEO
@@ -347,7 +351,10 @@ const createHTMLEntryFileChunks = (
 }
 
 // Creates a manifest json file with the UIDL having priority over the default values
-export const createManifestJSONFile = (uidl: ProjectUIDL, assetsPrefix?: string): GeneratedFile => {
+export const createManifestJSONFile = (
+  uidl: ProjectUIDL,
+  assets: GeneratorOptions['assets']
+): GeneratedFile => {
   const manifest = uidl.globals.manifest
   const projectName = uidl.name
   const defaultManifest: WebManifest = {
@@ -358,7 +365,7 @@ export const createManifestJSONFile = (uidl: ProjectUIDL, assetsPrefix?: string)
   }
 
   const icons = manifest.icons.map((icon) => {
-    const src = UIDLUtils.prefixAssetsPath(assetsPrefix || '', icon.src)
+    const src = UIDLUtils.prefixAssetsPath(icon.src, assets)
     return { ...icon, src }
   })