docs: 优化 docs 项目打包，减少包体积，修复若干 bug

 - 升级 rollup 以及相关 plugins 版本，用于解决 build:umd 时 souceMap 失败的问题
 - 增加 visualizer 包用于分析打包产物
 - 修复 model 中 width/height/radius 等 properties 传 0 无效的 bug
 - docs 中 global.ts 中依赖加载通过 import 引入，之前通过 require 引入会导致 tree-shaking 失效

Author: boyongjiong

.gitignore

@@ -6,6 +6,7 @@ lib
 es
 dist
 output
+stats.html
 
 coverage
 types/**

examples/demo.html

@@ -64,6 +64,11 @@
       // 渲染实例
       lf.render(data)
 
+      // 获取图数据。可以对比一下输入和输出数据的不同
+      // 如果有 adapterIn 和 adaptOut 方法，则通过 lf.getGraphData 获取经过 adapterOut 处理过的数据
+      const graphData = lf.getGraphRawData()
+      console.log('graph data --->>>', graphData)
+
       console.log('Core --->>>', Core)
       console.log('Extension --->>>', Extension)
     </script>

package.json

@@ -71,9 +71,6 @@
   ],
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
-  "dependencies": {
-    "lodash-es": "^4.17.21"
-  },
   "devDependencies": {
     "@babel/core": "^7.22.8",
     "@babel/plugin-proposal-decorators": "^7.22.10",
@@ -91,7 +88,7 @@
     "@rollup/plugin-commonjs": "^23.0.5",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-terser": "^0.2.0",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^10.0.1",
     "@types/jest": "^29.5.5",
     "@types/lodash-es": "^4.17.12",
@@ -117,10 +114,11 @@
     "prettier": "^3.0.2",
     "pretty-quick": "^3.1.3",
     "rimraf": "^5.0.7",
-    "rollup": "^3.7.4",
-    "rollup-plugin-filesize": "^9.1.1",
+    "rollup": "^4.21.0",
+    "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "run-shared-scripts": "^1.1.5",
     "stylelint": "^15.10.3",
     "stylelint-config-prettier": "^9.0.5",

packages/vue-node-registry/src/model.ts

@@ -1,5 +1,5 @@
 import LogicFlow, { HtmlNodeModel } from '@logicflow/core'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, isNil } from 'lodash-es'
 
 export type CustomProperties = {
   // 形状属性
@@ -18,21 +18,20 @@ export type CustomProperties = {
 
 export class VueNodeModel extends HtmlNodeModel {
   setAttributes() {
-    // TODO: 解决 width、height、radius 为 0 时的问题
+    // DONE: 解决 width、height、radius 为 0 时的问题
     const { width, height, radius } = this.properties as CustomProperties
-    if (width) {
+    if (!isNil(width)) {
       this.width = width
     }
-    if (height) {
+    if (!isNil(height)) {
       this.height = height
     }
-    if (radius) {
+    if (!isNil(radius)) {
       this.radius = radius
     }
   }
 
   getTextStyle(): LogicFlow.TextNodeTheme {
-    // const { x, y, width, height } = this
     const {
       refX = 0,
       refY = 0,

pnpm-lock.yaml

@@ -3,15 +3,16 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { startCase, camelCase } from 'lodash'
 import colors from 'colors/safe'
-import fileSize from 'rollup-plugin-filesize'
 import babel from '@rollup/plugin-babel'
 import alias from '@rollup/plugin-alias'
 import terser from '@rollup/plugin-terser'
 import replace from '@rollup/plugin-replace'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
+import fileSize from 'rollup-plugin-filesize'
 import nodePolyfills from 'rollup-plugin-polyfill-node'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 export function formatName(name) {
   const realName = name
@@ -76,9 +77,13 @@ export function rollupConfig(config = {}) {
     output: outputs,
     plugins: [
       babel({ babelHelpers: 'bundled' }),
-      typescript({ declaration: false }),
       resolve(),
       commonjs(),
+      typescript({
+        declaration: false,
+        sourceMap: true,
+        inlineSources: true,
+      }),
       replace({
         preventAssignment: true,
         'process.env.NODE_ENV': JSON.stringify('production'),
@@ -93,8 +98,13 @@ export function rollupConfig(config = {}) {
       }),
       nodePolyfills(),
       terser({
+        format: {
+          comments: false,
+        },
+        compress: {
+          drop_console: true,
+        },
         sourceMap: true,
-        // drop_console: true,
       }),
       fileSize({
         reporter: [
@@ -141,6 +151,7 @@ export function rollupConfig(config = {}) {
         ],
       }),
       ...plugins,
+      visualizer(),
     ],
     external,
     ...others,

rollup.config.js

@@ -1,39 +1,51 @@
 /**
  * 挂载到全局
  */
+const asyncImport = async () => {
+  const LogicFlow = await import('@logicflow/core');
+  const Extension = await import('@logicflow/extension');
+  const ReactNodeRegistry = await import('@logicflow/react-node-registry');
+
+  (window as any).react = await import('react');
+  (window as any).reactDom = await import('react-dom');
+  (window as any).createRoot = await import('react-dom/client').then(
+    (m) => m.createRoot,
+  );
+
+  (window as any).insertCSS = await import('insert-css');
+  (window as any).antd = await import('antd');
+  (window as any).DownOutlined = await import('@ant-design/icons').then(
+    (m) => m.DownOutlined,
+  );
+
+  (window as any).LogicFlow = LogicFlow.default;
+  (window as any).Extension = Extension;
+
+  (window as any).BaseNode = LogicFlow.BaseNode;
+  (window as any).BaseNodeModel = LogicFlow.BaseNodeModel;
+  (window as any).CircleNodeModel = LogicFlow.CircleNodeModel;
+  (window as any).CircleNode = LogicFlow.CircleNode;
+  (window as any).h = LogicFlow.h;
+  (window as any).RectNode = LogicFlow.RectNode;
+  (window as any).RectNodeModel = LogicFlow.RectNodeModel;
+  (window as any).PolygonNode = LogicFlow.PolygonNode;
+  (window as any).PolygonNodeModel = LogicFlow.PolygonNodeModel;
+  (window as any).HtmlNode = LogicFlow.HtmlNode;
+  (window as any).EllipseNode = LogicFlow.EllipseNode;
+  (window as any).EllipseNodeModel = LogicFlow.EllipseNodeModel;
+  (window as any).HtmlNodeModel = LogicFlow.HtmlNodeModel;
+  (window as any).PolylineEdge = LogicFlow.PolylineEdge;
+  (window as any).PolylineEdgeModel = LogicFlow.PolylineEdgeModel;
+  (window as any).BezierEdgeModel = LogicFlow.BezierEdgeModel;
+  (window as any).BezierEdge = LogicFlow.BezierEdge;
+  (window as any).GraphModel = LogicFlow.GraphModel;
+
+  (window as any).CurvedEdge = Extension.CurvedEdge;
+  (window as any).CurvedEdgeModel = Extension.CurvedEdgeModel;
+  (window as any).register = ReactNodeRegistry.register;
+  (window as any).Portal = ReactNodeRegistry.Portal;
+};
+
 if (window) {
-  (window as any).react = require('react');
-  (window as any).reactDom = require('react-dom');
-  (window as any).createRoot = require('react-dom/client').createRoot;
-  (window as any).antd = require('antd');
-  (window as any).insertCSS = require('insert-css');
-  (window as any).LogicFlow = require('@logicflow/core').default;
-  (window as any).Extension = require('@logicflow/extension');
-  (window as any).BaseNode = require('@logicflow/core').BaseNode;
-  (window as any).BaseNodeModel = require('@logicflow/core').BaseNodeModel;
-  (window as any).CircleNodeModel = require('@logicflow/core').CircleNodeModel;
-  (window as any).CircleNode = require('@logicflow/core').CircleNode;
-  (window as any).h = require('@logicflow/core').h;
-  (window as any).RectNode = require('@logicflow/core').RectNode;
-  (window as any).RectNodeModel = require('@logicflow/core').RectNodeModel;
-  (window as any).PolygonNode = require('@logicflow/core').PolygonNode;
-  (window as any).PolygonNodeModel =
-    require('@logicflow/core').PolygonNodeModel;
-  (window as any).HtmlNode = require('@logicflow/core').HtmlNode;
-  (window as any).EllipseNode = require('@logicflow/core').EllipseNode;
-  (window as any).EllipseNodeModel =
-    require('@logicflow/core').EllipseNodeModel;
-  (window as any).HtmlNodeModel = require('@logicflow/core').HtmlNodeModel;
-  (window as any).PolylineEdge = require('@logicflow/core').PolylineEdge;
-  (window as any).PolylineEdgeModel =
-    require('@logicflow/core').PolylineEdgeModel;
-  (window as any).BezierEdgeModel = require('@logicflow/core').BezierEdgeModel;
-  (window as any).BezierEdge = require('@logicflow/core').BezierEdge;
-  (window as any).GraphModel = require('@logicflow/core').GraphModel;
-  (window as any).DownOutlined = require('@ant-design/icons').DownOutlined;
-  (window as any).CurvedEdge = require('@logicflow/extension').CurvedEdge;
-  (window as any).CurvedEdgeModel =
-    require('@logicflow/extension').CurvedEdgeModel;
-  (window as any).register = require('@logicflow/react-node-registry').register;
-  (window as any).Portal = require('@logicflow/react-node-registry').Portal;
+  asyncImport();
 }

sites/docs/.dumi/global.ts

@@ -422,6 +422,7 @@ export default defineConfig({
         libraryDirectory: 'es',
         style: true,
       },
+      'antd',
     ],
     // 下面的 @ant-design/icons 和 lodash-es 需要按需加载，但目前看来不起作用（或者是起作用了，就那么大。需要确认下）
     [

sites/docs/.dumirc.ts

@@ -36,9 +36,8 @@
     "@logicflow/react-node-registry": "workspace:*",
     "antd": "^5.4.0",
     "insert-css": "^2.0.0",
-    "lottie-web": "^5.12.2",
-    "rc-util": "^5.43.0",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "repository": "https://github.com/didi/LogicFlow",
   "browserslist": [

sites/docs/package.json

@@ -11,6 +11,6 @@
       "@@/*": [".dumi/tmp/*"]
     }
   },
-  "exclude": ["examples"],
+  "exclude": ["examples/**/*.tsx"],
   "include": [".dumirc.ts", "src/**/*"]
 }