fix: css & static method

Author: WindRunnerMax

README.md

@@ -14,45 +14,49 @@
 流程图编辑器，支持独立的流程图编辑器包以及`DrawIO`嵌入通信方案。  
 
 ```bash
+# Install
 $ npm i embed-drawio
+
+# Development
+$ npm run build:dist
+$ npm run dev
 ```
 ## 独立编辑器
-支持独立的流程图编辑器编辑与展示功能。
+支持独立的流程图编辑器编辑与渲染。
 
-使用方法可参考`example/app.tsx`，由于包体积原因，强烈建议以懒加载方式引入。
+使用方法可参考`example/index.tsx`，由于包体积原因，强烈建议以懒加载方式引入。
 
 ```js
-import type * as DiagramEditor from "embed-drawio/dist/es/core/editor";
-import type * as DiagramViewer from "embed-drawio/dist/es/core/viewer";
+import type { DiagramEditor } from "embed-drawio/dist/es/core/editor";
+import type { DiagramViewer } from "embed-drawio/dist/es/core/viewer";
 
 let editor: typeof DiagramEditor | null = null;
-export const diagramEditorLoader = (): Promise<typeof DiagramEditor> => {
+export const loadEditor = async (): Promise<typeof DiagramEditor> => {
   if (editor) return Promise.resolve(editor);
-  return Promise.all([
-    import(
-      /* webpackChunkName: "embed-drawio-editor" */ "embed-drawio/dist/es/core/editor"
-    ),
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+  const res = await Promise.all([
+    import(/* webpackChunkName: "embed-drawio-editor" */ "embed-drawio/dist/es/core/editor"),
+    // @ts-expect-error css declaration
     import(/* webpackChunkName: "embed-drawio-css" */ "embed-drawio/dist/es/index.css"),
-  ]).then(res => (editor = res[0]));
+  ]);
+  editor = res[0].DiagramEditor;
+  return editor;
 };
 
 let viewer: typeof DiagramViewer | null = null;
-export const diagramViewerLoader = (): Promise<typeof DiagramViewer> => {
+export const loadViewer = async (): Promise<typeof DiagramViewer> => {
   if (viewer) return Promise.resolve(viewer);
-  return Promise.all([
-    import(
-      /* webpackChunkName: "embed-drawio-viewer" */ "embed-drawio/dist/es/core/viewer"
-    ),
-  ]).then(res => (viewer = res[0]));
+  const res = await Promise.all([
+    import(/* webpackChunkName: "embed-drawio-viewer" */ "embed-drawio/dist/es/core/viewer"),
+  ]);
+  viewer = res[0].DiagramViewer;
+  return viewer;
 };
 ```
 
 ## 嵌入DrawIO
 支持`DrawIO`的嵌入通信方案。
 
-使用方法可参考`example/app.tsx`，由于`sideEffects`原因，强烈建议以路径方式引入。
+使用方法可参考`example/index.tsx`，由于`sideEffects`原因，强烈建议以路径方式引入。
 
 
 ```js

example/index.tsx

@@ -1,14 +1,15 @@
 import "./index.css";
+import "../dist/es/index.css";
 import ReactDOM from "react-dom";
 import type { FC } from "react";
 import { useEffect, useRef, useState } from "react";
 import { SVG_DATA, XML_DATA } from "./constant";
 import { clearElement } from "./utils";
 import { loadEditor, loadViewer } from "./loader";
-import { stringToXml, xmlToString } from "../src/utils/xml";
-import { base64ToSvgString, stringToSvg } from "../src/utils/svg";
-import { getLanguage } from "../src/editor/i18n";
-import { EditorBus } from "../src/event";
+import { stringToXml, xmlToString } from "../dist/es/utils/xml";
+import { base64ToSvgString, stringToSvg } from "../dist/es/utils/svg";
+import { getLanguage } from "../dist/es/editor/i18n";
+import { EditorBus } from "../dist/es/event";
 
 const DiagramExample: FC = () => {
   const [loading, setLoading] = useState(true);

example/loader.ts

@@ -1,20 +1,20 @@
-import type { DiagramEditor } from "../src/core/editor";
-import type { DiagramViewer } from "../src/core/viewer";
+import type { DiagramEditor } from "../dist/es/core/editor";
+import type { DiagramViewer } from "../dist/es/core/viewer";
 
 let editor: typeof DiagramEditor | null = null;
 let viewer: typeof DiagramViewer | null = null;
 
 export const loadEditor = (): Promise<typeof DiagramEditor> => {
   if (editor) return Promise.resolve(editor);
-  return import("../src/core/editor").then(res => {
+  return import("../dist/es/core/editor").then(res => {
     editor = res.DiagramEditor;
     return editor;
   });
 };
 
 export const loadViewer = (): Promise<typeof DiagramViewer> => {
   if (viewer) return Promise.resolve(viewer);
-  return import("../src/core/viewer").then(res => {
+  return import("../dist/es/core/viewer").then(res => {
     viewer = res.DiagramViewer;
     return viewer;
   });

example/utils.ts

@@ -1,4 +1,4 @@
-import { xmlToString } from "../src/utils/xml";
+import { xmlToString } from "../dist/es/utils/xml";
 
 export const clearElement = (element: HTMLElement | null): void => {
   element && element.childNodes.forEach(node => element.removeChild(node));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "embed-drawio",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "files": [
     "dist",
     "pnpm-lock.yaml"
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "dev": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "build": "npm run build:dist && react-app-rewired build",
     "build:es": "tsc -p tsconfig.build.json",
     "build:lib": "tsc -p tsconfig.lib.json",
     "build:css": "gulp -f gulpfile.js",
@@ -24,7 +24,7 @@
     "lint": "npm run lint-es && npm run lint-style"
   },
   "dependencies": {
-    "laser-utils": "0.0.2-alpha.13",
+    "laser-utils": "0.0.5-alpha.10",
     "mxgraph": "4.2.2",
     "pako": "1.0.6",
     "sanitize-html": "2.7.3",
@@ -35,8 +35,8 @@
     "@types/node": "12.0.0",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
-    "@typescript-eslint/eslint-plugin": "5.4.0",
-    "@typescript-eslint/parser": "5.4.0",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
     "customize-cra": "1.0.0",
     "eslint": "7.11.0",
     "eslint-config-prettier": "8.3.0",
@@ -53,7 +53,7 @@
     "react-dom": "17.0.2",
     "stylelint": "14.8.5",
     "stylelint-config-standard": "25.0.0",
-    "typescript": "4.1.2"
+    "typescript": "5.3.2"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [