Migration to ESM

examples/browser-app.ts

@@ -16,18 +16,18 @@
 
 import "reflect-metadata";
 
-import runCircleGraph from "./circlegraph/src/standalone";
-import runClassDiagram from "./classdiagram/src/standalone";
-import runRandomGraph from "./random-graph/src/standalone";
-import runRandomGraphDistributed from "./random-graph-distributed/src/standalone";
-import runSvgPreRendered from "./svg/src/standalone";
-import runMulticore from "./multicore/src/multicore";
-import runFlowchart from "./flowchart/src/standalone";
-import runJsxample from "./jsxample/src/standalone";
-import runStylingShowcase from "./styling-showcase/src/standalone";
-import runMicroLayoutShowcase from "./micro-layout-showcase/src/standalone";
-import runCustomViewsShowcase from "./custom-views-showcase/src/standalone";
-import runLayoutStrategiesShowcase from "./layout-strategies-showcase/src/standalone";
+import runCircleGraph from "./circlegraph/src/standalone.js";
+import runClassDiagram from "./classdiagram/src/standalone.js";
+import runRandomGraph from "./random-graph/src/standalone.js";
+import runRandomGraphDistributed from "./random-graph-distributed/src/standalone.js";
+import runSvgPreRendered from "./svg/src/standalone.js";
+import runMulticore from "./multicore/src/multicore.js";
+import runFlowchart from "./flowchart/src/standalone.js";
+import runJsxample from "./jsxample/src/standalone.js";
+import runStylingShowcase from "./styling-showcase/src/standalone.js";
+import runMicroLayoutShowcase from "./micro-layout-showcase/src/standalone.js";
+import runCustomViewsShowcase from "./custom-views-showcase/src/standalone.js";
+import runLayoutStrategiesShowcase from "./layout-strategies-showcase/src/standalone.js";
 
 const appDiv = document.getElementById('sprotty-app');
 if (appDiv) {

examples/circlegraph/src/di.config.ts

@@ -21,7 +21,7 @@ import {
     PolylineEdgeView, MouseListener, SModelElementImpl
 } from 'sprotty';
 import { Action, Point } from 'sprotty-protocol';
-import { CircleNodeView } from './views';
+import { CircleNodeView } from './views.js';
 
 const NodeCreator = Symbol('NodeCreator');
 

examples/circlegraph/src/standalone.ts

@@ -18,7 +18,7 @@ import {
     TYPES, IActionDispatcher, ElementMove, LocalModelSource
 } from 'sprotty';
 import { Bounds, Point, SEdge, SelectAction, SGraph, SNode, getBasicType, MoveAction } from 'sprotty-protocol';
-import createContainer from './di.config';
+import createContainer from './di.config.js';
 
 const NODE_SIZE = 60;
 

examples/circlegraph/src/views.tsx

@@ -15,10 +15,9 @@
  ********************************************************************************/
 
 /** @jsx svg */
-import { svg } from 'sprotty/lib/lib/jsx';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { RenderingContext, SNodeImpl, ShapeView } from 'sprotty';
+import { RenderingContext, SNodeImpl, ShapeView, svg } from 'sprotty';
 
 /**
  * A very simple example node consisting of a plain circle.

examples/classdiagram/src/di.config.ts

@@ -16,21 +16,49 @@
 import '@vscode/codicons/dist/codicon.css';
 import { Container, ContainerModule } from 'inversify';
 import {
-    TYPES, configureViewerOptions, SGraphView, SLabelView, SCompartmentView, JumpingPolylineEdgeView,
-    ConsoleLogger, LogLevel, loadDefaultModules, HtmlRootView, PreRenderedView, ExpandButtonView,
-    SRoutingHandleView, PreRenderedElementImpl, HtmlRootImpl, SGraphImpl, configureModelElement, SLabelImpl,
-    SCompartmentImpl, SEdgeImpl, SButtonImpl, SRoutingHandleImpl, RevealNamedElementActionProvider,
-    CenterGridSnapper, expandFeature, nameFeature, withEditLabelFeature, editLabelFeature,
-    RectangularNode, BezierCurveEdgeView, SBezierCreateHandleView, SBezierControlHandleView, moveFeature, selectFeature
+    BezierCurveEdgeView,
+    BezierMouseListener,
+    CenterGridSnapper,
+    ConsoleLogger,
+    ExpandButtonView,
+    HtmlRootImpl,
+    HtmlRootView,
+    JumpingPolylineEdgeView,
+    LogLevel,
+    PreRenderedElementImpl,
+    PreRenderedView,
+    RectangularNode,
+    RevealNamedElementActionProvider,
+    SBezierControlHandleView,
+    SBezierCreateHandleView,
+    SButtonImpl,
+    SCompartmentImpl,
+    SCompartmentView,
+    SEdgeImpl,
+    SGraphImpl,
+    SGraphView,
+    SLabelImpl,
+    SLabelView,
+    SRoutingHandleImpl,
+    SRoutingHandleView,
+    TYPES,
+    configureModelElement,
+    configureViewerOptions,
+    edgeIntersectionModule,
+    editLabelFeature,
+    expandFeature,
+    loadDefaultModules,
+    moveFeature,
+    nameFeature,
+    selectFeature,
+    withEditLabelFeature
 } from 'sprotty';
-import edgeIntersectionModule from 'sprotty/lib/features/edge-intersection/di.config';
-import { BezierMouseListener } from 'sprotty/lib/features/routing/bezier-edge-router';
-import { ClassDiagramLabelValidationDecorator, ClassDiagramLabelValidator } from './label-validation';
-import { ClassContextMenuItemProvider, ClassContextMenuService } from './menu';
-import { ClassLabel, ClassNode, Icon, PropertyLabel } from './model';
-import { ClassDiagramModelSource } from './model-source';
-import { PopupModelProvider } from './popup';
-import { IconView, NodeView } from './views';
+import { ClassDiagramLabelValidationDecorator, ClassDiagramLabelValidator } from './label-validation.js';
+import { ClassContextMenuItemProvider, ClassContextMenuService } from './menu.js';
+import { ClassLabel, ClassNode, Icon, PropertyLabel } from './model.js';
+import { ClassDiagramModelSource } from './model-source.js';
+import { PopupModelProvider } from './popup.js';
+import { IconView, NodeView } from './views.js';
 
 export default (containerId: string) => {
     require('sprotty/css/sprotty.css');

examples/classdiagram/src/popup.ts

@@ -19,7 +19,7 @@ import {
     TYPES, IModelFactory, IPopupModelProvider
 } from 'sprotty';
 import { PreRenderedElement, RequestPopupModelAction, SModelElement, SModelRoot } from 'sprotty-protocol';
-import { ClassNode } from './model';
+import { ClassNode } from './model.js';
 
 @injectable()
 export class PopupModelProvider implements IPopupModelProvider {

examples/classdiagram/src/standalone.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import createContainer from './di.config';
+import createContainer from './di.config.js';
 import { TYPES, LocalModelSource } from 'sprotty';
 
 export default function runClassDiagram() {

examples/classdiagram/src/views.tsx

@@ -15,12 +15,10 @@
  ********************************************************************************/
 
 /** @jsx svg */
-import { svg } from 'sprotty/lib/lib/jsx';
-
-import { RenderingContext, IView, RectangularNodeView, SNodeImpl, IViewArgs } from 'sprotty';
-import { VNode } from 'snabbdom';
-import { Icon } from './model';
 import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { IView, IViewArgs, RectangularNodeView, RenderingContext, SNodeImpl, svg } from 'sprotty';
+import { Icon } from './model.js';
 
 @injectable()
 export class NodeView extends RectangularNodeView {

examples/custom-views-showcase/src/di.config.ts

@@ -25,13 +25,13 @@ import {
 import {
     BasicShapeNode, EnhancedNode, ComplexNode, StatefulNode,
     StyledEdge, CustomLabel
-} from './model';
+} from './model.js';
 
 // Import our custom view classes
 import {
     BasicShapeView, EnhancedNodeView, ComplexNodeView, StatefulNodeView,
     StyledEdgeView, CustomLabelView
-} from './views';
+} from './views.js';
 
 export default () => {
     require('sprotty/css/sprotty.css');

examples/custom-views-showcase/src/standalone.ts

@@ -16,7 +16,7 @@
 
 import { TYPES, LocalModelSource, IActionDispatcher } from 'sprotty';
 import { SGraph, SNode, SEdge, SLabel, FitToScreenAction } from 'sprotty-protocol';
-import createContainer from './di.config';
+import createContainer from './di.config.js';
 
 export default async function runCustomViewsShowcase() {
     console.log('Starting Custom Views Showcase...');

examples/custom-views-showcase/src/views.tsx

@@ -15,11 +15,10 @@
  ********************************************************************************/
 
 /** @jsx svg */
-import { svg } from 'sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { IView, RenderingContext, IViewArgs, RectangularNodeView, PolylineEdgeView } from 'sprotty';
-import { BasicShapeNode, EnhancedNode, ComplexNode, StatefulNode, StyledEdge, CustomLabel } from './model';
+import { IView, IViewArgs, PolylineEdgeView, RectangularNodeView, RenderingContext, svg } from 'sprotty';
+import { BasicShapeNode, ComplexNode, CustomLabel, EnhancedNode, StatefulNode, StyledEdge } from './model.js';
 
 /**
  * Basic Shape View - demonstrates simple custom view creation

examples/flowchart/src/standalone.ts

@@ -16,8 +16,8 @@
 
 import { LocalModelSource, TYPES } from 'sprotty';
 import { BringToFrontAction, FitToScreenAction } from 'sprotty-protocol';
-import createContainer from './di.config';
-import { initializeModel } from './data';
+import createContainer from './di.config.js';
+import { initializeModel } from './data.js';
 
 export default async function runFlowchart() {
     const container = createContainer('sprotty');

examples/jsxample/src/di.config.ts

@@ -28,7 +28,7 @@ import {
     configureModelElement,
     configureViewerOptions,
     loadDefaultModules} from "sprotty";
-import { ExampleNodeView } from "./views";
+import { ExampleNodeView } from "./views.js";
 
 export default (containerId: string) => {
     require('../css/diagram.css');

examples/jsxample/src/standalone.ts

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 import { LocalModelSource, TYPES } from 'sprotty';
-import createContainer from './di.config';
+import createContainer from './di.config.js';
 
 export default async function runJsxample() {
     const container = createContainer('sprotty');

examples/jsxample/src/views.tsx

@@ -14,11 +14,9 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /** @jsx svg */
-import { SLabelImpl, svg } from 'sprotty';
-
 import { injectable } from "inversify";
 import { VNode } from "snabbdom";
-import { IViewArgs, RenderingContext, SShapeElementImpl, ShapeView } from "sprotty";
+import { IViewArgs, RenderingContext, SLabelImpl, SShapeElementImpl, ShapeView, svg } from 'sprotty';
 
 @injectable()
 export class ExampleNodeView extends ShapeView {

examples/layout-strategies-showcase/src/di.config.ts

@@ -41,25 +41,25 @@
     ElkFactory,
     ElkLayoutEngine,
     ILayoutConfigurator
-} from 'sprotty-elk/lib/inversify';
-import { LayoutOptions } from 'elkjs/lib/elk-api';
+} from 'sprotty-elk';
+import { LayoutOptions } from 'elkjs';
 import { SGraph, SModelIndex, SNode } from 'sprotty-protocol';
-import ElkConstructor from 'elkjs/lib/elk.bundled';
+import ElkConstructor from 'elkjs/lib/elk.bundled.js';
 import {
     ServerLayoutNode,
     LayoutEdge
-} from './model';
+} from './model.js';
 import {
     ClientLayoutNodeView,
     ServerLayoutNodeView,
     HybridLayoutNodeView,
     LayoutEdgeView
-} from './views';
+} from './views.js';
 
 /**
  * ELK factory for creating ELK layout instances
  */
-const elkFactory: ElkFactory = () => new ElkConstructor({
+const elkFactory: ElkFactory = () => new ElkConstructor.default({
     algorithms: ['layered']
 });
 
@@ -154,13 +154,13 @@
     // Layout engine configuration
     bind(ElkFactory).toConstantValue(elkFactory);
     bind(ILayoutConfigurator).to(ServerLayoutConfigurator);
     bind(TYPES.IModelLayoutEngine).toDynamicValue((context) => (
         new ElkLayoutEngine(
             context.container.get(ElkFactory), // elk factory
             undefined, // filter
             context.container.get(ILayoutConfigurator), // layout configurator
             undefined, // layout preprocessor
             undefined, // layout postprocessor
         )
     )).inSingletonScope();
 
@@ -193,13 +193,13 @@
     // Layout engine configuration
     bind(ElkFactory).toConstantValue(elkFactory);
     bind(ILayoutConfigurator).to(HybridLayoutConfigurator);
     bind(TYPES.IModelLayoutEngine).toDynamicValue((context) => (
         new ElkLayoutEngine(
             context.container.get(ElkFactory), // elk factory
             undefined, // filter
             context.container.get(ILayoutConfigurator), // layout configurator
             undefined, // layout preprocessor
             undefined, // layout postprocessor
         )
     )).inSingletonScope();
 

examples/layout-strategies-showcase/src/model.ts

@@ -40,7 +40,7 @@ export class ClientLayoutNode extends SNodeImpl {
 
     // Layout configuration
     override layout: string = 'vbox';
-    override layoutOptions?: {
+    declare layoutOptions?: {
         paddingTop?: number;
         paddingBottom?: number;
         paddingLeft?: number;
@@ -75,7 +75,7 @@ export class ServerLayoutNode extends SNodeImpl {
     nodeType?: 'service' | 'database' | 'client' | 'router' | 'gateway';
 
     // Layout constraints for server algorithms
-    override layoutOptions?: {
+    declare layoutOptions?: {
         'elk.portConstraints'?: string;
         'elk.nodeLabels.placement'?: string;
         'elk.priority'?: number;
@@ -101,7 +101,7 @@ export class HybridLayoutNode extends SNodeImpl {
 
     // Client layout for internal content
     override layout: string = 'vbox';
-    override layoutOptions?: {
+    declare layoutOptions?: {
         paddingTop?: number;
         paddingBottom?: number;
         paddingLeft?: number;

examples/layout-strategies-showcase/src/standalone.ts

@@ -16,7 +16,7 @@
 
 import { TYPES, LocalModelSource } from 'sprotty';
 import { SGraph, SNode, SEdge, SLabel, SCompartment, FitToScreenAction } from 'sprotty-protocol';
-import { createLayoutContainer } from './di.config';
+import { createLayoutContainer } from './di.config.js';
 // Global variables for the demo
 let currentContainer: any;
 let currentModelSource: LocalModelSource;

examples/layout-strategies-showcase/src/views.tsx

@@ -22,7 +22,7 @@ import { IView, RenderingContext, IViewArgs, PolylineEdgeView, ShapeView } from
 import {
     ServerLayoutNode,
     LayoutEdge
-} from './model';
+} from './model.js';
 
 /**
  * Client Layout Node View - Rich content with micro-layout

examples/micro-layout-showcase/src/di.config.ts

@@ -32,8 +32,8 @@ import {
     layoutableChildFeature,
     loadDefaultModules
 } from 'sprotty';
-import { InteractiveCardNode } from './model';
-import { ComponentView, DemoCardView, InteractiveCardView } from './views';
+import { InteractiveCardNode } from './model.js';
+import { ComponentView, DemoCardView, InteractiveCardView } from './views.js';
 
 export default () => {
     require('sprotty/css/sprotty.css');

examples/micro-layout-showcase/src/standalone.ts

@@ -16,7 +16,7 @@
 
 import { TYPES, LocalModelSource, IActionDispatcher } from 'sprotty';
 import { SGraph, SNode, SLabel, SCompartment, FitToScreenAction } from 'sprotty-protocol';
-import createContainer from './di.config';
+import createContainer from './di.config.js';
 
 export default async function runMicroLayoutShowcase() {
     const container = createContainer();
@@ -478,7 +478,7 @@
         if (input) {
             input.addEventListener('input', (e) => {
                 const target = e.target as HTMLInputElement;
                 const value = parseInt(target.value);
                 updateInteractiveCard(modelSource, { [property]: value });
             });
         }
@@ -490,7 +490,7 @@
         if (input) {
             input.addEventListener('input', (e) => {
                 const target = e.target as HTMLInputElement;
                 const value = parseInt(target.value);
                 updateInteractiveCard(modelSource, { [property]: value });
             });
         }

examples/micro-layout-showcase/src/views.tsx

@@ -15,11 +15,11 @@
  ********************************************************************************/
 
 /** @jsx svg */
-import { svg } from 'sprotty/lib/lib/jsx';
+import { svg } from 'sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { RenderingContext, ShapeView } from 'sprotty';
-import { InteractiveCardNode } from './model';
+import { InteractiveCardNode } from './model.js';
 
 /**
  * Custom view for the interactive card that shows layout effects.

examples/multicore/src/di.config.ts

@@ -20,8 +20,8 @@ import {
     loadDefaultModules, LocalModelSource, HtmlRootView, PreRenderedView, SvgExporter,
     configureModelElement, PreRenderedElementImpl, HtmlRootImpl, SLabelImpl, SCompartmentImpl
 } from 'sprotty';
-import { ProcessorView, CoreView, CrossbarView, ChannelView, SimpleCoreView } from './views';
-import { Channel, Core, Crossbar, Processor } from './chipmodel';
+import { ProcessorView, CoreView, CrossbarView, ChannelView, SimpleCoreView } from './views.js';
+import { Channel, Core, Crossbar, Processor } from './chipmodel.js';
 
 class FilteringSvgExporter extends SvgExporter {
     isExported(styleSheet: CSSStyleSheet): boolean {

examples/multicore/src/multicore.ts

@@ -20,8 +20,8 @@ import {
     CORE_DISTANCE,
     CORE_WIDTH,
     ChannelSchema, CoreSchema, CrossbarSchema, Direction, ProcessorSchema
-} from './chipmodel';
-import createContainer from './di.config';
+} from './chipmodel.js';
+import createContainer from './di.config.js';
 
 export default function runMulticore() {
     const container = createContainer();

examples/multicore/src/views.tsx

@@ -15,12 +15,10 @@
  ********************************************************************************/
 
 /** @jsx svg */
-import { svg } from 'sprotty/lib/lib/jsx';
-
-import { VNode } from "snabbdom";
-import { IView, RenderingContext, setAttr, ThunkView, RGBColor, toSVG, rgb, ShapeView, IViewArgs } from 'sprotty';
-import { CORE_DISTANCE, CORE_WIDTH, Channel, Core, Crossbar, Direction, Processor } from './chipmodel';
 import { injectable } from 'inversify';
+import { VNode } from "snabbdom";
+import { IView, IViewArgs, RenderingContext, rgb, RGBColor, setAttr, ShapeView, svg, ThunkView, toSVG } from 'sprotty';
+import { Channel, Core, CORE_DISTANCE, CORE_WIDTH, Crossbar, Direction, Processor } from './chipmodel.js';
 
 @injectable()
 export class ProcessorView implements IView {