Skip to content

Commit 556c4b8

Browse files
svedovasvedova
committed
feat: prepare client-side
1 parent 9b2a2f7 commit 556c4b8

File tree

9 files changed

+240
-51
lines changed

9 files changed

+240
-51
lines changed

‎public/vite.svg renamed to ‎public/logo.svg

File renamed without changes.

‎public/stormkit-logo.svg

+7
Loading

‎src/App.css

-41
This file was deleted.

‎src/entry-client.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import { BrowserRouter } from "react-router-dom";
4+
import createRoutes from "./routes";
5+
import App from "./App";
6+
import Context from "./context";
7+
import "./index.css";
8+
9+
declare global {
10+
interface Window {
11+
CONTEXT: any;
12+
}
13+
}
14+
15+
const mount = (children: React.ReactNode) => {
16+
const root = document.getElementById("root") as HTMLElement;
17+
18+
if (window.CONTEXT) {
19+
ReactDOM.hydrateRoot(root, children);
20+
} else {
21+
ReactDOM.createRoot(root).render(children);
22+
}
23+
};
24+
25+
(async () => {
26+
const { routes } = await createRoutes(window.location.pathname);
27+
const context = window.CONTEXT;
28+
29+
mount(
30+
<React.StrictMode>
31+
<Context.Provider value={context}>
32+
<BrowserRouter>
33+
<App routes={routes} />
34+
</BrowserRouter>
35+
</Context.Provider>
36+
</React.StrictMode>
37+
);
38+
})();

‎src/index.css

+51
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,54 @@ button:focus-visible {
6868
background-color: #f9f9f9;
6969
}
7070
}
71+
72+
#root {
73+
max-width: 1280px;
74+
margin: 0 auto;
75+
padding: 2rem;
76+
text-align: center;
77+
}
78+
79+
.logo {
80+
height: 6em;
81+
padding: 1.5em;
82+
will-change: filter;
83+
}
84+
.logo:hover {
85+
filter: drop-shadow(0 0 2em #646cffaa);
86+
}
87+
.logo.react:hover {
88+
filter: drop-shadow(0 0 2em #61dafbaa);
89+
}
90+
91+
@keyframes logo-spin {
92+
from {
93+
transform: rotate(0deg);
94+
}
95+
to {
96+
transform: rotate(360deg);
97+
}
98+
}
99+
100+
@media (prefers-reduced-motion: no-preference) {
101+
a:nth-of-type(2) .logo {
102+
animation: logo-spin infinite 20s linear;
103+
}
104+
}
105+
106+
.list {
107+
padding: 2em;
108+
}
109+
110+
.powered-by {
111+
display: flex;
112+
align-items: center;
113+
justify-content: center;
114+
color: #888;
115+
}
116+
117+
.powered-by img {
118+
width: 12rem;
119+
display: inline-block;
120+
margin-left: 0.5rem;
121+
}

‎src/main.tsx

-10
This file was deleted.

‎src/pages/[name].tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { useContext } from "react";
2+
import { Link } from "react-router-dom";
3+
import reactLogo from "~/assets/react.svg";
4+
import Context from "~/context";
5+
6+
// If a route exports `fetchData` method, it will be called
7+
// on the server side. The returned optional `head` property will be
8+
// injected into HTML for SEO, and the optional `context` property
9+
// will be made available on the client-side.
10+
export const fetchData: FetchDataFunc = (match) => {
11+
return new Promise((resolve) => {
12+
setTimeout(() => {
13+
resolve({
14+
head: { title: match.name },
15+
context: { serverTime: Date.now() },
16+
});
17+
}, 1000);
18+
});
19+
};
20+
21+
const Home: React.FC = () => {
22+
const context = useContext(Context);
23+
24+
return (
25+
<div className="App">
26+
<div>
27+
<a href="https://vitejs.dev" target="_blank">
28+
<img src="/logo.svg" className="logo" alt="Vite logo" />
29+
</a>
30+
<a href="https://reactjs.org" target="_blank">
31+
<img src={reactLogo} className="logo react" alt="React logo" />
32+
</a>
33+
</div>
34+
<h1>Vite + React</h1>
35+
<div className="list">
36+
{context ? (
37+
<>
38+
<p>
39+
This page is server side rendered. <br />
40+
Check the source code and search for the{" "}
41+
<code>window.CONTEXT</code> object.
42+
</p>
43+
<p>
44+
Context generated on the server-side:
45+
<br /> <code>{JSON.stringify(context)}</code>
46+
</p>
47+
<p>
48+
Go back to <Link to="/">home page</Link>.
49+
</p>
50+
</>
51+
) : (
52+
<p>
53+
This page has ssr support. Refresh the page and check the content.
54+
</p>
55+
)}
56+
</div>
57+
<p className="powered-by">
58+
Template by{" "}
59+
<a
60+
href="https://www.stormkit.io/"
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
>
64+
<img src="/stormkit-logo.svg" />
65+
</a>
66+
</p>
67+
</div>
68+
);
69+
};
70+
71+
export default Home;

‎src/pages/index.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Link } from "react-router-dom";
2+
import reactLogo from "~/assets/react.svg";
3+
4+
const Home: React.FC = () => {
5+
return (
6+
<div className="App">
7+
<div>
8+
<a href="https://vitejs.dev" target="_blank">
9+
<img src="/logo.svg" className="logo" alt="Vite logo" />
10+
</a>
11+
<a href="https://reactjs.org" target="_blank">
12+
<img src={reactLogo} className="logo react" alt="React logo" />
13+
</a>
14+
</div>
15+
<h1>Vite + React</h1>
16+
<div className="list">
17+
<p>
18+
Visit <Link to="/ssr">/my-dynamic-url</Link> to see the
19+
server-side-rendered content.
20+
</p>
21+
<p>
22+
Checkout template from{" "}
23+
<a href="https://github.com/stormkit-io/monorepo-template">GitHub</a>
24+
</p>
25+
</div>
26+
<p className="powered-by">
27+
Template by{" "}
28+
<a
29+
href="https://www.stormkit.io/"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
>
33+
<img src="/stormkit-logo.svg" />
34+
</a>
35+
</p>
36+
</div>
37+
);
38+
};
39+
40+
export default Home;

‎src/pages/ssg.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useState } from "react";
2+
import reactLogo from "~/assets/react.svg";
3+
4+
const Home: React.FC = () => {
5+
const [count, setCount] = useState(0);
6+
7+
return (
8+
<div className="App">
9+
<div>
10+
<a href="https://vitejs.dev" target="_blank">
11+
<img src="/vite.svg" className="logo" alt="Vite logo" />
12+
</a>
13+
<a href="https://reactjs.org" target="_blank">
14+
<img src={reactLogo} className="logo react" alt="React logo" />
15+
</a>
16+
</div>
17+
<h1>Vite + React monorepo template</h1>
18+
<div className="card">
19+
<button onClick={() => setCount((count) => count + 1)}>
20+
count is {count}
21+
</button>
22+
<p>
23+
Edit <code>src/pages/index.tsx</code> and save to test HMR
24+
</p>
25+
</div>
26+
<p className="read-the-docs">
27+
Click on the Vite and React logos to learn more
28+
</p>
29+
</div>
30+
);
31+
};
32+
33+
export default Home;

0 commit comments

Comments
 (0)