Skip to content

Commit 595d27b

Browse files
gaearongaearon
authored
[Blocks Fixture] Drop the Blocks (facebook#18837)
* [Blocks Fixture] Add a tiny router * Add a way to load nested entrypoint * Only expose URL params to nested routers * Add keys to route definitions * [Blocks Fixture] Drop the Blocks
1 parent 823dc58 commit 595d27b

18 files changed

+272
-222
lines changed

‎fixtures/blocks/src/Router.js

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,16 @@ import React, {
1515
} from 'react';
1616
import {createCache, CacheProvider} from 'react/unstable-cache';
1717
import {RouterProvider} from './client/RouterContext';
18-
// TODO: entry point. This can't really done in the client code.
19-
import loadApp from './server/App.block';
18+
// TODO: can't really import a server component on the client.
19+
import App from './server/App';
2020

2121
const initialUrl = window.location.pathname;
22-
2322
const initialState = {
2423
// TODO: use this for invalidation.
2524
cache: createCache(),
2625
url: initialUrl,
2726
pendingUrl: initialUrl,
28-
RootBlock: loadApp(initialUrl),
27+
root: <App route={initialUrl} />,
2928
};
3029

3130
function reducer(state, action) {
@@ -41,7 +40,7 @@ function reducer(state, action) {
4140
...state,
4241
url: action.url,
4342
pendingUrl: action.url,
44-
RootBlock: action.RootBlock,
43+
root: action.root,
4544
};
4645
default:
4746
throw new Error();
@@ -65,7 +64,7 @@ function Router() {
6564
// TODO: Instant Transitions, somehow.
6665
dispatch({
6766
type: 'completeNavigation',
68-
RootBlock: loadApp(url),
67+
root: <App route={url} />,
6968
url,
7069
});
7170
});
@@ -97,9 +96,7 @@ function Router() {
9796
return (
9897
<Suspense fallback={<h2>Loading...</h2>}>
9998
<CacheProvider value={state.cache}>
100-
<RouterProvider value={routeContext}>
101-
<state.RootBlock />
102-
</RouterProvider>
99+
<RouterProvider value={routeContext}>{state.root}</RouterProvider>
103100
</CacheProvider>
104101
</Suspense>
105102
);

‎fixtures/blocks/src/client/ProfileNav.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
/* eslint-disable import/first */
8+
9+
import * as React from 'react';
10+
11+
import {TabBar, TabLink} from '../client/TabNav';
12+
13+
export default function ProfileNav({userId}) {
14+
// TODO: Don't hardcode ID.
15+
return (
16+
<TabBar>
17+
<TabLink to={`/profile/${userId}`}>Timeline</TabLink>
18+
<TabLink to={`/profile/${userId}/bio`}>Bio</TabLink>
19+
</TabBar>
20+
);
21+
}

‎fixtures/blocks/src/server/App.block.js

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎fixtures/blocks/src/server/App.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
/* eslint-disable import/first */
8+
9+
import * as React from 'react';
10+
import {matchRoute} from './ServerRouter';
11+
import FeedPage from './FeedPage';
12+
import ProfilePage from './ProfilePage';
13+
14+
// TODO: Replace with asset reference.
15+
import loadShell from './Shell.block';
16+
17+
// TODO: Router component?
18+
const AppRoutes = {
19+
'/': props => <FeedPage {...props} key="home" />,
20+
'/profile/:userId/*': props => (
21+
<ProfilePage {...props} key={`profile-${props.userId}`} />
22+
),
23+
};
24+
25+
export default function App(props) {
26+
const Shell = loadShell();
27+
const match = matchRoute(props, AppRoutes);
28+
return <Shell>{match}</Shell>;
29+
}

‎fixtures/blocks/src/server/Comments.block.js renamed to ‎fixtures/blocks/src/server/Comments.js

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,19 @@
77
/* eslint-disable import/first */
88

99
import * as React from 'react';
10-
import {unstable_block as block} from 'react';
11-
12-
// Server
13-
1410
import {fetch} from 'react-data/fetch';
1511

16-
function load(postId) {
17-
return {
18-
comments: fetch(`/comments?postId=${postId}&_expand=user`).json(),
19-
};
20-
}
21-
22-
// Client
23-
24-
import Link from '../client/Link';
12+
// TODO: Replace with asset reference.
13+
import loadLink from './Link.block';
2514

26-
function Comments(props, data) {
15+
export default function Comments({postId}) {
16+
const Link = loadLink();
17+
const comments = fetch(`/comments?postId=${postId}&_expand=user`).json();
2718
return (
2819
<>
2920
<h5>Comments</h5>
3021
<ul>
31-
{data.comments.slice(0, 5).map(comment => (
22+
{comments.slice(0, 5).map(comment => (
3223
<li key={comment.id}>
3324
{comment.body}
3425
{' • '}
@@ -39,5 +30,3 @@ function Comments(props, data) {
3930
</>
4031
);
4132
}
42-
43-
export default block(Comments, load);

‎fixtures/blocks/src/server/FeedPage.block.js renamed to ‎fixtures/blocks/src/server/Feed.js

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,15 @@
77
/* eslint-disable import/first */
88

99
import * as React from 'react';
10-
import {unstable_block as block} from 'react';
1110
import {fetch} from 'react-data/fetch';
12-
13-
// Server
14-
1511
import PostList from './PostList';
1612

17-
function load(params) {
18-
const allPosts = fetch('/posts?_expand=user').json();
19-
return {
20-
posts: <PostList posts={allPosts} />,
21-
};
22-
}
23-
24-
// Client
25-
26-
function FeedPage(props, data) {
13+
export default function Feed() {
14+
const posts = fetch('/posts?_expand=user').json();
2715
return (
2816
<>
2917
<h2>Feed</h2>
30-
{data.posts}
18+
<PostList posts={posts} />
3119
</>
3220
);
3321
}
34-
35-
export default block(FeedPage, load);

‎fixtures/blocks/src/server/FeedPage.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
/* eslint-disable import/first */
8+
9+
import * as React from 'react';
10+
import {Suspense} from 'react';
11+
import PostGlimmer from './PostGlimmer';
12+
import Feed from './Feed';
13+
14+
export default function FeedPage() {
15+
return (
16+
<Suspense fallback={<PostGlimmer />}>
17+
<Feed />
18+
</Suspense>
19+
);
20+
}

‎fixtures/blocks/src/server/Link.block.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
/* eslint-disable import/first */
8+
9+
import * as React from 'react';
10+
import {unstable_block as block} from 'react';
11+
12+
// Client
13+
14+
// TODO: delete this wrapper.
15+
16+
import ClientLink from '../client/Link';
17+
18+
function Link(props, _) {
19+
return <ClientLink {...props} />;
20+
}
21+
22+
export default block(Link);

‎fixtures/blocks/src/server/Post.block.js renamed to ‎fixtures/blocks/src/server/Post.js

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,14 @@
77
/* eslint-disable import/first */
88

99
import * as React from 'react';
10-
import {unstable_block as block, Suspense} from 'react';
10+
import {Suspense} from 'react';
11+
import Comments from './Comments';
1112

12-
// Server
13+
// TODO: Replace with asset reference.
14+
import loadLink from './Link.block';
1315

14-
import loadComments from './Comments.block';
15-
16-
function load(postId) {
17-
return {
18-
Comments: loadComments(postId),
19-
};
20-
}
21-
22-
// Client
23-
24-
import Link from '../client/Link';
25-
26-
function Post(props, data) {
16+
export default function Post({post}) {
17+
const Link = loadLink();
2718
return (
2819
<div
2920
style={{
@@ -34,20 +25,16 @@ function Post(props, data) {
3425
maxWidth: 500,
3526
}}>
3627
<h4 style={{marginTop: 0}}>
37-
{props.post.title}
28+
{post.title}
3829
{' by '}
39-
<Link to={`/profile/${props.post.user.id}`}>
40-
{props.post.user.name}
41-
</Link>
30+
<Link to={`/profile/${post.user.id}`}>{post.user.name}</Link>
4231
</h4>
43-
<p>{props.post.body}</p>
32+
<p>{post.body}</p>
4433
<Suspense
4534
fallback={<h5>Loading comments...</h5>}
4635
unstable_avoidThisFallback={true}>
47-
<data.Comments />
36+
<Comments postId={post.id} />
4837
</Suspense>
4938
</div>
5039
);
5140
}
52-
53-
export default block(Post, load);

‎fixtures/blocks/src/server/PostList.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,14 @@
99
import * as React from 'react';
1010
import {Suspense, unstable_SuspenseList as SuspenseList} from 'react';
1111
import {preload} from 'react-data/fetch';
12-
13-
import loadPost from './Post.block';
1412
import PostGlimmer from './PostGlimmer';
13+
import Post from './Post';
1514

1615
export default function PostList({posts}) {
1716
return (
1817
<SuspenseList revealOrder="forwards" tail="collapsed">
1918
{posts.map(post => {
2019
preload(`/comments?postId=${post.id}&_expand=user`);
21-
const Post = loadPost(post.id);
2220
return (
2321
<Suspense key={post.id} fallback={<PostGlimmer />}>
2422
<Post post={post} />

‎fixtures/blocks/src/server/ProfileBio.block.js renamed to ‎fixtures/blocks/src/server/ProfileBio.js

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,15 @@
77
/* eslint-disable import/first */
88

99
import * as React from 'react';
10-
import {unstable_block as block} from 'react';
11-
12-
// Server
13-
1410
import {fetch} from 'react-data/fetch';
1511

16-
function load(user) {
17-
return {
18-
user,
19-
bio: fetch(`/bios/${user.bioId}`).json(),
20-
};
21-
}
22-
23-
// Client
24-
25-
function ProfileBio(props, data) {
12+
export default function ProfileBio({userId}) {
13+
const user = fetch(`/users/${userId}`).json();
14+
const bio = fetch(`/bios/${user.bioId}`).json().text;
2615
return (
2716
<>
28-
<h3>{data.user.name}'s Bio</h3>
29-
<p>{data.bio.text}</p>
17+
<h3>{user.name}'s Bio</h3>
18+
<p>{bio}</p>
3019
</>
3120
);
3221
}
33-
34-
export default block(ProfileBio, load);

‎fixtures/blocks/src/server/ProfileNav.block.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
/* eslint-disable import/first */
8+
9+
import * as React from 'react';
10+
import {unstable_block as block} from 'react';
11+
12+
// Client
13+
14+
// TODO: delete this wrapper.
15+
16+
import ClientProfileNav from '../client/ProfileNav';
17+
18+
function ProfileNav(props, _) {
19+
return <ClientProfileNav {...props} />;
20+
}
21+
22+
export default block(ProfileNav);

0 commit comments

Comments
 (0)