@bleedingdev/modern-js-app-tools 3.5.0-ultramodern.1 → 3.5.0-ultramodern.100

package/dist/types/types/config/cloudflareDeploy.d.ts

@@ -14,6 +14,17 @@ export interface CloudflareWorkerArtifactConfig {
      */
     to: string;
 }
+export interface CloudflareWorkerPublicAssetConfig {
+    /**
+     * Source file or directory, relative to the app root, to copy into
+     * Cloudflare Worker Static Assets.
+     */
+    from: string;
+    /**
+     * Destination path relative to `.output/public`.
+     */
+    to: string;
+}
 export interface CloudflareWorkerD1DatabaseConfig {
     /**
      * Worker binding name, for example `DB`.
@@ -41,6 +52,36 @@ export interface CloudflareWorkerD1DatabaseConfig {
      */
     remote?: boolean;
 }
+export interface CloudflareWorkerServiceBindingConfig {
+    /** Worker binding name exposed on the module worker `env` object. */
+    binding: string;
+    /** Target Cloudflare Worker service name. */
+    service: string;
+    /**
+     * Optional application path prefix that Modern.js should dispatch to this
+     * service binding with `env[binding].fetch(request)`.
+     */
+    prefix?: string;
+    /**
+     * Server-rendered Module Federation fragments exposed by this Worker.
+     * These fields are written to the Modern.js worker manifest, but stripped
+     * from Wrangler's `services` entries.
+     */
+    fragments?: CloudflareWorkerServiceBindingFragmentConfig[];
+}
+export interface CloudflareWorkerServiceBindingFragmentConfig {
+    /** Stable remote id used by the shell's composition contract. */
+    remote: string;
+    /** Module Federation expose rendered by the fragment route. */
+    expose: string;
+    /** Expected boundary marker in the rendered fragment HTML. */
+    boundaryId: string;
+    /**
+     * Route path on the bound Worker. `{locale}` is replaced with the first
+     * locale segment from the incoming shell request.
+     */
+    path: string;
+}
 export interface CloudflareWorkerSecurityCspConfig {
     mode?: CloudflareWorkerSecurityCspMode;
     directives?: Record<string, string[] | string | false>;

package/dist/types/types/config/deploy.d.ts

@@ -1,5 +1,5 @@
-import type { CloudflareWorkerArtifactConfig, CloudflareWorkerD1DatabaseConfig, CloudflareWorkerSecurityConfig, DeployTarget, JsonValue } from './cloudflareDeploy';
-export type { CloudflareWorkerArtifactConfig, CloudflareWorkerD1DatabaseConfig, CloudflareWorkerSecurityConfig, CloudflareWorkerSecurityCorsConfig, CloudflareWorkerSecurityCspConfig, CloudflareWorkerSecurityCspMode, CloudflareWorkerSecurityNoindexConfig, DeployTarget, JsonValue, } from './cloudflareDeploy';
+import type { CloudflareWorkerArtifactConfig, CloudflareWorkerD1DatabaseConfig, CloudflareWorkerPublicAssetConfig, CloudflareWorkerSecurityConfig, CloudflareWorkerServiceBindingConfig, DeployTarget, JsonValue } from './cloudflareDeploy';
+export type { CloudflareWorkerArtifactConfig, CloudflareWorkerD1DatabaseConfig, CloudflareWorkerPublicAssetConfig, CloudflareWorkerSecurityConfig, CloudflareWorkerSecurityCorsConfig, CloudflareWorkerSecurityCspConfig, CloudflareWorkerSecurityCspMode, CloudflareWorkerSecurityNoindexConfig, CloudflareWorkerServiceBindingConfig, CloudflareWorkerServiceBindingFragmentConfig, DeployTarget, JsonValue, } from './cloudflareDeploy';
 export interface MicroFrontend {
     /**
      * Specifies whether to enable the HTML entry.
@@ -47,12 +47,25 @@ export interface DeployUserConfig {
          * Use this for provider resources such as migrations or generated config.
          */
         artifacts?: CloudflareWorkerArtifactConfig[];
+        /**
+         * Additional app-root files or directories to serve as Cloudflare Worker
+         * Static Assets under `.output/public`. Use `to: '.'` to copy a
+         * source directory's contents into the public asset root.
+         */
+        publicAssets?: CloudflareWorkerPublicAssetConfig[];
         /**
          * First-class Cloudflare D1 bindings. Modern.js writes these to
          * `wrangler.json` as `d1_databases` and stages configured migration
          * directories into `.output`.
          */
         d1Databases?: CloudflareWorkerD1DatabaseConfig[];
+        /**
+         * First-class Cloudflare service bindings. Modern.js writes these to
+         * `wrangler.json` as `services`; when a binding also has `prefix`,
+         * the generated Worker dispatches matching requests through
+         * `env[binding].fetch(request)`.
+         */
+        services?: CloudflareWorkerServiceBindingConfig[];
         /**
          * Dist output paths that must not be copied into Cloudflare public assets.
          * Entries are slash-normalized path prefixes relative to the app dist root.

package/dist/types/types/config/dev.d.ts

@@ -46,6 +46,12 @@ export interface DevServerUserConfig {
  * Although its name is the same as in Rsbuild, it is consumed by Modern.js.
  */
 export type DevUserConfig = Omit<BuilderDevConfig, 'setupMiddlewares'> & {
+    /**
+     * Customize the directory containing the Mock API entry file.
+     * Relative paths are resolved from the application directory.
+     * @default './config/mock'
+     */
+    mockDir?: string;
     setupMiddlewares?: SetupMiddlewares;
     /**
      * Dev server specific options.

package/dist/types/ultramodern-release-envelope/canonical.d.ts

@@ -0,0 +1,5 @@
+import type { MicroVerticalReleaseEnvelope, MicroVerticalReleaseEnvelopePayload } from './types';
+export declare const releaseEnvelopePayload: (envelope: MicroVerticalReleaseEnvelope) => MicroVerticalReleaseEnvelopePayload;
+export declare const canonicalSerializeMicroVerticalReleaseEnvelopePayload: (payload: MicroVerticalReleaseEnvelopePayload) => string;
+export declare const canonicalSerializeMicroVerticalReleaseEnvelope: (envelope: MicroVerticalReleaseEnvelope) => string;
+export declare const digestMicroVerticalReleaseEnvelopePayload: (payload: MicroVerticalReleaseEnvelopePayload) => string;

package/dist/types/ultramodern-release-envelope/framework-output.d.ts

@@ -0,0 +1,31 @@
+import type { MicroVerticalReleaseArtifact, MicroVerticalReleaseEnvelope, MicroVerticalReleaseTarget } from './types';
+export declare const MICROVERTICAL_RELEASE_ENVELOPE_PATH = "release/microvertical-release-envelope.json";
+export declare const emitFrameworkMicroVerticalReleaseEnvelope: ({ apiOnly, distDirectory, target, }: {
+    apiOnly: boolean;
+    distDirectory: string;
+    target: MicroVerticalReleaseTarget;
+}) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const readFrameworkMicroVerticalReleaseEnvelope: ({ artifactRoot, expectedTarget, logicalPathForArtifact, required, }: {
+    artifactRoot: string;
+    expectedTarget?: MicroVerticalReleaseTarget;
+    logicalPathForArtifact?: (artifact: MicroVerticalReleaseArtifact) => string;
+    required?: boolean;
+}) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const verifyBuildOutputReleaseEnvelope: (distDirectory: string, expectedTarget?: MicroVerticalReleaseTarget) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const verifyNodeReleaseEnvelopeStaging: ({ outputDirectory, }: {
+    distDirectory?: string;
+    outputDirectory: string;
+}) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const emitNodeStagedReleaseEnvelope: ({ distDirectory, outputDirectory, }: {
+    distDirectory: string;
+    outputDirectory: string;
+}) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const stageCloudflareReleaseEnvelope: ({ distDirectory, outputDirectory, }: {
+    distDirectory: string;
+    outputDirectory: string;
+}) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const emitCloudflareStagedReleaseEnvelope: ({ distDirectory, outputDirectory, }: {
+    distDirectory: string;
+    outputDirectory: string;
+}) => Promise<MicroVerticalReleaseEnvelope | undefined>;
+export declare const verifyCloudflareReleaseEnvelopeStaging: (outputDirectory: string) => Promise<MicroVerticalReleaseEnvelope | undefined>;

package/dist/types/ultramodern-release-envelope/index.d.ts

@@ -0,0 +1,6 @@
+import { canonicalSerializeMicroVerticalReleaseEnvelope } from './canonical';
+import { type CreateMicroVerticalReleaseEnvelopeInput, MICROVERTICAL_RELEASE_ENVELOPE_KIND, MICROVERTICAL_RELEASE_ENVELOPE_SCHEMA_VERSION, MICROVERTICAL_RELEASE_TARGETS, type MicroVerticalReleaseEnvelope, type VerifyMicroVerticalReleaseEnvelopeOptions } from './types';
+export type { CreateMicroVerticalReleaseEnvelopeInput, MicroVerticalReleaseArtifact, MicroVerticalReleaseArtifactInput, MicroVerticalReleaseArtifactInputs, MicroVerticalReleaseEnvelope, MicroVerticalReleaseEnvelopePayload, MicroVerticalReleaseFileArtifact, MicroVerticalReleaseIdentity, MicroVerticalReleaseSurfaces, MicroVerticalReleaseSymbolicLinkArtifact, MicroVerticalReleaseTarget, VerifyMicroVerticalReleaseEnvelopeOptions, } from './types';
+export { canonicalSerializeMicroVerticalReleaseEnvelope, MICROVERTICAL_RELEASE_ENVELOPE_KIND, MICROVERTICAL_RELEASE_ENVELOPE_SCHEMA_VERSION, MICROVERTICAL_RELEASE_TARGETS, };
+export declare const createMicroVerticalReleaseEnvelope: (input: CreateMicroVerticalReleaseEnvelopeInput) => Promise<MicroVerticalReleaseEnvelope>;
+export declare const verifyMicroVerticalReleaseEnvelope: (value: unknown, options: VerifyMicroVerticalReleaseEnvelopeOptions) => Promise<MicroVerticalReleaseEnvelope>;

package/dist/types/ultramodern-release-envelope/types.d.ts

@@ -0,0 +1,62 @@
+export declare const MICROVERTICAL_RELEASE_ENVELOPE_SCHEMA_VERSION: 3;
+export declare const MICROVERTICAL_RELEASE_ENVELOPE_KIND: 'ultramodern-target-microvertical-release-envelope';
+export declare const MICROVERTICAL_RELEASE_TARGETS: readonly ['node', 'cloudflare'];
+export type MicroVerticalReleaseTarget = (typeof MICROVERTICAL_RELEASE_TARGETS)[number];
+export type MicroVerticalReleaseIdentity = {
+    unitId: string;
+    buildMarker: string;
+    sourceRevision: string;
+    releaseVersion: string;
+};
+export type MicroVerticalReleaseArtifactInput = {
+    logicalPath: string;
+    runtime: string;
+};
+export type MicroVerticalReleaseFileArtifact = MicroVerticalReleaseArtifactInput & {
+    kind: 'file';
+    byteLength: number;
+    sha256: string;
+};
+export type MicroVerticalReleaseSymbolicLinkArtifact = MicroVerticalReleaseArtifactInput & {
+    kind: 'symbolic-link';
+    linkTarget: string;
+    targetKind: 'directory' | 'file';
+    targetLogicalPath: string;
+};
+export type MicroVerticalReleaseArtifact = MicroVerticalReleaseFileArtifact | MicroVerticalReleaseSymbolicLinkArtifact;
+export type MicroVerticalReleaseArtifactInputs = {
+    artifacts: MicroVerticalReleaseArtifactInput[];
+    surfaces: MicroVerticalReleaseSurfaces;
+};
+export type MicroVerticalReleaseSurfaces = {
+    uiClient: string[];
+    ssr: string[];
+    apiBackend: string[];
+    backendFederation: {
+        manifest: string;
+        container: string;
+    };
+};
+export type MicroVerticalReleaseEnvelopePayload = {
+    schemaVersion: typeof MICROVERTICAL_RELEASE_ENVELOPE_SCHEMA_VERSION;
+    kind: typeof MICROVERTICAL_RELEASE_ENVELOPE_KIND;
+    target: MicroVerticalReleaseTarget;
+    identity: MicroVerticalReleaseIdentity;
+    artifacts: MicroVerticalReleaseArtifact[];
+    surfaces: MicroVerticalReleaseSurfaces;
+};
+export type MicroVerticalReleaseEnvelope = MicroVerticalReleaseEnvelopePayload & {
+    envelopeDigest: string;
+};
+export type CreateMicroVerticalReleaseEnvelopeInput = {
+    artifactRoot: string;
+    target: MicroVerticalReleaseTarget;
+    identity: MicroVerticalReleaseIdentity;
+    artifacts: MicroVerticalReleaseArtifactInput[];
+    surfaces: MicroVerticalReleaseSurfaces;
+};
+export type VerifyMicroVerticalReleaseEnvelopeOptions = {
+    artifactRoot: string;
+    logicalPathForArtifact?: (artifact: MicroVerticalReleaseArtifact) => string;
+    expectedTarget?: MicroVerticalReleaseTarget;
+};

package/dist/types/ultramodern-release-identity.d.ts

@@ -0,0 +1,16 @@
+export type UltramodernReleaseIdentity = {
+    buildMarker: string;
+    sourceRevision: string;
+};
+export declare const createUltramodernReleaseBuildMarker: ({ generationBuildMarker, sourceRevision, unitId, }: {
+    generationBuildMarker: string;
+    sourceRevision: string;
+    unitId: string;
+}) => string;
+export declare const resolveUltramodernSourceRevision: (workspaceRoot?: string, configuredSourceRevision?: string) => string;
+export declare const resolveUltramodernReleaseIdentity: ({ generationBuildMarker, sourceRevision: configuredSourceRevision, unitId, workspaceRoot, }: {
+    generationBuildMarker: string;
+    sourceRevision?: string;
+    unitId: string;
+    workspaceRoot?: string;
+}) => UltramodernReleaseIdentity;

package/docs/_nav.json

@@ -0,0 +1,36 @@
+[
+  {
+    "text": "UltraModern Guide",
+    "link": "/guides/get-started/ultramodern",
+    "activeMatch": "/guides/"
+  },
+  {
+    "text": "configure",
+    "link": "/configure/app/usage",
+    "activeMatch": "/configure/"
+  },
+  {
+    "text": "plugin-menu",
+    "link": "/plugin/introduction",
+    "activeMatch": "/plugin/"
+  },
+  {
+    "text": "apis",
+    "link": "/apis/app/commands",
+    "activeMatch": "/apis/"
+  },
+  {
+    "text": "Examples",
+    "link": "/tutorials/foundations/introduction",
+    "activeMatch": "/tutorials/"
+  },
+  {
+    "text": "community",
+    "link": "/community/showcase",
+    "activeMatch": "/community/"
+  },
+  {
+    "text": "Upstream Modern.js 2.x Docs",
+    "link": "https://modernjs.dev/v2"
+  }
+]

package/docs/apis/_meta.json

@@ -0,0 +1,13 @@
+[
+  "app/commands",
+  {
+    "type": "dir",
+    "name": "app/hooks",
+    "label": "file-conventions"
+  },
+  {
+    "type": "dir",
+    "name": "app/runtime",
+    "label": "runtime-api"
+  }
+]

package/docs/apis/app/commands.mdx

@@ -0,0 +1,205 @@
+---
+sidebar_position: 1
+---
+
+# Commands
+
+UltraModern.js has some built-in commands that can help you quickly start a development server, build production environment code, and more.
+
+Through this chapter, you can learn about the built-in commands of UltraModern.js and how to use them.
+
+## modern dev
+
+The `modern dev` command is used to start a local development server and compile the source code in the development environment.
+
+```bash
+Usage: modern dev [options]
+
+Options:
+  -e --entry <entry>    compiler by entry
+  -c --config <config>  specify the configuration file, which can be a relative or absolute path
+  -h, --help            show command help
+  --web-only            only start web service
+  --api-only            only start API service
+```
+
+After running `modern dev`, UltraModern.js will watch source file changes and apply hot module replacement.
+
+```bash
+$ modern dev
+
+info    Starting dev server...
+
+  > Local:    http://localhost:8080/
+  > Network:  http://192.168.0.1:8080/
+```
+
+### Compile Partial Pages
+
+In multi-page (MPA) projects, the `--entry` option can be added to specify one or more pages to compile. In this way, only part of the code in the project will be compiled, and the dev startup speed will be faster.
+
+For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
+
+```text
+$ modern dev --entry
+
+? Please select the entry that needs to be built
+❯ ◯ foo
+  ◯ bar
+  ◯ baz
+```
+
+For example, if you select the `foo` entry, only the code related to the `foo` entry will be compiled, and the code of other pages will not be compiled.
+
+### Specify the page by parameter
+
+You can also specify the page name through parameters after `--entry`, and the names of multiple pages can be separated by commas.
+
+```bash
+# Compile foo page
+modern dev --entry foo
+
+# Compile foo and bar pages
+modern dev --entry foo,bar
+```
+
+## modern start
+
+`modern start` is an alias of `modern dev` command, the usage of the two are exactly the same.
+
+## modern build
+
+The `modern build` command will build production-ready artifacts in the `dist/` directory by default. You can specify the output directory by modifying the configuration [`output.distPath`](/configure/app/output/dist-path).
+
+```bash
+Usage: modern build [options]
+
+Options:
+  -c --config <config>  specify the configuration file, which can be a relative or absolute path
+  -h, --help            show command help
+  -w --watch            turn on watch mode, watch for changes and rebuild
+```
+
+## modern runtime status
+
+The `modern runtime status` command reads the runtime status endpoint and prints the response. It targets `http://127.0.0.1:8080/_modern/runtime/status` by default.
+
+```bash
+Usage: modern runtime status [options]
+
+Options:
+  --endpoint <endpoint>  runtime status endpoint URL or path
+  --token <token>        runtime status auth token
+  --token-env <name>     environment variable name that stores runtime status auth token (default: "MODERN_RUNTIME_SIGNAL_TOKEN")
+  --header-name <name>   auth header name (default: "x-modernjs-runtime-signal-token")
+  --timeout <ms>         request timeout in milliseconds (default: "5000")
+  --json                 output as JSON format for machine reading
+  -h, --help             display help for command
+```
+
+If `--endpoint` is a path, it is resolved against `http://127.0.0.1:8080`. If `--token` is omitted, the command reads the token from the environment variable named by `--token-env`.
+
+By default, the command formats the response as readable key/value lines. Add `--json` to print the raw JSON payload.
+
+```bash
+modern runtime status --json
+```
+
+## modern runtime fallback-signal
+
+The `modern runtime fallback-signal` command posts a runtime fallback signal to the canary contract-gate endpoint. It targets `http://127.0.0.1:8080/_modern/contract-gates/runtime-fallback` by default.
+
+```bash
+Usage: modern runtime fallback-signal [options]
+
+Options:
+  --app <appName>          remote app name
+  --endpoint <endpoint>    runtime fallback signal endpoint URL or path
+  --reason <reason>        fallback reason (default: "runtime_fallback")
+  --phase <phase>          fallback phase (default: "load")
+  --entry <entry>          remote entry URL
+  --runtime-digest <digest>  runtime digest value
+  --metadata <json>        metadata JSON object string
+  --token <token>          runtime signal auth token
+  --token-env <name>       environment variable name that stores runtime signal auth token (default: "MODERN_RUNTIME_SIGNAL_TOKEN")
+  --header-name <name>     auth header name (default: "x-modernjs-runtime-signal-token")
+  --timeout <ms>           request timeout in milliseconds (default: "5000")
+  --json                   output as JSON format for machine reading
+  -h, --help               display help for command
+```
+
+The request body always includes `appName`, `reason`, and `phase`. It includes `entry`, `runtimeDigest`, and `metadata` only when those options are provided. `--metadata` must be a JSON object string.
+
+```bash
+modern runtime fallback-signal --app crm-shell --reason remote_load_failed --phase load --json
+```
+
+import ServeCommand from '@site-docs-en/components/serve-command';
+
+<ServeCommand />
+
+## modern inspect
+
+The `modern inspect` command is used to view the UltraModern.js config, [Rsbuild config](https://v2.rsbuild.rs/config/index) and Rspack config of the project.
+
+```bash
+Usage: modern inspect [options]
+
+Options:
+  --env <env>           view the configuration in the target environment (default: "development")
+  --output <output>     Specify the path to output in the dist (default: "./")
+  --verbose             Show the full function in the result
+  -c --config <config>  specify the configuration file, which can be a relative or absolute path
+  -h, --help            show command help
+```
+
+After executing the command `npx modern inspect` in the project root directory, the following files will be generated in the `dist` directory of the project:
+
+- `modern.js.config.mjs`:The Modern.js configuration currently used.
+- `rsbuild.config.mjs`: The Rsbuild config to use at build time.
+- `rspack.config.web.mjs`: The Rspack config used by to use at build time.
+
+```bash
+➜ npx modern inspect
+
+Inspect config succeed, open following files to view the content:
+
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
+  - Modern.js Config: /root/my-project/dist/modern.js.config.mjs
+```
+
+### Configuration Env
+
+By default, the inspect command will output the development configs, you can use the `--env production` option to output the production configs:
+
+```bash
+modern inspect --env production
+```
+
+### Verbose content
+
+By default, the inspect command will omit the function content in the config object, you can use the `--verbose` option to output the full content of the function:
+
+```bash
+modern inspect --verbose
+```
+
+### SSR Configuration
+
+If the project has enabled SSR, an additional `rspack.config.node.mjs` file will be generated in the `dist/`, corresponding to the Rspack configuration at SSR build time.
+
+```bash
+➜ npx modern inspect
+
+Inspect config succeed, open following files to view the content:
+
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
+  - Rspack Config (node): /root/my-project/dist/rspack.config.node.mjs
+  - Modern.js Config: /root/my-project/dist/modern.js.config.mjs
+```
+
+import DeployCommand from '@site-docs-en/components/deploy-command';
+
+<DeployCommand />

package/docs/apis/app/hooks/_meta.json

@@ -0,0 +1,28 @@
+[
+  {
+    "type": "dir",
+    "name": "src",
+    "label": "src/",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "api",
+    "label": "api/",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "server",
+    "label": "server/",
+    "collapsed": true
+  },
+  "shared",
+  {
+    "type": "dir",
+    "name": "config",
+    "label": "config/",
+    "collapsed": true
+  },
+  "modern-config"
+]

package/docs/apis/app/hooks/api/lambda.mdx

@@ -0,0 +1,13 @@
+---
+title: lambda/*.ts
+sidebar_position: 3
+---
+# lambda/*.ts
+
+After enabling BFF, the files under the `lambda/` directory will be registered as BFF routes according to conventions.
+
+:::note
+The files can be written in `js` or `ts` languages, but they must use `esm` syntax to export functions.
+:::
+
+For detailed information, refer to [BFF API Routes](/guides/advanced-features/bff/function.html#api-routes).

package/docs/apis/app/hooks/config/_meta.json

@@ -0,0 +1 @@
+["html", "favicon", "icon", "mock", "public", "upload"]

package/docs/apis/app/hooks/config/favicon.mdx

@@ -0,0 +1,29 @@
+---
+title: favicon.*
+sidebar_position: 3
+---
+
+# Favicon
+
+When there is a `favicon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) configuration option for generating the favicon icon on the page:
+
+```
+./config
+└── favicon.ico
+```
+
+After the build is completed, you can see the following tags automatically generated in HTML:
+
+```html
+<link rel="icon" href="/favicon.ico" />
+```
+
+## Order
+
+When setting up the favicon, Modern.js looks for files in the following order:
+
+- `favicon.png`
+- `favicon.jpg`
+- `favicon.jpeg`
+- `favicon.svg`
+- `favicon.ico`

package/docs/apis/app/hooks/config/html.mdx

@@ -0,0 +1,9 @@
+---
+title: html/
+sidebar_position: 1
+---
+# html/
+
+You can inject custom HTML fragments at different locations of the default internal HTML template through the `config/html` directory.
+
+For specific usage, please refer to: [Custom HTML](/guides/basic-features/html).

package/docs/apis/app/hooks/config/icon.mdx

@@ -0,0 +1,29 @@
+---
+title: icon.*
+sidebar_position: 2
+---
+
+# Apple Touch Icon
+
+When there is an `icon.*` file in the `config` directory at the root of the project, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) configuration option for generating the Apple Touch Icon icon under the iOS system.
+
+```
+./config
+└── icon.png
+```
+
+After the build is completed, you can see the following tags automatically generated in HTML:
+
+```html
+<link rel="apple-touch-icon" sizes="180x180" href="/static/image/icon.png" />
+```
+
+## Order
+
+When setting up the app icon, Modern.js looks for files in the following order:
+
+- `icon.png`
+- `icon.jpg`
+- `icon.jpeg`
+- `icon.svg`
+- `icon.ico`

package/docs/apis/app/hooks/config/mock.mdx

@@ -0,0 +1,10 @@
+---
+title: mock/
+sidebar_position: 5
+---
+# mock/
+
+When there is a `config/mock/index.ts` or `config/mock/index.js` file in the
+project directory, Modern.js will automatically enable the Mock service during
+development. Use [`dev.mockDir`](/configure/app/dev/mock-dir) to customize
+this directory.

package/docs/apis/app/hooks/config/public.mdx

@@ -0,0 +1,30 @@
+---
+title: public/
+sidebar_position: 3
+---
+# public/
+
+Any static assets can be placed in the `public/` directory, and the files will be deployed to the corresponding application domain by the server.
+
+## Description
+
+The file routing is based on the convention of the directory structure, where `public/` is the root directory corresponding to the root path of the Web application.
+
+For example, the `config/public/sdk/index.js` file will be deployed under `${domain}/sdk/index.js` after deployment.
+
+## Scenarios
+
+For example, authentication files required by third-party systems such as `robots.txt` and `auth.xml`.
+
+Or SDKs for other business parties (requiring unchanged routing), or HTML files without entry.
+
+:::info
+For static assets (such as SVG images) that need to be imported through import in the source code, it is recommended to manage them in the `src/assets` directory.
+
+:::
+
+## Code Compression
+
+If the file in the directory is a `.js` file, it will be automatically compressed during production environment construction.
+
+If the file ends with `.min.js`, it will not be compressed.