Skip to content

Commit 1d3591b

Browse files
sudo-barunsudo-barun
committed
update server-side render
1 parent 9e276b9 commit 1d3591b

File tree

13 files changed

+416
-26
lines changed

13 files changed

+416
-26
lines changed

‎demos-ssr/data-picsum-photos.json‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
[
2+
{
3+
"id": "283",
4+
"author": "Wojtek Witkowski",
5+
"width": 3823,
6+
"height": 2538,
7+
"url": "https://unsplash.com/photos/GtxZbYMCiPY",
8+
"download_url": "https://picsum.photos/id/283/3823/2538"
9+
},
10+
{
11+
"id": "284",
12+
"author": "Ariana Prestes",
13+
"width": 2048,
14+
"height": 1365,
15+
"url": "https://unsplash.com/photos/MpSnQAUTgcE",
16+
"download_url": "https://picsum.photos/id/284/2048/1365"
17+
},
18+
{
19+
"id": "287",
20+
"author": "Aleksandra Boguslawska",
21+
"width": 4288,
22+
"height": 2848,
23+
"url": "https://unsplash.com/photos/c54ZhWDLEDo",
24+
"download_url": "https://picsum.photos/id/287/4288/2848"
25+
},
26+
{
27+
"id": "288",
28+
"author": "Stockholm",
29+
"width": 3888,
30+
"height": 2592,
31+
"url": "https://unsplash.com/photos/eVBg7A07NGg",
32+
"download_url": "https://picsum.photos/id/288/3888/2592"
33+
},
34+
{
35+
"id": "289",
36+
"author": "Jennifer Langley",
37+
"width": 2800,
38+
"height": 1508,
39+
"url": "https://unsplash.com/photos/vIqxsp0_p1g",
40+
"download_url": "https://picsum.photos/id/289/2800/1508"
41+
},
42+
{
43+
"id": "290",
44+
"author": "Aleksandar Vacić",
45+
"width": 3456,
46+
"height": 2304,
47+
"url": "https://unsplash.com/photos/nAZOGbSWK9o",
48+
"download_url": "https://picsum.photos/id/290/3456/2304"
49+
},
50+
{
51+
"id": "291",
52+
"author": "Caleb George",
53+
"width": 3264,
54+
"height": 2176,
55+
"url": "https://unsplash.com/photos/zdjOYZeJj3w",
56+
"download_url": "https://picsum.photos/id/291/3264/2176"
57+
},
58+
{
59+
"id": "292",
60+
"author": "Webvilla",
61+
"width": 3852,
62+
"height": 2556,
63+
"url": "https://unsplash.com/photos/hv1MrBzGGNY",
64+
"download_url": "https://picsum.photos/id/292/3852/2556"
65+
},
66+
{
67+
"id": "293",
68+
"author": "Paul E. Harrer",
69+
"width": 5000,
70+
"height": 3333,
71+
"url": "https://unsplash.com/photos/AJqHzUbc1io",
72+
"download_url": "https://picsum.photos/id/293/5000/3333"
73+
},
74+
{
75+
"id": "294",
76+
"author": "Robin Benad",
77+
"width": 3753,
78+
"height": 2309,
79+
"url": "https://unsplash.com/photos/NKV6xXErcyY",
80+
"download_url": "https://picsum.photos/id/294/3753/2309"
81+
},
82+
{
83+
"id": "295",
84+
"author": "Olivia Henry",
85+
"width": 4272,
86+
"height": 2848,
87+
"url": "https://unsplash.com/photos/-_rYK0egLWE",
88+
"download_url": "https://picsum.photos/id/295/4272/2848"
89+
},
90+
{
91+
"id": "296",
92+
"author": "Greg Shield",
93+
"width": 3072,
94+
"height": 2048,
95+
"url": "https://unsplash.com/photos/Du30R57aCyM",
96+
"download_url": "https://picsum.photos/id/296/3072/2048"
97+
},
98+
{
99+
"id": "297",
100+
"author": "André Robillard",
101+
"width": 5000,
102+
"height": 3224,
103+
"url": "https://unsplash.com/photos/IUwLkxL49co",
104+
"download_url": "https://picsum.photos/id/297/5000/3224"
105+
},
106+
{
107+
"id": "299",
108+
"author": "Matthew Wiebe",
109+
"width": 5000,
110+
"height": 3288,
111+
"url": "https://unsplash.com/photos/nOhUx3tiaQQ",
112+
"download_url": "https://picsum.photos/id/299/5000/3288"
113+
},
114+
{
115+
"id": "300",
116+
"author": "Pavel Voinov",
117+
"width": 4272,
118+
"height": 2848,
119+
"url": "https://unsplash.com/photos/2f_CnEeZsVg",
120+
"download_url": "https://picsum.photos/id/300/4272/2848"
121+
},
122+
{
123+
"id": "301",
124+
"author": "Tirza van Dijk",
125+
"width": 4752,
126+
"height": 3168,
127+
"url": "https://unsplash.com/photos/Tn4Su6l4j_s",
128+
"download_url": "https://picsum.photos/id/301/4752/3168"
129+
},
130+
{
131+
"id": "302",
132+
"author": "Billy Lam",
133+
"width": 1728,
134+
"height": 1080,
135+
"url": "https://unsplash.com/photos/O3rmGgNYLKo",
136+
"download_url": "https://picsum.photos/id/302/1728/1080"
137+
},
138+
{
139+
"id": "304",
140+
"author": "Drew Patrick Miller",
141+
"width": 5000,
142+
"height": 3324,
143+
"url": "https://unsplash.com/photos/_o6AAx9dl_Y",
144+
"download_url": "https://picsum.photos/id/304/5000/3324"
145+
},
146+
{
147+
"id": "305",
148+
"author": "Dominik Martin",
149+
"width": 4928,
150+
"height": 3264,
151+
"url": "https://unsplash.com/photos/B6uUPYt7wz4",
152+
"download_url": "https://picsum.photos/id/305/4928/3264"
153+
},
154+
{
155+
"id": "306",
156+
"author": "Schicka",
157+
"width": 1024,
158+
"height": 768,
159+
"url": "https://unsplash.com/photos/6T7kfc3VitU",
160+
"download_url": "https://picsum.photos/id/306/1024/768"
161+
},
162+
{
163+
"id": "307",
164+
"author": "Keith Misner",
165+
"width": 5000,
166+
"height": 3333,
167+
"url": "https://unsplash.com/photos/h0Vxgz5tyXA",
168+
"download_url": "https://picsum.photos/id/307/5000/3333"
169+
},
170+
{
171+
"id": "308",
172+
"author": "Charles L.",
173+
"width": 1536,
174+
"height": 1024,
175+
"url": "https://unsplash.com/photos/5z8CIELxW1Y",
176+
"download_url": "https://picsum.photos/id/308/1536/1024"
177+
},
178+
{
179+
"id": "309",
180+
"author": "Ben Moore",
181+
"width": 3872,
182+
"height": 2592,
183+
"url": "https://unsplash.com/photos/qjs4WqT8Ib0",
184+
"download_url": "https://picsum.photos/id/309/3872/2592"
185+
},
186+
{
187+
"id": "310",
188+
"author": "Dominik Martin",
189+
"width": 4928,
190+
"height": 3264,
191+
"url": "https://unsplash.com/photos/YxNW6SqiDD8",
192+
"download_url": "https://picsum.photos/id/310/4928/3264"
193+
},
194+
{
195+
"id": "311",
196+
"author": "Logan Adermatt",
197+
"width": 1000,
198+
"height": 563,
199+
"url": "https://unsplash.com/photos/VkF8pVVoFg0",
200+
"download_url": "https://picsum.photos/id/311/1000/563"
201+
},
202+
{
203+
"id": "312",
204+
"author": "Sonja Langford",
205+
"width": 3888,
206+
"height": 2592,
207+
"url": "https://unsplash.com/photos/RQHzRELE2Ss",
208+
"download_url": "https://picsum.photos/id/312/3888/2592"
209+
},
210+
{
211+
"id": "313",
212+
"author": "Sonja Langford",
213+
"width": 3888,
214+
"height": 2592,
215+
"url": "https://unsplash.com/photos/4xYgBTYC2-Q",
216+
"download_url": "https://picsum.photos/id/313/3888/2592"
217+
},
218+
{
219+
"id": "314",
220+
"author": "Fré Sonneveld",
221+
"width": 4608,
222+
"height": 3072,
223+
"url": "https://unsplash.com/photos/1rZcfdsjoR4",
224+
"download_url": "https://picsum.photos/id/314/4608/3072"
225+
},
226+
{
227+
"id": "315",
228+
"author": "Liam Andrew",
229+
"width": 2100,
230+
"height": 1500,
231+
"url": "https://unsplash.com/photos/W7CopGaHkEM",
232+
"download_url": "https://picsum.photos/id/315/2100/1500"
233+
},
234+
{
235+
"id": "316",
236+
"author": "Philipp Reiner",
237+
"width": 4000,
238+
"height": 2667,
239+
"url": "https://unsplash.com/photos/M8PV59TCj6E",
240+
"download_url": "https://picsum.photos/id/316/4000/2667"
241+
}
242+
]

‎demos-ssr/gallery.html‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,6 @@
99
<link rel="stylesheet" href="assets/common.css">
1010
<link rel="stylesheet" href="assets/page.css">
1111
<link rel="stylesheet" href="assets/gallery.css">
12-
13-
<style>
14-
body {
15-
font-family: sans-serif;
16-
}
17-
</style>
18-
1912
</head>
2013
<body>
2114

‎demos-ssr/gallery.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import hydrate from "./js/lib/ts/dom/hydrate.js";
1+
import hydrate from "./js/node_modules/@xylem-js/xylem-js/ts/dom/hydrate.js";
22
import Root from "./js/ts/gallery/components/Root.js";
33

44
const component = new Root(INITIAL_DATA);

‎demos-ssr/gallery.php‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,25 @@
55
error_reporting(E_ALL);
66

77
define('NODE_PATH', '');
8-
define('API_BASE_URL', '');
9-
10-
$initialData = json_decode(file_get_contents(__DIR__ . '/data.json'), true);
11-
$initialData['galleryImages'] = array_map(function ($image) {
12-
$image['url'] = API_BASE_URL . $image['url'];
13-
return $image;
14-
}, $initialData['galleryImages']);
8+
// define('API_BASE_URL', '');
9+
10+
// $initialData = json_decode(file_get_contents(__DIR__ . '/data.json'), true);
11+
// $initialData['galleryImages'] = array_map(function ($image) {
12+
// $image['url'] = API_BASE_URL . $image['url'];
13+
// return $image;
14+
// }, $initialData['galleryImages']);
15+
$galleryImages = json_decode(file_get_contents(__DIR__ . '/data-picsum-photos.json'), true);
16+
// $galleryImages = json_decode(file_get_contents('https://picsum.photos/v2/list?page=10'), true);
17+
$galleryImages = array_slice($galleryImages, 0, 10);
18+
$galleryImages = array_map(function ($image) {
19+
return [
20+
'url' => $image['download_url'],
21+
'caption' => "{$image['download_url']} (by {$image['author']})",
22+
];
23+
}, $galleryImages);
24+
$initialData = [
25+
'galleryImages' => $galleryImages,
26+
];
1527
$jsonMinified = json_encode($initialData);
1628

1729
$tempFile = tmpfile();

‎demos-ssr/generate-gallery.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import fs from "fs";
22
import Root from "../js/ts/gallery/components/Root.js";
3-
import stringifyComponent from "../js/lib/ts/server/stringifyComponent.js";
3+
import stringifyComponent from "../js/node_modules/@xylem-js/xylem-js/ts/server/stringifyComponent.js";
44

55
let initialData = null;
66

‎demos-ssr/server.js‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import * as fs from 'node:fs';
22
import * as http from 'node:http';
33
import * as path from 'node:path';
44

5-
import "../js/lib/ts/core/createStore.js";
6-
import parse from "../js/lib/ts/server/parse.js";
5+
import stringifyComponent from "../js/node_modules/@xylem-js/xylem-js/ts/server/stringifyComponent.js";
76
import Root from "../js/ts/gallery/components/Root.js";
87

98
const PORT = 8000;
@@ -47,13 +46,14 @@ http.createServer(async (req, res) => {
4746
const mimeType = MIME_TYPES[file.ext] || MIME_TYPES.default;
4847
res.writeHead(statusCode, { 'Content-Type': mimeType });
4948
file.stream.pipe(res);
50-
console.log(`${req.method} ${req.url} ${statusCode}`);
49+
console.log(`${new Date().toISOString()} ${req.method} ${req.url} ${statusCode}`);
5150

5251
} else {
5352

5453
const component = new Root();
5554
component.setModifier(modifier);
56-
const html = parse(component);
55+
component.setup();
56+
const html = stringifyComponent(component);
5757

5858
const fileContent = await fs.promises.readFile('gallery.html', 'utf-8');
5959

@@ -75,14 +75,24 @@ http.createServer(async (req, res) => {
7575
console.log(`Server running at http://127.0.0.1:${PORT}/`);
7676

7777

78-
const API_BASE_URL = '';
78+
// const API_BASE_URL = '';
7979

80-
const initialData = JSON.parse(fs.readFileSync('data.json', 'utf-8'));
80+
// const initialData = JSON.parse(fs.readFileSync('data.json', 'utf-8'));
8181

82-
initialData.galleryImages = initialData.galleryImages.map((image) => {
83-
image.url = API_BASE_URL + image.url;
84-
return image;
85-
});
82+
// initialData.galleryImages = initialData.galleryImages.map((image) => {
83+
// image.url = API_BASE_URL + image.url;
84+
// return image;
85+
// });
86+
87+
let galleryImages = JSON.parse(fs.readFileSync('data-picsum-photos.json', 'utf-8'));
88+
galleryImages = galleryImages.slice(0, 10);
89+
galleryImages = galleryImages.slice(0, 10).map((image) => ({
90+
url: image.download_url,
91+
caption: `${image.download_url} (by ${image.author}`,
92+
}));
93+
const initialData = {
94+
galleryImages,
95+
};
8696

8797
function modifier(component)
8898
{

‎js/node_modules/@xylem-js/xylem-js/package.json‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)