feat: add Rslib Solid examples

rslib/solid/README.md → rslib/solid-basic/README.md

@@ -1,4 +1,4 @@
-# Rslib project
+# Rslib Solid basic
 
 ## Setup
 

rslib/solid/package.json → rslib/solid-basic/package.json

@@ -1,9 +1,10 @@
 {
-  "name": "@rslib-example/solid",
+  "name": "@rslib-example/solid-basic",
   "version": "0.0.0",
   "type": "module",
   "exports": {
     ".": {
+      "solid": "./dist/source/index.jsx",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     }
@@ -20,11 +21,10 @@
     "@rsbuild/plugin-babel": "^1.2.1",
     "@rsbuild/plugin-solid": "^1.2.1",
     "@rslib/core": "^0.22.0",
-    "preact": "^10.29.2",
     "solid-js": "^1.9.13",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "solid-js": "^1.0.0"
+    "solid-js": "^1.8.0"
   }
 }

rslib/solid-basic/rslib.config.ts

@@ -0,0 +1,57 @@
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    {
+      id: 'compiled',
+      bundle: false,
+      format: 'esm',
+      dts: true,
+      plugins: [
+        pluginBabel({
+          include: /\.(?:jsx|tsx)$/,
+        }),
+        pluginSolid(),
+      ],
+    },
+    {
+      id: 'source',
+      bundle: false,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/source',
+        },
+        filename: {
+          js: '[name].jsx',
+        },
+      },
+      tools: {
+        swc: {
+          detectSyntax: 'auto',
+          jsc: {
+            transform: {
+              react: {
+                runtime: 'preserve',
+              },
+            },
+          },
+        },
+        rspack: {
+          module: {
+            parser: {
+              javascript: {
+                jsx: true,
+              },
+            },
+          },
+        },
+      },
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+});

rslib/solid/src/Button.tsx → rslib/solid-basic/src/Button.tsx

@@ -1,7 +1,7 @@
 import type { Component } from 'solid-js';
 import './button.css';
 
-interface ButtonProps {
+export interface ButtonProps {
   primary?: boolean;
   backgroundColor?: string;
   size?: 'small' | 'medium' | 'large';
@@ -14,15 +14,16 @@ export const Button: Component<ButtonProps> = ({
   size = 'medium',
   backgroundColor,
   label,
-  ...props
+  onClick,
 }) => {
   const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+
   return (
     <button
       type="button"
-      class={`demo-button ${`demo-button--${size}`} ${mode}`}
+      class={`demo-button demo-button--${size} ${mode}`}
       style={{ 'background-color': backgroundColor }}
-      {...props}
+      onClick={onClick}
     >
       {label}
     </button>

rslib/solid-basic/src/index.tsx

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

rslib/solid-rstest/.gitignore

@@ -0,0 +1,14 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+storybook-static
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

rslib/solid-rstest/README.md

@@ -0,0 +1,29 @@
+# Rslib Solid Rstest
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```
+
+Run tests:
+
+```bash
+pnpm test
+```

rslib/solid-rstest/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@rslib-example/solid-rstest",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "solid": "./dist/source/index.jsx",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib",
+    "dev": "rslib -w",
+    "test": "rstest"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-babel": "^1.2.1",
+    "@rsbuild/plugin-solid": "^1.2.1",
+    "@rslib/core": "^0.22.0",
+    "@rstest/adapter-rslib": "^0.10.3",
+    "@rstest/core": "^0.10.3",
+    "@solidjs/testing-library": "^0.8.10",
+    "happy-dom": "^20.9.0",
+    "solid-js": "^1.9.13",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
+  }
+}

rslib/solid-rstest/rslib.config.ts

@@ -0,0 +1,57 @@
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    {
+      id: 'compiled',
+      bundle: false,
+      format: 'esm',
+      dts: true,
+      plugins: [
+        pluginBabel({
+          include: /\.(?:jsx|tsx)$/,
+        }),
+        pluginSolid(),
+      ],
+    },
+    {
+      id: 'source',
+      bundle: false,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/source',
+        },
+        filename: {
+          js: '[name].jsx',
+        },
+      },
+      tools: {
+        swc: {
+          detectSyntax: 'auto',
+          jsc: {
+            transform: {
+              react: {
+                runtime: 'preserve',
+              },
+            },
+          },
+        },
+        rspack: {
+          module: {
+            parser: {
+              javascript: {
+                jsx: true,
+              },
+            },
+          },
+        },
+      },
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+});

rslib/solid-rstest/rstest.config.ts

@@ -0,0 +1,9 @@
+import { withRslibConfig } from '@rstest/adapter-rslib';
+import { defineConfig } from '@rstest/core';
+
+export default defineConfig({
+  extends: withRslibConfig({
+    libId: 'compiled',
+  }),
+  testEnvironment: 'happy-dom',
+});

rslib/solid-rstest/src/Button.tsx

@@ -0,0 +1,31 @@
+import type { Component } from 'solid-js';
+import './button.css';
+
+export interface ButtonProps {
+  primary?: boolean;
+  backgroundColor?: string;
+  size?: 'small' | 'medium' | 'large';
+  label: string;
+  onClick?: () => void;
+}
+
+export const Button: Component<ButtonProps> = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  onClick,
+}) => {
+  const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
+
+  return (
+    <button
+      type="button"
+      class={`demo-button demo-button--${size} ${mode}`}
+      style={{ 'background-color': backgroundColor }}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};