feat: update to Vite v5.1.6

swordev · Mar 19, 2024 · 5955579 · 5955579
1 parent 2a6b922
commit 5955579
Show file tree

Hide file tree

Showing 15 changed files with 492 additions and 340 deletions.
diff --git a/.changeset/strong-peas-own.md b/.changeset/strong-peas-own.md
@@ -0,0 +1,6 @@
+---
+"@suid/vite-plugin": minor
+"@suid/site": minor
+---
+
+Update to Vite v5.1.6
diff --git a/package.json b/package.json
@@ -98,9 +98,9 @@
     "solid-testing-library": "^0.5.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0",
-    "vitest": "^0.33.0"
+    "vite": "^5.1.6",
+    "vite-plugin-solid": "^2.10.2",
+    "vitest": "^1.4.0"
   },
   "info": "SUID is all a set of utils and components ported from MUI Core and much more.",
   "x-wspa": {

diff --git a/packages/site/package.json b/packages/site/package.json
@@ -11,8 +11,8 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@solidjs/meta": "^0.28.6",
-    "@solidjs/router": "^0.8.3",
+    "@solidjs/meta": "^0.29.3",
+    "@solidjs/router": "^0.13.1",
     "@stackblitz/sdk": "^1.9.0",
     "@suid/base": "workspace:*",
     "@suid/codemod": "workspace:*",
@@ -34,8 +34,8 @@
     "fast-glob": "^3.3.2",
     "rimraf": "^5.0.5",
     "sass": "^1.72.0",
-    "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0"
+    "vite": "^5.1.6",
+    "vite-plugin-solid": "^2.10.2"
   },
   "publishConfig": {
     "directory": "dist"

diff --git a/packages/site/src/Routing.tsx b/packages/site/src/Routing.tsx
@@ -1,4 +1,4 @@
-import { Route, Routes } from "@solidjs/router";
+import { Route } from "@solidjs/router";
 import { Box, Container, useMediaQuery } from "@suid/material";
 import { useTheme } from "@suid/material/styles";
 import { SxPropsObject } from "@suid/system/sxProps";
@@ -101,7 +101,7 @@ export function Routing() {
     return (
       <Route
         path={path === "/home" ? "/" : path}
-        element={
+        component={() => (
           <Switch fallback={<RoutingElementContainer Component={Component} />}>
             <Match when={path === "/tools/playground"}>
               <></>
@@ -113,22 +113,22 @@ export function Routing() {
               <Component />
             </Match>
           </Switch>
-        }
+        )}
       />
     );
   });
   return (
-    <Routes>
+    <>
       {Children.concat(
         <Route
           path="/*"
-          element={
+          component={() => (
             <RoutingElementContainer fullWidth>
               <ErrorPage title="Page not found." code="404" />
             </RoutingElementContainer>
-          }
+          )}
         />
       )}
-    </Routes>
+    </>
   );
 }
diff --git a/packages/site/src/components/PageNav.tsx b/packages/site/src/components/PageNav.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { useLocation, Link as RouterLink } from "@solidjs/router";
+import { useLocation, A } from "@solidjs/router";
 import NavigateBeforeIcon from "@suid/icons-material/NavigateBefore";
 import NavigateNextIcon from "@suid/icons-material/NavigateNext";
 import { useTheme } from "@suid/material";
@@ -28,22 +28,14 @@ function NavButton(props: {
   if (props.preload && isTouchDevice()) tryPreload(props.href);
   return (
     <Button
-      component={RouterLink}
+      component={A}
       size="large"
       fullWidth={xs()}
       onMouseEnter={tryPreload}
       variant="outlined"
       href={props.href}
-      {...(props.dir === "prev"
-        ? {
-            startIcon: () => <NavigateBeforeIcon />,
-          }
-        : {})}
-      {...(props.dir === "next"
-        ? {
-            endIcon: () => <NavigateNextIcon />,
-          }
-        : {})}
+      startIcon={props.dir === "prev" ? <NavigateBeforeIcon /> : undefined}
+      endIcon={props.dir === "next" ? <NavigateNextIcon /> : undefined}
       sx={{
         p: 2,
         minWidth: 200,
@@ -82,6 +74,8 @@ export default function PageNav(inProps: {
       return nextProp() === "auto" ? navConfigs()?.next : undefined;
     },
   });
+  const prev = () => props.prev as { href: string; text: string };
+  const next = () => props.next as { href: string; text: string };
 
   return (
     <Box sx={props.sx}>
@@ -93,8 +87,8 @@ export default function PageNav(inProps: {
               <NavButton
                 dir="prev"
                 preload={props.preload ?? true}
-                href={props.prev!.href}
-                text={props.prev!.text}
+                href={prev().href}
+                text={prev().text}
               />
             </Show>
           </Grid>
@@ -103,8 +97,8 @@ export default function PageNav(inProps: {
               <NavButton
                 dir="next"
                 preload={props.preload ?? true}
-                href={props.next!.href}
-                text={props.next!.text}
+                href={next().href}
+                text={next().text}
               />
             </Show>
           </Grid>

diff --git a/packages/site/src/index.tsx b/packages/site/src/index.tsx
@@ -1,12 +1,13 @@
 // @refresh
 import { Router } from "@solidjs/router";
 import { render } from "solid-js/web";
+import { Routing } from "./Routing";
 import MainLayout from "./layouts/MainLayout";
 
 render(
   () => (
-    <Router>
-      <MainLayout />
+    <Router root={MainLayout}>
+      <Routing />
     </Router>
   ),
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

diff --git a/packages/site/src/layouts/MainLayout/Header.tsx b/packages/site/src/layouts/MainLayout/Header.tsx
@@ -1,4 +1,4 @@
-import { useLocation, Link as RouterLink } from "@solidjs/router";
+import { useLocation, A } from "@solidjs/router";
 import DarkModeOutlinedIcon from "@suid/icons-material/DarkModeOutlined";
 import LightModeOutlinedIcon from "@suid/icons-material/LightModeOutlined";
 import MenuIcon from "@suid/icons-material/Menu";
@@ -82,7 +82,7 @@ export default function Header() {
           </IconButton>
         </Box>
         <Typography
-          component={RouterLink}
+          component={A}
           variant="h6"
           noWrap
           sx={{ mr: 3, textDecoration: "none", color: "inherit" }}
@@ -100,23 +100,23 @@ export default function Header() {
         >
           <Show when={!hideButtons()}>
             <Button
-              component={RouterLink}
+              component={A}
               color="inherit"
               href="/getting-started/installation"
               onMouseEnter={tryPreload}
             >
               Docs
             </Button>
             <Button
-              component={RouterLink}
+              component={A}
               color="inherit"
               href="/tools/playground"
               onMouseEnter={tryPreload}
             >
               Playground
             </Button>
             <Button
-              component={RouterLink}
+              component={A}
               color="inherit"
               href="/tools/react-to-solid"
               onMouseEnter={tryPreload}

diff --git a/packages/site/src/layouts/MainLayout/MainLayout.tsx b/packages/site/src/layouts/MainLayout/MainLayout.tsx
@@ -14,9 +14,10 @@ import {
   createMemo,
   createSignal,
   ErrorBoundary,
+  JSXElement,
   Show,
 } from "solid-js";
-import { Routing, RoutingElementContainer } from "~/Routing";
+import { RoutingElementContainer } from "~/Routing";
 import Footer from "~/layouts/MainLayout/Footer";
 import ErrorPage from "~/pages/ErrorPage";
 import PlaygroundPage from "~/pages/tools/PlaygroundPage";
@@ -43,7 +44,7 @@ function ErrorFallback(error: Error) {
   }
 }
 
-export default function MainLayout() {
+export default function MainLayout(props: { children?: JSXElement }) {
   const context = createLayoutMutable({
     drawer: {
       width: drawerWidth,
@@ -138,7 +139,7 @@ export default function MainLayout() {
               </RoutingElementContainer>
             </Show>
             <ErrorBoundary fallback={ErrorFallback}>
-              <Routing />
+              {props.children}
             </ErrorBoundary>
           </Box>
         </Box>

diff --git a/packages/site/src/layouts/MainLayout/Nav.tsx b/packages/site/src/layouts/MainLayout/Nav.tsx
@@ -1,4 +1,4 @@
-import { useLocation, Link as RouterLink } from "@solidjs/router";
+import { useLocation, A } from "@solidjs/router";
 import CodeIcon from "@suid/icons-material/Code";
 import EditRoundedIcon from "@suid/icons-material/EditRounded";
 import HandymanIcon from "@suid/icons-material/Handyman";
@@ -346,7 +346,7 @@ function NavLink(props: { text: string; href: string }) {
 
   return (
     <ListItemButton
-      component={RouterLink}
+      component={A}
       selected={selected()}
       sx={{ pl: "45px" }}
       href={props.href}

diff --git a/packages/site/src/pages/HomePage/HomePage.tsx b/packages/site/src/pages/HomePage/HomePage.tsx
@@ -1,4 +1,4 @@
-import { Link as RouterLink } from "@solidjs/router";
+import { A } from "@solidjs/router";
 import CheckBoxIcon from "@suid/icons-material/CheckBox";
 import { useTheme } from "@suid/material";
 import {
@@ -274,7 +274,7 @@ export default function HomePage() {
               }}
             >
               <Button
-                component={RouterLink}
+                component={A}
                 variant="contained"
                 size="large"
                 href="/getting-started/installation"

diff --git a/packages/site/src/utils/stackblitz/template/tsconfig.json.source b/packages/site/src/utils/stackblitz/template/tsconfig.json.source
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "jsx": "preserve",

diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
@@ -32,10 +32,10 @@
   },
   "devDependencies": {
     "esbuild": "^0.20.2",
-    "vite": "^4.4.9"
+    "vite": "^5.1.6"
   },
   "peerDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^5.0.0"
   },
   "publishConfig": {
     "directory": "dist"