umd

Author: draedful

package-lock.json

@@ -19,7 +19,8 @@
   "scripts": {
     "dev": "npm run storybook",
     "build": "npm run clean && npm run build:graph && npm run build:react",
-    "build:graph": "npm run clean:graph && rollup -c --config-package graph && tsc --project packages/graph/tsconfig.json --emitDeclarationOnly",
+    "build:graph": "npm run clean:graph && rollup -c --config-package graph && tsc --project packages/graph/tsconfig.json --emitDeclarationOnly && npm run build:graph:umd",
+    "build:graph:umd": "rollup -c rollup.config.umd.mjs",
     "build:react": "npm run clean:react && rollup -c --config-package react && tsc --project packages/react/tsconfig.json --emitDeclarationOnly",
     "watch": "rollup -c --watch",
     "typecheck": "tsc -b",
@@ -67,6 +68,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.4",
     "@size-limit/preset-big-lib": "^11.2.0",
     "@storybook/addon-docs": "^9.1.2",

package.json

@@ -4,6 +4,8 @@
   "description": "Modern graph editor component - core library with Canvas rendering, state management, and plugins",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
+  "umd": "./dist/graph.umd.js",
+  "umd:min": "./dist/graph.umd.min.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "keywords": [
@@ -22,6 +24,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "umd": "./dist/graph.umd.js",
       "default": "./dist/index.js"
     },
     "./utils": {

packages/graph/package.json

@@ -0,0 +1,20 @@
+// UMD-specific exports - only essential classes and enums
+export { ESchedulerPriority } from "./lib/Scheduler";
+export { ECanChangeBlockGeometry } from "./store/settings";
+export { ECameraScaleLevel } from "./services/camera/CameraService";
+export { EAnchorType } from "./store/anchor/Anchor";
+export { ESelectionStrategy } from "./services/selection/types";
+export { GraphState } from "./graph";
+
+export { Anchor, type TAnchor, type TAnchorProps } from "./components/canvas/anchors";
+export { BaseConnection } from "./components/canvas/connections";
+export { BlockConnection } from "./components/canvas/connections";
+export { BlockGroups } from "./components/canvas/groups";
+export { Block as CanvasBlock, type TBlock } from "./components/canvas/blocks/Block";
+export { Component } from "./lib/Component";
+export { ConnectionArrow } from "./components/canvas/connections";
+export { ConnectionLayer } from "./components/canvas/layers/connectionLayer/ConnectionLayer";
+export { Graph } from "./graph";
+export { GraphComponent } from "./components/canvas/GraphComponent";
+export { Group } from "./components/canvas/groups";
+export { Layer } from "./services/Layer";

packages/graph/src/index.umd.ts

@@ -1,18 +1,24 @@
 import { useMemo } from "react";
 
-import { Graph, TBlock } from "@gravity-ui/graph";
+import { Graph } from "@gravity-ui/graph";
+import type { BlockState, CanvasBlock, TBlock } from "@gravity-ui/graph";
 import { computed } from "@preact/signals-core";
 
 import { useSignal } from "./useSignal";
 
-export function useBlockState<T extends TBlock>(graph: Graph, block: T | T["id"]) {
+export function useBlockState<T extends TBlock>(graph: Graph, block: T | T["id"]): BlockState<T> | undefined {
   const signal = useMemo(() => {
-    return computed(() => graph.rootStore.blocksList.getBlockState(typeof block === "object" ? block.id : block));
+    return computed(
+      () =>
+        graph.rootStore.blocksList.getBlockState(typeof block === "object" ? block.id : block) as
+          | BlockState<T>
+          | undefined
+    );
   }, [graph, block]);
   return useSignal(signal);
 }
 
-export function useBlockViewState<T extends TBlock>(graph: Graph, block: T | T["id"]) {
-  const blockState = useBlockState(graph, block);
-  return blockState?.getViewComponent();
+export function useBlockViewState<T extends TBlock>(graph: Graph, block: T | T["id"]): CanvasBlock<T> | undefined {
+  const blockState = useBlockState<T>(graph, block);
+  return blockState?.getViewComponent() as CanvasBlock<T> | undefined;
 }

packages/react/src/hooks/useBlockState.ts

@@ -26,7 +26,23 @@ export type HookGraphParams = Pick<TGraphConfig, "settings" | "layers"> & {
   };
 };
 
-export function useGraph(config: HookGraphParams) {
+export type UseGraphResult = {
+  graph: Graph;
+  api: Graph["api"];
+  setSettings: (settings: Partial<TGraphSettingsConfig>) => void;
+  start: () => void;
+  stop: () => void;
+  setViewConfiguration: (viewConfiguration: HookGraphParams["viewConfiguration"]) => void;
+  addLayer: <T extends Constructor<Layer> = Constructor<Layer>>(
+    layerCtor: T,
+    props: LayerPublicProps<T>
+  ) => InstanceType<T>;
+  setEntities: <B extends TBlock, C extends TConnection>(entities: { blocks?: B[]; connections?: C[] }) => void;
+  updateEntities: <B extends TBlock, C extends TConnection>(entities: { blocks?: B[]; connections?: C[] }) => void;
+  zoomTo: (target: TGraphZoomTarget, config?: ZoomConfig) => void;
+};
+
+export function useGraph(config: HookGraphParams): UseGraphResult {
   const graph = useMemo(() => {
     if (config.graph) {
       return config.graph;
@@ -98,5 +114,5 @@ export function useGraph(config: HookGraphParams) {
     zoomTo: useFn((target: TGraphZoomTarget, config?: ZoomConfig) => {
       graph.zoomTo(target, config);
     }),
-  };
+  } as const;
 }

packages/react/src/hooks/useGraph.ts

@@ -0,0 +1,49 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+
+const createConfig = (minify = false) => ({
+  input: "packages/graph/src/index.umd.ts",
+  output: {
+    file: minify ? "packages/graph/dist/graph.umd.min.js" : "packages/graph/dist/graph.umd.js",
+    format: "umd",
+    name: "GravityGraph",
+    sourcemap: true,
+  },
+  plugins: [
+    resolve({
+      extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
+      browser: true,
+    }),
+    typescript({
+      tsconfig: "packages/graph/tsconfig.json",
+      declaration: false,
+    }),
+    commonjs(),
+    postcss({
+      extract: false,
+      inject: true,
+      modules: false,
+    }),
+    ...(minify
+      ? [
+          terser({
+            compress: {
+              drop_console: false,
+              drop_debugger: true,
+              pure_funcs: [],
+              ecma: 2015,
+            },
+            format: {
+              // Нужно уточнить, нужно ли Добавить copyright лицензию
+              comments: false,
+            },
+          }),
+        ]
+      : []),
+  ],
+});
+
+export default [createConfig(false), createConfig(true)];