GoJS and ECMAScript Modules

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

Using GoJS as an ECMAScript module

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

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

  import * as go from 'gojs';

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

  <script type="module">
    import * as go from "gojs";
    . . .
  </script>

Your build environment must make sure that the "gojs" import path resolves to where you have installed the GoJS library. Often that will be in the node_modules/gojs package.

However if you have a simple static HTML page, you will need to use a relative import path instead of "gojs". Or if you want to continue to import * as go from "gojs", you can define your own importmap in HTML:

  <script type="importmap">{ "imports": { "gojs": "../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

We expect you to copy any extension file into your project. You can use either the .JS file in extensionsJSM, or if you are using TypeScript, the .TS file in that same folder. This protects you from any later changes we might make to the extension, lets you make changes to the code for your own requirements, and gives you more control over how the extension is built and bundled. Here is an example:

<script type="module">
  import * as go from "gojs";
  import { ArrangingLayout } from "../src/gojs/ArrangingLayout.js";
  import { PackedLayout } from "../src/gojs/PackedLayout.js";
  import { LinkLabelDraggingTool } from '../src/gojs/LinkLabelDraggingTool.js';

  const myDiagram =
    new go.Diagram('myDiagramDiv',
      {
        layout: new ArrangingLayout(),
        . . .
      });

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

  . . .
</script>

Note that all those modules that depend on GoJS must import exactly the same library file, as determined by your software environment. 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.

GoJS using RequireJS

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

<script id="code">
  require.config({
    // declare that the GoJS library is actually in a different directory
    paths: { "go": "../release/go" }
  });

  require(["go"], function(go) {

    var myDiagram =
      new go.Diagram("myDiagramDiv");

    . . .
  );
</script>

GoJS using script tags

You can also load the GoJS library directly with a script tag, as well as any of the extensions in the extensions folder.


<script src="https://unpkg.com/gojs"></script>
<script src="https://unpkg.com/create-gojs-kit/dist/extensions/TableLayout.js"></script>
<script>

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: new TableLayout(),
      . . .
    });
. . .
</script>