@modern-js/module-tools-docs 2.0.2 → 2.2.0-beta.0

package/doc_build/static/js/async/en_guide_basic_using-storybook.js

@@ -16,16 +16,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js");
 /* harmony import */ var _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../node_modules/.pnpm/@code-hike+mdx@0.7.4_react@18.2.0/node_modules/@code-hike/mdx/dist/components.esm.mjs");
 /*@jsxRuntime automatic @jsxImportSource react*/
-/*链接待补充*/
 
 
-var CH = {
+const CH = {
   annotations: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.annotations,
   Spotlight: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Spotlight,
   CodeSlot: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.CodeSlot,
   Code: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Code
 };
-var chCodeConfig = {
+const chCodeConfig = {
   "staticMediaQuery": "not screen, (max-width: 768px)",
   "theme": {
     "name": "nord",
@@ -1188,12 +1187,12 @@ var chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/using-storybook.mdx"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/basic/using-storybook.mdx"
 };
-var frontmatter = {
+const frontmatter = {
   "sidebar_position": 5
 };
-var toc = [{
+const toc = [{
   "id": "debugging-code",
   "text": "Debugging code",
   "depth": 2
@@ -1209,23 +1208,15 @@ var toc = [{
   "id": "configure-storybook",
   "text": "Configure Storybook",
   "depth": 2
-}, {
-  "id": "configuration-file",
-  "text": "Configuration file",
-  "depth": 3
-}, {
-  "id": "devstorybook",
-  "text": "dev.storybook",
-  "depth": 3
 }, {
   "id": "building-storybook-products",
   "text": "Building Storybook Products",
-  "depth": 3
+  "depth": 2
 }];
-var title = "Using Storybook";
-var content = "\"---\\nsidebar_position: 5\\n---\\n\\n# Using Storybook\\n\\nFirst of all, if you haven't read the following, take a few minutes to understand it first.\\n\\n- [use micro-generator to enable Storybook debugging](/en/guide/basic/use-micro-generator#storybook-debug)\\n- [`modern dev`](/en/guide/basic/command-preview#modern-dev)\\n\\n[Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.\\n\\n- Develop UIs that are more durable\\n- Test UIs with less effort and no flakes\\n- Document UI for your team to reuse\\n- Share how the UI actually works\\n- Automate UI workflows\\n\\nSo it is a complex and powerful tool.\\n\\nThe modular engineering solution is integrated with Storybook, so you can pretty much follow the official Storybook documentation. However, there are still a few things to keep in mind, which are explained below.\\n\\n## Debugging code\\n\\nComponent code needs to be introduced during debugging code, and currently component code can be introduced in two ways:\\n\\n- Referencing the component product\\n- Referencing component source code\\n\\nWe recommend the first way of \\\"**referencing component product**\\\". Because it is almost close to the real usage scenario, not only can we debug the component functionality, but also verify the correctness of the build product.\\n\\nNext, we will talk about how to use each of these two methods.\\n\\n### Referencing component products\\n\\nIf the TypeScript project `foo` exists.\\n\\n<CH.Spotlight>\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\nMake sure the `main` and `types` of `package.json`\\nvalues are real paths.\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\nThe source code of the `foo` project.\\n\\n```typescript src/index.ts\\nexport const content = 'hello world';\\n```\\n\\n---\\n\\nMake sure that the `paths` configuration pointing to the project root is set in `stories/tsconfig.json`.\\nThe `key` of `paths` is the same as the project name.\\n\\n```json stories/tsconfig.json focus=7:9\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"include\\\": [\\\"./\\\"],\\n  \\\"compilerOptions\\\": {\\n    \\\"jsx\\\": \\\"preserve\\\",\\n    \\\"baseUrl\\\": \\\".\\\",\\n    \\\"paths\\\": {\\n      \\\"foo\\\": [\\\"../\\\"]\\n    }\\n  }\\n}\\n```\\n\\n---\\n\\nFinally, it is referenced directly in the Story code by the project name.\\n\\n```tsx stories/index.stories.tsx focus=1:1\\nimport { content } from 'foo';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\nIf, during development, you encounter a situation where the type definition is not available in real time, at that point.\\n\\nFor `pnpm` projects, `package.json` can be modified as follows.\\n\\n```ts focus=4:7\\n{\\n    \\\"name\\\": \\\"foo\\\",\\n    \\\"main\\\": \\\"./dist/index.js\\\",\\n    \\\"types\\\": \\\"./src/index.ts\\\",\\n    \\\"publishConfig\\\": {\\n      \\\"types\\\": \\\"./dist/index.d.ts\\\",\\n    }\\n}\\n```\\n\\n> For the use of pnpm's `publishConfig`, you can read the following [link](https://pnpm.io/package_json#publishconfig).\\n\\nFor npm and Yarn projects, the values of `types` of `package.json` can only be changed manually in **development phase** and **release phase**.\\n\\nSo why is it possible to reference the product directly?\\n\\n1. the `modern build` command is executed automatically before the `modern dev storybook` command, ensuring the existence of the project build product.\\n2. The project name is added as an alias inside Storybook to ensure that the path to the project's product can be parsed **according to `package.json`**.\\n\\n### Referencing component source code\\n\\nReferencing component source code can be done by means of relative paths to:\\n\\n```ts ./stories/index.tsx\\nimport { content } from '../src';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\nSo why is the source code approach not recommended?\\n\\nNot only is it impossible to verify that the component product is correct using the component source code, **but also some of the configurations supported by the module project for building the product cannot be fully translated into Storybook internal configuration**. If some of the configurations cannot be converted to each other, there will be unintended results during Storybook debugging.\\n\\n## Configure Storybook\\n\\n### Configuration file\\n\\nStorybook is officially configured for projects through a folder called `.storybook`, which contains various configuration files. **In a module project scenario, Storybook configuration files can be added to the `config/storybook` directory of the project.**\\n\\nFor more information on how to use the various Storybook configuration files, see the following links:\\n\\n- [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)\\n\\n**But there are some limitations to Storybooking in a module project**:\\n\\n- It is currently not possible to change the location of the Story file, i.e., you cannot change the `stories` configuration in the `main.js` file.\\n- Currently you cannot modify Webpack and Babel related configuration, i.e. you cannot modify `webpackFinal` and `babel` configuration in the `main.js` file.\\n\\nIn the future we will consider whether these configurations can be allowed to be modified, but for now we are limiting their use to reduce unpredictable issues.\\n\\n### `dev.storybook`\\n\\nIn addition to the configuration file, the module engineering solution also provides a `dev.storybook` configuration item in the `modern.config.(j|t)s` project configuration file.\\n\\nThe webpack configuration of Storybook can be modified via this configuration.\\n\\n{/* 链接待补充 */}\\n\\n- `dev.storybook.webpack`\\n\\n### Building Storybook Products\\n\\nIn addition to Storybook debugging of components or common modules, you can also perform Storybook build tasks with the following commands.\\n\\n```bash\\nmodern build --platform storybook\\n```\\n\\nFor the `modern build --platform` command you can see.\\n\\n- [`modern build`](/en/guide/basic/command-preview#modern-build)\\n\\nAfter the build is complete, you can see the build product files in the `dist/storybook-static` directory.\\n\"";
+const title = `Using Storybook`;
+const content = "\"---\\nsidebar_position: 5\\n---\\n\\n# Using Storybook\\n\\nFirst of all, if you haven't read the following, take a few minutes to understand it first.\\n\\n- [use micro-generator to enable Storybook debugging](/en/guide/basic/use-micro-generator#storybook-debug)\\n- [`modern dev`](/en/guide/basic/command-preview#modern-dev)\\n\\n[Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.\\n\\n- Develop UIs that are more durable\\n- Test UIs with less effort and no flakes\\n- Document UI for your team to reuse\\n- Share how the UI actually works\\n- Automate UI workflows\\n\\nSo it is a complex and powerful tool.\\n\\nThe modular engineering solution is integrated with Storybook, so you can pretty much follow the official Storybook documentation. However, there are still a few things to keep in mind, which are explained below.\\n\\n## Debugging code\\n\\nComponent code needs to be introduced during debugging code, and currently component code can be introduced in two ways:\\n\\n- Referencing the component product\\n- Referencing component source code\\n\\nWe recommend the first way of \\\"**referencing component product**\\\". Because it is almost close to the real usage scenario, not only can we debug the component functionality, but also verify the correctness of the build product.\\n\\nNext, we will talk about how to use each of these two methods.\\n\\n### Referencing component products\\n\\nIf the TypeScript project `foo` exists.\\n\\n<CH.Spotlight>\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\nMake sure the `main` and `types` of `package.json`\\nvalues are real paths.\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"foo\\\",\\n  \\\"main\\\": \\\"./dist/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\nThe source code of the `foo` project.\\n\\n```typescript src/index.ts\\nexport const content = 'hello world';\\n```\\n\\n---\\n\\nMake sure that the `paths` configuration pointing to the project root is set in `stories/tsconfig.json`.\\nThe `key` of `paths` is the same as the project name.\\n\\n```json stories/tsconfig.json focus=7:9\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"include\\\": [\\\"./\\\"],\\n  \\\"compilerOptions\\\": {\\n    \\\"jsx\\\": \\\"preserve\\\",\\n    \\\"baseUrl\\\": \\\".\\\",\\n    \\\"paths\\\": {\\n      \\\"foo\\\": [\\\"../\\\"]\\n    }\\n  }\\n}\\n```\\n\\n---\\n\\nFinally, it is referenced directly in the Story code by the project name.\\n\\n```tsx stories/index.stories.tsx focus=1:1\\nimport { content } from 'foo';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\nIf, during development, you encounter a situation where the type definition is not available in real time, at that point.\\n\\nFor `pnpm` projects, `package.json` can be modified as follows.\\n\\n```ts focus=4:7\\n{\\n    \\\"name\\\": \\\"foo\\\",\\n    \\\"main\\\": \\\"./dist/index.js\\\",\\n    \\\"types\\\": \\\"./src/index.ts\\\",\\n    \\\"publishConfig\\\": {\\n      \\\"types\\\": \\\"./dist/index.d.ts\\\",\\n    }\\n}\\n```\\n\\n> For the use of pnpm's `publishConfig`, you can read the following [link](https://pnpm.io/package_json#publishconfig).\\n\\nFor npm and Yarn projects, the values of `types` of `package.json` can only be changed manually in **development phase** and **release phase**.\\n\\nSo why is it possible to reference the product directly?\\n\\n1. the `modern build` command is executed automatically before the `modern dev storybook` command, ensuring the existence of the project build product.\\n2. The project name is added as an alias inside Storybook to ensure that the path to the project's product can be parsed **according to `package.json`**.\\n\\n### Referencing component source code\\n\\nReferencing component source code can be done by means of relative paths to:\\n\\n```ts ./stories/index.tsx\\nimport { content } from '../src';\\n\\nconst Component = () => <div>this is a Story Component {content}</div>;\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\nSo why is the source code approach not recommended?\\n\\nNot only is it impossible to verify that the component product is correct using the component source code, **but also some of the configurations supported by the module project for building the product cannot be fully translated into Storybook internal configuration**. If some of the configurations cannot be converted to each other, there will be unintended results during Storybook debugging.\\n\\n## Configure Storybook\\n\\nStorybook is officially configured for projects through a folder called `.storybook`, which contains various configuration files. **In a module project scenario, Storybook configuration files can be added to the `config/storybook` directory of the project.**\\n\\nFor more information on how to use the various Storybook configuration files, see the following links:\\n\\n- [Configure Storybook](https://storybook.js.org/docs/react/configure/overview)\\n\\n**But there are some limitations to Storybooking in a module project**:\\n\\n- It is currently not possible to change the location of the Story file, i.e., you cannot change the `stories` configuration in the `main.js` file.\\n- Currently you cannot modify Webpack and Babel related configuration, i.e. you cannot modify `webpackFinal` and `babel` configuration in the `main.js` file.\\n\\nIn the future we will consider whether these configurations can be allowed to be modified, but for now we are limiting their use to reduce unpredictable issues.\\n\\n## Building Storybook Products\\n\\nIn addition to Storybook debugging of components or common modules, you can also perform Storybook build tasks with the following commands.\\n\\n```bash\\nmodern build --platform storybook\\n```\\n\\nFor the `modern build --platform` command you can see.\\n\\n- [`modern build`](/en/guide/basic/command-preview#modern-build)\\n\\nAfter the build is complete, you can see the build product files in the `dist/storybook-static` directory.\\n\"";
 function _createMdxContent(props) {
-  var _components = Object.assign({
+  const _components = Object.assign({
     h1: "h1",
     a: "a",
     p: "p",
@@ -1256,12 +1247,12 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/basic/use-micro-generator#storybook-debug.html",
+          href: "/module-tools/en/guide/basic/use-micro-generator.html#storybook-debug",
           children: "use micro-generator to enable Storybook debugging"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/basic/command-preview#modern-dev.html",
+          href: "/module-tools/en/guide/basic/command-preview.html#modern-dev-3",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "modern dev"
           })
@@ -1270,6 +1261,8 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         href: "https://storybook.js.org/",
+        target: "_blank",
+        rel: "nofollow",
         children: "Storybook"
       }), " is a tool dedicated to component debugging, providing around component development."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
@@ -4022,7 +4015,9 @@ function _createMdxContent(props) {
         children: ["For the use of pnpm's ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "publishConfig"
         }), ", you can read the following ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "https://pnpm.io/package_json#publishconfig",
+          href: "https://pnpm.io/package_json#publishconfig-1",
+          target: "_blank",
+          rel: "nofollow",
           children: "link"
         }), "."]
       }), "\n"]
@@ -4614,14 +4609,6 @@ function _createMdxContent(props) {
         href: "#configure-storybook",
         children: "#"
       }), "Configure Storybook"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
-      id: "configuration-file",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#configuration-file",
-        children: "#"
-      }), "Configuration file"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["Storybook is officially configured for projects through a folder called ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
         children: ".storybook"
@@ -4636,6 +4623,8 @@ function _createMdxContent(props) {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://storybook.js.org/docs/react/configure/overview",
+          target: "_blank",
+          rel: "nofollow",
           children: "Configure Storybook"
         })
       }), "\n"]
@@ -4661,31 +4650,7 @@ function _createMdxContent(props) {
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
       children: "In the future we will consider whether these configurations can be allowed to be modified, but for now we are limiting their use to reduce unpredictable issues."
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
-      id: "devstorybook",
-      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        className: "header-anchor",
-        "aria-hidden": "true",
-        href: "#devstorybook",
-        children: "#"
-      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "dev.storybook"
-      })]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
-      children: ["In addition to the configuration file, the module engineering solution also provides a ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "dev.storybook"
-      }), " configuration item in the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-        children: "modern.config.(j|t)s"
-      }), " project configuration file."]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.p, {
-      children: "The webpack configuration of Storybook can be modified via this configuration."
-    }), "\n", "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
-      children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
-        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
-          children: "dev.storybook.webpack"
-        })
-      }), "\n"]
-    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h3, {
+    }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
       id: "building-storybook-products",
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
         className: "header-anchor",
@@ -4727,7 +4692,7 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/basic/command-preview#modern-build.html",
+          href: "/module-tools/en/guide/basic/command-preview.html#modern-build-1",
           children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
             children: "modern build"
           })
@@ -4740,21 +4705,17 @@ function _createMdxContent(props) {
     })]
   });
 }
-function MDXContent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = props.components || {},
-    MDXLayout = _ref.wrapper;
+function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
   return MDXLayout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MDXLayout, Object.assign({}, props, {
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_createMdxContent, props)
   })) : _createMdxContent(props);
 }
-_c = MDXContent;
 /* harmony default export */ __webpack_exports__["default"] = (MDXContent);
 function _missingMdxReference(id, component, place) {
-  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/bytedance/modern.js/website/module-tools/docs/en/guide/basic/using-storybook.mdx`" : ""));
+  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/basic/using-storybook.mdx`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })
 

package/doc_build/static/js/async/en_guide_basic_using-storybook.js.map

@@ -1 +1 @@
-{"version":3,"file":"static/js/async/en_guide_basic_using-storybook.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAEA;;;;;AAEA;;;;;;;;;;;;;AAGA;AAAA;;;AAEA;;AACA;;AACA;;AACA;;AACA;;;AAEA;;AAEA;;;;;;;;AAEA;;AAEA;;;AAEA;;AACA;;;AAEA;AAAA;AAAA;;AAEA;;;;;;;;AAEA;;AAEA;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;AAAA;;AAAA;;AAAA;;;;AAaA;;AAAA;;;;AAQA;;AAAA;;AAAA;;AACA;;AAAA;;;;AAkBA;;;;AAgBA;;AAEA;;AAAA;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAAA;;AAAA;AAAA;;;AAEA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;AAEA;;AAAA;;AAAA;;AACA;AAAA;;;AAAA;;;;;;;;;AAEA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;AAEA;AAAA;AAAA;;;;;;;;AAEA;;;;;;;;AAEA;;AAEA;;AAAA;AAAA;;AAAA;;;AAEA;;;;;AAEA;;;;;AAEA;AAAA;;;AAEA;;AAAA;;AAAA;;AACA;;AAAA;;AAAA;;AAAA;;;AAEA;;;;;;;;;;;;AAIA;;AAAA;;AAAA;;AAEA;;;;;;;;;;;;;;AAMA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;AAAA;;;;;;;;;;;AAIA;;AAAA","sources":["webpack://@modern-js/module-tools-docs/./docs/en/guide/basic/using-storybook.mdx"],"names":[],"sourceRoot":""}
+{"version":3,"file":"static/js/async/en_guide_basic_using-storybook.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAEA;;;;;AAEA;;;;;;;;;;;;;;;AAGA;AAAA;;;AAEA;;AACA;;AACA;;AACA;;AACA;;;AAEA;;AAEA;;;;;;;;AAEA;;AAEA;;;AAEA;;AACA;;;AAEA;AAAA;AAAA;;AAEA;;;;;;;;AAEA;;AAEA;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;AAAA;;AAAA;;AAAA;;;;AAaA;;AAAA;;;;AAQA;;AAAA;;AAAA;;AACA;;AAAA;;;;AAkBA;;;;AAgBA;;AAEA;;AAAA;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAAA;;;;AAAA;AAAA;;;AAEA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;;AAEA;;AAAA;;AAAA;;AACA;AAAA;;;AAAA;;;;;;;;;AAEA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;AAEA;AAAA;AAAA;;;;;;;;AAEA;;AAEA;;AAAA;AAAA;;AAAA;;;AAEA;;;;;;;AAEA;;;;;AAEA;AAAA;;;AAEA;;AAAA;;AAAA;;AACA;;AAAA;;AAAA;;AAAA;;;AAEA;;;;;;;;AAEA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;AAAA;;;;;;;;;;;AAIA;;AAAA","sources":["webpack://@modern-js/module-tools-docs/./docs/en/guide/basic/using-storybook.mdx"],"names":[],"sourceRoot":""}

package/doc_build/static/js/async/en_guide_best-practices_components.js

@@ -18,13 +18,13 @@ __webpack_require__.r(__webpack_exports__);
 /*@jsxRuntime automatic @jsxImportSource react*/
 
 
-var CH = {
+const CH = {
   annotations: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.annotations,
   Spotlight: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Spotlight,
   CodeSlot: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.CodeSlot,
   Code: _code_hike_mdx_dist_components_cjs_js__WEBPACK_IMPORTED_MODULE_1__.Code
 };
-var chCodeConfig = {
+const chCodeConfig = {
   "staticMediaQuery": "not screen, (max-width: 768px)",
   "theme": {
     "name": "nord",
@@ -1187,10 +1187,10 @@ var chCodeConfig = {
   "autoImport": true,
   "showCopyButton": true,
   "skipLanguages": [],
-  "filepath": "/Users/bytedance/modern.js/website/module-tools/docs/en/guide/best-practices/components.mdx"
+  "filepath": "/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/best-practices/components.mdx"
 };
-var frontmatter = undefined;
-var toc = [{
+const frontmatter = undefined;
+const toc = [{
   "id": "debugging-code-with-storybook",
   "text": "Debugging code with Storybook",
   "depth": 2
@@ -1247,10 +1247,10 @@ var toc = [{
   "text": "Releasing components",
   "depth": 2
 }];
-var title = "# Initialize the project";
-var content = "\"# Developing Components\\n\\nThis chapter will describe how to develop component projects using the module engineering solution.\\n\\n# # Initialize the project\\n\\n<CH.Spotlight>\\n\\n```bash Interactive questions\\nnpx @modern-js/create components-project\\n\\n? Please select the solution you want to create Module Solution\\n? Package Name components-demo\\n? Development Language TS\\n? Package Management Tool pnpm\\n```\\n\\n---\\n\\nIt is recommended to use the `@modern-js/create` command to initialize an npm project.\\n\\n```bash Interactive questions\\nnpx @modern-js/create components-project\\n\\n? Please select the solution you want to create Module Solution\\n? Package Name components-demo\\n? Development Language TS\\n? Package Management Tool pnpm\\n```\\n\\n---\\n\\nThe initialized directory structure.\\n\\n```bash The initialized directory structure\\n.\\n├── README.md\\n├── node_modules/\\n├── dist/\\n├── modern.config.ts\\n├── package.json\\n├── pnpm-lock.yaml\\n├── src\\n│   ├── index.ts\\n│   └── modern-app-env.d.ts\\n└── tsconfig.json\\n```\\n\\n---\\n\\nModify the `. /src/index.ts` file suffix and content.\\n\\nAt this point, a component project is initialized.\\n\\n```tsx ./src/index.tsx\\nexport default () => {\\n  return <div>hello world</div>;\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n## Debugging code with Storybook\\n\\n<CH.Spotlight>\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nExecute the `new` command in the project root directory to enable the Storybook feature.\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nOnce successfully opened, you will see that a new dependency has been added to `package.json`. The `stories` directory and related initialization files are also created.\\n\\n<CH.Code>\\n\\n```json ./package.json focus=4:7\\n{\\n  \\\"name\\\": \\\"components-demo\\\",\\n  \\\"devDependencies\\\": {\\n    \\\"@modern-js/plugin-storybook\\\": \\\"x.y.z\\\",\\n    \\\"@modern-js/runtime\\\": \\\"x.y.z\\\",\\n    \\\"react\\\": \\\"^17\\\",\\n    \\\"react-dom\\\": \\\"^17\\\"\\n  }\\n}\\n```\\n\\n```bash Directory Structure\\n.\\n├── src\\n│   ├── index.ts\\n│   └── modern-app-env.d.ts\\n├── stories\\n│   ├── .eslintrc.js\\n│   ├── index.stories.tsx\\n│   └── tsconfig.json\\n```\\n\\n</CH.Code>\\n\\n---\\n\\nAfter initialization, the `tsconfig.json` file in the `. /stories` directory, the `tsconfig.json` file is set by default with the `paths` configuration of the same name as the project.\\n\\n```json ./stories/tsconfig.json focus=5:7\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"compilerOptions\\\": {\\n    \\\"baseUrl\\\": \\\"../\\\",\\n    \\\"paths\\\": {\\n      \\\"components-demo\\\": [\\\"./\\\"],\\n      \\\"components-demo/*\\\": [\\\"./*\\\"]\\n    }\\n  },\\n  \\\"include\\\": [\\\"**/*\\\"]\\n}\\n```\\n\\n---\\n\\nSuch a configuration allows you to introduce code in Story code directly using the name of the project.\\n\\n<CH.Code>\\n\\n```tsx ./stories/index.stories.tsx\\nimport Component from 'components-demo';\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n---\\n\\n```tsx ./src/index.tsx\\nexport default () => {\\n  return <div>hello world</div>;\\n};\\n```\\n\\n</CH.Code>\\n\\n---\\n\\nAt this point Storybook identifies the entry point for the imported code based on fields like `main`, `exports` in the project's `package.json` file.\\nThe location of the type file is determined by the `types` field.\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"components-demo\\\",\\n  \\\"main\\\": \\\"./dist/esm/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\nWhile importing source code for debugging is also supported, debugging using project artifacts is more reliable.\\n\\nDebugging with source code has a limitation: some configurations are not equivalent in Storybook and in the original build support.\\n\\n**This is why debugging with the product is recommended**.\\n\\n```tsx ./stories/index.stories.tsx\\nimport Component from '../src';\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n## Developing Styles\\n\\nNext we can add styles to the component.\\n\\nThe following capabilities are currently supported for developing styles.\\n\\n- CSS/PostCSS\\n- Less\\n- Scss/Sass\\n- Tailwind CSS\\n- CSS Modules\\n\\n### CSS/PostCSS\\n\\nThe module project supports PostCSS and has the following built-in postcss plugins.\\n\\n- [flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)\\n- [custom-properties](https://github.com/postcss/postcss-custom-properties)\\n- [initial](https://github.com/maximkoretskiy/postcss-initial)\\n- [page-break](https://github.com/shrpne/postcss-page-break)\\n- [font-variant](https://github.com/postcss/postcss-font-variant)\\n- [media-minmax](https://github.com/postcss/postcss-media-minmax)\\n- [nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme)\\n\\nSo we can create `.css` files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files.\\n\\n<CH.Spotlight>\\n\\n```css ./src/index.css\\na,\\nb {\\n  color: red;\\n\\n  /* \\\"&\\\" comes first */\\n  & c,\\n  & d {\\n    color: white;\\n  }\\n\\n  /* \\\"&\\\" comes later, requiring \\\"@nest\\\" */\\n  @nest e & {\\n    color: yellow;\\n  }\\n}\\n```\\n\\n---\\n\\nSource Code.\\n\\n```css ./src/index.css\\n\\n```\\n\\n---\\n\\ncss product.\\n\\n```css ./dist/es/index.css\\na,\\nb {\\n  color: red;\\n}\\na c,\\nb c,\\na d,\\nb d {\\n  color: white;\\n}\\ne a,\\ne b {\\n  color: yellow;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Less\\n\\nModule projects support development styles using Less.\\n\\n> Currently supported version is 4.1.3\\n\\n<CH.Spotlight>\\n\\n```less ./src/common.less\\n@bg: black;\\n@bg-light: boolean(luma(@bg) > 50%);\\n\\ndiv {\\n  background: @bg;\\n  color: if(@bg-light, black, white);\\n}\\n```\\n\\n---\\n\\nSource Code.\\n\\n```less ./src/common.less\\n\\n```\\n\\n---\\n\\nLess product.\\n\\n```css ./dist/es/common.css\\ndiv {\\n  background: black;\\n  color: white;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Sass/Scss\\n\\nModule projects support developing styles using Scss/Sass.\\n\\n> Currently supported version is 1.54.4\\n\\n<CH.Spotlight>\\n\\n```sass ./src/common.sass\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n\\nbody {\\n  font: 100% $font-stack;\\n  color: $primary-color;\\n}\\n```\\n\\n---\\n\\n源代码。\\n\\n```sass ./src/common.sass\\n\\n```\\n\\n---\\n\\nLess product.\\n\\n```css ./dist/es/common.css\\nbody {\\n  font: 100% Helvetica, sans-serif;\\n  color: #333;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Tailwind CSS\\n\\nThe module project supports the development of component styles using Tailwind CSS.\\n\\nBy default, this feature is not enabled in the module project, you need to enable it as follows.\\n\\n<CH.Spotlight>\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nThe Tailwind CSS feature can be enabled by executing the `new` command in the project root directory.\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Tailwind CSS\\n```\\n\\n---\\n\\nOnce successfully opened, you will see that a new dependency has been added to `package.json`.\\n\\n```json ./package.json\\n{\\n  \\\"devDependencies\\\": {\\n    \\\"@modern-js/plugin-tailwindcss\\\": \\\"x.y.z\\\"\\n  }\\n}\\n```\\n\\n</CH.Spotlight>\\n\\nTailwind CSS offers two ways to use it.\\n\\n#### HTML class\\n\\n<CH.Spotlight>\\n\\n```tsx ./src/index.tsx\\nimport 'tailwindcss/utilities.css';\\n\\nexport default () => {\\n  return <div className=\\\"bg-black text-white\\\">hello world</div>;\\n};\\n```\\n\\n---\\n\\nTailwind CSS supports adding styles to HTML tags by using class names.\\n\\n```tsx ./src/index.tsx focus=5:5\\n\\n```\\n\\n---\\n\\n**When using HTML class names, be sure to import the Tailwind CSS equivalent css file. **\\n\\n```tsx ./src/index.tsx focus=1:1\\n\\n```\\n\\n---\\n\\nStyle product.\\n\\n> This is a bundle build.\\n\\n```css ./dist/es/index.css\\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\\n.table {\\n  display: table;\\n}\\n@keyframes spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n@keyframes ping {\\n  75%,\\n  100% {\\n    transform: scale(2);\\n    opacity: 0;\\n  }\\n}\\n@keyframes pulse {\\n  50% {\\n    opacity: 0.5;\\n  }\\n}\\n@keyframes bounce {\\n  0%,\\n  100% {\\n    transform: translateY(-25%);\\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\\n  }\\n  50% {\\n    transform: none;\\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n  }\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\\n}\\n.text-white {\\n  --tw-text-opacity: 1;\\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\\n}\\n*,\\n::before,\\n::after {\\n  --tw-shadow: 0 0 #0000;\\n}\\n*,\\n::before,\\n::after {\\n  --tw-ring-inset: var(--tw-empty);\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n}\\n@media (min-width: 640px) {\\n}\\n@media (min-width: 768px) {\\n}\\n@media (min-width: 1024px) {\\n}\\n@media (min-width: 1280px) {\\n}\\n@media (min-width: 1536px) {\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n#### `@apply`\\n\\nTailwind CSS provides the [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) directive, which allows us to inline the styles provided by Tailwind CSS into the styles we write.\\n\\n`@apply` can be used in CSS, Less, and Sass.\\n\\n```css\\n.btn {\\n  @apply font-bold py-2 px-4 rounded;\\n}\\n```\\n\\nHowever, there are some things to keep in mind when using Less and Sass.\\n\\n##### Sass\\n\\nWhen using Tailwind with Sass, the presence of `!important` after `@apply` requires interpolation to get Sass to compile correctly.\\n\\n<CH.Spotlight>\\n\\n```sass\\n.alert {\\n  @apply bg-red-500 !important;\\n}\\n```\\n\\n---\\n\\nIt does not work properly.\\n\\n```sass\\n\\n```\\n\\n---\\n\\nCan work properly.\\n\\n```sass\\n.alert {\\n  @apply bg-red-500 #{!important};\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n##### Less\\n\\nWhen using Tailwind with Less, you cannot nest Tailwind's `@screen` directive.\\n\\n<CH.Spotlight>\\n\\n```less\\n.card {\\n  @apply rounded-none;\\n\\n  @screen sm {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n---\\n\\nIt does not work properly.\\n\\n```less\\n\\n```\\n\\n---\\n\\nInstead, use regular media queries and the `theme()` function to reference your screen size, or simply don't nest your `@screen` directive.\\n\\n<CH.Code>\\n\\n```less Method One\\n// Use a regular media query and theme()\\n.card {\\n  @apply rounded-none;\\n\\n  @media (min-width: theme('screens.sm')) {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n---\\n\\n```less Method Two\\n// Use the @screen directive at the top-level\\n.card {\\n  @apply rounded-none;\\n\\n  @media (min-width: theme('screens.sm')) {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n</CH.Code>\\n\\n</CH.Spotlight>\\n\\n#### Recommended method\\n\\n**It is recommended to develop styles in the way specified by `@apply`, so that only styles inlined by directives are included in the style product. **\\n\\nWhen adding styles using HTML class names, by default Tailwind will not only add the styles corresponding to its own class name to the product, but will also have additional style code that may not affect its own styles.\\n\\n#### The difference between bundle and bundleless build products\\n\\nFor the following code, there is a big difference between the bundle and bundleless modes of building products.\\n\\n> The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)\\n\\n```tsx ./src/index.tsx\\nimport 'tailwindcss/utilities.css';\\n\\nexport default () => {\\n  return <div className=\\\"bg-black text-white\\\">hello world11</div>;\\n};\\n```\\n\\nIn Bundle mode, third-party dependencies are packaged in.\\n\\nFor styles, a separate product file is generated, and there is no code related to importing styles in the Js product file.\\n\\nIf you need to inject styles into Js products, you can enable the [`style.inject` API](/en/api/config/build-config#inject).\\n\\n<CH.Code>\\n```css ./dist/es/index.css\\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\\n.table {\\n  display: table;\\n}\\n@keyframes spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n@keyframes ping {\\n  75%, 100% {\\n    transform: scale(2);\\n    opacity: 0;\\n  }\\n}\\n@keyframes pulse {\\n  50% {\\n    opacity: .5;\\n  }\\n}\\n@keyframes bounce {\\n  0%, 100% {\\n    transform: translateY(-25%);\\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\\n  }\\n  50% {\\n    transform: none;\\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n  }\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\\n}\\n.text-white {\\n  --tw-text-opacity: 1;\\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\\n}\\n*,\\n::before,\\n::after {\\n  --tw-shadow: 0 0 #0000 ;\\n}\\n*,\\n::before,\\n::after {\\n  --tw-ring-inset: var(--tw-empty, );\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000 ;\\n}\\n@media (min-width: 640px) {\\n}\\n@media (min-width: 768px) {\\n}\\n@media (min-width: 1024px) {\\n}\\n@media (min-width: 1280px) {\\n}\\n@media (min-width: 1536px) {\\n}\\n```\\n---\\n``` js ./dist/es/index.js\\n// src/index.tsx\\nimport { jsx } from \\\"react/jsx-runtime\\\";\\nvar src_default = () => {\\n  return /* @__PURE__ */ jsx(\\\"div\\\", {\\n    className: \\\"bg-black text-white\\\",\\n    children: \\\"hello world11\\\"\\n  });\\n};\\nexport {\\n  src_default as default\\n};\\n```\\n</CH.Code>\\n\\nIn Bundleless mode, no third-party dependencies are packaged in, and no style products are generated at this time.\\n\\n```js ./dist/es/index.js\\nimport { jsx } from 'react/jsx-runtime';\\nimport 'tailwindcss/utilities.css';\\nvar src_default = () => {\\n  return /* @__PURE__ */ jsx('div', {\\n    className: 'bg-black text-white',\\n    children: 'hello world11',\\n  });\\n};\\nexport { src_default as default };\\n```\\n\\n### CSS Modules\\n\\nModule projects support the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files.\\n\\n- `.module.css`\\n- `.module.less`\\n- `.module.scss`\\n- `.module.sass`\\n\\nIf you need to configure CSS Modules, you can check out the API at\\n\\n- [autoModules](en/api/config/build-config#automodules)\\n- [modules](/en/api/config/build-config#modules)\\n\\nThe following is a code example.\\n\\n<CH.Code>\\n\\n```tsx ./src/index.tsx\\nimport style from './index.module.css';\\n\\nexport default () => {\\n  return <div className={style.btn}>hello world</div>;\\n};\\n```\\n\\n```css ./src/index.module.css\\n.btn {\\n  color: blue;\\n}\\n```\\n\\n</CH.Code>\\n\\n## Configuring build products\\n\\nBased on most scenarios of component project usage, **it is recommended to use the `npm-component` build preset**. This preset yields a product directory structure of\\n\\n```bash\\n.\\n├── dist\\n│   ├── es\\n│   ├── lib\\n│   └── types\\n```\\n\\n- `. /dist/es`: Contains bundleless products in ES modules format that support the es6 syntax.\\n- `. /dist/lib`: Contains bundleless products in CommonJS format with support for es6 syntax.\\n- `. /dist/types`: Contains the types file.\\n\\nThe [`buildPreset`](/en/api/config/build-preset) can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to `npm-component`.\\n\\n```tsx\\nexport default defineConfig({\\n  buildPreset: 'npm-component-es2019',\\n});\\n```\\n\\nIf you have special needs for the build product directory structure, you can use the [`buildConfig` API](/en/api/config/build-config), which can be used by the following documentation.\\n\\n- [modify-output-product](/en/guide/basic/modify-output-product#build-configuration-object)\\n- [in-depth-about-build](/en/guide/advance/in-depth-about-build)\\n\\n## Testing components\\n\\nFor more information on how to test components, please refer to [[Test project]](/en/guide/basic/test-your-project).\\n\\n## Releasing components\\n\\nIt is recommended to use module project to provide version publishing function, you can refer to [[Versioning and publishing]](/en/guide/basic/publish-your-project).\\n\"";
+const title = `# Initialize the project`;
+const content = "\"# Developing Components\\n\\nThis chapter will describe how to develop component projects using the module engineering solution.\\n\\n# # Initialize the project\\n\\n<CH.Spotlight>\\n\\n```bash Interactive questions\\nnpx @modern-js/create components-project\\n\\n? Please select the solution you want to create Module Solution\\n? Package Name components-demo\\n? Development Language TS\\n? Package Management Tool pnpm\\n```\\n\\n---\\n\\nIt is recommended to use the `@modern-js/create` command to initialize an npm project.\\n\\n```bash Interactive questions\\nnpx @modern-js/create components-project\\n\\n? Please select the solution you want to create Module Solution\\n? Package Name components-demo\\n? Development Language TS\\n? Package Management Tool pnpm\\n```\\n\\n---\\n\\nThe initialized directory structure.\\n\\n```bash The initialized directory structure\\n.\\n├── README.md\\n├── node_modules/\\n├── dist/\\n├── modern.config.ts\\n├── package.json\\n├── pnpm-lock.yaml\\n├── src\\n│   ├── index.ts\\n│   └── modern-app-env.d.ts\\n└── tsconfig.json\\n```\\n\\n---\\n\\nModify the `. /src/index.ts` file suffix and content.\\n\\nAt this point, a component project is initialized.\\n\\n```tsx ./src/index.tsx\\nexport default () => {\\n  return <div>hello world</div>;\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n## Debugging code with Storybook\\n\\n<CH.Spotlight>\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nExecute the `new` command in the project root directory to enable the Storybook feature.\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nOnce successfully opened, you will see that a new dependency has been added to `package.json`. The `stories` directory and related initialization files are also created.\\n\\n<CH.Code>\\n\\n```json ./package.json focus=4:7\\n{\\n  \\\"name\\\": \\\"components-demo\\\",\\n  \\\"devDependencies\\\": {\\n    \\\"@modern-js/plugin-storybook\\\": \\\"x.y.z\\\",\\n    \\\"@modern-js/runtime\\\": \\\"x.y.z\\\",\\n    \\\"react\\\": \\\"^17\\\",\\n    \\\"react-dom\\\": \\\"^17\\\"\\n  }\\n}\\n```\\n\\n```bash Directory Structure\\n.\\n├── src\\n│   ├── index.ts\\n│   └── modern-app-env.d.ts\\n├── stories\\n│   ├── .eslintrc.js\\n│   ├── index.stories.tsx\\n│   └── tsconfig.json\\n```\\n\\n</CH.Code>\\n\\n---\\n\\nAfter initialization, the `tsconfig.json` file in the `. /stories` directory, the `tsconfig.json` file is set by default with the `paths` configuration of the same name as the project.\\n\\n```json ./stories/tsconfig.json focus=5:7\\n{\\n  \\\"extends\\\": \\\"../tsconfig.json\\\",\\n  \\\"compilerOptions\\\": {\\n    \\\"baseUrl\\\": \\\"../\\\",\\n    \\\"paths\\\": {\\n      \\\"components-demo\\\": [\\\"./\\\"],\\n      \\\"components-demo/*\\\": [\\\"./*\\\"]\\n    }\\n  },\\n  \\\"include\\\": [\\\"**/*\\\"]\\n}\\n```\\n\\n---\\n\\nSuch a configuration allows you to introduce code in Story code directly using the name of the project.\\n\\n<CH.Code>\\n\\n```tsx ./stories/index.stories.tsx\\nimport Component from 'components-demo';\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n---\\n\\n```tsx ./src/index.tsx\\nexport default () => {\\n  return <div>hello world</div>;\\n};\\n```\\n\\n</CH.Code>\\n\\n---\\n\\nAt this point Storybook identifies the entry point for the imported code based on fields like `main`, `exports` in the project's `package.json` file.\\nThe location of the type file is determined by the `types` field.\\n\\n```json package.json\\n{\\n  \\\"name\\\": \\\"components-demo\\\",\\n  \\\"main\\\": \\\"./dist/esm/index.js\\\",\\n  \\\"types\\\": \\\"./dist/types/index.d.ts\\\"\\n}\\n```\\n\\n---\\n\\nWhile importing source code for debugging is also supported, debugging using project artifacts is more reliable.\\n\\nDebugging with source code has a limitation: some configurations are not equivalent in Storybook and in the original build support.\\n\\n**This is why debugging with the product is recommended**.\\n\\n```tsx ./stories/index.stories.tsx\\nimport Component from '../src';\\n\\nexport const YourStory = () => <Component />;\\n\\nexport default {\\n  title: 'Your Stories',\\n};\\n```\\n\\n</CH.Spotlight>\\n\\n## Developing Styles\\n\\nNext we can add styles to the component.\\n\\nThe following capabilities are currently supported for developing styles.\\n\\n- CSS/PostCSS\\n- Less\\n- Scss/Sass\\n- Tailwind CSS\\n- CSS Modules\\n\\n### CSS/PostCSS\\n\\nThe module project supports PostCSS and has the following built-in postcss plugins.\\n\\n- [flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)\\n- [custom-properties](https://github.com/postcss/postcss-custom-properties)\\n- [initial](https://github.com/maximkoretskiy/postcss-initial)\\n- [page-break](https://github.com/shrpne/postcss-page-break)\\n- [font-variant](https://github.com/postcss/postcss-font-variant)\\n- [media-minmax](https://github.com/postcss/postcss-media-minmax)\\n- [nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme)\\n\\nSo we can create `.css` files in our projects and use the syntax support and capabilities provided by these plugins directly in our css files.\\n\\n<CH.Spotlight>\\n\\n```css ./src/index.css\\na,\\nb {\\n  color: red;\\n\\n  /* \\\"&\\\" comes first */\\n  & c,\\n  & d {\\n    color: white;\\n  }\\n\\n  /* \\\"&\\\" comes later, requiring \\\"@nest\\\" */\\n  @nest e & {\\n    color: yellow;\\n  }\\n}\\n```\\n\\n---\\n\\nSource Code.\\n\\n```css ./src/index.css\\n\\n```\\n\\n---\\n\\ncss product.\\n\\n```css ./dist/es/index.css\\na,\\nb {\\n  color: red;\\n}\\na c,\\nb c,\\na d,\\nb d {\\n  color: white;\\n}\\ne a,\\ne b {\\n  color: yellow;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Less\\n\\nModule projects support development styles using Less.\\n\\n> Currently supported version is 4.1.3\\n\\n<CH.Spotlight>\\n\\n```less ./src/common.less\\n@bg: black;\\n@bg-light: boolean(luma(@bg) > 50%);\\n\\ndiv {\\n  background: @bg;\\n  color: if(@bg-light, black, white);\\n}\\n```\\n\\n---\\n\\nSource Code.\\n\\n```less ./src/common.less\\n\\n```\\n\\n---\\n\\nLess product.\\n\\n```css ./dist/es/common.css\\ndiv {\\n  background: black;\\n  color: white;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Sass/Scss\\n\\nModule projects support developing styles using Scss/Sass.\\n\\n> Currently supported version is 1.54.4\\n\\n<CH.Spotlight>\\n\\n```sass ./src/common.sass\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n\\nbody {\\n  font: 100% $font-stack;\\n  color: $primary-color;\\n}\\n```\\n\\n---\\n\\n源代码。\\n\\n```sass ./src/common.sass\\n\\n```\\n\\n---\\n\\nLess product.\\n\\n```css ./dist/es/common.css\\nbody {\\n  font: 100% Helvetica, sans-serif;\\n  color: #333;\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n### Tailwind CSS\\n\\nThe module project supports the development of component styles using Tailwind CSS.\\n\\nBy default, this feature is not enabled in the module project, you need to enable it as follows.\\n\\n<CH.Spotlight>\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Visual Testing (Storybook)\\n```\\n\\n---\\n\\nThe Tailwind CSS feature can be enabled by executing the `new` command in the project root directory.\\n\\n```bash Terminal\\npnpm run new\\n\\n? Action Enable features\\n? Enable features Enable Tailwind CSS\\n```\\n\\n---\\n\\nOnce successfully opened, you will see that a new dependency has been added to `package.json`.\\n\\n```json ./package.json\\n{\\n  \\\"devDependencies\\\": {\\n    \\\"@modern-js/plugin-tailwindcss\\\": \\\"x.y.z\\\"\\n  }\\n}\\n```\\n\\n</CH.Spotlight>\\n\\nTailwind CSS offers two ways to use it.\\n\\n#### HTML class\\n\\n<CH.Spotlight>\\n\\n```tsx ./src/index.tsx\\nimport 'tailwindcss/utilities.css';\\n\\nexport default () => {\\n  return <div className=\\\"bg-black text-white\\\">hello world</div>;\\n};\\n```\\n\\n---\\n\\nTailwind CSS supports adding styles to HTML tags by using class names.\\n\\n```tsx ./src/index.tsx focus=5:5\\n\\n```\\n\\n---\\n\\n**When using HTML class names, be sure to import the Tailwind CSS equivalent css file. **\\n\\n```tsx ./src/index.tsx focus=1:1\\n\\n```\\n\\n---\\n\\nStyle product.\\n\\n> This is a bundle build.\\n\\n```css ./dist/es/index.css\\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\\n.table {\\n  display: table;\\n}\\n@keyframes spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n@keyframes ping {\\n  75%,\\n  100% {\\n    transform: scale(2);\\n    opacity: 0;\\n  }\\n}\\n@keyframes pulse {\\n  50% {\\n    opacity: 0.5;\\n  }\\n}\\n@keyframes bounce {\\n  0%,\\n  100% {\\n    transform: translateY(-25%);\\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\\n  }\\n  50% {\\n    transform: none;\\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n  }\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\\n}\\n.text-white {\\n  --tw-text-opacity: 1;\\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\\n}\\n*,\\n::before,\\n::after {\\n  --tw-shadow: 0 0 #0000;\\n}\\n*,\\n::before,\\n::after {\\n  --tw-ring-inset: var(--tw-empty);\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n}\\n@media (min-width: 640px) {\\n}\\n@media (min-width: 768px) {\\n}\\n@media (min-width: 1024px) {\\n}\\n@media (min-width: 1280px) {\\n}\\n@media (min-width: 1536px) {\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n#### `@apply`\\n\\nTailwind CSS provides the [`@apply`](https://v2.tailwindcss.com/docs/functions-and-directives#apply) directive, which allows us to inline the styles provided by Tailwind CSS into the styles we write.\\n\\n`@apply` can be used in CSS, Less, and Sass.\\n\\n```css\\n.btn {\\n  @apply font-bold py-2 px-4 rounded;\\n}\\n```\\n\\nHowever, there are some things to keep in mind when using Less and Sass.\\n\\n##### Sass\\n\\nWhen using Tailwind with Sass, the presence of `!important` after `@apply` requires interpolation to get Sass to compile correctly.\\n\\n<CH.Spotlight>\\n\\n```sass\\n.alert {\\n  @apply bg-red-500 !important;\\n}\\n```\\n\\n---\\n\\nIt does not work properly.\\n\\n```sass\\n\\n```\\n\\n---\\n\\nCan work properly.\\n\\n```sass\\n.alert {\\n  @apply bg-red-500 #{!important};\\n}\\n```\\n\\n</CH.Spotlight>\\n\\n##### Less\\n\\nWhen using Tailwind with Less, you cannot nest Tailwind's `@screen` directive.\\n\\n<CH.Spotlight>\\n\\n```less\\n.card {\\n  @apply rounded-none;\\n\\n  @screen sm {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n---\\n\\nIt does not work properly.\\n\\n```less\\n\\n```\\n\\n---\\n\\nInstead, use regular media queries and the `theme()` function to reference your screen size, or simply don't nest your `@screen` directive.\\n\\n<CH.Code>\\n\\n```less Method One\\n// Use a regular media query and theme()\\n.card {\\n  @apply rounded-none;\\n\\n  @media (min-width: theme('screens.sm')) {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n---\\n\\n```less Method Two\\n// Use the @screen directive at the top-level\\n.card {\\n  @apply rounded-none;\\n\\n  @media (min-width: theme('screens.sm')) {\\n    @apply rounded-lg;\\n  }\\n}\\n```\\n\\n</CH.Code>\\n\\n</CH.Spotlight>\\n\\n#### Recommended method\\n\\n**It is recommended to develop styles in the way specified by `@apply`, so that only styles inlined by directives are included in the style product. **\\n\\nWhen adding styles using HTML class names, by default Tailwind will not only add the styles corresponding to its own class name to the product, but will also have additional style code that may not affect its own styles.\\n\\n#### The difference between bundle and bundleless build products\\n\\nFor the following code, there is a big difference between the bundle and bundleless modes of building products.\\n\\n> The so-called bundle and bundleless can be found in [[Bundle and Bundleless]](/en/guide/advance/in-depth-about-build#bundle- and-bundleless)\\n\\n```tsx ./src/index.tsx\\nimport 'tailwindcss/utilities.css';\\n\\nexport default () => {\\n  return <div className=\\\"bg-black text-white\\\">hello world11</div>;\\n};\\n```\\n\\nIn Bundle mode, third-party dependencies are packaged in.\\n\\nFor styles, a separate product file is generated, and there is no code related to importing styles in the Js product file.\\n\\nIf you need to inject styles into Js products, you can enable the [`style.inject` API](/en/api/config/build-config#inject).\\n\\n<CH.Code>\\n```css ./dist/es/index.css\\n/* ../../node_modules/.pnpm/tailwindcss@2.2.19/node_modules/tailwindcss/utilities.css */\\n.table {\\n  display: table;\\n}\\n@keyframes spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n@keyframes ping {\\n  75%, 100% {\\n    transform: scale(2);\\n    opacity: 0;\\n  }\\n}\\n@keyframes pulse {\\n  50% {\\n    opacity: .5;\\n  }\\n}\\n@keyframes bounce {\\n  0%, 100% {\\n    transform: translateY(-25%);\\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\\n  }\\n  50% {\\n    transform: none;\\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n  }\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\\n}\\n.text-white {\\n  --tw-text-opacity: 1;\\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\\n}\\n*,\\n::before,\\n::after {\\n  --tw-shadow: 0 0 #0000 ;\\n}\\n*,\\n::before,\\n::after {\\n  --tw-ring-inset: var(--tw-empty, );\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000 ;\\n}\\n@media (min-width: 640px) {\\n}\\n@media (min-width: 768px) {\\n}\\n@media (min-width: 1024px) {\\n}\\n@media (min-width: 1280px) {\\n}\\n@media (min-width: 1536px) {\\n}\\n```\\n---\\n``` js ./dist/es/index.js\\n// src/index.tsx\\nimport { jsx } from \\\"react/jsx-runtime\\\";\\nvar src_default = () => {\\n  return /* @__PURE__ */ jsx(\\\"div\\\", {\\n    className: \\\"bg-black text-white\\\",\\n    children: \\\"hello world11\\\"\\n  });\\n};\\nexport {\\n  src_default as default\\n};\\n```\\n</CH.Code>\\n\\nIn Bundleless mode, no third-party dependencies are packaged in, and no style products are generated at this time.\\n\\n```js ./dist/es/index.js\\nimport { jsx } from 'react/jsx-runtime';\\nimport 'tailwindcss/utilities.css';\\nvar src_default = () => {\\n  return /* @__PURE__ */ jsx('div', {\\n    className: 'bg-black text-white',\\n    children: 'hello world11',\\n  });\\n};\\nexport { src_default as default };\\n```\\n\\n### CSS Modules\\n\\nModule projects support the development of styles using CSS Modules. By default, the following files are recognized as CSS Module files.\\n\\n- `.module.css`\\n- `.module.less`\\n- `.module.scss`\\n- `.module.sass`\\n\\nIf you need to configure CSS Modules, you can check out the API at\\n\\n- [autoModules](en/api/config/build-config#automodules)\\n- [modules](/en/api/config/build-config#modules)\\n\\nThe following is a code example.\\n\\n<CH.Code>\\n\\n```tsx ./src/index.tsx\\nimport style from './index.module.css';\\n\\nexport default () => {\\n  return <div className={style.btn}>hello world</div>;\\n};\\n```\\n\\n```css ./src/index.module.css\\n.btn {\\n  color: blue;\\n}\\n```\\n\\n</CH.Code>\\n\\n## Configuring build products\\n\\nBased on most scenarios of component project usage, **it is recommended to use the `npm-component` build preset**. This preset yields a product directory structure of\\n\\n```bash\\n.\\n├── dist\\n│   ├── es\\n│   ├── lib\\n│   └── types\\n```\\n\\n- `. /dist/es`: Contains bundleless products in ES modules format that support the es6 syntax.\\n- `. /dist/lib`: Contains bundleless products in CommonJS format with support for es6 syntax.\\n- `. /dist/types`: Contains the types file.\\n\\nThe [`buildPreset`](/en/api/config/build-preset) can be configured manually if there is a requirement to use syntax support, and supports modifying the supported syntax by adding a suffix to `npm-component`.\\n\\n```tsx\\nexport default defineConfig({\\n  buildPreset: 'npm-component-es2019',\\n});\\n```\\n\\nIf you have special needs for the build product directory structure, you can use the [`buildConfig` API](/en/api/config/build-config), which can be used by the following documentation.\\n\\n- [modify-output-product](/en/guide/basic/modify-output-product#build-configuration-object)\\n- [in-depth-about-build](/en/guide/advance/in-depth-about-build)\\n\\n## Testing components\\n\\nFor more information on how to test components, please refer to [[Test project]](/en/guide/basic/test-your-project).\\n\\n## Releasing components\\n\\nIt is recommended to use module project to provide version publishing function, you can refer to [[Versioning and publishing]](/en/guide/basic/publish-your-project).\\n\"";
 function _createMdxContent(props) {
-  var _components = Object.assign({
+  const _components = Object.assign({
     h1: "h1",
     a: "a",
     p: "p",
@@ -4755,36 +4755,50 @@ function _createMdxContent(props) {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://github.com/luisrudge/postcss-flexbugs-fixes",
+          target: "_blank",
+          rel: "nofollow",
           children: "flexbugs-fixes"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://github.com/postcss/postcss-custom-properties",
+          target: "_blank",
+          rel: "nofollow",
           children: "custom-properties"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://github.com/maximkoretskiy/postcss-initial",
+          target: "_blank",
+          rel: "nofollow",
           children: "initial"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://github.com/shrpne/postcss-page-break",
+          target: "_blank",
+          rel: "nofollow",
           children: "page-break"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://github.com/postcss/postcss-font-variant",
+          target: "_blank",
+          rel: "nofollow",
           children: "font-variant"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
           href: "https://github.com/postcss/postcss-media-minmax",
+          target: "_blank",
+          rel: "nofollow",
           children: "media-minmax"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme",
+          href: "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting#readme-1",
+          target: "_blank",
+          rel: "nofollow",
           children: "nesting"
         })
       }), "\n"]
@@ -11886,7 +11900,9 @@ function _createMdxContent(props) {
       })]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["Tailwind CSS provides the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "https://v2.tailwindcss.com/docs/functions-and-directives#apply",
+        href: "https://v2.tailwindcss.com/docs/functions-and-directives#apply-3",
+        target: "_blank",
+        rel: "nofollow",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "@apply"
         })
@@ -13554,7 +13570,7 @@ function _createMdxContent(props) {
       children: "For styles, a separate product file is generated, and there is no code related to importing styles in the Js product file."
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["If you need to inject styles into Js products, you can enable the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.a, {
-        href: "/en/api/config/build-config#inject.html",
+        href: "/module-tools/en/api/config/build-config.html#inject-1",
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "style.inject"
         }), " API"]
@@ -20356,12 +20372,12 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#automodules.html",
+          href: "/module-tools/en/api/config/build-config.html#automodules-1",
           children: "autoModules"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/api/config/build-config#modules.html",
+          href: "/module-tools/en/api/config/build-config.html#modules-1",
           children: "modules"
         })
       }), "\n"]
@@ -21163,7 +21179,7 @@ function _createMdxContent(props) {
       }), "\n"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["The ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "/en/api/config/build-preset.html",
+        href: "/module-tools/en/api/config/build-preset.html",
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildPreset"
         })
@@ -21320,7 +21336,7 @@ function _createMdxContent(props) {
       }]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["If you have special needs for the build product directory structure, you can use the ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.a, {
-        href: "/en/api/config/build-config.html",
+        href: "/module-tools/en/api/config/build-config.html",
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.code, {
           children: "buildConfig"
         }), " API"]
@@ -21328,12 +21344,12 @@ function _createMdxContent(props) {
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.ul, {
       children: ["\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/basic/modify-output-product#build-configuration-object.html",
+          href: "/module-tools/en/guide/basic/modify-output-product.html#build-configuration-object",
           children: "modify-output-product"
         })
       }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.li, {
         children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-          href: "/en/guide/advance/in-depth-about-build.html",
+          href: "/module-tools/en/guide/advance/in-depth-about-build.html",
           children: "in-depth-about-build"
         })
       }), "\n"]
@@ -21347,7 +21363,7 @@ function _createMdxContent(props) {
       }), "Testing components"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["For more information on how to test components, please refer to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "/en/guide/basic/test-your-project.html",
+        href: "/module-tools/en/guide/basic/test-your-project.html",
         children: "[Test project]"
       }), "."]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.h2, {
@@ -21360,27 +21376,23 @@ function _createMdxContent(props) {
       }), "Releasing components"]
     }), "\n", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components.p, {
       children: ["It is recommended to use module project to provide version publishing function, you can refer to ", (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components.a, {
-        href: "/en/guide/basic/publish-your-project.html",
+        href: "/module-tools/en/guide/basic/publish-your-project.html",
         children: "[Versioning and publishing]"
       }), "."]
     })]
   });
 }
-function MDXContent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = props.components || {},
-    MDXLayout = _ref.wrapper;
+function MDXContent(props = {}) {
+  const {wrapper: MDXLayout} = props.components || ({});
   return MDXLayout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(MDXLayout, Object.assign({}, props, {
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_createMdxContent, props)
   })) : _createMdxContent(props);
 }
-_c = MDXContent;
 /* harmony default export */ __webpack_exports__["default"] = (MDXContent);
 function _missingMdxReference(id, component, place) {
-  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/bytedance/modern.js/website/module-tools/docs/en/guide/best-practices/components.mdx`" : ""));
+  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it." + (place ? "\nIt’s referenced in your code at `" + place + "` in `/Users/targeral/github/targeral-modern-js/website/module-tools/docs/en/guide/best-practices/components.mdx`" : ""));
 }
-var _c;
-__webpack_require__.$Refresh$.register(_c, "MDXContent");
+
 
 /***/ })