chore: update to latest solid & solid start

kobaltedev · Jan 7, 2024 · 11fe556 · 11fe556
1 parent bce07a2
commit 11fe556
Show file tree

Hide file tree

Showing 19 changed files with 6,615 additions and 9,294 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -25,45 +25,43 @@
   "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.11.2",
-    "@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.4",
+    "vinxi": "0.1.1",
     "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",
-    "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-pretty-code": "0.12.3",
+    "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.11"
   },
   "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
@@ -3,22 +3,12 @@ import "@docsearch/css";
 import "./root.css";
 
 import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR, Toast } from "@kobalte/core";
-import { Suspense, useContext } from "solid-js";
+import { MetaProvider, Title } from "@solidjs/meta";
+import { Navigate, Route, Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start";
+import { Suspense } from "solid-js";
 import { isServer, Portal } 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 toastStyles from "./examples/toast.module.css";
 import { mdxComponents } from "./mdx-components";
@@ -40,33 +30,32 @@ export const mods = /*#__PURE__*/ import.meta.glob<
   },
 });
 
-export default function Root() {
-  const event = useContext(ServerContext);
+// Works on server but breaks client.
+//
+//async function getServerCookies() {
+//  if (!isServer) throw "getServerCookies should only be called on the server";
+//
+//  const getRequestHeaders = (await import("@solidjs/start/server")).getRequestHeaders;
+//
+//  return getRequestHeaders(getRequestEvent()).cookie ?? "";
+//}
 
+export default function App() {
   const storageManager = cookieStorageManagerSSR(
-    isServer ? event?.request.headers.get("cookie") ?? "" : document.cookie,
+    isServer ? /*await 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"]} />
@@ -77,10 +66,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, OpenCollectiveIcon, TwitterIcon } from "./icons";
 
 export function Footer() {
@@ -9,10 +7,10 @@ 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 class="inline-block font-semibold font-display text-xl" href="/">
+              <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";
 
@@ -35,13 +35,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>
@@ -50,7 +50,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",
@@ -60,8 +60,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",
@@ -71,17 +71,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";
@@ -40,31 +40,31 @@ 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>
             <Show when={nextPage()}>
               <dl class="ml-auto text-right">
                 <dt class="font-display text-sm font-medium text-zinc-900 dark:text-white">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 { createDisclosureState, Dialog, Separator } 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";
 
@@ -35,13 +35,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>
@@ -56,7 +56,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",
@@ -66,8 +66,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",
@@ -77,7 +77,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, splitProps, Switch } 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>