Get @solidjs/meta working

Author: brenelz

packages/solid-router/package.json

@@ -72,6 +72,7 @@
   "dependencies": {
     "@solid-devtools/logger": "^0.9.4",
     "@solid-primitives/refs": "^1.0.8",
+    "@solidjs/meta": "^0.29.4",
     "@tanstack/history": "workspace:*",
     "@tanstack/router-core": "workspace:*",
     "@tanstack/solid-store": "^0.7.0",

packages/solid-router/src/Asset.tsx

@@ -1,15 +1,16 @@
+import { Meta, Style, Title } from '@solidjs/meta'
 import type { RouterManagedTag } from '@tanstack/router-core'
 
 export function Asset({ tag, attrs, children }: RouterManagedTag): any {
   switch (tag) {
     case 'title':
-      return <title {...attrs}>{children}</title>
+      return <Title {...attrs}>{children}</Title>
     case 'meta':
-      return <meta {...attrs} />
+      return <Meta {...attrs} />
     case 'link':
       return <link {...attrs} />
     case 'style':
-      return <style {...attrs} innerHTML={children} />
+      return <Style {...attrs} innerHTML={children} />
     case 'script':
       if ((attrs as any) && (attrs as any).src) {
         return <script {...attrs} />

packages/solid-router/src/HeadContent.tsx

@@ -1,5 +1,6 @@
 import * as Solid from 'solid-js'
 import { useAssets } from 'solid-js/web'
+import { MetaProvider } from '@solidjs/meta'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
@@ -56,7 +57,7 @@ export const useTags = () => {
     resultMeta.reverse()
 
     return resultMeta
-  }, [routeMeta])
+  })
 
   const links = useRouterState({
     select: (state) =>
@@ -112,17 +113,18 @@ export const useTags = () => {
       })),
   })
 
-  return uniqBy(
-    [
-      ...meta(),
-      ...preloadMeta(),
-      ...links(),
-      ...headScripts(),
-    ] as Array<RouterManagedTag>,
-    (d) => {
-      return JSON.stringify(d)
-    },
-  )
+  return () =>
+    uniqBy(
+      [
+        ...meta(),
+        ...preloadMeta(),
+        ...links(),
+        ...headScripts(),
+      ] as Array<RouterManagedTag>,
+      (d) => {
+        return JSON.stringify(d)
+      },
+    )
 }
 
 /**
@@ -131,12 +133,26 @@ export const useTags = () => {
  */
 export function HeadContent() {
   const tags = useTags()
-  return tags.map((tag) => <Asset {...tag} />)
+  return (
+    <MetaProvider>
+      {tags().map((tag) => (
+        <Asset {...tag} />
+      ))}
+    </MetaProvider>
+  )
 }
 
 export function ServerHeadContent() {
   const tags = useTags()
-  useAssets(() => tags.map((tag) => <Asset {...tag} />))
+  useAssets(() => {
+    return (
+      <MetaProvider>
+        {tags().map((tag) => (
+          <Asset {...tag} />
+        ))}
+      </MetaProvider>
+    )
+  })
   return null
 }
 

packages/solid-start-client/src/StartClient.tsx

@@ -1,4 +1,4 @@
-import { Await, RouterProvider } from '@tanstack/solid-router'
+import { Await, HeadContent, RouterProvider } from '@tanstack/solid-router'
 import { hydrate } from './ssr-client'
 import type { AnyRouter } from '@tanstack/solid-router'
 import type { JSXElement } from 'solid-js'
@@ -25,7 +25,10 @@ export function StartClient(props: { router: AnyRouter }) {
               router={props.router}
               InnerWrap={(props) => (
                 <Dummy>
-                  <Dummy>{props.children}</Dummy>
+                  <Dummy>
+                    <HeadContent />
+                    {props.children}
+                  </Dummy>
                   <Dummy />
                 </Dummy>
               )}

packages/solid-start-server/package.json

@@ -62,6 +62,7 @@
     "node": ">=12"
   },
   "dependencies": {
+    "@solidjs/meta": "^0.29.4",
     "@tanstack/history": "workspace:^",
     "@tanstack/router-core": "workspace:^",
     "@tanstack/solid-router": "workspace:^",
@@ -73,11 +74,11 @@
     "unctx": "^2.4.1"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.2",
     "@types/jsesc": "^3.0.3",
     "esbuild": "^0.25.0",
     "solid-js": "^1.0.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vite-plugin-solid": "^2.11.2"
   },
   "peerDependencies": {
     "solid-js": "^1.0.0"

packages/solid-start-server/src/StartServer.tsx

@@ -5,6 +5,7 @@ import {
 } from '@tanstack/solid-router'
 import { Hydration, HydrationScript, NoHydration, ssr } from 'solid-js/web'
 import type { AnyRouter } from '@tanstack/solid-router'
+import { MetaProvider, Title } from '@solidjs/meta'
 
 const docType = ssr('<!DOCTYPE html>')
 
@@ -24,9 +25,11 @@ export function StartServer<TRouter extends AnyRouter>(props: {
               router={props.router}
               InnerWrap={(props) => (
                 <NoHydration>
-                  <ServerHeadContent />
-                  <Hydration>{props.children}</Hydration>
-                  <Scripts />
+                  <MetaProvider>
+                    <ServerHeadContent />
+                    <Hydration>{props.children}</Hydration>
+                    <Scripts />
+                  </MetaProvider>
                 </NoHydration>
               )}
             />