From e4e80fa603c283f240884a7c76c3e0e3badcf7b4 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Fri, 20 Jan 2023 12:40:36 -0800 Subject: [PATCH] Refactor routes (#535) * refactor routes * use default export for screens * use "route" relative routing * don't use absolute import for root screens * no absolute importing folders!!! * fine we can absolute import folders --- apps/landing/package.json | 2 +- crates/sync/example/web/package.json | 2 +- packages/config/vite/index.js | 14 ++- packages/interface/package.json | 2 +- packages/interface/src/AppLayout.tsx | 1 - packages/interface/src/AppRouter.tsx | 80 ++---------------- packages/interface/src/screens/index.tsx | 32 +++++++ .../settings/{Settings.tsx => Layout.tsx} | 0 .../interface/src/screens/settings/index.tsx | 37 ++++++++ packages/interface/src/util/index.tsx | 7 ++ pnpm-lock.yaml | Bin 786344 -> 776612 bytes 11 files changed, 101 insertions(+), 76 deletions(-) create mode 100644 packages/interface/src/screens/index.tsx rename packages/interface/src/screens/settings/{Settings.tsx => Layout.tsx} (100%) create mode 100644 packages/interface/src/screens/settings/index.tsx create mode 100644 packages/interface/src/util/index.tsx diff --git a/apps/landing/package.json b/apps/landing/package.json index d350b5e87..7a472f641 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -35,7 +35,7 @@ "ts-node": "^10.9.1", "tsparticles": "^2.3.4", "typescript": "^4.8.4", - "vite": "^3.1.4", + "vite": "^4.0.4", "vite-plugin-ssr": "^0.4.39" }, "devDependencies": { diff --git a/crates/sync/example/web/package.json b/crates/sync/example/web/package.json index 32617cec0..f3fa0746b 100644 --- a/crates/sync/example/web/package.json +++ b/crates/sync/example/web/package.json @@ -15,7 +15,7 @@ "@tanstack/react-query": "^4.10.1", "@vitejs/plugin-react": "^2.1.0", "typescript": "^4.8.2", - "vite": "^3.0.9" + "vite": "^4.0.4" }, "dependencies": { "clsx": "^1.2.1", diff --git a/packages/config/vite/index.js b/packages/config/vite/index.js index 2e863c3ac..3797547c4 100644 --- a/packages/config/vite/index.js +++ b/packages/config/vite/index.js @@ -17,7 +17,19 @@ module.exports = { const item = folderItems.find((i) => i.startsWith(sourcePath.split('/').at(-1))); - return absolutePath + path.extname(item); + const fullPath = absolutePath + path.extname(item); + + const stats = await fs.stat(fullPath); + + if (stats.isDirectory()) { + const directoryItems = await fs.readdir(absolutePath + path.extname(item)); + + const indexFile = directoryItems.find((i) => i.startsWith('index')); + + return `${absolutePath}/${indexFile}`; + } else { + return fullPath; + } } } }; diff --git a/packages/interface/package.json b/packages/interface/package.json index 42958f85b..630002813 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -75,7 +75,7 @@ "@vitejs/plugin-react": "^1.3.1", "prettier": "^2.7.1", "typescript": "^4.8.4", - "vite": "^3.1.4", + "vite": "^4.0.4", "vite-plugin-svgr": "^2.2.1" } } diff --git a/packages/interface/src/AppLayout.tsx b/packages/interface/src/AppLayout.tsx index f9de5823c..56f5dcec1 100644 --- a/packages/interface/src/AppLayout.tsx +++ b/packages/interface/src/AppLayout.tsx @@ -2,7 +2,6 @@ import clsx from 'clsx'; import { Suspense } from 'react'; import { Outlet } from 'react-router-dom'; import { useCurrentLibrary } from '@sd/client'; -import { Dialogs } from '@sd/ui'; import { Sidebar } from '~/components/layout/Sidebar'; import { Toasts } from '~/components/primitive/Toasts'; import { useOperatingSystem } from '~/hooks/useOperatingSystem'; diff --git a/packages/interface/src/AppRouter.tsx b/packages/interface/src/AppRouter.tsx index 777478bce..699a5c87c 100644 --- a/packages/interface/src/AppRouter.tsx +++ b/packages/interface/src/AppRouter.tsx @@ -1,42 +1,12 @@ -import { lazy } from '@loadable/component'; -import { Navigate, Route, Routes } from 'react-router-dom'; +import { Route, Routes } from 'react-router-dom'; import { useCurrentLibrary, useInvalidateQuery } from '@sd/client'; +import { AppLayout } from '~/AppLayout'; import { useKeybindHandler } from '~/hooks/useKeyboardHandler'; -import { AppLayout } from './AppLayout'; +import screens from '~/screens'; +import { lazyEl } from '~/util'; -// Using React.lazy breaks hot reload so we don't use it. -const DebugScreen = lazy(() => import('./screens/Debug')); -const SettingsScreen = lazy(() => import('./screens/settings/Settings')); -const TagExplorer = lazy(() => import('./screens/TagExplorer')); -const PhotosScreen = lazy(() => import('./screens/Photos')); -const OverviewScreen = lazy(() => import('./screens/Overview')); -const ContentScreen = lazy(() => import('./screens/Content')); -const LocationExplorer = lazy(() => import('./screens/LocationExplorer')); -const OnboardingScreen = lazy(() => import('./components/onboarding/Onboarding')); -const NotFound = lazy(() => import('./NotFound')); - -const AppearanceSettings = lazy(() => import('./screens/settings/client/AppearanceSettings')); -const ExtensionSettings = lazy(() => import('./screens/settings/client/ExtensionsSettings')); -const GeneralSettings = lazy(() => import('./screens/settings/client/GeneralSettings')); -const KeybindingSettings = lazy(() => import('./screens/settings/client/KeybindingSettings')); -const PrivacySettings = lazy(() => import('./screens/settings/client/PrivacySettings')); -const AboutSpacedrive = lazy(() => import('./screens/settings/info/AboutSpacedrive')); -const Changelog = lazy(() => import('./screens/settings/info/Changelog')); -const Support = lazy(() => import('./screens/settings/info/Support')); -const ContactsSettings = lazy(() => import('./screens/settings/library/ContactsSettings')); -const KeysSettings = lazy(() => import('./screens/settings/library/KeysSetting')); -const LibraryGeneralSettings = lazy( - () => import('./screens/settings/library/LibraryGeneralSettings') -); -const LocationSettings = lazy(() => import('./screens/settings/library/LocationSettings')); -const NodesSettings = lazy(() => import('./screens/settings/library/NodesSettings')); -const SecuritySettings = lazy(() => import('./screens/settings/library/SecuritySettings')); -const SharingSettings = lazy(() => import('./screens/settings/library/SharingSettings')); -const SyncSettings = lazy(() => import('./screens/settings/library/SyncSettings')); -const TagsSettings = lazy(() => import('./screens/settings/library/TagsSettings')); -const ExperimentalSettings = lazy(() => import('./screens/settings/node/ExperimentalSettings')); -const LibrarySettings = lazy(() => import('./screens/settings/node/LibrariesSettings')); -const P2PSettings = lazy(() => import('./screens/settings/node/P2PSettings')); +const Onboarding = lazyEl(() => import('./components/onboarding/Onboarding')); +const NotFound = lazyEl(() => import('./NotFound')); export function AppRouter() { const { library } = useCurrentLibrary(); @@ -46,7 +16,7 @@ export function AppRouter() { return ( - } /> + }> {/* As we are caching the libraries in localStore so this *shouldn't* result is visual problems unless something else is wrong */} {library === undefined ? ( @@ -58,40 +28,8 @@ export function AppRouter() { /> ) : ( <> - } /> - } /> - } /> - } /> - } /> - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - } /> - } /> + {screens} + )} diff --git a/packages/interface/src/screens/index.tsx b/packages/interface/src/screens/index.tsx new file mode 100644 index 000000000..ff9cbb6d7 --- /dev/null +++ b/packages/interface/src/screens/index.tsx @@ -0,0 +1,32 @@ +import { Navigate, Route, RouteProps } from 'react-router-dom'; +import { lazyEl } from '~/util'; +import settingsScreens from './settings'; + +const routes: RouteProps[] = [ + { + index: true, + element: + }, + { + path: 'overview', + element: lazyEl(() => import('./Overview')) + }, + { path: 'content', element: lazyEl(() => import('./Content')) }, + { path: 'photos', element: lazyEl(() => import('./Photos')) }, + { path: 'debug', element: lazyEl(() => import('./Debug')) }, + { path: 'location/:id', element: lazyEl(() => import('./LocationExplorer')) }, + { path: 'tag/:id', element: lazyEl(() => import('./TagExplorer')) }, + { + path: 'settings', + element: lazyEl(() => import('./settings/Layout')), + children: settingsScreens + } +]; + +export default ( + <> + {routes.map((route) => ( + + ))} + +); diff --git a/packages/interface/src/screens/settings/Settings.tsx b/packages/interface/src/screens/settings/Layout.tsx similarity index 100% rename from packages/interface/src/screens/settings/Settings.tsx rename to packages/interface/src/screens/settings/Layout.tsx diff --git a/packages/interface/src/screens/settings/index.tsx b/packages/interface/src/screens/settings/index.tsx new file mode 100644 index 000000000..b1c757d77 --- /dev/null +++ b/packages/interface/src/screens/settings/index.tsx @@ -0,0 +1,37 @@ +import { Navigate, Route, RouteProps } from 'react-router-dom'; +import { lazyEl } from '~/util'; + +const routes: RouteProps[] = [ + { index: true, element: }, + { path: 'general', element: lazyEl(() => import('./client/GeneralSettings')) }, + { path: 'appearance', element: lazyEl(() => import('./client/AppearanceSettings')) }, + { path: 'keybindings', element: lazyEl(() => import('./client/KeybindingSettings')) }, + { path: 'extensions', element: lazyEl(() => import('./client/ExtensionsSettings')) }, + { path: 'p2p', element: lazyEl(() => import('./node/P2PSettings')) }, + { path: 'contacts', element: lazyEl(() => import('./library/ContactsSettings')) }, + { path: 'experimental', element: lazyEl(() => import('./node/ExperimentalSettings')) }, + { path: 'keys', element: lazyEl(() => import('./library/KeysSetting')) }, + { path: 'libraries', element: lazyEl(() => import('./node/LibrariesSettings')) }, + { path: 'security', element: lazyEl(() => import('./library/SecuritySettings')) }, + { path: 'locations', element: lazyEl(() => import('./library/LocationSettings')) }, + { path: 'sharing', element: lazyEl(() => import('./library/SharingSettings')) }, + { path: 'sync', element: lazyEl(() => import('./library/SyncSettings')) }, + { path: 'tags', element: lazyEl(() => import('./library/TagsSettings')) }, + { path: 'library', element: lazyEl(() => import('./library/LibraryGeneralSettings')) }, + { path: 'locations', element: lazyEl(() => import('./library/LocationSettings')) }, + { path: 'tags', element: lazyEl(() => import('./library/TagsSettings')) }, + { path: 'nodes', element: lazyEl(() => import('./library/NodesSettings')) }, + { path: 'keys', element: lazyEl(() => import('./library/KeysSetting')) }, + { path: 'privacy', element: lazyEl(() => import('./client/PrivacySettings')) }, + { path: 'about', element: lazyEl(() => import('./info/AboutSpacedrive')) }, + { path: 'changelog', element: lazyEl(() => import('./info/Changelog')) }, + { path: 'support', element: lazyEl(() => import('./info/Support')) } +]; + +export default ( + <> + {routes.map((route) => ( + + ))} + +); diff --git a/packages/interface/src/util/index.tsx b/packages/interface/src/util/index.tsx new file mode 100644 index 000000000..4511a3be0 --- /dev/null +++ b/packages/interface/src/util/index.tsx @@ -0,0 +1,7 @@ +import { lazy } from '@loadable/component'; +import { ReactNode } from 'react'; + +export function lazyEl(fn: Parameters[0]): ReactNode { + const Element = lazy(fn); + return ; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4296912a84279a6b549beb965cbd695d9e659273..7f1e7f2e073c743203fc84d57e47103b34c013b2 100644 GIT binary patch delta 858 zcmZWnTS${}6lZ7O_uu7AcXciE-p%>#A~wRv>B}A@sWd7jDC$KldMJYE#e4|bf&$@- zj-}mXtSHRcxBT}Iw#QVAddmW_8(BRB1*OpKb6abh4+qZgoZs)qIfrxmk3XvT( zV696|I*bY{PH1G*o8+YyyE1F`gM2{G_tWuRm zxwGD(w0RGul@EOt8S*Qi&6INP7ww8`>rZXUxwX-xcv_Z(l(Q6SOq0*_gm_O#BTUoo zGH}z71r$o&Vs<)ag~e=Ur7Jdgn}r6NaDa|>#+gWGt>C43J0$YEA9LXI68Mq>KRMxZ z4z#QW1L<8bmtQNOFp^61CQxOJn%4jlx2uEqmcfI314eygOixG3SIT-T;C&(a=@`?| zzTs5(Yqi77@c;GXn3L5vwPuy$rk@N7*lJ*r_lzbZY3iQ!!kO z&|s7C2lY1@SvVFn@>md0?Wfr&)=}#qE@ob=lD-e4opuoFsBZ`#QRF5{y!$Fj|DLdt z#;>E47UB(DP=!v4590~0dNpX|B3l)Cri4w@-VHXIA3=d8qG;iVW7w(D1jzbC=jLq* zJP))mDSGI)g5~u14sKa4ZU#CSS0}nKj@$mX)z>d2@gA-(pqyLYM&OnNGHoi=o;-S- NI%@P1-^+1V>tDZrC(i%? delta 5160 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