npm - @modern-js/main-doc - Versions diffs - 2.7.0 → 2.9.0 - Mend

@modern-js/main-doc 2.7.0 → 2.9.0

Files changed (1123) hide show

package/en/apis/app/hooks/src/routes.mdx DELETED Viewed

@@ -1,90 +0,0 @@
----
-title: routes/
-sidebar_position: 2
----
-# routes/
-The entry identifier when the application uses file system-based routing.
-When the project structure is of type `Routes directory entry`, the files in the `src/routes` directory are parsed to get the client-side routing configuration. See [Routing by convention](/guides/basic-features/routes) for more details on usage.
-Any `layout.[tj]sx` and `page.[tj]sx` under `src/routes` will be used as a route to the application：
-```bash {3}
-.
-└── routes
-    ├── layout.tsx
-    ├── page.tsx
-    └── user
-        ├── layout.tsx
-        └── page.tsx
-```
-## basic example
-The directory names in the `routes` directory will be used as a mapping of the route url, where `layout.tsx` is used as the layout component and `page.tsx` as the content component, which is a leaf node of the whole route, for example the following directory structure：
-```bash
-.
-└── routes
-    ├── page.tsx
-    └── user
-        └── page.tsx
-```
-The following two routes are produced:
-- `/`
-- `/user`
-## Dynamic Route
-If the directory name of the route file is named with `[]`, the generated route will be used as a dynamic route. For example, the following file directories:
-```
-└── routes
-    ├── [id]
-    │   └── page.tsx
-    ├── blog
-    │   └── page.tsx
-    └── page.tsx
-```
-The `routes/[id]/page.tsx` file will be converted to a `/:id` route. All `/xxx` will match that route, except for the `/blog` route, which can be matched exactly.
-In the component, you can get the corresponding parameters by [useParams](/apis/app/runtime/router/router#useparams).
-In the loader, params will be used as input to [loader](/guides/basic-features/data-fetch#loader-function), and the corresponding parameters can be retrieved through the property `params`.
-## Layout component
-As in the example below, you can add a common layout component for all routing components by adding `layout.tsx`
-```bash
-.
-└── routes
-    ├── layout.tsx
-    ├── page.tsx
-    └── user
-        ├── layout.tsx
-        └── page.tsx
-```
-You can represent child components in layout components by using `<Outlet>`:
-```tsx title=routes/layout.tsx
-import { Link, Outlet, useLoaderData } from '@modern-js/runtime/router';
-export default () => {
-  return (
-    <>
-      <Outlet></Outlet>
-    </>
-  );
-};
-```
-:::note
-`<Outlet>` is a new API in React Router 6, see [Outlet] for details(https://reactrouter.com/en/main/components/outlet#outlet).
-:::

package/en/apis/app/hooks/src/server.mdx DELETED Viewed

@@ -1,34 +0,0 @@
----
-title: '*.[server|node].[tj]sx'
-sidebar_position: 8
----
-# *.[server|node].[tj]sx
-Used in application projects to place server side code, it generally has the following two functions：
-1. When `*.tsx` and `*. [server|node].tsx` coexist, rendering on the server side will give preference to the `*. [server|node].tsx` file instead of the `*.tsx` file.
-2. When using [data loader](/guides/basic-features/data-fetch), the server-side dependencies need to be re-exported from this file
-```tsx
-// routes/user/avatar.tsx
-import { useLoaderData } from '@modern-js/runtime/router';
-import { readFile } from './utils.server';
-type ProfileData = {
-  /* some type declarations */
-};
-export const loader = async (): ProfileData => {
-  const profile = await readFile('profile.json');
-  return profile;
-};
-export default function UserPage() {
-  const profileData = useLoaderData() as ProfileData;
-  return <div>{profileData}</div>;
-}
-// routes/user/utils.server.ts
-export * from 'fs-extra';
-```

package/en/apis/app/runtime/model/connect.mdx DELETED Viewed

@@ -1,145 +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/modern-js-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/en/apis/app/runtime/model/model_.mdx DELETED Viewed

@@ -1,199 +0,0 @@
----
-sidebar_position: 1
-title: model
----
-# model
-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 [**model**](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/model.ts).
-:::
-## model
-Create a Model for managing application state.
-`function model(name: string): { define: function }`
-- name: `string`, the unique id of the Model created.
-```ts title="example"
-model('foo');
-```
-## define
-Used to define the detailed structure of the Model, supporting passing in an object type or function type parameter.
-### Object Type
-`function define(modelDesc: ModelDesc): Model;`
-- modelDesc: `ModelDesc`，definition of Model structure，includes `state`、`computed`、`actions`、`effects` etc. props.
-```tsx title="example"
-const fooModel = model('foo').define({
-  state: 'foo',
-  computed: {
-    cFoo: state => `c${state}`,
-  },
-  actions: {
-    setState: (state, value) => {
-      return value;
-    },
-  },
-  effects: {
-    loadState: async () => {
-      // get state from remote
-    },
-  },
-});
-```
-### Function Type
-`function define((context: Context, utils: Utils) => ModelDesc): Model;`
-- `context`: Reduck Context, can get underlying `store` object. `store` support all Redux Store [API](https://redux.js.org/api/store), also mounts the `use` method for consuming the Model, and the `unmount` method for unmounting the Model.
-- utils: commonly used tool like `use`、`onMount`. `use` is the same as `store.use`，`onMount` is the hook function after the Model is mounted.
-{/* TODO: @anchao 调整类型  */}
-```ts
-interface Utils {
-  use: UseModel;
-  onMount: OnMountHook;
-}
-interface Context {
-  store: ReduxStore & {
-    use: UseModel;
-    unmount: (model: Model) => void;
-  };
-}
-```
-For example, through `use`, you can get the `state` and `actions` of the Model itself and other Models.
-```tsx title="example"
-const fooModel = model('foo').define(() => {
-  return {
-    state: 'foo',
-    actions: {
-      setState: (state, value) => {
-        return value;
-      },
-    },
-  };
-});
-const barModel = model('bar').define((_, { use }) => {
-  return {
-    state: 'bar',
-    effects: {
-      syncFoo() {
-        const [state, actions] = use(fooModel);
-        actions.setState(state);
-      },
-    },
-  };
-});
-```
-### Input
-#### ModelDesc.state
-Define the state of the Model. Technically, any type of **State** is supported, but in practice it is recommended to use a JSON serializable type.
-```ts
-interface ModelDesc {
-  state: any;
-}
-```
-#### ModelDesc.actions
-Define the Actions of the Model. The function type of Actions is:
-```ts
-interface ModelDesc {
-  actions: {
-    [actionKey: string]: (state: State, payload: any) => State | void;
-  };
-}
-```
-Reduck internally integrates [immer](https://github.com/immerjs/immer), which can directly return the original `state`. When the Action has no explicit return value, Reduck internally returns a modified new State object.
-#### ModelDesc.computed
-Defines the derived state of the Model. The definition of derived state supports two types:
-1. Depends only on the state of the Model itself
-```ts
-interface ModelDesc {
-  computed: {
-    [computedKey: string]: (state: State) => any;
-  };
-}
-```
-2. Depends on the state of other Models
-```ts
-interface ModelDesc {
-  computed: {
-    [computedKey: string]: [
-      ...models: Model[],
-      (state: State, ...args: ModelState[]) => any,
-    ];
-  };
-}
-```
-```ts title="example"
-const fooModel = model('foo').define({
-  state: 'foo',
-});
-const barModel = model('bar').define({
-  state: 'bar',
-  computed: {
-    combineFoo: [fooModel, (state, fooState) => state + fooState],
-  },
-});
-```
-#### ModelDesc.effects
-Defines the Effects of the Model. The function types defined in Effects are:
-```ts
-interface ModelDesc {
-  effects: {
-    [effectKey: string]: (...args: any[]) => any;
-  };
-}
-```
-```ts title="example"
-const fooModel = model('foo').define((context, { use }) => ({
-  state: 'foo',
-  effects: {
-    persist() {
-      const [state] = use(fooModel);
-      localStorage.setItem('state', state);
-    },
-  },
-}));
-```
-:::info More
-[Define Model](/guides/topic-detail/model/define-model).
-:::

package/en/apis/app/runtime/model/use-model.mdx DELETED Viewed

@@ -1,89 +0,0 @@
----
-sidebar_position: 2
-title: useModel
----
-# useModel
-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 [**model**](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/model.ts).
-:::
-## Function Signature
-```ts
-function useModel(
-  models: Models[],
-  stateSelector?: StateSelector,
-  actionSelector?: ActionSelector,
-): [state, actions, subscribe];
-function useModel(
-  ...models: Models[],
-  stateSelector?: (...args: State[]) => any,
-  actionSelector?: (...args: Actions[]) => any,
-): [state, actions, subscribe];
-```
-### Input
-- models: Array of Model objects, which can be passed in as an array type parameter, or all Models can be passed in as parameters one by one.
-- stateSelector: Optional parameters, used to filter State calculations. The first n parameters are the States corresponding to n Models, and the returned data is used as the first element of the `useModel` return value array.
-- actionSelector: Optional parameters, used to filter Action calculations. The first n parameters are the States corresponding to n Models, and the returned data is used as the second element of the `useModel` return value array.
-### Return Value
-Returns an array with each value:
-- state: return value of `stateSelector`. if there is no `stateSelector`，will combine all incoming Model States(including derived states) and return them. If there is an attribute of the same name in the State of different Models, the following State will override the previous State. when `state` changes，the component call `useModel` will re-render.
-- actions: return value of `actionSelector`. if there is no `actionSelector`，will combine all incoming Model Action(including Effect) and return them. If there is an attribute of the same name in the Action of different Models, the following Action will override the previous Action.
-- subscribe: A function that subscribes to State changes. This function is called when the State of any Model passed in changes.
-## Example
-### Basic
-```tsx
-import todoModel from 'models/todo';
-import filterModel from 'models/filter';
-function Test(props) {
-  const [state, actions] = useModel([todoModel, filterModel]);
-  actions.add(); // call todoModel add action
-  actions.setVisibleStatus(); // call filterModel filterModel action
-  state.items; // get todoModel state items
-  state.visibleStatus; // get filterModel state visibleStatus
-}
-```
-### Selector Usage
-```js
-function Test(props) {
-  const [state, actions] = useModel(
-    [todoModel, filterModel],
-    (todoState, filterState) => ({
-      items: todoState.items,
-      visibleStatus: `${props.prefix}-${filterState.visibleStatus}`,
-    }),
-    (todoActions, filterActions) => ({
-      ...todoActions,
-      ...filterActions,
-    }),
-  );
-  actions.add(); // call todoModel add action
-  actions.setVisibleStatus(); // call filterModel filterModel action
-  state.items; // get todoModel state items
-  state.visibleStatus; // get filterModel state visibleStatus
-}
-```
-:::info More
-[use Model](/guides/topic-detail/model/use-model).
-:::