solidjs · birkskyum · Jul 29, 2025 · Jul 29, 2025
diff --git a/examples/vite-7/index.html b/examples/vite-7/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./src/main.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/vite-7/package.json b/examples/vite-7/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "example",
+  "private": "true",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest --browser.headless --run",
+    "test-dev": "vitest"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/browser": "^3.0.7",
+    "playwright": "^1.50.1",
+    "vite": "^7.0.0",
+    "vite-plugin-solid": "workspace:*",
+    "vitest": "^3.0.7"
+  },
+  "dependencies": {
+    "solid-js": "catalog:"
+  }
+}
diff --git a/examples/vite-7/src/App.tsx b/examples/vite-7/src/App.tsx
@@ -0,0 +1,64 @@
+import { onCleanup, onMount } from "solid-js";
+import { CounterProvider, useCounter } from "./CounterContext";
+
+const title = 'Count';
+
+function Count() {
+  const counter = useCounter();
+  onMount(() => {
+    console.log('Mounted Count');
+  });
+  onCleanup(() => {
+    console.log('Unmounted Count');
+  });
+  return (
+    <h1>{title}: {counter.value()}</h1>
+  );
+}
+
+function Increment() {
+  const counter = useCounter();
+  onMount(() => {
+    console.log('Mounted Increment');
+  });
+  onCleanup(() => {
+    console.log('Unmounted Increment');
+  });
+  return (
+    <button onClick={counter.increment}>
+      Increment
+    </button>
+  );
+}
+
+function Decrement() {
+  const counter = useCounter();
+  onMount(() => {
+    console.log('Mounted Decrement');
+  });
+  onCleanup(() => {
+    console.log('Unmounted Decrement');
+  });
+  return (
+    <button onClick={counter.decrement}>
+      Decrement
+    </button>
+  );
+}
+
+export default function App() {
+  onMount(() => {
+    console.log('Mounted App');
+  });
+  onCleanup(() => {
+    console.log('Unmounted App');
+  });
+
+  return (
+    <CounterProvider>
+      <Count />
+      <Increment />
+      <Decrement />
+    </CounterProvider>
+  );
+}
diff --git a/examples/vite-7/src/CounterContext.tsx b/examples/vite-7/src/CounterContext.tsx
@@ -0,0 +1,43 @@
+import { createContext, createSignal, JSX, onCleanup, onMount, useContext } from "solid-js";
+
+interface CounterContext {
+  value(): number;
+  increment(): void;
+  decrement(): void;
+}
+
+
+const CounterContext = createContext<CounterContext>();
+
+export function useCounter() {
+  const ctx = useContext(CounterContext);
+  if (!ctx) {
+    throw new Error('Missing CounterContext');
+  }
+  return ctx;
+}
+
+export function CounterProvider(props: { children: JSX.Element }) {
+  const [value, setValue] = createSignal(0);
+
+  function increment() {
+    setValue((c) => c + 1);
+  }
+
+  function decrement() {
+    setValue((c) => c - 1);
+  }
+  onMount(() => {
+    console.log('Mounted CounterProvider');
+  });
+  onCleanup(() => {
+    console.log('Unmounted CounterProvider');
+  });
+
+  return (
+    <CounterContext.Provider value={{ value, increment, decrement }}>
+      <h1>Counter</h1>
+      {props.children}
+    </CounterContext.Provider>
+  );
+}
diff --git a/examples/vite-7/src/main.tsx b/examples/vite-7/src/main.tsx
@@ -0,0 +1,8 @@
+import { render } from 'solid-js/web';
+import App from './App';
+
+const app = document.getElementById('app');
+
+if (app) {
+  render(() => <App />, app);
+}
diff --git a/examples/vite-7/tests/App.test.tsx b/examples/vite-7/tests/App.test.tsx
@@ -0,0 +1,21 @@
+/// <reference types="@vitest/browser/providers/playwright" />
+import { render } from '@solidjs/testing-library';
+import { page } from '@vitest/browser/context';
+import { expect, test } from 'vitest';
+
+import App from '../src/App.jsx';
+
+test('App', async () => {
+  const root = page.elementLocator(render(() => <App />).baseElement);
+
+  const count = root.getByText('Count:');
+  await expect.element(count).toHaveTextContent('Count: 0');
+
+  const incrementButton = root.getByText('Increment');
+  await incrementButton.click();
+  await expect.element(count).toHaveTextContent('Count: 1');
+
+  const decrementButton = root.getByText('Decrement');
+  await decrementButton.click();
+  await expect.element(count).toHaveTextContent('Count: 0');
+});
diff --git a/examples/vite-7/tests/tsconfig.json b/examples/vite-7/tests/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "types": [
+            "@testing-library/jest-dom"
+        ]
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.tsx"
+    ]
+}
diff --git a/examples/vite-7/tsconfig.json b/examples/vite-7/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./pages/*"],
+      "@@/*": ["./assets/*"]
+    }
+  }
+}
diff --git a/examples/vite-7/vite.config.ts b/examples/vite-7/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+
+export default defineConfig({
+  plugins: [
+    solidPlugin(),
+  ],
+});
diff --git a/examples/vite-7/vitest.config.ts b/examples/vite-7/vitest.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+import solidPlugin from '../../src/index.js';
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  resolve: {
+    conditions: ['development', 'browser'],
+  },
+  test: {
+    environment: 'node',
+    browser: {
+      enabled: true,
+      provider: 'playwright',
+      instances: [{ browser: 'chromium' }],
+    },
+  },
+});