tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Some code-splitting using loadable

Browse Source
This commit is contained in:
Donkie
2023-07-13 22:57:13 +02:00
parent 9fe37b315c
commit 0cfc414b9c
3 changed files with 142 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
client/package-lock.json generated
View File

@@ -9,12 +9,14 @@
"version": "0.1.0",
"dependencies": {
"@ant-design/icons": "^5.1.4",
"@loadable/component": "^5.15.3",
"@refinedev/antd": "^5.28.0",
"@refinedev/core": "^4.26.4",
"@refinedev/kbar": "^1.1.2",
"@refinedev/react-router-v6": "^4.3.2",
"@refinedev/simple-rest": "^4.5.0",
"@tanstack/react-query": "^4.29.19",
"@types/loadable__component": "^5.13.4",
"antd": "^5.6.4",
"flag-icons": "^6.7.0",
"i18next": "^23.2.8",
@@ -1496,6 +1498,26 @@
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
},
"node_modules/@loadable/component": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.15.3.tgz",
"integrity": "sha512-VOgYgCABn6+/7aGIpg7m0Ruj34tGetaJzt4bQ345FwEovDQZ+dua+NWLmuJKv8rWZyxOUSfoJkmGnzyDXH2BAQ==",
"dependencies": {
"@babel/runtime": "^7.7.7",
"hoist-non-react-statics": "^3.3.1",
"react-is": "^16.12.0"
},
"engines": {
"node": ">=8"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2229,6 +2251,14 @@
"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
"dev": true
},
"node_modules/@types/loadable__component": {
"version": "5.13.4",
"resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.13.4.tgz",
"integrity": "sha512-YhoCCxyuvP2XeZNbHbi8Wb9EMaUJuA2VGHxJffcQYrJKIKSkymJrhbzsf9y4zpTmr5pExAAEh5hbF628PAZ8Dg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/mdast": {
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
@@ -2246,14 +2276,12 @@
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/react": {
"version": "18.2.14",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz",
"integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -2272,8 +2300,7 @@
"node_modules/@types/scheduler": {
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
"dev": true
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
},
"node_modules/@types/semver": {
"version": "7.5.0",
@@ -5215,6 +5242,14 @@
"node": ">=0.10.0"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/html-parse-stringify": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",

2
client/package.json
View File

@@ -8,12 +8,14 @@
"type": "module",
"dependencies": {
"@ant-design/icons": "^5.1.4",
"@loadable/component": "^5.15.3",
"@refinedev/antd": "^5.28.0",
"@refinedev/core": "^4.26.4",
"@refinedev/kbar": "^1.1.2",
"@refinedev/react-router-v6": "^4.3.2",
"@refinedev/simple-rest": "^4.5.0",
"@tanstack/react-query": "^4.29.19",
"@types/loadable__component": "^5.13.4",
"antd": "^5.6.4",
"flag-icons": "^6.7.0",
"i18next": "^23.2.8",

128
client/src/App.tsx
View File

@@ -20,19 +20,6 @@ import { useTranslation } from "react-i18next";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import { Header } from "./components/header";
import { ColorModeContextProvider } from "./contexts/color-mode";
import { SpoolCreate, SpoolEdit, SpoolList, SpoolShow } from "./pages/spools";
import {
FilamentCreate,
FilamentEdit,
FilamentList,
FilamentShow,
} from "./pages/filaments";
import {
VendorCreate,
VendorEdit,
VendorList,
VendorShow,
} from "./pages/vendors";
import { ReactComponent as Logo } from "./icon.svg";
import {
FileOutlined,
@@ -45,6 +32,22 @@ import { Version } from "./components/version";
import React from "react";
import { Locale } from "antd/es/locale";
import { languages } from "./i18n";
import loadable from "@loadable/component";
interface PageProps {
resource: "spools" | "filaments" | "vendors";
page: "list" | "create" | "edit" | "show";
mode?: "create" | "clone";
}
const LoadablePage = loadable(
(props: PageProps) => import(`./pages/${props.resource}/${props.page}.tsx`),
{
fallback: <div>Page is Loading...</div>,
cacheKey: (props: PageProps) =>
`${props.resource}-${props.page}-${props.mode ?? ""}`,
}
);
function App() {
const { t, i18n } = useTranslation();
@@ -174,43 +177,112 @@ function App() {
element={<NavigateToResource resource="spool" />}
/>
<Route path="/spool">
<Route index element={<SpoolList />} />
<Route
index
element={<LoadablePage resource="spools" page="list" />}
/>
<Route
path="create"
element={<SpoolCreate mode="create" />}
element={
<LoadablePage
resource="spools"
page="create"
mode="create"
/>
}
/>
<Route
path="clone/:id"
element={<SpoolCreate mode="clone" />}
element={
<LoadablePage
resource="spools"
page="create"
mode="clone"
/>
}
/>
<Route
path="edit/:id"
element={<LoadablePage resource="spools" page="edit" />}
/>
<Route
path="show/:id"
element={<LoadablePage resource="spools" page="show" />}
/>
<Route path="edit/:id" element={<SpoolEdit />} />
<Route path="show/:id" element={<SpoolShow />} />
</Route>
<Route path="/filament">
<Route index element={<FilamentList />} />
<Route
index
element={
<LoadablePage resource="filaments" page="list" />
}
/>
<Route
path="create"
element={<FilamentCreate mode="create" />}
element={
<LoadablePage
resource="filaments"
page="create"
mode="create"
/>
}
/>
<Route
path="clone/:id"
element={<FilamentCreate mode="clone" />}
element={
<LoadablePage
resource="filaments"
page="create"
mode="clone"
/>
}
/>
<Route
path="edit/:id"
element={
<LoadablePage resource="filaments" page="edit" />
}
/>
<Route
path="show/:id"
element={
<LoadablePage resource="filaments" page="show" />
}
/>
<Route path="edit/:id" element={<FilamentEdit />} />
<Route path="show/:id" element={<FilamentShow />} />
</Route>
<Route path="/vendor">
<Route index element={<VendorList />} />
<Route
index
element={<LoadablePage resource="vendors" page="list" />}
/>
<Route
path="create"
element={<VendorCreate mode="create" />}
element={
<LoadablePage
resource="vendors"
page="create"
mode="create"
/>
}
/>
<Route
path="clone/:id"
element={<VendorCreate mode="clone" />}
element={
<LoadablePage
resource="vendors"
page="create"
mode="clone"
/>
}
/>
<Route
path="edit/:id"
element={<LoadablePage resource="vendors" page="edit" />}
/>
<Route
path="show/:id"
element={<LoadablePage resource="vendors" page="show" />}
/>
<Route path="edit/:id" element={<VendorEdit />} />
<Route path="show/:id" element={<VendorShow />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>