feat: support mermaid

nodedevpkg/vue-vite-presets/package.json

@@ -11,15 +11,15 @@
   },
   "dependencies": {
     "@innoai-tech/lodash": "^0.2.5",
-    "@innoai-tech/purebundle": "^0.5.1",
-    "@innoai-tech/vuecomponentcompleter": "^0.2.1",
+    "@innoai-tech/purebundle": "^0.5.2",
+    "@innoai-tech/vuecomponentcompleter": "^0.2.2",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/rollup": "^3.1.0",
-    "@swc/core": "^1.10.1",
+    "@swc/core": "^1.10.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "hastscript": "^9.0.0",
     "unist-util-visit": "^5.0.0",
-    "vite": "^6.0.3",
+    "vite": "^6.0.7",
     "vite-plugin-pages": "^0.32.4",
     "vite-tsconfig-paths": "^5.1.4"
   },

nodedevpkg/vue-vite-presets/src/chunkCleanup.ts

@@ -1,5 +1,5 @@
 import { transform, usePlugin } from "@innoai-tech/purebundle";
-import { type Plugin, createFilter } from "vite";
+import { createFilter, type Plugin } from "vite";
 import { isUndefined } from "@innoai-tech/lodash";
 
 export const chunkCleanup = (
@@ -13,14 +13,14 @@ export const chunkCleanup = (
       exclude?: string[];
       include?: string[];
     };
-  } = {},
+  } = {}
 ): Plugin => {
   const isJSOrLike = createFilter([
     /\.vue$/,
     /\.mdx$/,
     /\.tsx?$/,
     /\.mjs$/,
-    /\.jsx?$/,
+    /\.jsx?$/
   ]);
 
   return {
@@ -50,24 +50,33 @@ export const chunkCleanup = (
       const result = await transform(code, {
         filename: id,
         env: opt.env ?? { targets: "defaults" },
-        minify: false,
+        minify: false
       });
 
       return (
         result.code && {
           code: result.code,
-          map: result.map || null,
+          map: result.map || null
         }
       );
     },
 
-    async renderChunk(code: string) {
+    async renderChunk(code: string, c) {
+      if (c.fileName.includes("/vendor-min-")) {
+        return (
+          await transform(code, {
+            minify: false,
+            plugins: [usePlugin({})]
+          })
+        ).code;
+      }
+
       return (
         await transform(code, {
           minify: opt.minify ?? false,
-          plugins: [usePlugin({})],
+          plugins: [usePlugin({})]
         })
       ).code;
-    },
+    }
   };
 };

nodedevpkg/vue-vite-presets/src/viteChunkSplit.ts

@@ -1,27 +1,18 @@
 import { readFileSync } from "fs";
-import { dirname, join, relative, resolve } from "path";
+import { basename, dirname, extname, join, relative, resolve } from "path";
 import { get, last, sum } from "@innoai-tech/lodash";
-import {
-  type ManualChunkMeta,
-  type OutputOptions,
-  type PreRenderedChunk,
-} from "rollup";
-import {
-  type FilterPattern,
-  type PluginOption,
-  createFilter,
-  searchForWorkspaceRoot,
-} from "vite";
+import { type ManualChunkMeta, type OutputOptions, type PreRenderedChunk } from "rollup";
+import { createFilter, type FilterPattern, type PluginOption, searchForWorkspaceRoot } from "vite";
 
 export interface ChunkSplitOptions {
   lib?: FilterPattern;
   handleModuleFederations?: (
-    pkgRelations: Record<string, ModuleFederation>,
+    pkgRelations: Record<string, ModuleFederation>
   ) => void;
 }
 
 export const viteChunkSplit = (
-  options: ChunkSplitOptions = {},
+  options: ChunkSplitOptions = {}
 ): PluginOption => {
   const viteRoot = searchForWorkspaceRoot(".");
   const cs = new ChunkSplit(resolve(viteRoot), options);
@@ -42,7 +33,7 @@ export const viteChunkSplit = (
       const chunkFileNames = get(
         c.build.rollupOptions.output,
         ["chunkFileNames"],
-        `${assetsDir}/[name].[hash].chunk.js`,
+        `${assetsDir}/[name].[hash].chunk.js`
       );
 
       (c.build.rollupOptions.output as any) = {
@@ -58,14 +49,14 @@ export const viteChunkSplit = (
 
           const name = cs.extractName(chunkInfo.moduleIds[0]!);
           return `${assetsDir}/${name}.[hash].chunk.js`;
-        },
+        }
       };
     },
     outputOptions(o) {
       o.manualChunks = (id: string, meta: ManualChunkMeta) => {
         return cs.chunkName(id, meta);
       };
-    },
+    }
   };
 };
 
@@ -75,7 +66,7 @@ class ChunkSplit {
 
   constructor(
     private root: string,
-    private options: ChunkSplitOptions,
+    private options: ChunkSplitOptions
   ) {
     this.isLib = createFilter(options.lib ?? []);
 
@@ -102,6 +93,10 @@ class ChunkSplit {
     if (id.includes("/node_modules/") || id.startsWith("\0")) {
       const pkgName = this.normalizePkgName(id);
 
+      if (id.includes(".min/") || id.includes(".min.")) {
+        return pkgName.replace("vendor-", "vendor-min-") + "~" + basename(id, extname(id));
+      }
+
       if (this.isDirectVendor(pkgName)) {
         return this.pkgRelegation(meta, this.normalizePkgName(id))?.federation;
       }
@@ -254,7 +249,8 @@ export class ModuleFederation {
 
   #imported = new Map<string, ModuleFederation>();
 
-  constructor(public name: string) {}
+  constructor(public name: string) {
+  }
 
   get federation() {
     return this.#federation ?? this.name;
@@ -292,7 +288,7 @@ export class ModuleFederation {
 
   sortedImported() {
     return [...this.#imported.entries()].toSorted(([_a, a], [_b, b]) =>
-      a.rank > b.rank ? -1 : 1,
+      a.rank > b.rank ? -1 : 1
     );
   }
 
@@ -307,13 +303,13 @@ export class ModuleFederation {
 
 const markPkgRelegation = (
   moduleFederations: Record<string, ModuleFederation>,
-  directs: Record<string, boolean>,
+  directs: Record<string, boolean>
 ) => {
   const federations: Record<string, boolean> = {};
 
   const walkToNearestDirectFederationFrom = (
     pkg: string,
-    visited: Map<string, boolean>,
+    visited: Map<string, boolean>
   ): string => {
     // cycle avoid
     if (visited.has(pkg)) {
@@ -351,7 +347,7 @@ const markPkgRelegation = (
 };
 
 export const d2Graph = (
-  moduleFederations: Record<string, ModuleFederation>,
+  moduleFederations: Record<string, ModuleFederation>
 ) => {
   let g = "";
 

nodepkg/typedef/package.json

@@ -12,7 +12,9 @@
   "devDependencies": {
     "reflect-metadata": "^0.2.2"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "@innoai-tech/lodash": "*"
+  },
   "exports": {
     ".": {
       "bun": "./src/index.ts",

nodepkg/vueuikit/package.json

@@ -10,7 +10,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
     "@emotion/utils": "^1.4.2",
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
     "@innoai-tech/lodash": "^0.2.5",
     "@innoai-tech/vuekit": "workspace:^",
     "@material/material-color-utilities": "^0.3.0",

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "private": true,
-  "packageManager": "[email protected].38",
+  "packageManager": "[email protected].43",
   "workspaces": [
     "nodepkg/*",
     "nodedevpkg/*"
@@ -26,30 +26,31 @@
     "@innoai-tech/lodash": "^0.2.5",
     "@innoai-tech/vuekit": "workspace:*",
     "@innoai-tech/vueuikit": "workspace:*",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "mermaid": "^11.4.1"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^15.11.7",
+    "@happy-dom/global-registrator": "^16.5.3",
     "@innoai-tech/config": "^0.5.7",
     "@innoai-tech/devconfig": "^0.5.0",
-    "@innoai-tech/monobundle": "^0.14.6",
+    "@innoai-tech/monobundle": "^0.14.7",
     "@innoai-tech/vue-vite-presets": "workspace:*",
     "@innoai-tech/vuedevconfig": "workspace:*",
     "@mdi/js": "^7.4.47",
     "@vue/test-utils": "^2.4.6",
     "bun-types": "latest",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.39.0",
+    "core-js": "^3.40.0",
     "normalize.css": "^8.0.1",
     "prettier": "^3.4.2",
     "turbo": "^2.3.3",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
     "vue": "^3.5.13"
   },
   "resolutions": {
-    "vite": "^6.0.3",
-    "vue": "^3.5.13",
-    "rollup": "^4.20.0"
+    "rollup": "^4.30.1",
+    "vite": "^6.0.7",
+    "vue": "^3.5.13"
   }
 }

vite.config.ts

@@ -48,17 +48,6 @@ export default defineConfig({
     }),
     chunkCleanup({
       minify: true,
-      env: {
-        targets: {
-          chrome: "76"
-        },
-        mode: "usage",
-        coreJs: "3.31.0",
-        exclude: [
-          // 哪个报错加哪个
-          "es.symbol.async-dispose"
-        ]
-      }
     })
   ]
 });

webapp/openapi-playground/mod/openapi/DatabaseErView.tsx

@@ -187,7 +187,6 @@ const DatabaseErTableColumnOfView = component$<{
   );
 
   return () => {
-
     return (
       <DatabaseErTableColumnOf
         onClick={() => {
@@ -316,12 +315,11 @@ export const DatabaseDescription = styled<{
   }
 });
 
-
 const DialogContainer = styled("div")({
   display: "flex",
   containerStyle: "sys.surface",
   width: "90vw",
-  roundedLeft: "sm",
+  roundedBottom: "sm",
   px: 16,
   py: 36,
   top: 0,

webapp/openapi-playground/mod/openapi/MermaidView.tsx

@@ -0,0 +1,62 @@
+import { styled } from "@innoai-tech/vueuikit";
+import type { VNodeChild } from "vue";
+import { component$, observableRef, rx, subscribeOnMountedUntilUnmount } from "@innoai-tech/vuekit";
+import { EMPTY, from, switchMap } from "rxjs";
+
+export const PreWithMermaid = styled<{
+  $default?: VNodeChild
+}, "pre">("pre", ({}, { slots }) => {
+  return (Root) => {
+    const children = slots.default?.();
+    const child = children?.[0];
+
+
+    if (child && (child as any).props.className === "language-mermaid") {
+      return <Mermaid code={(child as any).children} />;
+    }
+
+    return (
+      <Root>
+        {children}
+      </Root>
+    );
+  };
+})({});
+
+
+const Mermaid = component$<{
+  code: string
+}>((props, {}) => {
+  const $el = observableRef(null);
+
+  rx(
+    $el,
+    switchMap((el) => {
+      if (el) {
+        return from((async () => {
+          // @ts-ignore
+          const { default: mermaid } = await import("mermaid/dist/mermaid.esm.min.mjs");
+
+          await mermaid.run({ nodes: [el] });
+        })());
+      }
+      return EMPTY;
+    }),
+    subscribeOnMountedUntilUnmount()
+  );
+
+  return () => {
+    return (
+      <MermaidContainer ref={$el} class={"mermaid"}>
+        {props.code}
+      </MermaidContainer>
+    );
+  };
+});
+
+const MermaidContainer = styled("div")({
+  "& > svg": {
+    minWidth: "80%"
+  }
+});
+