chore: add Preact example

.github/workflows/test.yml

@@ -123,7 +123,7 @@ jobs:
           cache: 'pnpm'
 
       - name: Install Dependencies
-        run: pnpm install && cd ./tests && pnpx playwright install chromium
+        run: pnpm install && cd ./tests && pnpm playwright install chromium
 
       - name: Integration Test (Vitest)
         run: pnpm run test:integration
@@ -158,7 +158,7 @@ jobs:
           cache: 'pnpm'
 
       - name: Install Dependencies
-        run: pnpm install && cd ./tests && npx playwright install
+        run: pnpm install && cd ./tests && npx playwright install chromium
 
       # only run benchmark in Ubuntu
       - name: Benchmarks (Vitest)

examples/express-plugin/rslib.config.ts

@@ -1,25 +1,19 @@
 import { defineConfig } from '@rslib/core';
 
-const shared = {
-  dts: {
-    bundle: false,
-  },
-};
-
 export default defineConfig({
   lib: [
     {
-      ...shared,
       format: 'esm',
+      dts: true,
       output: {
         distPath: {
           root: './dist/esm',
         },
       },
     },
     {
-      ...shared,
       format: 'cjs',
+      dts: true,
       output: {
         distPath: {
           root: './dist/cjs',

examples/module-federation/mf-react-component/rslib.config.ts

@@ -2,35 +2,29 @@ import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 
-const shared = {
-  dts: {
-    bundle: false,
-  },
-};
-
 export default defineConfig({
   lib: [
     {
-      ...shared,
       format: 'esm',
+      dts: true,
       output: {
         distPath: {
           root: './dist/esm',
         },
       },
     },
     {
-      ...shared,
       format: 'cjs',
+      dts: true,
       output: {
         distPath: {
           root: './dist/cjs',
         },
       },
     },
     {
-      ...shared,
       format: 'mf',
+      dts: true,
       output: {
         distPath: {
           root: './dist/mf',

examples/preact-component-bundle-false/README.md

@@ -0,0 +1,3 @@
+# @examples/preact-component
+
+This example demonstrates how to use Rslib to build a simple Preact component.

examples/preact-component-bundle-false/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@examples/preact-component-bundle-false",
+  "private": true,
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/cjs/index.d.ts",
+  "scripts": {
+    "build": "rslib build"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-preact": "^1.2.0",
+    "@rsbuild/plugin-sass": "^1.1.1",
+    "@rslib/core": "workspace:*",
+    "preact": "^10.24.3"
+  },
+  "peerDependencies": {
+    "preact": "^10"
+  }
+}

examples/preact-component-bundle-false/rslib.config.ts

@@ -0,0 +1,37 @@
+import { pluginPreact } from '@rsbuild/plugin-preact';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { type LibConfig, defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**', '!./src/env.d.ts'],
+    },
+  },
+  lib: [
+    {
+      bundle: false,
+      dts: true,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+        },
+      },
+    },
+    {
+      bundle: false,
+      dts: true,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+        },
+      },
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginPreact(), pluginSass()],
+});

examples/preact-component-bundle-false/src/components/CounterButton/index.module.scss

@@ -0,0 +1,3 @@
+.button {
+  background: yellow;
+}

examples/preact-component-bundle-false/src/components/CounterButton/index.tsx

@@ -0,0 +1,16 @@
+import type { FunctionComponent } from 'preact';
+import styles from './index.module.scss';
+
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+export const CounterButton: FunctionComponent<CounterButtonProps> = ({
+  onClick,
+  label,
+}) => (
+  <button type="button" className={styles.button} onClick={onClick}>
+    {label}
+  </button>
+);

examples/preact-component-bundle-false/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

examples/preact-component-bundle-false/src/index.scss

@@ -0,0 +1,3 @@
+.counter-text {
+  font-size: 50px;
+}

examples/preact-component-bundle-false/src/index.tsx

@@ -0,0 +1,16 @@
+import type { FunctionComponent } from 'preact';
+import { CounterButton } from './components/CounterButton/index';
+import { useCounter } from './useCounter';
+import './index.scss';
+
+export const Counter: FunctionComponent = () => {
+  const { count, increment, decrement } = useCounter();
+
+  return (
+    <div>
+      <h2 className="counter-text">Counter: {count}</h2>
+      <CounterButton onClick={decrement} label="-" />
+      <CounterButton onClick={increment} label="+" />
+    </div>
+  );
+};

examples/preact-component-bundle-false/src/useCounter.tsx

@@ -0,0 +1,10 @@
+import { useState } from 'preact/hooks';
+
+export const useCounter = (initialValue = 0) => {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => setCount((prev) => prev + 1);
+  const decrement = () => setCount((prev) => prev - 1);
+
+  return { count, increment, decrement };
+};

examples/preact-component-bundle-false/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}

examples/react-component-bundle-false/rslib.config.ts

@@ -2,13 +2,6 @@ import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { type LibConfig, defineConfig } from '@rslib/core';
 
-const shared: LibConfig = {
-  bundle: false,
-  dts: {
-    bundle: false,
-  },
-};
-
 export default defineConfig({
   source: {
     entry: {
@@ -17,17 +10,19 @@ export default defineConfig({
   },
   lib: [
     {
-      ...shared,
       format: 'esm',
+      bundle: false,
+      dts: true,
       output: {
         distPath: {
           root: './dist/esm',
         },
       },
     },
     {
-      ...shared,
       format: 'cjs',
+      bundle: false,
+      dts: true,
       output: {
         distPath: {
           root: './dist/cjs',

examples/react-component-bundle/rslib.config.ts

@@ -2,17 +2,11 @@ import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { defineConfig } from '@rslib/core';
 
-const shared = {
-  dts: {
-    bundle: false,
-  },
-};
-
 export default defineConfig({
   lib: [
     {
-      ...shared,
       format: 'esm',
+      dts: true,
       output: {
         distPath: {
           root: './dist/esm',
@@ -22,8 +16,8 @@ export default defineConfig({
       },
     },
     {
-      ...shared,
       format: 'cjs',
+      dts: true,
       output: {
         distPath: {
           root: './dist/cjs',