Tools Included in the yFiles for HTML Package

Converting ES Module Imports to UMD

Location: tools/es-modules-to-umd

Based on jscodeshift

Most demos use the ES module variant of the yFiles for HTML library via import statements. This tool converts them so that they use the UMD variant and load their dependencies via require.js. To run it, use the following command in the terminal:

> cd tools/es-modules-to-umd
> npm install
> npm run transform ../../demos

Instead of the demos folder, you can of course transform any other folder you like, e.g. only a single demo folder.

Note that the resulting demos are not runnable in this state yet, as they are missing a require.js implementation. To fix that, simply add an AMD module loader like RequireJS to the index.html of a demo:

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
  integrity="sha256-1fEPhSsRKlFKGfK3eO710tEweHh1fwokU5wFGDHO+vg="
  crossorigin="anonymous">
</script>

Converting UMD Imports to ES Modules

Location: tools/umd-to-es-modules

Based on jscodeshift

This script converts UMD imports of the yFiles library into the corresponding ES module imports.

To convert your source code, open a terminal and run:

> cd tools/umd-to-es-modules
> npm install
> npm run transform ../../demos

Instead of the demos folder, you can of course transform any other folder you like, e.g. only a single demo folder.

Note that the resulting files may not be runnable in this state yet, as the transformation might introduce syntax errors due to the removed require() calls.

Examples

Before:

require(['yfiles/view-component'], yfiles => {
  const graphComponent = new yfiles.view.GraphComponent('graphComponent')
})

After:

import { GraphComponent } from "yfiles";
const graphComponent = new GraphComponent('graphComponent')

Split Single 'yfiles' Import

Location: tools/transform-split-import

Based on jscodeshift

This script converts a single import { …​ } from 'yfiles' statement to import statements that use the specific yFiles module where the imported types reside. Additionally, it inserts an import of 'view-layout-bridge' if it detects both a view module as well as a layout module being used.

Example

Before:

import { GraphComponent, HierarchicLayout, GraphViewerInputMode } from 'yfiles'

After:

import { GraphComponent } from 'yfiles/view-component'
import { GraphViewerInputMode } from 'yfiles/view-editor'
import { HierarchicLayout } from 'yfiles/layout-hierarchic'
import 'yfiles/view-layout-bridge'

Usage

To convert your source code, open a terminal and run:

> cd tools/transform-split-import
> npm install
> npm run transform [files...]