Defects of the current npm package

[hungtcs]

1. typeRoots only detect subfolders

"typeRoots": [
    "node_modules/@types",
    "node_modules/mxgraph-type-definitions"
]

for instance: mxClient is declared in node_modules/mxgraph-type-definitions/mxClient.d.ts, but typescript can not detect this, packages in @types/* not have this problem.

Possible solution:

1. move all definition files to a subfolder.
2. put mxgraph-type-definitions package under a npm organization.
3. merge this project to DefinitelyTyped.

2. Should we create a factory package to match mxgraph-type-definitions

Simple implementation:

import mxgraph from 'mxgraph';

type mxGraphOptions = {
  mxBasePath?: string,
  mxImageBasePath?: string,
  mxLanguage?: string,
  mxDefaultLanguage?: string,
  mxLoadResources?: boolean,
  mxLoadStylesheets?: boolean,
};

type mxGraphExportObject = {
  mxClient: any,
  mxLog: typeof mxLog,
  mxObjectIdentity: any,
  mxDictionary: typeof mxDictionary,
  mxResources: typeof mxResources,
  mxPoint: typeof mxPoint,
  mxRectangle: typeof mxRectangle,
  mxEffects: any,
  mxUtils: typeof mxUtils,
  mxConstants: typeof mxConstants,
  mxEventObject: typeof mxEventObject,
  mxMouseEvent: typeof mxMouseEvent,
  mxEventSource: typeof mxEventSource,
  mxEvent: typeof mxEvent,
  mxXmlRequest: typeof mxXmlRequest,
  mxClipboard: any,
  mxWindow: any,
  mxForm: any,
  mxImage: typeof mxImage,
  mxDivResizer: any,
  mxDragSource: typeof mxDragSource,
  mxToolbar: any,
  mxUndoableEdit: typeof mxUndoableEdit,
  mxUndoManager: any,
  mxUrlConverter: typeof mxUrlConverter,
  mxPanningManager: typeof mxPanningManager,
  mxPopupMenu: typeof mxPopupMenu,
  mxAutoSaveManager: any,
  mxAnimation: any,
  mxMorphing: typeof mxMorphing,
  mxImageBundle: typeof mxImageBundle,
  mxImageExport: any,
  mxAbstractCanvas2D: typeof mxAbstractCanvas2D,
  mxXmlCanvas2D: typeof mxXmlCanvas2D,
  mxSvgCanvas2D: typeof mxSvgCanvas2D,
  mxVmlCanvas2D: typeof mxVmlCanvas2D,
  mxGuide: typeof mxGuide,
  mxShape: typeof mxShape,
  mxStencil: typeof mxStencil,
  mxStencilRegistry: typeof mxStencilRegistry,
  mxMarker: typeof mxMarker,
  mxActor: typeof mxActor,
  mxCloud: typeof mxCloud,
  mxRectangleShape: typeof mxRectangleShape,
  mxEllipse: typeof mxEllipse,
  mxDoubleEllipse: typeof mxDoubleEllipse,
  mxRhombus: typeof mxRhombus,
  mxPolyline: typeof mxPolyline,
  mxArrow: typeof mxArrow,
  mxArrowConnector: typeof mxArrowConnector,
  mxText: typeof mxText,
  mxTriangle: typeof mxTriangle,
  mxHexagon: typeof mxHexagon,
  mxLine: typeof mxLine,
  mxImageShape: typeof mxImageShape,
  mxLabel: typeof mxLabel,
  mxCylinder: typeof mxCylinder,
  mxConnector: typeof mxConnector,
  mxSwimlane: typeof mxSwimlane,
  mxGraphLayout: typeof mxGraphLayout,
  mxStackLayout: typeof mxStackLayout,
  mxPartitionLayout: any,
  mxCompactTreeLayout: typeof mxCompactTreeLayout,
  mxRadialTreeLayout: typeof mxRadialTreeLayout,
  mxFastOrganicLayout: typeof mxFastOrganicLayout,
  mxCircleLayout: typeof mxCircleLayout,
  mxParallelEdgeLayout: typeof mxParallelEdgeLayout,
  mxCompositeLayout: typeof mxCompositeLayout,
  mxEdgeLabelLayout: typeof mxEdgeLabelLayout,
  mxGraphAbstractHierarchyCell: typeof mxGraphAbstractHierarchyCell,
  mxGraphHierarchyNode: typeof mxGraphHierarchyNode,
  mxGraphHierarchyEdge: typeof mxGraphHierarchyEdge,
  mxGraphHierarchyModel: typeof mxGraphHierarchyModel,
  mxSwimlaneModel: typeof mxSwimlaneModel,
  mxHierarchicalLayoutStage: typeof mxHierarchicalLayoutStage,
  mxMedianHybridCrossingReduction: typeof mxMedianHybridCrossingReduction,
  mxMinimumCycleRemover: typeof mxMinimumCycleRemover,
  mxCoordinateAssignment: typeof mxCoordinateAssignment,
  mxSwimlaneOrdering: typeof mxSwimlaneOrdering,
  mxHierarchicalLayout: typeof mxHierarchicalLayout,
  mxSwimlaneLayout: typeof mxSwimlaneLayout,
  mxGraphModel: typeof mxGraphModel,
  mxCell: typeof mxCell,
  mxGeometry: typeof mxGeometry,
  mxCellPath: typeof mxCellPath,
  mxPerimeter: typeof mxPerimeter,
  mxPrintPreview: typeof mxPrintPreview,
  mxStylesheet: typeof mxStylesheet,
  mxCellState: typeof mxCellState,
  mxGraphSelectionModel: typeof mxGraphSelectionModel,
  mxCellEditor: typeof mxCellEditor,
  mxCellRenderer: typeof mxCellRenderer,
  mxEdgeStyle: typeof mxEdgeStyle,
  mxStyleRegistry: typeof mxStyleRegistry,
  mxGraphView: typeof mxGraphView,
  mxGraph: typeof mxGraph,
  mxCellOverlay: typeof mxCellOverlay,
  mxOutline: typeof mxOutline,
  mxMultiplicity: typeof mxMultiplicity,
  mxLayoutManager: typeof mxLayoutManager,
  mxSwimlaneManager: typeof mxSwimlaneManager,
  mxTemporaryCellStates: typeof mxTemporaryCellStates,
  mxCellStatePreview: any,
  mxConnectionConstraint: typeof mxConnectionConstraint,
  mxGraphHandler: typeof mxGraphHandler,
  mxPanningHandler: typeof mxPanningHandler,
  mxPopupMenuHandler: typeof mxPopupMenuHandler,
  mxCellMarker: typeof mxCellMarker,
  mxSelectionCellsHandler: typeof mxSelectionCellsHandler,
  mxConnectionHandler: typeof mxConnectionHandler,
  mxConstraintHandler: typeof mxConstraintHandler,
  mxRubberband: typeof mxRubberband,
  mxHandle: any,
  mxVertexHandler: typeof mxVertexHandler,
  mxEdgeHandler: typeof mxEdgeHandler,
  mxElbowEdgeHandler: typeof mxElbowEdgeHandler,
  mxEdgeSegmentHandler: typeof mxEdgeSegmentHandler,
  mxKeyHandler: typeof mxKeyHandler,
  mxTooltipHandler: typeof mxTooltipHandler,
  mxCellTracker: typeof mxCellTracker,
  mxCellHighlight: typeof mxCellHighlight,
  mxDefaultKeyHandler: any,
  mxDefaultPopupMenu: any,
  mxDefaultToolbar: any,
  mxEditor: any,
  mxCodecRegistry: typeof mxCodecRegistry,
  mxCodec: typeof mxCodec,
  mxObjectCodec: typeof mxObjectCodec,
  mxCellCodec: any,
  mxModelCodec: any,
  mxRootChangeCodec: any,
  mxChildChangeCodec: any,
  mxTerminalChangeCodec: any,
  mxGenericChangeCodec: any,
  mxGraphCodec: any,
  mxGraphViewCodec: any,
  mxStylesheetCodec: any,
  mxDefaultKeyHandlerCodec: any,
  mxDefaultToolbarCodec: any,
  mxDefaultPopupMenuCodec: any,
  mxEditorCodec: any,
};

export default function (options: mxGraphOptions) {
  Object.entries(options).forEach(([key, value]) => {
    window[key] = value;
  });
  const mx = mxgraph(options);
  return mx as mxGraphExportObject;
}

[hungtcs]

@tbouffard

[tbouffard]

@hungtcs I was going to create such an issue about mxClient that I cannot use on my project. Apparently, based on exchanges you had on GitHub issues, this seems ok when copying the types in our projects or using git submodule in the src/types folder

I currently don't know if we require a new 'factory' package to solve the issues. In bpmn-visualization, we have removed the previous factory package we used because this was a pain to deal with both types and exported mxGraph objects. So I will be happy not having to use such solution if alternatives exist.

The current definitions are full of /// <reference path="..." /> clauses which is discouraged: see https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#red-flags Can this be the cause of the issue? do we have to change the way we define the declaration files?

[tbouffard]

@hungtcs hi, I know you are working on a new solution to fix this issue in the @typed-mxgraph organization, I will go back to you soon on that topic. In the meantime, could you release/publish a new version of mxgraph-type-definitions to make fixes and improvements we have implemented since version 1.0.3 available to the community? Thx in advance

[hungtcs]

Hi @tbouffard , I already publish a new version(1.0.4) to npm.

[hungtcs]

@tbouffard I created a new version in @typed-mxgraph to suitable for the official package, the current way is cumbersome to use, the goal of @typed-mxgraph/typed-mxgraph is reduce user configuration. But so far, I haven't done enough testing to using on production environment

[tbouffard]

Hi @tbouffard , I already publish a new version(1.0.4) to npm.

@hungtcs thanks, you rock (as always)!

[tbouffard]

@tbouffard I created a new version in @typed-mxgraph to suitable for the official package, the current way is cumbersome to use, the goal of @typed-mxgraph/typed-mxgraph is reduce user configuration. But so far, I haven't done enough testing to using on production environment

I have recently seen this new package. I plan to have a look at it on this week.

[hungtcs]

Thanks @tbouffard.