example(hackernews): use Code splitting and lazy loading (#23)

* fix: 修复 TypeScript 类型问题

* example: Resolved TypeScript type and Using Loaders to ensure data is loaded

* example: Lock react@18 and Load the comment data with loader

* ci: pnpm-lock.yaml-settings.autoInstallPeers

* ci: pnpm-lock.yaml-settings.autoInstallPeers

* Update examples/hackernews/tsconfig.json

* refactor(hackernews): use Code splitting and lazy loading

* refactor(hackernews): Encapsulating a route files into a directory

---------

Co-authored-by: chencheng (云谦) <[email protected]>

examples/hackernews/src/components/item-list/index.tsx

@@ -28,15 +28,15 @@ export default function ItemList({
     <>
       <div className={styles.nav}>
         {page > 1 ? (
-          <Link to={`/${type}/$page`} params={{ page: page - 1 }}>
+          <Link to={`/${type}/$page`} params={{ page: (page - 1).toString() }}>
             &lt; prev
           </Link>
         ) : (
           <a className={styles.disabled}>&lt; prev</a>
         )}
         <span>{`${page}/${maxPage}`}</span>
         {page < maxPage ? (
-          <Link to={`/${type}/$page`} params={{ page: page + 1 }}>
+          <Link to={`/${type}/$page`} params={{ page: (page + 1).toString() }}>
             more &gt;
           </Link>
         ) : (

examples/hackernews/src/components/user-page/index.tsx

@@ -1,14 +1,8 @@
 import React from 'react';
+import type { User } from '../../types';
 import { timeAgo } from '../../utils';
 import styles from './index.module.less';
 
-interface User {
-  id: string;
-  created: number;
-  karma: number;
-  about?: string;
-}
-
 export default function UserPage({ user }: { user: User }) {
   if (!user) return null;
   return (

examples/hackernews/src/pages/ask.$page/lazy.tsx

@@ -0,0 +1,15 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemList from '../../components/item-list';
+import type { FetchListResult } from '../../types';
+
+export const Route = createLazyFileRoute('/ask/$page')({
+  component: AskComponent,
+});
+
+function AskComponent() {
+  const { page } = Route.useParams();
+  const { items, maxPage } = Route.useLoaderData<FetchListResult>();
+  return (
+    <ItemList type="ask" page={Number(page)} maxPage={maxPage} items={items} />
+  );
+}

examples/hackernews/src/pages/ask.$page/route.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchList } from '../../services/api';
+import type { Params } from '../../types';
+
+export const Route = createFileRoute('/ask/$page')({
+  loader: async ({ params }: { params: Params }) =>
+    await fetchList('ask', Number(params.page)),
+});

examples/hackernews/src/pages/index/lazy.tsx

@@ -0,0 +1,14 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemList from '../../components/item-list';
+import type { FetchListResult, Params } from '../../types';
+
+export const Route = createLazyFileRoute('/')({
+  component: TopComponent,
+});
+
+function TopComponent() {
+  const params = Route.useParams<Params>();
+  const page = Number(params?.page ?? '1') ?? 1;
+  const { items, maxPage } = Route.useLoaderData<FetchListResult>();
+  return <ItemList type="top" page={page} maxPage={maxPage} items={items} />;
+}

examples/hackernews/src/pages/index/route.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchList } from '../../services/api';
+import type { Params } from '../../types';
+
+export const Route = createFileRoute('/')({
+  loader: async ({ params }: { params: Params }) =>
+    await fetchList('top', Number(params?.page ?? '1') ?? 1),
+});

examples/hackernews/src/pages/item.$itemId/lazy.tsx

@@ -0,0 +1,12 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemPage from '../../components/item-page';
+import type { ItemIdInfo } from '../../types';
+
+export const Route = createLazyFileRoute('/item/$itemId')({
+  component: Item,
+});
+
+function Item() {
+  const { item, comments } = Route.useLoaderData<ItemIdInfo>();
+  return <ItemPage item={item} comments={comments} />;
+}

examples/hackernews/src/pages/item.$itemId/route.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchItem, fetchItems } from '../../services';
+import type { CommentType, ItemIdInfo } from '../../types';
+
+export const Route = createFileRoute('/item/$itemId')({
+  loader: async ({
+    params,
+  }: {
+    params: { itemId: string };
+  }): Promise<ItemIdInfo> => {
+    const item = await fetchItem(params.itemId);
+    const kids = item.kids || [];
+    const comments: CommentType[] = await fetchItems(kids);
+    return { item, comments };
+  },
+});

examples/hackernews/src/pages/job.$page/lazy.tsx

@@ -0,0 +1,15 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemList from '../../components/item-list';
+import type { FetchListResult } from '../../types';
+
+export const Route = createLazyFileRoute('/job/$page')({
+  component: JobComponent,
+});
+
+function JobComponent() {
+  const { page } = Route.useParams();
+  const { items, maxPage } = Route.useLoaderData<FetchListResult>();
+  return (
+    <ItemList type="job" page={Number(page)} maxPage={maxPage} items={items} />
+  );
+}

examples/hackernews/src/pages/job.$page/route.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchList } from '../../services/api';
+import type { Params } from '../../types';
+
+export const Route = createFileRoute('/job/$page')({
+  loader: async ({ params }: { params: Params }) =>
+    await fetchList('job', Number(params.page)),
+});

examples/hackernews/src/pages/new.$page/lazy.tsx

@@ -0,0 +1,15 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemList from '../../components/item-list';
+import type { FetchListResult } from '../../types';
+
+export const Route = createLazyFileRoute('/new/$page')({
+  component: NewComponent,
+});
+
+function NewComponent() {
+  const { page } = Route.useParams();
+  const { items, maxPage } = Route.useLoaderData<FetchListResult>();
+  return (
+    <ItemList type="new" page={Number(page)} maxPage={maxPage} items={items} />
+  );
+}

examples/hackernews/src/pages/new.$page/route.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchList } from '../../services/api';
+import type { Params } from '../../types';
+
+export const Route = createFileRoute('/new/$page')({
+  loader: async ({ params }: { params: Params }) =>
+    await fetchList('new', Number(params.page)),
+});

examples/hackernews/src/pages/show.$page/lazy.tsx

@@ -0,0 +1,15 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemList from '../../components/item-list';
+import type { FetchListResult } from '../../types';
+
+export const Route = createLazyFileRoute('/show/$page')({
+  component: ShowComponent,
+});
+
+function ShowComponent() {
+  const { page } = Route.useParams();
+  const { items, maxPage } = Route.useLoaderData<FetchListResult>();
+  return (
+    <ItemList type="show" page={Number(page)} maxPage={maxPage} items={items} />
+  );
+}

examples/hackernews/src/pages/show.$page/route.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchList } from '../../services/api';
+import type { Params } from '../../types';
+
+export const Route = createFileRoute('/show/$page')({
+  loader: async ({ params }: { params: Params }) =>
+    await fetchList('show', Number(params.page)),
+});

examples/hackernews/src/pages/top.$page/lazy.tsx

@@ -0,0 +1,15 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import ItemList from '../../components/item-list';
+import type { FetchListResult } from '../../types';
+
+export const Route = createLazyFileRoute('/top/$page')({
+  component: TopComponent,
+});
+
+function TopComponent() {
+  const { page } = Route.useParams();
+  const { items, maxPage } = Route.useLoaderData<FetchListResult>();
+  return (
+    <ItemList type="top" page={Number(page)} maxPage={maxPage} items={items} />
+  );
+}

examples/hackernews/src/pages/top.$page/route.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchList } from '../../services/api';
+import type { Params } from '../../types';
+
+export const Route = createFileRoute('/top/$page')({
+  loader: async ({ params }: { params: Params }) =>
+    await fetchList('top', Number(params.page)),
+});

examples/hackernews/src/pages/user.$userId/lazy.tsx

@@ -0,0 +1,12 @@
+import React, { createLazyFileRoute } from '@umijs/tnf/router';
+import UserPage from '../../components/user-page';
+import type { User } from '../../types';
+
+export const Route = createLazyFileRoute('/user/$userId')({
+  component: User,
+});
+
+function User() {
+  const user = Route.useLoaderData<User>();
+  return <UserPage user={user} />;
+}

examples/hackernews/src/pages/user.$userId/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@umijs/tnf/router';
+import { fetchUser } from '../../services';
+
+export const Route = createFileRoute('/user/$userId')({
+  loader: async ({ params }: { params: { userId: string } }) =>
+    await fetchUser(params.userId),
+});