@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/zh/tutorials/first-app/c11-container/11.3-use-loader.md

@@ -1,61 +0,0 @@
----
-title: ​使用 Loader
----
-
-到目前为止，我们都是用 `useEffect` 来请求 BFF，加载联系人列表数据。
-
-在启用 SSR 的情况下，`useEffect` 在服务器端是不会执行的，所以 SSR 过程中不会加载数据，这种 SSR 只能渲染很有限的 UI，是低价值的。
-
-可以在当前项目中开启 [SSR](/docs/configure/app/server/ssr)，看下这种效果。
-
-```json
-"server": {
-  "ssr": true,
-}
-```
-
-执行 `pnpm run dev`，在 devtools 的 network 面板里查看 HTML 请求的 Preview 面板，可以看到 SSR 的渲染结果只有导航栏和 Pending... 字符，并没有联系人数据：
-
-![display5](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display5.png)
-
-前面提到过，应用工程里的 SSR 实现是 Serverless SSR，不仅在部署、运维环节，在开发环节对 Server 也是无感的，项目里不需要专门写服务器的实现。
-
-上述加载初始数据的业务逻辑，也不应该像传统模式一样，在客户端代码和服务器端代码中分别实现。
-
-Modern.js 提供一个叫 `useLoader` 的 hooks API，在这种场景下替代 `useEffect`，能自动在 SSR 环节做**预加载**，先获取足够的数据，再运行 app 代码渲染 HTML。
-
-同时，在 CSR 环节中，自动检查当前 loader 需要的数据，如果在 SSR 环节中已经预加载，在客户端就不再重复执行 loader，直接用现成数据；反之就在客户端执行 loader（相当于一种 fallback）。
-
-`useLoader` 的使用很简单，把当前项目中 `Contacts` 组件中的 `useEffect` 代码替换成：
-
-```js
-useLoader(
-  async () => {
-    if (!items.length && !error && !pending) {
-      return actions.load();
-    }
-    return Promise.resolve();
-  },
-  {
-    params: 'contacts',
-  },
-);
-```
-
-`useLoader` API 要求返回一个 promise，用于判断这个 loader 是否完成。第二个参数是当前 Loader 的唯一标识。
-
-同时，在文件顶部的导入 `useLoader`：
-
-```js
-import { useLoader } from '@modern-js/runtime';
-```
-
-重新执行 `pnpm run dev`，查看 `view-source:http://localhost:8080/contacts/`，或在 devtools 的 Network 面板里查看 HTML 请求的「 Preview 」，可以看到 SSR 渲染出来的 HTML 已经包含完整的 UI：
-
-![display6](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display6.png)
-
-查看 `http://localhost:8080/contacts/`，可以看到首屏是没有 pending 过程的。
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c11/hello-modern-3)。

package/zh/tutorials/first-app/c11-container/11.4-testing.md

@@ -1,56 +0,0 @@
----
-title: ​测试容器组件
----
-
-跟[测试组件​​​](../c06-css-and-component/6.6-testing.md)中一样，不需要做任何配置，可以直接给Model 写测试用例。
-
-以 `containers/Contacts.tsx` 为例，我们创建对应的 `.test` 文件：
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-touch src/contacts/containers/contacts.test.tsx
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```powershell
-ni src/contacts/containers/contacts.test.tsx
-```
-
-</TabItem>
-</Tabs>
-
-在测试用例中可以使用 Modern.js 提供的 API 进行渲染，并通过 API 返回的工具函数进行断言。
-
-测试用例文件的示例：
-
-```ts
-import { renderApp, waitFor } from '@modern-js/runtime/testing';
-import ContactContainer from './Contacts';
-
-describe('test contracts model', () => {
-  it('actions works well', async () => {
-    const { getByText } = renderApp(<ContactContainer source="items" />);
-
-    await waitFor(() => {
-      expect(getByText('Pending...')).toBeInTheDocument();
-    });
-  });
-});
-```
-
-:::info 注
-更多相关内容可以查看 [Test API](/docs/apis/app/runtime/testing/renderApp)。
-:::
-
-执行 `pnpm run test`，可以看到测试报告。
-
----
-
-> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c11/hello-modern-4)。

package/zh/tutorials/first-app/c11-container/_category_.json

@@ -1,3 +0,0 @@
-{
-  "label": "11: 添加容器组件"
-}