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

package/src/i18n/zhCN.ts

@@ -11,7 +11,7 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
 
   // Features
   feature1: 'Rust 构建',
-  featureDesc1: '轻松切换到 Rspack 构建工具，编译飞快。',
+  featureDesc1: '基于 Rspack 构建工具，编译飞快。',
   feature2: '一体化开发',
   featureDesc2: '在同一项目中完成 BFF 开发，享受简洁的函数调用。',
   feature3: '嵌套路由',
@@ -34,10 +34,8 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   command: '命令',
   runtime: '运行时',
   conventions: '目录约定',
-  microFrontend: '微前端',
-  stateManagement: '状态管理',
+  moduleFederation: '模块联邦',
   pluginSystem: '插件系统',
-  projectGenerator: '项目生成器',
   githubDiscussion: 'Github 讨论区',
   changelog: '更新日志',
 

package/src/index.ts

@@ -1,5 +1,6 @@
+import './custom.scss';
 import HomeLayout from './pages';
 
 export { HomeLayout };
 
-export * from 'rspress/theme';
+export * from '@rspress/core/theme';

package/src/pages/index.module.scss

@@ -7,44 +7,64 @@
 .header {
   display: flex;
   justify-content: center;
-  background-color: #000;
-  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/homepage-bg-0209.png);
   background-size: cover;
   background-position: center bottom;
   background-origin: border-box;
-  height: 100vh;
-  min-height: 700px;
-  max-height: 900px;
 }
 
 .heroBanner {
   display: flex;
   width: 80vw;
   max-width: 1200px;
-  margin-top: 56px;
   flex-direction: column;
   justify-content: flex-start;
   position: relative;
-  overflow: hidden;
   box-sizing: border-box;
-  align-items: flex-start;
-  padding-top: 20vh;
+  align-items: center;
+  text-align: center;
+  padding-top: 12vh;
+  padding-bottom: 16vh;
 }
 
 .title {
   font-style: normal;
   font-weight: bold;
-  font-size: 3.4rem;
+  font-size: 3.75rem;
   line-height: 1.6;
-  color: hsl(198deg 100% 90%);
 }
 
-.titleGradient {
-  background: -webkit-linear-gradient(
-    305deg,
-    hsl(166deg 77% 53%) 10%,
-    hsl(198deg, 100%, 60%)
+.mainTitle {
+  font-size: 125%;
+}
+
+.mask {
+  position: absolute;
+  background-image: conic-gradient(
+    from 180deg at 50%50%,
+    var(--edenx-primary-color) 0deg,
+    180deg,
+    hsl(198deg, 100%, 50%) 0deg
   );
+  max-width: 500px;
+  width: 100%;
+  height: 450px;
+  border-radius: 100%;
+  mixblendmode: normal;
+  filter: blur(80px);
+  opacity: 0.1;
+  top: 100px;
+  left: 50%;
+  z-index: 0;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+:global(.dark) .mask {
+  opacity: 0.15;
+}
+
+.titleGradient {
+  background: var(--edenx-home-hero-name-background);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -53,21 +73,29 @@
 .buttons {
   display: flex;
   justify-content: center;
-  margin-top: 8vh;
+  margin-top: 2.4rem;
+}
+
+.slogan {
+  font-size: 40%;
+  font-weight: normal;
+  opacity: 0.7;
+  margin-top: 1.2rem;
 }
 
 .leftButton,
 .rightButton {
-  width: 168px;
+  width: 142px;
+  font-weight: bold;
 
   &:hover {
+    opacity: 0.7;
     text-decoration: none;
   }
-}
 
-.startArrow {
-  margin-left: 8px;
-  margin-top: 1px;
+  &:active {
+    opacity: 0.4;
+  }
 }
 
 .leftButton {
@@ -76,17 +104,16 @@
   align-items: center;
   line-height: 48px;
   height: 48px;
-  background: linear-gradient(274.85deg, #4ecaff 3%, #64cfde 97.17%);
+  background: var(--edenx-home-hero-name-background);
   box-shadow: 0px 1px 8px rgba(133, 250, 202, 0.34);
   border-radius: 39px;
-  color: #000000;
+  color: #fff;
   cursor: pointer;
   opacity: 0.9;
   transition: opacity 0.3s ease;
 
   &:hover {
-    opacity: 1;
-    color: #000;
+    color: #fff;
   }
 }
 
@@ -95,19 +122,13 @@
   height: 49px;
   justify-content: center;
   align-items: center;
-  background: #0d0d0d;
-  border: 1px solid #4ecaff;
+  border: 1px solid var(--edenx-primary-color);
   box-sizing: border-box;
   border-radius: 39px;
   margin-left: 32px;
   cursor: pointer;
-  color: #4ecaff;
+  color: var(--edenx-primary-color);
   transition: all 0.3s ease;
-
-  &:hover {
-    color: rgba(132, 218, 255, 1);
-    border: 1px solid #84daff;
-  }
 }
 
 @media (max-width: 1600px) {
@@ -116,14 +137,11 @@
   }
 
   .title {
-    font-size: 3.1rem;
+    font-size: 3.6rem;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .header {
-    background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/homepage-mobile-bg-0209.png);
-  }
   .heroBanner {
     align-items: center;
   }
@@ -165,9 +183,9 @@
   margin-top: 16px;
 }
 
-.homepage-main {
-  background-color: #0d0d0d;
-}
+// .homepage-main {
+//   background-color: #0d0d0d;
+// }
 
 .flowContainer {
   position: relative;

package/src/pages/index.tsx

@@ -1,6 +1,6 @@
+import { Head, useLocation } from '@rspress/core/runtime';
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { Head, useLocation } from 'rspress/runtime';
 import ContentCard from '../components/ContentCard';
 import { FeatureLayout } from '../components/FeatureLayout';
 import Footer from '../components/Footer';
@@ -10,13 +10,15 @@ import styles from './index.module.scss';
 
 const HomepageHeader = () => {
   const t = useI18n();
-
   return (
     <div className={styles.header}>
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className={styles.mask} />
         <h1 className={styles.title}>
-          <div>Inspire Creativity in</div>
-          <div className={styles.titleGradient}>Modern Web Development</div>
+          <span className={clsx([styles.titleGradient, styles.mainTitle])}>
+            Modern.js
+          </span>
+          <div>{t('slogan')}</div>
         </h1>
         <div className={styles.buttons}>
           <a
@@ -24,12 +26,6 @@ const HomepageHeader = () => {
             className={styles.leftButton}
           >
             {t('introduction')}
-            <img
-              width="20"
-              height="20"
-              className={styles.startArrow}
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/right-arrow.svg?url"
-            />
           </a>
           <a
             href={useUrl('/guides/get-started/quick-start')}
@@ -69,19 +65,19 @@ export default function Home() {
     {
       id: 'feature3',
       title: t('feature3'),
-      href: useUrl('/guides/basic-features/routes'),
+      href: useUrl('/guides/basic-features/routes/routes'),
       desc: t('featureDesc3'),
     },
     {
       id: 'feature4',
       title: t('feature4'),
-      href: useUrl('/guides/advanced-features/ssr'),
+      href: useUrl('/guides/basic-features/render/ssr'),
       desc: t('featureDesc4'),
     },
     {
       id: 'feature5',
       title: t('feature5'),
-      href: useUrl('/guides/basic-features/css'),
+      href: useUrl('/guides/basic-features/css/css'),
       desc: t('featureDesc5'),
     },
     {
@@ -106,7 +102,6 @@ export default function Home() {
       <HomepageHeader />
       <main className={styles['homepage-main']}>
         <FeatureLayout>
-          <SecondaryTitle>Features</SecondaryTitle>
           <div className={styles.cardContainer}>
             {features.map(card => (
               <ContentCard
@@ -119,16 +114,6 @@ export default function Home() {
           </div>
         </FeatureLayout>
 
-        <FeatureLayout>
-          <h1
-            className={clsx([styles.title, styles.titleGradient])}
-            style={{ textAlign: 'left', marginBottom: 32 }}
-          >
-            <div>{t('secondSlogan1')}</div>
-            <div>{t('secondSlogan2')}</div>
-          </h1>
-        </FeatureLayout>
-
         <Footer />
       </main>
     </div>

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

@@ -1,10 +0,0 @@
----
-title: index.[tj]s
-sidebar_position: 1
----
-
-# index.[tj]s
-
-A file that extends the Modern.js Web Server. You can add [Hooks](/apis/app/runtime/web-server/hook) or [Middleware](/apis/app/runtime/web-server/middleware) to the Web Server started by the application project in this file.
-
-You can intercept and process requests and responses, perform authentication and role verification, preprocess requests, and catch exceptions. You can also insert specific business logic into the built-in processing logic (including route matching, resource addressing, header injection, page rendering, and static web hosting).

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

@@ -1,38 +0,0 @@
----
-title: index.[tj]s
-sidebar_position: 4
----
-# index.[tj]s
-
-:::warning
-Soon to be deprecated, it is recommended to use [`entry.[tj]s`](/apis/app/hooks/src/entry)。
-:::
-
-The identifier for the entry point when the application uses custom `bootstrap`.
-
-In general, the [`App.[tj]sx`](/apis/app/hooks/src/app) hook file can already meet our needs. When we need to add custom behavior before `bootstrap` or completely take over the webpack packaging entry, we can place `index.[tj]s` in the `src` or entry directory. There are two cases below:
-
-## Add custom behavior before bootstrap
-
-Just export a function in `src/index.[tj]s`:
-
-```js title=src/index.js
-import { bootstrap } from '@modern-js/runtime';
-
-export default App => {
-  // do something before bootstrap...
-  bootstrap(App, 'root');
-};
-```
-
-## Completely take over the webpack entry
-
-When there is no default export function in `src/index.[tj]sx?`, the file is the real webpack packaging entry file and the code can be organized directly as using create-react-app and other scaffolding tools:
-
-```js title=src/index.jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-```

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

@@ -1,16 +0,0 @@
----
-title: '**/*.stories.[tj]sx'
-sidebar_position: 7
----
-# **/*.stories.[tj]sx
-
-Application project Storybook files.
-
-You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the project source code directory `src/` as Storybook files.
-
-Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
-
-:::info
-To use Storybook, you need to enable the "Storybook" mode by running the `new` command in the project first.
-:::
-

package/docs/en/apis/app/runtime/app/define-config.mdx

@@ -1,67 +0,0 @@
----
-title: defineConfig
----
-# defineConfig
-
-:::warning
-
-Soon to be deprecated. It is recommended to use `src/modern.runtime.ts` to define Runtime configurations, which supports both static and dynamic configurations. Please refer to [Runtime Configuration](/configure/app/runtime/0-intro.html).
-
-For dynamically configuring applications runtime features.
-
-:::
-
-## Usage
-
-```ts
-import { defineConfig } from '@modern-js/runtime';
-```
-
-Runtime configurations can usually be configured under the `runtime` of the `modern.config.js`, such as the [router](/configure/app/runtime/router) configuration.
-
-The configuration in `modern.config.js` is determined at build time, If some configuration parameters are obtained at runtime, or if the configuration parameters are from a module (such as a component), then need use `defineConfig` API configuration on runtime.
-
-:::info
-`@modern-js/app-tools` has the same name API, Used to provide **TS type for configuration**, please distinguish them.
-
-:::
-
-## Function Signature
-
-```ts
-function defineConfig(Component, config): any;
-```
-
-### Input
-
-- Component: App root Component.
-- config: runtime config.
-
-## Example
-
-```tsx
-function App () {
-  ...
-}
-
-defineConfig(App, {
-  router: {
-    supportHtml5History: false
-  }
-})
-```
-
-1. `defineConfig` can configuring [runtime.state](/configure/app/runtime/state)、[runtime.router](/configure/app/runtime/router) etc.
-
-2. `defineConfig` before configuring a property, such as `router`, you need to make sure that the `modern.config.js` has been configured to enable this feature.
-
-3. `defineConfig` incoming configuration will be merged with the configuration in `modern.config.js`. Taking `router` as an example, the final application configuration is as follows:
-
-```json
-{
-  // From `modern.config.js`
-  ...runtime.router
-  // From `defineConfig`
-  ...config.router
-}
-```

package/docs/en/apis/app/runtime/core/bootstrap.mdx

@@ -1,74 +0,0 @@
----
-title: bootstrap
----
-# bootstrap
-
-:::warning
-Soon to be deprecated, it is recommended to use [`render`](/apis/app/runtime/core/render).
-:::
-
-Used to start and mount App, usually not manually called. This API is only required when using [Custom Bootstrap](/guides/concept/entries#custom-bootstrap).
-
-## Usage
-
-```ts
-import ReactDOM from 'react-dom/client';
-import { bootstrap } from '@modern-js/runtime';
-
-bootstrap(App, 'root', undefined, ReactDOM);
-```
-
-## Function Signature
-
-```ts
-type BootStrap<T = unknown> = (
-  App: React.ComponentType,
-  id: string | HTMLElement | RuntimeContext,
-  root?: any,
-  ReactDOM?: {
-    render?: Renderer;
-    hydrate?: Renderer;
-    createRoot?: typeof createRoot;
-    hydrateRoot?: typeof hydrateRoot;
-  },
-) => Promise<T>;
-```
-
-### Input
-
-- `AppComponent`: The ReactElement instance created by [`createApp`](./create-app).
-- `rootId`: DOM root element id to mount, such as `"root"`.
-- `root`: The return value of ReactDOM.createRoot, used for scenarios where the root needs to be destroyed outside of the bootstrap function.
-- `ReactDOM`: The ReactDOM object, used to differentiate between React 18 and React 17 APIs.
-
-## Example
-
-```tsx
-import ReactDOM from 'react-dom/client';
-import { createApp, bootstrap } from '@modern-js/runtime';
-
-function App() {
-  return <div>Hello Modern.js</div>;
-}
-
-const WrappedApp = createApp({
-  // customized plugin
-  plugins: [customPlugin()],
-})(App);
-
-bootstrap(WrappedApp, 'root', undefined, ReactDOM);
-```
-
-:::info
-since `@modern-js/runtime/plugins` is a alias, when used in a ts project, its type needs to be declared, Just add the following type declarations to `src/modern-app-env.d.ts`:
-
-```ts
-declare module '@modern-js/runtime/plugins';
-```
-
-:::
-
-:::warning
-bootstrap only supported for use in CSR.
-
-:::

package/docs/en/apis/app/runtime/core/create-app.mdx

@@ -1,49 +0,0 @@
----
-title: createApp
----
-# createApp
-
-:::warning
-Soon to be deprecated, it is recommended to use [`createRoot`](/apis/app/runtime/core/create-root).
-:::
-
-Used for creating custom entries and customizing runtime plugins.
-
-## Usage
-
-```ts
-import { createApp } from '@modern-js/runtime';
-```
-
-## Function Signature
-
-```ts
-import type { Plugin } from '@modern-js/runtime';
-
-function createApp(options: { plugins: Plugin[] }): React.ComponentType<any>;
-```
-
-### Input
-
-- `options`: optional configuration.
-  - `plugins`: custom plugin extensions.
-
-## Example
-
-### Create Custom Entry
-
-For details, see [`bootstrap`](./bootstrap.mdx).
-
-### Custom Plugins
-
-```ts
-import { createApp } from '@modern-js/runtime';
-
-function App() {
-  return <div>app</div>;
-}
-
-export default createApp({
-  plugins: [customPlugin()],
-})(App);
-```

package/docs/en/apis/app/runtime/core/use-loader.mdx

@@ -1,89 +0,0 @@
----
-title: useLoader
----
-# useLoader
-
-`useLoader` is an Isomorphic API, usually used to make asynchronous requests. During Server-Side Rendering (SSR), the server uses `useLoader` to prefetch the data, which is then reused on the client side.
-
-:::tip
-The `useLoader` API is currently not supported when using Rspack as the bundler.
-:::
-
-## Usage
-
-```ts
-import { useLoader } from '@modern-js/runtime';
-```
-
-## Function Signature
-
-```ts
-type LoaderFn = (context: runtimeContext) => Promise<unknow>;
-type Options = {
-  onSuccess: (data: Record<string, any>) => void;
-  onError: (error: Error) => void;
-  initialData: Record<string, any>;
-  skip: boolean;
-  params: Record<string, any>;
-  static: boolean;
-};
-type ReturnData = {
-  data: Record<string, any>;
-  loading: boolean;
-  error: Error;
-  reload: (params?: Record<string, any>) => Promise<any> | undefined;
-  reloading: boolean;
-};
-
-function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
-```
-
-:::info
-`runtimeContext` can refer to [useRuntimeContext](/apis/app/runtime/core/use-runtime-context).
-
-:::
-
-### Input
-
-- `loaderFn`: function for loading data, returning a Promise.
-- `options`: optional configuration.
-  - `onSuccess`: successful callback.
-  - `onError`: error callback.
-  - `initialData`: the initial data before the first execution,.
-  - `skip`: when the value is `true`, the function does not execute.
-  - `params`: when the result of the `params` serialization changes, the function is re-executed. `params` is also passed in as the second argument of the function.
-  - `static`: when the value is `true`, `useLoader` is used for [SSG](/guides/basic-features/render/ssg).
-
-### Return Value
-
-- `data`: return data on successful execution.
-- `loading`: indicates whether the function is in execution.
-- `error`: error message when function execution fails.
-- `reload`: the function can be re-executed after the call.
-  - `params`: when the value is `undefined`, the last value will be reused; otherwise, the function will be re-executed with the new value.
-- `reloading`: during the execution of the call to `reload`, the value of `reloading` is `true`.
-
-## Example
-
-```ts
-function Container() {
-  const { data, error, loading } = useLoader(
-    async (context, params) => {
-      console.log(params) // nicole
-      return fetch(user);
-    },
-    {
-      onSuccess: data => {
-        console.log('I did success:(',  data);
-      },
-      onError: error => {
-        console.log('I met error:)',  error);
-      },
-      initialData: { name: 'nicole', gender: 'female' },
-      params: 'nicole'
-    }
-  );
-
-  return ...;
-}
-```