diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md index 453221e..b62318a 100644 --- a/packages/create-rstack/README.md +++ b/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 diff --git a/packages/create-rstack/rstack.config.ts b/packages/create-rstack/rstack.config.ts index 61659ac..923fc17 100644 --- a/packages/create-rstack/rstack.config.ts +++ b/packages/create-rstack/rstack.config.ts @@ -6,6 +6,7 @@ define.lib({ }); define.test({ + include: ['./tests/**/*.test.ts'], source: { tsconfigPath: './tests/tsconfig.json', }, diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts index 8590df3..8136407 100644 --- a/packages/create-rstack/src/index.ts +++ b/packages/create-rstack/src/index.ts @@ -13,6 +13,16 @@ const getTemplateName = async ({ template }: Argv): Promise => { 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 => { }), ); - const framework = - projectType === 'app' - ? checkCancel( - await select({ - message: 'Select framework', - options: [ + const templateType = checkCancel( + 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( await select({ @@ -50,7 +63,7 @@ const getTemplateName = async ({ template }: Argv): Promise => { }), ); - 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, diff --git a/packages/create-rstack/template-lib-js/AGENTS.md b/packages/create-rstack/template-lib-node-js/AGENTS.md similarity index 100% rename from packages/create-rstack/template-lib-js/AGENTS.md rename to packages/create-rstack/template-lib-node-js/AGENTS.md diff --git a/packages/create-rstack/template-lib-js/README.md b/packages/create-rstack/template-lib-node-js/README.md similarity index 100% rename from packages/create-rstack/template-lib-js/README.md rename to packages/create-rstack/template-lib-node-js/README.md diff --git a/packages/create-rstack/template-lib-js/package.json b/packages/create-rstack/template-lib-node-js/package.json similarity index 94% rename from packages/create-rstack/template-lib-js/package.json rename to packages/create-rstack/template-lib-node-js/package.json index 76a93f3..d586a11 100644 --- a/packages/create-rstack/template-lib-js/package.json +++ b/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", diff --git a/packages/create-rstack/template-lib-js/rstack.config.js b/packages/create-rstack/template-lib-node-js/rstack.config.js similarity index 100% rename from packages/create-rstack/template-lib-js/rstack.config.js rename to packages/create-rstack/template-lib-node-js/rstack.config.js diff --git a/packages/create-rstack/template-lib-js/src/index.js b/packages/create-rstack/template-lib-node-js/src/index.js similarity index 100% rename from packages/create-rstack/template-lib-js/src/index.js rename to packages/create-rstack/template-lib-node-js/src/index.js diff --git a/packages/create-rstack/template-lib-js/tests/index.test.js b/packages/create-rstack/template-lib-node-js/tests/index.test.js similarity index 100% rename from packages/create-rstack/template-lib-js/tests/index.test.js rename to packages/create-rstack/template-lib-node-js/tests/index.test.js diff --git a/packages/create-rstack/template-lib-ts/AGENTS.md b/packages/create-rstack/template-lib-node-ts/AGENTS.md similarity index 100% rename from packages/create-rstack/template-lib-ts/AGENTS.md rename to packages/create-rstack/template-lib-node-ts/AGENTS.md diff --git a/packages/create-rstack/template-lib-ts/README.md b/packages/create-rstack/template-lib-node-ts/README.md similarity index 100% rename from packages/create-rstack/template-lib-ts/README.md rename to packages/create-rstack/template-lib-node-ts/README.md diff --git a/packages/create-rstack/template-lib-ts/package.json b/packages/create-rstack/template-lib-node-ts/package.json similarity index 95% rename from packages/create-rstack/template-lib-ts/package.json rename to packages/create-rstack/template-lib-node-ts/package.json index 46091aa..4805daf 100644 --- a/packages/create-rstack/template-lib-ts/package.json +++ b/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", diff --git a/packages/create-rstack/template-lib-ts/rstack.config.ts b/packages/create-rstack/template-lib-node-ts/rstack.config.ts similarity index 100% rename from packages/create-rstack/template-lib-ts/rstack.config.ts rename to packages/create-rstack/template-lib-node-ts/rstack.config.ts diff --git a/packages/create-rstack/template-lib-ts/src/index.ts b/packages/create-rstack/template-lib-node-ts/src/index.ts similarity index 100% rename from packages/create-rstack/template-lib-ts/src/index.ts rename to packages/create-rstack/template-lib-node-ts/src/index.ts diff --git a/packages/create-rstack/template-lib-ts/tests/index.test.ts b/packages/create-rstack/template-lib-node-ts/tests/index.test.ts similarity index 100% rename from packages/create-rstack/template-lib-ts/tests/index.test.ts rename to packages/create-rstack/template-lib-node-ts/tests/index.test.ts diff --git a/packages/create-rstack/template-lib-ts/tsconfig.json b/packages/create-rstack/template-lib-node-ts/tsconfig.json similarity index 100% rename from packages/create-rstack/template-lib-ts/tsconfig.json rename to packages/create-rstack/template-lib-node-ts/tsconfig.json diff --git a/packages/create-rstack/template-lib-react-js/AGENTS.md b/packages/create-rstack/template-lib-react-js/AGENTS.md new file mode 100644 index 0000000..234cc72 --- /dev/null +++ b/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 diff --git a/packages/create-rstack/template-lib-react-js/README.md b/packages/create-rstack/template-lib-react-js/README.md new file mode 100644 index 0000000..ab4b692 --- /dev/null +++ b/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) diff --git a/packages/create-rstack/template-lib-react-js/package.json b/packages/create-rstack/template-lib-react-js/package.json new file mode 100644 index 0000000..7580d09 --- /dev/null +++ b/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" + } +} diff --git a/packages/create-rstack/template-lib-react-js/rstack.config.js b/packages/create-rstack/template-lib-react-js/rstack.config.js new file mode 100644 index 0000000..30b3b51 --- /dev/null +++ b/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, + ]; +}); diff --git a/packages/create-rstack/template-lib-react-js/src/Button.jsx b/packages/create-rstack/template-lib-react-js/src/Button.jsx new file mode 100644 index 0000000..9196008 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/packages/create-rstack/template-lib-react-js/src/button.css b/packages/create-rstack/template-lib-react-js/src/button.css new file mode 100644 index 0000000..257ef46 --- /dev/null +++ b/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; +} diff --git a/packages/create-rstack/template-lib-react-js/src/index.jsx b/packages/create-rstack/template-lib-react-js/src/index.jsx new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/packages/create-rstack/template-lib-react-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rstack/template-lib-react-js/tests/index.test.jsx b/packages/create-rstack/template-lib-react-js/tests/index.test.jsx new file mode 100644 index 0000000..652fcc8 --- /dev/null +++ b/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( + ); +}; diff --git a/packages/create-rstack/template-lib-react-ts/src/button.css b/packages/create-rstack/template-lib-react-ts/src/button.css new file mode 100644 index 0000000..257ef46 --- /dev/null +++ b/packages/create-rstack/template-lib-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) 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; +} diff --git a/packages/create-rstack/template-lib-react-ts/src/index.tsx b/packages/create-rstack/template-lib-react-ts/src/index.tsx new file mode 100644 index 0000000..fe9c53c --- /dev/null +++ b/packages/create-rstack/template-lib-react-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rstack/template-lib-react-ts/tests/index.test.tsx b/packages/create-rstack/template-lib-react-ts/tests/index.test.tsx new file mode 100644 index 0000000..652fcc8 --- /dev/null +++ b/packages/create-rstack/template-lib-react-ts/tests/index.test.tsx @@ -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(