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

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 ...;
-}
-```

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

@@ -1,140 +0,0 @@
----
-title: useModuleApps
----
-# useModuleApps
-
-Returns the React components of all micro-front-end sub-applications, allowing for flexible control over routing.
-
-## Usage
-
-```tsx
-import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
-```
-
-## Function Signature
-
-`function useModuleApps(): Record<string, React.FC<any>>`
-
-Returns the React components wrapped around each subapp.
-
-## Example
-
-You need to configure the micro-front-end sub-application information first.
-
-import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
-
-<EnableMicroFrontend />
-
-```tsx title=App.tsx
-function App() {
-  const { Home, Contact } = useModuleApps();
-
-  return (
-    <div>
-      Master APP
-      <Route exact path="/home">
-        <Home />
-      </Route>
-      <Route exact path="/home">
-        <Contact />
-      </Route>
-    </div>
-  );
-}
-
-defineConfig(App, {
-  masterApp: {
-    apps: [
-      {
-        // name is case-sensitive, what name provides is what useModuleApps returns
-        name: 'Home',
-        entry: 'http://127.0.0.1:8081/',
-      },
-      {
-        name: 'Contact',
-        entry: 'http://localhost:8082',
-      },
-    ],
-  },
-});
-```
-
-Get the `Home` and `Contact` sub-application components(the same as name in the config) through `useModuleApps()`. After that, you can load the child application just like a normal React component.
-
-### Centralized Routing
-
-**Centralized Routing** is a way to centrally configure the activation routes of sub-applications. Add `activeWhen` config to enable **Centralized Routing**.
-
-import MicroRuntimeConfig from "@site-docs-en/components/micro-runtime-config";
-
-<MicroRuntimeConfig />
-
-Then use the `useModuleApp` method to get the `MApp` component in the main application, and render the `MApp` in the main application.
-
-```tsx title=main: App.tsx
-import { useModuleApp } from '@modern-js/plugin-runtime';
-
-function App() {
-  const { MApp } = useModuleApps();
-
-  return (
-    <div>
-      <MApp />
-    </div>
-  );
-}
-
-defineConfig(App, {
-  masterApp: {
-    apps: [
-      {
-        // name is case sensitive, what name provides is what useModuleApps returns
-        name: 'Dashboard',
-        activeWhen: '/dashboard',
-        entry: 'http://127.0.0.1:8081/',
-      },
-      {
-        name: 'TableList',
-        activeWhen: '/table',
-        entry: 'http://localhost:8082',
-      },
-    ],
-  },
-});
-```
-
-After starting the application in this way, accessing the `/dashboard` route will render the `Dashboard`, and accessing the `/table` route will render the `TableList`.
-
-## Load Animation
-
-You can customize the transition animation of the component loading process as follows.
-
-```tsx title=App.tsx
-function App() {
-  const {
-    Components: { Home },
-  } = useModuleApps();
-
-  return (
-    <div>
-      Master APP
-      <Route exact path="/home">
-        <Home
-          loadable={{
-            loading: ({ pastDelay, error }: any) => {
-              if (error) {
-                console.error(error);
-                return <div>error: {error?.message}</div>;
-              } else if (pastDelay) {
-                return <div>loading</div>;
-              } else {
-                return null;
-              }
-            },
-          }}
-        />
-      </Route>
-    </div>
-  );
-}
-```

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

@@ -1,116 +0,0 @@
-# useRuntimeContext
-
-This function is primarily used to obtain the runtime context and can only be used in the function component.
-
-## Usage
-
-```tsx
-import { useRuntimeContext } from '@modern-js/runtime';
-
-export function App() {
-  const runtimeContext = useRuntimeContext();
-  return <div>Hello World</div>
-}
-```
-
-## Function Signature
-
-```ts
-type RuntimeContext = {
-  context: RequestContext;
-};
-```
-
-### context
-
-Used to get [Request Context](#request-context).
-
-## Example
-
-### Distinguish the runtime environment
-
-```ts
-function App() {
-  const { context } = useRuntimeContext();
-
-  if (context.isBrowser === true) {
-    // browser-side execution logic
-    console.log('browser render')
-  } else {
-    // The server-side executes logic, which can access the unique 'logger' attribute
-    context.logger.info('server render')
-  }
-}
-```
-
-### Request context
-
-When SSR is enabled, uniform request contexts can be obtained in both the node environment and the browser-side environment.
-
-The slightly different is that the node environment also supports setting response headers, response codes, and provides Logger logs and Metrics management.
-
-:::tip
-when ssr is disabled, only the part of information that can be obtained in the browser environment is included.
-
-:::
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs
-  defaultValue="RequestContext"
-  values={[
-    { label: 'RequestContext', value: 'RequestContext', },
-    { label: 'ServerContext', value: 'ServerContext', },
-    { label: 'ClientContext', value: 'ClientContext', },
-  ]
-}>
-<TabItem value="RequestContext">
-
-```ts
-type RequestContext = ServerContext | ClientContext;
-```
-
-</TabItem>
-<TabItem value="ServerContext">
-
-```ts
-interface ServerContext {
-  isBrowser: false;
-  request: {
-    userAgent: string;
-    cookie: string;
-    cookieMap: Record<string, any>;
-    query: Record<string, any>;
-    url: string;
-    host: string;
-    headers?: IncomingHttpHeaders;
-  };
-  response: {
-    setHeader: (key: string, value: string) => void;
-    status: (code: number) => void;
-  }
-  logger: Logger;
-  metrics: Metrics;
-}
-```
-
-</TabItem>
-<TabItem value="ClientContext">
-
-```ts
-interface ClientContext {
-  isBrowser: true;
-  request: {
-    userAgent: string;
-    cookie: string;
-    cookieMap: Record<string, any>;
-    query: Record<string, any>;
-    url: string;
-    host: string;
-    headers?: IncomingHttpHeaders;
-  };
-}
-```
-
-</TabItem>
-</Tabs>

package/docs/en/apis/app/runtime/model/Provider.mdx

@@ -1,36 +0,0 @@
----
-sidebar_position: 8
-title: Provider
----
-# Provider
-
-import ReduckTip from "@site-docs-en/components/reduck-tip"
-
-<ReduckTip />
-
-`Provider` is a component that injects Reduck's Store into the application's component tree, making the Model accessible to components inside the component tree. Normally, `Provider` is defined at the top level of the component tree.
-
-## Function Signature
-
-```ts
-interface ProviderProps {
-  store?: ReduckStore;
-  config?: AppConfig;
-}
-```
-
-### Input
-
-- store: the Store object created by [`createStore`](./create-store.mdx).
-- config: this config to create Reduck Store, same as `config` param in [`createApp`](./create-app.mdx).
-
-## Example
-
-```tsx title="App entry file"
-ReactDOM.render(
-  <Provider>
-    <App />
-  </Provider>,
-  document.getElementById('root'),
-);
-```

package/docs/en/apis/app/runtime/model/auto-actions.mdx

@@ -1,122 +0,0 @@
----
-sidebar_position: 6
-title: Auto actions
----
-# Auto actions
-
-import ReduckTip from "@site-docs-en/components/reduck-tip"
-
-<ReduckTip />
-
-Reduck can automatically generate Actions according to the type of State, for easy to modify State.
-
-:::tip
-can use [`runtime.state.autoActions`](/configure/app/runtime/state#autoactions) close auto actions feature.
-
-:::
-
-## Example
-
-### Basic Data Type
-
-State type in `string`、`number`、`boolean`、`null`, generate `setState` Action.
-
-```tsx title="example"
-const fooModel = model('foo').define({
-  state: 1,
-});
-
-function App() {
-  const [state, actions] = useModel(fooModel);
-
-  return (
-    <div>
-      <div>State: {state}</div>
-      <button
-        type="button"
-        onClick={() => {
-          // call auto generate setState Action
-          actions.setState(state + 1);
-        }}
-      >
-        add
-      </button>
-    </div>
-  );
-}
-```
-
-### Array
-
-State type is Array, generate the following Actions:
-
-- `push`: adds one or more elements to the end of the array.
-- `pop`: removes the last element from the array.
-- `shift`: removes the first element from the array.
-- `unshift`: adds one or more elements to the beginning of the array.
-  - usage: `arr.unshift(element1, ..., elementN)`
-  - `elementN`: the element or elements to add to the beginning of the array.
-- `filter`: filter element.
-{/* Semantics are different from native methods, API to be modified  */}
-- `concat`: concat array.
-{/* Semantics are different from native methods, API to be modified  */}
-- `splice`: modify the array by deleting or replacing existing elements or adding new elements in place, and return the modified array(Note that it is different from the native `splice` return value).
-  - usage: `splice(start[, deleteCount[, item1[, item2[, ...]]]])`
-  - `start`: specifies the start position of the modification(counting from 0).
-  - `deleteCount`: an integer representing the number of array elements to remove.
-  - `item, item2, ...`: The elements to add to the array, starting at the start position. If not specified, `splice` will only delete array elements.
-
-```tsx title="example"
-const fooModel = model('foo').define({
-  state: [1, 2, 3],
-});
-
-function App() {
-  const [state, actions] = useModel(fooModel);
-
-  useEffect(() => {
-    actions.push(4);
-    actions.pop();
-    actions.shift(0);
-    actions.unshift();
-    actions.filter(val => val <= 2);
-    actions.splice(0, 1, 1, 2);
-  }, []);
-
-  return (
-    <div>
-      <div>State: {state}</div>
-    </div>
-  );
-}
-```
-
-### PlainObject
-
-State type is PlainObject, base on the names contained in State, generate `set${key}`(Camel-Case) Actions.
-
-```tsx title="example"
-const fooModel = model('foo').define({
-  state: {
-    a: 1,
-    b: { value: 1 },
-    c: 'c',
-  },
-});
-
-function App() {
-  const [state, actions] = useModel(fooModel);
-
-  useEffect(() => {
-    actions.setA(2);
-    actions.setB({ value: 2 });
-    actions.setC('d');
-  }, []);
-
-  return (
-    <div>
-      <div>State: {state}</div>
-    </div>
-  );
-}
-```