@benjavicente/angular-router-experimental 1.142.11

package/src/document/build-match-managed-document.ts

@@ -0,0 +1,308 @@
+import { escapeHtml } from '@benjavicente/router-core'
+import {
+  collectDehydrationScriptManagedTags,
+  mergeDehydrationPrefixIntoDocument,
+} from './document-dehydration'
+import { normalizeManagedTag, uniqManagedTags } from './managed-dom'
+import type { AnyRouter, RouterManagedTag } from '@benjavicente/router-core'
+import type { ManagedDocumentContent, RouteMetaEntry } from './managed-document-types'
+
+/**
+ * Document content from the current route tree only (meta, links, route body scripts, etc.).
+ * Does not call `takeBufferedScripts` — mirrors the route-derived arrays passed into
+ * `renderScripts` before the server-buffered script is unshifted in React/Solid/Vue.
+ */
+export function buildMatchManagedDocumentContent(
+  router: AnyRouter,
+): ManagedDocumentContent {
+  const nonce = router.options.ssr?.nonce
+  const matches = router.stores.activeMatchesSnapshot.state
+  const title = selectTitle(matches)
+  const metaTags = selectMetaTags(matches, nonce)
+  const links = selectConstructedLinks(matches, nonce)
+  const manifestLinks = selectManifestLinks(router, matches, nonce)
+  const preloadLinks = selectPreloadLinks(router, matches, nonce)
+  const styles = selectStyles(matches, nonce)
+  const headScripts = selectHeadScripts(matches, nonce)
+  const routeScripts = selectRouteScripts(matches, nonce)
+  const manifestScripts = selectManifestScripts(router, matches, nonce)
+
+  const head = uniqManagedTags(
+    [
+      ...metaTags,
+      ...preloadLinks,
+      ...links,
+      ...manifestLinks,
+      ...styles,
+      ...headScripts,
+    ].flatMap((tag) => normalizeManagedTag(tag)),
+  )
+
+  const body = uniqManagedTags(
+    [...routeScripts, ...manifestScripts].flatMap((tag) =>
+      normalizeManagedTag(tag),
+    ),
+  )
+
+  return {
+    title,
+    head,
+    body,
+  }
+}
+
+/**
+ * Full managed document for a single snapshot: match-derived tags plus one
+ * `takeBufferedScripts()` read (for tests and tooling). Prefer composing
+ * `buildMatchManagedDocumentContent` + a one-time dehydration prefix in SSR, as
+ * the body managed-tags provider does.
+ */
+export function buildManagedDocumentContent(
+  router: AnyRouter,
+): ManagedDocumentContent {
+  return mergeDehydrationPrefixIntoDocument(
+    buildMatchManagedDocumentContent(router),
+    collectDehydrationScriptManagedTags(router),
+  )
+}
+
+function selectTitle(matches: Array<any>) {
+  const routeMeta = selectRouteMeta(matches)
+
+  for (let i = routeMeta.length - 1; i >= 0; i--) {
+    const metas = routeMeta[i]!
+    for (let j = metas.length - 1; j >= 0; j--) {
+      const meta = metas[j]
+      if (meta?.title) {
+        return meta.title
+      }
+    }
+  }
+
+  return undefined
+}
+
+function selectMetaTags(
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  const routeMeta = selectRouteMeta(matches)
+  const metaTags: Array<RouterManagedTag> = []
+  const metaByAttribute: Record<string, true> = {}
+
+  for (let i = routeMeta.length - 1; i >= 0; i--) {
+    const metas = routeMeta[i]!
+    for (let j = metas.length - 1; j >= 0; j--) {
+      const m = metas[j]
+      if (!m || m.title) continue
+
+      if ('script:ld+json' in m && m['script:ld+json'] !== undefined) {
+        try {
+          const json = JSON.stringify(m['script:ld+json'])
+          metaTags.push({
+            tag: 'script',
+            attrs: {
+              type: 'application/ld+json',
+              nonce,
+            },
+            children: escapeHtml(json),
+          })
+        } catch {
+          // Skip invalid JSON-LD objects
+        }
+        continue
+      }
+
+      const attribute = m.name ?? m.property
+      if (attribute) {
+        if (metaByAttribute[attribute]) {
+          continue
+        }
+        metaByAttribute[attribute] = true
+      }
+
+      metaTags.push({
+        tag: 'meta',
+        attrs: {
+          ...m,
+          nonce,
+        },
+      })
+    }
+  }
+
+  if (nonce) {
+    metaTags.push({
+      tag: 'meta',
+      attrs: {
+        property: 'csp-nonce',
+        content: nonce,
+      },
+    })
+  }
+
+  metaTags.reverse()
+
+  return metaTags
+}
+
+function selectConstructedLinks(
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  return matches
+    .map((match) => match.links!)
+    .filter(Boolean)
+    .flat(1)
+    .map(
+      (link) =>
+        ({
+          tag: 'link',
+          attrs: {
+            ...link,
+            nonce,
+          },
+        }) satisfies RouterManagedTag,
+    )
+}
+
+function selectManifestLinks(
+  router: AnyRouter,
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  return matches
+    .map((match) => router.ssr?.manifest?.routes[match.routeId]?.assets ?? [])
+    .filter(Boolean)
+    .flat(1)
+    .filter((asset) => asset.tag === 'link')
+    .map(
+      (asset) =>
+        ({
+          tag: 'link',
+          attrs: {
+            ...asset.attrs,
+            suppressHydrationWarning: true,
+            nonce,
+          },
+        }) satisfies RouterManagedTag,
+    )
+}
+
+function selectPreloadLinks(
+  router: AnyRouter,
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  const preloadLinks: Array<RouterManagedTag> = []
+
+  matches
+    .map((match) => router.looseRoutesById[match.routeId]!)
+    .forEach((route) =>
+      router.ssr?.manifest?.routes[route.id]?.preloads
+        ?.filter(Boolean)
+        .forEach((preload) => {
+          preloadLinks.push({
+            tag: 'link',
+            attrs: {
+              rel: 'modulepreload',
+              href: preload,
+              nonce,
+            },
+          })
+        }),
+    )
+
+  return preloadLinks
+}
+
+function selectStyles(
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  return (
+    matches
+      .map((match) => match.styles!)
+      .flat(1)
+      .filter(Boolean) as Array<Record<string, unknown>>
+  ).map(({ children, ...attrs }) => ({
+    tag: 'style',
+    attrs: {
+      ...attrs,
+      nonce,
+    },
+    children: typeof children === 'string' ? children : undefined,
+  })) satisfies Array<RouterManagedTag>
+}
+
+function selectHeadScripts(
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  return (
+    matches
+      .map((match) => match.headScripts!)
+      .flat(1)
+      .filter(Boolean) as Array<Record<string, unknown>>
+  ).map(({ children, ...script }) => ({
+    tag: 'script',
+    attrs: {
+      ...script,
+      nonce,
+    },
+    children: typeof children === 'string' ? children : undefined,
+  })) satisfies Array<RouterManagedTag>
+}
+
+function selectRouteScripts(
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  return (
+    matches
+      .map((match) => match.scripts!)
+      .flat(1)
+      .filter(Boolean) as Array<Record<string, unknown>>
+  ).map(({ children, ...script }) => ({
+    tag: 'script',
+    attrs: {
+      ...script,
+      suppressHydrationWarning: true,
+      nonce,
+    },
+    children: typeof children === 'string' ? children : undefined,
+  })) satisfies Array<RouterManagedTag>
+}
+
+function selectManifestScripts(
+  router: AnyRouter,
+  matches: Array<any>,
+  nonce: string | undefined,
+) {
+  return matches
+    .map((match) => router.looseRoutesById[match.routeId]!)
+    .flatMap((route) =>
+      router.ssr?.manifest?.routes[route.id]?.assets
+        ?.filter((asset) => asset.tag === 'script')
+        .map(
+          (asset) =>
+            ({
+              tag: 'script',
+              attrs: {
+                ...asset.attrs,
+                nonce,
+              },
+              children: asset.children,
+            }) satisfies RouterManagedTag,
+        ) ?? [],
+    )
+}
+
+function selectRouteMeta(matches: Array<any>) {
+  return matches.reduce<Array<Array<RouteMetaEntry>>>((acc, match) => {
+    if (match.meta) {
+      acc.push(match.meta as Array<RouteMetaEntry>)
+    }
+    return acc
+  }, [])
+}

package/src/document/document-dehydration.ts

@@ -0,0 +1,27 @@
+import { normalizeManagedTag, uniqManagedTags } from './managed-dom'
+import type { AnyRouter } from '@benjavicente/router-core'
+import type { ManagedDocumentContent, ManagedTag  } from './managed-document-types'
+
+export function collectDehydrationScriptManagedTags(
+  router: AnyRouter,
+): Array<ManagedTag> {
+  return router.serverSsr
+    ? uniqManagedTags(
+        normalizeManagedTag(router.serverSsr.takeBufferedScripts()),
+      )
+    : []
+}
+
+export function mergeDehydrationPrefixIntoDocument(
+  matchContent: ManagedDocumentContent,
+  dehydrationPrefix: Array<ManagedTag>,
+): ManagedDocumentContent {
+  if (dehydrationPrefix.length === 0) {
+    return matchContent
+  }
+
+  return {
+    ...matchContent,
+    body: uniqManagedTags([...dehydrationPrefix, ...matchContent.body]),
+  }
+}

package/src/document/document-equality.ts

@@ -0,0 +1,29 @@
+import type { ManagedDocumentContent, ManagedTag } from './managed-document-types'
+
+export function areManagedDocumentContentsEqual(
+  prev: ManagedDocumentContent,
+  next: ManagedDocumentContent,
+) {
+  return (
+    prev.title === next.title &&
+    areManagedTagArraysEqual(prev.head, next.head) &&
+    areManagedTagArraysEqual(prev.body, next.body)
+  )
+}
+
+export function areManagedTagArraysEqual(
+  prev: Array<ManagedTag>,
+  next: Array<ManagedTag>,
+) {
+  if (prev.length !== next.length) {
+    return false
+  }
+
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i]?.id !== next[i]?.id) {
+      return false
+    }
+  }
+
+  return true
+}

package/src/document/document-router-token.ts

@@ -0,0 +1,6 @@
+import * as Angular from '@angular/core'
+import type { AnyRouter } from '@benjavicente/router-core'
+
+export const TANSTACK_DOCUMENT_ROUTER = new Angular.InjectionToken<AnyRouter>(
+  'TANSTACK_DOCUMENT_ROUTER',
+)

package/src/document/index.ts

@@ -0,0 +1,33 @@
+export type { TanstackDocumentFeatures } from './provide-tanstack-document'
+export {
+  provideHeadContent,
+  provideTanstackDocument,
+} from './provide-tanstack-document'
+export { provideTanstackDocumentTitle } from './provide-tanstack-document-title'
+export { provideTanstackHeadManagedTags } from './provide-tanstack-head-managed-tags'
+export { provideTanstackBodyManagedTags } from './provide-tanstack-body-managed-tags'
+export {
+  buildManagedDocumentContent,
+  buildMatchManagedDocumentContent,
+} from './build-match-managed-document'
+export { TANSTACK_DOCUMENT_ROUTER } from './document-router-token'
+export type {
+  ManagedBucket,
+  ManagedDocumentContent,
+  ManagedTag,
+  ManagedTagCollection,
+  ManagedTagId,
+  ManagedTagRecord,
+  RouteMetaEntry,
+} from './managed-document-types'
+export { TSR_ID_ATTR, TSR_MANAGED_ATTR } from './managed-document-types'
+export {
+  createManagedTagCollection,
+  hashManagedTag,
+  normalizeManagedTag,
+  uniqManagedTags,
+} from './managed-dom'
+export {
+  collectDehydrationScriptManagedTags,
+  mergeDehydrationPrefixIntoDocument,
+} from './document-dehydration'

package/src/document/install-unified-document-sync.ts

@@ -0,0 +1,108 @@
+import { DOCUMENT } from '@angular/common'
+import * as Angular from '@angular/core'
+import { injectStore } from '../injectStore'
+import { buildMatchManagedDocumentContent } from './build-match-managed-document'
+import {
+  collectDehydrationScriptManagedTags,
+  mergeDehydrationPrefixIntoDocument,
+} from './document-dehydration'
+import { areManagedDocumentContentsEqual } from './document-equality'
+import { createManagedTagCollection } from './managed-dom'
+import type { AnyRouter } from '@benjavicente/router-core'
+import type { ManagedDocumentContent, ManagedTagCollection } from './managed-document-types'
+
+function applyManagedDocumentContent({
+  document,
+  initialTitle,
+  headCollection,
+  bodyCollection,
+  nextContent,
+}: {
+  document: Document
+  initialTitle: string
+  headCollection: ManagedTagCollection
+  bodyCollection: ManagedTagCollection
+  nextContent: ManagedDocumentContent
+}) {
+  if (nextContent.title !== undefined) {
+    document.title = nextContent.title
+  } else {
+    document.title = initialTitle
+  }
+
+  headCollection.sync(nextContent.head)
+  bodyCollection.sync(nextContent.body)
+}
+
+/**
+ * One `activeMatches` subscription: title, head, and body stay in sync together.
+ * Used by `provideTanstackDocument` when all features are enabled.
+ */
+export function installUnifiedTanstackDocumentSync(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 initialTitle = document.title
+  const headCollection = createManagedTagCollection({
+    root: document.head,
+    bucket: 'head',
+    renderer,
+  })
+  const bodyCollection = createManagedTagCollection({
+    root: document.body,
+    bucket: 'body',
+    renderer,
+  })
+
+  const dehydrationBodyPrefix =
+    collectDehydrationScriptManagedTags(injectedRouter)
+
+  const composeDocumentContent = (): ManagedDocumentContent =>
+    mergeDehydrationPrefixIntoDocument(
+      buildMatchManagedDocumentContent(injectedRouter),
+      dehydrationBodyPrefix,
+    )
+
+  headCollection.mount()
+  bodyCollection.mount()
+
+  let currentContent = composeDocumentContent()
+  applyManagedDocumentContent({
+    document,
+    initialTitle,
+    headCollection,
+    bodyCollection,
+    nextContent: currentContent,
+  })
+
+  const syncEffect = Angular.effect(() => {
+    activeMatches()
+    const nextContent = composeDocumentContent()
+    if (areManagedDocumentContentsEqual(currentContent, nextContent)) {
+      return
+    }
+    currentContent = nextContent
+    applyManagedDocumentContent({
+      document,
+      initialTitle,
+      headCollection,
+      bodyCollection,
+      nextContent,
+    })
+  })
+
+  destroyRef.onDestroy(() => {
+    syncEffect.destroy()
+    headCollection.destroy()
+    bodyCollection.destroy()
+    document.title = initialTitle
+  })
+}

package/src/document/managed-document-types.ts

@@ -0,0 +1,36 @@
+import type { RouterManagedTag } from '@benjavicente/router-core'
+
+export const TSR_MANAGED_ATTR = 'data-tsr-managed'
+export const TSR_ID_ATTR = 'data-tsr-id'
+
+export type ManagedBucket = 'head' | 'body'
+export type ManagedTagId = string
+
+/** Route-driven tag with stable hash id for DOM reconciliation. */
+export type ManagedTag = Exclude<RouterManagedTag, { tag: 'title' }> & {
+  id: ManagedTagId
+}
+
+export type ManagedDocumentContent = {
+  title?: string
+  head: Array<ManagedTag>
+  body: Array<ManagedTag>
+}
+
+export type ManagedTagRecord = {
+  id: ManagedTagId
+  tag: ManagedTag
+}
+
+export type ManagedTagCollection = {
+  mount: (initialNodes?: Array<HTMLElement>) => void
+  sync: (nextTags: Array<ManagedTag>) => void
+  destroy: () => void
+}
+
+export type RouteMetaEntry = {
+  title?: string
+  name?: string
+  property?: string
+  [key: string]: unknown
+}