@modern-js/main-doc 3.0.0-alpha.0 → 3.0.0-alpha.1

package/docs/en/guides/basic-features/debug/proxy.mdx

@@ -4,27 +4,24 @@ sidebar_position: 6
 
 # Network Proxy
 
-Modern.js provides a way to configure the development proxy in [`tools.devServer`](/configure/app/tools/dev-server). For example, to proxy the local interface to an online address:
+Modern.js provides a way to configure the development proxy in [`dev.server.proxy`](/configure/app/dev/server). For example, to proxy the local interface to an online address:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  tools: {
-    devServer: {
+  dev: {
+    server: {
       proxy: {
-        '/go/api': {
-          target: 'http://www.example.com/',
-          changeOrigin: true,
-        },
+        '/go/api': 'http://www.example.com/',
       },
     },
   },
 });
 ```
 
-When access `http://localhost:8080/go/api`, the response content will be returned from [http://www.example.com/](http://www.example.com/).
+When accessing `http://localhost:8080/go/api`, the response content will be returned from [http://www.example.com/](http://www.example.com/).
 
 :::info
-For more detail, see [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
+For configuration format, please refer to: [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware).
 :::

package/docs/en/guides/basic-features/render/rsc.mdx

@@ -30,6 +30,7 @@ npm install react-server-dom-webpack
 ```
 
 :::warning Notes
+
 1. Currently, [Server Functions](https://react.dev/reference/rsc/server-functions) are not supported in SPA projects
 2. Currently, when building with Rspack, the output chunks and bundle size are not yet optimal. We will further optimize this in the near future
 
@@ -90,7 +91,7 @@ The `"use client"` directive creates a boundary: all code within the boundary wi
 :::
 
 ```tsx title="components/InteractiveCard.tsx"
-"use client"; // <--- This is where the Client Boundary starts
+'use client'; // <--- This is where the Client Boundary starts
 
 import { useState } from 'react';
 import Button from './Button'; // Button.tsx doesn't have "use client", but will be included in the client bundle
@@ -142,7 +143,7 @@ export default async function Page() {
 ```
 
 ```tsx title="routes/CounterButton.tsx"
-"use client"; // Client Component
+'use client'; // Client Component
 
 import { useState } from 'react';
 
@@ -163,7 +164,7 @@ However, there are two patterns to work around this limitation:
 You can pass Server Components as the `children` Prop to a Client Component. For example, an animated Tabs component where the tab switching logic is client-side, but the content of each tab might be static and fetched from the server.
 
 ```tsx title="app/components/Tabs.tsx"
-"use client"; // Client Component
+'use client'; // Client Component
 
 import React, { useState } from 'react';
 
@@ -198,7 +199,7 @@ import Analytics from '../components/Analytics'; // Server Component
 import UserSettings from '../components/UserSettings'; // Server Component
 
 export default function DashboardPage() {
-  const labels = ["Analytics", "Settings"];
+  const labels = ['Analytics', 'Settings'];
 
   return (
     <main>
@@ -225,9 +226,9 @@ Through this pattern, you can keep components on the server to the maximum exten
 Each level of route components (such as `layout.tsx`, `page.tsx`) can independently choose to be a Client Component or Server Component:
 
 ```ts
-- routes
-    - layout.tsx  // Can be a Client Component
-    - page.tsx    // Can be a Server Component
+-routes -
+  layout.tsx - // Can be a Client Component
+  page.tsx; // Can be a Server Component
 ```
 
 For example, if `layout.tsx` is a Client Component (requiring client-side interactivity), you can still set `page.tsx` as a Server Component (for data fetching and rendering). This approach provides great flexibility and allows non-RSC projects to gradually migrate to RSC projects.
@@ -250,33 +251,33 @@ function NonCriticalUI({ p }: { p: Promise<string> }) {
 
 <React.Suspense fallback={<div>Loading...</div>}>
   <NonCriticalUI p={nonCriticalData} />
-</React.Suspense>
+</React.Suspense>;
 ```
 
 ## Best Practices
 
 ### Data Fetching
 
-1. Whether it's an SSR or RSC project, it's recommended to use the `cache` function provided by edenx for data fetching logic executed on the server by default. This ensures that for each server-side render, no matter how many times the function is called, it will only execute once.
+1. Whether it's an SSR or RSC project, it's recommended to use the `cache` function provided by EdenX for data fetching logic executed on the server by default. This ensures that for each server-side render, no matter how many times the function is called, it will only execute once.
 
-> This is also the recommended usage by React.js, which provides the [cache](https://react.dev/reference/react/cache) function. EdenX's [cache](https://edenx.bytedance.net/guides/basic-features/data/data-cache.html) can be considered a superset of it.
+> This is also the recommended usage by React.js, which provides the [cache](https://react.dev/reference/react/cache) function. EdenX's [cache](/guides/basic-features/data/data-cache.html) can be considered a superset of it.
 
 ```typescript
-import { cache } from '@edenx/runtime/cache'
+import { cache } from '@modern-js/runtime/cache';
 
 const getCriticalCached = cache(getCritical);
 ```
 
-* Based on using the `cache` function, you no longer need to manage server-side state through `props`, `context`, etc. We recommend fetching data in the nearest Server Component where it's needed. With the `cache` function, even if the same function is called multiple times, this makes project state management, business logic, and performance optimization simpler.
+- Based on using the `cache` function, you no longer need to manage server-side state through `props`, `context`, etc. We recommend fetching data in the nearest Server Component where it's needed. With the `cache` function, even if the same function is called multiple times, this makes project state management, business logic, and performance optimization simpler.
 
 ```typescript
 // layout.tsx
-export default async function Layout(){
-    const criticalData = await getCriticalCached();
+export default async function Layout() {
+  const criticalData = await getCriticalCached();
 }
 
-export default async function Page(){
-    const criticalData = await getCriticalCached();
+export default async function Page() {
+  const criticalData = await getCriticalCached();
 }
 ```
 
@@ -295,7 +296,9 @@ export default async function PostsList() {
 
   return (
     <ul>
-      {posts.map(post => <li key={post.id}>{post.title}</li>)}
+      {posts.map(post => (
+        <li key={post.id}>{post.title}</li>
+      ))}
     </ul>
   );
 }
@@ -332,13 +335,15 @@ There's another scenario where data is consumed in Client Components. In this ca
 
 ```javascript
 // profile/components/PostsList.tsx
-'use client'
+'use client';
 export default function PostsList({ postsPromise }) {
   const posts = use(postsPromise);
 
   return (
     <ul>
-      {posts.map(post => <li key={post.id}>{post.title}</li>)}
+      {posts.map(post => (
+        <li key={post.id}>{post.title}</li>
+      ))}
     </ul>
   );
 }

package/docs/en/guides/basic-features/render/ssg.mdx

@@ -7,7 +7,7 @@ SSG (Static Site Generation) is a technical solution that generates complete sta
 
 ## Enabling SSG
 
-import EnableSSG from "@site-docs-en/components/enable-ssg";
+import EnableSSG from '@site-docs-en/components/enable-ssg';
 
 <EnableSSG />
 
@@ -70,7 +70,6 @@ Each route in **conventional routing** will generate a separate HTML file. Check
 
 After running `pnpm run serve` to start the project, inspect the returned document in the Network tab of the browser's development tools. The document includes the fully rendered content from the component.
 
-
 ## Using SSG in Manual Routing
 
 **Manual routing** defines routes through component code, requiring the application to run to obtain accurate route information. Therefore, you cannot use the SSG feature out of the box. Developers need to configure which routes require SSG.
@@ -109,11 +108,7 @@ In manual routing or conventional routing with dynamic segments (e.g., `/user/[i
 export default defineConfig({
   output: {
     ssg: {
-      routes: [
-        '/',
-        '/about',
-        '/user/modernjs',
-      ],
+      routes: ['/', '/about', '/user/modernjs'],
     },
   },
 });
@@ -149,14 +144,14 @@ export default defineConfig({
   output: {
     ssg: {
       headers: {
-        "x-tt-env": "ppe_modernjs"
+        'x-tt-env': 'ppe_modernjs',
       },
       routes: [
         '/',
         {
           url: '/about',
           headers: {
-            "from": "modern-website"
+            from: 'modern-website',
           },
         },
       ],

package/docs/en/guides/basic-features/render/ssr-cache.mdx

@@ -4,10 +4,6 @@ When developing applications, sometimes we cache computation results using hooks
 
 Modern.js supports caching server-side rendering (SSR) results, reducing the computational and rendering time during subsequent requests. This accelerates page load time and improves user experience. Additionally, caching lowers server load, conserves computational resources, and speeds up user access.
 
-:::tip
-Requires version x.43.0+
-:::
-
 ## Configuration
 
 Create a `server/cache.[t|j]s` file in your application and export the `cacheOption` configuration to enable SSR rendering cache:

package/docs/en/guides/basic-features/static-assets/svg-assets.mdx

@@ -32,10 +32,6 @@ import Logo from './logo.svg?react';
 export default () => <Logo />;
 ```
 
-:::tip
-Modern.js >= MAJOR_VERSION.48.3 version supports the above usage.
-:::
-
 Modern.js also supports the following usage, transforming SVG into a React component by named import `ReactComponent`:
 
 ```tsx title="src/component/Logo.tsx"

package/docs/en/guides/get-started/tech-stack.mdx

@@ -34,7 +34,7 @@ Modern.js uses [Rspack](https://rspack.rs/) to bundle your web applications.
 
 Modern.js uses [SWC](https://swc.rs/) as JavaScript transpiler to transform TypeScript or JSX into JavaScript code that can run in browsers and perform syntax downgrades.
 
-When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through `tools.babel`, which will generate additional compilation overhead and slow down Rspack build speed to some extent.
+When using Rspack for building, `babel-loader` is not enabled by default. If you need to add [Babel](https://babeljs.io/) plugins, you can configure them through [`babel plugin`](https://rsbuild.rs/plugins/list/plugin-babel#babel-plugin), which will generate additional compilation overhead and slow down Rspack build speed to some extent.
 
 ## Minimizer
 

package/docs/en/guides/upgrade/_meta.json

@@ -0,0 +1 @@
+["overview", "config", "entry", "web-server", "tailwindcss", "other"]