docs(examples): add rspeedy-react-lynx-app to esamples

examples/rspeedy-react-lynx-app/CHANGELOG.md

@@ -0,0 +1,93 @@
+# @lynx-example/list
+
+## 0.6.0
+
+### Minor Changes
+
+- 09fd471: Bump React v0.109.0 with Rspeedy v0.9.7
+
+### Patch Changes
+
+- f1d4d6e: Fix TypeScript errors.
+
+## 0.5.1
+
+### Patch Changes
+
+- b2a4535: fix: modify `z-index`
+
+## 0.5.0
+
+### Minor Changes
+
+- 97de59b: Upgrade to Rspeedy v0.9.3.
+
+## 0.4.0
+
+### Minor Changes
+
+- df7bb3d: Upgrade to Rspeedy v0.9.0.
+
+### Patch Changes
+
+- 92eb06b: feat: list add supports web
+- b59bd3b: feat: Introduce the showcase of async-rendering on `<list>`
+- dbf5cc3: feat: Introduce horizontal snap showcase for `<list>`
+
+## 0.3.1
+
+### Patch Changes
+
+- 4b435a4: Changed `class` to `className` for all Examples
+
+## 0.3.0
+
+### Minor Changes
+
+- b0f16b3: Bump to `@lynx-js/rspeedy` v0.8.2 with `@lynx-js/react` v0.105.0
+
+## 0.2.1
+
+### Patch Changes
+
+- 947d1d5: opt: remove custom-list-name
+
+## 0.2.0
+
+### Minor Changes
+
+- 6739e06: Add `repository` to `package.json`.
+
+### Patch Changes
+
+- 5a56b54: Add `output.assetPrefix` for Lynx Website
+
+## 0.1.1
+
+### Patch Changes
+
+- 5c8be44: modify scroll_view/list/element_mutation demo
+
+## 0.1.0
+
+### Minor Changes
+
+- d2aabf6: feat: update @lynx-js/react from "^0.103.3" to "^0.104.1", @lynx-js/react-rsbuild-plugin and @lynx-js/rspeedy to "^0.8.1".
+
+## 0.0.5
+
+### Patch Changes
+
+- aacfa72: opt: opt list demo
+
+## 0.0.4
+
+### Patch Changes
+
+- 1994bd9: Remove useless attributes, format css style
+
+## 0.0.3
+
+### Patch Changes
+
+- Use `scroll-orientation` instead of `scroll-y`.

examples/rspeedy-react-lynx-app/eslint.config.js

@@ -0,0 +1,56 @@
+import eslintJs from "@eslint/js";
+import eslintPluginReactX from "eslint-plugin-react-x";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import gitignore from "eslint-config-flat-gitignore";
+
+import TSCONFIG from "./tsconfig.json" with { type: "json" };
+
+const GLOB_TS = ["**/*.ts", "**/*.tsx"];
+const GLOB_JS = ["**/*.js", "**/*.jsx"];
+const GLOB_CONFIG = ["**/*.config.{js,mjs,ts,tsx}"];
+
+export default tseslint.config(
+  gitignore(),
+  {
+    files: GLOB_TS,
+    extends: [
+      eslintJs.configs.recommended,
+      tseslint.configs.recommended,
+    ],
+  },
+  {
+    files: TSCONFIG.include,
+    extends: [
+      tseslint.configs.recommendedTypeChecked,
+    ],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: "./tsconfig.json",
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    files: TSCONFIG.include,
+    extends: [
+      eslintPluginReactX.configs["recommended-type-checked"],
+    ],
+    plugins: {
+      "react-hooks": eslintPluginReactHooks,
+    },
+    rules: {
+      ...eslintPluginReactHooks.configs.recommended.rules,
+      "react-x/no-unnecessary-use-effect": "warn",
+    },
+  },
+  {
+    files: [...GLOB_JS, ...GLOB_CONFIG],
+    extends: [tseslint.configs.disableTypeChecked],
+    rules: {
+      "no-undef": "off",
+      "no-console": "off",
+    },
+  },
+);

examples/rspeedy-react-lynx-app/lynx.config.ts

@@ -0,0 +1,18 @@
+import { pluginQRCode } from "@lynx-js/qrcode-rsbuild-plugin";
+import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+import { defineConfig } from "@lynx-js/rspeedy";
+import { pluginTypeCheck } from "@rsbuild/plugin-type-check";
+import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";
+
+export default defineConfig({
+  plugins: [
+    pluginReactLynx(),
+    pluginQRCode(),
+    pluginTailwindCSS(),
+    pluginTypeCheck(),
+  ],
+  environments: {
+    web: {},
+    lynx: {},
+  },
+});

examples/rspeedy-react-lynx-app/package copy.json

@@ -0,0 +1,31 @@
+{
+  "name": "@lynx-example/tailwindcss",
+  "version": "0.3.0",
+  "type": "module",
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev"
+  },
+  "dependencies": {
+    "@lynx-js/react": "catalog:"
+  },
+  "devDependencies": {
+    "@lynx-js/qrcode-rsbuild-plugin": "catalog:",
+    "@lynx-js/react-rsbuild-plugin": "catalog:",
+    "@lynx-js/rspeedy": "catalog:",
+    "@lynx-js/types": "^3.2.0",
+    "@types/react": "^18.3.18",
+    "typescript": "~5.7.3",
+    "@lynx-contrib/tailwind-preset": "0.0.2",
+    "rsbuild-plugin-tailwindcss": "^0.2.0",
+    "tailwindcss": "^3.4.17"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "directory": "examples/tailwindcss",
+    "url": "git+https://github.com/lynx-family/lynx-examples.git",
+    "type": "git"
+  }
+}

examples/rspeedy-react-lynx-app/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@examples/rspeedy-react-lynx-app",
+  "version": "0.6.0",
+  "description": "An example shows how to use list in Lynx",
+  "license": "Apache-2.0",
+  "type": "module",
+  "files": [
+    "dist/",
+    "src/",
+    "lynx.config.mjs"
+  ],
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev",
+    "preview": "rspeedy preview"
+  },
+  "dependencies": {
+    "@lynx-js/react": "^0.109.1"
+  },
+  "devDependencies": {
+    "@eslint/config-inspector": "^1.0.2",
+    "@eslint/js": "^9.28.0",
+    "@lynx-contrib/tailwind-preset": "^0.0.2",
+    "@lynx-js/qrcode-rsbuild-plugin": "^0.3.6",
+    "@lynx-js/react-rsbuild-plugin": "^0.10.2",
+    "@lynx-js/rspeedy": "^0.9.8",
+    "@lynx-js/types": "^3.3.0",
+    "@rsbuild/plugin-sass": "^1.3.1",
+    "@rsbuild/plugin-type-check": "^1.2.2",
+    "@types/react": "^19.1.6",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-x": "workspace:*",
+    "rsbuild-plugin-tailwindcss": "^0.2.1"
+  }
+}

examples/rspeedy-react-lynx-app/rspeedy-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@lynx-js/rspeedy/client" />

examples/rspeedy-react-lynx-app/src/App.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/rspeedy-react-lynx-app/src/App.tsx

@@ -0,0 +1,40 @@
+import { useState } from "@lynx-js/react";
+
+import "./App.css";
+
+export function App() {
+  const [count] = useState(0);
+
+  return (
+    <page>
+      <view className="flex flex-col justify-center items-center min-h-screen text-center">
+        <text className="text-6xl font-bold leading-normal underline">
+          ReactLynx + TailwindCSS
+        </text>
+        <text className="text-lg font-normal text-gray-500 leading-normal">
+          Start building amazing things with ReactLynx.
+        </text>
+        <view
+          className="flex flex-row p-20 rounded-full"
+          style={{
+            backgroundColor: "rgba(255, 255, 255, 0.5)",
+            padding: "40px",
+            margin: "10px",
+          }}
+        >
+          <text className="text-4xl font-bold text-gray-800">
+            Count: {count}
+          </text>
+        </view>
+        <view className="grid grid-cols-3 gap-4">
+          <text>01</text>
+          <text>02</text>
+          <text>03</text>
+          <text>04</text>
+          <text>05</text>
+          <text>06</text>
+        </view>
+      </view>
+    </page>
+  );
+}

examples/rspeedy-react-lynx-app/src/index.tsx

@@ -0,0 +1,11 @@
+import { root } from "@lynx-js/react";
+
+import { App } from "./App.jsx";
+
+root.render(
+  <App />,
+);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

examples/rspeedy-react-lynx-app/src/rspeedy-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@lynx-js/rspeedy/client" />

examples/rspeedy-react-lynx-app/tailwind.config.js

@@ -0,0 +1,7 @@
+import preset from "@lynx-contrib/tailwind-preset";
+
+export default {
+  presets: [
+    preset,
+  ],
+};

examples/rspeedy-react-lynx-app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@lynx-js/react",
+    "module": "node16",
+    "moduleResolution": "node16",
+    "strict": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@assets/*": [
+        "./assets/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "dist"
+  ]
+}