umijs · sorrycc · Nov 11, 2024 · Nov 6, 2024 · Nov 7, 2024 · Nov 8, 2024
diff --git a/examples/hackernews/src/components/comment/index.module.less b/examples/hackernews/src/components/comment/index.module.less
@@ -11,6 +11,7 @@
 .text {
   font-size: 0.9em;
   padding: 1em 0;
+  overflow: hidden;
 }
 
 .by {

diff --git a/examples/hackernews/src/components/comment/index.tsx b/examples/hackernews/src/components/comment/index.tsx
@@ -1,63 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import { Link } from '@umijs/tnf/router';
-import { fetchItem } from '../../services';
-import { pluralize, timeAgo } from '../../utils';
+import React, { Link } from '@umijs/tnf/router';
+import type { CommentType } from '../../types';
+import { timeAgo } from '../../utils';
 import styles from './index.module.less';
 
-interface CommentProps {
-  id: number;
-}
-
-interface CommentType {
-  by: string;
-  time: number;
-  text: string;
-  kids?: number[];
-}
-export default function Comment({ id }: CommentProps) {
-  const [open, setOpen] = useState(true);
-  const [comment, setComment] = useState<CommentType | null>(null);
-
-  useEffect(() => {
-    async function fetchComments() {
-      setComment(await fetchItem(id));
-    }
-
-    fetchComments();
-  }, []);
-
+export default function Comment({ comment }: { comment: CommentType }) {
   if (!comment) return null;
+
   return (
     <div className={styles.normal}>
       <div className={styles.by}>
         <Link to={`/user/${comment.by}`}>{comment.by}</Link>
         <span>{` ${timeAgo(comment.time)} ago`}</span>
-        {comment.kids ? (
-          <span>
-            {' '}
-            |{' '}
-            <a
-              href=""
-              className={styles.expand}
-              onClick={(e) => {
-                e.preventDefault();
-                setOpen(!open);
-              }}
-            >
-              {`${open ? 'collapse' : 'expand'} ${pluralize(comment.kids.length)}`}
-            </a>
-          </span>
-        ) : null}
       </div>
       <div
         className={styles.text}
         dangerouslySetInnerHTML={{ __html: comment.text }}
       />
-      <div className={styles.commentChildren}>
-        {comment.kids && open
-          ? comment.kids.map((id) => <Comment key={id} id={id} />)
-          : null}
-      </div>
     </div>
   );
 }
diff --git a/examples/hackernews/src/components/item-list/index.tsx b/examples/hackernews/src/components/item-list/index.tsx
@@ -5,7 +5,7 @@ import styles from './index.module.less';
 
 interface ItemListProps {
   type: keyof Lists;
-  page: number;
+  page?: number;
   maxPage: number;
   items: ItemProps[];
 }
@@ -21,7 +21,7 @@ interface Lists {
 export default function ItemList({
   type,
   items,
-  page,
+  page = 1,
   maxPage,
 }: ItemListProps) {
   return (

diff --git a/examples/hackernews/src/components/item-page/index.tsx b/examples/hackernews/src/components/item-page/index.tsx
@@ -1,10 +1,16 @@
 import React, { Link } from '@umijs/tnf/router';
-import type { ItemProps } from '../../types';
+import type { CommentType, ItemProps } from '../../types';
 import { host, timeAgo } from '../../utils';
 import Comment from '../comment';
 import styles from './index.module.less';
 
-export default function ItemPage({ item }: { item: ItemProps }) {
+export default function ItemPage({
+  item,
+  comments,
+}: {
+  item: ItemProps;
+  comments: CommentType[];
+}) {
   if (!item) return null;
   return (
     <>
@@ -26,8 +32,10 @@ export default function ItemPage({ item }: { item: ItemProps }) {
           {item.kids ? `${item.descendants} comments` : 'No comments yet.'}
         </p>
         <div className={styles.commentChildren}>
-          {item.kids
-            ? item.kids.map((id) => <Comment key={id} id={id} />)
+          {comments
+            ? comments.map((item: CommentType) => (
+                <Comment key={item.id} comment={item} />
+              ))
             : null}
         </div>
       </div>

diff --git a/examples/hackernews/src/components/item/index.tsx b/examples/hackernews/src/components/item/index.tsx
@@ -30,7 +30,7 @@ export default function Item({ item }: ItemProps) {
             <span className={styles.host}> ({host(url)})</span>
           </span>
         ) : (
-          <Link to={`/item/$id`} params={{ id }}>
+          <Link to={`/item/$itemId`} params={{ itemId: id }}>
             {title}
           </Link>
         )}
@@ -49,7 +49,7 @@ export default function Item({ item }: ItemProps) {
         {type !== 'job' ? (
           <span className={styles.commentsLink}>
             <span>{' | '}</span>
-            <Link to={`/item/$id`} params={{ id }}>
+            <Link to={`/item/$itemId`} params={{ itemId: id }}>
               {descendants} comments
             </Link>
           </span>

diff --git a/examples/hackernews/src/pages/__root.tsx b/examples/hackernews/src/pages/__root.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import React, { Link, Outlet, createRootRoute } from '@umijs/tnf/router';
 import '../global.less';
 import styles from './index.module.less';
@@ -15,43 +16,25 @@ export const Route = createRootRoute({
                 src="https://zos.alipayobjects.com/rmsportal/AsASAiphPWWUJWG.png"
               />
             </Link>
-            <Link
-              activeProps={{ className: styles['active'] }}
-              to="/top/$page"
-              params={{ page: 1 }}
-            >
-              Top
-            </Link>
-            <Link
-              activeProps={{ className: styles['active'] }}
-              to="/new/$page"
-              params={{ page: 1 }}
-            >
-              New
-            </Link>
-            <Link
-              activeProps={{ className: styles['active'] }}
-              to="/show/$page"
-              params={{ page: 1 }}
-            >
-              Show
-            </Link>
-            <Link
-              activeProps={{ className: styles['active'] }}
-              to="/ask/$page"
-              params={{ page: 1 }}
-            >
-              Ask
-            </Link>
-            <Link
-              activeProps={{ className: styles['active'] }}
-              to="/job/$page"
-              params={{ page: 1 }}
-            >
-              Jobs
-            </Link>
+            {(
+              [
+                ['/top/$page', 'Top'],
+                ['/new/$page', 'New'],
+                ['/show/$page', 'Show'],
+                ['/ask/$page', 'Ask'],
+                ['/job/$page', 'Jobs'],
+              ] as const
+            ).map(([to, label]) => {
+              return (
+                <Fragment key={to}>
+                  <Link to={to} preload="intent" params={{ page: 1 }}>
+                    {label}
+                  </Link>
+                </Fragment>
+              );
+            })}
             <span className={styles.github}>
-              Built with{' '}
+              Built with
               <a
                 rel="noopener noreferrer"
                 href="https://github.com/umijs/tnf"

diff --git a/examples/hackernews/src/pages/item.$itemId.tsx b/examples/hackernews/src/pages/item.$itemId.tsx
@@ -4,11 +4,15 @@ import { fetchItem } from '../services';
 
 export const Route = createFileRoute('/item/$itemId')({
   component: Item,
-  loader: async ({ params }: { params: { itemId: string } }) =>
-    await fetchItem(params.itemId),
+  loader: async ({ params }: { params: { itemId: string } }) => {
+    const item = await fetchItem(params.itemId);
+    const commentPromises = item.kids.map(async (id) => await fetchItem(id));
+    const comments = await Promise.all(commentPromises);
+    return { item, comments };
+  },
 });
 
 function Item() {
-  const item = Route.useLoaderData();
-  return <ItemPage item={item} />;
+  const { item, comments } = Route.useLoaderData();
+  return <ItemPage item={item} comments={comments} />;
 }
diff --git a/examples/hackernews/src/types/index.ts b/examples/hackernews/src/types/index.ts
@@ -14,6 +14,14 @@ export interface ItemProps {
   kids?: number[];
 }
 
+export interface CommentType {
+  id: number;
+  by: string;
+  time: number;
+  text: string;
+  kids?: number[];
+}
+
 export interface FetchListResult {
   items: ItemProps[];
   maxPage: number;

diff --git a/package.json b/package.json
@@ -53,8 +53,8 @@
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
     "random-color": "^1.0.1",
-    "react": "19.0.0-rc-02c0e824-20241028",
-    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sirv": "^3.0.0",
     "spdy": "^4.0.2",
     "yargs-parser": "^21.1.1",
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ @@
     .text {
       font-size: 0.9em;
       padding: 1em 0;
+      overflow: hidden;
     }
     .by {
@@ Expand Down @@