chore: add Preact example

Author: fi3ework

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": "*"
+  }
+}

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>
+  );
+};