frontend-hamroun 1.1.46 → 1.1.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +329 -149
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +82 -73
- package/dist/index.mjs.map +1 -1
- package/dist/server-renderer.d.ts +2 -1
- package/dist/templates/default.d.ts +11 -0
- package/dist/types.d.ts +3 -6
- package/package.json +1 -1
- package/templates/ssr-template/src/App.tsx +31 -21
- package/templates/ssr-template/src/client.tsx +19 -1
- package/templates/ssr-template/src/server.ts +34 -32
|
@@ -1,11 +1,29 @@
|
|
|
1
1
|
import { hydrate } from 'frontend-hamroun';
|
|
2
2
|
import { App } from './App';
|
|
3
3
|
|
|
4
|
+
// Type-safe initial state access
|
|
5
|
+
declare global {
|
|
6
|
+
interface Window {
|
|
7
|
+
__INITIAL_STATE__: {
|
|
8
|
+
url: string;
|
|
9
|
+
user: any;
|
|
10
|
+
settings: {
|
|
11
|
+
theme: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
}
|
|
4
16
|
|
|
17
|
+
// Get state from server
|
|
18
|
+
const initialState = window.__INITIAL_STATE__;
|
|
5
19
|
|
|
6
20
|
document.addEventListener('DOMContentLoaded', () => {
|
|
7
21
|
hydrate(
|
|
8
|
-
<App
|
|
22
|
+
<App
|
|
23
|
+
initialUrl={initialState.url}
|
|
24
|
+
initialSettings={initialState.settings}
|
|
25
|
+
user={initialState.user}
|
|
26
|
+
/>,
|
|
9
27
|
document.getElementById('root')!
|
|
10
28
|
);
|
|
11
29
|
});
|
|
@@ -1,46 +1,48 @@
|
|
|
1
1
|
import express from 'express';
|
|
2
2
|
import path from 'path';
|
|
3
3
|
import { fileURLToPath } from 'url';
|
|
4
|
-
import { renderToString
|
|
5
|
-
import { App } from './App
|
|
6
|
-
import fs from 'fs';
|
|
4
|
+
import { renderToString } from 'frontend-hamroun';
|
|
5
|
+
import { App } from './App';
|
|
7
6
|
|
|
8
7
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
9
8
|
const app = express();
|
|
10
9
|
const port = 3000;
|
|
11
10
|
|
|
12
|
-
//
|
|
13
|
-
|
|
14
|
-
const assetsDir = path.join(__dirname, './');
|
|
15
|
-
const files = fs.readdirSync(assetsDir);
|
|
16
|
-
return files.find(file => file.startsWith("client")&& file.endsWith('.js'));
|
|
17
|
-
};
|
|
11
|
+
// Static files
|
|
12
|
+
app.use('/assets', express.static(path.join(__dirname, './assets')));
|
|
18
13
|
|
|
19
|
-
//
|
|
20
|
-
app.
|
|
14
|
+
// All routes handler
|
|
15
|
+
app.get('*', async (req, res) => {
|
|
16
|
+
try {
|
|
17
|
+
// Get initial state based on route
|
|
18
|
+
const initialState = {
|
|
19
|
+
url: req.url,
|
|
20
|
+
user: null, // Add your user data here
|
|
21
|
+
settings: { theme: 'light' }
|
|
22
|
+
};
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
24
|
+
const html = await renderToString(<App />, {
|
|
25
|
+
title: 'My SSR App',
|
|
26
|
+
description: 'Server-side rendered application',
|
|
27
|
+
scripts: ['/assets/client.js'],
|
|
28
|
+
styles: ['/assets/styles.css'],
|
|
29
|
+
initialState,
|
|
30
|
+
meta: {
|
|
31
|
+
'theme-color': '#ffffff',
|
|
32
|
+
'og:title': 'My SSR App'
|
|
33
|
+
},
|
|
34
|
+
bodyAttrs: {
|
|
35
|
+
'data-theme': initialState.settings.theme
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
res.send(html);
|
|
40
|
+
} catch (error) {
|
|
41
|
+
console.error('Rendering error:', error);
|
|
42
|
+
res.status(500).send('Server Error');
|
|
43
|
+
}
|
|
42
44
|
});
|
|
43
45
|
|
|
44
46
|
app.listen(port, () => {
|
|
45
|
-
console.log(
|
|
47
|
+
console.log(`✓ Server running at http://localhost:${port}`);
|
|
46
48
|
});
|