@modern-js/main-doc 0.0.0-next-1680114730914 → 0.0.0-next-1680148838670

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1680114730914
+## 0.0.0-next-1680148838670
 
 ### Patch Changes
 
@@ -12,7 +12,7 @@
   fix: 将部分英文文档中的中文翻译为英文
 - Updated dependencies [a8c08c3a2]
 - Updated dependencies [b71cef1d9]
-  - @modern-js/builder-doc@0.0.0-next-1680114730914
+  - @modern-js/builder-doc@0.0.0-next-1680148838670
 
 ## 2.10.0
 

package/docs/en/apis/app/hooks/src/server.mdx

@@ -4,31 +4,4 @@ sidebar_position: 8
 ---
 # *.[server|node].[tj]sx
 
-Used in application projects to place server side code, it generally has the following two functions:
-
-1. When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.
-
-2. When using [data loader](/guides/basic-features/data-fetch), the server-side dependencies need to be re-exported from this file
-
-```tsx
-// routes/user/avatar.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-import { readFile } from './utils.server';
-
-type ProfileData = {
-  /* some type declarations */
-};
-
-export const loader = async (): ProfileData => {
-  const profile = await readFile('profile.json');
-  return profile;
-};
-
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-
-// routes/user/utils.server.ts
-export * from 'fs-extra';
-```
+Used in application projects to place server side code, When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.

package/docs/en/guides/advanced-features/ssr.mdx

@@ -22,8 +22,8 @@ export default defineConfig({
 
 Modern.js provides Data Loader, which is convenient for developers to fetch data under SSR and CSR. Each routing module, such as `layout.tsx` and `page.tsx`, can define its own Data Loader:
 
-```ts title="src/routes/page.tsx"
-export const loader = () => {
+```ts title="src/routes/page.loader.ts"
+export default () => {
   return {
     message: 'Hello World',
   };
@@ -226,7 +226,7 @@ The Node API is introduced in the component file, usually because of the use of
 
 ```ts
 import fse from 'fs-extra';
-export const loader = () => {
+export default () => {
   const file = fse.readFileSync('./myfile');
   return {
     ...

package/docs/en/tutorials/first-app/c06-model.mdx

@@ -195,18 +195,10 @@ const Item = ({
 export default Item;
 ```
 
-Next, we modify `src/routes/page.tsx` to pass more parameters to the `<Item>` component:
+Next, we add `src/routes.page.loader` and modify `src/routes/page.tsx` to pass more parameters to the `<Item>` component:
 
-```tsx
-import { Helmet } from '@modern-js/runtime/head';
-import { useModel } from '@modern-js/runtime/model';
-import { useLoaderData } from '@modern-js/runtime/router';
-import { List } from 'antd';
-import { name, internet } from 'faker';
-import Item from '../components/Item';
-import contacts from '../models/contacts';
-
-type LoaderData = {
+```tsx title="src/routes/page.loader.ts"
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -215,7 +207,7 @@ type LoaderData = {
   }[];
 };
 
-export const loader = async (): Promise<LoaderData> => {
+export default async (): Promise<LoaderData> => {
   const data = new Array(20).fill(0).map(() => {
     const firstName = name.firstName();
     return {
@@ -231,6 +223,17 @@ export const loader = async (): Promise<LoaderData> => {
     data,
   };
 };
+```
+
+```tsx title="src/routes/page.tsx"
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { useLoaderData } from '@modern-js/runtime/router';
+import { List } from 'antd';
+import { name, internet } from 'faker';
+import Item from '../components/Item';
+import contacts from '../models/contacts';
+import type { LoaderData } from './page.loader';
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;

package/docs/en/tutorials/first-app/c07-container.mdx

@@ -15,24 +15,8 @@ Because the two pages need to share the same set of state (point of contact tabu
 
 Modern.js support obtaining data through Data Loader in `layout.tsx`, we first move the data acquisition part of the code to `src/routes/layout.tsx`:
 
-```tsx
-import { name, internet } from 'faker';
-import {
-  Outlet,
-  useLoaderData,
-  useLocation,
-  useNavigate,
-} from '@modern-js/runtime/router';
-import { useState } from 'react';
-import { Radio, RadioChangeEvent } from 'antd';
-import { useModel } from '@modern-js/runtime/model';
-import contacts from '../models/contacts';
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
-import '../styles/utils.css';
-
-type LoaderData = {
+```ts title="src/routes/layout.loader.ts"
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -41,7 +25,7 @@ type LoaderData = {
   }[];
 };
 
-export const loader = async (): Promise<LoaderData> => {
+export default async (): Promise<LoaderData> => {
   const data = new Array(20).fill(0).map(() => {
     const firstName = name.firstName();
     return {
@@ -56,6 +40,25 @@ export const loader = async (): Promise<LoaderData> => {
     data,
   };
 };
+```
+
+```tsx title="src/routes/layout.tsx"
+import { name, internet } from 'faker';
+import {
+  Outlet,
+  useLoaderData,
+  useLocation,
+  useNavigate,
+} from '@modern-js/runtime/router';
+import { useState } from 'react';
+import { Radio, RadioChangeEvent } from 'antd';
+import { useModel } from '@modern-js/runtime/model';
+import contacts from '../models/contacts';
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+import '../styles/utils.css';
+import type { LoaderData } from './layout.loader';
 
 export default function Layout() {
   const { data } = useLoaderData() as LoaderData;

package/docs/zh/apis/app/hooks/src/server.mdx

@@ -4,31 +4,4 @@ sidebar_position: 8
 ---
 # *.[server|node].[tj]sx
 
-应用项目中使用，用于放置服务端代码，一般有以下两个作用：
-
-1. 当 `*.tsx` 和 `*.[server|node].tsx` 共存时，SSR 在服务端执行渲染时，会优先使用 `*.[server|node].tsx` 文件，而不是 `*.tsx` 文件。
-
-2. 在使用 [data loader](/guides/basic-features/data-fetch) 时，需要将服务端的依赖从该文件中做重导出
-
-```tsx
-// routes/user/avatar.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-import { readFile } from './utils.server';
-
-type ProfileData = {
-  /* some type declarations */
-};
-
-export const loader = async (): ProfileData => {
-  const profile = await readFile('profile.json');
-  return profile;
-};
-
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-
-// routes/user/utils.server.ts
-export * from 'fs-extra';
-```
+应用项目中使用，用于放置服务端代码，当 `*.tsx` 和 `*.[server|node].tsx` 共存时，SSR 在服务端执行渲染时，会优先使用 `*.[server|node].tsx` 文件，而不是 `*.tsx` 文件。

package/docs/zh/guides/advanced-features/ssr.mdx

@@ -148,10 +148,10 @@ SPR 利用预渲染与缓存技术，为 SSR 页面提供静态 Web 的响应性
 
 这里模拟一个使用 `useLoaderData` API 的组件，Data Loader 中的请求需要消耗 2s 时间。
 
-```jsx
+```tsx title="page.loader.ts"
 import { useLoaderData } from '@modern-js/runtime/router';
 
-export const loader = async () => {
+export default async () => {
   await new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(null);
@@ -162,7 +162,9 @@ export const loader = async () => {
     message: 'Hello Modern.js',
   };
 };
+```
 
+```tsx title="page.tsx"
 export default () => {
   const data = useLoaderData();
   return <div>{data?.message}</div>;

package/docs/zh/tutorials/first-app/c06-model.mdx

@@ -195,18 +195,10 @@ const Item = ({
 export default Item;
 ```
 
-接下来，我们修改 `src/routes/page.tsx`，为 `<Item>` 组件传递更多参数：
+接下来，我们修改 `src/routes/page.tsx` 和 `src/routes/page.loader.ts`，为 `<Item>` 组件传递更多参数：
 
-```tsx
-import { Helmet } from '@modern-js/runtime/head';
-import { useModel } from '@modern-js/runtime/model';
-import { useLoaderData } from '@modern-js/runtime/router';
-import { List } from 'antd';
-import { name, internet } from 'faker';
-import Item from '../components/Item';
-import contacts from '../models/contacts';
-
-type LoaderData = {
+```ts title="src/routes/page.loader.ts"
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -215,7 +207,7 @@ type LoaderData = {
   }[];
 };
 
-export const loader = async (): Promise<LoaderData> => {
+export default async (): Promise<LoaderData> => {
   const data = new Array(20).fill(0).map(() => {
     const firstName = name.firstName();
     return {
@@ -231,6 +223,16 @@ export const loader = async (): Promise<LoaderData> => {
     data,
   };
 };
+```
+
+```tsx title="src/routes/page.tsx"
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { useLoaderData } from '@modern-js/runtime/router';
+import { List } from 'antd';
+import { name, internet } from 'faker';
+import Item from '../components/Item';
+import contacts from '../models/contacts';
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;

package/docs/zh/tutorials/first-app/c07-container.mdx

@@ -15,24 +15,8 @@ import { Tabs, Tab as TabItem } from "@theme";
 
 Modern.js 支持在 `layout.tsx` 通过 Data Loader 获取数据，我们先数据获取这部分代码移动到 `src/routes/layout.tsx` 中：
 
-```tsx
-import { name, internet } from 'faker';
-import {
-  Outlet,
-  useLoaderData,
-  useLocation,
-  useNavigate,
-} from '@modern-js/runtime/router';
-import { useState } from 'react';
-import { Radio, RadioChangeEvent } from 'antd';
-import { useModel } from '@modern-js/runtime/model';
-import contacts from '../models/contacts';
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
-import '../styles/utils.css';
-
-type LoaderData = {
+```ts title="src/routes/layout.loader.ts"
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -41,7 +25,7 @@ type LoaderData = {
   }[];
 };
 
-export const loader = async (): Promise<LoaderData> => {
+export default async (): Promise<LoaderData> => {
   const data = new Array(20).fill(0).map(() => {
     const firstName = name.firstName();
     return {
@@ -56,6 +40,25 @@ export const loader = async (): Promise<LoaderData> => {
     data,
   };
 };
+```
+
+```tsx title="src/routes/layout.tsx"
+import { name, internet } from 'faker';
+import {
+  Outlet,
+  useLoaderData,
+  useLocation,
+  useNavigate,
+} from '@modern-js/runtime/router';
+import { useState } from 'react';
+import { Radio, RadioChangeEvent } from 'antd';
+import { useModel } from '@modern-js/runtime/model';
+import contacts from '../models/contacts';
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+import '../styles/utils.css';
+import type { LoaderData } from './layout.loader';
 
 export default function Layout() {
   const { data } = useLoaderData() as LoaderData;

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1680114730914",
+  "version": "0.0.0-next-1680148838670",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1680114730914"
+    "@modern-js/builder-doc": "0.0.0-next-1680148838670"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -29,9 +29,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1680114730914",
-    "@modern-js/doc-tools": "0.0.0-next-1680114730914",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1680114730914"
+    "@modern-js/builder-doc": "0.0.0-next-1680148838670",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1680148838670",
+    "@modern-js/doc-tools": "0.0.0-next-1680148838670"
   },
   "scripts": {
     "dev": "modern dev",