Skip to content

Commit 904b25b

Browse files
birkskyumbirkskyum
authored
vite 7 example (#226)
1 parent f6c1dc4 commit 904b25b

File tree

11 files changed

+580
-0
lines changed

11 files changed

+580
-0
lines changed

‎examples/vite-7/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="./src/main.tsx" type="module"></script>
10+
</body>
11+
</html>

‎examples/vite-7/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "example",
3+
"private": "true",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test": "vitest --browser.headless --run",
10+
"test-dev": "vitest"
11+
},
12+
"devDependencies": {
13+
"@solidjs/testing-library": "^0.8.10",
14+
"@testing-library/jest-dom": "^6.6.3",
15+
"@testing-library/user-event": "^14.6.1",
16+
"@vitest/browser": "^3.0.7",
17+
"playwright": "^1.50.1",
18+
"vite": "^7.0.0",
19+
"vite-plugin-solid": "workspace:*",
20+
"vitest": "^3.0.7"
21+
},
22+
"dependencies": {
23+
"solid-js": "catalog:"
24+
}
25+
}

‎examples/vite-7/src/App.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { onCleanup, onMount } from "solid-js";
2+
import { CounterProvider, useCounter } from "./CounterContext";
3+
4+
const title = 'Count';
5+
6+
function Count() {
7+
const counter = useCounter();
8+
onMount(() => {
9+
console.log('Mounted Count');
10+
});
11+
onCleanup(() => {
12+
console.log('Unmounted Count');
13+
});
14+
return (
15+
<h1>{title}: {counter.value()}</h1>
16+
);
17+
}
18+
19+
function Increment() {
20+
const counter = useCounter();
21+
onMount(() => {
22+
console.log('Mounted Increment');
23+
});
24+
onCleanup(() => {
25+
console.log('Unmounted Increment');
26+
});
27+
return (
28+
<button onClick={counter.increment}>
29+
Increment
30+
</button>
31+
);
32+
}
33+
34+
function Decrement() {
35+
const counter = useCounter();
36+
onMount(() => {
37+
console.log('Mounted Decrement');
38+
});
39+
onCleanup(() => {
40+
console.log('Unmounted Decrement');
41+
});
42+
return (
43+
<button onClick={counter.decrement}>
44+
Decrement
45+
</button>
46+
);
47+
}
48+
49+
export default function App() {
50+
onMount(() => {
51+
console.log('Mounted App');
52+
});
53+
onCleanup(() => {
54+
console.log('Unmounted App');
55+
});
56+
57+
return (
58+
<CounterProvider>
59+
<Count />
60+
<Increment />
61+
<Decrement />
62+
</CounterProvider>
63+
);
64+
}

‎examples/vite-7/src/CounterContext.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { createContext, createSignal, JSX, onCleanup, onMount, useContext } from "solid-js";
2+
3+
interface CounterContext {
4+
value(): number;
5+
increment(): void;
6+
decrement(): void;
7+
}
8+
9+
10+
const CounterContext = createContext<CounterContext>();
11+
12+
export function useCounter() {
13+
const ctx = useContext(CounterContext);
14+
if (!ctx) {
15+
throw new Error('Missing CounterContext');
16+
}
17+
return ctx;
18+
}
19+
20+
export function CounterProvider(props: { children: JSX.Element }) {
21+
const [value, setValue] = createSignal(0);
22+
23+
function increment() {
24+
setValue((c) => c + 1);
25+
}
26+
27+
function decrement() {
28+
setValue((c) => c - 1);
29+
}
30+
onMount(() => {
31+
console.log('Mounted CounterProvider');
32+
});
33+
onCleanup(() => {
34+
console.log('Unmounted CounterProvider');
35+
});
36+
37+
return (
38+
<CounterContext.Provider value={{ value, increment, decrement }}>
39+
<h1>Counter</h1>
40+
{props.children}
41+
</CounterContext.Provider>
42+
);
43+
}

‎examples/vite-7/src/main.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render } from 'solid-js/web';
2+
import App from './App';
3+
4+
const app = document.getElementById('app');
5+
6+
if (app) {
7+
render(() => <App />, app);
8+
}

‎examples/vite-7/tests/App.test.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference types="@vitest/browser/providers/playwright" />
2+
import { render } from '@solidjs/testing-library';
3+
import { page } from '@vitest/browser/context';
4+
import { expect, test } from 'vitest';
5+
6+
import App from '../src/App.jsx';
7+
8+
test('App', async () => {
9+
const root = page.elementLocator(render(() => <App />).baseElement);
10+
11+
const count = root.getByText('Count:');
12+
await expect.element(count).toHaveTextContent('Count: 0');
13+
14+
const incrementButton = root.getByText('Increment');
15+
await incrementButton.click();
16+
await expect.element(count).toHaveTextContent('Count: 1');
17+
18+
const decrementButton = root.getByText('Decrement');
19+
await decrementButton.click();
20+
await expect.element(count).toHaveTextContent('Count: 0');
21+
});

‎examples/vite-7/tests/tsconfig.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"types": [
5+
"@testing-library/jest-dom"
6+
]
7+
},
8+
"include": [
9+
"**/*.ts",
10+
"**/*.tsx"
11+
]
12+
}

‎examples/vite-7/tsconfig.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"module": "ESNext",
5+
"allowSyntheticDefaultImports": true,
6+
"esModuleInterop": true,
7+
"resolveJsonModule": true,
8+
"moduleResolution": "node",
9+
"jsx": "preserve",
10+
"jsxImportSource": "solid-js",
11+
"types": ["vite/client"],
12+
"baseUrl": ".",
13+
"paths": {
14+
"@/*": ["./pages/*"],
15+
"@@/*": ["./assets/*"]
16+
}
17+
}
18+
}

‎examples/vite-7/vite.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from 'vite';
2+
import solidPlugin from 'vite-plugin-solid';
3+
4+
export default defineConfig({
5+
plugins: [
6+
solidPlugin(),
7+
],
8+
});

‎examples/vite-7/vitest.config.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { defineConfig } from 'vitest/config';
2+
import solidPlugin from '../../src/index.js';
3+
4+
export default defineConfig({
5+
plugins: [solidPlugin()],
6+
resolve: {
7+
conditions: ['development', 'browser'],
8+
},
9+
test: {
10+
environment: 'node',
11+
browser: {
12+
enabled: true,
13+
provider: 'playwright',
14+
instances: [{ browser: 'chromium' }],
15+
},
16+
},
17+
});

0 commit comments

Comments
 (0)