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

package/docs/en/guides/topic-detail/model/use-model.mdx

@@ -1,243 +0,0 @@
-# Use Models
-
-## Using Models in Components
-
-### Using as Global State
-
-`useModel` can be used to obtain the State, Actions, and other information of the Model. When the State of the Model is modified by Actions, any other components that use the Model will automatically re-render.
-
-In the counter example in [Quick Start](/guides/topic-detail/model/quick-start), we have demonstrated the use of `useModel` and will not repeat it here.
-
-`useModel` supports passing multiple Models, and the State and Actions of multiple Models will be merged and returned as the result. For example:
-
-```ts
-const fooModel = model('foo').define({
-  state: {
-    value: 1,
-  },
-  actions: {
-    add(state) {
-      state += 1;
-    },
-  },
-});
-
-const barModel = model('bar').define({
-  state: {
-    title: 'bar',
-  },
-  actions: {
-    set(state, payload) {
-      state.title = payload;
-    },
-  },
-});
-
-const [state, actions] = useModel([fooModel, barModel]);
-// Or
-const [state, actions] = useModel(fooModel, barModel);
-```
-
-`state` and `actions` value are:
-
-```ts
-state = {
-  value: 1,
-  title: 'bar',
-};
-
-actions = {
-  add(state) {
-    state += 1;
-  },
-  set(state, payload) {
-    state.title = payload;
-  },
-};
-```
-
-`useModel` also supports selector operations on State and Actions to filter or rename State and Actions. For example:
-
-```ts
-const fooModel = model('foo').define({
-  state: {
-    value: 1,
-  },
-  actions: {
-    add(state) {
-      state += 1;
-    },
-  },
-});
-
-const barModel = model('bar').define({
-  state: {
-    value: 'bar',
-  },
-  actions: {
-    set(state, payload) {
-      state.value = payload;
-    },
-  },
-});
-
-const [state, actions] = useModel(
-  [fooModel, barModel],
-  (fooState, barState) => ({
-    fooValue: fooState.value,
-    barValue: barState.value,
-  }), // stateSelector
-  (fooActions, barActions) => ({ add: fooActions.add }), // actionsSelector
-);
-```
-
-We use `stateSelector` to rename the states with the same name in `fooModel` and `barModel`. We use `actionsSelector` to filter out the Actions of `barModel`.
-
-If only `actionsSelector` needs to be set, you can set `stateSelector` to `undefined` as a placeholder. For example:
-
-```ts
-const [state, actions] = useModel(
-  [fooModel, barModel],
-  undefined,
-  (fooActions, barActions) => ({ add: fooActions.add }), // actionsSelector
-);
-```
-
-### Using as Static State
-
-`useStaticModel` can be used to obtain the Model and use the state of the Model as a static state. This ensures that the State accessed by the component is always the latest value, but the change of the Model's State does not cause the current component to re-render.
-
-:::info
-The usage of `useStaticModel` is exactly the same as `useModel`.
-:::
-
-Consider the following scenario: there is an Input component responsible for user input, and another Search component responsible for executing a search operation after the user input information is entered and the search button is clicked. We do not want the state changes during the user input process to cause Search to re-render. In this case, `useStaticModel` can be used:
-
-```ts
-import { useStaticModel } from '@modern-js/runtime/model';
-
-function Search() {
-  // should not be destructured
-  const [state] = useStaticModel(searchModel);
-
-  return (
-    <div>
-      <button
-        onClick={async () => {
-          const result = await mockSearch(state.input);
-          console.log(result);
-        }}
-      >
-        Search
-      </button>
-    </div>
-  );
-}
-```
-
-:::warning Caution
-Do not destructure the `state` returned by `useStaticModel`. For example, changing it to the following code:
-`const [{input}] = useStaticModel(searchModel);`
-will always get the initial value of Input.
-
-:::
-
-`useStaticModel` is also suitable for use with animation libraries such as [react-three-fiber](https://github.com/pmndrs/react-three-fiber), because binding fast-changing states in animation component UI can easily cause [performance issues](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive). In this case, you can choose to use `useStaticModel`, which only subscribes to the State but does not cause the view component to re-render. Here is a simplified example:
-
-```ts
-function ThreeComponent() {
-  const [state, actions] = useStaticModel(modelA);
-
-  useFrame(() => {
-    state.value;
-    actions.setValue(1);
-    state.value;
-  });
-}
-```
-
-Using React's refs can also achieve similar effects. In fact, `useStaticModel` also uses refs internally. However, using `useStaticModel` directly helps decouple the state management logic from the component and converge it into the Model layer.
-
-The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/static-model).
-
-### Using as Local State
-
-`useLocalModel` can be used to obtain the Model and use the state of the Model as local state. At this time, the change of the Model State only causes the current component to re-render, but does not cause other components that use the Model to re-render. The effect is similar to managing state through `useState` in React, but it can decouple the state management logic from the component and converge it into the Model layer.
-
-:::info
-The usage of `useLocalModel` is exactly the same as `useModel`.
-:::
-
-For example, we modify the code of the counter application and add a counter component `LocalCounter` with local state:
-
-```ts
-import { useLocalModel } from '@modern-js/runtime/model';
-
-function LocalCounter() {
-  const [state, actions] = useLocalModel(countModel);
-
-  return (
-    <div>
-      <div>local counter: {state.value}</div>
-      <button onClick={() => actions.add()}>add</button>
-    </div>
-  );
-}
-```
-
-Click the `add` button of `Counter` and `LocalCounter` respectively, and the states of the two do not affect each other:
-
-![local-model](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/local-model.gif)
-
-The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/local-model).
-
-## Using outside of components
-
-In actual business scenarios, sometimes we need to use Model outside of React components, such as accessing State and executing Actions in utility functions. At this time, we need to use the Store. The Store is a low-level concept that users generally cannot touch. It is responsible for storing and managing the entire application's state. Reduck's Store is based on Redux's Store implementation and adds Reduck-specific APIs, such as `use`.
-
-First, call `useStore` in the component to obtain the `store` object used by the current application and mount it to a variable outside the component:
-
-```ts
-let store; // Reference to `store` object outside of the component
-function setStore(s) {
-  store = s;
-}
-function getStore() {
-  return store;
-}
-
-function Counter() {
-  const [state] = useModel(countModel);
-  const store = useStore();
-  // Avoid unnecessary duplicate settings through `useMemo`
-  useMemo(() => {
-    setStore(store);
-  }, [store]);
-
-  return (
-    <div>
-      <div>counter: {state.value}</div>
-    </div>
-  );
-}
-```
-
-You can obtain the Model object through `store.use`, and the usage of `store.use` is the same as `useModel`. Taking the counter application as an example, we perform an increment operation on the counter value every 1 second outside the component tree:
-
-```ts
-setInterval(() => {
-  const store = getStore();
-  const [, actions] = store.use(countModel);
-  actions.add();
-}, 1000);
-```
-
-The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/runtime-api/counter-model-outof-react).
-
-:::info
-If the Store object is manually created through [`createStore`](/apis/app/runtime/model/create-store), there is no need to obtain it through `useStore` in the component, and it can be used directly.
-:::
-
-:::info Additional Information
-For detailed API definitions related to this section, please refer to [here](/apis/app/runtime/model/model_).
-:::

package/docs/en/guides/topic-detail/model/use-out-of-modernjs.mdx

@@ -1,46 +0,0 @@
-# Using Reduck Separately
-
-When integrating Reduck separately from Modern.js, the following modifications need to be made:
-
-1. Install the Reduck related packages
-
-Install the Reduck package in the project: `@modern-js-reduck/react`.
-
-2. Import package names for API
-
-When used in Modern.js, the package name for exporting Reduck API is: `@modern-js/runtime/model`. When using Reduck separately, the package name for exporting is: `@modern-js-reduck/react`.
-
-3. Wrap the `Provider` component
-
-Modern.js automatically wraps the [`Provider`](/apis/app/runtime/model/Provider) component used to inject the Reduck global Store on the entry component of the application. When using Reduck separately, this needs to be done manually.
-
-Example:
-
-```tsx
-// Root Component
-const Root = () => {
-  return (
-    <Provider>
-      {/* Entry App */}
-      <App />
-    </Provider>
-  );
-};
-```
-
-4. Feature configuration
-
-When used in Modern.js, Reduck features can be configured through [`runtime.state`](/configure/app/runtime/state). When used separately, configuration needs to be done through the `config` or `store` parameter of [`Provider`](/apis/app/runtime/model/Provider).
-
-Example:
-
-```tsx
-const Root = () => {
-  return (
-    {/* Close Redux DevTools */}
-    <Provider config={{ devTools: false }}>
-      <App />
-    </Provider>
-  )
-}
-```

package/docs/en/plugin/official/cli-plugins/plugin-swc.mdx

@@ -1,363 +0,0 @@
----
-sidebar_position: 2
----
-
-# SWC Plugin
-
-:::warning
-**The SWC feature in the current document is no longer maintained**, we recommend using the Rspack + SWC solution.
-
-Please refer to [「Use Rspack」](guides/advanced-features/rspack-start) for more information.
-
-:::
-
-import SWC from '@site-docs-en/components/swc.mdx';
-
-<SWC />
-
-## Usage Scenarios
-
-Before using the SWC plugin, please understand the scenarios and limitations of the SWC plugin to determine whether your project is suitable for using it.
-
-### Rspack Scenario
-
-If you are already using Rspack as the bundler in your project, then you do not need to use the SWC plugin, because Rspack uses SWC for transpiler and minifier by default, and the SWC compilation capabilities are available out of the box.
-
-If you have configured the current SWC plugin when using Rspack, it will not have any effect.
-
-### Babel Plugins
-
-If your project requires the registration of some custom Babel plugins, you will not be able to register and use Babel plugins after using SWC, since it replaces Babel as the transpiler.
-
-For most common Babel plugins, you can find corresponding replacements in SWC, such as:
-
-- `@babel/preset-env`: use [presetEnv](#presetenv) instead.
-- `@babel/preset-react`: use [presetReact](#presetreact) instead.
-- `babel-plugin-import`: use [source.transformImport](/configure/app/source/transform-import) instead.
-- `babel-plugin-lodash`: use [extensions.lodash](#extensionslodash) instead.
-- `@emotion/babel-plugin`: use [extensions.emotion](#extensionsemotion) instead.
-- `babel-plugin-styled-components`: use [extensions.styledComponents](#extensionsstyledcomponents) instead.
-- `@babel/plugin-react-transform-remove-prop-types`: use [reactUtils.removePropTypes](#extensionsreactutils) instead.
-
-If you use Babel plugin capabilities that are not yet supported by SWC, you will no longer be able to use them after switching to SWC compilation. You can give feedback via issues under the [swc-plugins](https://github.com/web-infra-dev/swc-plugins) repository and we will evaluate if built-in support is needed.
-
-### Bundle Size
-
-When using SWC for code minification instead of [terser](https://github.com/terser/terser) and [cssnano](https://github.com/cssnano/cssnano), there may be a small change in the bundle size. SWC outperforms terser for JavaScript code compression and slightly underperforms cssnano for CSS code compression.
-
-For a detailed comparison between minifiers, see [minification-benchmarks](https://github.com/privatenumber/minification-benchmarks).
-
-## Quick Start
-
-### Used in Modern.js framework
-
-The Modern.js framework integrates the SWC plugin, and you can use it in the following ways:
-
-import EnableSWC from '@site-docs-en/components/enableSwc.mdx';
-
-<EnableSWC />
-
-That's it! Now you can use SWC transformation and minification in your project.
-
-## Config
-
-- **Type:**
-
-```ts
-type PluginConfig =
-  | ObjPluginConfig
-  | ((
-      config: ObjPluginConfig,
-      utils: { mergeConfig: typeof lodash.merge; setConfig: typeof lodash.set },
-    ) => ObjPluginConfig | void);
-
-// SwcOptions is configurations of swc https://swc.rs/docs/configuration/compilation
-interface ObjPluginConfig extends SwcOptions {
-  presetReact?: ReactConfig;
-  presetEnv?: EnvConfig;
-  jsMinify?: boolean | JsMinifyOptions;
-  cssMinify?: boolean | CssMinifyOptions;
-  extensions?: Extensions;
-  overrides?: Overrides;
-}
-```
-
-The plugin configuration is based on the SWC configuration. In order to simplify some deep-level configurations and improve development experience, certain extensions have been made. When using object-based configuration, for example you can use `presetReact` and `presetEnv` to quickly configure React-related features and syntax downgrading. Other configurations will also be directly passed through to SWC.
-
-When using function-based configuration, the default configuration generated by the plugin will be passed in, allowing you to modify it or return a new configuration.
-
-### presetReact
-
-- **Type:** [presetReact](https://swc.rs/docs/configuration/compilation#jsctransformreact) in SWC.
-
-Ported from `@babel/preset-react`. The value you passed will be merged with default option.
-
-By default, the plugin will set `runtime` field based on your `react` version, if `react` version is newer than 17.0.0, it will be set to `automatic`, otherwish `classic`.
-
-### presetEnv
-
-- **Type:** [presetEnv](https://swc.rs/docs/configuration/supported-browsers#options) in SWC.
-
-Ported from `@babel/preset-env`. The value you passed will be merged with default option.
-
-Default option is:
-
-```ts
-{
-  targets: '', // automatic get browserslist from your project, so you don't have to set this field
-  mode: 'usage',
-}
-```
-
-### jsMinify
-
-- **Type:** `boolean` or [compress configuration](https://terser.org/docs/api-reference.html#compress-options).
-- **Default:** `{ compress: {}, mangle: true }`.
-
-If set it to `false`, then SWC minification will be disabled, if set it to `true` then will it applies default option. If you pass an object, then this object will be merged with default option.
-
-### cssMinify
-
-- **Type:**: `boolean`
-- **Default:**: `true`
-
-Whether enable to compress CSS files by SWC. If enabled, it will improve the performance of CSS compression, but the compression ratio will be slightly reduced.
-
-### overrides
-
-- **Type:**
-
-```ts
-interface Overrides extends SwcOptions {
-  test: RegExp;
-  include: RegExp[];
-  exclude: RegExp[];
-}
-```
-
-- **Default:** `undefined`
-
-Specify special configuration for specific modules. For example if you want to set ie 11 target for `foo.ts`:
-
-```ts
-{
-  test: /foo.ts/,
-  env: { targets: 'ie 11' }
-}
-```
-
-This will merged into the default configuration, and do not affect other modules.
-
-### extensions
-
-- **Type:** `Object`
-
-Some plugins ported from Babel.
-
-#### extensions.reactUtils
-
-- **Type:** `Object`
-
-```ts
-type ReactUtilsOptions = {
-  autoImportReact?: boolean;
-  removeEffect?: boolean;
-  removePropTypes?: {
-    mode?: 'remove' | 'unwrap' | 'unsafe-wrap';
-    removeImport?: boolean;
-    ignoreFilenames?: string[];
-    additionalLibraries?: string[];
-    classNameMatchers?: string[];
-  };
-};
-```
-
-Some little help utils for `React`.
-
-**reactUtils.autoImportReact**
-
-- **Type:** `boolean`
-
-Automatically import `React` as global variable, eg: `import React from 'react'`.
-Mostly used for generated `React.createElement`.
-
-**reactUtils.removeEffect**
-
-- **Type:** `boolean`
-
-Remove `useEffect` call.
-
-**reactUtils.removePropTypes**
-
-- **Type:**
-
-```ts
-type RemovePropTypesOptions = {
-  mode?: 'remove' | 'unwrap' | 'unsafe-wrap';
-  removeImport?: boolean;
-  ignoreFilenames?: string[];
-  additionalLibraries?: string[];
-  classNameMatchers?: string[];
-};
-```
-
-Remove `React` runtime type checking. This is ported from [@babel/plugin-react-transform-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types), All the configurations remain the same.
-
-#### extensions.lodash
-
-- **Type:**
-
-```ts
-type LodashOptions = {
-  cwd?: string;
-  ids?: string[];
-};
-```
-
-- **Default:**
-
-```ts
-const defaultOptions = {
-  cwd: process.cwd(),
-  ids: ['lodash', 'lodash-es'],
-};
-```
-
-Ported from [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash), it is used to automatically convert references to Lodash into on-demand imports, thereby reducing the bundle size of Lodash code.
-
-```ts
-// Input
-import { get, throttle } from 'lodash';
-
-// Output
-import get from 'lodash/get';
-import throttle from 'lodash/throttle';
-```
-
-#### extensions.styledComponents
-
-- **Type:**
-
-```ts
-boolean | {
-  // Enabled by default in development, disabled in production to reduce file size,
-  // setting this will override the default for all environments.
-  displayName?: boolean,
-  // Enabled by default.
-  ssr?: boolean,
-  // Enabled by default.
-  fileName?: boolean,
-  // Empty by default.
-  topLevelImportPaths?: string[],
-  // Defaults to ["index"].
-  meaninglessFileNames?: string[],
-  // Enabled by default.
-  cssProp?: boolean,
-  // Empty by default.
-  namespace?: string,
-};
-```
-
-This is ported by Next.js team from [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components).
-
-#### extensions.emotion
-
-- **Type:**
-
-```ts
-boolean | {
-  // default is true. It will be disabled when build type is production.
-  sourceMap?: boolean,
-  // default is 'dev-only'.
-  autoLabel?: 'never' | 'dev-only' | 'always',
-  // default is '[local]'.
-  // Allowed values: `[local]` `[filename]` and `[dirname]`
-  // This option only works when autoLabel is set to 'dev-only' or 'always'.
-  // It allows you to define the format of the resulting label.
-  // The format is defined via string where variable parts are enclosed in square brackets [].
-  // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
-  labelFormat?: string,
-  // default is undefined.
-  // This option allows you to tell the compiler what imports it should
-  // look at to determine what it should transform so if you re-export
-  // Emotion's exports, you can still use transforms.
-  importMap?: {
-    [packageName: string]: {
-      [exportName: string]: {
-        canonicalImport?: [string, string],
-        styledBaseImport?: [string, string],
-      }
-    }
-  },
-}
-```
-
-This is ported by Next.js team from [@emotion/babel-plugin](https://www.npmjs.com/package/@emotion/babel-plugin)
-
-#### extensions.pluginImport
-
-:::tip
-Modern.js provides the [source.transformImport](/configure/app/source/transform-import) config, so you don't need to configure `extensions.pluginImport` manually.
-:::
-
-Ported from [babel-plugin-import](https://github.com/umijs/babel-plugin-import), configurations are the same.
-
-Some configurations can be passed in functions, such as `customName`, `customStyleName`. These JavaScript functions will be called by Rust through Node-API, which will cause some performance overhead.
-
-Some simple function logic can be replaced by template language. Therefore, the configuration of function items such as `customName`, `customStyleName` can also be passed in strings as templates to replace functions and improve performance.
-
-For example:
-
-```ts
-import { MyButton as Btn } from 'foo';
-```
-
-Apply following configurations:
-
-```ts
-PluginSWC({
-  extensions: {
-    pluginImport: [
-      {
-        libraryName: 'foo',
-        customName: 'foo/es/{{ member }}',
-      },
-    ],
-  },
-});
-```
-
-`{{ member }}` will be replaced by the imported specifier:
-
-```ts
-import Btn from 'foo/es/MyButton';
-```
-
-Template `customName: 'foo/es/{{ member }}'` is the same as `` customName: (member) => `foo/es/${member}`  ``, but template value has no performance overhead of Node-API.
-
-The template used here is [handlebars](https://handlebarsjs.com). There are some useful builtin tools, Take the above import statement as an example:
-
-```ts
-PluginSWC({
-  extensions: {
-    pluginImport: [
-      {
-        libraryName: 'foo',
-        customName: 'foo/es/{{ kebabCase member }}',
-      },
-    ],
-  },
-});
-```
-
-Transformed to:
-
-```ts
-import Btn from 'foo/es/my-button';
-```
-
-In addition to `kebabCase`, there are `cameraCase`, `snakeCase`, `upperCase` and `lowerCase` can be used as well.
-
-## Limitation
-
-Do not support `@babel/plugin-transform-runtime` and other custom Babel plugins.

package/docs/en/plugin/official/cli-plugins/plugin-tailwind.mdx

@@ -1,5 +0,0 @@
-# Tailwind CSS Plugin
-
-Tailwind CSS is a utility-first CSS framework and design system that allows you to quickly add commonly used styles to components while supporting flexible theme style extensions.
-
-For more details, refer to [Using Tailwind CSS](/guides/basic-features/css/tailwindcss).

package/docs/en/plugin/official/rsbuild-plugins/_meta.json

@@ -1 +0,0 @@
-["plugin-esbuild"]