Merge pull request #76 from koculu/r-teleport-on-detached-content

koculu · web-flow · commit 6a2b293dea6e · 2026-03-05T03:49:36.000+01:00
Add support r-teleport on detached content.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "regor",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "description": "A modern UI framework for web and desktop applications, inspired by Vue's concepts and powered by simplicity and flexibility.",
   "author": "Ahmed Yasin Koculu",
   "license": "MIT",
diff --git a/src/bind/Binder.ts b/src/bind/Binder.ts
@@ -141,21 +141,25 @@ export class Binder {
   ): boolean {
     if (config !== teleportDirective) return false
     if (isNullOrWhitespace(valueExpression)) return true
-    const teleportTo = document.querySelector(valueExpression)
-    if (teleportTo) {
-      const parent = el.parentElement
-      if (!parent) return true
-      const placeholder = new Comment(`teleported => '${valueExpression}'`)
-      parent.insertBefore(placeholder, el)
-      ;(el as HTMLElement & { teleportedFrom: Node }).teleportedFrom =
-        placeholder
-      ;(placeholder as Comment & { teleportedTo: HTMLElement }).teleportedTo =
-        el
-      addUnbinder(placeholder, () => {
-        removeNode(el)
-      })
-      teleportTo.appendChild(el)
+    let queryRoot = document as ParentNode
+    if (!queryRoot) {
+      let root = el.parentNode
+      while (root?.parentNode) root = root.parentNode
+      if (root) queryRoot = root
+      else return true
     }
+    const teleportTo = queryRoot.querySelector(valueExpression)
+    if (!teleportTo) return true
+    const parent = el.parentElement
+    if (!parent) return true
+    const placeholder = new Comment(`teleported => '${valueExpression}'`)
+    parent.insertBefore(placeholder, el)
+    ;(el as HTMLElement & { teleportedFrom: Node }).teleportedFrom = placeholder
+    ;(placeholder as Comment & { teleportedTo: HTMLElement }).teleportedTo = el
+    addUnbinder(placeholder, () => {
+      removeNode(el)
+    })
+    teleportTo.appendChild(el)
     return true
   }
 
diff --git a/tests/app/createComponent.spec.ts b/tests/app/createComponent.spec.ts
@@ -13,6 +13,7 @@ import { Binder } from '../../src/bind/Binder'
 import { hasSwitch } from '../../src/bind/switch'
 import { Parser } from '../../src/parser/Parser'
 import { htmlEqual } from '../common/html-equal'
+import { createDom } from '../minidom/createDom'
 
 test('should render components with reactive properties', () => {
   const root = document.createElement('div')
@@ -705,6 +706,142 @@ test('component inheritAttrs merges class and style from host onto inheritor roo
   expect(div.style.marginTop).toBe('5px')
 })
 
+test('component attribute fallthrough can carry :r-teleport to component root', () => {
+  const cleanup = createDom(
+    '<html><body><div id="app"></div><div id="teleport-host"></div></body></html>',
+  )
+  try {
+    const root = document.querySelector('#app') as HTMLElement
+    const teleComp = defineComponent(
+      html`<section class="tele-root">teleported</section>`,
+    )
+
+    createApp(
+      {
+        components: { teleComp },
+        target: '#teleport-host',
+      },
+      {
+        element: root,
+        template: html`<main>
+          <TeleComp
+            :r-teleport="target"
+            class="from-host"
+            data-origin="host"
+          ></TeleComp>
+        </main>`,
+      },
+    )
+
+    const host = document.querySelector('#teleport-host') as HTMLElement
+    const moved = host.querySelector('.tele-root') as HTMLElement | null
+    expect(moved).toBeTruthy()
+    expect(moved?.classList.contains('from-host')).toBe(true)
+    expect(moved?.getAttribute('data-origin')).toBe('host')
+    expect(root.innerHTML).toContain("teleported => '#teleport-host'")
+  } finally {
+    cleanup()
+  }
+})
+
+test('nested component tree teleports when parent host binds :r-teleport', () => {
+  const cleanup = createDom(
+    '<html><body><div id="app"></div><div id="teleport-host"></div></body></html>',
+  )
+  try {
+    const root = document.querySelector('#app') as HTMLElement
+
+    const childComp = defineComponent(
+      html`<span class="nested-child">nested payload</span>`,
+    )
+    const parentComp = defineComponent(
+      html`<section class="parent-root" r-inherit>
+        <ChildComp></ChildComp>
+      </section>`,
+    )
+
+    createApp(
+      {
+        components: { parentComp, childComp },
+        target: '#teleport-host',
+      },
+      {
+        element: root,
+        template: html`<main>
+          <ParentComp
+            :r-teleport="target"
+            class="from-parent-host"
+            data-parent="yes"
+          ></ParentComp>
+        </main>`,
+      },
+    )
+
+    const host = document.querySelector('#teleport-host') as HTMLElement
+    const moved = host.querySelector('.parent-root') as HTMLElement | null
+    const nested = host.querySelector('.nested-child') as HTMLElement | null
+
+    expect(moved).toBeTruthy()
+    expect(moved?.classList.contains('from-parent-host')).toBe(true)
+    expect(moved?.getAttribute('data-parent')).toBe('yes')
+    expect(nested?.textContent?.trim()).toBe('nested payload')
+    expect(root.innerHTML).toContain("teleported => '#teleport-host'")
+  } finally {
+    cleanup()
+  }
+})
+
+test('nested component tree teleports when parent binds :r-teleport on ChildComp', () => {
+  const cleanup = createDom(
+    '<html><body><div id="app"></div><div id="teleport-host"></div></body></html>',
+  )
+  try {
+    const root = document.querySelector('#app') as HTMLElement
+
+    const childComp = defineComponent(
+      html`<article class="child-root">
+        <span class="inner-child">inner payload</span>
+      </article>`,
+    )
+    const parentComp = defineComponent(
+      html`<section class="parent-shell">
+        <ChildComp
+          :r-teleport="target"
+          class="child-from-parent"
+          data-from-parent="yes"
+        ></ChildComp>
+      </section>`,
+      {
+        context: () => ({
+          target: '#teleport-host',
+        }),
+      },
+    )
+
+    createApp(
+      {
+        components: { parentComp, childComp },
+      },
+      {
+        element: root,
+        template: html`<main><ParentComp></ParentComp></main>`,
+      },
+    )
+    const host = document.querySelector('#teleport-host') as HTMLElement
+    const moved = host.querySelector('.child-root') as HTMLElement | null
+    const nested = host.querySelector('.inner-child') as HTMLElement | null
+
+    expect(moved).toBeTruthy()
+    expect(moved?.classList.contains('child-from-parent')).toBe(true)
+    expect(moved?.getAttribute('data-from-parent')).toBe('yes')
+    expect(nested?.textContent?.trim()).toBe('inner payload')
+    expect(root.querySelector('.parent-shell')).toBeTruthy()
+    expect(root.innerHTML).toContain("teleported => '#teleport-host'")
+  } finally {
+    cleanup()
+  }
+})
+
 test('component named slot fallback renders when slot content is not provided', () => {
   const root = document.createElement('div')
   const slotComp = defineComponent(
diff --git a/tests/bind/binder-edge.spec.ts b/tests/bind/binder-edge.spec.ts
@@ -147,3 +147,33 @@ test('binder teleport handler covers whitespace and missing parent/target paths'
     target.remove()
   }
 })
+
+test('detached :r-teleport path falls back to parent-chain root when document lookup is unavailable at bind time', () => {
+  const binder = createBinder()
+  const root = document.createElement('div')
+  const host = document.createElement('div')
+  const el = document.createElement('div')
+  const target = document.createElement('div')
+  target.id = 'teleport-edge-missing-doc'
+  root.appendChild(host)
+  root.appendChild(target)
+  host.appendChild(el)
+
+  const prevDocument = (globalThis as any).document
+  try {
+    ;(globalThis as any).document = undefined
+    expect(() => {
+      binder.__bindToExpression(
+        teleportDirective as any,
+        el,
+        '#teleport-edge-missing-doc',
+      )
+    }).not.toThrow()
+    expect(target.contains(el)).toBe(true)
+    expect(host.innerHTML).toContain(
+      "teleported => '#teleport-edge-missing-doc'",
+    )
+  } finally {
+    ;(globalThis as any).document = prevDocument
+  }
+})
diff --git a/tests/minidom/minidom.test.ts b/tests/minidom/minidom.test.ts
@@ -130,6 +130,21 @@ describe('minidom templates', () => {
 })
 
 describe('minidom parsing and serialization', () => {
+  it('links document head and body from html documents', () =>
+    withDom(
+      '<html><head><meta charset="utf-8"></head><body><main>ok</main></body></html>',
+      ({ document }) => {
+        expect(document.head?.querySelector('meta')).not.toBeNull()
+        expect(document.body?.querySelector('main')?.textContent).toBe('ok')
+      },
+    ))
+
+  it('links document head when document has head only', () =>
+    withDom('<html><head><title>x</title></head></html>', ({ document }) => {
+      expect(document.head?.querySelector('title')?.textContent).toBe('x')
+      expect(document.body).toBeNull()
+    }))
+
   it('keeps raw text in script and style nodes', () =>
     withDom(
       '<html><body><script>if (a < b && c > d) { x = "&lt;raw&gt;" }</script></body></html>',
diff --git a/tests/minidom/minidom.ts b/tests/minidom/minidom.ts
@@ -307,6 +307,7 @@ class MiniNode {
 
 class MiniDocument extends MiniNode {
   documentElement: MiniElement | null = null
+  head: MiniElement | null = null
   body: MiniElement | null = null
 
   constructor() {
@@ -373,14 +374,26 @@ class MiniDocument extends MiniNode {
   }
 
   linkHtmlBody() {
+    this.head = null
+    this.body = null
     const html = this.querySelector('html')
     if (html && html instanceof MiniElement) {
       this.documentElement = html
+      const head = html.querySelector('head')
+      if (head && head instanceof MiniElement) {
+        this.head = head
+      }
       const body = html.querySelector('body')
       if (body && body instanceof MiniElement) {
         this.body = body
       }
     }
+    if (!this.head) {
+      const head = this.querySelector('head')
+      if (head && head instanceof MiniElement) {
+        this.head = head
+      }
+    }
     if (!this.body) {
       const body = this.querySelector('body')
       if (body && body instanceof MiniElement) {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "regor",`
`3`		`- "version": "1.3.9",`
	`3`	`+ "version": "1.4.0",`
`4`	`4`	`"description": "A modern UI framework for web and desktop applications, inspired by Vue's concepts and powered by simplicity and flexibility.",`
`5`	`5`	`"author": "Ahmed Yasin Koculu",`
`6`	`6`	`"license": "MIT",`