From 88f7a5c7ef0a083c54c9a457f54428cb12bc7cc6 Mon Sep 17 00:00:00 2001 From: shiro Date: Thu, 25 Apr 2024 15:57:03 +0900 Subject: [PATCH] Working preloading with custom lazy-plus --- app.config.ts | 13 +++------ package.json | 3 +- src/Article.tsx | 3 -- src/BlogIndex.tsx | 3 -- src/GallerySite.tsx | 3 -- src/Header.tsx | 7 ++--- src/about/AboutSite.tsx | 3 -- src/app.tsx | 47 ++++++++++++++++++-------------- src/entry-server.tsx | 5 ---- src/preload.tsx | 2 ++ src/routes.tsx | 28 +------------------ tarballs/solid-lazy-plus.tar.gz | Bin 0 -> 81609 bytes yarn.lock | 10 ++----- 13 files changed, 38 insertions(+), 89 deletions(-) create mode 100644 src/preload.tsx create mode 100644 tarballs/solid-lazy-plus.tar.gz diff --git a/app.config.ts b/app.config.ts index bd1af6d..ab13f48 100644 --- 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 index 163650b..29f1e4e 100644 --- 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 index 4fa001d..01abc7e 100644 --- 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 index 185ecb3..9faa5ef 100644 --- 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) => { const _BlogIndex = css``; -registerRoute({ path: "/" }); - export default BlogIndex; diff --git a/src/GallerySite.tsx b/src/GallerySite.tsx index c9f4153..9e88ad5 100644 --- 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 index c4b7eef..41b7404 100644 --- 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 index 9c23341..e4686bc 100644 --- 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 index 834092c..925490a 100644 --- 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 ( ( - <> - Blog of a programming rabbit - -
- -
- {props.children} -
-