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

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

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

@@ -1,146 +0,0 @@
----
-sidebar_position: 5
-title: connect
----
-
-# connect
-
-import ReduckTip from '@site-docs-en/components/reduck-tip';
-
-<ReduckTip />
-
-:::tip
-The original type of Reduck is complex. The following type definition shows the simplified type information. For the original type, see [**connect**](https://github.com/web-infra-dev/reduck/blob/main/packages/react/src/connect.ts).
-
-:::
-
-`Connect` is the same as `useModel` and is the corresponding HOC-style API. It is recommended to use the Hook-style `useModel` first.
-
-## Function Signature
-
-```ts
-type SelectStateToProps = (
-  ...modelStates: State[],
-  ownProps?: any,
-) => PlainObject;
-type SelectActionsToProps = (
-  ...modelActions: Actions[],
-  ownProps?: any,
-) => PlainObject;
-
-function connect(models: Model, options?: ConnectOptions);
-function connect(
-  models: [...Model[], SelectStateToProps?, SelectActionsToProps?],
-  options?: ConnectOptions,
-);
-```
-
-### Input
-
-- `models`: passed one or more Models. When `models` is an array type parameter, the last two params can be a function for filtering State (`SelectStateToProps` type) and a function for filtering Actions (`SelectActionsToProps` type).
-
-  - `SelectStateToProps`: `modelStates` is an array of the State of the passed Model object, `ownProps` is the props received by current component. The data returned by `SelectStateToProps` is passed to the props of the component. When the `SelectStateToProps` parameter is not passed in `models`, the States of all Models are merged and passed to the props of the component.
-
-  - `SelectActionsToProps`: `modelActions` is an array of the Action of the passed Model object, `ownProps` is the props received by current component. returned by `SelectActionsToProps` is passed to the props of the component. When the `SelectActionsToProps` parameter is not passed in `models`, the Action of all Models are merged and passed to the props of the component.
-
-- `options`: Optional parameter for auxiliary configuration. Currently supports setting `forwardRef`, which is used to control whether to forward the `ref` of the component. The default value is `false`, which means that the `ref` is not forwarded. Set to `{ forwardRef: true }`, which means to forward `ref`.
-
-### Return Type
-
-Returns a HOC: receives an component, returns a component with extra State and Actions injected on `props`.
-
-## Example
-
-### Basic
-
-```ts
-const modelA = model('modelA').define({
-  state: {
-    a: 1,
-  },
-  actions: {
-    incA(state) {
-      return {
-        ...state,
-        a: state.a + 1,
-      };
-    },
-  },
-});
-
-const modelB = model('modelB').define({
-  state: {
-    b: 10,
-  },
-  actions: {
-    incB(state) {
-      return {
-        ...state,
-        b: state.b + 1,
-      };
-    },
-  },
-});
-
-function Test(props) {
-  props.incA(); // call modelA's action
-  props.incB(); // call modelB's action
-
-  props.a; // get modelA's state: a
-  props.b; // get modelB's state: b
-}
-
-export default connect([modelA, modelB])(Test);
-```
-
-### Select State & Actions
-
-```ts
-function Test(props) {
-  props.incAll();
-  props.c;
-}
-
-const stateSelector = (stateA, stateB) => ({
-  ...stateA,
-  ...stateB,
-  c: stateA.a + stateA.b,
-});
-const actionsSelector = (actionsA, actionsB) => ({
-  ...actionsA,
-  ...actionsB,
-  incAll: () => {
-    actionsA.incA();
-    actionsB.incB();
-  },
-});
-
-export default connect([modelA, modelB, stateSelector, actionsSelector])(Test);
-```
-
-### Forwarding Ref
-
-```ts
-import { useRef, forwardRef } from 'react';
-
-function Test(props, ref) {
-  const { a, b } = props;
-
-  return (
-    <div ref={ref}>
-      <span>{a}</span>
-      <span>{b}</span>
-    </div>
-  );
-}
-
-const TestWrapper = connect([modelA, modelB], { forwardRef: true })(
-  forwardRef(Test),
-);
-
-function App() {
-  const testRef = useRef();
-
-  return <TestWrapper ref={testRef} />;
-}
-```

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

@@ -1,75 +0,0 @@
----
-sidebar_position: 11
-title: createApp
----
-# createApp
-
-import ReduckTip from "@site-docs-en/components/reduck-tip"
-
-<ReduckTip />
-
-Reduck will call `createApp` to create a global application by default. If the entire application only needs one Store, then there is no need to call `createApp` manually.Only need to use `createApp` when you need to create a Store locally in the app.
-
-:::caution
-Note that the exported `createApp` in `@modern-js/runtime/model` is used to manage state, while the exported `createApp` in `@modern-js/runtime` is used to create the entire application. The two are differently.
-
-:::
-
-## Function Signature
-
-```ts
-interface AppConfig extends StoreConfig {
-  devTools?: boolean | DevToolsOptions;
-  autoActions?: boolean;
-}
-
-function createApp(config: AppConfig): object;
-```
-
-### Input
-
-- `config`
-  - `StoreConfig`: the same as [`createStore`](./create-store.mdx) params.
-  - `devTools`: the default value is `true`. when it is an object type, configuring [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md) of Redux DevTools.
-  - `autoActions`: the default value is `true`.if [auto generate Actions](./auto-actions.mdx).
-
-### Return Value
-
-Reduck App, consists of the following properties:
-
-- `Provider`: inject shared Store into locally component tree, same as [`Provider`](./Provider.mdx).
-- `useModel`: get the Model mounted by the app's local Store, same as [`useModel`](./use-model.mdx).
-- `useStaticModel`: get the Model mounted by the app's local Store. same as [`useStaticModel`](./use-static-model.mdx).
-- `useLocalModel`: get the Model mounted by the app's local Store. same as [`useLocalModel`](./use-local-model.mdx).
-- `useStore`: get the Store used locally by the app. same as [`useStore`](./use-store.mdx).
-
-## Example
-
-use `createApp`, local states can be created to isolate the states between different Reduck applications.
-
-```tsx
-const { Provider: LocalFooProvider, useModel: useLocalFooModel } = createApp();
-const { Provider: LocalBarProvider, useModel: useLocalBarModel } = createApp();
-
-function Foo() {
-  const [fooState] = useLocalFooModel(fooModel);
-  const [barState] = useLocalBarModel(fooModel);
-
-  return (
-    <div>
-      <div>Foo: {fooState}</div>
-      <div>Bar: {barState}</div>
-    </div>
-  );
-}
-
-function Container() {
-  return (
-    <LocalFooProvider>
-      <LocalBarProvider>
-        <Foo />
-      </LocalBarProvider>
-    </LocalFooProvider>
-  );
-}
-```

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

@@ -1,61 +0,0 @@
----
-sidebar_position: 10
-title: createStore
----
-# createStore
-
-import ReduckTip from "@site-docs-en/components/reduck-tip"
-
-<ReduckTip />
-
-`createStore` is used to create a Store. Reduck’s Store based on Redux's [Store](https://redux.js.org/api/store) implementatio. Used to store the state of the application and managing the state and Model.
-
-In general, this API is only used when you need to have full control over the creation of the Store. For example, to customize a Store, pass in the ['Provider'](./Provider.mdx) component to use.
-
-## Function Signature
-
-```ts
-interface StoreConfig {
-  initialState?: Record<string, any>;
-  middlewares?: Middleware[];
-  models?: Model[];
-  plugins?: Plugin[];
-  enhancers?: StoreEnhancer[];
-}
-
-interface ReduckStore extends ReduxStore {
-  use: typeof useModel;
-  unmount: (model: Model) => void;
-}
-
-function createStore(config?: StoreConfig): ReduckStore;
-```
-
-### Input
-
-- `config`: store options.
-  - `initialState`: set the initial state for store.
-  - `models`: set the Model to mount to the Store in advance(No need for normal use).
-  - `middlewares`: set Redux [middleware](https://redux.js.org/understanding/thinking-in-redux/glossary#middleware).
-  - `enhancers`: set Redux [Store enhancer](https://redux.js.org/understanding/thinking-in-redux/glossary#store-enhancer).
-  - `plugins`: set Reduck plugin.***experimental API, not recommended***.
-
-### Return Value
-
-Reduck Store:
-
-- `use`: mount and fetch Model objects dynamically. Usage is the same as ['useModel'](./use-model.mdx), but can be used outside of React components.
-- `unmount`: unmount the Model object, and the Model State is cleared from the Store.
-- `ReduxStore`: [Redux Store API](https://redux.js.org/tutorials/fundamentals/part-4-store#redux-store).
-
-## Example
-
-```tsx
-const store = createStore();
-
-function load() {
-  const [, actions] = store.use(fooModel);
-
-  actions.load();
-}
-```