@modern-js/main-doc 2.26.0 → 2.28.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @modern-js/main-doc
 
+## 2.28.0
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.28.0
+
+## 2.27.0
+
+### Patch Changes
+
+- 86274f5: docs: add source code build documentation
+  docs: 添加源码构建文档
+- ebdc4da: Fixed markdown error for link to styled-components website
+- Updated dependencies [86274f5]
+  - @modern-js/builder-doc@2.27.0
+
 ## 2.26.0
 
 ### Patch Changes

package/docs/en/configure/app/experiments/source-build.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: sourceBuild
+---
+
+# experiments.sourceBuild
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [experiments.sourceBuild](https://modernjs.dev/builder/en/api/config-experiments.html#experimentssourcebuild).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/experiments/sourceBuild.md';
+
+<Main />

package/docs/en/configure/app/source/alias-strategy.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: aliasStrategy
+---
+
+# source.aliasStrategy
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [source.aliasStrategy](https://modernjs.dev/builder/en/api/config-source.html#sourcealiasstrategy).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/source/aliasStrategy.md';
+
+<Main />

package/docs/en/configure/app/tools/swc.mdx

@@ -4,7 +4,7 @@ sidebar_label: swc
 
 # tools.swc
 
-- **Type:** `Object`
+- **Type:** `Object | Function`
 - **Default:** `undefined`
 
 ## Introduction
@@ -21,7 +21,7 @@ If you have configured the current SWC plugin when using Rspack, it will not hav
 
 ## Install
 
-import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enable-swc.md';
+import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enableSwc.md';
 
 <EnableSWC />
 
@@ -44,4 +44,19 @@ export default defineConfig({
 });
 ```
 
+Or using function to have more customize config, or to modify the default config.
+
+```js title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  tools: {
+    swc(config, { setConfig }) {
+      // Used for transpiling decorator of mobx correctly
+      setConfig(config, 'jsc.transform.useDefineForClassFields', true);
+    },
+  },
+});
+```
+
 For config details, please refer to [Modern.js Builder - SWC Plugin Configuration](https://modernjs.dev/builder/en/plugins/plugin-swc.html#config).

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Using Rspack
 
-import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack-tip.mdx';
+import Rspack from '@modern-js/builder-doc/docs/en/shared/rspackTip.mdx';
 
 <Rspack />
 
@@ -54,6 +54,10 @@ import { appTools, defineConfig } from '@modern-js/app-tools';
 });
 ```
 
+import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPrecautions.md';
+
+<RspackPrecautions />
+
 ## Migrating configuration
 
 After enabling Rspack building capability, further configuration migration is needed by referring to the [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).

package/docs/en/guides/advanced-features/ssr.mdx

@@ -159,10 +159,10 @@ Using SPR in Modern.js is very simple. Just add the PreRender component to your
 
 Here is a simulated component that uses the useLoaderData API. The request in the Data Loader takes 2 seconds to consume.
 
-```jsx
+```tsx title="page.loader.ts"
 import { useLoaderData } from '@modern-js/runtime/router';
 
-export const loader = async () => {
+export default async () => {
   await new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(null);
@@ -173,6 +173,10 @@ export const loader = async () => {
     message: 'Hello Modern.js',
   };
 };
+```
+
+```tsx title="page.tsx"
+import { useLoaderData } from '@modern-js/runtime/router';
 
 export default () => {
   const data = useLoaderData();

package/docs/en/guides/basic-features/routes.mdx

@@ -147,6 +147,29 @@ In summary, if there is a `layout.tsx` file under the sub-route's file directory
 
 All routes should end with the `<Page>` component. If the developer introduces the `<Outlet>` component in the `page.tsx` file, there will be no effect.
 
+#### Config
+
+Each `Layout` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
+
+```ts title="routes/blog/page.config.ts"
+export const handle = {
+  breadcrumbName: 'profile'
+}
+```
+
+These properties as defined are available via the [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook:
+
+```ts title="routes/layout.ts"
+export default () => {
+  const matches = useMatches;
+  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
+  return (
+    <Breadcrumb names={breadcrumbs}>
+    </Breadcrumb>
+  )
+}
+```
+
 ### Dynamic Routing
 
 Routes generated from file directories named with `[]` will be handled as dynamic routes. For example, the following file directory:
@@ -204,7 +227,18 @@ For example, the following directory structure:
     └── page.tsx
 ```
 
-When accessing any path that does not match, the `routes/$.tsx` component will be rendered. Similarly, you can use [useParams](/apis/app/runtime/router/router#useparams) in `$.tsx` to capture the remaining parts of the URL.
+When accessing any path that does not match(For example `/blog/a`), the `routes/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
+```tsx
+<RootLayout>
+  <BlogLayout>
+    <$></$>
+  </BlogLayout>
+</RootLayout>
+```
+
+If you want access to `/blog` to also match the `blog/$.tsx` file, you need to delete the `blog/layout.tsx` file in the same directory and make sure that there are no other subroutes under `blog`.
+
+As same, you can use [useParams](/apis/app/runtime/router/router#useparams) in `$.tsx` to capture the remaining parts of the URL.
 
 ```ts title="$.tsx"
 import { useParams } from '@modern-js/runtime/router';