docs: add solidjs examples, optimize docs

Author: JOU-amjs

docs/about/03-qa.md docs/about/03-faqs.mddocs/about/03-qa.md renamed to docs/about/03-faqs.md

@@ -1,10 +1,7 @@
 ---
-title: Question and Answer
+title: FAQs
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 ## Why to create alova?
 
 Data requests have always been an indispensable and important part of applications. Since the birth of XMLHttpRequest, request schemes have emerged in endlessly. Client-side data interaction exploration has always focused on the simplicity of requests, such as `$.ajax`, `axios`, `fetch api` and Request tools such as `react-query`, the coding form continues to evolve from callback functions, Promise, to usehook. These js libraries have done a good job in making requests simple, but they only provide common functions, which means For different request scenarios such as sharing requests, paging requests, form submissions, uploading and downloading files, etc., developers still need to write complex codes themselves, which reduces development efficiency and performance cannot be guaranteed. As user experience becomes more and more important, In this era, application fluency has become more and more important.
@@ -28,3 +25,7 @@ Decoupling a js library means using it in more scenarios. For example, axios can
 ## Why does the request function use PascalCase specification?
 
 Different from the axios, taking the GET method as an example, `axios.get` is a request action, while `alova.Get` creates a method instance but actually does not send request.
+
+## Troubleshooting
+
+Refer to [Troubleshooting](/tutorial/project/troubleshooting)

docs/resource/01-request-adapter/05-uniapp.md

@@ -30,6 +30,24 @@ yarn add @alova/adapter-uniapp
 </TabItem>
 </Tabs>
 
+:::warning
+
+In uniapp+vite, `@rollup/plugin-node-resolve` needs to be configured, otherwise it may cause an error that the dependency cannot be found.
+
+[#535 discussion](https://github.com/orgs/alovajs/discussions/535)
+
+```js
+import { defineConfig } from 'vite';
+import uni from '@dcloudio/vite-plugin-uni';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+
+export default defineConfig({
+  plugins: [uni(), nodeResolve()]
+});
+```
+
+:::
+
 ## Usage
 
 ### create alova

docs/tutorial/02-getting-started/01-introduce.md

@@ -20,7 +20,7 @@ Alova (pronounced as `/əˈləʊva/` <AudioPlayer src={tts} />) is a workflow-st
 
 Different from `@tanstack/react-request`, `swrjs`, `ahooks's useRequest`, etc. library, `alova` is a comprehensive request tool, alova makes your request integration very simple and maintains more efficient Client-Server data interaction. In addition, you can use it in client and server environments (including SSR).
 
-Here is a detailed comparison [with other request libraries](/about/comparison).
+You can read the backstory on [why create alova](/about/faqs), and we've also provided a detailed [comparison to other request libraries](/about/comparison) to see how alova differs.
 
 In addition, alova also has the following features:
 

docs/tutorial/02-getting-started/03-basic/07-combine-framework.md

@@ -14,11 +14,11 @@ import useRequestSolid from '!!raw-loader!@site/codesandbox@3/01-getting-started
 
 Next, we will learn how to use it in conjunction with the client UI framework, which can allow alova to exert its true power. When used in the UI framework, not only can alova automatically manage the responsive request status, but also automatically control when the request should be sent through certain rules.
 
-`alova` provides 10+ client request strategies, which help you implement complex requests in a simple and elegant way. Let's continue to look down!
+`alova` provides 15+ client request strategies, which help you implement complex requests in a simple and elegant way. Let's continue to look down!
 
 ## Set statesHook
 
-Before using the request strategy, we need to set the corresponding statesHook on the alova instance. It must correspond to the UI framework used by the project. This is very important. It will tell alova that it should create responsive states for the corresponding UI framework. Currently, the following frameworks are supported:
+Alova's useHook request strategy can run in all UI frameworks supported by Alova. You only need to set the statesHook of the corresponding UI framework on the Alova instance, which will tell Alova which UI framework should be used to create states.
 
 <Tabs groupId="framework">
 
@@ -82,9 +82,29 @@ export const alovaInstance = createAlova({
 });
 ```
 
+</TabItem>
+<TabItem value="5" label="vue-demi">
+
+```js
+import { createAlova } from 'alova';
+import VueDemiHook from 'alova/vue-demi';
+
+// support [email protected]+ composition api
+export const alovaInstance = createAlova({
+  // ...
+  // highlight-start
+  statesHook: VueDemiHook
+  // highlight-end
+});
+```
+
 </TabItem>
 </Tabs>
 
+In addition, alova also provides the following statesHooks:
+
+- [statesHook for vue options style](/resource/framework/vue-options), which means you can use alova's usehooks in vue2's options style components.
+
 ## Automatically manage request status
 
 `useRequest` is our most commonly used request strategy. It can help us create and maintain responsive states of requests, such as `loading/data/error`, etc. You can use these responsive states directly in the view. When they change, the view will also change accordingly.

docs/tutorial/03-client/01-strategy/04-use-pagination.md

@@ -268,6 +268,91 @@ const App = () => {
 <span>A total of {total} pieces of data</span>
 ```
 
+</TabItem>
+<TabItem value="4" label="solid">
+
+```jsx
+import { queryStudents } from './api.js';
+import { usePagination } from 'alova/client';
+
+const App = () => {
+  const {
+    // loading state
+    loading,
+
+    // list data
+    data,
+
+    // is it the last page
+    // This parameter can be used to determine whether it needs to be loaded during pull-down loading
+    isLastPage,
+
+    // The current page number, changing this page number will automatically trigger the request
+    page,
+
+    // Number of data items per page
+    pageSize,
+
+    // number of paging pages
+    pageCount,
+
+    // total amount of data
+    total，
+
+    // update states
+    update
+  } = usePagination(
+    // Method instance acquisition function, it will receive page and pageSize, and return a Method instance
+    (page, pageSize) => queryStudents(page, pageSize),
+    {
+      // Initial data before the request (data format returned by the interface)
+      initialData: {
+        total: 0,
+        data: []
+      },
+      initialPage: 1, // initial page number, default is 1
+      initialPageSize: 10 // The initial number of data items per page, the default is 10
+    }
+  );
+
+  // Turn to the previous page, the request will be sent automatically after the page value changes
+  const handlePrevPage = () => {
+    update({
+      page: page() - 1
+    });
+  };
+
+  // Turn to the next page, the request will be sent automatically after the page value changes
+  const handleNextPage = () => {
+    update({
+      page: page() + 1
+    });
+  };
+
+  // Change the number of pages, the request will be sent automatically after the pageSize value is changed
+  const handleSetPageSize = () => {
+    update({
+      pageSize: 20
+    });
+  };
+
+  return (
+    <div>
+      {data().map(item => (
+        <div key={item.id}>
+          <span>{item.name}</span>
+        </div>
+      ))}
+      <button onClick={handlePrevPage}>Previous page</button>
+      <button onClick={handleNextPage}>Next Page</button>
+      <button onClick={handleSetPageSize}>Set the number per page</button>
+      <span>There are {pageCount()} pages</span>
+      <span>A total of {total()} pieces of data</span>
+    </div>
+  );
+};
+```
+
 </TabItem>
 </Tabs>
 
@@ -415,6 +500,7 @@ For example, filter by student name, student grade.
 ```jsx
 import { queryStudents } from './api.js';
 import { usePagination } from 'alova/client';
+import { useState } from 'react';
 
 const App = () => {
    // search condition status
@@ -480,6 +566,45 @@ const App = () => {
 ```
 
 </TabItem>
+<TabItem value="4" label="solid">
+
+```jsx
+import { queryStudents } from './api.js';
+import { usePagination } from 'alova/client';
+import { createSignal } from 'solid-js';
+
+const App = () => {
+   // search condition status
+   const [studentName, setStudentName] = createSignal('');
+   const [clsName, setClsName] = createSignal('');
+   const {
+     //...
+   } = usePagination(
+     (page, pageSize) => queryStudents(page, pageSize, studentName(), clsName()),
+     {
+       //...
+       // highlight-start
+       watchingStates: [studentName, clsName]
+       // highlight-end
+     }
+   );
+
+   return (
+     // highlight-start
+     <input value={studentName()} onChange={({ target }) => setStudentName(target.value)} />
+     <select value={clsName()} onChange={({ target }) => setClsName(target.value)}>
+       <option value="1">Class 1</option>
+       <option value="2">Class 2</option>
+       <option value="3">Class 3</option>
+     </select>
+     // highlight-end
+     //...
+   );
+};
+```
+
+</TabItem>
+
 </Tabs>
 
 Same as `useWatcher`, you can also implement request debounce by specifying `debounce`, for details, please refer to [useWatcher's debounce parameter setting](/api/core-hooks#usewatcher).

docs/tutorial/03-client/01-strategy/05-use-form.md

@@ -226,6 +226,78 @@ const App = () => {
 </button>
 ```
 
+</TabItem>
+<TabItem value="4" label="solid">
+
+```jsx
+import { formSubmit } from './api.js';
+import { useForm } from 'alova/client';
+
+const App = () => {
+  const {
+    // submit status
+    loading: submitting,
+
+    // Responsive form data, the content is determined by initialForm
+    form,
+
+    // submit data function
+    send: submit,
+
+    // update form item
+    updateForm,
+
+    // Submit successful callback binding
+    onSuccess,
+
+    // Submit failure callback binding
+    onError,
+
+    // Submit completed callback binding
+    onComplete
+  } = useForm(
+    formData => {
+      // Form data can be converted and submitted here
+      return formSubmit(formData);
+    },
+    {
+      // Initialize form data
+      initialForm: {
+        name: '',
+        cls: '1'
+      }
+    }
+  );
+
+  // submit form data
+  const handleSubmit = () => {
+    // Validate form data...
+    submit();
+  };
+
+  return (
+    <div>
+      <input
+        value={form().name}
+        onChange={({ target }) => updateForm({ name: target.value })}
+      />
+      <select
+        value={form().cls}
+        onChange={({ target }) => updateForm({ cls: target.value })}>
+        <option value="1">class 1</option>
+        <option value="2">class 2</option>
+        <option value="3">class 3</option>
+      </select>
+      <button
+        onClick={handleSubmit}
+        loading={submitting()}>
+        submit
+      </button>
+    </div>
+  );
+};
+```
+
 </TabItem>
 </Tabs>
 
@@ -293,8 +365,7 @@ const {
 });
 
 // Request form data and update it to the form
-const { onSuccess } = useRequest(getData);
-onSuccess(({ data }) => {
+useRequest(getData).onSuccess(({ data }) => {
    updateForm({
      name: data.name,
      cls: data.cls

docs/tutorial/03-client/01-strategy/09-seamless-data-interaction/03-start-silent-factory.md

@@ -7,27 +7,7 @@ import TabItem from '@theme/TabItem';
 
 The silent queue is not started by default, and we need to specify the startup parameters for initialization. In general, call `bootSilentFactory` in the entry file to initialize the silent factory, which will read unexecuted requests to the corresponding silent through the specified configuration items queues and start those queues.
 
-<Tabs groupId="framework">
-<TabItem value="1" label="vue">
-
-```javascript
-import { bootSilentFactory } from 'alova/client';
-import { alovaInst } from '@/api';
-
-bootSilentFactory({
-  // Specify the alova instance at startup to request information storage and request sending
-  alova: alovaInst,
-
-  // Delay start time, in milliseconds, the default is 2000ms, see the follow-up instructions for details
-  delay: 1000
-});
-```
-
-</TabItem>
-
-<TabItem value="2" label="react">
-
-```javascript
+```javascript title="main.js"
 import { bootSilentFactory } from 'alova/client';
 import { alovaInst } from '@/api';
 
@@ -40,26 +20,6 @@ bootSilentFactory({
 });
 ```
 
-</TabItem>
-
-<TabItem value="3" label="svelte">
-
-```javascript
-import { bootSilentFactory } from 'alova/client';
-import { alovaInst } from '@/api';
-
-bootSilentFactory({
-  // Specify the alova instance at startup to request information storage and request sending
-  alova: alovaInst,
-
-  // Delay start time, in milliseconds, the default is 2000ms, see the follow-up instructions for details
-  delay: 1000
-});
-```
-
-</TabItem>
-</Tabs>
-
 :::warning `delay` parameter description
 
 In actual scenarios, when entering the current page, a request is also sent to load the page data. In order to ensure that the user can see the page data faster, the request to load the data needs to be forwarded to the beginning of the queue, otherwise it may cause the loading data to fail. The request is placed at the end of the queue. At this time, it is necessary to wait until all the previous requests are completed before loading the page data. This is obviously inappropriate. Therefore, by delaying initialization for a period of time, the request for loading data enters the queue first to achieve "queue jumping" effect, the specific delay time depends on the time required for page rendering.