kobaltedev · jer3m01 · Feb 1, 2024 · Dec 14, 2023 · Jan 7, 2024 · Jan 7, 2024
diff --git a/.gitignore b/.gitignore
@@ -23,6 +23,7 @@ lerna-debug.log
 
 # solid
 .solid
+.vinxi
 
 # VSC Settings
 .vscode/settings.json

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -25,45 +25,45 @@
   "author": "Fabien Marie-Louise <[email protected]>",
   "type": "module",
   "scripts": {
-    "build": "solid-start build",
+    "build": "vinxi build",
     "clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "solid-start dev --host",
-    "start": "solid-start start"
+    "dev": "vinxi dev --host",
+    "start": "vinxi start"
   },
   "dependencies": {
     "@docsearch/css": "3.5.2",
     "@docsearch/js": "3.5.2",
     "@kobalte/core": "0.12.1",
-    "@solidjs/meta": "0.28.6",
-    "@solidjs/router": "0.8.3",
+    "@solidjs/meta": "0.29.3",
+    "@solidjs/router": "0.10.6",
     "@tanstack/solid-virtual": "3.0.0-beta.6",
     "clsx": "2.0.0",
-    "solid-js": "1.7.11",
-    "solid-start": "0.3.4",
+    "solid-js": "1.8.8",
+    "@solidjs/start": "0.4.11",
+    "vinxi": "0.1.10",
     "undici": "5.23.0"
   },
   "devDependencies": {
     "@kobalte/tailwindcss": "0.9.0",
-    "@mdx-js/mdx": "2.3.0",
-    "@mdx-js/rollup": "2.3.0",
+    "@mdx-js/mdx": "3.0.0",
+    "@mdx-js/rollup": "3.0.0",
     "@tailwindcss/typography": "0.5.9",
     "acorn": "8.10.0",
     "autoprefixer": "10.4.15",
     "github-slugger": "2.0.0",
     "postcss": "8.4.28",
-    "rehype-pretty-code": "0.10.0",
-    "rehype-raw": "6.1.1",
-    "rehype-slug": "5.1.0",
-    "remark-gfm": "3.0.1",
+    "rehype-pretty-code": "0.12.3",
     "remark-shiki-twoslash": "3.1.3",
-    "shiki": "0.14.3",
-    "solid-mdx": "0.0.6",
-    "solid-start-netlify": "0.3.4",
-    "solid-start-node": "0.3.4",
+    "rehype-raw": "7.0.0",
+    "rehype-slug": "6.0.0",
+    "remark-gfm": "4.0.0",
+    "shiki": "0.14.7",
+    "solid-mdx": "0.0.7",
     "tailwindcss": "3.3.3",
     "typescript": "4.9.5",
     "unist-util-visit": "5.0.0",
-    "vite": "3.2.7"
+    "vite": "5.0.12",
+    "@vinxi/plugin-mdx": "3.7.1"
   },
   "engines": {
     "node": ">=18"

diff --git a/apps/docs/src/root.tsx → apps/docs/src/app.tsx b/apps/docs/src/root.tsx → apps/docs/src/app.tsx
@@ -8,23 +8,14 @@ import {
 	Toast,
 	cookieStorageManagerSSR,
 } from "@kobalte/core";
-import { Suspense, useContext } from "solid-js";
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start";
+import { Suspense } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import { MDXProvider } from "solid-mdx";
-import {
-	Body,
-	ErrorBoundary,
-	FileRoutes,
-	Head,
-	Html,
-	Link,
-	Meta,
-	Routes,
-	Scripts,
-	ServerContext,
-	Title,
-} from "solid-start";
 
+import { getCookie } from "vinxi/server";
 import toastStyles from "./examples/toast.module.css";
 import { mdxComponents } from "./mdx-components";
 
@@ -45,47 +36,30 @@ export const mods = /*#__PURE__*/ import.meta.glob<
 	},
 });
 
-export default function Root() {
-	const event = useContext(ServerContext);
+function getServerCookies() {
+	"use server";
+
+	const colorMode = getCookie("kb-color-mode");
 
+	return colorMode ? `kb-color-mode=${colorMode}` : "";
+}
+
+export default function App() {
 	const storageManager = cookieStorageManagerSSR(
-		isServer ? event?.request.headers.get("cookie") ?? "" : document.cookie,
+		isServer ? getServerCookies() : document.cookie,
 	);
 
 	return (
-		<Html lang="en">
-			<Head>
-				<Title>Kobalte</Title>
-				<Meta charset="utf-8" />
-				<Meta name="viewport" content="width=device-width, initial-scale=1" />
-				<Link
-					rel="apple-touch-icon"
-					sizes="180x180"
-					href="/apple-touch-icon.png"
-				/>
-				<Link
-					rel="icon"
-					type="image/png"
-					sizes="32x32"
-					href="/favicon-32x32.png"
-				/>
-				<Link
-					rel="icon"
-					type="image/png"
-					sizes="16x16"
-					href="/favicon-16x16.png"
-				/>
-				<Link rel="manifest" href="/site.webmanifest" />
-			</Head>
-			<Body>
-				<ErrorBoundary>
-					<ColorModeScript storageType={storageManager.type} />
-					<Suspense>
+		<Router
+			root={(props) => (
+				<Suspense>
+					<MetaProvider>
+						<Title>Kobalte</Title>
+						<ColorModeScript storageType={storageManager.type} />
 						<ColorModeProvider storageManager={storageManager}>
 							<MDXProvider components={mdxComponents}>
-								<Routes>
-									<FileRoutes />
-								</Routes>
+								{props.children}
+
 								<Portal>
 									<Toast.Region>
 										<Toast.List class={toastStyles.toast__list} />
@@ -98,10 +72,11 @@ export default function Root() {
 								</Portal>
 							</MDXProvider>
 						</ColorModeProvider>
-					</Suspense>
-				</ErrorBoundary>
-				<Scripts />
-			</Body>
-		</Html>
+					</MetaProvider>
+				</Suspense>
+			)}
+		>
+			<FileRoutes />
+		</Router>
 	);
 }
diff --git a/apps/docs/src/components/footer.tsx b/apps/docs/src/components/footer.tsx
@@ -1,5 +1,3 @@
-import { Link } from "@solidjs/router";
-
 import {
 	DiscordIcon,
 	GitHubIcon,
@@ -14,13 +12,13 @@ export function Footer() {
 				<div class="flex flex-col sm:flex-row items-baseline justify-between gap-4 py-8 md:py-12">
 					<div>
 						<div class="mb-2">
-							<Link
+							<a
 								class="inline-block font-semibold font-display text-xl"
 								href="/"
 							>
 								Kobalte
 								<span class="text-3xl text-sky-600 leading-[0]">.</span>
-							</Link>
+							</a>
 						</div>
 						<div class="text-sm text-gray-600">
 							<span class="text-sm text-zinc-700 mr-4 dark:text-zinc-400">

diff --git a/apps/docs/src/components/header.tsx b/apps/docs/src/components/header.tsx
@@ -1,5 +1,5 @@
 import docsearch from "@docsearch/js";
-import { Link, useMatch } from "@solidjs/router";
+import { useMatch } from "@solidjs/router";
 import { clsx } from "clsx";
 import { onMount } from "solid-js";
 
@@ -38,13 +38,13 @@ export function Header(props: HeaderProps) {
 				<MobileNavigation sections={props.navSections} />
 			</div>
 			<div class="relative flex flex-grow basis-0 items-center space-x-2">
-				<Link
+				<a
 					class="text-zinc-800 dark:text-white/90 font-medium font-display text-xl leading-none"
 					href="/"
 				>
 					Kobalte
 					<span class="text-3xl leading-[0] text-sky-600">.</span>
-				</Link>
+				</a>
 				<span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
 					{LATEST_CORE_VERSION_NAME}
 				</span>
@@ -53,7 +53,7 @@ export function Header(props: HeaderProps) {
 			<div class="relative flex basis-0 justify-end md:flex-grow items-center py-2">
 				<div id="docsearch" class="mx-3.5 flex items-center justify-center" />
 				<div class="hidden lg:flex lg:space-x-1.5 text-sm">
-					<Link
+					<a
 						href="/docs/core/overview/introduction"
 						class={clsx(
 							"px-3 py-2 rounded-md flex items-center justify-center transition",
@@ -63,8 +63,8 @@ export function Header(props: HeaderProps) {
 						)}
 					>
 						Components
-					</Link>
-					<Link
+					</a>
+					<a
 						href={LATEST_CORE_CHANGELOG_URL}
 						class={clsx(
 							"px-3 py-2 rounded-md flex items-center justify-center transition",
@@ -74,17 +74,17 @@ export function Header(props: HeaderProps) {
 						)}
 					>
 						Changelog
-					</Link>
+					</a>
 				</div>
-				<Link
+				<a
 					href="https://github.com/kobaltedev/kobalte"
 					target="_blank"
 					rel="noopener noreferrer"
 					class="p-2.5 mx-2 rounded-md flex items-center justify-center transition rounded text-zinc-700 hover:text-zinc-800 dark:text-zinc-300 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800"
 					aria-label="GitHub"
 				>
 					<GitHubIcon class="h-5 w-5" />
-				</Link>
+				</a>
 				<ThemeSelector />
 			</div>
 		</header>

diff --git a/apps/docs/src/components/layout.tsx b/apps/docs/src/components/layout.tsx
@@ -1,4 +1,4 @@
-import { Link, useLocation } from "@solidjs/router";
+import { useLocation } from "@solidjs/router";
 import { ParentProps, Show } from "solid-js";
 
 import { NavSection } from "../model/navigation";
@@ -41,15 +41,15 @@ export function Layout(props: LayoutProps) {
 									Previous
 								</dt>
 								<dd class="mt-1">
-									<Link
+									<a
 										href={previousPage().href}
 										class="text-base font-semibold text-zinc-500 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-300"
 									>
 										<span aria-hidden="true" class="mr-1">
 											&larr;
 										</span>
 										<span>{previousPage().title}</span>
-									</Link>
+									</a>
 								</dd>
 							</dl>
 						</Show>
@@ -59,15 +59,15 @@ export function Layout(props: LayoutProps) {
 									Next
 								</dt>
 								<dd class="mt-1">
-									<Link
+									<a
 										href={nextPage().href}
 										class="text-base font-semibold text-zinc-500 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-300"
 									>
 										<span>{nextPage().title}</span>
 										<span aria-hidden="true" class="ml-1">
 											&rarr;
 										</span>
-									</Link>
+									</a>
 								</dd>
 							</dl>
 						</Show>

diff --git a/apps/docs/src/components/mobile-navigation.tsx b/apps/docs/src/components/mobile-navigation.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Separator, createDisclosureState } from "@kobalte/core";
-import { Link, useIsRouting, useMatch } from "@solidjs/router";
+import { useIsRouting, useMatch } from "@solidjs/router";
 import { clsx } from "clsx";
 import { ComponentProps, createComputed, splitProps } from "solid-js";
 
@@ -47,13 +47,13 @@ export function MobileNavigation(props: MobileNavigationProps) {
 					<Dialog.Content class="fixed inset-0 z-50 min-h-full overflow-y-auto w-full max-w-xs bg-white px-4 pt-5 pb-12 dark:bg-zinc-900 sm:px-6">
 						<div class="flex items-center">
 							<div class="relative flex flex-grow basis-0 items-center space-x-2">
-								<Link
+								<a
 									class="text-zinc-800 dark:text-white/90 font-medium font-display text-xl leading-none"
 									href="/"
 								>
 									Kobalte
 									<span class="text-3xl leading-[0] text-sky-600">.</span>
-								</Link>
+								</a>
 								<span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
 									{LATEST_CORE_VERSION_NAME}
 								</span>
@@ -68,7 +68,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
 							</button>
 						</div>
 						<div class="flex flex-col items-start lg:hidden pt-4 pb-2 text-sm">
-							<Link
+							<a
 								href="/docs/core/overview/introduction"
 								class={clsx(
 									"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
@@ -78,8 +78,8 @@ export function MobileNavigation(props: MobileNavigationProps) {
 								)}
 							>
 								Components
-							</Link>
-							<Link
+							</a>
+							<a
 								href={LATEST_CORE_CHANGELOG_URL}
 								class={clsx(
 									"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
@@ -89,7 +89,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
 								)}
 							>
 								Changelog
-							</Link>
+							</a>
 						</div>
 						<Separator.Root class="lg:hidden" />
 						<Navigation sections={local.sections} class="mt-5 px-1" />

diff --git a/apps/docs/src/components/navigation.tsx b/apps/docs/src/components/navigation.tsx
@@ -1,4 +1,4 @@
-import { Link, useLocation } from "@solidjs/router";
+import { useLocation } from "@solidjs/router";
 import { clsx } from "clsx";
 import { ComponentProps, For, Match, Switch, splitProps } from "solid-js";
 
@@ -26,7 +26,7 @@ export function Navigation(props: NavigationProps) {
 								<For each={section.links}>
 									{(link) => (
 										<li class="relative group">
-											<Link
+											<a
 												href={link.href}
 												class={clsx(
 													"flex items-center justify-between w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
@@ -48,7 +48,7 @@ export function Navigation(props: NavigationProps) {
 														</span>
 													</Match>
 												</Switch>
-											</Link>
+											</a>
 										</li>
 									)}
 								</For>