chore(example): add SolidJS (#944)

Author: fi3ework

examples/solid-component-bundle/README.md

@@ -0,0 +1,3 @@
+# @examples/solid-component
+
+This example demonstrates how to use Rslib to build a simple SolidJS component.

examples/solid-component-bundle/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@examples/solid-component-bundle",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rslib build"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-sass": "^1.3.1",
+    "@rsbuild/plugin-solid": "^1.0.5",
+    "@rslib/core": "workspace:*",
+    "solid-js": "^1.6.0",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.0.0"
+  }
+}

examples/solid-component-bundle/rslib.config.ts

@@ -0,0 +1,16 @@
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    {
+      format: 'esm',
+      dts: true,
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginSolid(), pluginSass()],
+});

examples/solid-component-bundle/src/assets/logo.svg

@@ -0,0 +1,3 @@
+.button {
+  background: yellow;
+}

examples/solid-component-bundle/src/components/CounterButton/index.module.scss

@@ -0,0 +1,17 @@
+import type { Component } from 'solid-js';
+import styles from './index.module.scss';
+
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+export const CounterButton: Component<CounterButtonProps> = (props) => (
+  <button
+    type="button"
+    onClick={props.onClick}
+    classList={{ 'counter-button': true, [styles.button]: true }}
+  >
+    {props.label}
+  </button>
+);

examples/solid-component-bundle/src/components/CounterButton/index.tsx

@@ -0,0 +1 @@
+/// <reference types="@rslib/core/types" />

examples/solid-component-bundle/src/env.d.ts

@@ -0,0 +1,10 @@
+.counter-title {
+  width: 100px;
+  height: 100px;
+  background: no-repeat url('./assets/logo.svg');
+  background-size: cover;
+}
+
+.counter-text {
+  font-size: 50px;
+}

examples/solid-component-bundle/src/index.scss

@@ -0,0 +1,17 @@
+import type { Component } from 'solid-js';
+import { CounterButton } from './components/CounterButton';
+import { useCounter } from './useCounter';
+import './index.scss';
+
+export const Counter: Component = () => {
+  const { count, increment, decrement } = useCounter();
+
+  return (
+    <div>
+      <h1 class="counter-title">Solid</h1>
+      <h2 class="counter-text">Counter: {count()}</h2>
+      <CounterButton onClick={decrement} label="-" />
+      <CounterButton onClick={increment} label="+" />
+    </div>
+  );
+};

examples/solid-component-bundle/src/index.tsx

@@ -0,0 +1,10 @@
+import { createSignal } from 'solid-js';
+
+export const useCounter = (initialValue = 0) => {
+  const [count, setCount] = createSignal(initialValue);
+
+  const increment = () => setCount((prev) => prev + 1);
+  const decrement = () => setCount((prev) => prev - 1);
+
+  return { count, increment, decrement };
+};

examples/solid-component-bundle/src/useCounter.ts

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}