Merge branch 'main' into blog-router-refactor-signals

Author: Sheraff

media/brand.sketch

@@ -6,10 +6,12 @@ authors:
   - Florian Pellet
 ---
 
-![Big performance number](/blog-assets/tanstack-router-route-matching-tree-rewrite/header.png)
+![Fantasy landscape illustration used as the article header](/blog-assets/tanstack-router-route-matching-tree-rewrite/header.jpg)
 
 We achieved a 20,000× performance improvement in route matching in TanStack Router. Let's be honest, this is _definitely_ cherry-picked, but the number is real and comes from a real production application. More importantly, it shows that matching a pathname to a route is no longer bottlenecked by the number of routes in your application.
 
+![Big performance number](/blog-assets/tanstack-router-route-matching-tree-rewrite/big-number.png)
+
 ## The Real Problem: correctness, not speed
 
 One big responsibility of a router is to match a given URL pathname (e.g., `/users/123`) to a route definition (e.g., `/users/$userId`). This is deceptively complex when you consider all the different types of route segments (static, dynamic, optional, wildcard) and the priority rules that govern which route should match first.

…r-route-matching-tree-rewrite/header.png …ute-matching-tree-rewrite/big-number.pngpublic/blog-assets/tanstack-router-route-matching-tree-rewrite/header.png renamed to public/blog-assets/tanstack-router-route-matching-tree-rewrite/big-number.png public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.png renamed to public/blog-assets/tanstack-router-route-matching-tree-rewrite/big-number.png

@@ -10,10 +10,7 @@ import {
   DropdownContent,
   DropdownItem,
 } from './Dropdown'
-import {
-  getPackageManager,
-  PACKAGE_MANAGERS,
-} from '~/utils/markdown/installCommand'
+import { getPackageManager } from '~/utils/markdown/installCommand'
 
 // Markdown icon component matching the screenshot
 function MarkdownIcon({ className }: { className?: string }) {

public/blog-assets/tanstack-router-route-matching-tree-rewrite/header.jpg

@@ -534,28 +534,59 @@ export function DocsLayout({
       d.status === 'active' && d.name !== 'Nozzle.io' && d.id !== 'fireship',
   )
 
-  const menuItems = menuConfig.map((group, i) => {
-    const WrapperComp = group.collapsible ? 'details' : 'div'
-    const LabelComp = group.collapsible ? 'summary' : 'div'
+  const groupInitialOpenState = React.useMemo(() => {
+    return menuConfig.reduce<Record<string, boolean>>((acc, group, index) => {
+      const isChildActive = group.children.some((child) => child.to === _splat)
+      const key = `${index}:${String(group.label)}`
 
-    const isChildActive = group.children.some((d) => d.to === _splat)
-    const configGroupOpenState =
-      typeof group.defaultCollapsed !== 'undefined'
-        ? !group.defaultCollapsed // defaultCollapsed is true means the group is closed
-        : undefined
-    const isOpen = isChildActive ? true : (configGroupOpenState ?? false)
+      acc[key] = isChildActive
+        ? true
+        : typeof group.defaultCollapsed !== 'undefined'
+          ? !group.defaultCollapsed
+          : false
 
-    const detailsProps = group.collapsible ? { open: isOpen } : {}
+      return acc
+    }, {})
+  }, [menuConfig, _splat])
 
-    return (
-      <WrapperComp
-        key={`group-${i}`}
-        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
-        {...detailsProps}
-      >
-        <LabelComp className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
-          {group?.label}
-        </LabelComp>
+  const [openGroups, setOpenGroups] = React.useState(groupInitialOpenState)
+
+  React.useEffect(() => {
+    setOpenGroups((prev) => {
+      let hasChanged = false
+      const next = { ...prev }
+
+      Object.entries(groupInitialOpenState).forEach(([key, isOpen]) => {
+        if (!(key in next)) {
+          next[key] = isOpen
+          hasChanged = true
+          return
+        }
+
+        if (isOpen && !next[key]) {
+          next[key] = true
+          hasChanged = true
+        }
+      })
+
+      return hasChanged ? next : prev
+    })
+  }, [groupInitialOpenState])
+
+  const menuItems = menuConfig.map((group, i) => {
+    const groupKey = `${i}:${String(group.label)}`
+
+    const groupContent = (
+      <>
+        {group.collapsible ? (
+          <summary className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
+            {group.label}
+          </summary>
+        ) : (
+          <div className="text-[.8em] font-bold leading-4 px-2 ts-sidebar-label">
+            {group.label}
+          </div>
+        )}
         <div className="h-2" />
         <ul className="text-[.85em] leading-snug list-none">
           {group?.children?.map((child, i) => {
@@ -580,6 +611,7 @@ export function DocsLayout({
                     onClick={() => {
                       detailsRef.current.removeAttribute('open')
                     }}
+                    preload={false}
                     activeOptions={{
                       exact: true,
                       includeHash: false,
@@ -614,7 +646,32 @@ export function DocsLayout({
             )
           })}
         </ul>
-      </WrapperComp>
+      </>
+    )
+
+    return group.collapsible ? (
+      <details
+        key={`group-${i}`}
+        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
+        open={openGroups[groupKey] ?? false}
+        onToggle={(event) => {
+          const nextOpen = event.currentTarget.open
+          setOpenGroups((prev) =>
+            prev[groupKey] === nextOpen
+              ? prev
+              : { ...prev, [groupKey]: nextOpen },
+          )
+        }}
+      >
+        {groupContent}
+      </details>
+    ) : (
+      <div
+        key={`group-${i}`}
+        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
+      >
+        {groupContent}
+      </div>
     )
   })
 

public/fonts/Inter-latin-ext.woff2

@@ -0,0 +1,47 @@
+import React from 'react'
+import type { Framework } from '~/libraries'
+import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
+
+const LazyCodeExampleCardImpl = React.lazy(async () => {
+  const mod = await import('./CodeExampleCard')
+
+  return { default: mod.CodeExampleCard }
+})
+
+interface LazyCodeExampleCardProps {
+  title?: string
+  frameworks: Framework[]
+  codeByFramework: Partial<Record<Framework, { lang: string; code: string }>>
+}
+
+export function LazyCodeExampleCard(props: LazyCodeExampleCardProps) {
+  const { ref, isIntersecting } = useIntersectionObserver({
+    rootMargin: '25%',
+    triggerOnce: true,
+  })
+
+  return (
+    <div ref={ref} className="px-4 space-y-4 flex flex-col items-center">
+      {!isIntersecting ? (
+        <div className="w-full max-w-5xl mx-auto space-y-4">
+          <div className="h-10 w-56 mx-auto rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+          <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white/70 dark:bg-gray-900/70 overflow-hidden">
+            <div className="h-14 border-b border-gray-200 dark:border-gray-800 bg-gray-100/70 dark:bg-gray-800/70 animate-pulse" />
+            <div className="p-4 space-y-3">
+              <div className="h-4 w-11/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-10/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-8/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-9/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-4 w-7/12 rounded bg-gray-200/70 dark:bg-gray-800/70 animate-pulse" />
+              <div className="h-48 rounded bg-gray-100/70 dark:bg-gray-800/50 animate-pulse" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <React.Suspense fallback={null}>
+          <LazyCodeExampleCardImpl {...props} />
+        </React.Suspense>
+      )}
+    </div>
+  )
+}