chore(examples): add React and Node.js examples (#53)

fi3ework · web-flow · commit 515bfd9460a1 · 2024-08-02T17:11:57.000+08:00
diff --git a/examples/basic/package.json b/examples/basic/package.json
diff --git a/examples/basic/src/constants.ts b/examples/basic/src/constants.ts
diff --git a/examples/basic/src/index.ts b/examples/basic/src/index.ts
diff --git a/examples/express-plugin/README.md b/examples/express-plugin/README.md
@@ -0,0 +1,3 @@
+# @examples/express-plugin
+
+This example demonstrates how to use Rslib to build a simple Node.js package.
diff --git a/examples/express-plugin/package.json b/examples/express-plugin/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@examples/express-plugin",
+  "private": true,
+  "scripts": {
+    "build": "rslib build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@rslib/core": "workspace:*",
+    "@types/express": "^4.17.21",
+    "express": "^4.19.2",
+    "typescript": "^5.5.3"
+  },
+  "peerDependencies": {
+    "express": "^4"
+  }
+}
diff --git a/examples/express-plugin/rslib.config.ts b/examples/express-plugin/rslib.config.ts
@@ -1,8 +1,16 @@
 import { defineConfig } from '@rslib/core';
 
+const shared = {
+  autoExtension: true,
+  dts: {
+    bundle: false,
+  },
+};
+
 export default defineConfig({
   lib: [
     {
+      ...shared,
       format: 'esm',
       output: {
         distPath: {
@@ -11,6 +19,7 @@ export default defineConfig({
       },
     },
     {
+      ...shared,
       format: 'cjs',
       output: {
         distPath: {
@@ -24,4 +33,10 @@ export default defineConfig({
       main: './src/index.ts',
     },
   },
+  output: {
+    externals: {
+      express: 'express',
+    },
+    target: 'node',
+  },
 });
diff --git a/examples/express-plugin/src/index.ts b/examples/express-plugin/src/index.ts
@@ -0,0 +1,15 @@
+import type { RequestHandler } from 'express';
+import { logRequest } from './logger';
+import { type LoggerOptions, defaultOptions } from './types';
+
+export function expressLogger(
+  options: Partial<LoggerOptions> = {},
+): RequestHandler {
+  const mergedOptions = { ...defaultOptions, ...options };
+  return (req, res, next) => {
+    logRequest(req, mergedOptions);
+    next();
+  };
+}
+
+export * from './types';
diff --git a/examples/express-plugin/src/logger.ts b/examples/express-plugin/src/logger.ts
@@ -0,0 +1,25 @@
+import type { Request } from 'express';
+import type { LoggerOptions } from './types';
+
+export function logRequest(req: Request, options: LoggerOptions): void {
+  const { method, url } = req;
+  const logMessage = `${method} ${url}`;
+
+  switch (options.logLevel) {
+    case 'debug':
+      console.debug(logMessage);
+      break;
+    case 'warn':
+      console.warn(logMessage);
+      break;
+    case 'error':
+      console.error(logMessage);
+      break;
+    default:
+      console.log(logMessage);
+  }
+
+  if (options.logBody && req.body) {
+    console.log('Request body:', req.body);
+  }
+}
diff --git a/examples/express-plugin/src/types.ts b/examples/express-plugin/src/types.ts
@@ -0,0 +1,9 @@
+export interface LoggerOptions {
+  logLevel: 'info' | 'debug' | 'warn' | 'error';
+  logBody: boolean;
+}
+
+export const defaultOptions: LoggerOptions = {
+  logLevel: 'info',
+  logBody: false,
+};
diff --git a/examples/express-plugin/tsconfig.json b/examples/express-plugin/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["src/**/*"]
+}
diff --git a/examples/react-component/README.md b/examples/react-component/README.md
@@ -0,0 +1,3 @@
+# @examples/react-component
+
+This example demonstrates how to use Rslib to build a simple React component.
diff --git a/examples/react-component/package.json b/examples/react-component/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@examples/react-component",
+  "private": true,
+  "scripts": {
+    "build": "rslib build"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "1.0.1-beta.9",
+    "@rslib/core": "workspace:*",
+    "@types/react": "^18.3.3",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}
diff --git a/examples/react-component/rslib.config.ts b/examples/react-component/rslib.config.ts
@@ -0,0 +1,44 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+const shared = {
+  autoExtension: true,
+  dts: {
+    bundle: false,
+  },
+};
+
+export default defineConfig({
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+        },
+      },
+    },
+    {
+      ...shared,
+      format: 'cjs',
+      output: {
+        distPath: {
+          root: './dist/cjs',
+        },
+      },
+    },
+  ],
+  source: {
+    entry: {
+      main: './src/index.tsx',
+    },
+  },
+  output: {
+    externals: {
+      react: 'react',
+      'react/jsx-runtime': 'react/jsx-runtime',
+    },
+  },
+  plugins: [pluginReact()],
+});
diff --git a/examples/react-component/src/CounterButton.tsx b/examples/react-component/src/CounterButton.tsx
@@ -0,0 +1,13 @@
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+export const CounterButton: React.FC<CounterButtonProps> = ({
+  onClick,
+  label,
+}) => (
+  <button type="button" onClick={onClick}>
+    {label}
+  </button>
+);
diff --git a/examples/react-component/src/index.tsx b/examples/react-component/src/index.tsx
@@ -0,0 +1,14 @@
+import { CounterButton } from './CounterButton';
+import { useCounter } from './useCounter';
+
+export const Counter: React.FC = () => {
+  const { count, increment, decrement } = useCounter();
+
+  return (
+    <div>
+      <h2>Counter: {count}</h2>
+      <CounterButton onClick={decrement} label="-" />
+      <CounterButton onClick={increment} label="+" />
+    </div>
+  );
+};
diff --git a/examples/react-component/src/useCounter.tsx b/examples/react-component/src/useCounter.tsx
@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+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 };
+};
diff --git a/examples/react-component/tsconfig.json b/examples/react-component/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src/**/*"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# @examples/express-plugin`
	`2`	`+`
	`3`	`+This example demonstrates how to use Rslib to build a simple Node.js package.`