From 008c2d3cb7b1f541d2ab25433801274d8cbc58f8 Mon Sep 17 00:00:00 2001 From: Primakov Alexandr Alexandrovich Date: Thu, 24 Oct 2024 18:51:40 +0300 Subject: [PATCH] lazy load + nav2 link --- bro.config.js | 3 ++- package-lock.json | 33 +++++++++++++++++++++++++++++ package.json | 2 ++ src/dashboard.tsx | 28 +++++++++++++++++++----- src/pages/{ => about}/about.tsx | 2 +- src/pages/about/index.ts | 3 +++ src/pages/index.ts | 4 ++++ src/pages/profile/index.ts | 3 +++ src/pages/{ => profile}/profile.tsx | 7 +++++- 9 files changed, 77 insertions(+), 8 deletions(-) rename src/pages/{ => about}/about.tsx (85%) create mode 100644 src/pages/about/index.ts create mode 100644 src/pages/index.ts create mode 100644 src/pages/profile/index.ts rename src/pages/{ => profile}/profile.tsx (55%) diff --git a/bro.config.js b/bro.config.js index 5b707e6..4cd6696 100644 --- a/bro.config.js +++ b/bro.config.js @@ -11,7 +11,8 @@ module.exports = { navigations: { "nav1.main": "/nav1", "link.nav1.about": "/", - "link.nav1.profile": "/my-best-profile-page-ever" + "link.nav1.profile": "/my-best-profile-page-ever", + "nav2.main": "/nav2", }, features: { "nav1": { diff --git a/package-lock.json b/package-lock.json index ca1b40f..aa7c119 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "license": "ISC", "dependencies": { "@brojs/cli": "^1.3.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "express": "^4.19.2", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2052,6 +2054,31 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "license": "MIT" }, + "node_modules/@types/prop-types": { + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "18.3.12", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", + "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", @@ -2999,6 +3026,12 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT" + }, "node_modules/debug": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", diff --git a/package.json b/package.json index aaf69fb..386dbf1 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "description": "", "dependencies": { "@brojs/cli": "^1.3.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", "express": "^4.19.2", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/dashboard.tsx b/src/dashboard.tsx index d76ed27..e401540 100644 --- a/src/dashboard.tsx +++ b/src/dashboard.tsx @@ -1,16 +1,34 @@ -import React from "react"; +import React, { Suspense } from "react"; import { Routes, Route } from "react-router-dom"; import { URLs } from "./__data__/urls"; -import { ProfilePage } from './pages/profile' -import { AboutPage } from "./pages/about"; +import { ProfilePage, AboutPage } from "./pages"; +const PageWrapper = ({ children }) => ( + Loading...}>{children} +); export const Dashboard = () => { return ( - } /> - {URLs.profile.isOn && } />} + + + + } + /> + {URLs.profile.isOn && ( + + + + } + /> + )} Not found} /> diff --git a/src/pages/about.tsx b/src/pages/about/about.tsx similarity index 85% rename from src/pages/about.tsx rename to src/pages/about/about.tsx index 85242ed..ce804f5 100644 --- a/src/pages/about.tsx +++ b/src/pages/about/about.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Link } from "react-router-dom"; -import { URLs } from "../__data__/urls"; +import { URLs } from "../../__data__/urls"; export const AboutPage = () => { return ( diff --git a/src/pages/about/index.ts b/src/pages/about/index.ts new file mode 100644 index 0000000..2f89a60 --- /dev/null +++ b/src/pages/about/index.ts @@ -0,0 +1,3 @@ +import { AboutPage } from './about'; + +export default AboutPage; diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..68f301d --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,4 @@ +import { lazy } from 'react' + +export const AboutPage = lazy(() => import(/* webpackChunkName: "about" */ './about')) +export const ProfilePage = lazy(() => import(/* webpackChunkName: "profile" */ './profile')) diff --git a/src/pages/profile/index.ts b/src/pages/profile/index.ts new file mode 100644 index 0000000..e2f0a37 --- /dev/null +++ b/src/pages/profile/index.ts @@ -0,0 +1,3 @@ +import { ProfilePage } from "./profile"; + +export default ProfilePage; diff --git a/src/pages/profile.tsx b/src/pages/profile/profile.tsx similarity index 55% rename from src/pages/profile.tsx rename to src/pages/profile/profile.tsx index 77a4b4a..5a556c6 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile/profile.tsx @@ -1,13 +1,18 @@ import React from "react"; import { Link } from "react-router-dom"; -import { URLs } from "../__data__/urls"; +import { URLs } from "../../__data__/urls"; +import { getNavigationsValue } from "@brojs/cli"; export const ProfilePage = () => { return (

profile page

go to about page + +
+ edit profile +
); };