diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md index f9cac468..11e33dde 100644 --- a/packages/create-rstack/README.md +++ b/packages/create-rstack/README.md @@ -35,6 +35,8 @@ npx create-rstack -d my-project -t app-vanilla-ts - `lib-react-ts` - TypeScript React library - `lib-vue-js` - JavaScript Vue library - `lib-vue-ts` - TypeScript Vue library +- `lib-solid-js` - JavaScript Solid library +- `lib-solid-ts` - TypeScript Solid library ## Documentation diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts index 49e8765b..2aa269a5 100644 --- a/packages/create-rstack/src/index.ts +++ b/packages/create-rstack/src/index.ts @@ -52,6 +52,7 @@ const getTemplateName = async ({ template }: Argv): Promise => { { value: 'node', label: 'Node.js' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, + { value: 'solid', label: 'Solid' }, ], }), ); @@ -87,6 +88,8 @@ await create({ 'lib-react-ts', 'lib-vue-js', 'lib-vue-ts', + 'lib-solid-js', + 'lib-solid-ts', ], builtinTools: [], getTemplateName, diff --git a/packages/create-rstack/template-lib-solid-js/AGENTS.md b/packages/create-rstack/template-lib-solid-js/AGENTS.md new file mode 100644 index 00000000..234cc720 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-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-solid-js/README.md b/packages/create-rstack/template-lib-solid-js/README.md new file mode 100644 index 00000000..ab4b6927 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-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-solid-js/package.json b/packages/create-rstack/template-lib-solid-js/package.json new file mode 100644 index 00000000..85721ae5 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-js/package.json @@ -0,0 +1,39 @@ +{ + "name": "rstack-lib-solid-js", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "solid": "./dist/index.jsx", + "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-babel": "^2.0.1", + "@rsbuild/plugin-solid": "^1.2.2", + "@solidjs/testing-library": "^0.8.10", + "@testing-library/dom": "^10.4.1", + "@testing-library/jest-dom": "^7.0.0", + "happy-dom": "^20.11.1", + "rstack": "^0.3.5", + "solid-js": "^1.9.14" + }, + "peerDependencies": { + "solid-js": ">=1.8.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/create-rstack/template-lib-solid-js/rstack.config.js b/packages/create-rstack/template-lib-solid-js/rstack.config.js new file mode 100644 index 00000000..b30ed373 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-js/rstack.config.js @@ -0,0 +1,82 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.lib(async () => { + const { pluginBabel } = await import('@rsbuild/plugin-babel'); + const { pluginSolid } = await import('@rsbuild/plugin-solid'); + + return { + lib: [ + { + id: 'compiled', + bundle: false, + plugins: [ + pluginBabel({ + include: /\.(?:jsx|tsx)$/, + }), + pluginSolid(), + ], + }, + { + id: 'source', + bundle: false, + output: { + filename: { + js: '[name].jsx', + }, + }, + tools: { + swc: { + detectSyntax: 'auto', + jsc: { + transform: { + react: { + runtime: 'preserve', + }, + }, + }, + }, + rspack: { + module: { + parser: { + javascript: { + jsx: true, + }, + }, + }, + }, + }, + }, + ], + source: { + entry: { + index: ['./src/**'], + }, + }, + output: { + target: 'web', + }, + }; +}); + +define.test(async () => { + const { pluginBabel } = await import('@rsbuild/plugin-babel'); + const { pluginSolid } = await import('@rsbuild/plugin-solid'); + + return { + setupFiles: ['./tests/rstest.setup.js'], + plugins: [ + pluginBabel({ + include: /\.(?:jsx|tsx)$/, + }), + pluginSolid(), + ], + }; +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-lib-solid-js/src/Button.jsx b/packages/create-rstack/template-lib-solid-js/src/Button.jsx new file mode 100644 index 00000000..ffbf79b1 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-js/src/Button.jsx @@ -0,0 +1,17 @@ +import './button.css'; + +export function Button(props) { + const mode = () => (props.primary ? 'demo-button--primary' : 'demo-button--secondary'); + const size = () => props.size ?? 'medium'; + + return ( + + ); +} diff --git a/packages/create-rstack/template-lib-solid-js/src/button.css b/packages/create-rstack/template-lib-solid-js/src/button.css new file mode 100644 index 00000000..257ef46f --- /dev/null +++ b/packages/create-rstack/template-lib-solid-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-solid-js/src/index.jsx b/packages/create-rstack/template-lib-solid-js/src/index.jsx new file mode 100644 index 00000000..fe9c53c5 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rstack/template-lib-solid-js/tests/index.test.jsx b/packages/create-rstack/template-lib-solid-js/tests/index.test.jsx new file mode 100644 index 00000000..b2a49c13 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-js/tests/index.test.jsx @@ -0,0 +1,11 @@ +import { render, screen } from '@solidjs/testing-library'; +import { expect, test } from 'rstack/test'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render(() => + ); +} diff --git a/packages/create-rstack/template-lib-solid-ts/src/button.css b/packages/create-rstack/template-lib-solid-ts/src/button.css new file mode 100644 index 00000000..257ef46f --- /dev/null +++ b/packages/create-rstack/template-lib-solid-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-solid-ts/src/index.tsx b/packages/create-rstack/template-lib-solid-ts/src/index.tsx new file mode 100644 index 00000000..fa3c8a51 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-ts/src/index.tsx @@ -0,0 +1,2 @@ +export { Button } from './Button'; +export type { ButtonProps } from './Button'; diff --git a/packages/create-rstack/template-lib-solid-ts/tests/index.test.tsx b/packages/create-rstack/template-lib-solid-ts/tests/index.test.tsx new file mode 100644 index 00000000..b2a49c13 --- /dev/null +++ b/packages/create-rstack/template-lib-solid-ts/tests/index.test.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@solidjs/testing-library'; +import { expect, test } from 'rstack/test'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render(() =>