GoJS and ES6 Modules

The GoJS installation contains the GoJS library as an ES6 module, extensions as ES6 modules, and examples of using GoJS with ES6 modules.

Using GoJS as an ES6 module

The GoJS library file "go.js" does not use the export keyword, for compatibility with all JavaScript environments. So we have had to provide different libraries that are ES6 modules. In the release folder, they are the go-module.js and go-debug-module.js files. In addition, there is an ES6 module-specific TypeScript definition file: go-module.d.ts.

In the extensionsJSM directory, all of the samples use ES6 modules. Each of the JavaScript or TypeScript files imports the GoJS library this way:

  import * as go from '../release/go-module.js';

In order to load GoJS and other ES6 modules, the HTML page also must use the type="module" script tag:

  <script type="module">
    import * as go from "../release/go-module.js";
    . . .
  </script>

Most browsers will not display resources with <script type="module"> if they are served from a local file system, so you will need to open an HTML page using modules from a web server to see the results on localhost:.

Using Extension Modules

Another example, this time using an extension:

  <script type="module">
    import * as go from "../release/go-module.js";
    import { LinkLabelDraggingTool } from '../extensionsJSM/LinkLabelDraggingTool.js';

    const $ = go.GraphObject.make;

    const myDiagram =
      new go.Diagram('myDiagramDiv', . . .);

    // install the LinkLabelDraggingTool as a "mouse move" tool
    myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelDraggingTool());

    . . .
  </script>

Note that all those modules the depend on GoJS must import exactly the same library file, in this case "../release/go-module.js". Any inconsistencies will cause the GoJS library to be loaded multiple times, which can cause subtle errors and thus results in the library signaling error.

We recommend that you copy the extension file(s) that you want to use into your own project so that you can be sure that all of the import statements import the same GoJS library. The extensions are all in TypeScript and were all compiled with this tsconfg.json file:

{
  "compilerOptions": {
    "target": "es6",
    "strict": true
  }
}

GoJS with RequireJS

Both the go.js library and the go-debug.js library can be loaded via RequireJS.

The extensionsTS directory contains all of the extension classes from the extensions directory, but in TypeScript and pre-compiled as UMD modules. This is reflected in that directory's tsconfig.json:

{
  "compilerOptions": {
    "module": "umd",
    "target": "es5",
    "strict": true
  }
}

The generated JavaScript can then be loaded as UMD modules via require.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
  <script id="code">
  function init() {
    require(["CheckBoxesScript"], function (app) {
      app.init();
    });
  }
  </script>