chore: import explicit files

This prepares us to migrate diagram-js to an ES module.

Related to #863

lib/Diagram.js

@@ -1,6 +1,6 @@
 import { Injector } from 'didi';
 
-import CoreModule from './core';
+import CoreModule from './core/index.js';
 
 /**
  * @typedef {import('didi').InjectionContext} InjectionContext

lib/Diagram.spec.ts

@@ -1,12 +1,12 @@
-import Diagram from './Diagram';
+import Diagram from './Diagram.js';
 
-import CommandModule from './command';
+import CommandModule from './command/index.js';
 
-import CoreModule from './core';
-import EventBus from './core/EventBus';
+import CoreModule from './core/index.js';
+import EventBus from './core/EventBus.js';
 
-import ModelingModule from './features/modeling';
-import Modeling from './features/modeling/Modeling';
+import ModelingModule from './features/modeling/index.js';
+import Modeling from './features/modeling/Modeling.js';
 
 let diagram = new Diagram();
 

lib/command/CommandHandler.spec.ts

@@ -1,7 +1,7 @@
-import CommandHandler from './CommandHandler';
-import { CommandContext } from './CommandStack';
+import CommandHandler from './CommandHandler.js';
+import { CommandContext } from './CommandStack.js';
 
-import Canvas from '../core/Canvas';
+import Canvas from '../core/Canvas.js';
 
 export class AddShapeHandler implements CommandHandler {
   private _canvas: Canvas;

lib/command/CommandHandler.ts

@@ -1,5 +1,5 @@
-import { ElementLike } from "../core/Types";
-import { CommandContext } from "./CommandStack";
+import { ElementLike } from '../core/Types.js';
+import { CommandContext } from './CommandStack.js';
 
 /**
  * A command handler that may be registered via

lib/command/CommandInterceptor.js

@@ -7,9 +7,9 @@ import {
 } from 'min-dash';
 
 /**
- * @typedef {import('../core/Types').ElementLike} ElementLike
- * @typedef {import('../core/EventBus').default} EventBus
- * @typedef {import('./CommandStack').CommandContext} CommandContext
+ * @typedef {import('../core/Types.js').ElementLike} ElementLike
+ * @typedef {import('../core/EventBus.js').default} EventBus
+ * @typedef {import('./CommandStack.js').CommandContext} CommandContext
  *
  * @typedef {string|string[]} Events
  * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
@@ -28,7 +28,7 @@ var DEFAULT_PRIORITY = 1000;
  * @example
  *
  * ```javascript
- * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+ * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor.js';
  *
  * class CommandLogger extends CommandInterceptor {
  *   constructor(eventBus) {

lib/command/CommandInterceptor.spec.ts

@@ -1,8 +1,8 @@
-import CommandInterceptor from './CommandInterceptor';
+import CommandInterceptor from './CommandInterceptor.js';
 
-import EventBus from '../core/EventBus';
+import EventBus from '../core/EventBus.js';
 
-import Modeling from '../features/modeling/Modeling';
+import Modeling from '../features/modeling/Modeling.js';
 
 export class AddShapeBehavior extends CommandInterceptor {
   static $inject = [ 'eventBus', 'modeling' ];

lib/command/CommandStack.js

@@ -6,10 +6,10 @@ import {
 /**
  * @typedef {import('didi').Injector} Injector
  *
- * @typedef {import('../core/Types').ElementLike} ElementLike
+ * @typedef {import('../core/Types.js').ElementLike} ElementLike
  *
- * @typedef {import('../core/EventBus').default} EventBus
- * @typedef {import('./CommandHandler').default} CommandHandler
+ * @typedef {import('../core/EventBus.js').default} EventBus
+ * @typedef {import('./CommandHandler.js').default} CommandHandler
  *
  * @typedef { any } CommandContext
  * @typedef { {

lib/command/CommandStack.spec.ts

@@ -1,9 +1,9 @@
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import CommandModule from '.';
-import CommandStack from './CommandStack';
+import CommandModule from './index.js';
+import CommandStack from './CommandStack.js';
 
-import { AddShapeHandler } from './CommandHandler.spec';
+import { AddShapeHandler } from './CommandHandler.spec.js';
 
 const diagram = new Diagram({
   modules: [

lib/command/index.js

@@ -1,4 +1,4 @@
-import CommandStack from './CommandStack';
+import CommandStack from './CommandStack.js';
 
 /**
  * @type { import('didi').ModuleDeclaration }

lib/core/Canvas.js

@@ -16,14 +16,14 @@ import {
 import {
   add as collectionAdd,
   remove as collectionRemove
-} from '../util/Collections';
+} from '../util/Collections.js';
 
 import {
   getType,
   getBBox as getBoundingBox
-} from '../util/Elements';
+} from '../util/Elements.js';
 
-import { asTRBL } from '../layout/LayoutUtil';
+import { asTRBL } from '../layout/LayoutUtil.js';
 
 import {
   append as svgAppend,
@@ -38,10 +38,10 @@ import { createMatrix as createMatrix } from 'tiny-svg';
 
 
 /**
- * @typedef {import('./Types').ConnectionLike} ConnectionLike
- * @typedef {import('./Types').RootLike} RootLike
- * @typedef {import('./Types').ParentLike } ParentLike
- * @typedef {import('./Types').ShapeLike} ShapeLike
+ * @typedef {import('./Types.js').ConnectionLike} ConnectionLike
+ * @typedef {import('./Types.js').RootLike} RootLike
+ * @typedef {import('./Types.js').ParentLike } ParentLike
+ * @typedef {import('./Types.js').ShapeLike} ShapeLike
  *
  * @typedef { {
  *   container?: HTMLElement;
@@ -67,14 +67,14 @@ import { createMatrix as createMatrix } from 'tiny-svg';
  *   outer: Dimensions;
  * } & Rect } CanvasViewbox
  *
- * @typedef {import('./ElementRegistry').default} ElementRegistry
- * @typedef {import('./EventBus').default} EventBus
- * @typedef {import('./GraphicsFactory').default} GraphicsFactory
+ * @typedef {import('./ElementRegistry.js').default} ElementRegistry
+ * @typedef {import('./EventBus.js').default} EventBus
+ * @typedef {import('./GraphicsFactory.js').default} GraphicsFactory
  *
- * @typedef {import('../util/Types').Dimensions} Dimensions
- * @typedef {import('../util/Types').Point} Point
- * @typedef {import('../util/Types').Rect} Rect
- * @typedef {import('../util/Types').RectTRBL} RectTRBL
+ * @typedef {import('../util/Types.js').Dimensions} Dimensions
+ * @typedef {import('../util/Types.js').Point} Point
+ * @typedef {import('../util/Types.js').Rect} Rect
+ * @typedef {import('../util/Types.js').RectTRBL} RectTRBL
  */
 
 function round(number, resolution) {

lib/core/Canvas.spec.ts

@@ -1,7 +1,7 @@
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import Canvas from './Canvas';
-import ElementFactory from './ElementFactory';
+import Canvas from './Canvas.js';
+import ElementFactory from './ElementFactory.js';
 
 const diagram = new Diagram();
 

lib/core/ElementFactory.js

@@ -1,15 +1,15 @@
 import {
   create
-} from '../model';
+} from '../model/index.js';
 
 import { assign } from 'min-dash';
 
 /**
- * @typedef {import('../model/Types').Element} Element
- * @typedef {import('../model/Types').Connection} Connection
- * @typedef {import('../model/Types').Label} Label
- * @typedef {import('../model/Types').Root} Root
- * @typedef {import('../model/Types').Shape} Shape
+ * @typedef {import('../model/Types.js').Element} Element
+ * @typedef {import('../model/Types.js').Connection} Connection
+ * @typedef {import('../model/Types.js').Label} Label
+ * @typedef {import('../model/Types.js').Root} Root
+ * @typedef {import('../model/Types.js').Shape} Shape
  */
 
 /**

lib/core/ElementFactory.spec.ts

@@ -1,13 +1,13 @@
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import ElementFactory from './ElementFactory';
+import ElementFactory from './ElementFactory.js';
 
 import {
   Connection,
   Label,
   Root,
   Shape
-} from '../model/Types';
+} from '../model/Types.js';
 
 const diagram = new Diagram();
 

lib/core/ElementRegistry.js

@@ -3,9 +3,9 @@ var ELEMENT_ID = 'data-element-id';
 import { attr as svgAttr } from 'tiny-svg';
 
 /**
- * @typedef {import('./Types').ElementLike} ElementLike
+ * @typedef {import('./Types.js').ElementLike} ElementLike
  *
- * @typedef {import('./EventBus').default} EventBus
+ * @typedef {import('./EventBus.js').default} EventBus
  *
  * @typedef { (element: ElementLike, gfx: SVGElement) => boolean|any } ElementRegistryFilterCallback
  * @typedef { (element: ElementLike, gfx: SVGElement) => any } ElementRegistryForEachCallback

lib/core/ElementRegistry.spec.ts

@@ -1,8 +1,8 @@
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import ElementFactory from './ElementFactory';
-import ElementRegistry from './ElementRegistry';
-import GraphicsFactory from './GraphicsFactory';
+import ElementFactory from './ElementFactory.js';
+import ElementRegistry from './ElementRegistry.js';
+import GraphicsFactory from './GraphicsFactory.js';
 
 const diagram = new Diagram();
 

lib/core/EventBus.spec.ts

@@ -1,6 +1,6 @@
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import EventBus from './EventBus';
+import EventBus from './EventBus.js';
 
 const diagram = new Diagram();
 

lib/core/GraphicsFactory.js

@@ -6,9 +6,9 @@ import {
 import {
   getChildren,
   getVisual
-} from '../util/GraphicsUtil';
+} from '../util/GraphicsUtil.js';
 
-import { translate } from '../util/SvgTransformUtil';
+import { translate } from '../util/SvgTransformUtil.js';
 
 import { clear as domClear } from 'min-dom';
 
@@ -22,15 +22,15 @@ import {
 
 import {
   isFrameElement
-} from '../util/Elements';
+} from '../util/Elements.js';
 
 /**
- * @typedef {import('./Types').ConnectionLike} ConnectionLike
- * @typedef {import('./Types').ElementLike} ElementLike
- * @typedef {import('./Types').ShapeLike} ShapeLike
+ * @typedef {import('./Types.js').ConnectionLike} ConnectionLike
+ * @typedef {import('./Types.js').ElementLike} ElementLike
+ * @typedef {import('./Types.js').ShapeLike} ShapeLike
  *
- * @typedef {import('./ElementRegistry').default} ElementRegistry
- * @typedef {import('./EventBus').default} EventBus
+ * @typedef {import('./ElementRegistry.js').default} ElementRegistry
+ * @typedef {import('./EventBus.js').default} EventBus
  */
 
 /**

lib/core/GraphicsFactory.spec.ts

@@ -1,7 +1,7 @@
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import ElementFactory from './ElementFactory';
-import GraphicsFactory from './GraphicsFactory';
+import ElementFactory from './ElementFactory.js';
+import GraphicsFactory from './GraphicsFactory.js';
 
 const diagram = new Diagram();
 

lib/core/Types.ts

@@ -5,4 +5,4 @@ export type {
   RootLike,
   ConnectionLike,
   LabelLike
-} from '../model/Types';
+} from '../model/Types.js';

lib/core/index.js

@@ -1,10 +1,10 @@
-import DrawModule from '../draw';
+import DrawModule from '../draw/index.js';
 
-import Canvas from './Canvas';
-import ElementRegistry from './ElementRegistry';
-import ElementFactory from './ElementFactory';
-import EventBus from './EventBus';
-import GraphicsFactory from './GraphicsFactory';
+import Canvas from './Canvas.js';
+import ElementRegistry from './ElementRegistry.js';
+import ElementFactory from './ElementFactory.js';
+import EventBus from './EventBus.js';
+import GraphicsFactory from './GraphicsFactory.js';
 
 /**
  * @type { import('didi').ModuleDeclaration }

lib/draw/BaseRenderer.js

@@ -1,11 +1,11 @@
 var DEFAULT_RENDER_PRIORITY = 1000;
 
 /**
- * @typedef {import('../core/Types').ElementLike} Element
- * @typedef {import('../core/Types').ConnectionLike} Connection
- * @typedef {import('../core/Types').ShapeLike} Shape
+ * @typedef {import('../core/Types.js').ElementLike} Element
+ * @typedef {import('../core/Types.js').ConnectionLike} Connection
+ * @typedef {import('../core/Types.js').ShapeLike} Shape
  *
- * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('../core/EventBus.js').default} EventBus
  */
 
 /**

lib/draw/BaseRenderer.spec.ts

@@ -1,11 +1,11 @@
-import { Element, Connection, Shape } from '../model';
+import { Element, Connection, Shape } from '../model/index.js';
 
-import Diagram from '../Diagram';
+import Diagram from '../Diagram.js';
 
-import ElementFactory from '../core/ElementFactory';
-import GraphicsFactory from '../core/GraphicsFactory';
+import ElementFactory from '../core/ElementFactory.js';
+import GraphicsFactory from '../core/GraphicsFactory.js';
 
-import BaseRenderer from './BaseRenderer';
+import BaseRenderer from './BaseRenderer.js';
 
 class CustomRenderer extends BaseRenderer {
   canRender(element: Element): boolean {

lib/draw/DefaultRenderer.js

@@ -1,11 +1,11 @@
 import inherits from 'inherits-browser';
 
-import BaseRenderer from './BaseRenderer';
+import BaseRenderer from './BaseRenderer.js';
 
 import {
   componentsToPath,
   createLine
-} from '../util/RenderUtil';
+} from '../util/RenderUtil.js';
 
 import {
   append as svgAppend,
@@ -17,11 +17,11 @@ import { assign } from 'min-dash';
 
 import {
   isFrameElement
-} from '../util/Elements';
+} from '../util/Elements.js';
 
 /**
- * @typedef {import('../core/EventBus').default} EventBus
- * @typedef {import('./Styles').default} Styles
+ * @typedef {import('../core/EventBus.js').default} EventBus
+ * @typedef {import('./Styles.js').default} Styles
  */
 
 // apply default renderer with lowest possible priority

lib/draw/DefaultRenderer.spec.ts

@@ -1,9 +1,9 @@
-import Diagram from "../Diagram";
+import Diagram from '../Diagram.js';
 
-import DefaultRenderer from "./DefaultRenderer";
+import DefaultRenderer from './DefaultRenderer.js';
 
-import ElementFactory from "../core/ElementFactory";
-import GraphicsFactory from "../core/GraphicsFactory";
+import ElementFactory from '../core/ElementFactory.js';
+import GraphicsFactory from '../core/GraphicsFactory.js';
 
 const diagram = new Diagram();