trafficcue/trafficcue-client
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: code-split the sidebar
Some checks failed
TrafficCue CI / check (push) Failing after 33s
Details
TrafficCue CI / build (push) Failing after 34s
Details

Browse Source
This commit is contained in:
Jannik
2025-08-30 12:51:37 +02:00
parent 03b129f947
commit 036a61aac8
4 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
bun.lock
View File

@ -49,7 +49,7 @@
"git-format-staged": "^3.1.1",
"husky": "^9.1.7",
"prettier-plugin-svelte": "^3.4.0",
"svelte": "^5.34.7",
"svelte": "^5.38.6",
"svelte-check": "^4.1.6",
"tailwind-merge": "^3.0.2",
"tailwind-variants": "^1.0.0",
@ -202,6 +202,8 @@
"@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
"@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
"@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
"@jridgewell/set-array": ["@jridgewell/set-array@1.2.1", "", {}, "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="],
@ -586,7 +588,7 @@
"esquery": ["esquery@1.6.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg=="],
"esrap": ["esrap@1.4.9", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } }, "sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g=="],
"esrap": ["esrap@2.1.0", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } }, "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA=="],
"esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
@ -974,7 +976,7 @@
"supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
"svelte": ["svelte@5.34.7", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^1.4.8", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-5PEg+QQKce4t1qiOtVUhUS3AQRTtxJyGBTpxLcNWnr0Ve8q4r06bMo0Gv8uhtCPWlztZHoi3Ye7elLhu+PCTMg=="],
"svelte": ["svelte@5.38.6", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-ltBPlkvqk3bgCK7/N323atUpP3O3Y+DrGV4dcULrsSn4fZaaNnOmdplNznwfdWclAgvSr5rxjtzn/zJhRm6TKg=="],
"svelte-check": ["svelte-check@4.2.1", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-e49SU1RStvQhoipkQ/aonDhHnG3qxHSBtNfBRb9pxVXoa+N7qybAo32KgA9wEb2PCYFNaDg7bZCdhLD1vHpdYA=="],

2
package.json
View File

@ -17,7 +17,7 @@
"git-format-staged": "^3.1.1",
"husky": "^9.1.7",
"prettier-plugin-svelte": "^3.4.0",
"svelte": "^5.34.7",
"svelte": "^5.38.6",
"svelte-check": "^4.1.6",
"tailwind-merge": "^3.0.2",
"tailwind-variants": "^1.0.0",

61
src/lib/components/lnv/Sidebar.svelte
View File

@ -1,12 +1,7 @@
<script lang="ts">
import { type Component } from "svelte";
import InvalidSidebar from "./sidebar/InvalidSidebar.svelte";
import { searchbar, view } from "./view.svelte";
import MainSidebar from "./sidebar/MainSidebar.svelte";
import InfoSidebar from "./sidebar/InfoSidebar.svelte";
import RouteSidebar from "./sidebar/RouteSidebar.svelte";
import { map } from "./map.svelte";
import TripSidebar from "./sidebar/TripSidebar.svelte";
import Input from "../ui/input/input.svelte";
import {
EllipsisIcon,
@ -16,9 +11,7 @@
} from "@lucide/svelte";
import Button from "../ui/button/button.svelte";
import { search, type Feature } from "$lib/services/Search";
import SearchSidebar from "./sidebar/SearchSidebar.svelte";
import RequiresCapability from "./RequiresCapability.svelte";
import UserSidebar from "./sidebar/UserSidebar.svelte";
import {
advertiseRemoteLocation,
location,
@ -27,30 +20,24 @@
import * as Popover from "../ui/popover";
import { routing } from "$lib/services/navigation/routing.svelte";
import InRouteSidebar from "./sidebar/InRouteSidebar.svelte";
import SettingsSidebar from "./sidebar/settings/SettingsSidebar.svelte";
import AboutSidebar from "./sidebar/settings/AboutSidebar.svelte";
import OfflineMapsSidebar from "./sidebar/settings/OfflineMapsSidebar.svelte";
import DeveloperSidebar from "./sidebar/settings/DeveloperSidebar.svelte";
import { m } from "$lang/messages";
import LanguageSidebar from "./sidebar/settings/LanguageSidebar.svelte";
import OnboardingSidebar from "./sidebar/onboarding/OnboardingSidebar.svelte";
import OnboardingVehiclesSidebar from "./sidebar/onboarding/OnboardingVehiclesSidebar.svelte";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const views: Record<string, Component<any>> = {
main: MainSidebar,
info: InfoSidebar,
route: RouteSidebar,
trip: TripSidebar,
search: SearchSidebar,
user: UserSidebar,
settings: SettingsSidebar,
about: AboutSidebar,
"offline-maps": OfflineMapsSidebar,
"dev-options": DeveloperSidebar,
language: LanguageSidebar,
onboarding: OnboardingSidebar,
"onboarding-vehicles": OnboardingVehiclesSidebar,
import LoadingSidebar from "./sidebar/LoadingSidebar.svelte";
const views: Record<string, string> = {
main: "MainSidebar",
info: "InfoSidebar",
route: "RouteSidebar",
trip: "TripSidebar",
search: "SearchSidebar",
user: "UserSidebar",
settings: "settings/SettingsSidebar",
about: "settings/AboutSidebar",
"offline-maps": "settings/OfflineMapsSidebar",
"dev-options": "settings/DeveloperSidebar",
language: "settings/LanguageSidebar",
onboarding: "onboarding/OnboardingSidebar",
"onboarding-vehicles": "onboarding/OnboardingVehiclesSidebar",
};
let isDragging = false;
@ -58,7 +45,21 @@
let startHeight = 0;
let sidebarHeight = $state(200);
let CurrentView = $derived(views[view.current.type] || InvalidSidebar);
let CurrentView: Component = $state(LoadingSidebar);
const modules = import.meta.glob("./sidebar/**/*.svelte");
$effect(() => {
const path = modules[`./sidebar/${views[view.current.type] || "InvalidSidebar"}.svelte`];
if (!path) {
// Invalid view
import("./sidebar/InvalidSidebar.svelte").then((m) => {
CurrentView = m.default;
});
return;
}
path().then((m) => {
CurrentView = (m as { default: Component }).default;
});
});
function debounce<T>(getter: () => T, delay: number): () => T | undefined {
let value = $state<T>();

1
src/lib/components/lnv/sidebar/LoadingSidebar.svelte Normal file
View File

@ -0,0 +1 @@
Loading...