@teleporthq/teleport-uidl-resolver 0.43.69 → 0.43.71

package/__tests__/abilities/data-source-links.ts

@@ -0,0 +1,71 @@
+import { insertLinks } from '../../src/resolvers/abilities/utils'
+import { elementNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLElementNode, UIDLNavLinkNode } from '@teleporthq/teleport-types'
+
+/**
+ * The editor exports an element bound to a data source as an ELEMENT whose
+ * content is the data provider, rendering the element itself inside it. A
+ * details-page link on that element reads its record off the provider, and was
+ * dropped: walked as a plain element the wrapper looked empty, so the link
+ * inside it was never resolved and the published element did not navigate.
+ */
+
+const detailsLink: UIDLNavLinkNode = {
+  type: 'navlink',
+  content: {
+    // tslint:disable-next-line:no-invalid-template-strings
+    routeName: { type: 'expr', content: '`/page/${Templates_data_data?.items?.[3]?.slug}`' },
+  },
+}
+
+const providerWrapping = (child: UIDLElementNode, type: string): UIDLElementNode =>
+  ({
+    type: 'element',
+    content: {
+      type,
+      content: {
+        elementType: 'DataProvider',
+        renderPropIdentifier: 'Templates_data_data',
+        resourceDefinition: {
+          type: 'external-data-source',
+          dataSourceId: 'ds-rest',
+          tableName: 'data',
+          dataSourceType: 'rest-api',
+        },
+        nodes: {
+          success: { type: 'element', content: { elementType: 'fragment', children: [child] } },
+        },
+      },
+      children: [],
+    },
+  } as unknown as UIDLElementNode)
+
+const linkedChildOf = (page: UIDLElementNode): UIDLElementNode => {
+  const wrapper = page.content.children[0] as unknown as {
+    content: { content: { nodes: { success: UIDLElementNode } } }
+  }
+  return wrapper.content.content.nodes.success.content.children[0] as UIDLElementNode
+}
+
+describe('insertLinks — an element wrapping a data provider', () => {
+  it.each(['data-source-item', 'data-source-list'])(
+    'resolves the link of the element a %s renders',
+    (type) => {
+      const linked = elementNode('text')
+      linked.content.abilities = { link: detailsLink }
+      const page = elementNode('container', {}, [providerWrapping(linked, type)])
+
+      const resolved = linkedChildOf(insertLinks(page, {}, false))
+
+      expect(resolved.content.elementType).toBe('navlink')
+      expect(resolved.content.attrs.transitionTo).toEqual(detailsLink.content.routeName)
+    }
+  )
+
+  it('leaves an element with no link inside the provider as it was', () => {
+    const plain = elementNode('text')
+    const page = elementNode('container', {}, [providerWrapping(plain, 'data-source-item')])
+
+    expect(linkedChildOf(insertLinks(page, {}, false)).content.elementType).toBe('text')
+  })
+})

package/__tests__/abilities/utils.ts

@@ -42,6 +42,54 @@ describe('insertLink', () => {
     expect(result.content.attrs.url.content).toBe(link.content.url.content)
   })
 
+  // Run 10f154ff (Atelier Luzo homepage rail): the page wrote
+  // `<div class="surface-media"><a><img></a></div>` and the design system sizes
+  // that image through `.surface-media > a > img`. The link came out as
+  // `<a><div><img></div></a>`: the extra <div> broke the child chain, the image
+  // rendered at its natural 2132 px and blew the rail's card up. The canvas,
+  // which does not insert the wrapper, looked right.
+  it('a container that is nothing but the link becomes the anchor itself', () => {
+    const image = elementNode('image', { src: { type: 'static', content: '/a.jpg' } })
+    const bare = elementNode('container', {}, [image])
+    bare.content.abilities = { link: urlMockedDefinition() as UIDLURLLinkNode }
+    bare.content.attrs = {
+      'data-teleport-link-pending': { type: 'static', content: 'Project Details' },
+    }
+    const well = elementNode('container', {}, [bare])
+
+    const result = insertLinks(well, {}, false)
+    const anchor = result.content.children[0] as UIDLElementNode
+
+    expect(anchor.content.elementType).toBe('link')
+    expect(anchor.content.attrs.url).toBeDefined()
+    expect(anchor.content.attrs['data-teleport-link-pending'].content).toBe('Project Details')
+    // The image is the anchor's own child: no element in between.
+    expect((anchor.content.children[0] as UIDLElementNode).content.elementType).toBe('image')
+    expect(anchor.content.style?.display).toBeUndefined()
+  })
+
+  it('still wraps an element that has a box of its own: a style, a class, an event or a runtime attribute', () => {
+    const link = urlMockedDefinition() as UIDLURLLinkNode
+    const styled = elementNode('container')
+    styled.content.style = { padding: { type: 'static', content: '8px' } }
+    const classed = elementNode('container')
+    classed.content.referencedStyles = {
+      card: { type: 'style-map', content: { mapType: 'project-referenced', referenceId: 'card' } },
+    } as never
+    const bound = elementNode('container')
+    bound.content.attrs = { 'data-scroll-bind': { type: 'static', content: '[]' } }
+    const clickable = elementNode('container')
+    clickable.content.events = { click: [] }
+
+    for (const node of [styled, classed, bound, clickable]) {
+      node.content.abilities = { link }
+      const result = insertLinks(elementNode('container', {}, [node]), {}, false)
+      const wrapper = result.content.children[0] as UIDLElementNode
+      expect(wrapper.content.elementType).toBe('link')
+      expect((wrapper.content.children[0] as UIDLElementNode).content.elementType).toBe('container')
+    }
+  })
+
   it('replaces a child', () => {
     const node = elementNode('container', {}, [
       elementNode('container'),
@@ -350,7 +398,7 @@ describe('insertLink', () => {
     })
   })
 
-  it('marks the link wrapper display:contents when the flex parent uses a project-referenced style', () => {
+  it('a classed div that is a flex item becomes the link itself when the parent is flex through a project class', () => {
     const child = elementNode('container')
     child.content.abilities = { link: navlinkMockedDefinition() }
     child.content.referencedStyles = {
@@ -370,13 +418,54 @@ describe('insertLink', () => {
     }
 
     const result = insertLinks(parent, flexProjectStyleSetOptions('flex'), false)
+    const tile = result.content.children[0] as UIDLElementNode
+
+    // no element in between: the tile is the navlink, with its class and no display of the link's making
+    expect(tile.content.elementType).toBe('navlink')
+    expect(tile.content.attrs.transitionTo).toBeDefined()
+    expect(tile.content.referencedStyles?.TQ_tile).toBeDefined()
+    expect(tile.content.style?.display).toBeUndefined()
+    expect(tile.content.children ?? []).toHaveLength(0)
+  })
+
+  it('keeps scroll-runtime attributes on the styled element, never on the box-less link wrapper', () => {
+    // A heading keeps its tag, so it is the case that still gets a wrapper.
+    const child = elementNode('text')
+    child.content.semanticType = 'h3'
+    child.content.abilities = { link: urlMockedDefinition() }
+    child.content.attrs = {
+      'data-scroll-bind': {
+        type: 'static',
+        content: '[{"prop":"opacity","at":[0,1],"values":[0,1]}]',
+      },
+      'data-scroll-bind-rel': { type: 'static', content: '[]' },
+      'data-snap-into-view': { type: 'static', content: 'gentle' },
+      'data-chapter-window': { type: 'static', content: '0.5-1' },
+      'data-analytics': { type: 'static', content: 'cta' },
+    }
+    const parent = elementNode('container', {}, [child])
+    parent.content.style = { display: { type: 'static', content: 'flex' } }
+
+    const result = insertLinks(parent, {}, false)
     const wrapper = result.content.children[0] as UIDLElementNode
+    const styledChild = wrapper.content.children[0] as UIDLElementNode
 
-    expect(wrapper.content.elementType).toBe('navlink')
     expect(wrapper.content.style?.display).toEqual({ type: 'static', content: 'contents' })
-    // the original styled node stays inside the wrapper, keeping its class
-    const styledChild = wrapper.content.children[0] as UIDLElementNode
-    expect(styledChild.content.referencedStyles?.TQ_tile).toBeDefined()
+    expect(Object.keys(wrapper.content.attrs)).not.toEqual(
+      expect.arrayContaining([
+        'data-scroll-bind',
+        'data-scroll-bind-rel',
+        'data-snap-into-view',
+        'data-chapter-window',
+      ])
+    )
+    expect(styledChild.content.attrs['data-scroll-bind'].content).toContain('opacity')
+    expect(styledChild.content.attrs['data-scroll-bind-rel']).toBeDefined()
+    expect(styledChild.content.attrs['data-snap-into-view'].content).toBe('gentle')
+    expect(styledChild.content.attrs['data-chapter-window'].content).toBe('0.5-1')
+    // ordinary data attributes still travel to the anchor
+    expect(wrapper.content.attrs['data-analytics'].content).toBe('cta')
+    expect(styledChild.content.attrs['data-analytics']).toBeUndefined()
   })
 
   it('does not mark the link wrapper display:contents when the referenced parent is not flex/grid', () => {
@@ -408,6 +497,8 @@ describe('insertLink', () => {
        stopped matching the editor, which renders no wrapper at all. */
     const card = elementNode('container')
     card.content.abilities = { link: navlinkMockedDefinition() }
+    // A card has a box of its own; a bare container would become the anchor itself.
+    card.content.style = { flex: { type: 'static', content: '0 0 320px' } }
 
     const fragment = elementNode('fragment', {}, [card])
     const grid = elementNode('container', {}, [fragment])
@@ -421,8 +512,23 @@ describe('insertLink', () => {
 
     const result = insertLinks(grid, flexProjectStyleSetOptions('flex'), false)
     const resolvedFragment = result.content.children[0] as UIDLElementNode
-    const wrapper = resolvedFragment.content.children[0] as UIDLElementNode
-
+    const linkedCard = resolvedFragment.content.children[0] as UIDLElementNode
+
+    // The grid was seen through the fragment: the card is its item, so the card
+    // itself is the navlink and its sizing never leaves it.
+    expect(linkedCard.content.elementType).toBe('navlink')
+    expect(linkedCard.content.style?.flex).toEqual({ type: 'static', content: '0 0 320px' })
+    expect(linkedCard.content.style?.display).toBeUndefined()
+
+    // An element that keeps its tag is wrapped, and that wrapper draws no box.
+    const heading = elementNode('text')
+    heading.content.semanticType = 'h3'
+    heading.content.abilities = { link: navlinkMockedDefinition() }
+    const headingGrid = elementNode('container', {}, [elementNode('fragment', {}, [heading])])
+    headingGrid.content.referencedStyles = grid.content.referencedStyles
+    const wrapped = insertLinks(headingGrid, flexProjectStyleSetOptions('flex'), false)
+    const wrapper = (wrapped.content.children[0] as UIDLElementNode).content
+      .children[0] as UIDLElementNode
     expect(wrapper.content.elementType).toBe('navlink')
     expect(wrapper.content.style?.display).toEqual({ type: 'static', content: 'contents' })
   })
@@ -451,6 +557,236 @@ describe('insertLink', () => {
   })
 })
 
+/* The link rules generated sites already depend on. Each of them was a fix for a
+   broken page at some point (flex items collapsing behind the wrapper in 2020,
+   a linked root node in 2024, ids and data attributes lost in 2025), so a change
+   to how links are emitted has to keep every one of them. */
+describe('link rules that generated sites depend on', () => {
+  const linked = (node: UIDLElementNode): UIDLElementNode => {
+    node.content.abilities = { link: urlMockedDefinition() as UIDLURLLinkNode }
+    return node
+  }
+  const styledCard = (): UIDLElementNode => {
+    const card = elementNode('container')
+    card.content.style = { padding: { type: 'static', content: '24px' } }
+    return linked(card)
+  }
+  const withDisplay = (display: string, child: UIDLElementNode): UIDLElementNode => {
+    const parent = elementNode('container', {}, [child])
+    parent.content.style = { display: { type: 'static', content: display } }
+    return parent
+  }
+
+  const linkedHeading = (): UIDLElementNode => {
+    const heading = elementNode('text')
+    heading.content.semanticType = 'h3'
+    heading.content.style = { margin: { type: 'static', content: '0' } }
+    return linked(heading)
+  }
+
+  it.each(['flex', 'inline-flex', 'grid', 'inline-grid'])(
+    'a plain div that is an item of a %s parent becomes the link itself: a box-less wrapper cannot take keyboard focus',
+    (display) => {
+      const result = insertLinks(withDisplay(display, styledCard()), {}, false)
+      const card = result.content.children[0] as UIDLElementNode
+
+      expect(card.content.elementType).toBe('link')
+      expect(card.content.attrs.url).toBeDefined()
+      expect(card.content.style?.padding).toEqual({ type: 'static', content: '24px' })
+      // nothing of the link's making on it: no display, no wrapper marker, no element in between
+      expect(card.content.style?.display).toBeUndefined()
+      expect(card.content.attrs['data-thq-link-wrapper']).toBeUndefined()
+      expect(card.content.children ?? []).toHaveLength(0)
+    }
+  )
+
+  it.each(['flex', 'inline-flex', 'grid', 'inline-grid'])(
+    'an element that keeps its tag is wrapped inside a %s parent, and that wrapper draws no box so the element stays the item',
+    (display) => {
+      const result = insertLinks(withDisplay(display, linkedHeading()), {}, false)
+      const wrapper = result.content.children[0] as UIDLElementNode
+
+      expect(wrapper.content.elementType).toBe('link')
+      expect(wrapper.content.style?.display).toEqual({ type: 'static', content: 'contents' })
+      // it says so, which is how the reset stylesheet finds it to paint a focus ring on its child
+      expect(wrapper.content.attrs['data-thq-link-wrapper']).toEqual({
+        type: 'static',
+        content: 'true',
+      })
+      const heading = wrapper.content.children[0] as UIDLElementNode
+      expect(heading.content.semanticType).toBe('h3')
+      expect(heading.content.style?.margin).toEqual({ type: 'static', content: '0' })
+    }
+  )
+
+  it('a div that becomes the link keeps its id, its data attributes and its scene lanes on itself', () => {
+    const card = styledCard()
+    card.content.attrs = {
+      id: { type: 'static', content: 'featured-card' },
+      'data-analytics': { type: 'static', content: 'card' },
+      'data-scroll-bind': { type: 'static', content: 'rise-in' },
+    }
+
+    const anchor = insertLinks(withDisplay('grid', card), {}, false).content
+      .children[0] as UIDLElementNode
+
+    expect(anchor.content.elementType).toBe('link')
+    for (const kept of ['id', 'data-analytics', 'data-scroll-bind', 'url']) {
+      expect(anchor.content.attrs[kept]).toBeDefined()
+    }
+  })
+
+  it('a div stays wrapped when it listens to events, carries an attribute an anchor may not, or its parent is not known', () => {
+    const clickable = styledCard()
+    clickable.content.events = { click: [] }
+    const named = styledCard()
+    named.content.attrs = { name: { type: 'static', content: 'card' } }
+
+    for (const node of [clickable, named]) {
+      const wrapper = insertLinks(withDisplay('flex', node), {}, false).content
+        .children[0] as UIDLElementNode
+      expect(wrapper.content.elementType).toBe('link')
+      expect((wrapper.content.children[0] as UIDLElementNode).content.elementType).toBe('container')
+    }
+    const rootWrapper = insertLinks(styledCard(), {}, false)
+    expect((rootWrapper.content.children[0] as UIDLElementNode).content.elementType).toBe(
+      'container'
+    )
+  })
+
+  it('the wrapper keeps its own box inside a block parent', () => {
+    const result = insertLinks(withDisplay('block', styledCard()), {}, false)
+    const wrapper = result.content.children[0] as UIDLElementNode
+
+    expect(wrapper.content.elementType).toBe('link')
+    expect(wrapper.content.style?.display).toBeUndefined()
+    // a wrapper with a box draws its own focus ring and is not marked
+    expect(wrapper.content.attrs['data-thq-link-wrapper']).toBeUndefined()
+  })
+
+  it('a linked root node is wrapped without a box: its parent is unknown here', () => {
+    const wrapper = insertLinks(styledCard(), {}, false)
+
+    expect(wrapper.content.elementType).toBe('link')
+    expect(wrapper.content.style?.display).toEqual({ type: 'static', content: 'contents' })
+  })
+
+  it('moves the attributes an anchor may carry onto the wrapper and leaves the rest on the element', () => {
+    const card = styledCard()
+    card.content.attrs = {
+      id: { type: 'static', content: 'featured-card' },
+      class: { type: 'static', content: 'promo' },
+      title: { type: 'static', content: 'Featured' },
+      'data-analytics': { type: 'static', content: 'card' },
+      'aria-current': { type: 'static', content: 'page' },
+      role: { type: 'static', content: 'group' },
+      name: { type: 'static', content: 'card' },
+    }
+
+    const wrapper = insertLinks(withDisplay('block', card), {}, false).content
+      .children[0] as UIDLElementNode
+    const element = wrapper.content.children[0] as UIDLElementNode
+
+    for (const moved of ['id', 'class', 'title', 'data-analytics', 'aria-current']) {
+      expect(wrapper.content.attrs[moved]).toBeDefined()
+      expect(element.content.attrs[moved]).toBeUndefined()
+    }
+    for (const kept of ['role', 'name']) {
+      expect(wrapper.content.attrs[kept]).toBeUndefined()
+      expect(element.content.attrs[kept]).toBeDefined()
+    }
+  })
+
+  it('never turns an element with a meaning of its own into the anchor: it is wrapped and keeps its tag', () => {
+    const heading = elementNode('text')
+    heading.content.semanticType = 'h2'
+    const paragraph = elementNode('text')
+    paragraph.content.semanticType = 'p'
+    const image = elementNode('image', { src: { type: 'static', content: '/a.jpg' } })
+    const listItem = elementNode('container')
+    listItem.content.semanticType = 'li'
+    const section = elementNode('container')
+    section.content.semanticType = 'section'
+
+    for (const node of [heading, paragraph, image, listItem, section]) {
+      const { elementType, semanticType } = node.content
+      const wrapper = insertLinks(withDisplay('block', linked(node)), {}, false).content
+        .children[0] as UIDLElementNode
+      const element = wrapper.content.children[0] as UIDLElementNode
+
+      expect(wrapper.content.elementType).toBe('link')
+      expect(element.content.elementType).toBe(elementType)
+      expect(element.content.semanticType).toBe(semanticType)
+    }
+  })
+
+  it('a button and a span become the anchor themselves and keep their own styles', () => {
+    const button = elementNode('button')
+    button.content.style = { padding: { type: 'static', content: '12px' } }
+    button.content.attrs = { type: { type: 'static', content: 'button' } }
+    const span = elementNode('text')
+    span.content.semanticType = 'span'
+    span.content.style = { color: { type: 'static', content: 'red' } }
+
+    const asAnchor = insertLinks(linked(button), {}, false)
+    expect(asAnchor.content.elementType).toBe('link')
+    expect(asAnchor.content.children ?? []).toHaveLength(0)
+    expect(asAnchor.content.style?.padding).toEqual({ type: 'static', content: '12px' })
+    expect(asAnchor.content.style?.textAlign).toEqual({ type: 'static', content: 'center' })
+    expect(asAnchor.content.attrs.type).toBeUndefined()
+    expect(asAnchor.content.attrs.url).toBeDefined()
+
+    const textAnchor = insertLinks(linked(span), {}, false)
+    expect(textAnchor.content.elementType).toBe('link')
+    expect(textAnchor.content.style?.color).toEqual({ type: 'static', content: 'red' })
+    expect(textAnchor.content.style?.display).toBeUndefined()
+  })
+
+  it('keeps what a motion runtime reads on the element that draws the box, never on the wrapper', () => {
+    const card = linkedHeading()
+    card.content.attrs = {
+      'data-scene-backdrop': { type: 'static', content: 'true' },
+      'data-scene-track': { type: 'static', content: 'true' },
+      'data-motion-preset': { type: 'static', content: 'slide-up' },
+      'data-tq-motion': { type: 'static', content: 'true' },
+      'data-scroll-video': { type: 'static', content: 'true' },
+      'data-analytics': { type: 'static', content: 'card' },
+    }
+
+    const wrapper = insertLinks(withDisplay('flex', card), {}, false).content
+      .children[0] as UIDLElementNode
+    const element = wrapper.content.children[0] as UIDLElementNode
+
+    for (const kept of [
+      'data-scene-backdrop',
+      'data-scene-track',
+      'data-motion-preset',
+      'data-tq-motion',
+      'data-scroll-video',
+    ]) {
+      expect(element.content.attrs[kept]).toBeDefined()
+      expect(wrapper.content.attrs[kept]).toBeUndefined()
+    }
+    expect(wrapper.content.attrs['data-analytics']).toBeDefined()
+  })
+
+  it('leaves a link that sits inside another link alone: anchors cannot nest', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined)
+    const inner = styledCard()
+    const outer = linked(elementNode('container', {}, [inner]))
+    outer.content.style = { padding: { type: 'static', content: '8px' } }
+
+    const wrapper = insertLinks(outer, {}, false)
+    const outerElement = wrapper.content.children[0] as UIDLElementNode
+    const innerElement = outerElement.content.children[0] as UIDLElementNode
+
+    expect(wrapper.content.elementType).toBe('link')
+    expect(innerElement.content.elementType).toBe('container')
+    expect(warn).toHaveBeenCalled()
+    warn.mockRestore()
+  })
+})
+
 describe('insertLink with link-type prop', () => {
   it('wraps a container element with a link when link ability references a link-type prop', () => {
     const node = elementNode('container')

package/__tests__/resolver.ts

@@ -34,6 +34,21 @@ describe('resolveElement', () => {
     expect(resolvedElement.attrs.dummy.content).toBe('remains here')
   })
 
+  it('drops editor-only chapter bookkeeping but keeps the runtime lanes', () => {
+    const chapter = element('container', {
+      'data-scroll-bind': staticNode('[{"prop":"opacity","at":[0,1],"values":[0,1]}]'),
+      'data-scroll-bind-rel': staticNode('[{"prop":"opacity","at":[0,1],"values":[0,1]}]'),
+      'data-chapter-window': staticNode('0-0.5'),
+      'data-chapter-template': staticNode('finale'),
+      'data-snap-into-view': staticNode('gentle'),
+    })
+    const resolver = new Resolver()
+    resolver.addMapping(mapping)
+    const resolved = resolver.resolveElement(chapter)
+
+    expect(Object.keys(resolved.attrs)).toEqual(['data-scroll-bind', 'data-snap-into-view'])
+  })
+
   it('maps a seflClosing tag', () => {
     const resolver = new Resolver()
     const imageElement = element('image', {

package/__tests__/utils.ts

@@ -10,6 +10,7 @@ import {
 import {
   generateUniqueKeys,
   createNodesLookup,
+  reserveProjectStyleNames,
   resolveChildren,
   ensureDataSourceUniqueness,
   mergeMappings,
@@ -29,6 +30,55 @@ import {
 } from '@teleporthq/teleport-types'
 import mapping from './mapping.json'
 
+// A page named "Manifesto" names its root element `manifesto-container`. The
+// project style sheet is global, and another page had authored a
+// `.manifesto-container` two-column grid: the whole Manifesto page became that
+// grid in the generated site (navigation in one column, hero squeezed into the
+// other), while the editor canvas, which does not use generated names, was fine.
+describe('reserveProjectStyleNames', () => {
+  const styleSet = {
+    'manifesto-container': { type: 'reusable-project-style-map', content: {} },
+    heroTitle: { type: 'reusable-project-style-map', className: 'hero-title', content: {} },
+  } as never
+
+  it('keeps a generated element class off a class of the project style sheet', () => {
+    const root = elementNode('container', {}, [elementNode('text')])
+    const uidl = component('Manifesto', root)
+    const lookup = {}
+
+    reserveProjectStyleNames(styleSet, lookup)
+    createNodesLookup(uidl, lookup)
+    generateUniqueKeys(uidl, lookup)
+
+    expect(root.content.key).toBe('manifesto-container1')
+    expect((root.content.children?.[0].content as UIDLElement).key).toBe('manifesto-text')
+  })
+
+  it('reserves the class a style is emitted under, not only its id', () => {
+    const title = elementNode('title')
+    const uidl = component('Hero', title)
+    const lookup = {}
+
+    reserveProjectStyleNames(styleSet, lookup)
+    createNodesLookup(uidl, lookup)
+    generateUniqueKeys(uidl, lookup)
+
+    expect(title.content.key).toBe('hero-title1')
+  })
+
+  it('changes nothing without a project style sheet', () => {
+    const root = elementNode('container')
+    const uidl = component('Manifesto', root)
+    const lookup = {}
+
+    reserveProjectStyleNames(undefined, lookup)
+    createNodesLookup(uidl, lookup)
+    generateUniqueKeys(uidl, lookup)
+
+    expect(root.content.key).toBe('manifesto-container')
+  })
+})
+
 describe('generateUniqueKeys', () => {
   it('adds name and key to node', async () => {
     const simpleNode = elementNode('container')

package/dist/cjs/resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolver.d.ts","sourceRoot":"","sources":["../../src/resolver.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,WAAW,EACX,OAAO,EACP,gBAAgB,EAEjB,MAAM,4BAA4B,CAAA;AAQnC;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,OAAO,CAAC,OAAO,CAMd;gBAEW,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE;IAQlC,UAAU,CAAC,OAAO,EAAE,OAAO;IAI3B,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,gBAA6C;IAkDxF,cAAc,CACnB,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,gBAA6C;CAYzD"}
+{"version":3,"file":"resolver.d.ts","sourceRoot":"","sources":["../../src/resolver.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,WAAW,EACX,OAAO,EACP,gBAAgB,EAEjB,MAAM,4BAA4B,CAAA;AAQnC;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,OAAO,CAAC,OAAO,CAMd;gBAEW,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE;IAQlC,UAAU,CAAC,OAAO,EAAE,OAAO;IAI3B,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,gBAA6C;IAmDxF,cAAc,CACnB,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,gBAA6C;CAYzD"}

package/dist/cjs/resolver.js

@@ -67,6 +67,7 @@ var Resolver = /** @class */ (function () {
         this.mapping = utils.mergeMappings(this.mapping, mapping);
     };
     Resolver.prototype.resolveUIDL = function (input, options) {
+        var _a;
         if (options === void 0) { options = { extractedResources: {} }; }
         var mapping = utils.mergeMappings(this.mapping, options.mapping);
         var newOptions = __assign(__assign({}, options), { mapping: mapping });
@@ -95,6 +96,7 @@ var Resolver = /** @class */ (function () {
         // never generated). Left untouched they compile to `ReferenceError`s that
         // fail the static export / `next build`.
         (0, unbound_expressions_1.resolveUnboundExpressions)(uidl);
+        utils.reserveProjectStyleNames((_a = newOptions.projectStyleSet) === null || _a === void 0 ? void 0 : _a.styleSetDefinitions, lookup);
         utils.createNodesLookup(uidl, lookup);
         utils.generateUniqueKeys(uidl, lookup);
         utils.ensureDataSourceUniqueness(uidl.node);

package/dist/cjs/resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolver.js","sourceRoot":"","sources":["../../src/resolver.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"resolver.js","sourceRoot":"","sources":["../../src/resolver.ts"],"names":[],"mappings":"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"}

package/dist/cjs/resolvers/abilities/utils.d.ts

@@ -1,4 +1,6 @@
 import { GeneratorOptions, UIDLLinkNode, UIDLElementNode, UIDLPropDefinition } from '@teleporthq/teleport-types';
+export declare const isRuntimeDataAttribute: (attrName: string) => boolean;
+export declare const BOXLESS_LINK_WRAPPER_ATTR = "data-thq-link-wrapper";
 export declare const insertLinks: (node: UIDLElementNode, options: GeneratorOptions, linkInParent?: boolean, parentNode?: UIDLElementNode, propDefinitions?: Record<string, UIDLPropDefinition>) => UIDLElementNode;
 export declare const createLinkNode: (link: UIDLLinkNode, options: GeneratorOptions) => UIDLElementNode;
 //# sourceMappingURL=utils.d.ts.map

package/dist/cjs/resolvers/abilities/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/resolvers/abilities/utils.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAChB,YAAY,EAEZ,eAAe,EAEf,kBAAkB,EAEnB,MAAM,4BAA4B,CAAA;AAwDnC,eAAO,MAAM,WAAW,SAChB,eAAe,WACZ,gBAAgB,iBACX,OAAO,eACR,eAAe,oBACV,OAAO,MAAM,EAAE,kBAAkB,CAAC,KACnD,eAoUF,CAAA;AA6FD,eAAO,MAAM,cAAc,SAAU,YAAY,WAAW,gBAAgB,KAAG,eAS9E,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/resolvers/abilities/utils.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAChB,YAAY,EAEZ,eAAe,EAEf,kBAAkB,EAInB,MAAM,4BAA4B,CAAA;AAkDnC,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,OACqB,CAAA;AAqE/E,eAAO,MAAM,yBAAyB,0BAA0B,CAAA;AAsChE,eAAO,MAAM,WAAW,SAChB,eAAe,WACZ,gBAAgB,iBACX,OAAO,eACR,eAAe,oBACV,OAAO,MAAM,EAAE,kBAAkB,CAAC,KACnD,eA+VF,CAAA;AA0FD,eAAO,MAAM,cAAc,SAAU,YAAY,WAAW,gBAAgB,KAAG,eAS9E,CAAA"}