async chunking

.github/workflows/chromatic.yml

@@ -27,3 +27,4 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitOnceUploaded: true
+          buildScriptName: 'build:storybook'

package.json

@@ -21,7 +21,7 @@
     "storybook": "cross-env BROWSER=\"google chrome\" OPEN_MATCH_HOST_ONLY=true storybook dev -p 6006",
     "build:storybook": "storybook build",
     "upgrade:storybook": "yarn dlx storybook@latest upgrade",
-    "chromatic": "chromatic"
+    "chromatic": "chromatic --build-script-name=build:storybook"
   },
   "dependencies": {
     "@linaria/atomic": "^6.2.0",

src/app.tsx

@@ -1,29 +1,39 @@
+import { useEffect } from 'react';
 import { css as csl } from '@linaria/core';
 import 'ress';
 import 'unfonts.css';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import { Meta } from '@components/meta';
 import { css, cx } from '@lib/css';
 import { theme } from '@theme';
 
-import { Routes } from './routing';
+export const App = () => {
+  // Extracts pathname property(key) from an object
+  const { pathname } = useLocation();
 
-export const App = () => (
-  <>
-    <Meta />
-    <div
-      className={cx(
-        csl`
+  // Automatically scrolls to top whenever pathname changes
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return (
+    <>
+      <Meta />
+      <div
+        className={cx(
+          csl`
           ${theme.decl.font.size.step0}
           ${theme.decl.font.sansSerif.regular}
         `,
-        css`
-          ${theme.page.body}
-          ${theme.definitions}
-        `,
-      )}
-    >
-      <Routes />
-    </div>
-  </>
-);
+          css`
+            ${theme.page.body}
+            ${theme.definitions}
+          `,
+        )}
+      >
+        <Outlet />
+      </div>
+    </>
+  );
+};

src/components/layout/layout.tsx

@@ -4,7 +4,6 @@ import { cx } from '@lib/css';
 
 import { Footer } from './footer';
 import { Header } from './header';
-import { Section } from './section';
 
 import styles from './layout.styles';
 
@@ -27,6 +26,5 @@ const Component = forwardRef<HTMLDivElement, LayoutProps>(
 
 export const Layout = Object.assign(Component, {
   Header,
-  Section,
   Footer,
 });

src/entry.client.tsx

@@ -1,34 +1,31 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
-import { BrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 // if (!Object.hasOwn) {
 //   Object.hasOwn = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 // }
-import { App } from './app';
+import { routes } from './routing';
 
 const root = document.getElementById('root');
+const router = createBrowserRouter(routes);
 
 if (root?.hasChildNodes()) {
   ReactDOM.hydrateRoot(
     root,
     <React.StrictMode>
-      <BrowserRouter>
-        <HelmetProvider>
-          <App />
-        </HelmetProvider>
-      </BrowserRouter>
+      <HelmetProvider>
+        <RouterProvider router={router} />
+      </HelmetProvider>
     </React.StrictMode>,
   );
 } else {
   ReactDOM.createRoot(root!).render(
     <React.StrictMode>
-      <BrowserRouter>
-        <HelmetProvider>
-          <App />
-        </HelmetProvider>
-      </BrowserRouter>
+      <HelmetProvider>
+        <RouterProvider router={router} />
+      </HelmetProvider>
     </React.StrictMode>,
   );
 }

src/entry.server.tsx

@@ -2,7 +2,7 @@ import ReactDOMServer from 'react-dom/server';
 import { HelmetProvider, type HelmetServerState } from 'react-helmet-async';
 import { StaticRouter } from 'react-router-dom/server';
 
-import { App } from './app';
+import { AppRoutes } from './routing';
 
 interface HelmetContext {
   helmet?: HelmetServerState;
@@ -13,9 +13,7 @@ export function SSRRender(url: string | Partial<Location>) {
 
   const html = ReactDOMServer.renderToString(
     <StaticRouter location={url}>
-      <HelmetProvider context={helmetContext}>
-        <App />
-      </HelmetProvider>
+      <HelmetProvider context={helmetContext}>{AppRoutes}</HelmetProvider>
     </StaticRouter>,
   );
 

src/pages/article/article_layout.tsx

@@ -1,4 +1,4 @@
-import { Layout } from '@components/layout';
+import { Section } from '@components/layout';
 
 import { ArticleHeader } from './article_header';
 import { ArticleMarkdown } from './article_markdown';
@@ -19,7 +19,7 @@ const Component = ({ article }: ArticleLayoutProps) => (
 );
 
 export const ArticleLayout = Object.assign(Component, {
-  Root: Layout.Section,
+  Root: Section,
   Header: ArticleHeader,
   Markdown: ArticleMarkdown,
 });

src/pages/portfolio/portfolio_list.tsx

@@ -1,4 +1,4 @@
-import { Layout, type SectionProps } from '@components/layout';
+import { Section, type SectionProps } from '@components/layout';
 import { PortfolioGrid, usePortfolioItems } from '@components/portfolio';
 
 import styles from './portfolio_list.styles';
@@ -22,8 +22,8 @@ const Component = () => {
 };
 
 export const PortfolioList = Object.assign(Component, {
-  Header: () => <Layout.Section.Header {...attributes} />,
+  Header: () => <Section.Header {...attributes} />,
   Root: ({ children }: Pick<SectionProps, 'children'>) => (
-    <Layout.Section id="portfolio">{children}</Layout.Section>
+    <Section id="portfolio">{children}</Section>
   ),
 });

src/routing/index.tsx

@@ -1,30 +1,21 @@
-import { useEffect } from 'react';
-import { Home } from '@pages/home';
-import { Portfolio } from '@pages/portfolio';
-import { Outlet, Route as ReactRoute, Routes as ReactRoutes, useLocation } from 'react-router-dom';
+import { createRoutesFromElements, Route, Routes } from 'react-router-dom';
 
-import { Article } from './article';
+import { App } from '../app';
 
-const ScrollToTop = () => {
-  // Extracts pathname property(key) from an object
-  const { pathname } = useLocation();
+const others = (
+  <Route element={<App />}>
+    <Route path="/" lazy={async () => ({ Component: (await import('../pages/home')).Home })} />
+    <Route
+      path="/portfolio"
+      lazy={async () => ({ Component: (await import('../pages/portfolio')).Portfolio })}
+    />
+    <Route
+      path="/portfolio/:id"
+      lazy={async () => ({ Component: (await import('./article')).Article })}
+    />
+  </Route>
+);
 
-  // Automatically scrolls to top whenever pathname changes
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+export const AppRoutes = <Routes>{others}</Routes>;
 
-  return <Outlet />;
-};
-
-export const Routes = () => {
-  return (
-    <ReactRoutes>
-      <ReactRoute element={<ScrollToTop />}>
-        <ReactRoute path="/" element={<Home />} />
-        <ReactRoute path="/portfolio" element={<Portfolio />} />
-        <ReactRoute path="/portfolio/:id" element={<Article />} />
-      </ReactRoute>
-    </ReactRoutes>
-  );
-};
+export const routes = createRoutesFromElements(others);