feat: add zustand example

examples/zustand/lynx.config.mjs

@@ -0,0 +1,23 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+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";
+
+export default defineConfig({
+  plugins: [
+    pluginReactLynx(),
+    pluginQRCode(),
+    pluginTypeCheck(),
+  ],
+  environments: {
+    web: {},
+    lynx: {},
+  },
+  output: {
+    assetPrefix: "https://lynxjs.org/lynx-examples/zustand/dist",
+  },
+});

examples/zustand/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lynx-example/zustand",
+  "description": "An example shows how to use zustand in Lynx",
+  "version": "0.6.0",
+  "type": "module",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev",
+    "preview": "rspeedy preview"
+  },
+  "dependencies": {
+    "@lynx-js/react": "catalog:"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "lynx.config.mjs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lynx-family/lynx-examples.git",
+    "directory": "examples/zustand"
+  },
+  "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",
+    "zustand": "^5.0.5"
+  }
+}

examples/zustand/src/App.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "@lynx-js/react";
+import { create } from "zustand";
+
+type State = {
+  count: number;
+};
+
+type Action = {
+  increment: () => void;
+};
+
+const useStore = create<State & Action>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}));
+
+export function App() {
+  const { count, increment } = useStore();
+
+  useEffect(() => {
+    console.log("count changed:", count);
+  }, [count]);
+
+  return (
+    <view>
+      <text>{count}</text>
+      <text bindtap={increment}>Tap</text>
+    </view>
+  );
+}

examples/zustand/src/index.tsx

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

examples/zustand/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@lynx-js/react",
+
+    "module": "node16",
+    "moduleResolution": "node16",
+
+    "strict": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "exclude": ["dist/"],
+}