frontend-hamroun 1.1.30 → 1.1.32
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/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "ssr-
|
|
2
|
+
"name": "ssr-version",
|
|
3
3
|
"private": true,
|
|
4
4
|
"version": "0.0.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "vite",
|
|
8
|
-
"build": "
|
|
9
|
-
"build:server": "
|
|
10
|
-
"build
|
|
8
|
+
"build:client": "vite build",
|
|
9
|
+
"build:server": "vite build --ssr",
|
|
10
|
+
"build": "npm run build:client && npm run build:server",
|
|
11
11
|
"start": "node dist/server.js"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
@@ -1,26 +1,20 @@
|
|
|
1
1
|
import { useState } from 'frontend-hamroun';
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
export function App() {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
const [count, setCount] = useState( 0);
|
|
6
|
+
|
|
7
|
+
const increment = () => setCount(count + 1);
|
|
8
|
+
const decrement = () => setCount(count - 1);
|
|
9
|
+
|
|
7
10
|
return (
|
|
8
11
|
<div>
|
|
9
12
|
<h1>Server-Side Rendered App</h1>
|
|
10
13
|
<div>
|
|
11
|
-
<button
|
|
12
|
-
onClick={() => setCount(count - 1)}
|
|
13
|
-
data-action="decrement"
|
|
14
|
-
>-</button>
|
|
14
|
+
<button onClick={decrement} data-action="decrement">-</button>
|
|
15
15
|
<span style={{ margin: '0 10px' }}>{count}</span>
|
|
16
|
-
<button
|
|
17
|
-
onClick={() => setCount(count + 1)}
|
|
18
|
-
data-action="increment"
|
|
19
|
-
>+</button>
|
|
16
|
+
<button onClick={increment} data-action="increment">+</button>
|
|
20
17
|
</div>
|
|
21
|
-
<script dangerouslySetInnerHTML={{
|
|
22
|
-
__html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0 })};`
|
|
23
|
-
}} />
|
|
24
18
|
</div>
|
|
25
19
|
);
|
|
26
20
|
}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import { hydrate } from 'frontend-hamroun';
|
|
2
2
|
import { App } from './App';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
7
|
+
hydrate(
|
|
8
|
+
<App />,
|
|
9
|
+
document.getElementById('root')!
|
|
10
|
+
);
|
|
11
|
+
});
|
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
import express from 'express';
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { fileURLToPath } from 'url';
|
|
4
|
+
import { renderToString, jsx } from 'frontend-hamroun';
|
|
5
|
+
import { App } from './App.js';
|
|
6
|
+
import fs from 'fs';
|
|
4
7
|
|
|
8
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
5
9
|
const app = express();
|
|
6
10
|
const port = 3000;
|
|
7
11
|
|
|
12
|
+
// Find the client entry file
|
|
13
|
+
const getClientEntry = () => {
|
|
14
|
+
const assetsDir = path.join(__dirname, './');
|
|
15
|
+
const files = fs.readdirSync(assetsDir);
|
|
16
|
+
return files.find(file => file.startsWith("client")&& file.endsWith('.js'));
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// Serve static files from dist/assets
|
|
20
|
+
app.use('/assets', express.static(path.join(__dirname, './')));
|
|
21
|
+
|
|
22
|
+
// Serve static files from dist
|
|
23
|
+
app.use(express.static(path.join(__dirname, 'dist')));
|
|
24
|
+
|
|
8
25
|
app.get('/', async (req, res) => {
|
|
9
|
-
const
|
|
26
|
+
const clientEntry = getClientEntry();
|
|
27
|
+
const html = await renderToString(jsx(App, null
|
|
28
|
+
));
|
|
10
29
|
|
|
11
30
|
res.send(`
|
|
12
31
|
<!DOCTYPE html>
|
|
@@ -16,7 +35,7 @@ app.get('/', async (req, res) => {
|
|
|
16
35
|
</head>
|
|
17
36
|
<body>
|
|
18
37
|
<div id="root">${html}</div>
|
|
19
|
-
<script type="module" src="/
|
|
38
|
+
<script type="module" src="/assets/${clientEntry}"></script>
|
|
20
39
|
</body>
|
|
21
40
|
</html>
|
|
22
41
|
`);
|
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
import { defineConfig } from 'vite';
|
|
2
|
+
import path from 'path';
|
|
2
3
|
|
|
3
4
|
export default defineConfig({
|
|
5
|
+
resolve: {
|
|
6
|
+
alias: {
|
|
7
|
+
'frontend-hamroun': path.resolve(__dirname, 'node_modules/frontend-hamroun')
|
|
8
|
+
}
|
|
9
|
+
},
|
|
4
10
|
build: {
|
|
5
|
-
|
|
11
|
+
outDir: 'dist',
|
|
12
|
+
ssr: 'src/server.ts',
|
|
6
13
|
rollupOptions: {
|
|
7
14
|
input: {
|
|
8
15
|
client: './src/client.tsx',
|
|
9
16
|
server: './src/server.ts'
|
|
17
|
+
},
|
|
18
|
+
output: {
|
|
19
|
+
entryFileNames: '[name].js',
|
|
20
|
+
chunkFileNames: 'assets/[name]-[hash].js',
|
|
21
|
+
assetFileNames: 'assets/[name]-[hash].[ext]'
|
|
10
22
|
}
|
|
11
23
|
}
|
|
12
24
|
},
|