From fec4f7758ff1f84fa9080135c6774d89964fa597 Mon Sep 17 00:00:00 2001 From: jingjing2222 Date: Fri, 21 Feb 2025 11:36:14 +0900 Subject: [PATCH 1/2] chore: Install @tanstack-query solid-router version 0.14.10 prevents the direct usage of useQuery in route components. Data prefetching or alternative strategies may be needed --- packages/console/package.json | 5 +++-- pnpm-lock.yaml | 30 ++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/packages/console/package.json b/packages/console/package.json index afe42e4c..44f2c8b5 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -57,7 +57,8 @@ "valibot": "^0.42.1" }, "dependencies": { - "@hot-updater/core": "0.11.0", - "@hot-updater/plugin-core": "0.11.0" + "@hot-updater/core": "0.10.1", + "@hot-updater/plugin-core": "0.10.1", + "@tanstack/solid-query": "^5.66.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 21fed874..5ff40ce1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -458,6 +458,9 @@ importers: '@hot-updater/plugin-core': specifier: workspace:* version: link:../../plugins/plugin-core + '@tanstack/solid-query': + specifier: ^5.66.4 + version: 5.66.4(solid-js@1.9.3) devDependencies: '@biomejs/biome': specifier: ^1.9.4 @@ -4752,11 +4755,19 @@ packages: '@tanstack/form-core@0.34.1': resolution: {integrity: sha512-W8xRWcvlK5oek9V/JPblUyBf/cRb06nxqJTdEf7wZ6HxPnB0V9nNwZlWxvSfkMrbSkV+/H972Evy3cVc6WBB7g==} + '@tanstack/query-core@5.66.4': + resolution: {integrity: sha512-skM/gzNX4shPkqmdTCSoHtJAPMTtmIJNS0hE+xwTTUVYwezArCT34NMermABmBVUg5Ls5aiUXEDXfqwR1oVkcA==} + '@tanstack/solid-form@0.34.1': resolution: {integrity: sha512-sZBc8HbFI0oaf7wZzkeMFNEj7CUbU0lU4I3ufQ/ovlTMXcjXPRJ+rgfu/nrq83/DzRlfSbIoPv1efeMUKUx3cQ==} peerDependencies: solid-js: ^1.6.0 + '@tanstack/solid-query@5.66.4': + resolution: {integrity: sha512-j+ZvYTvEeOaSU72VBQPGsGq6Qiy0cRvtZPretI13ZRxdAAhrKVw+y8l161USfgWOMGzJ4Dlq9ZVlYYhvdsX06A==} + peerDependencies: + solid-js: ^1.6.0 + '@tanstack/solid-store@0.5.6': resolution: {integrity: sha512-YvRT++wB4keAnI67mlxB7FNoT9kI5+2zylDZA0b33bauOwhxVugHVvNv+tUwXCly/8G8kY8EE0peN9Wcv5vhVA==} peerDependencies: @@ -17129,7 +17140,7 @@ snapshots: '@swc-node/sourcemap-support': 0.5.1 '@swc/core': 1.7.42(@swc/helpers@0.5.15) colorette: 2.0.20 - debug: 4.3.7 + debug: 4.4.0 oxc-resolver: 1.12.0 pirates: 4.0.6 tslib: 2.8.1 @@ -17213,12 +17224,19 @@ snapshots: dependencies: '@tanstack/store': 0.5.5 + '@tanstack/query-core@5.66.4': {} + '@tanstack/solid-form@0.34.1(solid-js@1.9.3)': dependencies: '@tanstack/form-core': 0.34.1 '@tanstack/solid-store': 0.5.6(solid-js@1.9.3) solid-js: 1.9.3 + '@tanstack/solid-query@5.66.4(solid-js@1.9.3)': + dependencies: + '@tanstack/query-core': 5.66.4 + solid-js: 1.9.3 + '@tanstack/solid-store@0.5.6(solid-js@1.9.3)': dependencies: '@tanstack/store': 0.5.5 @@ -18046,7 +18064,7 @@ snapshots: agent-base@7.1.1: dependencies: - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color optional: true @@ -20532,7 +20550,7 @@ snapshots: http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.1 - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color optional: true @@ -20562,7 +20580,7 @@ snapshots: https-proxy-agent@7.0.5: dependencies: agent-base: 7.1.1 - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color optional: true @@ -24953,7 +24971,7 @@ snapshots: spdy-transport@3.0.0: dependencies: - debug: 4.3.7 + debug: 4.4.0 detect-node: 2.1.0 hpack.js: 2.1.6 obuf: 1.1.2 @@ -24965,7 +24983,7 @@ snapshots: spdy@4.0.2: dependencies: - debug: 4.3.7 + debug: 4.4.0 handle-thing: 2.0.1 http-deceiver: 1.2.7 select-hose: 2.0.0 From d6d2b15803728b05549654fd86d38980019fe024 Mon Sep 17 00:00:00 2001 From: jingjing2222 Date: Fri, 21 Feb 2025 11:36:50 +0900 Subject: [PATCH 2/2] feat: feat: Improve UX(Screen flickering) 1. Splash screen displayed only on initial application entry. 2. Minimized data fetching frequency and eliminated visual flickering using @tanstack/solid-query's query key feature. --- packages/console/package.json | 6 +- packages/console/src/App.tsx | 34 +++--- packages/console/src/components/ui/layout.tsx | 21 ++++ packages/console/src/routes/index.tsx | 103 ++++++++---------- pnpm-lock.yaml | 6 +- 5 files changed, 95 insertions(+), 75 deletions(-) create mode 100644 packages/console/src/components/ui/layout.tsx diff --git a/packages/console/package.json b/packages/console/package.json index 44f2c8b5..b937c9ac 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -35,6 +35,7 @@ "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.14.10", "@tanstack/solid-form": "^0.34.0", + "@tanstack/solid-query": "^5.66.4", "@tanstack/solid-table": "^8.20.5", "@tanstack/valibot-form-adapter": "^0.34.0", "@types/node": "^22.8.6", @@ -57,8 +58,7 @@ "valibot": "^0.42.1" }, "dependencies": { - "@hot-updater/core": "0.10.1", - "@hot-updater/plugin-core": "0.10.1", - "@tanstack/solid-query": "^5.66.4" + "@hot-updater/core": "0.11.0", + "@hot-updater/plugin-core": "0.11.0" } } diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index d6d0c25a..646502ad 100644 --- a/packages/console/src/App.tsx +++ b/packages/console/src/App.tsx @@ -1,23 +1,29 @@ import { MetaProvider, Title } from "@solidjs/meta"; import { Route, Router } from "@solidjs/router"; -import { Suspense } from "solid-js"; import "./App.css"; -import { Toaster } from "./components/ui/sonner"; +import { SplashScreen } from "@/components/spash-screen"; +import Layout from "@/components/ui/layout"; +import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"; +import { Suspense } from "solid-js"; import Home from "./routes"; +const queryClient = new QueryClient(); export default function App() { return ( - ( - - HotUpdater Console - {props.children} - - - )} - > - - - + + ( + + HotUpdater Console + }> + {props.children} + + + )} + > + + + + ); } diff --git a/packages/console/src/components/ui/layout.tsx b/packages/console/src/components/ui/layout.tsx new file mode 100644 index 00000000..4b10a2cb --- /dev/null +++ b/packages/console/src/components/ui/layout.tsx @@ -0,0 +1,21 @@ +import logo from "@/assets/logo.png"; +import type { JSX } from "solid-js"; + +export default function Layout({ children }: { children: JSX.Element }) { + return ( +
+
+ Hot Updater Console + + Hot Updater Console + +
+ {children} +
+ ); +} diff --git a/packages/console/src/routes/index.tsx b/packages/console/src/routes/index.tsx index 85074314..9cd1fc56 100644 --- a/packages/console/src/routes/index.tsx +++ b/packages/console/src/routes/index.tsx @@ -1,16 +1,12 @@ -import logo from "@/assets/logo.png"; - -import { SplashScreen } from "@/components/spash-screen"; - -import { useNavigate, useParams } from "@solidjs/router"; - import { Sheet } from "@/components/ui/sheet"; import { api } from "@/lib/api"; +import { useNavigate, useParams } from "@solidjs/router"; +import { createQuery, useQueryClient } from "@tanstack/solid-query"; +import { createMemo } from "solid-js"; import { Show, Suspense, createEffect, - createResource, createSignal, useTransition, } from "solid-js"; @@ -21,12 +17,16 @@ import { EditBundleSheetContent } from "./_components/edit-bundle-sheet-content" export default function Home() { const params = useParams(); const navigate = useNavigate(); + const queryClient = useQueryClient(); const bundleId = params.bundleId; - const [data, { refetch }] = createResource(() => - api.getBundles.$get().then((res) => res.json()), - ); + const data = createQuery(() => ({ + queryKey: ["getBundles"], + queryFn: () => { + return api.getBundles.$get().then((res) => res.json()); + }, + })); const [selectedBundleId, setSelectedBundleId] = createSignal( bundleId, @@ -42,52 +42,45 @@ export default function Home() { navigate(`/${selectedBundleId()}`, { replace: true }); }); - return ( - }> -
-
- Hot Updater Console - - Hot Updater Console - -
+ const dataForTable = createMemo(() => data.data || []); - { - start(() => { - setSelectedBundleId(row.id); - }); - }} - /> + const handleClose = () => { + start(() => { + setSelectedBundleId(null); + queryClient.invalidateQueries({ queryKey: ["getBundles"] }); + }); + }; + + return ( + <> + { + start(() => { + setSelectedBundleId(row.id); + }); + }} + /> - - !open && start(() => setSelectedBundleId(null)) - } - > - - - - start(() => { - setSelectedBundleId(null); - refetch(); - }) - } - /> - - - -
- + + !open && + start(() => { + setSelectedBundleId(null); + }) + } + > + + + + + + + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ff40ce1..19abcc5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -458,9 +458,6 @@ importers: '@hot-updater/plugin-core': specifier: workspace:* version: link:../../plugins/plugin-core - '@tanstack/solid-query': - specifier: ^5.66.4 - version: 5.66.4(solid-js@1.9.3) devDependencies: '@biomejs/biome': specifier: ^1.9.4 @@ -492,6 +489,9 @@ importers: '@tanstack/solid-form': specifier: ^0.34.0 version: 0.34.1(solid-js@1.9.3) + '@tanstack/solid-query': + specifier: ^5.66.4 + version: 5.66.4(solid-js@1.9.3) '@tanstack/solid-table': specifier: ^8.20.5 version: 8.20.5(solid-js@1.9.3)