feat(create-rslib): add react template and tools(storybook/vitest)

.github/ISSUE_TEMPLATE/1-bug-report.en-US.yml

@@ -1,7 +1,7 @@
-name: "🐞 Bug Report"
+name: '🐞 Bug Report'
 description: Report a Bug to Rslib
-title: "[Bug]: "
-labels: ["🐞 bug"]
+title: '[Bug]: '
+labels: ['🐞 bug']
 body:
   - type: markdown
     attributes:
@@ -37,7 +37,7 @@ body:
     id: repro
     attributes:
       label: Reproduce link
-      description: "Please provide a simplest reproduction of the problem (minimal demo without redundant dependencies). You can create it on CodePen ([<kbd>⌘</kbd>Click here to open the template](https://codepen.io/Justineo/pen/yLbxxOR)), or provide the URL of the project:"
+      description: 'Please provide a simplest reproduction of the problem (minimal demo without redundant dependencies). You can create it on CodePen ([<kbd>⌘</kbd>Click here to open the template](https://codepen.io/Justineo/pen/yLbxxOR)), or provide the URL of the project:'
       placeholder: paste link here
     validations:
       required: true

.github/ISSUE_TEMPLATE/2-feature-request.en-US.yml

@@ -1,7 +1,7 @@
-name: "💡 Feature Request"
+name: '💡 Feature Request'
 description: Submit a new feature request to Rslib
-title: "[Feature]: "
-labels: ["💡 feature"]
+title: '[Feature]: '
+labels: ['💡 feature']
 body:
   - type: markdown
     attributes:

.github/workflows/pr-label.yaml

@@ -14,7 +14,7 @@ jobs:
     steps:
       - uses: github/[email protected]
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
           configuration-path: .github/pr-labeler.yml
           enable-versioned-regex: 0
           include-title: 1

.nvmrc

@@ -1 +1 @@
-v18.20.2
+v22.10.0

package.json

@@ -8,8 +8,9 @@
     "changeset": "changeset",
     "check-dependency-version": "check-dependency-version-consistency .",
     "check-spell": "pnpx cspell",
+    "format": "prettier . --write && biome check --write",
     "generate-release-pr": "zx scripts/generateReleasePr.mjs",
-    "lint": "biome check . --diagnostic-level=warn && pnpm run check-spell",
+    "lint": "biome check . --diagnostic-level=warn && prettier . --check && pnpm run check-spell",
     "prebundle": "nx run-many -t prebundle",
     "prepare": "pnpm run build && simple-git-hooks",
     "sort-package-json": "npx sort-package-json \"packages/*/package.json\"",
@@ -32,14 +33,17 @@
     "*.{js,jsx,ts,tsx,mjs,cjs}": [
       "biome check --write"
     ],
-    "package.json": "pnpm run check-dependency-version",
+    "package.json": [
+      "pnpm run check-dependency-version",
+      "prettier --write"
+    ],
     "pnpm-lock.yaml": "pnpm dedupe --check"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.9",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "~18.19.39",
+    "@types/node": "^22.8.1",
     "check-dependency-version-consistency": "^4.1.0",
     "cross-env": "^7.0.3",
     "cspell-ban-words": "^0.0.4",

packages/create-rslib/fragments/base/node-dual-js/src/index.js

@@ -0,0 +1 @@
+export const squared = (n) => n * n;

packages/create-rslib/template-node-dual-ts/package.json → packages/create-rslib/fragments/base/node-dual-ts/package.json

@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@rslib/core": "workspace:*",
+    "@types/node": "^22.8.1",
     "typescript": "^5.6.3"
   }
 }

packages/create-rslib/fragments/base/node-dual-ts/src/index.ts

@@ -0,0 +1 @@
+export const squared = (n: number): number => n * n;

packages/create-rslib/template-node-esm-ts/tsconfig.json → packages/create-rslib/fragments/base/node-dual-ts/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2021",
-    "lib": ["DOM", "ES2021"],
+    "lib": ["ES2021"],
     "module": "ESNext",
     "noEmit": true,
     "strict": true,

packages/create-rslib/fragments/base/node-esm-js/src/index.js

@@ -0,0 +1 @@
+export const squared = (n) => n * n;

packages/create-rslib/template-node-esm-ts/package.json → packages/create-rslib/fragments/base/node-esm-ts/package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@rslib/core": "workspace:*",
+    "@types/node": "^22.8.1",
     "typescript": "^5.6.3"
   }
 }

packages/create-rslib/fragments/base/node-esm-ts/src/index.ts

@@ -0,0 +1 @@
+export const squared = (n: number): number => n * n;

packages/create-rslib/template-node-dual-ts/tsconfig.json → packages/create-rslib/fragments/base/node-esm-ts/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["DOM", "ES2020"],
+    "lib": ["ES2021"],
     "module": "ESNext",
     "noEmit": true,
     "strict": true,

packages/create-rslib/fragments/base/react-js/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "rslib-react-js",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.0.5",
+    "@rslib/core": "workspace:*",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}

packages/create-rslib/fragments/base/react-js/rslib.config.mjs

@@ -0,0 +1,23 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**'],
+    },
+  },
+  lib: [
+    {
+      bundle: false,
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'classic',
+      },
+    }),
+  ],
+});

packages/create-rslib/fragments/base/react-js/src/Button.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './button.css';
+
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}) => {
+  const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['demo-button', `demo-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

packages/create-rslib/fragments/base/react-js/src/button.css

@@ -0,0 +1,34 @@
+.demo-button {
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.demo-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+.demo-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.demo-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.demo-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

packages/create-rslib/fragments/base/react-js/src/index.jsx

@@ -0,0 +1 @@
+export { Button } from './Button';

packages/create-rslib/fragments/base/react-ts/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "rslib-react-ts",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.0.5",
+    "@rslib/core": "workspace:*",
+    "@types/react": "^18.3.11",
+    "react": "^18.3.1",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}

packages/create-rslib/fragments/base/react-ts/rslib.config.ts

@@ -0,0 +1,24 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**'],
+    },
+  },
+  lib: [
+    {
+      bundle: false,
+      dts: true,
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'classic',
+      },
+    }),
+  ],
+});

packages/create-rslib/fragments/base/react-ts/src/Button.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  primary?: boolean;
+  backgroundColor?: string;
+  size?: 'small' | 'medium' | 'large';
+  label: string;
+  onClick?: () => void;
+}
+
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['demo-button', `demo-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

packages/create-rslib/fragments/base/react-ts/src/button.css

@@ -0,0 +1,34 @@
+.demo-button {
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+
+.demo-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+
+.demo-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+
+.demo-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+
+.demo-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+
+.demo-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

packages/create-rslib/fragments/base/react-ts/src/index.tsx

@@ -0,0 +1 @@
+export { Button } from './Button';

packages/create-rslib/fragments/base/react-ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2021"],
+    "module": "ESNext",
+    "jsx": "react",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}