[FIX] Fix the type definitions

README.md

@@ -107,6 +107,36 @@ You can set the BPMN content using one of the following ways:
   * Load it from an url, like this [example](https://github.com/process-analytics/bpmn-visualization-examples/blob/master/examples/display-bpmn-diagram/load-remote-bpmn-diagrams/index.html)
   * Load from your computer, like the [demo example](https://github.com/process-analytics/bpmn-visualization-examples/tree/master/examples/display-bpmn-diagram/load-local-bpmn-diagrams/index.html)
 
+#### TypeScript Support
+
+`bpmn-visualization` provides type definitions, so the integration should work out of the box in TypeScript projects.
+
+Depending on the build system used by the TypeScript project, it may get the following type errors 
+- error TS2688: Cannot find type definition file for 'typed-mxgraph'
+- error TS7016: Could not find a declaration file for module 'mxgraph'
+
+In this case, 
+- Install `@typed-mxgraph/typed-mxgraph` as devDependencies, for instance by running `npm i --save-dev @typed-mxgraph/[email protected]`
+- Declare the `typed-mxgraph` types in the `tsconfig.json` as in the following 👇
+
+```json
+{
+  "compilerOptions": {
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@typed-mxgraph"
+    ]
+  }
+}
+```
+
+Alternatively, you can set `skipLibCheck` to `true` in the `tsconfig.json` file but this limits the definition checks .
+For more details, see the [skipLibCheck documentation](https://www.typescriptlang.org/tsconfig#skipLibCheck).
+
+Advanced users that want to extend the `mxGraph` integration must configure `typed-mxgraph`.
+
+For more details, see the TypeScript projects in the [bpmn-visualization-examples repository](https://github.com/process-analytics/bpmn-visualization-examples/).
+
 
 ### 💠 Browser usage
 

rollup.config.js

@@ -124,15 +124,17 @@ function typescriptPlugin() {
   const tsSourceMap = !demoMode && !buildBundles; // TODO logic duplicated with build selection
   const tsconfigOverride = { compilerOptions: { sourceMap: tsSourceMap, declaration: tsDeclarationFiles } };
 
+  const options = {
+    typescript: require('typescript'),
+    tsconfigOverride: tsconfigOverride,
+  };
+
   // Ensure we only bundle production sources
   if (!devMode) {
-    tsconfigOverride.include = ['src/**/*'];
+    options.tsconfig = './tsconfig.bundle.json';
   }
 
-  return typescript({
-    typescript: require('typescript'),
-    tsconfigOverride: tsconfigOverride,
-  });
+  return typescript(options);
 }
 
 function withMinification(plugins) {

src/component/mxgraph/BpmnRenderer.ts

@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 
-import type Shape from '../../model/bpmn/internal/shape/Shape';
 import type { Edge, Waypoint } from '../../model/bpmn/internal/edge/edge';
+import { MessageFlow } from '../../model/bpmn/internal/edge/flows';
+import type Shape from '../../model/bpmn/internal/shape/Shape';
 import type ShapeBpmnElement from '../../model/bpmn/internal/shape/ShapeBpmnElement';
 import type Bounds from '../../model/bpmn/internal/Bounds';
-import { ShapeUtil } from '../../model/bpmn/internal';
+import { MessageVisibleKind, ShapeUtil } from '../../model/bpmn/internal';
 import CoordinatesTranslator from './renderer/CoordinatesTranslator';
 import StyleComputer from './renderer/StyleComputer';
-import { MessageFlow } from '../../model/bpmn/internal/edge/flows';
-import { MessageVisibleKind } from '../../model/bpmn/internal/edge/kinds';
 import type { BpmnGraph } from './BpmnGraph';
 import type { LoadOptions } from '../options';
 import type { RenderedModel } from '../registry/bpmn-model-registry';
@@ -148,6 +147,9 @@ export function newBpmnRenderer(graph: BpmnGraph): BpmnRenderer {
   return new BpmnRenderer(graph, new CoordinatesTranslator(graph), new StyleComputer());
 }
 
+/**
+ * @internal
+ */
 export function messageFowIconId(messageFlowId: string): string {
   return `messageFlowIcon_of_${messageFlowId}`;
 }

src/component/mxgraph/GraphCellUpdater.ts

@@ -22,6 +22,9 @@ import { ensureIsArray } from '../helpers/array-utils';
 import { OverlayConverter } from './overlay/OverlayConverter';
 import { messageFowIconId } from './BpmnRenderer';
 
+/**
+ * @internal
+ */
 export function newGraphCellUpdater(graph: BpmnGraph): GraphCellUpdater {
   return new GraphCellUpdater(graph, new OverlayConverter());
 }

src/component/mxgraph/style/utils.ts

@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import type { GlobalTaskKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal';
+import type { GlobalTaskKind, MessageVisibleKind, ShapeBpmnSubProcessKind } from '../../../model/bpmn/internal';
 import { ShapeBpmnEventBasedGatewayKind, ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal';
-import type { MessageVisibleKind } from '../../../model/bpmn/internal/edge/kinds';
 import { mxgraph } from '../initializer';
 import { BpmnStyleIdentifier } from './identifiers';
 

src/component/parser/json/converter/utils.ts

@@ -139,6 +139,6 @@ export class ConvertedElements {
   }
 }
 
-export interface CategoryValueData {
+interface CategoryValueData {
   value?: string;
 }

src/component/parser/json/warnings.ts

@@ -15,7 +15,7 @@
  */
 import type { MessageDetails } from '../parsing-messages';
 import { JsonParsingWarning } from '../parsing-messages';
-import type { ShapeBpmnElementKind } from '../../../model/bpmn/internal/shape';
+import type { ShapeBpmnElementKind } from '../../../model/bpmn/internal';
 
 export class GroupUnknownCategoryValueWarning extends JsonParsingWarning {
   constructor(readonly groupBpmnElementId: string, readonly categoryValueRef: string) {

src/component/registry/bpmn-elements-registry.ts

@@ -25,6 +25,9 @@ import type { BpmnElement, Overlay } from './types';
 import type { BpmnModelRegistry } from './bpmn-model-registry';
 import type { BpmnElementKind } from '../../model/bpmn/internal';
 
+/**
+ * @internal
+ */
 export function newBpmnElementsRegistry(bpmnModelRegistry: BpmnModelRegistry, graph: BpmnGraph): BpmnElementsRegistry {
   return new BpmnElementsRegistry(bpmnModelRegistry, new HtmlElementRegistry(new BpmnQuerySelectors(graph.container?.id)), new CssRegistry(), newGraphCellUpdater(graph));
 }

src/component/registry/bpmn-model-registry.ts

@@ -21,6 +21,9 @@ import { ShapeBpmnMarkerKind, ShapeUtil } from '../../model/bpmn/internal';
 import type { ShapeBpmnSubProcess } from '../../model/bpmn/internal/shape/ShapeBpmnElement';
 import ShapeBpmnElement from '../../model/bpmn/internal/shape/ShapeBpmnElement';
 
+/**
+ * @internal
+ */
 export class BpmnModelRegistry {
   private searchableModel: SearchableModel;
   private onLoadCallback: () => void;
@@ -71,6 +74,9 @@ function toRenderedModel(bpmnModel: BpmnModel): RenderedModel {
   return { boundaryEvents: boundaryEvents, edges: bpmnModel.edges, lanes: bpmnModel.lanes, otherFlowNodes: otherFlowNodes, pools: bpmnModel.pools, subprocesses: subprocesses };
 }
 
+/**
+ * @internal
+ */
 export interface RenderedModel {
   edges: Edge[];
   boundaryEvents: Shape[];

test/bundles/bundles.test.ts

@@ -32,13 +32,10 @@ describe('bundles', () => {
       ${'bpmn-visualization.esm.min.js'} | ${'ESM minified'}
       ${'bpmn-visualization.js'}         | ${'IIFE'}
       ${'bpmn-visualization.min.js'}     | ${'IIFE minified'}
-    `(
-      '$bundleType',
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ({ file, bundleType }) => {
-        expect(existsSync(resolve(bundlesDirectoryPath, file))).toBe(true);
-      },
-    );
+      ${'bpmn-visualization.d.ts'}       | ${'Type definitions'}
+    `('$bundleType', ({ file }: { file: string }) => {
+      expect(existsSync(resolve(bundlesDirectoryPath, file))).toBe(true);
+    });
   });
 
   it('IIFE bundle - should generate BPMN Diagram SVG', async () => {

tsconfig.bundle.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "include": [
+    "src/**/*"
+  ]
+}