feat: add vanilla example

Author: chenjiahan

examples/vanilla/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@examples/vanilla",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rs build",
+    "dev": "rs dev",
+    "test": "rs test",
+    "preview": "rs preview"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "catalog:",
+    "@rstest/adapter-rsbuild": "catalog:",
+    "@rstest/core": "catalog:",
+    "@testing-library/dom": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@types/node": "catalog:",
+    "happy-dom": "catalog:",
+    "rstack": "workspace:*",
+    "typescript": "catalog:"
+  }
+}

examples/vanilla/rsbuild.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({});

examples/vanilla/rstest.config.ts

@@ -0,0 +1,7 @@
+import { withRsbuildConfig } from '@rstest/adapter-rsbuild';
+import { defineConfig } from '@rstest/core';
+
+export default defineConfig({
+  extends: withRsbuildConfig(),
+  setupFiles: ['./tests/rstest.setup.ts'],
+});

examples/vanilla/src/index.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

examples/vanilla/src/index.ts

@@ -0,0 +1,11 @@
+import './index.css';
+
+const rootEl = document.querySelector('#root');
+if (rootEl) {
+  rootEl.innerHTML = `
+  <div class="content">
+    <h1>Vanilla Rsbuild</h1>
+    <p>Start building amazing things with Rsbuild.</p>
+  </div>
+`;
+}

examples/vanilla/tests/dom.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@rstest/core';
+import { screen } from '@testing-library/dom';
+
+test('test dom', () => {
+  document.body.innerHTML = `
+    <span data-testid="not-empty"><span data-testid="empty"></span></span>
+    <div data-testid="visible">Visible Example</div>
+  `;
+
+  expect(screen.queryByTestId('not-empty')).toBeInTheDocument();
+  expect(screen.getByText('Visible Example')).toBeVisible();
+});

examples/vanilla/tests/rstest.setup.ts

@@ -0,0 +1,4 @@
+import { expect } from '@rstest/core';
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);

examples/vanilla/tests/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["@testing-library/jest-dom"]
+  },
+  "include": ["./"]
+}

examples/vanilla/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["@rsbuild/core/types", "node"],
+    "useDefineForClassFields": true,
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}