@eclipse-glsp/client 0.9.0-next.f54fd689 → 0.9.0

package/src/base/action-dispatcher.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,13 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject } from "inversify";
-import { Action, ActionDispatcher, isResponseAction, RequestAction, ResponseAction } from "sprotty";
-
-import { ModelInitializationConstraint } from "./model-initialization-constraint";
+import { Action, isResponseAction, RequestAction, ResponseAction } from '@eclipse-glsp/protocol';
+import { inject } from 'inversify';
+import { ActionDispatcher } from 'sprotty';
+import { ModelInitializationConstraint } from './model-initialization-constraint';
 
 export class GLSPActionDispatcher extends ActionDispatcher {
-
     protected readonly timeouts: Map<string, NodeJS.Timeout> = new Map();
 
     @inject(ModelInitializationConstraint) protected initiailizationConstraint: ModelInitializationConstraint;
@@ -29,7 +28,7 @@ export class GLSPActionDispatcher extends ActionDispatcher {
         return super.initialize().then(() => this.startModelInitialization());
     }
 
-    startModelInitialization() {
+    startModelInitialization(): void {
         this.logger.log(this, 'Starting model initialization mode');
         this.onModelInitialized = this.initiailizationConstraint.onInitialized();
         this.onModelInitialized.then(() => this.logger.log(this, 'Model initialization completed'));
@@ -74,7 +73,7 @@ export class GLSPActionDispatcher extends ActionDispatcher {
      * If `rejectOnTimeout` is set to false (default) the returned promise will be resolved with
      * no value, otherwise it will be rejected.
      */
-    requestUntil<Res extends ResponseAction>(action: RequestAction<Res>, timeoutMs: number = 2000, rejectOnTimeout: boolean = false): Promise<Res> {
+    requestUntil<Res extends ResponseAction>(action: RequestAction<Res>, timeoutMs = 2000, rejectOnTimeout = false): Promise<Res> {
         if (!action.requestId) {
             return Promise.reject(new Error('Request without requestId'));
         }

package/src/{utils/array-utils.ts → base/actions/focus-change-action.ts}

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,22 +13,14 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 
-export function remove<T>(array: T[], value: T): boolean {
-    const index = array.indexOf(value);
-    if (index >= 0) {
-        array.splice(index, 1);
-        return true;
-    }
-    return false;
+export class FocusStateChangedAction implements Action {
+    static KIND = 'focusStateChanged';
+    readonly kind = FocusStateChangedAction.KIND;
+    constructor(public readonly hasFocus: boolean) {}
 }
 
-export function distinctAdd<T>(array: T[], value: T): boolean {
-    if (!array.includes(value)) {
-        array.push(value);
-        return true;
-    }
-    return false;
+export function isFocusStateChangedAction(action: Action): action is FocusStateChangedAction {
+    return action.kind === FocusStateChangedAction.KIND;
 }
-
-

package/src/{features/undo-redo/model.ts → base/argumentable.ts}

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,14 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Operation } from "../../base/operations/operation";
+import { Args } from '@eclipse-glsp/protocol';
+import { SModelElement } from 'sprotty';
 
-export class UndoOperation implements Operation {
-    static readonly KIND = 'glspUndo';
-    constructor(public readonly kind = UndoOperation.KIND) { }
+export interface SArgumentable {
+    args: Args;
 }
 
-export class RedoOperation implements Operation {
-    static readonly KIND = 'glspRedo';
-    constructor(public readonly kind = RedoOperation.KIND) { }
+export function hasArguments(element?: SModelElement): element is SModelElement & SArgumentable {
+    return element !== undefined && 'args' in element;
 }

package/src/base/auto-complete/auto-complete-actions.ts

@@ -13,12 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { LabeledAction } from "sprotty/lib";
+import { LabeledAction } from '@eclipse-glsp/protocol';
 
 export interface SetAutoCompleteValueAction extends LabeledAction {
     readonly text: string;
 }
 
 export function isSetAutoCompleteValueAction(action: LabeledAction): action is SetAutoCompleteValueAction {
-    return action !== undefined && (<SetAutoCompleteValueAction>action).text !== undefined;
+    return action !== undefined && (action as SetAutoCompleteValueAction).text !== undefined;
 }

package/src/base/auto-complete/auto-complete-widget.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,20 +13,19 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { AutocompleteResult, AutocompleteSettings } from "autocompleter";
-import { Action, ILogger, isAction, isLabeledAction, LabeledAction, SModelRoot } from "sprotty/lib";
-import { toArray } from "sprotty/lib/utils/iterable";
-import { matchesKeystroke } from "sprotty/lib/utils/keyboard";
-
-import { ValidationStatus } from "../actions/edit-validation-actions";
-import { isSetAutoCompleteValueAction } from "./auto-complete-actions";
-import { IValidationDecorator } from "./validation-decorator";
+import { Action, isAction, isLabeledAction, LabeledAction, ValidationStatus } from '@eclipse-glsp/protocol';
+import { AutocompleteResult, AutocompleteSettings } from 'autocompleter';
+import { codiconCSSClasses, ILogger, SModelRoot } from 'sprotty';
+import { toArray } from 'sprotty/lib/utils/iterable';
+import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+import { isSetAutoCompleteValueAction } from './auto-complete-actions';
+import { IValidationDecorator } from './validation-decorator';
 
 export interface AutoCompleteSettings {
-    readonly noSuggestionsMessage: string;
-    readonly suggestionsClass: string;
-    readonly debounceWaitMs: number;
-    readonly showOnFocus: boolean;
+    readonly noSuggestionsMessage?: string;
+    readonly suggestionsClass?: string;
+    readonly debounceWaitMs?: number;
+    readonly showOnFocus?: boolean;
 }
 
 export interface InputValidator {
@@ -49,12 +48,11 @@ export interface TextSubmitHandler {
     executeFromTextOnlyInput(input: string): void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const configureAutocomplete: (settings: AutocompleteSettings<LabeledAction>) => AutocompleteResult = require('autocompleter');
 
-
-
 export class AutoCompleteWidget {
-    loadingIndicatorClasses = ['loading', 'fa', 'fa-spinner', 'fa-pulse', 'fa-3x', 'fa-fw'];
+    loadingIndicatorClasses = codiconCSSClasses('loading', false, true, ['loading']);
 
     protected containerElement: HTMLElement;
     protected inputElement: HTMLInputElement;
@@ -69,15 +67,18 @@ export class AutoCompleteWidget {
     protected textSubmitHandler?: TextSubmitHandler;
 
     constructor(
-        protected autoSuggestionSettings: AutoCompleteSettings,
-        protected suggestionProvider: SuggestionProvider,
-        protected suggestionSubmitHandler: SuggestionSubmitHandler,
-        protected notifyClose: () => void = () => { },
+        public autoSuggestionSettings: AutoCompleteSettings,
+        public suggestionProvider: SuggestionProvider,
+        public suggestionSubmitHandler: SuggestionSubmitHandler,
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        protected notifyClose: () => void = () => {},
         protected logger?: ILogger
-    ) { }
+    ) {}
 
-    configureValidation(inputValidator: InputValidator,
-        validationDecorator: IValidationDecorator = IValidationDecorator.NO_DECORATION): void {
+    configureValidation(
+        inputValidator: InputValidator,
+        validationDecorator: IValidationDecorator = IValidationDecorator.NO_DECORATION
+    ): void {
         this.inputValidator = inputValidator;
         this.validationDecorator = validationDecorator;
     }
@@ -105,7 +106,7 @@ export class AutoCompleteWidget {
         return inputElement;
     }
 
-    protected handleKeyDown(event: KeyboardEvent) {
+    protected handleKeyDown(event: KeyboardEvent): void {
         if (matchesKeystroke(event, 'Escape')) {
             this.notifyClose();
             return;
@@ -129,16 +130,16 @@ export class AutoCompleteWidget {
         }
     }
 
-    protected isInputElementChanged() {
+    protected isInputElementChanged(): boolean {
         return this.inputElement.value !== this.previousContent;
     }
 
-    protected invalidateValidationResultAndContextActions() {
+    protected invalidateValidationResultAndContextActions(): void {
         this.contextActions = undefined;
         this.validationDecorator.invalidate();
     }
 
-    open(root: Readonly<SModelRoot>, ...contextElementIds: string[]) {
+    open(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
         this.contextActions = undefined;
         this.autoCompleteResult = configureAutocomplete(this.autocompleteSettings(root));
         this.previousContent = this.inputElement.value;
@@ -154,25 +155,33 @@ export class AutoCompleteWidget {
             showOnFocus: this.autoSuggestionSettings.showOnFocus,
             debounceWaitMs: this.autoSuggestionSettings.debounceWaitMs,
             minLength: -1,
-            fetch: (text: string, update: (items: LabeledAction[]) => void) =>
-                this.updateSuggestions(update, text, root),
+            fetch: (text: string, update: (items: LabeledAction[]) => void) => this.updateSuggestions(update, text, root),
             onSelect: (item: LabeledAction) => this.onSelect(item),
-            render: (item: LabeledAction, currentValue: string): HTMLDivElement | undefined =>
-                this.renderSuggestions(item, currentValue),
+            render: (item: LabeledAction, currentValue: string): HTMLDivElement | undefined => this.renderSuggestions(item, currentValue),
             customize: (input: HTMLInputElement, inputRect: ClientRect | DOMRect, container: HTMLDivElement, maxHeight: number) => {
                 this.customizeInputElement(input, inputRect, container, maxHeight);
             }
         };
     }
 
-    protected customizeInputElement(input: HTMLInputElement, inputRect: ClientRect | DOMRect, container: HTMLDivElement, maxHeight: number) {
+    protected customizeInputElement(
+        input: HTMLInputElement,
+        inputRect: ClientRect | DOMRect,
+        container: HTMLDivElement,
+        maxHeight: number
+    ): void {
         // move container into our UIExtension container as this is already positioned correctly
         if (this.containerElement) {
             this.containerElement.appendChild(container);
         }
     }
 
-    protected updateSuggestions(update: (items: LabeledAction[]) => void, text: string, root: Readonly<SModelRoot>, ...contextElementIds: string[]) {
+    protected updateSuggestions(
+        update: (items: LabeledAction[]) => void,
+        text: string,
+        root: Readonly<SModelRoot>,
+        ...contextElementIds: string[]
+    ): void {
         this.onLoading();
         this.doUpdateSuggestions(text, root)
             .then(actions => {
@@ -181,12 +190,14 @@ export class AutoCompleteWidget {
                 this.onLoaded('success');
             })
             .catch(reason => {
-                if (this.logger) { this.logger.error(this, 'Failed to obtain suggestions', reason); }
+                if (this.logger) {
+                    this.logger.error(this, 'Failed to obtain suggestions', reason);
+                }
                 this.onLoaded('error');
             });
     }
 
-    protected onLoading() {
+    protected onLoading(): void {
         if (this.loadingIndicator && this.containerElement.contains(this.loadingIndicator)) {
             return;
         }
@@ -199,7 +210,7 @@ export class AutoCompleteWidget {
         return this.suggestionProvider.provideSuggestions(text);
     }
 
-    protected onLoaded(_success: 'success' | 'error') {
+    protected onLoaded(_success: 'success' | 'error'): void {
         if (this.containerElement.contains(this.loadingIndicator)) {
             this.containerElement.removeChild(this.loadingIndicator);
         }
@@ -208,7 +219,7 @@ export class AutoCompleteWidget {
         this.previousContent = this.inputElement.value;
     }
 
-    protected renderSuggestions(item: LabeledAction, value: string) {
+    protected renderSuggestions(item: LabeledAction, value: string): HTMLDivElement {
         const itemElement = document.createElement('div');
         const wordMatcher = this.espaceForRegExp(value).split(' ').join('|');
         const regex = new RegExp(wordMatcher, 'gi');
@@ -219,23 +230,25 @@ export class AutoCompleteWidget {
         return itemElement;
     }
 
-    protected espaceForRegExp(value: string) {
+    protected espaceForRegExp(value: string): string {
         return value.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     }
 
-    protected renderIcon(itemElement: HTMLDivElement, icon: string) {
+    protected renderIcon(itemElement: HTMLDivElement, icon: string): void {
         itemElement.innerHTML += `<span class="icon ${icon}"></span>`;
     }
 
     protected filterActions(filterText: string, actions: LabeledAction[]): LabeledAction[] {
-        return toArray(actions.filter(action => {
-            const label = action.label.toLowerCase();
-            const searchWords = filterText.split(' ');
-            return searchWords.every(word => label.indexOf(word.toLowerCase()) !== -1);
-        }));
+        return toArray(
+            actions.filter(action => {
+                const label = action.label.toLowerCase();
+                const searchWords = filterText.split(' ');
+                return searchWords.every(word => label.indexOf(word.toLowerCase()) !== -1);
+            })
+        );
     }
 
-    protected onSelect(item: LabeledAction) {
+    protected onSelect(item: LabeledAction): void {
         if (isSetAutoCompleteValueAction(item)) {
             this.inputElement.value = item.text;
             // trigger update of suggestions with an keyup event
@@ -246,7 +259,7 @@ export class AutoCompleteWidget {
         }
     }
 
-    protected validateInputIfNoContextActions() {
+    protected validateInputIfNoContextActions(): void {
         if (this.isNoOrExactlyOneMatchingContextAction()) {
             this.validateInput();
         } else {
@@ -254,27 +267,30 @@ export class AutoCompleteWidget {
         }
     }
 
-    private isNoOrExactlyOneMatchingContextAction() {
-        return !this.isSuggestionAvailable()
-            || (this.contextActions
-                && this.contextActions.length === 1
-                && this.inputElement.value.endsWith(this.contextActions[0].label));
+    private isNoOrExactlyOneMatchingContextAction(): boolean | undefined {
+        return (
+            !this.isSuggestionAvailable() ||
+            (this.contextActions && this.contextActions.length === 1 && this.inputElement.value.endsWith(this.contextActions[0].label))
+        );
     }
 
-    protected isSuggestionAvailable() {
+    protected isSuggestionAvailable(): boolean | undefined {
         return this.contextActions && this.contextActions.length > 0;
     }
 
-    validateInput() {
+    validateInput(): void {
         if (this.inputValidator) {
-            this.inputValidator.validate(this.inputElement.value)
+            this.inputValidator
+                .validate(this.inputElement.value)
                 .then(result => this.validationDecorator.decorateValidationResult(result))
                 .catch(error => this.handleErrorDuringValidation(error));
         }
     }
 
-    protected handleErrorDuringValidation(error: Error) {
-        if (this.logger) { this.logger.error(this, 'Failed to validate input', error); }
+    protected handleErrorDuringValidation(error: Error): void {
+        if (this.logger) {
+            this.logger.error(this, 'Failed to validate input', error);
+        }
         this.validationDecorator.dispose();
     }
 
@@ -292,7 +308,7 @@ export class AutoCompleteWidget {
         return this.inputElement;
     }
 
-    dispose() {
+    dispose(): void {
         this.validationDecorator.dispose();
         if (this.autoCompleteResult) {
             this.autoCompleteResult.destroy();

package/src/base/auto-complete/validation-decorator.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,7 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { ValidationStatus } from "../actions/edit-validation-actions";
+import { codiconCSSString } from 'sprotty/lib/utils/codicon';
+import { ValidationStatus } from '@eclipse-glsp/protocol';
 
 export interface IValidationDecorator {
     decorateValidationResult(status: ValidationStatus): void;
@@ -24,25 +25,30 @@ export interface IValidationDecorator {
 
 export namespace IValidationDecorator {
     export const NO_DECORATION: IValidationDecorator = {
-        decorateValidationResult(_status: ValidationStatus) { },
-        isValidatedOk(): boolean { return false; },
-        invalidate() { },
-        dispose() { }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        decorateValidationResult(_status: ValidationStatus) {},
+        isValidatedOk(): boolean {
+            return false;
+        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        invalidate() {},
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        dispose() {}
     };
 }
 
 export class ValidationDecorator implements IValidationDecorator {
     warningClasses = ['warning'];
-    warningIconClasses = ['fa', 'fa-question-circle'];
+    warningIconClasses = codiconCSSString('warning');
     errorClasses = ['error'];
-    errorIconClasses = ['fa', 'fa-exclamation-circle'];
+    errorIconClasses = codiconCSSString('error');
 
-    isValidated: boolean = false;
-    hasValidationError: boolean = false;
+    isValidated = false;
+    hasValidationError = false;
 
     protected decorationDiv?: HTMLDivElement;
 
-    constructor(protected containerElement: HTMLElement) { }
+    constructor(protected containerElement: HTMLElement) {}
 
     decorateValidationResult(status: ValidationStatus): void {
         if (ValidationStatus.isError(status)) {
@@ -62,7 +68,7 @@ export class ValidationDecorator implements IValidationDecorator {
         this.switchCssClasses(this.containerElement, this.errorClasses);
         const div = this.createDecorationDiv();
         this.switchCssClasses(div, this.errorClasses);
-        div.innerHTML = `<span class="${this.errorIconClasses.join(' ')}"></span> ${message}`;
+        div.innerHTML = `<span class="${this.errorIconClasses}"></span> ${message}`;
         this.adjustPosition();
     }
 
@@ -70,11 +76,11 @@ export class ValidationDecorator implements IValidationDecorator {
         this.switchCssClasses(this.containerElement, this.warningClasses);
         const div = this.createDecorationDiv();
         this.switchCssClasses(div, this.warningClasses);
-        div.innerHTML = `<span class="${this.warningIconClasses.join(' ')}"></span> ${message}`;
+        div.innerHTML = `<span class="${this.warningIconClasses}"></span> ${message}`;
         this.adjustPosition();
     }
 
-    protected switchCssClasses(element: HTMLElement, cssClasses: string[]) {
+    protected switchCssClasses(element: HTMLElement, cssClasses: string[]): void {
         element.classList.remove(...this.errorClasses, ...this.warningClasses);
         element.classList.add(...cssClasses);
     }
@@ -91,7 +97,7 @@ export class ValidationDecorator implements IValidationDecorator {
     }
 
     protected decorationContainerWidth(): number {
-        return this.containerElement.clientWidth - 22;
+        return this.containerElement.clientWidth - 5;
     }
 
     protected adjustPosition(): void {

package/src/base/command-stack.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable } from "inversify";
-import { CommandStack, IActionDispatcher, SModelRoot, TYPES } from "sprotty";
-
-import { RedoOperation, UndoOperation } from "../features/undo-redo/model";
+import { RedoOperation, UndoOperation } from '@eclipse-glsp/protocol';
+import { inject, injectable } from 'inversify';
+import { CommandStack, IActionDispatcher, SModelRoot, TYPES } from 'sprotty';
 
 @injectable()
 export class GLSPCommandStack extends CommandStack {
-
     @inject(TYPES.IActionDispatcherProvider) protected actionDispatcher: () => Promise<IActionDispatcher>;
 
     undo(): Promise<SModelRoot> {
@@ -33,4 +31,3 @@ export class GLSPCommandStack extends CommandStack {
         return this.thenUpdate();
     }
 }
-

package/src/base/container-modules.ts

@@ -0,0 +1,112 @@
+/********************************************************************************
+ * Copyright (c) 2021 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Container, ContainerModule } from 'inversify';
+import {
+    boundsModule,
+    buttonModule,
+    defaultModule,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    expandModule,
+    exportModule,
+    fadeModule,
+    labelEditUiModule,
+    modelSourceModule,
+    openModule,
+    routingModule,
+    zorderModule
+} from 'sprotty';
+import glspCommandPaletteModule from '../features/command-palette/di.config';
+import glspContextMenuModule from '../features/context-menu/di.config';
+import { glspServerCopyPasteModule } from '../features/copy-paste/di.config';
+import glspDecorationModule from '../features/decoration/di.config';
+import glspEditLabelModule from '../features/edit-label/di.config';
+import modelHintsModule from '../features/hints/di.config';
+import glspHoverModule from '../features/hover/di.config';
+import layoutCommandsModule from '../features/layout/di.config';
+import modelSourceWatcherModule from '../features/model-source-watcher/di.config';
+import glspMouseToolModule from '../features/mouse-tool/di.config';
+import { navigationModule } from '../features/navigation/di.config';
+import glspSelectModule from '../features/select/di.config';
+import toolFeedbackModule from '../features/tool-feedback/di.config';
+import toolPaletteModule from '../features/tool-palette/di.config';
+import toolsModule from '../features/tools/di.config';
+import { markerNavigatorModule, validationModule } from '../features/validation/di.config';
+import glspViewportModule from '../features/viewport/di.config';
+import defaultGLSPModule from './di.config';
+
+export const DEFAULT_MODULES = [
+    defaultModule,
+    defaultGLSPModule,
+    boundsModule,
+    buttonModule,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    expandModule,
+    exportModule,
+    fadeModule,
+    glspCommandPaletteModule,
+    glspContextMenuModule,
+    glspDecorationModule,
+    glspEditLabelModule,
+    glspHoverModule,
+    glspMouseToolModule,
+    glspSelectModule,
+    glspServerCopyPasteModule,
+    glspViewportModule,
+    labelEditUiModule,
+    layoutCommandsModule,
+    markerNavigatorModule,
+    modelHintsModule,
+    modelSourceModule,
+    modelSourceWatcherModule,
+    navigationModule,
+    openModule,
+    toolPaletteModule,
+    routingModule,
+    toolFeedbackModule,
+    toolsModule,
+    validationModule,
+    zorderModule
+];
+
+/**
+ * Creates a GLSP Client container with the GLSP default modules and the specified custom `modules`.
+ *
+ * You can still customize the default modules in two ways.
+ *
+ * First, you can unload default modules and load them again with your custom code.
+ *
+ * ```typescript
+ * const container = createClientContainer(myModule1, myModule2);
+ * container.unload(modelSourceWatcherModule);
+ * container.load(myModelSourceWatcherModule);
+ * ```
+ *
+ * Second, you can unbind or rebind implementations that are originally bound in one of the default modules.
+ *
+ * ```typescript
+ * rebind(NavigationTargetResolver).to(MyNavigationTargetResolver);
+ * ```
+ * @param modules Custom modules to be loaded in addition to the default modules.
+ * @returns The created container.
+ */
+export function createClientContainer(...modules: ContainerModule[]): Container {
+    const container = new Container();
+    container.load(...DEFAULT_MODULES, ...modules);
+    return container;
+}