Skip to content

Commit b735ec4

Browse files
bobrovnikbobrovnik
authored
Introduce plugins and extract resources as a plugin (#192)
1 parent 2fd9c38 commit b735ec4

File tree

36 files changed

+873
-115
lines changed

36 files changed

+873
-115
lines changed

‎examples/basic-routing/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const appRoutes = [
3131

3232
const App = () => {
3333
return (
34-
<Router routes={appRoutes} history={myHistory} basePath="/basic-routing">
34+
<Router basePath="/basic-routing" history={myHistory} routes={appRoutes}>
3535
<RouteComponent />
3636
</Router>
3737
);

‎examples/hooks/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Title = () => {
4747

4848
const App = () => {
4949
return (
50-
<Router routes={appRoutes} history={myHistory} basePath="/hooks">
50+
<Router basePath="/hooks" history={myHistory} routes={appRoutes}>
5151
<Title />
5252
<RouteComponent />
5353
</Router>

‎examples/hydration-with-plugins/home.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
3+
import { createResource, useResource } from 'react-resource-router';
4+
5+
export const homeResource = createResource({
6+
type: 'home',
7+
getKey: () => 'breedList',
8+
maxAge: 10000,
9+
getData: async () => {
10+
const response = await fetch('https://dog.ceo/api/breeds/image/random');
11+
const result: { message: string } = await response.json();
12+
13+
return result;
14+
},
15+
});
16+
17+
export const Home = () => {
18+
// eslint-disable-next-line
19+
const { data, loading, error } = useResource(homeResource);
20+
21+
return (
22+
<div>
23+
<h1>Random Dog</h1>
24+
<section>
25+
{data?.message && <img src={data.message} style={{ width: '400px' }} />}
26+
</section>
27+
</div>
28+
);
29+
};

‎examples/hydration-with-plugins/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Example - Hydration</title>
5+
</head>
6+
7+
<body>
8+
<div id="root"></div>
9+
<script src="bundle.js" type="text/javascript"></script>
10+
</body>
11+
</html>

‎examples/hydration-with-plugins/index.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { createMemoryHistory } from 'history';
2+
import React from 'react';
3+
import { render } from 'react-dom';
4+
import { defaultRegistry } from 'react-sweet-state';
5+
6+
import { createResourcesPlugin } from '../../src/resources';
7+
8+
import { homeRoute } from './routes';
9+
10+
import {
11+
Router,
12+
RouteComponent,
13+
createBrowserHistory,
14+
invokePluginLoad,
15+
} from 'react-resource-router';
16+
17+
const myHistory = createBrowserHistory();
18+
19+
const appRoutes = [homeRoute];
20+
21+
const getStateFromServer = async () => {
22+
const resourcesPlugin = createResourcesPlugin({
23+
resourceData: null,
24+
});
25+
26+
invokePluginLoad([resourcesPlugin], {
27+
history: createMemoryHistory({ initialEntries: [location] }),
28+
routes: appRoutes,
29+
basePath: '/hydration-with-plugins',
30+
});
31+
32+
const resourceData = await resourcesPlugin.getSerializedResources();
33+
34+
// clearing the store
35+
defaultRegistry.stores.clear();
36+
37+
return resourceData;
38+
};
39+
40+
const main = async () => {
41+
const data = await getStateFromServer();
42+
const resourcesPlugin = createResourcesPlugin({
43+
resourceData: data,
44+
});
45+
46+
const App = () => {
47+
return (
48+
<Router
49+
basePath="/hydration-with-plugins"
50+
history={myHistory}
51+
plugins={[resourcesPlugin]}
52+
routes={appRoutes}
53+
>
54+
<RouteComponent />
55+
</Router>
56+
);
57+
};
58+
59+
render(<App />, document.getElementById('root'));
60+
};
61+
62+
main();

‎examples/hydration-with-plugins/routes.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Home, homeResource } from './home';
2+
3+
export const homeRoute = {
4+
name: 'home',
5+
path: '/',
6+
exact: true,
7+
component: Home,
8+
navigation: null,
9+
resources: [homeResource],
10+
};

‎examples/hydration/home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const Home = () => {
2323
<div>
2424
<h1>Random Dog</h1>
2525
<section>
26-
{data?.message && <img style={{ width: '400px' }} src={data.message} />}
26+
{data?.message && <img src={data.message} style={{ width: '400px' }} />}
2727
</section>
2828
</div>
2929
);

‎examples/hydration/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ const main = async () => {
3232
const App = () => {
3333
return (
3434
<Router
35-
routes={appRoutes}
36-
history={myHistory}
3735
basePath="/hydration"
36+
history={myHistory}
3837
resourceData={data}
38+
routes={appRoutes}
3939
>
4040
<RouteComponent />
4141
</Router>

‎examples/routing-with-resources/about.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const About = () => {
3535
<h1>{breedName}</h1>
3636
<Link to={homeRoute}>Go to home</Link>
3737
<section>
38-
{!loading && <img src={data?.message} alt="A cute dog!" />}
38+
{!loading && <img alt="A cute dog!" src={data?.message} />}
3939
</section>
4040
</div>
4141
);

‎examples/routing-with-resources/home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const Home = () => {
2828
<ul>
2929
{breeds.slice(0, 25).map(breed => (
3030
<li key={breed}>
31-
<Link to={aboutRoute} query={{ name: breed }} prefetch="hover">
31+
<Link prefetch="hover" query={{ name: breed }} to={aboutRoute}>
3232
{breed}
3333
</Link>
3434
</li>

0 commit comments

Comments
 (0)