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

package/docs/en/apis/app/runtime/model/use-static-model.mdx

@@ -1,51 +0,0 @@
----
-sidebar_position: 3
-title: useStaticModel
----
-# useStaticModel
-
-import ReduckTip from "@site-docs-en/components/reduck-tip"
-
-<ReduckTip />
-
-If want to consume a Model in the form of React Hook in the component, and can get the current latest state at any time, but you don't want the Model state to be updated, which will cause the component to be re-rendered, we can use `useStaticModel`.
-
-`useStaticModel` API is same as `useModel`.For detail, see [`useModel`](./use-model.mdx).
-
-To ensure that the latest state is always available, be careful not to deconstruct the returned `state`.
-
-```tsx
-function App() {
-  // ❌ Do not deconstruct state, but can deconstruct actions.
-  const [{ username }, { logout }] = useStaticModel(userModel);
-
-  // ✅ True Usage.
-  const [state, { logout }] = useStaticModel(userModel);
-
-  useEffect(() => {
-    state.username;
-  }, []);
-}
-```
-
-## Example
-
-The following `App` component consumes the `userModel` state, but does not use it directly in JSX. It can be found that changes in the `userModel` state do not necessarily cause the component to re-render. This situation can be optimized using `useStaticModel`.
-
-```tsx
-function App() {
-  const [state] = useStaticModel(userModel);
-
-  useEffect(() => {
-    // Statistical UV Data
-    send('pageview', { user: state.user });
-  }, [state]);
-
-  return <div>Hello</div>;
-}
-```
-
-:::info More
-[Use Model](/guides/topic-detail/model/use-model).
-
-:::

package/docs/en/apis/app/runtime/model/use-store.mdx

@@ -1,26 +0,0 @@
----
-sidebar_position: 9
-title: useStore
----
-# useStore
-
-import ReduckTip from "@site-docs-en/components/reduck-tip"
-
-<ReduckTip />
-
-`useStore` Used to get the store shared by the current component tree.
-
-## Function Signature
-
-```ts
-function useStore(): ReduckStore;
-```
-
-### Return Type
-
-- ReduckStore: Reduck Store, type refer to the return type of [createStore](./create-store.mdx).
-
-:::info More
-[Use Model](/guides/topic-detail/model/use-model).
-
-:::

package/docs/en/apis/app/runtime/ssr/pre-render.mdx

@@ -1,96 +0,0 @@
----
-title: PreRender
----
-# PreRender
-
-A Helmet-like HOC without content implements SPA routing-level caching, manner without additional configuration.
-
-## Usage
-
-```tsx
-import { PreRender } from '@modern-js/runtime/ssr';
-
-export default () => (
-  <>
-    <PreRender interval={5} />
-  </>
-);
-```
-
-## Function Signature
-
-The `PreRender` provides a set of configuration for controlling caching rules, expiration times, caching algorithms, and more.
-
-```tsx
-type Props {
-  interval: number;
-  staleLimit: number;
-  level: number;
-  include: { header?: string[], query?: string[] };
-  matches: { header?: Record<string, any>, query?: Record<string, any> }
-}
-
-function PreRender(props: Props): React.Component
-```
-
-### Input
-
-- `interval`: set the time the cache keep fresh, seconds. During this time, the cache will be used directly and not invoke asynchronous rendering.
-- `staleLimit`: sets the time when the cache is completely expired, seconds.During this time, The cache can be returned and asynchronous rendering will be invoke, otherwise must wait for the re-rendered result.
-- `level`: sets the calculation rule level for the cache identity, usually used with `includes` and `matches`. The default value is `0`.
-
-```bash
-0: pathname
-1: pathname + querystring
-2: pathname + headers
-3: pathname + querystring + headers
-```
-
-- `includes`: sets the content that needs to be included in the cache identifier, used when the `level` is not `0`. The default value is `null`.
-- `matches`: sets the rewriting rule for the value of query or header in cache identity, usually used in cache category, supports regular expressions. The default value is `null`.
-
-## Example
-
-```tsx
-import { PreRender } from '@modern-js/runtime/ssr';
-
-export default function App() {
-  return (
-    <>
-      <PreRender interval={10} />
-      <div>Hello Modern</div>
-    </>
-  );
-}
-```
-
-The following example shows how to add the parameters in the query and header into the cache identifier calculation:
-
-```tsx
-/* calculate cache identifier using channel in query and language in header */
-<PreRender
-  interval={10}
-  level={2}
-  includes={{
-    query: ['channel'],
-    header: ['language'],
-  }}
-/>
-```
-
-The following example shows how not to let the test channel affect the online cache:
-
-```tsx
-/* rewrite the channel value starting with test_ in the query as "testChannel", otherwise rewrite it as "otherChannel" */
-<PreRender interval={10} level={2} includes={{
-  query: ["channel"],
-  header: ["language"]
-}} matches={{
-  query: {
-    channel: {
-      "testChannel", "^test_",
-      "otherChannel", ".*"
-    }
-  }
-}} />
-```

package/docs/en/apis/app/runtime/web-server/hook.mdx

@@ -1,134 +0,0 @@
----
-title: Hook
----
-
-# Hook
-
-:::warning
-
-The Hook API has been deprecated. Please use the [new Custom Web Server](/guides/advanced-features/web-server) to handle page requests.
-
-:::
-
-Used to extend Modern.js built-in Web Server, all page requests are handled by these hooks.
-
-## Usage
-
-```ts
-import { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
-
-export const afterMatch: AfterMatchHook = (context, next) => {};
-export const afterRender: AfterRenderHook = (context, next) => {};
-```
-
-:::info
-Before using this API, please execute `pnpm run new` to create a new "Custom Web Server" source code directory.
-
-```bash
-pnpm run new
-? Please select the operation you want: Create Elements
-? Please select the type of element to create: New "Custom Web Server" source code directory
-```
-
-:::
-
-## Function Signature
-
-```ts
-type HookContext = {
-  response: {
-    set: (key: string, value: string) => void;
-    status: (code: number) => void;
-    getStatus: () => number;
-    cookies: {
-      set: (key: string, value: string, options?: any) => void;
-      clear: () => void;
-    };
-    raw: (
-      body: string,
-      { status, headers }: { status: number; headers: Record<string, any> },
-    ) => void;
-  };
-  request: {
-    host: string;
-    pathname: string;
-    query: Record<string, any>;
-    cookie: string;
-    cookies: {
-      get: (key: string) => string;
-    };
-    headers: IncomingHttpHeaders;
-  };
-};
-
-function Hook(context: HookContext, next: NextFunction): Promsie<void> | void;
-```
-
-different Hooks additionally provide different contexts. Currently Modern.js support `AfterMatch` and `AfterRender`.
-
-```ts
-type AfterMatchContext = HookContext & {
-  router: {
-    redirect: (url: string, status: number) => void;
-    rewrite: (entry: string) => void;
-  };
-};
-
-type AfterRenderContext = {
-  template: {
-    get: () => string;
-    set: (html: string) => void;
-    prependHead: (fragment: string) => void;
-    appendHead: (fragment: string) => void;
-    prependBody: (fragment: string) => void;
-    appendBody: (fragment: string) => void;
-  };
-};
-```
-
-### Input
-
-- `context`: Hook context.
-  - `response`: provides a series of methods to process the response.
-  - `request`: provides a series of methods to get request info.
-  - `router`: provides methods on routing.
-  - `template`: provides methods on content.
-- `next`: call next listener (not affect the server process, only current hook).
-
-## Example
-
-### Redirect
-
-Redirect to pages outside the site, for example to login page:
-
-```ts
-import type { AfterMatch } from '@modern-js/runtime/server';
-
-export const afterMatch: AfterMatch = async (ctx, next) => {
-  ctx.router.redirect('https://website.com/login', 302);
-};
-```
-
-### Rewrite
-
-Rewrite to pages of the current site, for example, the same route returns pages that are adapted to different UA:
-
-```ts
-import type { AfterMatch } from '@modern-js/runtime/server';
-
-export const afterMatch: AfterMatch = async (ctx, next) => {
-  ctx.router.rewrite('mobile');
-};
-```
-
-### HTML Inject
-
-Inject some HTML content to the page, such as scripts, page skeletons, etc.:
-
-```ts
-import type { AfterRender } from '@modern-js/runtime/server';
-
-export const afterRender: AfterRenderHook = (context, next) => {
-  ctx.template.prependBody('<div>Footer</div>');
-};
-```

package/docs/en/apis/app/runtime/web-server/middleware.mdx

@@ -1,113 +0,0 @@
----
-title: Middleware
----
-
-# Middleware
-
-:::warning
-
-Middleware has been deprecated. Please use the [new Custom Web Server](/guides/advanced-features/web-server) to handle page requests.
-
-:::
-
-Used to extend the built-in Web Server of Modern.js, unlike [Hook](/apis/app/runtime/web-server/hook), Middleware can directly operate Node's origin request and response, and can be extended using the framework plugin.
-
-
-## Usage
-
-```ts
-import { Middleware } from '@modern-js/runtime/server';
-
-export const middleware: Middleware = async (context, next) => {};
-export const middleware: Middleware[] = [
-  async (context, next) => {},
-  async (context, next) => {},
-];
-```
-
-:::info
-Before using this API, please execute `pnpm run new` to create a new "Custom Web Server" source code directory.
-
-```bash
-pnpm run new
-? Please select the operation you want: Create Element
-? Please select the type of element to create: New "Custom Web Server" source code directory
-```
-
-:::
-
-## Function Signature
-
-```ts
-type Middleware = (
-  context: MiddlewareContext,
-  next: NextFunction,
-) => Promise<void> | void;
-
-type MiddlewareContext = {
-  response: {
-    set: (key: string, value: string) => void;
-    status: (code: number) => void;
-    getStatus: () => number;
-    cookies: {
-      set: (key: string, value: string, options?: any) => void;
-      clear: () => void;
-    };
-    raw: (
-      body: string,
-      { status, headers }: { status: number; headers: Record<string, any> },
-    ) => void;
-    locals: Record<string, any>;
-  };
-  request: {
-    host: string;
-    pathname: string;
-    query: Record<string, any>;
-    cookie: string;
-    cookies: {
-      get: (key: string) => string;
-    };
-    headers: IncomingHttpHeaders;
-  };
-  source: {
-    req: IncomingMessage;
-    res: ServerResponse;
-  };
-};
-```
-
-### Input
-
-- `context`: Middleware context.
-  - `response`: provides a series of methods to process the response.
-  - `request`: provides a series of methods to get request info.
-  - `source`: provides Node.js native `req` and `res` object.
-- `next`: call next listener (not affect the server process, only current hook).
-
-:::warning
-The execution of the `next` function does not affect built-in processes, only controls whether the next middleware executes. Rendering processes are interrupted only when the response is written.
-:::
-
-## Example
-
-### Tracking
-
-```ts
-export const Middleware = () => async (ctx, next) => {
-  const start = Date.now();
-  ctx.source.res.once('finish', () => {
-    console.log(Date.now() - start);
-  });
-};
-```
-
-### Inject Tools & Data
-
-Modern.js provides `res.locals` to store local variables for the current request.
-
-```ts
-export const Middleware = () => async (ctx, next) => {
-  ctx.response.locals.id = 'Modern.js';
-  ctx.response.locals.rpc = createRpcInstance();
-};
-```

package/docs/en/apis/app/runtime/web-server/unstable_middleware.mdx

@@ -1,167 +0,0 @@
----
-title: Unstable Middleware
----
-
-# Unstable Middleware
-
-:::warning
-
-UnstableMiddleware has been deprecated. Please use the [new Custom Web Server](/guides/advanced-features/web-server) to handle page requests.
-
-:::
-
-Used to extend the built-in Web Server in Modern.js.
-UnstableMiddleware will replace [Middleware](/apis/app/runtime/web-server/middleware) in the future.
-
-
-## Usage
-
-```ts title="server/index.ts"
-import { UnstableMiddleware } from '@modern-js/runtime/server';
-
-export const unstableMiddleware: UnstableMiddleware[] = [];
-```
-
-## Types
-
-**UnstableMiddleware**
-
-```ts
-type UnstableMiddleware<
-  V extends Record<string, unknown> = Record<string, unknown>,
-> = (
-  c: UnstableMiddlewareContext<V>,
-  next: UnstableNext,
-) => Promise<void | Response>;
-```
-
-**UnstableMiddlewareContext**
-
-```ts
-type Body = ReadableStream | ArrayBuffer | string | null;
-
-type UnstableMiddlewareContext<
-  V extends Record<string, unknown> = Record<string, unknown>,
-> = {
-  request: Request;
-  response: Response;
-  get: Get<V>;
-  set: Set<V>;
-  header: (name: string, value: string, options?: { append?: boolean }) => void;
-  status: (code: number) => void;
-  redirect: (location: string, status?: number) => Response;
-  body: (data: Body, init?: ResponseInit) => Response;
-  html: (
-    data: string | Promise<string>,
-    init?: ResponseInit,
-  ) => Response | Promise<Response>;
-};
-```
-
-**UnstableNext**
-
-```ts
-type UnstableNext = () => Promise<void>;
-```
-
-## Examples
-
-### Web Server Timing
-
-```ts
-import { UnstableMiddleware } from '@modern-js/runtime/server';
-
-const time: UnstableMiddleware = async (c, next) => {
-  const start = Date.now();
-
-  await next();
-
-  const end = Date.now();
-
-  console.log(`${end - start}`);
-};
-
-export const unstableMiddleware: UnstableMiddleware[] = [time];
-```
-
-### Injecting Server Data for DataLoader Consumption
-
-```ts title="shared/index.ts"
-export type Vars = {
-  message: string;
-};
-```
-
-```ts title="server/index.ts"
-import {
-  UnstableMiddleware,
-  UnstableMiddlewareContext,
-} from '@modern-js/runtime/server';
-import type { Vars } from '../shared/index';
-
-const setPayload: UnstableMiddlewaree<Vars> = async (
-  c: UnstableMiddlewareContext<Vars>,
-  next,
-) => {
-  c.set('message', 'facker');
-
-  await next();
-};
-
-export const unstableMiddleware: UnstableMiddleware<Vars>[] = [setPayload];
-```
-
-```ts title="src/routes/page.data.ts"
-import type { Payload } from '../../shared/index';
-import { LoaderFunctionArgs } from '@modern-js/runtime/router';
-
-export const loader = async ({ context }: LoaderFunctionArgs<Vars>) => {
-  const message = context?.get('message');
-
-  // ...
-};
-```
-
-### Redirect
-
-```ts
-import { UnstableMiddleware } from '@modern-js/runtime/server';
-
-const auth: UnstableMiddleware = async (c, next) => {
-  const user = getUser(c.request);
-
-  if (!user) {
-    return c.redirect('/login');
-  }
-
-  await next();
-};
-
-export const unstableMiddleware: UnstableMiddleware[] = [auth];
-```
-
-### Modify Response
-
-```ts
-import { UnstableMiddleware } from '@modern-js/runtime/server';
-
-const modifier: UnstableMiddleware = async (c, next) => {
-  await next();
-
-  const { response } = c;
-
-  const text = await response.text();
-
-  const newText = text.replace('<html>', `<html lang="${language}">`);
-
-  const newheaders = response.headers;
-  newheaders.set('x-custom-value', 'modern');
-
-  c.response = c.body(newText, {
-    status: response.status,
-    headers: newheaders,
-  });
-};
-
-export const unstableMiddleware: UnstableMiddleware[] = [modifier];
-```

package/docs/en/components/bff-proxy-path-rewrite.mdx

@@ -1,16 +0,0 @@
-Path rewriting can also be performed here, such as proxying the request sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
-
-```js title="modern.server-runtime.config.js"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': {
-        target: 'https://cnodejs.org',
-        pathRewrite: { '/api/topics': '/api/v1/topics' },
-        changeOrigin: true,
-      },
-    },
-  },
-});
-```

package/docs/en/components/bff-proxy-principle.mdx

@@ -1 +0,0 @@
-BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). For more advanced usage, please refer to its [documentation](https://github.com/chimurai/http-proxy-middleware#options).

package/docs/en/components/builder.mdx

@@ -1,3 +0,0 @@
-Refers to the build layer of Modern.js. The goal of Builder is to provide Modern.js users with out-of-the-box build capabilities and support seamless switching between webpack and Rspack.
-
-The previous version of Modern.js `MAJOR_VERSION.46.0` used `@modern-js/builder`, which was upgraded to [Rsbuild](https://rsbuild.rs/) starting from `MAJOR_VERSION.46.0`.

package/docs/en/components/create-bff-api-app.mdx

@@ -1,25 +0,0 @@
-1. run `@modern-js/create` command：
-
-```bash
-npx @modern-js/create@latest myapi
-```
-
-2. interactive Q & A interface to initialize the project based on the results, with initialization performed according to the default settings:
-
-```bash
-? Please select the programming language: TS
-? Please select the package manager: pnpm
-```
-
-3. Execute the `new` command，enable BFF:
-
-```bash
-? Please select the operation you want to perform Enable optional features
-? Please select the feature to enable Enable "BFF"
-? Please select BFF type Framework mode
-```
-
-
-4. Execute【[Existing BFF-enabled Projects](/en/guides/advanced-features/bff/cross-project.html#existing-bff-enabled-projects)】to turn on the cross-project call switch.
-
-**Note:** When a project serves solely as a BFF producer, its runtime does not depend on the `/src` source directory. Removing the `/src` directory can help optimize the project's build efficiency.

package/docs/en/components/custom-router-micro-frontend.mdx

@@ -1,40 +0,0 @@
-```js title="src/App.tsx"
-import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
-
-import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
-
-const AppLayout = () => (
-  <>
-    <div><Link to={'/table'}>Loading conventional routed sub-applications</Link></div>
-    <div><Link to={'/dashboard'}>Loading Self-Controlled Routing Sub-Applications</Link></div>
-    <div><Link to={'/'}>Uninstall a sub-application</Link></div>
-    <Outlet />
-  </>
-)
-
-export default () => {
-  const { apps, MApp, Table, Dashboard } = useModuleApps();
-
-  // If you are not using the MApp component, you need to use createBrowserRouter to create the route.
-  const router = createBrowserRouter(
-    createRoutesFromElements(
-      <Route path="/" element={<AppLayout />}>
-        <Route key={'table'} path={'table/*'} element={<Table />} />
-        <Route key={'dashboard'} path={'dashboard/*'} element={<Dashboard />} />
-      </Route>
-    )
-  );
-
-  return (
-    // Approach 1: Use MApp to automatically load sub-applications based on the configured activeWhen parameter (this project is configured in modern.config.ts)
-    // <BrowserRouter>
-    //   <MApp />
-    // </BrowserRouter>
-
-    // Approach 2: Manually write Route components to load sub-applications, which is convenient for scenarios that require authentication and other pre-requisite operations
-    <>
-      <RouterProvider router={router} />
-    </>
-  );
-};
-```