# 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.mjs` and `go-debug.mjs` 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 * as go from '../release/go.mjs';

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.mjs`. A debug version is also available: `release/go-debug.mjs`.

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.mjs";
      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>