GoJS and ES6 Modules

The GoJS kit contains examples of using GoJS with ES6 modules.

Using GoJS as an ES6 module

By default the GoJS library does not use the export keyword, for compatibility reasons. 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 libraries. In addition, there is an ES6 module-specific TypeScript definition file: go-module.d.ts.

In samplesTS, the minimalModule.html sample uses ES6. It references:

import { go } from '../release/go-module.js';

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

  <!-- requires minimalModule.js, built from minimalModule.ts -->
  <script type="module">
    import { init } from "./minimalModule.js";
    // lib needs: export const go = self.go;
    window.onload = function() {
      init();
    }
  </script>

Most browsers will not display resources with <script type="module"> if they are served from a local file system, so you may need to open minimalModule.html from a server to see the results.

GoJS Extensions as ES6 Modules

The extension classes can also be loaded as ES6 modules if you modify the tsconfig.json configuration in the extensionsTS folder, and then rebuild.

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

Recompiling those TypeScript classes will then produce module-friendly JS libraries.

Depending on your toolchain, you could also include compiler options directly into your project, as is done in the vue-webpack GoJS project. In its webpack.config.js file, we specify new compiler options for the TypeScript loader so that Webpack + Vue compiles the extensions with ES6 module support instead of the extensionsTS defaults.

/* ... in webpack.config.ts in the vue-webpack project ... */

// files with `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/,
  loader: 'ts-loader',
  options: {
    // We want to override the tsconfig file currently in:
    // vue-webpack\node_modules\gojs\extensionsTS
    // Because it uses ES5 + umd modules and we want to use ES6 + ES6.
    compilerOptions: {
      "module": "ES6",
      "target": "ES6",
      "noImplicitAny": 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="../samples/assets/require.js"></script>
<script id="code">
function init() {
  require(["CheckBoxesScript"], function (app) {
    app.init();
  });
}
</script>

GoJS with ES6 Modules

The GoJS library is available as an ES6/JavaScript module at release/go-module.js. A debug version is also available: release/go-debug-module.js.

Samples and extension classes as modules are in the extensionsJSM directory. These include the modules directly using the type="module" script tag. For example, in the sample LinkLabelDragging:

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

  const $ = go.GraphObject.make;

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

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