feat(rslib): add ReactLynx examples

rslib/reactlynx-basic/README.md

@@ -0,0 +1,23 @@
+# Rslib + ReactLynx
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```

rslib/reactlynx-basic/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@rslib-example/reactlynx-basic",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.jsx"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib",
+    "dev": "rslib --watch"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "^0.126.0",
+    "@lynx-js/types": "^4.2.1",
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@rslib/core": "^1.0.0",
+    "@types/react": "^19.2.18",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": ">=0.100.0",
+    "@lynx-js/types": ">=4",
+    "@types/react": ">=19"
+  }
+}

rslib/reactlynx-basic/rslib.config.ts

@@ -0,0 +1,20 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  bundle: false,
+  dts: true,
+  output: {
+    target: 'web',
+    filename: {
+      js: '[name].jsx',
+    },
+  },
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'preserve',
+      },
+    }),
+  ],
+});

rslib/reactlynx-basic/src/ScrollList.tsx

@@ -0,0 +1,13 @@
+import type { JSX } from '@lynx-js/react';
+
+export function ScrollList(): JSX.Element {
+  return (
+    <scroll-view scroll-orientation="horizontal" style={{ width: '240px', height: '80px' }}>
+      {['red', 'green', 'blue'].map((color) => (
+        <view key={color} style={{ width: '120px', height: '80px', backgroundColor: color }}>
+          <text style={{ color: 'white' }}>{color}</text>
+        </view>
+      ))}
+    </scroll-view>
+  );
+}

rslib/reactlynx-basic/src/index.ts

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

rslib/reactlynx-basic/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2022"],
+    "jsx": "preserve",
+    "jsxImportSource": "@lynx-js/react",
+    "target": "ES2022",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["@lynx-js/types", "@rslib/core/types"],
+    "useDefineForClassFields": true,
+    "rootDir": "src",
+
+    /* modules */
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

rslib/reactlynx-rstest/README.md

@@ -0,0 +1,29 @@
+# Rslib + ReactLynx
+
+## 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 the tests:
+
+```bash
+pnpm test
+```

rslib/reactlynx-rstest/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@rslib-example/reactlynx-rstest",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.jsx"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib",
+    "dev": "rslib --watch",
+    "test": "rstest",
+    "test:watch": "rstest --watch"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "^0.126.0",
+    "@lynx-js/react-rsbuild-plugin": "^0.20.1",
+    "@lynx-js/types": "^4.2.1",
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@rslib/core": "^1.0.0",
+    "@rstest/adapter-rslib": "^0.11.12",
+    "@rstest/core": "^0.11.12",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "happy-dom": "^20.14.0",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": ">=0.100.0",
+    "@lynx-js/types": ">=4",
+    "@types/react": ">=19"
+  }
+}

rslib/reactlynx-rstest/rslib.config.ts

@@ -0,0 +1,20 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  bundle: false,
+  dts: true,
+  output: {
+    target: 'web',
+    filename: {
+      js: '[name].jsx',
+    },
+  },
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'preserve',
+      },
+    }),
+  ],
+});

rslib/reactlynx-rstest/rstest.config.ts

@@ -0,0 +1,9 @@
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { withDefaultConfig } from '@lynx-js/react/testing-library/rstest-config';
+import { withRslibConfig } from '@rstest/adapter-rslib';
+import { defineConfig } from '@rstest/core';
+
+export default defineConfig({
+  extends: [withDefaultConfig(), withRslibConfig()],
+  plugins: [pluginReactLynx()],
+});

rslib/reactlynx-rstest/src/ScrollList.tsx

@@ -0,0 +1,13 @@
+import type { JSX } from '@lynx-js/react';
+
+export function ScrollList(): JSX.Element {
+  return (
+    <scroll-view scroll-orientation="horizontal" style={{ width: '240px', height: '80px' }}>
+      {['red', 'green', 'blue'].map((color) => (
+        <view key={color} style={{ width: '120px', height: '80px', backgroundColor: color }}>
+          <text style={{ color: 'white' }}>{color}</text>
+        </view>
+      ))}
+    </scroll-view>
+  );
+}

rslib/reactlynx-rstest/src/index.ts

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

rslib/reactlynx-rstest/tests/index.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@lynx-js/react/testing-library';
+import { expect, test } from '@rstest/core';
+import { ScrollList } from '../src/ScrollList';
+
+test('renders the color items', () => {
+  render(<ScrollList />);
+
+  for (const color of ['red', 'green', 'blue']) {
+    const item = screen.getByText(color).parentElement;
+    expect(item?.style.backgroundColor).toBe(color);
+  }
+});

rslib/reactlynx-rstest/tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "types": ["@lynx-js/types", "@rslib/core/types", "node"]
+  },
+  "include": ["./"]
+}

rslib/reactlynx-rstest/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2022"],
+    "jsx": "preserve",
+    "jsxImportSource": "@lynx-js/react",
+    "target": "ES2022",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["@lynx-js/types", "@rslib/core/types"],
+    "useDefineForClassFields": true,
+    "rootDir": "src",
+
+    /* modules */
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}