Skip to content

Commit 66bcb1c

Browse files
tomsoirtomsoir
committed
Add vite/vitest support
1 parent df79912 commit 66bcb1c

File tree

21 files changed

+434
-6
lines changed

21 files changed

+434
-6
lines changed

‎.bazelignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ experimental/service_test_ts_infra/node_modules
1616
experimental/service_test_ts_esbuild/node_modules
1717
experimental/simple_js_binary_test/node_modules
1818
experimental/service_test_ts_rspack_react_tests_assets_swc/node_modules
19+
experimental/service_test_ts_vite_vitest_tests/node_modules
1920

2021
tools/test-mocha/node_modules
2122
tools/swc/node_modules
2223
tools/rspack/node_modules
24+
tools/vite/node_modules

‎README.MD‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ A unified monorepo example to demonstrate how to develop, build, test, and deplo
2020
- [x] [Webpack](https://webpack.js.org/) support;
2121
- [x] [ESbuild](https://esbuild.github.io/) [support](https://github.com/tomsoir/tomsoir-monorepo/commit/444a709f6c61455db5dac848f1e144b2caffa152) (faster Webpack alternative);
2222
- [x] [RSPack](https://rspack.dev/) [support](https://github.com/tomsoir/tomsoir-monorepo/commit/ba5865b549f9dbb821b27e2d3c116ff98c0ff21b) (faster Webpack alternative);
23-
- [ ] Vite / Vite-test support;
23+
- [x] [Vite](https://vite.dev/) support;
2424
- [x] SCSS-styles support;
2525
- [x] "use" imports support;
2626
- [x] Static assets support;
2727
- [x] Image support example;
2828
- [x] JSON files support example;
2929
- [x] Testing:
30-
- [x] Tests spec files separation from the source code (`:tsc` and `:tsc_tests` are separate);
30+
- [x] Tests spec files separation from the source code in Bazel (`:tsc` and `:tsc_tests` are separate);
3131
- [x] Tests coverage;
3232
- [x] Mocha/Chai support;
33-
- [ ] Vite-test support;
33+
- [x] Vitest support;
3434
- [x] Developing:
3535
- [x] Run local dev server (Webpack);
3636
- [x] Run local dev server (RSpack);

‎experimental/service_test_ts_vite_vitest_tests/BUILD.bazel‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
2+
load("@npm//:defs.bzl", "npm_link_all_packages")
3+
load("//tools/vite:vite.bzl", "vite")
4+
5+
npm_link_all_packages(name = "node_modules")
6+
7+
copy_to_bin(
8+
name = "vite_srcs_export",
9+
srcs = glob([
10+
"src/**/*.css",
11+
"src/**/*.svg",
12+
"src/**/*.ts",
13+
"src/**/*.tsx",
14+
"src/*.tsx",
15+
"src/**/*.html",
16+
"src/utils/**/*.tsx",
17+
"public/**/*.svg",
18+
] + ["vite.config.ts"]),
19+
)
20+
21+
vite(
22+
assets = [":vite_srcs_export"],
23+
tests = glob([
24+
"src/*.test.tsx",
25+
]),
26+
deps = [
27+
"package.json",
28+
"tsconfig.json",
29+
# ":tsc",
30+
],
31+
)
32+
33+
# ----------
34+
# NOT IN USE
35+
# ----------
36+
# load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
37+
38+
# ts_project(
39+
# name = "tsc",
40+
# srcs = glob([
41+
# "src/**/*.ts",
42+
# "src/**/*.tsx",
43+
# "src/**/*.css",
44+
# "src/**/*.svg",
45+
# "src/**/*.ts",
46+
# "src/**/*.tsx",
47+
# "src/**/*.html",
48+
# "src/utils/**/*.tsx",
49+
# "public/**/*.svg",
50+
# ]),
51+
# allow_js = False,
52+
# declaration = True,
53+
# declaration_map = True,
54+
# incremental = True,
55+
# out_dir = "dist",
56+
# resolve_json_module = True,
57+
# root_dir = "src",
58+
# source_map = False,
59+
# tsconfig = "tsconfig.json",
60+
# deps = [
61+
# ":node_modules",
62+
# ],
63+
# )

‎experimental/service_test_ts_vite_vitest_tests/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "service_test_ts_vite_vitest_tests",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview",
10+
"test": "vitest",
11+
"coverage": "vitest run --coverage"
12+
},
13+
"dependencies": {
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0"
16+
},
17+
"devDependencies": {
18+
"@testing-library/dom": "^9.0.0",
19+
"@testing-library/jest-dom": "^5.16.5",
20+
"@testing-library/react": "^14.0.0",
21+
"@testing-library/user-event": "^14.4.3",
22+
"@types/react": "^18.0.27",
23+
"@types/react-dom": "^18.0.10",
24+
"@types/react-test-renderer": "^18.0.0",
25+
"@vitejs/plugin-react-swc": "^3.0.0",
26+
"@vitest/coverage-c8": "^0.33.0",
27+
"jsdom": "^21.1.0",
28+
"react-test-renderer": "^18.2.0",
29+
"typescript": "^4.9.3",
30+
"vite": "^4.1.0",
31+
"vitest": "^0.29.2"
32+
}
33+
}

‎experimental/service_test_ts_vite_vitest_tests/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎experimental/service_test_ts_vite_vitest_tests/src/App.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
transition: filter 300ms;
13+
}
14+
.logo:hover {
15+
filter: drop-shadow(0 0 2em #646cffaa);
16+
}
17+
.logo.react:hover {
18+
filter: drop-shadow(0 0 2em #61dafbaa);
19+
}
20+
21+
@keyframes logo-spin {
22+
from {
23+
transform: rotate(0deg);
24+
}
25+
to {
26+
transform: rotate(360deg);
27+
}
28+
}
29+
30+
@media (prefers-reduced-motion: no-preference) {
31+
a:nth-of-type(2) .logo {
32+
animation: logo-spin infinite 20s linear;
33+
}
34+
}
35+
36+
.card {
37+
padding: 2em;
38+
}
39+
40+
.read-the-docs {
41+
color: #888;
42+
}

‎experimental/service_test_ts_vite_vitest_tests/src/App.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useState } from 'react';
2+
import reactLogo from './assets/react.svg';
3+
import './App.css';
4+
5+
function App() {
6+
const [count, setCount] = useState(0);
7+
8+
return (
9+
<div className="App">
10+
<div>
11+
<a href="https://vitejs.dev" target="_blank">
12+
<img src="/vite.svg" className="logo" alt="Vite logo" />
13+
</a>
14+
<a href="https://reactjs.org" target="_blank">
15+
<img src={reactLogo} className="logo react" alt="React logo" />
16+
</a>
17+
</div>
18+
<h1>Vite + React</h1>
19+
<div className="card">
20+
<button onClick={() => setCount((count) => count + 1)}>
21+
count is {count}
22+
</button>
23+
<p>
24+
Edit <code>src/App.tsx</code> and save to test HMR
25+
</p>
26+
</div>
27+
<p className="read-the-docs">
28+
Click on the Vite and React logos to learn more
29+
</p>
30+
</div>
31+
);
32+
}
33+
34+
export default App;

‎experimental/service_test_ts_vite_vitest_tests/src/assets/react.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎experimental/service_test_ts_vite_vitest_tests/src/basic.test.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { describe, it, expect } from 'vitest';
2+
import { render, screen } from './utils/test-utils';
3+
4+
import App from './App';
5+
6+
describe('Simple working test', () => {
7+
it('the title is visible', () => {
8+
render(<App />);
9+
expect(screen.getByText(/Vite \+ React/i)).toBeTruthy();
10+
});
11+
});

‎experimental/service_test_ts_vite_vitest_tests/src/index.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
-webkit-text-size-adjust: 100%;
15+
}
16+
17+
a {
18+
font-weight: 500;
19+
color: #646cff;
20+
text-decoration: inherit;
21+
}
22+
a:hover {
23+
color: #535bf2;
24+
}
25+
26+
body {
27+
margin: 0;
28+
display: flex;
29+
place-items: center;
30+
min-width: 320px;
31+
min-height: 100vh;
32+
}
33+
34+
h1 {
35+
font-size: 3.2em;
36+
line-height: 1.1;
37+
}
38+
39+
button {
40+
border-radius: 8px;
41+
border: 1px solid transparent;
42+
padding: 0.6em 1.2em;
43+
font-size: 1em;
44+
font-weight: 500;
45+
font-family: inherit;
46+
background-color: #1a1a1a;
47+
cursor: pointer;
48+
transition: border-color 0.25s;
49+
}
50+
button:hover {
51+
border-color: #646cff;
52+
}
53+
button:focus,
54+
button:focus-visible {
55+
outline: 4px auto -webkit-focus-ring-color;
56+
}
57+
58+
@media (prefers-color-scheme: light) {
59+
:root {
60+
color: #213547;
61+
background-color: #ffffff;
62+
}
63+
a:hover {
64+
color: #747bff;
65+
}
66+
button {
67+
background-color: #f9f9f9;
68+
}
69+
}

0 commit comments

Comments
 (0)