@modern-js/main-doc 0.0.0-next-20221227040741 → 0.0.0-next-20221227140603

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @modern-js/main-doc@2.0.0-beta.6 build /github/workspace/packages/toolkit/main-doc
+> @modern-js/main-doc@2.0.0-beta.6 build /tmp/repo/modern.js/packages/toolkit/main-doc
 > npx ts-node ./scripts/sync.ts
 

package/CHANGELOG.md

@@ -1,35 +1,33 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-20221227040741
+## 0.0.0-next-20221227140603
 
 ### Patch Changes
 
-- 7879e8f711: refactor: remove enableModernMode config
+- 7879e8f71: refactor: remove enableModernMode config
 
   refactor: 不再支持 enableModernMode 配置项
 
-- 8f8fc35401: chore: modify plugin-garfish doc
-  chore: 修改 plugin-garfish 文档
-- 5927355ee1: feat: develop documentation directly with main-doc
+- 5927355ee: feat: develop documentation directly with main-doc
   feat: 直接使用 main-doc 包开发文档
-- ebf899fb5a: feat(app-tools): support configure builder plugins
+- ebf899fb5: feat(app-tools): support configure builder plugins
 
   feat(app-tools): 支持配置 builder 插件
 
-- 1ef69374be: feat: support update main-doc when package build or website build
+- 1ef69374b: feat: support update main-doc when package build or website build
   feat: 支持在包发布和官网发布时，更新 main-doc 包
-- Updated dependencies [2bc090c089]
-- Updated dependencies [f96a725211]
-- Updated dependencies [57077b2c64]
-- Updated dependencies [2ff6167be0]
-- Updated dependencies [309f08bdf4]
-- Updated dependencies [5402fdb0ca]
-- Updated dependencies [10d08a480d]
-- Updated dependencies [5d67c26cdb]
-- Updated dependencies [af4422d67f]
-- Updated dependencies [dda38c9c3e]
-- Updated dependencies [812913ccdd]
-- Updated dependencies [3fae2d03b3]
-- Updated dependencies [df41d71ade]
-- Updated dependencies [14b712da84]
-  - @modern-js/builder-doc@0.0.0-next-20221227040741
+- Updated dependencies [2bc090c08]
+- Updated dependencies [f96a72521]
+- Updated dependencies [57077b2c6]
+- Updated dependencies [2ff6167be]
+- Updated dependencies [309f08bdf]
+- Updated dependencies [5402fdb0c]
+- Updated dependencies [10d08a480]
+- Updated dependencies [5d67c26cd]
+- Updated dependencies [af4422d67]
+- Updated dependencies [dda38c9c3]
+- Updated dependencies [812913ccd]
+- Updated dependencies [3fae2d03b]
+- Updated dependencies [df41d71ad]
+- Updated dependencies [14b712da8]
+  - @modern-js/builder-doc@0.0.0-next-20221227140603

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/index_.md

@@ -1,6 +1,6 @@
 ---
 title: index.[tj]s
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 Entry identifier if App want use custom entry. In most case, [`App.[tj]sx`](/docs/apis/app/hooks/src/app) hook file can already meet our needs.

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/pages.md

@@ -1,6 +1,6 @@
 ---
 title: pages/
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 Entry identifier if the application want uses file system-based routing.

package/en/docusaurus-plugin-content-docs/current/apis/app/hooks/src/routes.md

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

package/en/docusaurus-plugin-content-docs/current/configure/app/dev/with-master-app.md

@@ -0,0 +1,31 @@
+---
+sidebar_label: withMasterApp
+---
+
+# dev.withMasterApp
+
+* Type: `Object`
+* Default: `null`
+
+When the project is a micro-front-end sub-application, you can use the `withMasterApp` configuration to enable the sub-application debugging mode.
+
+:::caution Caution
+When using child app debugging mode, you should first ensure that the main app has online debugging mode turned on.
+:::
+
+```js title=modern.config.js
+export default defineConfig({
+  dev: {
+    withMasterApp: {
+      //the path of the main application
+      moduleApp: 'https://www.masterApp.com',
+      //name of the subapplication
+      moduleName: 'Contact'
+    }
+  }
+})
+```
+
+- moduleApp: `string` Online address of the main application.
+- moduleName: `Contact` The name of the child app (needs to match the module name registered in the main app)。
+

package/en/docusaurus-plugin-content-docs/current/configure/app/tools/tailwindcss.md

@@ -4,38 +4,32 @@ title: tools.tailwindcss
 sidebar_label: tailwindcss
 ---
 
-* Type: `Object | Function`
-* Default: See configuration details below.
+- Type: `Object | Function`
+- Default: See configuration details below.
 
 <details>
   <summary>TailwindCSS configuration details</summary>
 
 ```js
-  const tailwind = {
-    purge: {
-        enabled: options.env === 'production',
-        content: [
-          './config/html/**/*.html',
-          './config/html/**/*.ejs',
-          './config/html/**/*.hbs',
-          './src/**/*',
-        ],
-        layers: ['utilities'],
-    },
-    // https://tailwindcss.com/docs/upcoming-changes
-    future: {
-      removeDeprecatedGapUtilities: false,
-      purgeLayersByDefault: true,
-      defaultLineHeights: false,
-      standardFontWeights: false,
-    },
-    theme: source.designSystem // Use source.design System configuration as Tailwind CSS Theme configuration
-  }
+const tailwind = {
+  content: [
+    './config/html/**/*.html',
+    './config/html/**/*.ejs',
+    './config/html/**/*.hbs',
+    './src/**/*.js',
+    './src/**/*.jsx',
+    './src/**/*.ts',
+    './src/**/*.tsx',
+    './storybook/**/*',
+  ],
+  theme: source.designSystem, // Use source.design System configuration as Tailwind CSS Theme configuration
+};
 ```
 
 :::tip Tips
 More about: <a href="https://tailwindcss.com/docs/configuration" target="_blank">TailwindCSS configuration</a>。
 :::
+
 </details>
 
 When the value is of type `Object`, rhe configuration corresponding to [TailwindCSS](https://tailwindcss.com/docs/configuration) is merged with the default configuration through `Object.assign`.

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/code-split.md

@@ -5,6 +5,10 @@ sidebar_position: 6
 
 Code Split is a common way to optimizing front-end resource loading. This doc will introduce three methods supported by Modern.js:
 
+:::info
+When you use Modern.js [Conventional routing](/docs/guides/basic-features/routes#conventional-routing), by default it will do code splitting based on routing components, wrapping `Suspense` components, no need to do code splitting by yourself.
+:::
+
 - `import`
 - `React.lazy`
 - `loadable`
@@ -21,32 +25,13 @@ import("./math").then(math => {
 
 The JS modules corresponding to the './math' path will be packaged in a separate JS file.
 
-## loadable
-
-use `loadable` API，for example：
-
-```ts
-import loadable from '@modern-js/runtime/loadable'
-
-const OtherComponent = loadable(() => import('./OtherComponent'));
-
-function MyComponent() {
-  return <OtherComponent />
-}
-```
-
-For detail, see [loadable API](/docs/apis/app/runtime/utility/loadable)。
-
-:::info
-SSR is supported out of the box by `loadable`.
-:::
 
 ## React.lazy
 
 The officially way provides by React to split component code.
 
-:::note
-React.lazy will not work in a non-streaming SSR environment.
+:::caution
+SSR is not supported in React 17 and below, and it is recommended that SSR applications for React 17 use loadable.
 :::
 
 ```ts
@@ -69,4 +54,24 @@ function MyComponent() {
 }
 ```
 
-For detail, see [React lazy](https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy)。
+For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)。
+
+## loadable
+
+use `loadable` API，for example：
+
+```ts
+import loadable from '@modern-js/runtime/loadable'
+
+const OtherComponent = loadable(() => import('./OtherComponent'));
+
+function MyComponent() {
+  return <OtherComponent />
+}
+```
+
+For detail, see [loadable API](/docs/apis/app/runtime/utility/loadable)。
+
+:::info
+SSR is supported out of the box by `loadable`.
+:::

package/en/docusaurus-plugin-content-docs/current/guides/basic-features/css/tailwindcss.md

@@ -4,8 +4,6 @@ sidebar_position: 2
 
 # Tailwind CSS
 
-
-
 [Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles. To use [Tailwind CSS](https://tailwindcss.com/) in the Modern.js, just execute `pnpm run new` in the project root directory and turn it on.
 
 Choose as follows:
@@ -23,12 +21,40 @@ import 'tailwindcss/components.css';
 import 'tailwindcss/utilities.css';
 ```
 
-You can then use the Utility Class provided by Tailwind CSS in each component.
+You can then use the Utility Class provided by Tailwind CSS in each component:
+
+```tsx
+const App = () => (
+  <div className="h-12 w-48">
+    <p className="text-xl font-medium text-black">hello world</p>
+  </div>
+);
+```
 
 ::: info Additional
 According to different needs, you can optionally import the CSS files provided by Tailwind CSS. Since the use of `@taiwind` is equivalent to directly importing CSS files, you can refer to the content in the annotate in the [`@tailwind` usage](https://tailwindcss.com/docs/functions-and-directives#tailwind) document for the purpose of the CSS files provided by Tailwind CSS.
 :::
 
+## Tailwind CSS version
+
+Modern.js supports both Tailwind CSS v2 and v3. The framework will recognize the version of `tailwindcss` in the project `package.json` and apply the corresponding configuration. By default, we install Tailwind CSS v3 for you.
+
+If your project is still using Tailwind CSS v2, we recommend that you upgrade to v3 to support JIT and other capabilities. For the differences between Tailwind CSS v2 and v3 versions, please refer to the following articles:
+
+- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
+- [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
+
+### Browser Compatibility
+
+Both Tailwind CSS v2 and v3 do not support IE 11 browsers. For background, please refer to:
+
+- [Tailwind CSS v3 - Browser Support](https://tailwindcss.com/docs/browser-support).
+- [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
+
+If you use Tailwind CSS on IE 11 browser, some styles may not be available, please pay attention.
+
+## Theme config
+
 When you need to customize the [theme](https://tailwindcss.com/docs/theme) configuration of Tailwind CSS, you can modify it in the configuration [`source.designSystem`](/docs/configure/app/source/design-system), for example, add a color theme `primary`:
 
 ```typescript title="modern.config.ts"
@@ -61,35 +87,4 @@ export default defineConfig({
 });
 ```
 
-## Use the [`Twin`](https://github.com/ben-rogerson/twin.macro)
-
-In the previous chapter, we introduced what CSS-in-JS is and the CSS-in-JS library [styled-components](https://styled-components.com/) commonly used by the community. This section will explain how to use [Tailwind CSS](https://tailwindcss.com/) in CSS with [`Twin`](https://github.com/ben-rogerson/twin.macro). Using [`Twin`](https://github.com/ben-rogerson/twin.macro) makes it easier to use Tailwind CSS in CSS-in-JS code. [`Twin`](https://github.com/ben-rogerson/twin.macro) for its own description is:
-
-> *Twin blends the magic of Tailwind with the flexibility of css-in-js*
-
-After enabling the "Tailwind CSS" function, you first need to install the ['Twin'](https://github.com/ben-rogerson/twin.macro) dependency:
-
-``` bash
-pnpm add twin.macro -D
-```
-
-When the project installs the `twin.macro` dependency, Modern.js detects the dependency and adds twin.macro related configuration to the `baby-plugin-macro` of build-in. So after installing the dependency, there is no need for manual configuration. Here is an example of a simple use of twin.macro:
-
-``` js
-import tw from 'twin.macro'
-
-const Input = tw.input`border hover:border-black`
-```
-
-:::tip
-If a `MacroError: /project/App.tsx` error occurs during runtime, it may be caused by a lack of `twin.macro` dependency.
-:::
-
-For more usage, please refer to the [twin.macro](https://github.com/ben-rogerson/twin.macro/blob/master/docs/index.md).
-
-`twin.macro` reads the `tailwindcss.config.js` files in the project directory by default, or reads the Tailwind CSS configuration via the file path specified by [twin.config](https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md#options) on the `babel-plugin-macro`. However, these additional configurations are not required in the Modern.js.
-
-When the Tailwind CSS is configured in the `modern.config.ts` file by [`source.designSystem`](/docs/configure/app/source/design-system) and [`tools.tailwindcss`](/docs/configure/app/tools/tailwindcss), these configurations will also take effect on the `twin.macro`.
-
-> When configuring Tailwind CSS for a project, the combination of the two configurations [`source.designSystem`](/docs/configure/app/source/design-system) and [`tools.tailwindcss`](/docs/configure/app/tools/tailwindcss) is equivalent to a separate configuration `tailwindcss.config.js` file.
-> Where [`source.designSystem`](/docs/configure/app/source/design-system) is equivalent to the [`theme`](https://v2.tailwindcss.com/docs/configuration#theme) configuration of Tailwind CSS.
+> When configuring Tailwind CSS for a project, the combination of the two configurations [source.designSystem](/docs/configure/app/source/design-system) and [tools.tailwindcss](/docs/configure/app/tools/tailwindcss) is equivalent to a separate configuration `tailwindcss.config.js` file. Where [source.designSystem](/docs/configure/app/source/design-system) is equivalent to the [theme](https://v2.tailwindcss.com/docs/configuration#theme) configuration of Tailwind CSS.