params in url + error boundary

bro.config.js

@@ -11,7 +11,7 @@ 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/:userId/:projectId",
     "nav2.main": "/nav2",
   },
   features: {

package-lock.json

@@ -10,6 +10,8 @@
             "license": "ISC",
             "dependencies": {
                 "@brojs/cli": "^1.3.0",
+                "@emotion/react": "^11.13.3",
+                "@emotion/styled": "^11.13.0",
                 "@types/react": "^18.3.12",
                 "@types/react-dom": "^18.3.1",
                 "express": "^4.19.2",
@@ -1828,6 +1830,167 @@
                 "webpack-merge": "5.7.2"
             }
         },
+        "node_modules/@emotion/babel-plugin": {
+            "version": "11.12.0",
+            "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+            "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.16.7",
+                "@babel/runtime": "^7.18.3",
+                "@emotion/hash": "^0.9.2",
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/serialize": "^1.2.0",
+                "babel-plugin-macros": "^3.1.0",
+                "convert-source-map": "^1.5.0",
+                "escape-string-regexp": "^4.0.0",
+                "find-root": "^1.1.0",
+                "source-map": "^0.5.7",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+            "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/@emotion/cache": {
+            "version": "11.13.1",
+            "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+            "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/sheet": "^1.4.0",
+                "@emotion/utils": "^1.4.0",
+                "@emotion/weak-memoize": "^0.4.0",
+                "stylis": "4.2.0"
+            }
+        },
+        "node_modules/@emotion/hash": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+            "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/is-prop-valid": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+            "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/memoize": "^0.9.0"
+            }
+        },
+        "node_modules/@emotion/memoize": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+            "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/react": {
+            "version": "11.13.3",
+            "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
+            "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.12.0",
+                "@emotion/cache": "^11.13.0",
+                "@emotion/serialize": "^1.3.1",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+                "@emotion/utils": "^1.4.0",
+                "@emotion/weak-memoize": "^0.4.0",
+                "hoist-non-react-statics": "^3.3.1"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emotion/serialize": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+            "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+            "license": "MIT",
+            "dependencies": {
+                "@emotion/hash": "^0.9.2",
+                "@emotion/memoize": "^0.9.0",
+                "@emotion/unitless": "^0.10.0",
+                "@emotion/utils": "^1.4.1",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@emotion/sheet": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+            "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/styled": {
+            "version": "11.13.0",
+            "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+            "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.18.3",
+                "@emotion/babel-plugin": "^11.12.0",
+                "@emotion/is-prop-valid": "^1.3.0",
+                "@emotion/serialize": "^1.3.0",
+                "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+                "@emotion/utils": "^1.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.0.0-rc.0",
+                "react": ">=16.8.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emotion/unitless": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+            "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+            "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
+        "node_modules/@emotion/utils": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
+            "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+            "license": "MIT"
+        },
+        "node_modules/@emotion/weak-memoize": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+            "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+            "license": "MIT"
+        },
         "node_modules/@isaacs/cliui": {
             "version": "8.0.2",
             "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2444,6 +2607,37 @@
                 "webpack": ">=5"
             }
         },
+        "node_modules/babel-plugin-macros": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+            "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "cosmiconfig": "^7.0.0",
+                "resolve": "^1.19.0"
+            },
+            "engines": {
+                "node": ">=10",
+                "npm": ">=6"
+            }
+        },
+        "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+            "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/parse-json": "^4.0.0",
+                "import-fresh": "^3.2.1",
+                "parse-json": "^5.0.0",
+                "path-type": "^4.0.0",
+                "yaml": "^1.10.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/babel-plugin-polyfill-corejs2": {
             "version": "0.4.11",
             "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
@@ -3667,6 +3861,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/find-root": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+            "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+            "license": "MIT"
+        },
         "node_modules/find-up": {
             "version": "6.3.0",
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
@@ -4250,6 +4450,15 @@
                 "npm": "1.2.8000 || >= 1.4.16"
             }
         },
+        "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==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "react-is": "^16.7.0"
+            }
+        },
         "node_modules/html-entities": {
             "version": "2.5.2",
             "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
@@ -5844,6 +6053,12 @@
                 }
             }
         },
+        "node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "license": "MIT"
+        },
         "node_modules/react-router": {
             "version": "6.27.0",
             "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
@@ -6514,6 +6729,12 @@
                 "webpack": "^5.27.0"
             }
         },
+        "node_modules/stylis": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+            "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+            "license": "MIT"
+        },
         "node_modules/supports-color": {
             "version": "8.1.1",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",

package.json

@@ -15,6 +15,8 @@
     "description": "",
     "dependencies": {
         "@brojs/cli": "^1.3.0",
+        "@emotion/react": "^11.13.3",
+        "@emotion/styled": "^11.13.0",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "express": "^4.19.2",

src/__data__/urls.ts

@@ -7,8 +7,8 @@ export const URLs = {
   profile: {
     isOn: Boolean(getNavigationsValue("link.nav1.profile")),
     url: `${baseUrl}${getNavigationsValue("link.nav1.profile")}`,
-    getUrl() {
+    getUrl(userId: string, projectId: string) {
-      return this.url;
+      return generatePath(this.url, { userId, projectId });
     },
   },
   about: {

src/app.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
+import { ThemeProvider } from '@emotion/react'
 
 import { Dashboard } from './dashboard';
 
 const App = () => {
   return (
+    <ThemeProvider theme={{ colors: { main: 'green' } }}>
       <BrowserRouter>
         <Dashboard />
       </BrowserRouter>
+    </ThemeProvider>
   );
 };
 

src/components/error-boundary.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean }> {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+        
+    }
+
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true
+        }
+    }
+
+    render() {
+        const { hasError } = this.state
+
+        return hasError ? <div>Something went wrong</div> : this.props.children;
+    }
+}

src/dashboard.tsx

@@ -3,9 +3,12 @@ import { Routes, Route } from "react-router-dom";
 
 import { URLs } from "./__data__/urls";
 import { ProfilePage, AboutPage } from "./pages";
+import { ErrorBoundary } from "./components/error-boundary";
 
 const PageWrapper = ({ children }) => (
+  <ErrorBoundary>
     <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+  </ErrorBoundary>
 );
 
 export const Dashboard = () => {

src/pages/about/about.style.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled'
+
+import { Header } from './components'
+
+export const StyledHeader = styled(Header)`
+    padding-top: 100px;
+`;
+
+export const Wrapper = styled.div<{ red?: boolean }>`
+    max-width: 800px;
+    margin: 0 auto;
+    background-color: ${(props) => props.red ? 'red' : props.theme.colors.main};
+
+    ${StyledHeader.toString()} {
+        color: palevioletred;
+    }
+`;
+

src/pages/about/about.tsx

@@ -3,11 +3,20 @@ import { Link } from "react-router-dom";
 
 import { URLs } from "../../__data__/urls";
 
+import { StyledHeader, Wrapper } from "./about.style";
+import { Header } from "./components";
+
 export const AboutPage = () => {
   return (
-    <div>
+    <>
-      <h1>about page</h1>
+      <StyledHeader />
-      {URLs.profile.isOn && <Link to={URLs.profile.getUrl()}>go to profile page</Link>}
+      <Wrapper>
-    </div>
+        <StyledHeader />
+        <Header />
+        {URLs.profile.isOn && (
+          <Link to={URLs.profile.getUrl('string-userId', 'string-projectId')}>go to profile page</Link>
+        )}
+      </Wrapper>
+    </>
   );
 };

src/pages/about/components.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const Header = ({ className }: { className?: string }) => <h1 className={className}>about page</h1>

src/pages/profile/profile.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { getHistory } from '@brojs/cli'
 import { getNavigationsValue } from "@brojs/cli";
 
@@ -13,6 +13,8 @@ export const ProfilePage = () => {
     history.push(getNavigationsValue('nav2.main'));
   }
 
+  const params = useParams<{ userId: string, prodileId: string }>();
+
   return (
     <div>
       <h1>profile page</h1>
@@ -21,6 +23,8 @@ export const ProfilePage = () => {
       <div>
         <a onClick={handletoNav2Click} href={getNavigationsValue('nav2.main')}>edit profile</a>
       </div>
+
+      <pre>{JSON.stringify(params as Required<typeof params>, null, 4)}</pre>
     </div>
   );
 };

tags.js

@@ -0,0 +1,28 @@
+const makeStyles = (theme) => (body, ...expressions) => {
+  console.log(body, expressions);
+  return body.reduce((acc, cur, index) => {
+    const expression = expressions[index];
+
+    if (typeof expression === "function") {
+      cur += expression(theme);
+    } else if (expression) {
+      cur += expression;
+    }
+
+    acc += cur;
+
+    return acc;
+  }, "");
+};
+
+let condition = false;
+
+const css = makeStyles({ colors: { main: 'red', notmain: 'green' } })
+
+const styles = css`
+    width: 100%;
+    color: ${condition ? "red" : "green"};
+    background-color: ${(theme) => condition ? theme.colors.main : theme.colors.notmain};
+`;
+
+console.log("styles", styles);

types/emotion.d.ts

@@ -0,0 +1,9 @@
+import '@emotion/react'
+
+declare module '@emotion/react' {
+  export interface Theme {
+    colors: {
+      main: string
+    }
+  }
+}