Move SSR preloading into separate dep, cleanup font loading

app.config.ts

@@ -16,7 +16,8 @@ import remarkCaptions from "remark-captions";
 import remarkGfm from "remark-gfm";
 import { parseDelimitedString } from "./src/util/parseDelimitedString";
 import tsconfig from "./tsconfig.json";
-import { ssrBabelPlugin } from "./vite/ssrBabelPlugin";
+// import { ssrBabelPlugin } from "./vite/ssrBabelPlugin";
+import SSPreloadBabel from "solid-start-preload/babel";
 import { viteImagePlugin } from "./vite/viteImagePlugin";
 
 // import devtools from "solid-devtools/vite";
@@ -47,7 +48,7 @@ export default defineConfig({
 
   solid: {
     babel: {
-      plugins: [babelPluginLabels, ssrBabelPlugin],
+      plugins: [babelPluginLabels, SSPreloadBabel],
     },
     ...({} as any),
   },

package.json

@@ -22,12 +22,12 @@
     "babel-plugin-transform-remove-imports": "1.7.1",
     "classnames": "2.5.1",
     "cssnano": "6.1.2",
-    "postcss-preset-env": "9.5.8",
+    "postcss-preset-env": "9.5.9",
     "postcss-pxtorem": "6.1.0",
     "rehype-raw": "7.0.0",
     "remark-shiki-twoslash": "3.1.3",
     "sass": "1.75.0",
-    "solid-js": "1.8.16",
+    "solid-js": "1.8.17",
     "solid-labels": "0.16.0",
     "solid-mdx": "0.0.7",
     "tailwindcss": "3.4.3",
@@ -53,6 +53,7 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "solid-devtools": "0.30.1",
+    "solid-start-preload": "1.1.4",
     "ts-node": "10.9.2",
     "vite-plugin-solid-svg": "0.8.1"
   }

src/Article.tsx

@@ -8,7 +8,7 @@ import LazyImage from "~/LazyImage";
 import Spoiler from "~/Spoiler";
 import Icon from "~/components/Icon";
 import IconText from "~/components/IconText";
-import { registerRoute } from "~/registerRoute";
+import { registerRoute } from "solid-start-preload";
 import { getArticles } from "~/ssg/getArticles";
 import { remBase } from "~/style/fluidSizeTS";
 

src/BlogIndex.tsx

@@ -4,7 +4,7 @@ import cn from "classnames";
 import { Component, JSX } from "solid-js";
 import { For } from "solid-js/web";
 import { config } from "~/config";
-import { registerRoute } from "~/registerRoute";
+import { registerRoute } from "solid-start-preload";
 import { getArticles } from "~/ssg/getArticles";
 
 const articles = getArticles();

src/GallerySite.tsx

@@ -2,7 +2,7 @@ import { css } from "@linaria/core";
 import cn from "classnames";
 import { Component, JSX } from "solid-js";
 import DialogImage from "~/DialogImage";
-import { registerRoute } from "~/registerRoute";
+import { registerRoute } from "solid-start-preload";
 import { breakpoint, breakpointUntil } from "~/style/commonStyle";
 
 const images: Component[] = Object.values(

src/Header.tsx

@@ -6,7 +6,7 @@ import { color, heading1Text } from "~/style/commonStyle";
 import { heading1TextHeight } from "~/style/textStylesTS";
 import LogoSVG from "../assets/logo.svg?component-solid";
 import { useLocation } from "@solidjs/router";
-import { registerRoute } from "~/registerRoute";
+import { registerRoute } from "solid-start-preload";
 
 interface Props {
   children?: JSX.Element;

src/about/AboutSite.tsx

@@ -9,7 +9,7 @@ import SnakeGame from "~/about/SnakeGame";
 import StatsBar from "~/about/StatsBar";
 import StatusButton from "~/about/StatusButton";
 import IconText from "~/components/IconText";
-import { registerRoute } from "~/registerRoute";
+import { registerRoute } from "solid-start-preload";
 import { breakpointUntil } from "~/style/commonStyle";
 
 interface Props {

src/app.tsx

@@ -8,7 +8,7 @@ import Header from "~/Header";
 import { routes } from "~/routes";
 import BackgroundImage from "~/BackgroundImage";
 import Footer from "~/Footer";
-import { registerRoute } from "~/registerRoute";
+import { registerRoute } from "solid-start-preload";
 
 export default function App() {
   return (

src/entry-server.tsx

@@ -1,11 +1,10 @@
 // @refresh reload
 import { createHandler, StartServer } from "@solidjs/start/server";
 import { config } from "~/config";
-import { preloadSSR } from "../vite/SSR/SSRPreload";
-import { preloadSSRDev } from "../vite/SSR/SSRPreloadDev";
-
-import { RouteDefinition } from "@solidjs/router";
+import { getRequestEvent } from "solid-js/web";
+import { getManifest } from "vinxi/manifest";
 import { routes } from "~/routes";
+import { preloadStartAssets, warmupRoutes } from "solid-start-preload/server";
 
 const _warn = console.warn;
 console.warn = function (message?: any, ...optionalParams: any[]) {
@@ -27,7 +26,11 @@ export default createHandler(
               />
               <link rel="icon" href={`${config.base}/favicon.ico`} />
               {assets}
-              {import.meta.env.DEV ? preloadSSRDev() : preloadSSR()}
+              {preloadStartAssets({
+                request: getRequestEvent(),
+                manifest: getManifest("client"),
+                ignorePatterns: [/tw\.style.*\.css/, /routes\.tsx/],
+              })}
             </head>
             <body>
               <div id="app" class="flex min-h-[100vh] flex-col">
@@ -40,24 +43,5 @@ export default createHandler(
       />
     );
   },
-  async () => {
-    // recurse through route definitions and preload all components
-    const rec = (route: RouteDefinition): Promise<any>[] => {
-      const ret = [];
-      if (route.component) {
-        ret.push((route.component as any).preload?.());
-      }
-      if (Array.isArray(route.children)) {
-        for (const c of route.children) {
-          ret.push(rec(c));
-        }
-      } else if (route.children) {
-        ret.push(rec(route.children));
-      }
-      return ret;
-    };
-
-    await Promise.all(Object.values(routes).flatMap(rec));
-    return {};
-  }
+  () => warmupRoutes(routes)
 );

src/style/fontFaces.tsx

@@ -7,7 +7,7 @@ const nameSuffix = (isFull: boolean) => (isFull ? "" : " JP Only");
 // Hack linaria can't deal with import.meta, not even with babel
 const base = (process.env.BASE_URL ?? "").replace("/_build", "");
 
-const fontPath = `${base}/fonts`;
+const fontPath = `../../assets/fonts`;
 const notoPath = `${fontPath}/noto-sans-jp-v40`;
 const interPath = `${fontPath}/inter-3.19-roman`;
 

src/style/global.style.tsx

@@ -1,12 +1,10 @@
 import { colorVariablesCSS } from "~/style/colorVariableCSS";
 import {
-  bodyText,
   color,
   heading1Text,
   primaryFontBold,
   primaryFontBoldItalic,
   primaryFontItalic,
-  smallText,
   subText,
   text,
 } from "~/style/commonStyle";