feat(create-rstack): add Solid library templates (#250)

Author: chenjiahan

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
 

packages/create-rstack/src/index.ts

@@ -52,6 +52,7 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
               { 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,

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

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)

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"
+  }
+}

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];
+});

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 (
+    <button
+      type="button"
+      class={`demo-button demo-button--${size()} ${mode()}`}
+      style={{ 'background-color': props.backgroundColor }}
+      onClick={props.onClick}
+    >
+      {props.label}
+    </button>
+  );
+}

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;
+}

packages/create-rstack/template-lib-solid-js/src/index.jsx

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

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(() => <Button backgroundColor="#ccc" label="Demo Button" />);
+  const button = screen.getByText('Demo Button');
+  expect(button).toHaveStyle({
+    'background-color': '#ccc',
+  });
+});