Working preloading with custom lazy-plus

shiro · Apr 25, 2024 · 88f7a5c · 88f7a5c
1 parent 60eecd6
commit 88f7a5c
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 89 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -2,14 +2,12 @@ import { defineConfig } from "@solidjs/start/config";
 import path from "node:path";
 import compileTime from "vite-plugin-compile-time";
 import solidSvg from "vite-plugin-solid-svg";
-import { linariaVitePlugin } from "./vite/linariaVitePlugin";
 import tsconfig from "./tsconfig.json";
+import { linariaVitePlugin } from "./vite/linariaVitePlugin";
 import { viteMarkdownPlugin } from "./vite/markdown/viteMarkdownPlugin";
 import { viteImagePlugin } from "./vite/viteImagePlugin";
 // @ts-ignore
-import SSPreloadBabel from "solid-start-preload/babel";
-
-import lazyPlusPlugin from "solid-lazy-plus/vite";
+import babelPluginLazyPlus from "solid-lazy-plus/babel";
 
 const root = process.cwd();
 
@@ -36,7 +34,7 @@ export default defineConfig({
 
   solid: {
     babel: {
-      plugins: [babelPluginLabels, SSPreloadBabel],
+      plugins: [babelPluginLabels, babelPluginLazyPlus],
     },
     ...({} as any),
   },
@@ -51,9 +49,7 @@ export default defineConfig({
       css: { postcss: "./postcss.config.js" },
       server: {
         port: 3000,
-        warmup: {
-          clientFiles: ["./src/app.tsx"],
-        },
+        warmup: { clientFiles: ["./src/app.tsx"] },
       },
       resolve: {
         alias: Object.fromEntries(
@@ -64,7 +60,6 @@ export default defineConfig({
         ),
       },
       plugins: [
-        lazyPlusPlugin({ router: options.router }),
         viteImagePlugin(),
         compileTime(),
         solidSvg(),

diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "@shikijs/core": "1.3.0",
     "@shikijs/rehype": "1.3.0",
     "@shikijs/transformers": "1.3.0",
-    "solid-lazy-plus": "0.1.0",
+    "solid-lazy-plus": "file:./tarballs/solid-lazy-plus.tar.gz",
     "@shikijs/twoslash": "1.3.0",
     "@types/imagemagick": "0.0.35",
     "babel-plugin-transform-define": "2.1.4",
@@ -56,7 +56,6 @@
     "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"
   }

diff --git a/src/Article.tsx b/src/Article.tsx
@@ -8,7 +8,6 @@ import LazyImage from "~/LazyImage";
 import Spoiler from "~/Spoiler";
 import Icon from "~/components/Icon";
 import IconText from "~/components/IconText";
-import { registerRoute } from "solid-start-preload";
 import { getArticles } from "~/ssg/getArticles";
 import { remBase } from "~/style/fluidSizeTS";
 
@@ -202,6 +201,4 @@ const _Article = css`
   // }
 `;
 
-registerRoute({ path: "/articles/*" });
-
 export default Article;
diff --git a/src/BlogIndex.tsx b/src/BlogIndex.tsx
@@ -4,7 +4,6 @@ import cn from "classnames";
 import { Component, JSX } from "solid-js";
 import { For } from "solid-js/web";
 import { config } from "~/config";
-import { registerRoute } from "solid-start-preload";
 import { getArticles } from "~/ssg/getArticles";
 
 const articles = getArticles();
@@ -52,6 +51,4 @@ const BlogIndex: Component<Props> = (props) => {
 
 const _BlogIndex = css``;
 
-registerRoute({ path: "/" });
-
 export default BlogIndex;
diff --git a/src/GallerySite.tsx b/src/GallerySite.tsx
@@ -2,7 +2,6 @@ import { css } from "@linaria/core";
 import cn from "classnames";
 import { Component, JSX } from "solid-js";
 import DialogImage from "~/DialogImage";
-import { registerRoute } from "solid-start-preload";
 import { breakpoint, breakpointUntil } from "~/style/commonStyle";
 
 const images: Component[] = Object.values(
@@ -76,6 +75,4 @@ const card = css`
   }
 `;
 
-registerRoute({ path: "/gallery" });
-
 export default GallerySite;
diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,12 +1,11 @@
 import { css } from "@linaria/core";
+import { useLocation } from "@solidjs/router";
 import cn from "classnames";
 import { Component, JSX, createMemo } from "solid-js";
 import { config } from "~/config";
-import { color, heading1Text } from "~/style/commonStyle";
+import { color } from "~/style/commonStyle";
 import { heading1TextHeight } from "~/style/textStylesTS";
 import LogoSVG from "../assets/logo.svg?component-solid";
-import { useLocation } from "@solidjs/router";
-import { registerRoute } from "solid-start-preload";
 
 interface Props {
   children?: JSX.Element;
@@ -67,6 +66,4 @@ const Logo = css`
   }
 `;
 
-registerRoute({ path: ["/header"] });
-
 export default Header;
diff --git a/src/about/AboutSite.tsx b/src/about/AboutSite.tsx
@@ -9,7 +9,6 @@ import SnakeGame from "~/about/SnakeGame";
 import StatsBar from "~/about/StatsBar";
 import StatusButton from "~/about/StatusButton";
 import IconText from "~/components/IconText";
-import { registerRoute } from "solid-start-preload";
 import { breakpointUntil } from "~/style/commonStyle";
 
 interface Props {
@@ -133,6 +132,4 @@ const _AboutSite = css`
   }
 `;
 
-registerRoute({ path: "/about" });
-
 export default AboutSite;
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,37 +3,42 @@ import "~/style/global.style";
 import { Meta, MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { Suspense } from "solid-js";
-import { config } from "~/config";
-import Header from "~/Header";
-import { routes } from "~/routes";
 import BackgroundImage from "~/BackgroundImage";
 import Footer from "~/Footer";
-import { registerRoute } from "solid-start-preload";
+import Header from "~/Header";
+import { config } from "~/config";
+import { routes } from "~/routes";
+import { lazy } from "solid-lazy-plus";
+
+const Preload = lazy(() => import("./preload"));
 
 export default function App() {
   return (
     <MetaProvider>
       <Router
         base={config.base}
-        root={(props) => (
-          <>
-            <Title>Blog of a programming rabbit</Title>
-            <Meta
-              name="description"
-              content="Matic Utsumi Gačar's blog and portfolio website discussing code, art and life."
-            />
-            <Header />
-            <BackgroundImage />
-            <div class="content-container">
-              <Suspense>{props.children}</Suspense>
-            </div>
-            <Footer />
-          </>
-        )}>
+        root={(props) => {
+          return (
+            <>
+              <Title>Blog of a programming rabbit</Title>
+              <Meta
+                name="description"
+                content="Matic Utsumi Gačar's blog and portfolio website discussing code, art and life."
+              />
+              <Header />
+              <BackgroundImage />
+              <div class="content-container">
+                <Suspense>
+                  <Preload />
+                  {props.children}
+                </Suspense>
+              </div>
+              <Footer />
+            </>
+          );
+        }}>
         {routes}
       </Router>
     </MetaProvider>
   );
 }
-
-registerRoute({ path: "/*" });
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -21,11 +21,6 @@ export default createHandler(() => {
             />
             <link rel="icon" href={`${config.base}/favicon.ico`} />
             {assets}
-            {/* {preloadStartAssets({ */}
-            {/*   request: getRequestEvent(), */}
-            {/*   manifest: getManifest("client"), */}
-            {/*   ignorePatterns: [/tw\.style.*\.css/, /routes\.tsx/], */}
-            {/* })} */}
           </head>
           <body>
             <div id="app" class="flex min-h-[100vh] flex-col">

diff --git a/src/preload.tsx b/src/preload.tsx
@@ -0,0 +1,2 @@
+import "./app";
+export default () => null;
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -1,36 +1,10 @@
-import { MetaContext } from "@solidjs/meta";
 import { Navigate, RouteDefinition } from "@solidjs/router";
-import { useContext } from "solid-js";
-// import { lazy } from "solid-js";
 import { lazy } from "solid-lazy-plus";
 import Article, { isValidArticle } from "~/Article";
 import { config } from "~/config";
 
-const BlogIndex = lazy(() => import("./BlogIndex"));
-//
-// const foo = () => {
-//   return () => {
-//     const c = useContext(MetaContext);
-//     console.log("ctx", c);
-//     return "hi";
-//   };
-// };
-// export const Mlazy = (fn: any) => foo();
-//
-// const BlogIndex = lazy({ MetaContext });
-
-const F = () => {
-  const c = useContext(MetaContext);
-  // console.log("my ctx", c);
-  return (
-    <div>
-      <BlogIndex />
-    </div>
-  );
-};
-
 export const routes: RouteDefinition[] = [
-  { path: "/", component: () => <F /> },
+  { path: "/", component: lazy(() => import("./BlogIndex")) },
   { path: "/gallery", component: lazy(() => import("./GallerySite")) },
   { path: "/about", component: lazy(() => import("./about/AboutSite")) },
   {

diff --git a/tarballs/solid-lazy-plus.tar.gz b/tarballs/solid-lazy-plus.tar.gz
diff --git a/yarn.lock b/yarn.lock
@@ -6749,10 +6749,9 @@ [email protected]:
     "@babel/traverse" "^7.23.2"
     "@babel/types" "^7.23.0"
 
-solid-lazy-plus@0.1.0:
+"solid-lazy-plus@file:./tarballs/solid-lazy-plus.tar.gz":
   version "0.1.0"
-  resolved "https://registry.npmjs.org/solid-lazy-plus/-/solid-lazy-plus-0.1.0.tgz#cd72950b1957089bf1f74a72d14e5fef7c898a47"
-  integrity sha512-2RJCisFEij9UlA3W7XK9FbjoKFg8K4N3zvsY0bX/k8tlQkU7HoiImGWWsu/osveeTwpyu4Qyx069qJj0xrMLbg==
+  resolved "file:./tarballs/solid-lazy-plus.tar.gz#6152a2b5cc1591a9b507dac210bcae7bb2ecbaec"
 
 [email protected]:
   version "0.0.7"
@@ -6775,11 +6774,6 @@ solid-refresh@^0.6.3:
     "@babel/helper-module-imports" "^7.22.15"
     "@babel/types" "^7.23.6"
 
-[email protected]:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/solid-start-preload/-/solid-start-preload-1.1.4.tgz#a492b3b11a55b28f978392c1dde76667324f6d95"
-  integrity sha512-8ojA/pAHLHXy5/+lSGL9Si7KsUTmV0tt9u+Y08SuNDZeK4iW1ljyxqB+gy46sro4Fyi4yhMoE3CXVEcnbi0m0Q==
-
 solid-use@^0.8.0:
   version "0.8.0"
   resolved "https://registry.npmjs.org/solid-use/-/solid-use-0.8.0.tgz#d46258c45edb0f4c621285e0ad1aa6b6a674d79b"