Skip to content
This repository was archived by the owner on Sep 10, 2024. It is now read-only.

Commit 9e2d761

Browse files
sandhosesandhose
committed
frontend: upgrade to Vite 5
1 parent 237e820 commit 9e2d761

File tree

9 files changed

+2644
-1586
lines changed

9 files changed

+2644
-1586
lines changed

‎frontend/.browserlistrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
last 2 Chrome versions,
2+
last 2 Firefox versions,
3+
Firefox ESR,
4+
last 2 Opera versions,
5+
last 2 Safari versions,
6+
last 2 edge version,
7+
not dead

‎frontend/.postcssrc.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"plugins": {
3+
"postcss-import": {},
4+
"tailwindcss/nesting": "postcss-nesting",
5+
"tailwindcss": {},
6+
"autoprefixer": {}
7+
}
8+
}

‎frontend/package-lock.json‎

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

‎frontend/package.json‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,21 @@
4646
},
4747
"devDependencies": {
4848
"@graphql-codegen/cli": "^5.0.2",
49-
"@graphql-codegen/client-preset": "^4.2.1",
49+
"@graphql-codegen/client-preset": "^4.2.2",
5050
"@graphql-codegen/urql-introspection": "^3.0.0",
5151
"@graphql-eslint/eslint-plugin": "^3.20.1",
5252
"@storybook/addon-essentials": "^7.6.13",
5353
"@storybook/react": "^7.6.13",
5454
"@storybook/react-vite": "^7.6.13",
5555
"@testing-library/react": "^14.2.1",
56-
"@types/node": "^20.11.16",
56+
"@types/node": "^20.11.17",
5757
"@types/react": "^18.2.55",
58-
"@types/react-dom": "^18.2.18",
58+
"@types/react-dom": "^18.2.19",
5959
"@types/react-test-renderer": "^18.0.7",
6060
"@vitejs/plugin-react": "^4.2.1",
61-
"@vitest/coverage-v8": "^0.34.6",
61+
"@vitest/coverage-v8": "^1.2.2",
6262
"autoprefixer": "^10.4.17",
63+
"browserslist-to-esbuild": "^2.1.1",
6364
"eslint": "^8.56.0",
6465
"eslint-config-prettier": "^9.1.0",
6566
"eslint-config-react-app": "^7.0.1",
@@ -69,7 +70,7 @@
6970
"eslint-plugin-prettier": "^5.1.3",
7071
"happy-dom": "^13.3.8",
7172
"i18next-parser": "^8.12.0",
72-
"postcss": "^8.4.34",
73+
"postcss": "^8.4.35",
7374
"postcss-modules": "^6.0.0",
7475
"postcss-nesting": "^12.0.2",
7576
"prettier": "3.2.5",
@@ -79,11 +80,17 @@
7980
"storybook-react-i18next": "^2.0.10",
8081
"tailwindcss": "^3.4.1",
8182
"typescript": "5.3.3",
82-
"vite": "^4.5.2",
83+
"vite": "5.0.11",
8384
"vite-plugin-compression": "^0.5.1",
8485
"vite-plugin-graphql-codegen": "^3.3.6",
8586
"vite-plugin-manifest-sri": "^0.2.0",
8687
"vite-plugin-svgr": "^4.2.0",
87-
"vitest": "^0.34.6"
88+
"vitest": "^1.2.2"
89+
},
90+
"overrides": {
91+
"@storybook/react-vite": {
92+
"vite": "$vite",
93+
"@vitejs/plugin-react": "$@vitejs/plugin-react"
94+
}
8895
}
8996
}

‎frontend/postcss.config.cjs‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎frontend/src/i18n.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ import { initReactI18next } from "react-i18next";
2424
// "../locales/en.json": "/whatever/assets/root/locales/en-aabbcc.json",
2525
// ...
2626
// }
27-
const locales = import.meta.glob("../locales/*.json", {
28-
as: "url",
27+
const locales = import.meta.glob<string>("../locales/*.json", {
28+
query: "?url",
29+
import: "default",
2930
eager: true,
3031
});
3132

‎frontend/src/main.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
* limitations under the License.
1414
*/
1515

16-
@import "@fontsource/inter/400.css";
17-
@import "@fontsource/inter/500.css";
18-
@import "@fontsource/inter/600.css";
19-
@import "@fontsource/inter/700.css";
20-
@import "@fontsource/inconsolata/400.css";
21-
@import "@fontsource/inconsolata/700.css";
22-
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
23-
@import "@vector-im/compound-web/dist/style.css";
16+
@import url("@fontsource/inter/400.css");
17+
@import url("@fontsource/inter/500.css");
18+
@import url("@fontsource/inter/600.css");
19+
@import url("@fontsource/inter/700.css");
20+
@import url("@fontsource/inconsolata/400.css");
21+
@import url("@fontsource/inconsolata/700.css");
22+
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
23+
@import url("@vector-im/compound-web/dist/style.css");
2424

2525
@tailwind base;
2626
@tailwind components;

‎frontend/src/templates.css‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,24 @@
1313
* limitations under the License.
1414
*/
1515

16-
@import "@fontsource/inter/400.css";
17-
@import "@fontsource/inter/500.css";
18-
@import "@fontsource/inter/600.css";
19-
@import "@fontsource/inter/700.css";
20-
@import "@fontsource/inconsolata/400.css";
21-
@import "@fontsource/inconsolata/700.css";
22-
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
23-
@import "@vector-im/compound-web/dist/style.css";
24-
25-
@import "./styles/cpd-button.css";
26-
@import "./styles/cpd-form.css";
27-
@import "./styles/cpd-link.css";
28-
@import "./styles/cpd-text-control.css";
29-
@import "./styles/cpd-mfa-control.css";
30-
@import "./styles/cpd-checkbox-control.css";
31-
32-
@import "./components/Layout/Layout.module.css";
33-
@import "./components/Footer/Footer.module.css";
16+
@import url("@fontsource/inter/400.css");
17+
@import url("@fontsource/inter/500.css");
18+
@import url("@fontsource/inter/600.css");
19+
@import url("@fontsource/inter/700.css");
20+
@import url("@fontsource/inconsolata/400.css");
21+
@import url("@fontsource/inconsolata/700.css");
22+
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
23+
@import url("@vector-im/compound-web/dist/style.css");
24+
25+
@import url("./styles/cpd-button.css");
26+
@import url("./styles/cpd-form.css");
27+
@import url("./styles/cpd-link.css");
28+
@import url("./styles/cpd-text-control.css");
29+
@import url("./styles/cpd-mfa-control.css");
30+
@import url("./styles/cpd-checkbox-control.css");
31+
32+
@import url("./components/Layout/Layout.module.css");
33+
@import url("./components/Footer/Footer.module.css");
3434

3535
@config "../tailwind.templates.config.cjs";
3636

‎frontend/vite.config.ts‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
import { readFile, writeFile } from "fs/promises";
1516
import { resolve } from "path";
1617

1718
import react from "@vitejs/plugin-react";
18-
import { PluginOption } from "vite";
19+
import browserslistToEsbuild from "browserslist-to-esbuild";
20+
import type { Manifest, PluginOption } from "vite";
1921
import compression from "vite-plugin-compression";
2022
import codegen from "vite-plugin-graphql-codegen";
2123
import manifestSRI from "vite-plugin-manifest-sri";
@@ -51,11 +53,12 @@ export default defineConfig((env) => ({
5153
},
5254

5355
build: {
54-
manifest: true,
56+
manifest: "manifest.json",
5557
assetsDir: "",
5658
assetsInlineLimit: 0,
5759
sourcemap: true,
5860
modulePreload: false,
61+
target: browserslistToEsbuild(),
5962

6063
// We don't exactly handle CSS code splitting well if we're lazy loading components.
6164
// We disabled lazy loading for now, but we should fix this at some point.
@@ -99,6 +102,52 @@ export default defineConfig((env) => ({
99102
},
100103
}),
101104

105+
// Custom plugin to make sure that each asset has an entry in the manifest
106+
// This is needed so that the preloading & asset integrity generation works
107+
{
108+
name: "manifest-missing-assets",
109+
110+
apply: "build",
111+
enforce: "post",
112+
writeBundle: {
113+
// This needs to be executed sequentially before the manifestSRI plugin
114+
sequential: true,
115+
order: "pre",
116+
async handler({ dir }): Promise<void> {
117+
const manifestPath = resolve(dir, "manifest.json");
118+
119+
const manifest: Manifest | undefined = await readFile(
120+
manifestPath,
121+
"utf-8",
122+
).then(JSON.parse, () => undefined);
123+
124+
if (manifest) {
125+
const existing: Set<string> = new Set();
126+
const needs: Set<string> = new Set();
127+
128+
for (const chunk of Object.values(manifest)) {
129+
existing.add(chunk.file);
130+
for (const css of chunk.css ?? []) needs.add(css);
131+
for (const sub of chunk.assets ?? []) needs.add(sub);
132+
}
133+
134+
const missing = Array.from(needs).filter((a) => !existing.has(a));
135+
136+
if (missing.length > 0) {
137+
for (const asset of missing) {
138+
manifest[asset] = {
139+
file: asset,
140+
integrity: "",
141+
};
142+
}
143+
144+
await writeFile(manifestPath, JSON.stringify(manifest, null, 2));
145+
}
146+
}
147+
},
148+
},
149+
},
150+
102151
manifestSRI(),
103152

104153
svgr({

0 commit comments

Comments
 (0)