@modern-js/main-doc 2.65.5 → 2.66.1-alpha.0

package/src/components/Mermaid/style.scss

@@ -0,0 +1,221 @@
+.dark {
+  .modern-mermaid {
+    .flowchart-label {
+      rect {
+        fill: #23272f !important;
+        stroke: #81b1db !important;
+        stroke-width: 1px !important;
+      }
+
+      polygon {
+        fill: #23272f !important;
+        stroke: #81b1db !important;
+        stroke-width: 1px !important;
+      }
+
+      span.nodeLabel {
+        color: #ccc !important;
+      }
+    }
+
+    .edgeLabel {
+      fill: #23272f !important;
+      color: #ccc !important;
+      background-color: #23272f !important;
+    }
+
+    .flowchart-link {
+      stroke: #ccc !important;
+    }
+
+    .marker {
+      stroke: #ccc !important;
+      fill: #ccc !important;
+    }
+  }
+}
+
+.modern-doc {
+  .modern-mermaid {
+    svg {
+      display: block;
+      margin: 0 auto;
+    }
+    .flow-start,
+    .flow-end {
+      rect,
+      polygon {
+        fill: #666 !important;
+        stroke: #666 !important;
+      }
+
+      span.nodeLabel {
+        color: #fff !important;
+      }
+    }
+
+    .flow-optimization {
+      rect,
+      polygon {
+        fill: var(--tw-ring-color) !important;
+        stroke: var(--rp-container-details-link) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook {
+      rect,
+      polygon {
+        fill: var(--rp-container-info-border) !important;
+        stroke: var(--rp-container-info-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook-non-support {
+      rect,
+      polygon {
+        fill: var(--rp-container-danger-border) !important;
+        stroke: var(--rp-container-danger-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook-partial-support {
+      rect,
+      polygon {
+        fill: var(--rp-container-warning-border) !important;
+        stroke: var(--rp-container-warning-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-process {
+      rect,
+      polygon {
+        fill: var(--rp-container-details-border) !important;
+        stroke: var(--rp-container-details-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+  }
+
+  .flowchart-link {
+    stroke: #666 !important;
+  }
+
+  .marker {
+    stroke: #666 !important;
+    fill: #666 !important;
+  }
+
+  .cluster {
+    rect {
+      fill: transparent !important;
+      stroke: #666 !important;
+    }
+  }
+}
+
+.dark {
+  .rspress-doc {
+    .modern-mermaid {
+      .flow-start,
+      .flow-end {
+        rect,
+        polygon {
+          fill: #666 !important;
+          stroke: #666 !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-optimization {
+        rect,
+        polygon {
+          fill: var(--tw-ring-color) !important;
+          stroke: var(--rp-container-details-link) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook {
+        rect,
+        polygon {
+          fill: var(--rp-container-info-bg) !important;
+          stroke: var(--rp-container-info-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook-non-support {
+        rect,
+        polygon {
+          fill: var(--rp-container-danger-bg) !important;
+          stroke: var(--rp-container-danger-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook-partial-support {
+        rect,
+        polygon {
+          fill: var(--rp-container-warning-bg) !important;
+          stroke: var(--rp-container-warning-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-process {
+        rect,
+        polygon {
+          fill: var(--rp-container-details-bg) !important;
+          stroke: var(--rp-container-details-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+    }
+  }
+}
+
+.modern-mermaid {
+  font-size: 20px;
+  text-align: center;
+  svg {
+    display: block;
+    margin: 0 auto;
+  }
+}

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

@@ -1,6 +0,0 @@
-# Overview
-
-- [@modern-js/plugin-tailwindcss](/plugin/cli-plugins/plugin-tailwind): Enables the use of Tailwind CSS styles.
-- [@modern-js/plugin-bff](/plugin/cli-plugins/plugin-bff): Provides BFF services and unified invocation capabilities.
-- [@modern-js/plugin-ssg](/plugin/cli-plugins/plugin-ssg): Provides static site generation capabilities.
-- [@modern-js/plugin-swc](/plugin/cli-plugins/plugin-swc): Provides SWC compilation support.

package/docs/en/plugin/plugin-system/_meta.json

@@ -1,10 +0,0 @@
-[
-  "introduction",
-  "lifecycle",
-  "hook",
-  "implement",
-  "relationship",
-  "extend",
-  "plugin-api",
-  "hook-list"
-]

package/docs/en/plugin/plugin-system/extend.mdx

@@ -1,163 +0,0 @@
----
-sidebar_position: 5
----
-
-# Extending Plugin Hooks
-
-This section describes how to extend plugin Hooks by dynamically registering [Hook models](/plugin/plugin-system/hook).
-
-## Example
-
-Here is a simple example to demonstrate how to extend plugin Hooks by adding Hooks that manage console output.
-
-First, we initialize an empty project file and add basic dependencies:
-
-```bash
-$ npx @modern-js/create@latest modern-js-demo
-```
-
-### Creating Hooks
-
-First, let's create a Hook model:
-
-```ts title=config/plugin/myPlugin.ts
-import { createWaterfall } from '@modern-js/plugin';
-
-const message = createWaterfall<string[]>();
-```
-
-then register:
-
-```ts title=config/plugin/myPlugin.ts
-import type { CliPlugin } from '@modern-js/core';
-
-export const myPlugin = (): CliPlugin => ({
-  name: 'my-plugin',
-
-  registerHook: {
-    message,
-  },
-});
-```
-
-add Hook types:
-
-```ts title=config/plugin/myPlugin.ts
-declare module '@modern-js/core' {
-  export interface Hooks {
-    message: typeof message;
-  }
-}
-```
-
-### Using Hooks
-
-Create a plugin and add command handling logic through the `commands` Hook function:
-
-```ts title=config/plugin/myPlugin.ts
-import type { CliPlugin } from '@modern-js/core';
-
-export const myPlugin = (): CliPlugin => ({
-  name: 'my-plugin',
-
-  setup(api) {
-    return {
-      commands({ program }) {
-        program.command('message').action(async () => {
-          const hookRunners = api.useHookRunners();
-          const messages = hookRunners.message([]);
-          console.log(messages.join('\n'));
-        });
-      },
-    };
-  },
-});
-```
-
-now `config/plugin/myPlugin.ts` is:
-
-```ts title=config/plugin/myPlugin.ts
-import { createWaterfall } from '@modern-js/plugin';
-import type { CliPlugin } from '@modern-js/core';
-
-const message = createWaterfall<string[]>();
-
-export const myPlugin = (): CliPlugin => ({
-  name: 'my-plugin',
-
-  registerHook: {
-    message,
-  },
-
-  setup(api) {
-    return {
-      commands({ program }) {
-        program.command('message').action(async () => {
-          const hookRunners = api.useHookRunners();
-          const messages = hookRunners.message([]);
-          console.log(messages.join('\n'));
-        });
-      },
-    };
-  },
-});
-
-declare module '@modern-js/core' {
-  export interface Hooks {
-    message: typeof message;
-  }
-}
-```
-
-Then add this plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-import { myPlugin } from './config/plugin/myPlugin';
-
-export default defineConfig({
-  plugins: [myPlugin()],
-});
-```
-
-Now, run `npx modern message`, and the related logic will be executed, but no information is collected, so the console output is empty.
-
-add:
-
-```ts title=config/plugin/otherPlugin.ts
-import type { CliPlugin } from '@modern-js/core';
-
-export const otherPlugin = (): CliPlugin => ({
-  name: 'other-plugin',
-
-  setup(api) {
-    return {
-      message(list) {
-        return [...list, '[foo] line 0', '[foo] line 1'];
-      },
-    };
-  },
-});
-```
-
-add to config:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-import { myPlugin } from './config/plugin/myPlugin';
-import { otherPlugin } from './config/plugin/otherPlugin';
-
-export default defineConfig({
-  plugins: [myPlugin(), otherPlugin()],
-});
-```
-
-run `npx modern message`, then we can get follow in console:
-
-```bash
-$ modern message
-[foo] line 0
-[foo] line 1
-```
-
-By using the above approach, you can extend plugin Hooks with various capabilities.