@teleporthq/teleport-project-generator-next 0.43.69 → 0.43.71

package/__tests__/body-code-end2end.test.ts

@@ -0,0 +1,71 @@
+import { GeneratedFolder, ProjectUIDL } from '@teleporthq/teleport-types'
+import uidlSample from '../../../examples/test-samples/project-sample.json'
+import { createNextProjectGenerator } from '../src'
+import NextTemplate from '../src/project-template'
+import {
+  BODY_CODE_TEMPLATE_ATTR,
+  splitBodyCustomCode,
+  wrapBodyCustomCode,
+} from '../src/body-code/body-code-component'
+
+const template = JSON.parse(JSON.stringify(NextTemplate)) as GeneratedFolder
+
+const BODY_CODE = [
+  '<script src="https://unpkg.com/@teleporthq/teleport-custom-scripts"></script>',
+  '<noscript><img src="https://px.example/pixel" alt="" /></noscript>',
+  '<script>window.__patched = true</script>',
+].join('\n')
+
+const buildUidlWithBodyCode = (body: string | undefined): ProjectUIDL => {
+  const uidl = JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL
+  uidl.globals.customCode = body === undefined ? undefined : { body }
+  return uidl
+}
+
+const findFile = (folder: GeneratedFolder, folderName: string, fileName: string) =>
+  folder.subFolders
+    .find((sub) => sub.name === folderName)
+    ?.files.find((file) => file.name === fileName)
+
+describe('body custom code runs after hydration', () => {
+  it('keeps noscript live and makes everything else inert', () => {
+    const { noscript, deferred } = splitBodyCustomCode(BODY_CODE)
+    expect(noscript).toBe('<noscript><img src="https://px.example/pixel" alt="" /></noscript>')
+    expect(deferred).not.toContain('<noscript')
+    expect(deferred).toContain('teleport-custom-scripts')
+    expect(deferred).toContain('window.__patched')
+
+    const html = wrapBodyCustomCode(BODY_CODE)
+    expect(html.indexOf('<noscript')).toBeLessThan(html.indexOf('<template'))
+    expect(html).toContain(`<template ${BODY_CODE_TEMPLATE_ATTR}>`)
+    // a body made only of noscript ships no template at all
+    expect(wrapBodyCustomCode('<noscript>x</noscript>')).toBe('<noscript>x</noscript>')
+  })
+
+  describe('generated project', () => {
+    const generator = createNextProjectGenerator()
+
+    it('ships the code inert in _document and the unpacker as an _app sibling', async () => {
+      const output = await generator.generateProject(buildUidlWithBodyCode(BODY_CODE), template)
+
+      const document = findFile(output, 'pages', '_document')
+      expect(document?.content).toContain(`<template ${BODY_CODE_TEMPLATE_ATTR}>`)
+      expect(document?.content).toMatch(/<noscript><img[\s\S]*<template/)
+
+      const app = findFile(output, 'pages', '_app')
+      expect(app?.content).toContain("import TqBodyCode from '../components/tq-body-code'")
+      expect(app?.content).toContain('<TqBodyCode />')
+
+      const component = findFile(output, 'components', 'tq-body-code')
+      expect(component?.content).toContain('useEffect')
+      expect(component?.content).toContain(`template[${BODY_CODE_TEMPLATE_ATTR}]`)
+      expect(component?.content).toContain('script.async = false')
+    })
+
+    it('adds nothing when the project has no body custom code', async () => {
+      const output = await generator.generateProject(buildUidlWithBodyCode(undefined), template)
+      expect(findFile(output, 'pages', '_app')?.content).not.toContain('TqBodyCode')
+      expect(findFile(output, 'components', 'tq-body-code')).toBeUndefined()
+    })
+  })
+})

package/__tests__/body-code-unpack.test.ts

@@ -0,0 +1,101 @@
+import { resolve } from 'path'
+import { BODY_CODE_UNPACK_SCRIPT, wrapBodyCustomCode } from '../src/body-code/body-code-component'
+
+/**
+ * The unpacker run against a DOM: what it does to each kind of script in the
+ * project's body custom code. This repo's own jsdom 16 cannot load (see
+ * teleport-project-generator-html/__tests__/state-runtime/runtime.ts), so the
+ * editor checkout next to this one lends its jsdom.
+ *
+ * What a DOM cannot show is why an inline script names the document: Chromium
+ * reports no file for an error thrown by a script inserted after the page was
+ * parsed, and _document's inline script error guard knows the project's own
+ * scripts by the document's address. Measured over http with the built
+ * packages: without the name such an error reaches the app's own error
+ * listener in Chromium, with it the guard stops it (WebKit names the document
+ * either way).
+ */
+const loadJSDOM = () => {
+  const candidates = ['jsdom', resolve(__dirname, '../../../../teleport-gui/node_modules/jsdom')]
+  for (const candidate of candidates) {
+    try {
+      // tslint:disable-next-line no-var-requires
+      return require(candidate).JSDOM
+    } catch (error) {
+      // the next candidate
+    }
+  }
+  return undefined
+}
+const JSDOM = loadJSDOM()
+if (!JSDOM) {
+  // tslint:disable-next-line no-console
+  console.warn('body code unpack tests skipped: no jsdom loads (see the note in this file)')
+}
+const describeInDom = JSDOM ? describe : describe.skip
+
+const PAGE = 'https://site.test/pricing'
+const NAMED_AFTER_THE_PAGE = `\n//# sourceURL=${PAGE}`
+
+const STRUCTURED_DATA = '{"@context":"https://schema.org","@type":"Organization","name":"Holm"}'
+
+const BODY_CODE = [
+  '<script src="https://cdn.site.test/widget.js"></script>',
+  '<script>window.__order = (window.__order || []).concat("helper")</script>',
+  '<script type="module">window.__moduleWasWritten = true</script>',
+  `<script type="application/ld+json">${STRUCTURED_DATA}</script>`,
+  '<script type="text/template"><p>{{ name }}</p></script>',
+  '<script type="text/javascript">window.__order = window.__order.concat("widget setup")</script>',
+  '<div id="widget-root"></div>',
+].join('\n')
+
+/** The page a visitor is on, with the body custom code shipped inert, then unpacked as TqBodyCode does. */
+const unpackOn = (address: string) => {
+  const dom = new JSDOM(
+    `<!doctype html><html><body><main>Page</main>${wrapBodyCustomCode(BODY_CODE)}</body></html>`,
+    { url: address, runScripts: 'dangerously' }
+  )
+  dom.window.eval(BODY_CODE_UNPACK_SCRIPT)
+  const scripts = Array.from(dom.window.document.querySelectorAll('script')) as HTMLScriptElement[]
+  return { window: dom.window, scripts }
+}
+
+describeInDom('body custom code, unpacked after hydration', () => {
+  it('runs the inline scripts in the order they were written', () => {
+    const { window } = unpackOn(PAGE)
+
+    expect(window.__order).toEqual(['helper', 'widget setup'])
+    expect(window.document.querySelector('template')).toBeNull()
+    expect(window.document.querySelector('#widget-root')).not.toBeNull()
+  })
+
+  it('names the document as the source of every inline script that runs', () => {
+    const { scripts } = unpackOn(PAGE)
+    const [, helper, moduleScript, , , setup] = scripts
+
+    expect(helper.textContent).toBe(
+      `window.__order = (window.__order || []).concat("helper")${NAMED_AFTER_THE_PAGE}`
+    )
+    expect(moduleScript.textContent).toBe(`window.__moduleWasWritten = true${NAMED_AFTER_THE_PAGE}`)
+    expect(setup.textContent).toBe(
+      `window.__order = window.__order.concat("widget setup")${NAMED_AFTER_THE_PAGE}`
+    )
+  })
+
+  it('names the page without the part after #, as an error names it', () => {
+    const { scripts } = unpackOn(`${PAGE}#plans`)
+
+    expect(scripts[1].textContent?.endsWith(NAMED_AFTER_THE_PAGE)).toBe(true)
+  })
+
+  it('leaves an external script and the data blocks exactly as written', () => {
+    const { scripts } = unpackOn(PAGE)
+    const [external, , , structuredData, markupTemplate] = scripts
+
+    expect(external.getAttribute('src')).toBe('https://cdn.site.test/widget.js')
+    expect(external.textContent).toBe('')
+    expect(structuredData.textContent).toBe(STRUCTURED_DATA)
+    expect(JSON.parse(structuredData.textContent || '')).toMatchObject({ name: 'Holm' })
+    expect(markupTemplate.textContent).toBe('<p>{{ name }}</p>')
+  })
+})

package/__tests__/custom-property-styles.test.ts

@@ -0,0 +1,37 @@
+import { GeneratedFolder, ProjectUIDL } from '@teleporthq/teleport-types'
+import uidlSample from '../../../examples/test-samples/project-sample.json'
+import { createNextProjectGenerator } from '../src'
+import NextTemplate from '../src/project-template'
+
+const template = JSON.parse(JSON.stringify(NextTemplate)) as GeneratedFolder
+
+/** Slider arrows and bullets are styled through Swiper's CSS variables written as element styles. */
+describe('custom-property element styles', () => {
+  it('ships --swiper-* variables as written', async () => {
+    const uidl = JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL
+    const indexPage = (uidl.root.node.content.children || []).find(
+      (child) =>
+        child.type === 'conditional' && (child.content as { value?: string }).value === 'index'
+    )
+    const pageElement = (indexPage as { content: { node: { content: { children: unknown[] } } } })
+      .content.node.content
+    pageElement.children.push({
+      type: 'element',
+      content: {
+        elementType: 'container',
+        attrs: { 'data-thq': { type: 'static', content: 'slider-button-next' } },
+        style: {
+          '--swiper-navigation-color': { type: 'static', content: '#ff0000' },
+          '--swiper-navigation-size': { type: 'static', content: '24px' },
+        },
+        children: [],
+      },
+    })
+    const output = await createNextProjectGenerator().generateProject(uidl, template)
+    const page = output.subFolders
+      .find((s) => s.name === 'pages')
+      ?.files.find((f) => f.name === 'index')
+    expect(page?.content).toContain('--swiper-navigation-color: #ff0000')
+    expect(page?.content).toContain('--swiper-navigation-size: 24px')
+  })
+})

package/__tests__/document-inline-script-guard.test.ts

@@ -0,0 +1,58 @@
+import generate from '@babel/generator'
+import { ChunkDefinition, ProjectUIDL } from '@teleporthq/teleport-types'
+import { InlineScriptErrorGuard } from '@teleporthq/teleport-shared'
+import { createDocumentFileChunks } from '../src/utils'
+
+/**
+ * A script in the project's custom code that throws used to cover every page of
+ * the generated app with Next's "Unhandled Runtime Error" overlay. `_document`
+ * now runs the inline script error guard before anything else in <head>, and
+ * only for a project that has scripts of its own.
+ */
+
+const uidlWith = (globals: Record<string, unknown>): ProjectUIDL =>
+  ({
+    name: 'site',
+    globals: {
+      settings: { title: 'Site', language: 'en' },
+      meta: [{ name: 'description', content: 'Site' }],
+      assets: [{ type: 'style', path: 'https://fonts.test/font.css' }],
+      ...globals,
+    },
+    root: { name: 'App', node: { type: 'element', content: { elementType: 'Router' } } },
+  } as unknown as ProjectUIDL)
+
+const documentSource = (uidl: ProjectUIDL): string => {
+  const chunks = createDocumentFileChunks(uidl, { assets: {} } as never)
+  const chunk = (chunks.js as ChunkDefinition[])[0]
+  return generate(chunk.content as never).code
+}
+
+describe('generated _document — inline script error guard', () => {
+  it('runs before everything else in <head> when the custom code has a script', () => {
+    const source = documentSource(
+      uidlWith({ customCode: { body: '<script>new Accordion().init()</script>' } })
+    )
+    const head = source.slice(source.indexOf('<Head>') + '<Head>'.length).trimStart()
+
+    expect(head.startsWith('<script dangerouslySetInnerHTML={{')).toBe(true)
+    expect(source).toContain(JSON.stringify(InlineScriptErrorGuard.INLINE_SCRIPT_ERROR_GUARD))
+    expect(source.indexOf('stopImmediatePropagation')).toBeLessThan(
+      source.indexOf('new Accordion().init()')
+    )
+  })
+
+  it('runs for an inline script asset too', () => {
+    const source = documentSource(
+      uidlWith({ assets: [{ type: 'script', content: 'console.log(1)' }] })
+    )
+
+    expect(source).toContain('stopImmediatePropagation')
+  })
+
+  it('leaves the document of a project without scripts of its own untouched', () => {
+    const source = documentSource(uidlWith({ customCode: { head: '<style>body{}</style>' } }))
+
+    expect(source).not.toContain('stopImmediatePropagation')
+  })
+})

package/__tests__/emitted-components-rules-of-hooks.test.ts

@@ -26,6 +26,9 @@ import { generateQrCodeComponentCode } from '../src/widgets/qrcode-component'
 import { generateEmojiPickerComponentCode } from '../src/widgets/emoji-picker-component'
 import { generateColorPickerComponentCode } from '../src/widgets/color-picker-component'
 import { generateFormFileInputComponentCode } from '../src/widgets/form-file-input-component'
+import { generateScrollSceneComponentCode } from '../src/widgets/scroll-scene-component'
+import { generateScrollVideoComponentCode } from '../src/widgets/scroll-video-component'
+import { generatePageTransitionComponentCode } from '../src/page-transition/page-transition-component'
 import { COLLAPSIBLE_TEXT_OVERFLOW_COMPONENT_SOURCE } from '../src/collapsible-text/collapsible-text-overflow-component'
 import { NAV_ACTIVE_LINK_COMPONENT_SOURCE } from '../src/nav-active-link/nav-active-link-component'
 import { generateRichContentEmbedsComponentCode } from '../src/rich-content-embeds/embed-activator-component'
@@ -39,6 +42,12 @@ const EMITTED_COMPONENTS: Array<[string, string]> = [
   ['rich-text-editor (with embeds)', generateRichTextEditorComponentCode({ withEmbeds: true })],
   ['rich-content-embeds', generateRichContentEmbedsComponentCode()],
   ['tq-motion', generateMotionComponentCode()],
+  ['tq-scroll-scene', generateScrollSceneComponentCode()],
+  ['tq-scroll-video', generateScrollVideoComponentCode()],
+  [
+    'tq-page-transition',
+    generatePageTransitionComponentCode({ preset: 'slide-up', duration: 0.35, easing: 'ease-out' }),
+  ],
   ['tq-signature', generateSignatureComponentCode()],
   ['tq-categories-filter', generateCategoriesFilterComponentCode()],
   ['tq-categories-megamenu', generateCategoriesMegamenuComponentCode()],
@@ -63,7 +72,7 @@ describe('emitted React components obey the Rules of Hooks', () => {
 
   it('covers every component source the generator can emit', () => {
     // A new widget added without a row here would ship unguarded.
-    expect(EMITTED_COMPONENTS).toHaveLength(18)
+    expect(EMITTED_COMPONENTS).toHaveLength(21)
   })
 })
 

package/__tests__/motion-end2end.test.ts

@@ -79,4 +79,74 @@ describe('Next generator with a Motion element', () => {
     const npmrc = outputFolder.files.find((file) => file.name === '.npmrc')
     expect(npmrc?.content).toContain('legacy-peer-deps=true')
   })
+
+  it('scroll trigger interpolates the FULL from/to state (canvas parity), with scrub + offset support', async () => {
+    const outputFolder = await generator.generateProject(buildUidlWithMotion(), template)
+    const component = findFile(outputFolder, 'components', 'tq-motion')
+    const code = component?.content || ''
+
+    // The scroll path writes the whole interpolated state (transform families,
+    // opacity, filter) to the element — the historical y-only parallax is gone.
+    expect(code).toContain('applyScrollState')
+    expect(code).toContain('useMotionValueEvent')
+    expect(code).not.toContain('parallaxY')
+    expect(code).toMatch(/TRANSFORM_KEYS = \['x', 'y', 'scale', 'rotate'\]/)
+
+    // Scrub smoothing and the scroll-offset windows are wired.
+    expect(code).toContain('useSpring')
+    expect(code).toContain('SCROLL_OFFSET_RANGES')
+    for (const preset of ['pass', 'contained', 'enter', 'exit']) {
+      expect(code).toContain(preset)
+    }
+
+    // Blur interpolation mirrors the canvas runtime's BLUR_RE handling.
+    expect(code).toContain('blur(')
+  })
+
+  // A site with a page transition wraps every page in an AnimatePresence with
+  // initial={false}, which skips the mount animation of every motion component
+  // under it. A row that loops by itself (trigger load, repeat -1) never started
+  // on the generated site, and stood parked at its end state (2026-10-03).
+  it('starts a load animation from a flag set after mount, so a page transition cannot skip it', async () => {
+    const outputFolder = await generator.generateProject(buildUidlWithMotion(), template)
+    const component = findFile(outputFolder, 'components', 'tq-motion')
+    const code = component?.content || ''
+
+    expect(code).toContain('animate: played ? toVars : fromVars')
+    expect(code).toContain(
+      'buildAnimProps(trigger, fromVars, toVars, transition, revealed, played)'
+    )
+    expect(code).not.toContain(
+      "case 'load':\n      return { initial: fromVars, animate: toVars, transition }"
+    )
+  })
+
+  // Vlad, 2026-10-03: for a visitor who asks for less motion a row that slides
+  // by itself stands still and can be swiped, so every item stays reachable.
+  it('lets a row that slides by itself be swiped when the visitor asks for less motion', async () => {
+    const outputFolder = await generator.generateProject(buildUidlWithMotion(), template)
+    const code = findFile(outputFolder, 'components', 'tq-motion')?.content || ''
+
+    expect(code).toContain('const letMarqueeSwipe = (track) => {')
+    expect(code).toContain("frame.style.overflowX = 'auto'")
+    expect(code).toContain(
+      'React.useEffect(() => {\n    if (still) {\n      letMarqueeSwipe(ref.current)'
+    )
+  })
+
+  // The server cannot know that a visitor asks for less motion and renders the
+  // animated element with its starting style. A first render that drew the still
+  // element instead left that style in place: every entrance stayed invisible for
+  // those visitors (2026-10-03, React keeps server markup it disagrees with).
+  it('draws the still element for less motion only once the page is mounted', async () => {
+    const outputFolder = await generator.generateProject(buildUidlWithMotion(), template)
+    const code = findFile(outputFolder, 'components', 'tq-motion')?.content || ''
+
+    expect(code).toContain('React.useEffect(() => setMounted(true), [])')
+    expect(code).toContain('const still = mounted && Boolean(shouldReduceMotion)')
+    expect(code).toContain(
+      'if (still) {\n    return (\n      <div ref={ref} style={wrapperStyle} {...rest}>'
+    )
+    expect(code).not.toContain('if (shouldReduceMotion) {\n    return (')
+  })
 })

package/__tests__/motion-stagger-repeater.test.ts

@@ -223,7 +223,7 @@ describe('generated TqMotion source', () => {
     expect(code).not.toContain('<motion.div key={index}')
     // The outer wrapper stays a motion.div so the stagger and group branches render
     // the same element type (framer's useInView must not lose its node on a flip).
-    expect(code).toContain('<motion.div ref={ref} style={style} {...rest}>')
+    expect(code).toContain('<motion.div ref={ref} style={wrapperStyle} {...rest}>')
   })
 
   it('keeps the framer path for a REPEATING stagger (a CSS transition plays once)', () => {
@@ -237,14 +237,18 @@ describe('generated TqMotion source', () => {
 describe('generated cssFromState (canvas parity)', () => {
   const cssFromState = extractCssFromState()
 
-  it('collapses the transform family into one string, in the canvas order', () => {
+  it("writes the individual transform properties — the author's transform survives (canvas parity)", () => {
     expect(cssFromState({ opacity: 0, y: 30, scale: 0.8 })).toEqual({
       opacity: 0,
-      transform: 'translateY(30px) scale(0.8)',
+      translate: '0px 30px',
+      scale: '0.8',
     })
     expect(cssFromState({ x: -10, y: 4, scale: 2, rotate: -8 })).toEqual({
-      transform: 'translateX(-10px) translateY(4px) scale(2) rotate(-8deg)',
+      translate: '-10px 4px',
+      scale: '2',
+      rotate: '-8deg',
     })
+    expect(cssFromState({ x: '-25%' })).toEqual({ translate: '-25% 0px' })
   })
 
   it('passes non-transform properties through untouched', () => {