@benjavicente/angular-router-experimental 1.142.11

package/src/document/managed-dom.ts

@@ -0,0 +1,307 @@
+import {
+  
+  
+  
+  
+  
+  TSR_ID_ATTR,
+  TSR_MANAGED_ATTR
+} from './managed-document-types'
+import type {ManagedBucket, ManagedTag, ManagedTagCollection, ManagedTagId, ManagedTagRecord} from './managed-document-types';
+import type * as Angular from '@angular/core'
+import type { RouterManagedTag } from '@benjavicente/router-core'
+
+export function normalizeManagedTag(
+  tag: RouterManagedTag | undefined,
+): Array<ManagedTag> {
+  if (!tag) {
+    return []
+  }
+
+  if (tag.tag === 'title') {
+    return []
+  }
+
+  if (tag.tag === 'script') {
+    const src = tag.attrs?.src
+    if (!src && typeof tag.children !== 'string') {
+      return []
+    }
+  }
+
+  const normalizedTag = {
+    ...tag,
+    attrs: normalizeAttrs(tag.attrs),
+  } as Exclude<RouterManagedTag, { tag: 'title' }>
+
+  return [
+    {
+      ...normalizedTag,
+      id: hashManagedTag(normalizedTag),
+    },
+  ]
+}
+
+function normalizeAttrs(attrs?: Record<string, unknown>) {
+  if (!attrs) {
+    return {}
+  }
+
+  const normalized: Record<string, unknown> = {}
+
+  for (const key of Object.keys(attrs).sort()) {
+    const value = attrs[key]
+
+    if (
+      value === undefined ||
+      value === null ||
+      value === false ||
+      key === 'suppressHydrationWarning'
+    ) {
+      continue
+    }
+
+    const attrName = key === 'className' ? 'class' : key
+    normalized[attrName] = value
+  }
+
+  return normalized
+}
+
+export function uniqManagedTags(tags: Array<ManagedTag>) {
+  const seen = new Set<ManagedTagId>()
+
+  return tags.filter((tag) => {
+    if (seen.has(tag.id)) {
+      return false
+    }
+
+    seen.add(tag.id)
+    return true
+  })
+}
+
+export function hashManagedTag(
+  tag: Exclude<RouterManagedTag, { tag: 'title' }>,
+): ManagedTagId {
+  const source = JSON.stringify(tag)
+  let hash = 2166136261
+
+  for (let i = 0; i < source.length; i++) {
+    hash ^= source.charCodeAt(i)
+    hash = Math.imul(hash, 16777619)
+  }
+
+  return `tsr-${(hash >>> 0).toString(36)}`
+}
+
+export function createManagedTagCollection({
+  root,
+  bucket,
+  renderer,
+}: {
+  root: HTMLElement
+  bucket: ManagedBucket
+  renderer: Angular.Renderer2 | null
+}): ManagedTagCollection {
+  const nodesById = new Map<ManagedTagId, HTMLElement>()
+  const itemsById = new Map<ManagedTagId, ManagedTagRecord>()
+  let orderedIds: Array<ManagedTagId> = []
+
+  return {
+    mount(initialNodes = adoptManagedNodes(root, bucket)) {
+      nodesById.clear()
+      itemsById.clear()
+      orderedIds = []
+
+      initialNodes.forEach((node) => {
+        const id = node.getAttribute(TSR_ID_ATTR)
+        if (!id) {
+          return
+        }
+
+        nodesById.set(id, node)
+        orderedIds.push(id)
+      })
+    },
+    sync(nextTags) {
+      const nextIds = nextTags.map((tag) => tag.id)
+
+      if (areOrderedIdsEqual(orderedIds, nextIds)) {
+        return
+      }
+
+      const nextItemsById = new Map<ManagedTagId, ManagedTagRecord>(
+        nextTags.map((tag) => [tag.id, { id: tag.id, tag }]),
+      )
+
+      for (const id of orderedIds) {
+        if (nextItemsById.has(id)) {
+          continue
+        }
+
+        const node = nodesById.get(id)
+        if (!node) {
+          continue
+        }
+
+        removeNode(node, root, renderer)
+        nodesById.delete(id)
+        itemsById.delete(id)
+      }
+
+      let cursor: ChildNode | null = root.firstChild
+
+      for (const tag of nextTags) {
+        let node = nodesById.get(tag.id)
+
+        if (!node) {
+          node = createManagedNode(tag, bucket, root.ownerDocument, renderer)
+          nodesById.set(tag.id, node)
+        }
+
+        if (node !== cursor) {
+          insertNodeBefore(root, node, cursor, renderer)
+        }
+
+        itemsById.set(tag.id, {
+          id: tag.id,
+          tag,
+        })
+        cursor = node.nextSibling
+      }
+
+      orderedIds = nextIds
+    },
+    destroy() {
+      nodesById.forEach((node) => {
+        node.parentNode?.removeChild(node)
+      })
+
+      nodesById.clear()
+      itemsById.clear()
+      orderedIds = []
+    },
+  }
+}
+
+function adoptManagedNodes(root: HTMLElement, bucket: ManagedBucket) {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(`[${TSR_MANAGED_ATTR}="${bucket}"]`),
+  )
+}
+
+function createManagedNode(
+  tag: ManagedTag,
+  bucket: ManagedBucket,
+  document: Document,
+  renderer: Angular.Renderer2 | null,
+) {
+  const node = createElement(document, tag.tag, renderer)
+  setAttribute(node, TSR_MANAGED_ATTR, bucket, renderer)
+  setAttribute(node, TSR_ID_ATTR, tag.id, renderer)
+
+  for (const [attrName, attrValue] of Object.entries(tag.attrs ?? {})) {
+    if (attrName === 'suppressHydrationWarning') continue
+
+    if (attrValue === undefined || attrValue === null || attrValue === false) {
+      continue
+    }
+
+    const domAttrName = attrName === 'className' ? 'class' : attrName
+    const domAttrValue =
+      typeof attrValue === 'boolean' ? '' : String(attrValue)
+    setAttribute(node, domAttrName, domAttrValue, renderer)
+  }
+
+  if ('children' in tag && typeof tag.children === 'string') {
+    setTextContent(node, tag.children, renderer)
+  }
+
+  return node
+}
+
+function createElement(
+  document: Document,
+  tagName: string,
+  renderer: Angular.Renderer2 | null,
+) {
+  return renderer
+    ? (renderer.createElement(tagName) as HTMLElement)
+    : document.createElement(tagName)
+}
+
+function setAttribute(
+  node: HTMLElement,
+  name: string,
+  value: string,
+  renderer: Angular.Renderer2 | null,
+) {
+  if (renderer) {
+    renderer.setAttribute(node, name, value)
+    return
+  }
+
+  node.setAttribute(name, value)
+}
+
+function setTextContent(
+  node: HTMLElement,
+  value: string,
+  renderer: Angular.Renderer2 | null,
+) {
+  if (renderer) {
+    renderer.setProperty(node, 'textContent', value)
+    return
+  }
+
+  node.textContent = value
+}
+
+function insertNodeBefore(
+  root: HTMLElement,
+  node: HTMLElement,
+  before: ChildNode | null,
+  renderer: Angular.Renderer2 | null,
+) {
+  if (node.parentNode === root && node.nextSibling === before) {
+    return
+  }
+
+  if (renderer) {
+    renderer.insertBefore(root, node, before)
+    return
+  }
+
+  root.insertBefore(node, before)
+}
+
+function removeNode(
+  node: HTMLElement,
+  root: HTMLElement,
+  renderer: Angular.Renderer2 | null,
+) {
+  if (renderer) {
+    renderer.removeChild(root, node)
+    return
+  }
+
+  root.removeChild(node)
+}
+
+function areOrderedIdsEqual(
+  prev: Array<ManagedTagId>,
+  next: Array<ManagedTagId>,
+) {
+  if (prev.length !== next.length) {
+    return false
+  }
+
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i] !== next[i]) {
+      return false
+    }
+  }
+
+  return true
+}

package/src/document/provide-tanstack-body-managed-tags.ts

@@ -0,0 +1,78 @@
+import { DOCUMENT } from '@angular/common'
+import * as Angular from '@angular/core'
+import { injectStore } from '../injectStore'
+import { buildMatchManagedDocumentContent } from './build-match-managed-document'
+import { collectDehydrationScriptManagedTags } from './document-dehydration'
+import { areManagedTagArraysEqual } from './document-equality'
+import { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
+import { createManagedTagCollection, uniqManagedTags } from './managed-dom'
+import type { AnyRouter } from '@benjavicente/router-core'
+import type { ManagedTag } from './managed-document-types'
+
+/**
+ * Managed body scripts from matches, with a single `takeBufferedScripts()` capture
+ * on the server only (call from an injection context).
+ */
+export function installTanstackBodyManagedTags(injectedRouter: AnyRouter) {
+  const document = Angular.inject(DOCUMENT)
+  const rendererFactory = Angular.inject(Angular.RendererFactory2, {
+    optional: true,
+  })
+  const destroyRef = Angular.inject(Angular.DestroyRef)
+  const activeMatches = injectStore(
+    injectedRouter.stores.activeMatchesSnapshot,
+    (matches) => matches,
+  )
+
+  /** One read per bootstrap when `router.serverSsr` exists (SSR); otherwise empty. */
+  const dehydrationBodyPrefix =
+    collectDehydrationScriptManagedTags(injectedRouter)
+
+  const composeBody = (): Array<ManagedTag> =>
+    dehydrationBodyPrefix.length === 0
+      ? buildMatchManagedDocumentContent(injectedRouter).body
+      : uniqManagedTags([
+          ...dehydrationBodyPrefix,
+          ...buildMatchManagedDocumentContent(injectedRouter).body,
+        ])
+
+  const renderer = rendererFactory?.createRenderer(null, null) ?? null
+  const bodyCollection = createManagedTagCollection({
+    root: document.body,
+    bucket: 'body',
+    renderer,
+  })
+
+  bodyCollection.mount()
+
+  let currentBody: Array<ManagedTag> = composeBody()
+  bodyCollection.sync(currentBody)
+
+  const syncEffect = Angular.effect(() => {
+    activeMatches()
+    const nextBody = composeBody()
+    if (areManagedTagArraysEqual(currentBody, nextBody)) {
+      return
+    }
+    currentBody = nextBody
+    bodyCollection.sync(nextBody)
+  })
+
+  destroyRef.onDestroy(() => {
+    syncEffect.destroy()
+    bodyCollection.destroy()
+  })
+}
+
+export function tanstackBodyManagedTagsInitializer() {
+  installTanstackBodyManagedTags(Angular.inject(TANSTACK_DOCUMENT_ROUTER))
+}
+
+export function provideTanstackBodyManagedTags(
+  router: AnyRouter,
+): Angular.EnvironmentProviders {
+  return Angular.makeEnvironmentProviders([
+    { provide: TANSTACK_DOCUMENT_ROUTER, useValue: router },
+    Angular.provideEnvironmentInitializer(tanstackBodyManagedTagsInitializer),
+  ])
+}

package/src/document/provide-tanstack-document-title.ts

@@ -0,0 +1,59 @@
+import { DOCUMENT } from '@angular/common'
+import * as Angular from '@angular/core'
+import { injectStore } from '../injectStore'
+import { buildMatchManagedDocumentContent } from './build-match-managed-document'
+import { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
+import type { AnyRouter } from '@benjavicente/router-core'
+
+/** Sync `document.title` from the router (call from an injection context). */
+export function installTanstackDocumentTitle(injectedRouter: AnyRouter) {
+  const document = Angular.inject(DOCUMENT)
+  const destroyRef = Angular.inject(Angular.DestroyRef)
+  const activeMatches = injectStore(
+    injectedRouter.stores.activeMatchesSnapshot,
+    (matches) => matches,
+  )
+
+  const initialTitle = document.title
+  let currentTitle: string | undefined = buildMatchManagedDocumentContent(
+    injectedRouter,
+  ).title
+
+  const applyTitle = (next?: string) => {
+    if (next !== undefined) {
+      document.title = next
+    } else {
+      document.title = initialTitle
+    }
+  }
+
+  applyTitle(currentTitle)
+
+  const syncEffect = Angular.effect(() => {
+    activeMatches()
+    const nextTitle = buildMatchManagedDocumentContent(injectedRouter).title
+    if (nextTitle === currentTitle) {
+      return
+    }
+    currentTitle = nextTitle
+    applyTitle(nextTitle)
+  })
+
+  destroyRef.onDestroy(() => {
+    syncEffect.destroy()
+    document.title = initialTitle
+  })
+}
+
+export function tanstackDocumentTitleInitializer() {
+  installTanstackDocumentTitle(Angular.inject(TANSTACK_DOCUMENT_ROUTER))
+}
+
+export function provideTanstackDocumentTitle(
+  router: AnyRouter,
+): Angular.EnvironmentProviders {
+  return Angular.makeEnvironmentProviders([
+    { provide: TANSTACK_DOCUMENT_ROUTER, useValue: router },
+    Angular.provideEnvironmentInitializer(tanstackDocumentTitleInitializer),
+  ])
+}

package/src/document/provide-tanstack-document.ts

@@ -0,0 +1,62 @@
+import * as Angular from '@angular/core'
+import { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
+import { installUnifiedTanstackDocumentSync } from './install-unified-document-sync'
+import { installTanstackBodyManagedTags } from './provide-tanstack-body-managed-tags'
+import { installTanstackDocumentTitle } from './provide-tanstack-document-title'
+import { installTanstackHeadManagedTags } from './provide-tanstack-head-managed-tags'
+import type { AnyRouter } from '@benjavicente/router-core'
+
+export type TanstackDocumentFeatures = {
+  /** Sync `document.title` from route meta (default: true). */
+  title?: boolean
+  /** Managed `<head>` tags from matches (default: true). */
+  headTags?: boolean
+  /** Managed `<body>` scripts: route/manifest scripts plus one SSR `takeBufferedScripts()` read (default: true). */
+  bodyScripts?: boolean
+}
+
+const defaultFeatures: Required<TanstackDocumentFeatures> = {
+  title: true,
+  headTags: true,
+  bodyScripts: true,
+}
+
+/**
+ * Composes document sync from route matches. When title, head, and body are all
+ * enabled, uses a single `activeMatches` effect (same churn as legacy
+ * `provideHeadContent`). Partial feature sets use separate installers each with
+ * their own effect.
+ */
+export function provideTanstackDocument(
+  router: AnyRouter,
+  features: TanstackDocumentFeatures = {},
+): Angular.EnvironmentProviders {
+  const f = { ...defaultFeatures, ...features }
+  const allOn = f.title && f.headTags && f.bodyScripts
+
+  return Angular.makeEnvironmentProviders([
+    { provide: TANSTACK_DOCUMENT_ROUTER, useValue: router },
+    Angular.provideEnvironmentInitializer(() => {
+      if (allOn) {
+        installUnifiedTanstackDocumentSync(router)
+        return
+      }
+      if (f.title) {
+        installTanstackDocumentTitle(router)
+      }
+      if (f.headTags) {
+        installTanstackHeadManagedTags(router)
+      }
+      if (f.bodyScripts) {
+        installTanstackBodyManagedTags(router)
+      }
+    }),
+  ])
+}
+
+/** Same as `provideTanstackDocument(router)` (all features enabled). */
+export function provideHeadContent(
+  router: AnyRouter,
+): Angular.EnvironmentProviders {
+  return provideTanstackDocument(router)
+}

package/src/document/provide-tanstack-head-managed-tags.ts

@@ -0,0 +1,63 @@
+import { DOCUMENT } from '@angular/common'
+import * as Angular from '@angular/core'
+import { injectStore } from '../injectStore'
+import { buildMatchManagedDocumentContent } from './build-match-managed-document'
+import { areManagedTagArraysEqual } from './document-equality'
+import { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
+import { createManagedTagCollection } from './managed-dom'
+import type { AnyRouter } from '@benjavicente/router-core'
+import type { ManagedTag } from './managed-document-types'
+
+/** Managed `<head>` tags from active matches (call from an injection context). */
+export function installTanstackHeadManagedTags(injectedRouter: AnyRouter) {
+  const document = Angular.inject(DOCUMENT)
+  const rendererFactory = Angular.inject(Angular.RendererFactory2, {
+    optional: true,
+  })
+  const destroyRef = Angular.inject(Angular.DestroyRef)
+  const activeMatches = injectStore(
+    injectedRouter.stores.activeMatchesSnapshot,
+    (matches) => matches,
+  )
+
+  const renderer = rendererFactory?.createRenderer(null, null) ?? null
+  const headCollection = createManagedTagCollection({
+    root: document.head,
+    bucket: 'head',
+    renderer,
+  })
+
+  headCollection.mount()
+
+  let currentHead: Array<ManagedTag> =
+    buildMatchManagedDocumentContent(injectedRouter).head
+  headCollection.sync(currentHead)
+
+  const syncEffect = Angular.effect(() => {
+    activeMatches()
+    const nextHead = buildMatchManagedDocumentContent(injectedRouter).head
+    if (areManagedTagArraysEqual(currentHead, nextHead)) {
+      return
+    }
+    currentHead = nextHead
+    headCollection.sync(nextHead)
+  })
+
+  destroyRef.onDestroy(() => {
+    syncEffect.destroy()
+    headCollection.destroy()
+  })
+}
+
+export function tanstackHeadManagedTagsInitializer() {
+  installTanstackHeadManagedTags(Angular.inject(TANSTACK_DOCUMENT_ROUTER))
+}
+
+export function provideTanstackHeadManagedTags(
+  router: AnyRouter,
+): Angular.EnvironmentProviders {
+  return Angular.makeEnvironmentProviders([
+    { provide: TANSTACK_DOCUMENT_ROUTER, useValue: router },
+    Angular.provideEnvironmentInitializer(tanstackHeadManagedTagsInitializer),
+  ])
+}