QwikDev · wmertens · Oct 31, 2025 · Oct 18, 2025 · Oct 18, 2025 · Oct 18, 2025
@@ -1,11 +1,7 @@
 import { createPlaygroundShareUrl } from './repl-share-url';
 import type { ReplAppInput } from '../types';
 
-export const ReplCommands = ({
-  input,
-  enableCopyToPlayground,
-  enableDownload,
-}: ReplCommandProps) => {
+export const ReplCommands = ({ input, enableCopyToPlayground }: ReplCommandProps) => {
   return (
     <div class="repl-commands">
       {enableCopyToPlayground ? (

@@ -1,8 +1,8 @@
-import { component$, useContextProvider, useStore } from '@qwik.dev/core';
+import { component$, untrack, useContextProvider, useStore } from '@qwik.dev/core';
 import { Insights } from '@qwik.dev/core/insights';
 import {
+  DocumentHeadTags,
   RouterOutlet,
-  ServiceWorkerRegister,
   useDocumentHead,
   useLocation,
   useQwikRouter,
@@ -52,6 +52,7 @@ export default component$(() => {
   useQwikRouter();
   const head = useDocumentHead();
   const { url } = useLocation();
+  const href = head.frontmatter?.canonical || untrack(() => url.href);
 
   const store = useStore<SiteStore>({
     headerMenuOpen: false,
@@ -108,9 +109,8 @@ export default component$(() => {
       <head>
         <meta charset="utf-8" />
 
-        <title>{title}</title>
         <meta name="description" content={description} />
-        <link rel="canonical" href={head.frontmatter?.canonical || url.href} />
+        <link rel="canonical" href={href} />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="apple-mobile-web-app-title" content="Qwik" />
         <meta name="application-name" content="Qwik" />
@@ -123,36 +123,20 @@ export default component$(() => {
 
         {import.meta.env.PROD && (
           <>
-            <Social title={title} description={description} href={url.href} ogImage={OGImage.URL} />
+            <Social title={title} description={description} href={href} ogImage={OGImage.URL} />
             <Vendor />
           </>
         )}
 
-        {/* The below are tags that were collected from all the `head` exports in the current route. */}
-        {head.meta
+        <DocumentHeadTags
+          title={title}
           // Skip description because that was already added at the top
-          .filter((s) => s.name !== 'description')
-          .map((m, key) => (
-            <meta key={key} {...m} />
-          ))}
-
-        {head.links.map((l, key) => (
-          <link key={key} {...l} />
-        ))}
-
-        {head.styles.map((s, key) => (
-          <style key={key} {...s.props} dangerouslySetInnerHTML={s.style} />
-        ))}
-
-        {head.scripts.map((s, key) => (
-          <script key={key} {...s.props} dangerouslySetInnerHTML={s.script} />
-        ))}
+          meta={head.meta.filter((s) => s.name !== 'description')}
+        />
 
         <InjectThemeScript />
         <script dangerouslySetInnerHTML={uwu} />
 
-        <ServiceWorkerRegister />
-
         <script dangerouslySetInnerHTML={`(${collectSymbols})()`} />
         <Insights />
       </head>

@@ -726,7 +726,7 @@
         }
       ],
       "kind": "Variable",
-      "content": "This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component.\n\n\n```typescript\nQwikRouterProvider: import(\"@qwik.dev/core\").Component<QwikRouterProps>\n```",
+      "content": "This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component, unless you have a good reason to make your root component reactive.\n\n\n```typescript\nQwikRouterProvider: import(\"@qwik.dev/core\").Component<QwikRouterProps>\n```",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-router/src/runtime/src/qwik-router-component.tsx",
       "mdFile": "router.qwikrouterprovider.md"
     },

@@ -1796,7 +1796,7 @@ Default: `true`
 
 ## QwikRouterProvider
 
-This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component.
+This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component, unless you have a good reason to make your root component reactive.
 
 ```typescript
 QwikRouterProvider: import("@qwik.dev/core").Component<QwikRouterProps>;

@@ -7,7 +7,6 @@ import type {
   RouteLocation,
   RouteNavigate,
   RoutePreventNavigate,
-  RouteStateInternal,
 } from './types';
 
 export const RouteStateContext =
@@ -25,8 +24,5 @@ export const RouteNavigateContext = /*#__PURE__*/ createContextId<RouteNavigate>
 
 export const RouteActionContext = /*#__PURE__*/ createContextId<RouteAction>('qc-a');
 
-export const RouteInternalContext =
-  /*#__PURE__*/ createContextId<Signal<RouteStateInternal>>('qc-ir');
-
 export const RoutePreventNavigateContext =
   /*#__PURE__*/ createContextId<RoutePreventNavigate>('qc-p');