Skip to content

Commit 57ee78a

Browse files
vtm9vtm9
committed
Fix vite
1 parent f0cf594 commit 57ee78a

File tree

4 files changed

+53
-69
lines changed

4 files changed

+53
-69
lines changed

‎services/app/apps/codebattle/assets/js/app.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import "@fortawesome/fontawesome-free/js/all";
2121
// import '../css/style.scss';
2222
import "bootstrap";
2323

24-
import "@vitejs/plugin-react/preamble";
2524
import { inspect } from "@xstate/inspect";
2625
import NProgress from "nprogress";
2726
import { Socket } from "phoenix";

‎services/app/apps/codebattle/assets/js/widgets/pages/hallOfFamePage/HallOfFamePage.jsx‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
1-
import React, { useMemo } from 'react';
1+
import React, { memo } from "react";
22

3-
import cn from 'classnames';
4-
import Gon from 'gon';
3+
import cn from "classnames";
4+
import Gon from "gon";
55

66
const HallOfFamePage = () => {
7-
const data = useMemo(
8-
() => ({
9-
currentSeason:
10-
(Gon && Gon.getAsset && Gon.getAsset('current_season')) || null,
11-
top10: (Gon && Gon.getAsset && Gon.getAsset('top10')) || [],
12-
}),
13-
[],
14-
);
15-
16-
const { currentSeason, top10 } = data;
7+
const currentSeason =
8+
(Gon && Gon.getAsset && Gon.getAsset("current_season")) || null;
9+
const top10 = (Gon && Gon.getAsset && Gon.getAsset("top10")) || [];
1710

1811
return (
1912
<div className="cb-bg-panel cb-text min-vh-100 py-5 d-flex flex-column align-items-center">
@@ -22,7 +15,7 @@ const HallOfFamePage = () => {
2215

2316
<div
2417
className={cn(
25-
'card cb-bg-panel cb-border-color cb-rounded shadow-sm border-0 text-light',
18+
"card cb-bg-panel cb-border-color cb-rounded shadow-sm border-0 text-light",
2619
)}
2720
>
2821
<div className="card-body">
@@ -52,7 +45,7 @@ const HallOfFamePage = () => {
5245
src={user.avatar_url}
5346
alt={user.name}
5447
className="rounded-circle me-2"
55-
style={{ width: '32px', height: '32px' }}
48+
style={{ width: "32px", height: "32px" }}
5649
/>
5750
)}
5851
<span>
@@ -68,10 +61,10 @@ const HallOfFamePage = () => {
6861
</span>
6962
</div>
7063
</td>
71-
<td>{user.rank || '-'}</td>
64+
<td>{user.rank || "-"}</td>
7265
<td>{user.points || 0}</td>
7366
<td>{user.rating || 0}</td>
74-
<td>{user.clan || '-'}</td>
67+
<td>{user.clan || "-"}</td>
7568
</tr>
7669
))
7770
) : (
@@ -90,32 +83,24 @@ const HallOfFamePage = () => {
9083
{currentSeason && (
9184
<div
9285
className={cn(
93-
'card mt-4 cb-bg-panel cb-border-color cb-rounded shadow-sm',
94-
'border-0 text-light',
86+
"card mt-4 cb-bg-panel cb-border-color cb-rounded shadow-sm",
87+
"border-0 text-light",
9588
)}
9689
>
9790
<div className="card-body py-3">
9891
<h5 className="card-title mb-2 text-white">Current Season</h5>
9992
<div className="d-flex flex-wrap gap-3 small">
10093
<span>
101-
<strong>Season:</strong>
102-
{' '}
103-
{currentSeason.name || 'N/A'}
94+
<strong>Season:</strong> {currentSeason.name || "N/A"}
10495
</span>
10596
<span>
106-
<strong>Year:</strong>
107-
{' '}
108-
{currentSeason.year || 'N/A'}
97+
<strong>Year:</strong> {currentSeason.year || "N/A"}
10998
</span>
11099
<span>
111-
<strong>Starts:</strong>
112-
{' '}
113-
{currentSeason.starts_at || 'N/A'}
100+
<strong>Starts:</strong> {currentSeason.starts_at || "N/A"}
114101
</span>
115102
<span>
116-
<strong>Ends:</strong>
117-
{' '}
118-
{currentSeason.ends_at || 'N/A'}
103+
<strong>Ends:</strong> {currentSeason.ends_at || "N/A"}
119104
</span>
120105
</div>
121106
</div>
@@ -126,4 +111,4 @@ const HallOfFamePage = () => {
126111
);
127112
};
128113

129-
export default HallOfFamePage;
114+
export default memo(HallOfFamePage);

‎services/app/apps/codebattle/lib/codebattle_web/templates/layout/app.html.heex‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,16 @@
3737
<%= render_tags_all(assigns[:meta_tags] || %{}) %>
3838
<meta name="csrf-token" content={csrf_token_value()} />
3939
<%= if CodebattleWeb.Vite.dev?() do %>
40-
<link rel="stylesheet" href="http://localhost:8080/assets/css/style.scss" />
4140
<script type="module" src="http://localhost:8080/@vite/client"></script>
41+
<script type="module">
42+
import RefreshRuntime from "http://localhost:8080/@react-refresh";
43+
RefreshRuntime.injectIntoGlobalHook(window);
44+
window.$RefreshReg$ = () => {};
45+
window.$RefreshSig$ = () => (type) => type;
46+
window.__vite_plugin_react_preamble_installed__ = true;
47+
</script>
4248
<script type="module" src="http://localhost:8080/assets/js/app.js"></script>
49+
<link rel="stylesheet" href="http://localhost:8080/assets/css/style.scss" />
4350
<% else %>
4451
<link rel="stylesheet" href={CodebattleWeb.Vite.asset_path("app.css")} />
4552
<%= for href <- CodebattleWeb.Vite.css_paths("app.js") do %>

‎services/app/apps/codebattle/vite.config.js‎

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ function poLoader() {
1313
transform(code, id) {
1414
if (!id.endsWith(".po")) return null;
1515
const po = gettextParser.po.parse(code);
16-
// i18next expects a simple key/value map;
17-
// adjust to your exact structure if needed.
1816
const out = {};
1917
for (const ctx of Object.values(po.translations)) {
2018
for (const [key, val] of Object.entries(ctx)) {
@@ -23,10 +21,18 @@ function poLoader() {
2321
out[key] = msg;
2422
}
2523
}
26-
return {
27-
code: `export default ${JSON.stringify(out)};`,
28-
map: null,
29-
};
24+
return { code: `export default ${JSON.stringify(out)};`, map: null };
25+
},
26+
};
27+
}
28+
29+
// --- force a hard reload for every change (no module-level HMR)
30+
function forceFullReload() {
31+
return {
32+
name: "force-full-reload",
33+
handleHotUpdate(ctx) {
34+
ctx.server.ws.send({ type: "full-reload" });
35+
return []; // prevent Vite from doing module HMR
3036
},
3137
};
3238
}
@@ -38,20 +44,13 @@ const input = {
3844
landing: path.resolve(__dirname, "assets/js/landing.js"),
3945
external: path.resolve(__dirname, "assets/js/external.js"),
4046
styles: path.resolve(__dirname, "assets/css/style.scss"),
41-
// broadcast_editor: path.resolve(
42-
// __dirname,
43-
// "assets/js/widgets/pages/broadcast-editor/index.js",
44-
// ),
45-
// stream: path.resolve(
46-
// __dirname,
47-
// "assets/js/widgets/pages/broadcast-editor/stream.js",
48-
// ),
47+
// broadcast_editor: path.resolve(__dirname, "assets/js/widgets/pages/broadcast-editor/index.js"),
48+
// stream: path.resolve(__dirname, "assets/js/widgets/pages/broadcast-editor/stream.js"),
4949
};
5050

5151
export default defineConfig(({ command, mode }) => ({
52-
define: {
53-
gon: "window.gon",
54-
},
52+
define: { gon: "window.gon" },
53+
5554
css: {
5655
preprocessorOptions: {
5756
scss: {
@@ -64,29 +63,25 @@ export default defineConfig(({ command, mode }) => ({
6463
generateScopedName: "[local]_[hash:base64:4]",
6564
},
6665
},
66+
6767
plugins: [
68-
react(),
68+
react({ fastRefresh: false }), // no react-refresh preamble
6969
poLoader(),
70-
// makes process.env.* defined (stringified) if your code references it
70+
forceFullReload(), // always trigger full reload
7171
environment(["NODE_ENV"]),
7272
],
7373

74-
root: ".", // project root
74+
root: ".",
7575
base: command === "serve" ? "/" : "/assets/",
76-
// keep the rest of your config
7776

78-
// where Phoenix serves from in production:
7977
build: {
8078
outDir: "priv/static/assets",
81-
assetsDir: "", // keep flat (so your [name].css/js stay at /assets/)
82-
manifest: true, // needed for Phoenix helper
79+
assetsDir: "",
80+
manifest: true,
8381
sourcemap: mode === "development",
8482
rollupOptions: {
8583
input,
86-
// (optional) put monaco in a separate chunk
87-
output: {
88-
manualChunks: { monaco: ["monaco-editor"] },
89-
},
84+
output: { manualChunks: { monaco: ["monaco-editor"] } },
9085
},
9186
emptyOutDir: true,
9287
},
@@ -101,18 +96,20 @@ export default defineConfig(({ command, mode }) => ({
10196
],
10297
},
10398

104-
// Vite dev server (replaces webpack-dev-server on :8080)
99+
// Dev server
105100
server: {
106101
host: "0.0.0.0",
107102
port: 8080,
108103
strictPort: true,
109104
cors: true,
110-
hmr: { host: "localhost", protocol: "ws" },
105+
// HMR must be enabled so the browser receives the "full-reload" message
106+
hmr: { host: "localhost", protocol: "ws", port: 8080 },
107+
// If developing inside Docker and file changes aren't detected, uncomment:
108+
// watch: { usePolling: true, interval: 100 },
111109
},
112110

113111
resolve: {
114112
alias: {
115-
// keep your Webpack aliases
116113
gon: path.resolve(__dirname, "assets/js/shims/gon.js"),
117114
"@/": path.resolve(__dirname, "assets/js/widgets"),
118115
"@/components": path.resolve(__dirname, "assets/js/widgets/components"),
@@ -124,14 +121,10 @@ export default defineConfig(({ command, mode }) => ({
124121
"@/selectors": path.resolve(__dirname, "assets/js/widgets/selectors"),
125122
"@/slices": path.resolve(__dirname, "assets/js/widgets/slices"),
126123
"@/utils": path.resolve(__dirname, "assets/js/widgets/utils"),
127-
128-
// your old ProvidePlugin fallbacks
129124
path: "path-browserify",
130125
},
131126
extensions: [".js", ".jsx", ".ts", ".tsx"],
132127
},
133128

134-
// Copy static assets like CopyWebpackPlugin:
135-
// Place files in ./assets/static — Vite copies that to outDir at build.
136129
publicDir: "assets/static",
137130
}));

0 commit comments

Comments
 (0)