rspack-contrib · chenjiahan · Feb 20, 2024 · Feb 20, 2024
diff --git a/rsbuild/lit/.gitignore b/rsbuild/lit/.gitignore
@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
diff --git a/rsbuild/lit/README.md b/rsbuild/lit/README.md
@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```
diff --git a/rsbuild/lit/package.json b/rsbuild/lit/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "rsbuild-lit",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.4.3",
+    "lit": "^3.1.2",
+    "typescript": "^5.3.0"
+  }
+}
diff --git a/rsbuild/lit/rsbuild.config.ts b/rsbuild/lit/rsbuild.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from '@rsbuild/core';
+
+export default defineConfig({
+  html: {
+    template: './src/index.html',
+  },
+});
diff --git a/rsbuild/lit/src/env.d.ts b/rsbuild/lit/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />
diff --git a/rsbuild/lit/src/index.css b/rsbuild/lit/src/index.css
@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
diff --git a/rsbuild/lit/src/index.html b/rsbuild/lit/src/index.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<head></head>
+<body>
+  <my-element />
+</body>
diff --git a/rsbuild/lit/src/index.ts b/rsbuild/lit/src/index.ts
@@ -0,0 +1,4 @@
+import './index.css';
+import { MyElement } from './my-element';
+
+customElements.define('my-element', MyElement);
diff --git a/rsbuild/lit/src/my-element.ts b/rsbuild/lit/src/my-element.ts
@@ -0,0 +1,34 @@
+import { html, css, LitElement } from 'lit';
+
+export class MyElement extends LitElement {
+  static styles = css`
+    .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;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="content">
+        <h1>Rsbuild with Lit</h1>
+        <p>Start building amazing things with Rsbuild.</p>
+      </div>
+    `;
+  }
+}
diff --git a/rsbuild/lit/tsconfig.json b/rsbuild/lit/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}
diff --git a/rsbuild/preact/.gitignore b/rsbuild/preact/.gitignore
@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
diff --git a/rsbuild/preact/README.md b/rsbuild/preact/README.md
@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```
diff --git a/rsbuild/preact/package.json b/rsbuild/preact/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "rsbuild-preact",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "preact": "^10.19.4"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.4.3",
+    "@rsbuild/plugin-preact": "^0.4.3",
+    "typescript": "^5.3.0"
+  }
+}
diff --git a/rsbuild/preact/rsbuild.config.ts b/rsbuild/preact/rsbuild.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginPreact } from '@rsbuild/plugin-preact';
+
+export default defineConfig({
+  plugins: [pluginPreact()],
+});
diff --git a/rsbuild/preact/src/App.css b/rsbuild/preact/src/App.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;
+}
diff --git a/rsbuild/preact/src/App.tsx b/rsbuild/preact/src/App.tsx
@@ -0,0 +1,12 @@
+import './App.css';
+
+const App = () => {
+  return (
+    <div className="content">
+      <h1>Rsbuild with Preact</h1>
+      <p>Start building amazing things with Rsbuild.</p>
+    </div>
+  );
+};
+
+export default App;
diff --git a/rsbuild/preact/src/index.tsx b/rsbuild/preact/src/index.tsx
@@ -0,0 +1,4 @@
+import { render } from 'preact';
+import App from './App';
+
+render(<App />, document.getElementById('root')!);
diff --git a/rsbuild/preact/tsconfig.json b/rsbuild/preact/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/rsbuild/solid/.gitignore b/rsbuild/solid/.gitignore
@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
diff --git a/rsbuild/solid/README.md b/rsbuild/solid/README.md
@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```
diff --git a/rsbuild/solid/package.json b/rsbuild/solid/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "rsbuild-solid",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.5"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.4.3",
+    "@rsbuild/plugin-babel": "^0.4.3",
+    "@rsbuild/plugin-solid": "^0.4.3",
+    "typescript": "^5.3.0"
+  }
+}
diff --git a/rsbuild/solid/rsbuild.config.ts b/rsbuild/solid/rsbuild.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+      exclude: /[\\/]node_modules[\\/]/,
+    }),
+    pluginSolid(),
+  ],
+});
diff --git a/rsbuild/solid/src/App.css b/rsbuild/solid/src/App.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;
+}
diff --git a/rsbuild/solid/src/App.tsx b/rsbuild/solid/src/App.tsx
@@ -0,0 +1,12 @@
+import './App.css';
+
+const App = () => {
+  return (
+    <div class="content">
+      <h1>Rsbuild with Solid</h1>
+      <p>Start building amazing things with Rsbuild.</p>
+    </div>
+  );
+};
+
+export default App;
diff --git a/rsbuild/solid/src/env.d.ts b/rsbuild/solid/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />