docs: fix the displaying of demos

alovajs · Jul 22, 2024 · 32e82c0 · 32e82c0
1 parent 89f820c
commit 32e82c0
Show file tree

Hide file tree

Showing 19 changed files with 242 additions and 89 deletions.
diff --git a/codesandbox@3/02-client/02-use-watcher/react-search.en.jsx b/codesandbox@3/02-client/02-use-watcher/react-search.en.jsx
@@ -1,4 +1,4 @@
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { useState } from 'react';
 import { alovaInstance } from './api';
 

diff --git a/codesandbox@3/02-client/02-use-watcher/react-search.zh.jsx b/codesandbox@3/02-client/02-use-watcher/react-search.zh.jsx
@@ -1,4 +1,4 @@
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { useState } from 'react';
 import { alovaInstance } from './api';
 

diff --git a/codesandbox@3/02-client/02-use-watcher/svelte-search.en.svelte b/codesandbox@3/02-client/02-use-watcher/svelte-search.en.svelte
@@ -1,33 +1,34 @@
-<script>
-import { writable } from 'svelte/store';
-
-//Create method instance
-const filterTodoList = userId => {
-  return alovaInstance.Get(`/users/${userId}/todos`);
-};
-const userId = writable(0);
-const { loading, data, error } = useWatcher(
-  // Parameters must be set to functions that return method instances
-  () => filterTodoList($userId),
-
-  // The monitored status array, these status changes will trigger a request
-  [userId]
-);
-</script>
-
-<select bind:value="{$userId}">
-  <option value="{1}">User 1</option>
-  <option value="{2}">User 2</option>
-  <option value="{3}">User 3</option>
-</select>
-
-<!-- Render the filtered todo list -->
-{#if $loading}
-<div>Loading...</div>
-{:else}
-<ul>
-  {#each $data as todo}
-    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
-  {/each}
-</ul>
-{/if}
+<script>
+import { writable } from 'svelte/store';
+import { useWatcher } from 'alova/client';
+
+//Create method instance
+const filterTodoList = userId => {
+  return alovaInstance.Get(`/users/${userId}/todos`);
+};
+const userId = writable(0);
+const { loading, data, error } = useWatcher(
+  // Parameters must be set to functions that return method instances
+  () => filterTodoList($userId),
+
+  // The monitored status array, these status changes will trigger a request
+  [userId]
+);
+</script>
+
+<select bind:value="{$userId}">
+  <option value="{1}">User 1</option>
+  <option value="{2}">User 2</option>
+  <option value="{3}">User 3</option>
+</select>
+
+<!-- Render the filtered todo list -->
+{#if $loading}
+<div>Loading...</div>
+{:else}
+<ul>
+  {#each $data as todo}
+    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
+  {/each}
+</ul>
+{/if}
diff --git a/codesandbox@3/02-client/02-use-watcher/svelte-search.zh.svelte b/codesandbox@3/02-client/02-use-watcher/svelte-search.zh.svelte
@@ -1,33 +1,34 @@
-<script>
-import { writable } from 'svelte/store';
-
-// 创建method实例
-const filterTodoList = userId => {
-  return alovaInstance.Get(`/users/${userId}/todos`);
-};
-const userId = writable(0);
-const { loading, data, error } = useWatcher(
-  // 参数必须设置为返回method实例的函数
-  () => filterTodoList($userId),
-
-  // 被监听的状态数组，这些状态变化将会触发一次请求
-  [userId]
-);
-</script>
-
-<select bind:value="{$userId}">
-  <option value="{1}">User 1</option>
-  <option value="{2}">User 2</option>
-  <option value="{3}">User 3</option>
-</select>
-
-<!-- 渲染筛选后的todo列表 -->
-{#if $loading}
-<div>Loading...</div>
-{:else}
-<ul>
-  {#each $data as todo}
-    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
-  {/each}
-</ul>
-{/if}
+<script>
+import { writable } from 'svelte/store';
+import { useWatcher } from 'alova/client';
+
+// 创建method实例
+const filterTodoList = userId => {
+  return alovaInstance.Get(`/users/${userId}/todos`);
+};
+const userId = writable(0);
+const { loading, data, error } = useWatcher(
+  // 参数必须设置为返回method实例的函数
+  () => filterTodoList($userId),
+
+  // 被监听的状态数组，这些状态变化将会触发一次请求
+  [userId]
+);
+</script>
+
+<select bind:value="{$userId}">
+  <option value="{1}">User 1</option>
+  <option value="{2}">User 2</option>
+  <option value="{3}">User 3</option>
+</select>
+
+<!-- 渲染筛选后的todo列表 -->
+{#if $loading}
+<div>Loading...</div>
+{:else}
+<ul>
+  {#each $data as todo}
+    <li class="todo-title">{{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}</li>
+  {/each}
+</ul>
+{/if}
diff --git a/codesandbox@3/02-client/02-use-watcher/vueComposition-search.en.vue b/codesandbox@3/02-client/02-use-watcher/vueComposition-search.en.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { ref } from 'vue';
 import { alovaInstance } from './api';
 

diff --git a/codesandbox@3/02-client/02-use-watcher/vueComposition-search.zh.vue b/codesandbox@3/02-client/02-use-watcher/vueComposition-search.zh.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { ref } from 'vue';
 import { alovaInstance } from './api';
 

diff --git a/codesandbox@3/02-client/02-use-watcher/vueOptions-search.en.vue b/codesandbox@3/02-client/02-use-watcher/vueOptions-search.en.vue
@@ -18,7 +18,7 @@
 
 <script>
 import { mapAlovaHook } from '@alova/vue-options';
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { alovaInstance } from './api';
 
 // Create method instance

diff --git a/codesandbox@3/02-client/02-use-watcher/vueOptions-search.zh.vue b/codesandbox@3/02-client/02-use-watcher/vueOptions-search.zh.vue
@@ -18,7 +18,7 @@
 
 <script>
 import { mapAlovaHook } from '@alova/vue-options';
-import { useWatcher } from 'alova';
+import { useWatcher } from 'alova/client';
 import { alovaInstance } from './api';
 
 // 创建method实例

diff --git a/i18n/zh-CN/code.json b/i18n/zh-CN/code.json
@@ -272,11 +272,11 @@
   },
 
   "homepage.title": {
-    "message": "轻量级请求策略库",
+    "message": "创新的下一代请求工具",
     "description": "The title of web page"
   },
   "homepage.tagline": {
-    "message": "一行代码完成各种复杂场景的网络请求，别再花时间在请求这件小事上了，交给我们",
+    "message": "极致地提升你的API接入效率，节约大脑，仅需一步",
     "description": "网站tagline"
   },
   "homepage.relationTitle": {

diff --git a/...us-plugin-content-docs/version-v2/tutorial/02-getting-started/02-quick-start.md b/...us-plugin-content-docs/version-v2/tutorial/02-getting-started/02-quick-start.md
@@ -4,7 +4,7 @@ title: 快速开始
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 
 import quickStartGET from '!!raw-loader!@site/codesandbox/01-getting-started/02-first-request/get.js';
 import quickStartPOST from '!!raw-loader!@site/codesandbox/01-getting-started/02-first-request/post.js';

diff --git a/...-plugin-content-docs/version-v2/tutorial/03-combine-framework/02-use-request.md b/...-plugin-content-docs/version-v2/tutorial/03-combine-framework/02-use-request.md
@@ -5,7 +5,7 @@ title: 自动管理请求状态
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 
 import useRequestVue from '!!raw-loader!@site/codesandbox/01-getting-started/03-combine-framework/vueComposition-useRequest.zh.vue';
 import useRequestReact from '!!raw-loader!@site/codesandbox/01-getting-started/03-combine-framework/react-useRequest.zh.jsx';

diff --git a/...-plugin-content-docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md b/...-plugin-content-docs/version-v2/tutorial/03-combine-framework/03-use-watcher.md
@@ -4,7 +4,7 @@ title: 监听请求
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import EmbedSandpack from "@site/src/components/EmbedSandpack";
+import EmbedSandpack from "@site/src/components/EmbedSandpackV2";
 import CodeBlock from '@theme/CodeBlock';
 import useWatcherSearchVue from '!!raw-loader!@site/codesandbox/03-learning/04-use-watcher/vueComposition-search.zh.vue';
 import useWatcherSearchReact from '!!raw-loader!@site/codesandbox/03-learning/04-use-watcher/react-search.zh.jsx';

diff --git a/src/components/EmbedSandpack.tsx b/src/components/EmbedSandpack.tsx
@@ -1,7 +1,7 @@
-import alovaReact from '!!raw-loader!@site/codesandbox/00-create-alova/react';
-import alovaSvelte from '!!raw-loader!@site/codesandbox/00-create-alova/svelte';
-import alovaVueComposition from '!!raw-loader!@site/codesandbox/00-create-alova/vueComposition';
-import alovaVueOptions from '!!raw-loader!@site/codesandbox/00-create-alova/vueOptions';
+import alovaReact from '!!raw-loader!@site/codesandbox@3/00-create-alova/react';
+import alovaSvelte from '!!raw-loader!@site/codesandbox@3/00-create-alova/svelte';
+import alovaVueComposition from '!!raw-loader!@site/codesandbox@3/00-create-alova/vueComposition';
+import alovaVueOptions from '!!raw-loader!@site/codesandbox@3/00-create-alova/vueOptions';
 import { Sandpack } from '@codesandbox/sandpack-react';
 import { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react/unstyled';
 import { amethyst, monokaiPro } from '@codesandbox/sandpack-themes';
@@ -125,7 +125,7 @@ const EmbedSandpack = ({
   }
 
   const dependencies = {
-    alova: 'beta',
+    alova: 'latest',
     ...(targetEntry.deps || {})
   };
   const { colorMode } = useColorMode();