feat(create-rstack): add React library templates

packages/create-rstack/README.md

@@ -25,8 +25,10 @@ npx create-rstack -d my-project -t app-vanilla-ts
 - `app-vanilla-ts` - TypeScript Vanilla application
 - `app-react-js` - JavaScript React application
 - `app-react-ts` - TypeScript React application
-- `lib-js` - JavaScript Node.js library
-- `lib-ts` - TypeScript Node.js library
+- `lib-node-js` - JavaScript Node.js library
+- `lib-node-ts` - TypeScript Node.js library
+- `lib-react-js` - JavaScript React library
+- `lib-react-ts` - TypeScript React library
 
 ## Documentation
 

packages/create-rstack/rstack.config.ts

@@ -6,6 +6,7 @@ define.lib({
 });
 
 define.test({
+  include: ['./tests/**/*.test.ts'],
   source: {
     tsconfigPath: './tests/tsconfig.json',
   },

packages/create-rstack/src/index.ts

@@ -13,6 +13,16 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
       return `app-${framework}-${language}`;
     }
 
+    if (template === 'lib' || template.startsWith('lib-')) {
+      const [, libraryType = 'node', language = 'js'] = template.split('-');
+
+      if (libraryType === 'js' || libraryType === 'ts') {
+        return `lib-node-${libraryType}`;
+      }
+
+      return `lib-${libraryType}-${language}`;
+    }
+
     const [type, language = 'js'] = template.split('-');
     return `${type}-${language}`;
   }
@@ -27,18 +37,21 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     }),
   );
 
-  const framework =
-    projectType === 'app'
-      ? checkCancel<string>(
-          await select({
-            message: 'Select framework',
-            options: [
+  const templateType = checkCancel<string>(
+    await select({
+      message: projectType === 'app' ? 'Select framework' : 'Select library type',
+      options:
+        projectType === 'app'
+          ? [
               { value: 'vanilla', label: 'Vanilla' },
               { value: 'react', label: 'React' },
+            ]
+          : [
+              { value: 'node', label: 'Node.js' },
+              { value: 'react', label: 'React' },
             ],
-          }),
-        )
-      : undefined;
+    }),
+  );
 
   const language = checkCancel<string>(
     await select({
@@ -50,7 +63,7 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
     }),
   );
 
-  return framework ? `${projectType}-${framework}-${language}` : `${projectType}-${language}`;
+  return `${projectType}-${templateType}-${language}`;
 };
 
 await create({
@@ -61,8 +74,10 @@ await create({
     'app-vanilla-ts',
     'app-react-js',
     'app-react-ts',
-    'lib-js',
-    'lib-ts',
+    'lib-node-js',
+    'lib-node-ts',
+    'lib-react-js',
+    'lib-react-ts',
   ],
   builtinTools: [],
   getTemplateName,

packages/create-rstack/template-lib-js/package.json → packages/create-rstack/template-lib-node-js/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rstack-lib-js",
+  "name": "rstack-lib-node-js",
   "version": "0.0.0",
   "sideEffects": false,
   "type": "module",

packages/create-rstack/template-lib-ts/package.json → packages/create-rstack/template-lib-node-ts/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rstack-lib-ts",
+  "name": "rstack-lib-node-ts",
   "version": "0.0.0",
   "sideEffects": false,
   "type": "module",

packages/create-rstack/template-lib-react-js/AGENTS.md

@@ -0,0 +1,14 @@
+# AGENTS.md
+
+## Commands
+
+- `{{ packageManager }} run build` - Build the library for production
+- `{{ packageManager }} run dev` - Rebuild the library when source files change
+- `{{ packageManager }} run test` - Run tests
+- `{{ packageManager }} run test:watch` - Run tests in watch mode
+
+## Docs
+
+- Rslib: https://rslib.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt
+- Rstest: https://rstest.rs/llms.txt

packages/create-rstack/template-lib-react-js/README.md

@@ -0,0 +1,40 @@
+# Rstack library
+
+## Setup
+
+Install the dependencies:
+
+```bash
+{{ packageManager }} install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+{{ packageManager }} run build
+```
+
+Build the library in watch mode:
+
+```bash
+{{ packageManager }} run dev
+```
+
+Run tests:
+
+```bash
+{{ packageManager }} run test
+```
+
+Run tests in watch mode:
+
+```bash
+{{ packageManager }} run test:watch
+```
+
+## Learn more
+
+- [Rstack documentation](https://rstack.rs)
+- [Rslib documentation](https://rslib.rs)

packages/create-rstack/template-lib-react-js/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "rstack-lib-react-js",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rs lib",
+    "dev": "rs lib --watch",
+    "format": "rs fmt",
+    "lint": "rs lint",
+    "test": "rs test",
+    "test:watch": "rs test --watch"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react-dom": "^19.2.4",
+    "happy-dom": "^20.11.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "rstack": "^0.3.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/create-rstack/template-lib-react-js/rstack.config.js

@@ -0,0 +1,34 @@
+// @ts-check
+// Rstack configuration guide: https://rstack.rs/config
+import { define } from 'rstack';
+
+define.lib(async () => {
+  const { pluginReact } = await import('@rsbuild/plugin-react');
+
+  return {
+    bundle: false,
+    source: {
+      entry: {
+        index: ['./src/**'],
+      },
+    },
+    output: {
+      target: 'web',
+    },
+    plugins: [pluginReact()],
+  };
+});
+
+define.test({
+  setupFiles: ['./tests/rstest.setup.js'],
+});
+
+define.lint(async () => {
+  const { js, reactHooksPlugin, reactPlugin } = await import('rstack/lint');
+
+  return [
+    js.configs.recommended,
+    reactPlugin.configs.recommended,
+    reactHooksPlugin.configs.recommended,
+  ];
+});

packages/create-rstack/template-lib-react-js/src/Button.jsx

@@ -0,0 +1,15 @@
+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-rstack/template-lib-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) 0 0 0 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-rstack/template-lib-react-js/src/index.jsx

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

packages/create-rstack/template-lib-react-js/tests/index.test.jsx

@@ -0,0 +1,11 @@
+import { expect, test } from 'rstack/test';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../src/Button';
+
+test('The button should have correct background color', async () => {
+  render(<Button backgroundColor="#ccc" label="Demo Button" />);
+  const button = screen.getByText('Demo Button');
+  expect(button).toHaveStyle({
+    backgroundColor: '#ccc',
+  });
+});

packages/create-rstack/template-lib-react-js/tests/rstest.setup.js

@@ -0,0 +1,4 @@
+import { expect } from 'rstack/test';
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);

packages/create-rstack/template-lib-react-ts/AGENTS.md

@@ -0,0 +1,14 @@
+# AGENTS.md
+
+## Commands
+
+- `{{ packageManager }} run build` - Build the library for production
+- `{{ packageManager }} run dev` - Rebuild the library when source files change
+- `{{ packageManager }} run test` - Run tests
+- `{{ packageManager }} run test:watch` - Run tests in watch mode
+
+## Docs
+
+- Rslib: https://rslib.rs/llms.txt
+- Rspack: https://rspack.rs/llms.txt
+- Rstest: https://rstest.rs/llms.txt

packages/create-rstack/template-lib-react-ts/README.md

@@ -0,0 +1,40 @@
+# Rstack library
+
+## Setup
+
+Install the dependencies:
+
+```bash
+{{ packageManager }} install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+{{ packageManager }} run build
+```
+
+Build the library in watch mode:
+
+```bash
+{{ packageManager }} run dev
+```
+
+Run tests:
+
+```bash
+{{ packageManager }} run test
+```
+
+Run tests in watch mode:
+
+```bash
+{{ packageManager }} run test:watch
+```
+
+## Learn more
+
+- [Rstack documentation](https://rstack.rs)
+- [Rslib documentation](https://rslib.rs)