ES5 Compatibility Utility Scripts and Tools

Toolkit-specific Advice

Vite

Relevant Demos: Vite, Vue, React, React Class Components, Svelte, Vue Component Node Style, React Component Node Style

yFiles works out of the box with Vite and there are no special caveats that you need to look out for when you load yFiles as an NPM dependency.

To include the @yworks/optimizer, you can easily add it as Rollup plugin to the vite.config.ts:

import optimizer from '@yworks/optimizer/rollup-plugin'
// ...
export default defineConfig(({ mode }) => {
  const plugins = []
  if (mode === 'production') {
    plugins.push(optimizer({ logLevel: 'info' }))
  }
  return {
    // ... other configurations
    plugins
  }
})

Webpack

Relevant Demos: webpack, Webpack Lazy Load yFiles, Webpack Lazy Load Layout, Web Worker Webpack

Separate yFiles Chunk

Code Splitting allows you to split your code into multiple chunks. It is usually a good idea to have the yFiles library files in a separate chunk as they rarely change and thus can be cached for a longer time.

To achieve a separate yFiles chunk, add an entry to the optimization.splitChunks.cacheGroups option like so:

optimization: {
  splitChunks: {
    cacheGroups: {
      yfiles: {
        test: /[\\/]yfiles[\\/]/,
        name: 'yfiles',
        chunks: 'all',
        priority: 10
      },
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

Integrating the yWorks Optimizer

The yWorks Optimizer comes with its own webpack plugin, so integrating it into your webpack build is easy:

const yWorksOptimizer = require('@yworks/optimizer/webpack-plugin')

module.exports = {
  // ... your webpack configuration
  plugins: [
    new yWorksOptimizer({
      logLevel: 'info'
    })
  ]
}

Excluding the yFiles Chunk from Minimization

Minimizing the yFiles library files is unnecessary because they already are minimized. Additionally, it can take a long time to do so. Even though webpack caches some of its results, which reduces build times for subsequent runs, some situations can benefit greatly from excluding the yFiles chunk from the minimization step, e.g., CI builds which start the build from a clean state).

To exclude the yFiles chunk from minimization, provide the minimizer option in the webpack configuration (this assumes that the yFiles chunk is named "yfiles" like in the Separate yFiles Chunk section):

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... your webpack configuration
  minimizer: [
    new TerserPlugin({
      exclude: /^yfiles\./
    })
  ]
}

Angular CLI

Relevant Demos: Angular CLI, Angular Component Node StyleStarter kit: Angular (GitHub)

If you want to use the yWorks Optimizer, we recommend using the @angular-builders/custom-webpack:browser builder that allows you to specify a custom webpack configuration for your Angular CLI build. Then, you can follow the instructions for webpack. See the Angular CLI demo for an example.

TypeScript

Relevant Demos: Basically all demos

The yFiles for HTML library comes with full TypeScript declaration files, so there is no special setup necessary.

There are different declaration files for TypeScript version 3.1+, 3.6+, and 4.3+. Using version selection with typesVersions, you automatically get the definition file that matches the TypeScript version of your project.

The declaration files for 3.1+ and 3.6+ provide exactly the same yFiles API and differ only due to changes in TypeScript itself. The declaration file for 4.3+ additionally comes with support for type conversion in property setters since this is only made possible by the feature separate write types on properties of TypeScript 4.3.

If you want to target es5 you need to account for the Iterable type that is utilized in the library. In this case, please configure the following libraries and settings in your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true,
    "lib": [
      "es6", "dom", "dom.iterable", "scripthost"
    ],
    // ...
  }
}

Vue.js

Relevant Demos: Vue, Vue Component Node Style, Vue Template Node StyleStarter kit: Vue.js (GitHub)

There are no special caveats that you need to look out for when you load yFiles as an NPM dependency.

To include the @yworks/optimizer, you can either add it as Rollup or webpack plugin:

Vue with Vite

For a Vite setup, add the yWorks Optimizer as Rollup plugin in vue.config.ts :

import optimizer from '@yworks/optimizer/rollup-plugin'
// ...
export default defineConfig(({ mode }) => {
  const plugins = [vue()]
  if (mode === 'production') {
    plugins.push(optimizer({ logLevel: 'info' }))
  }
  return {
    // ... other configurations
    plugins
  }
})

Vue CLI with webpack

If you use the Vue CLI, you can add the yWorks Optimizer by providing a vue.config.js and adding it as a webpack plugin:

const yWorksOptimizer = require('@yworks/optimizer/webpack-plugin')
// ...
module.exports = {
    // ... other configurations
    configureWebpack: {
        plugins:
          process.env.NODE_ENV !== 'production'
            ? []
            : [new YWorksOptimizer({ blacklist: ['render'] })]
    },
}

React

Relevant Demos: React, React Class Components, React Component Node Style, React JSX Component StyleStarter kit: React (GitHub)

There are no special caveats that you need to look out for when you load yFiles as an NPM dependency.

If you want to use the yWorks Optimizer, it depends on the tooling of your React application.

React with Vite

Add the optimizer as Rollup plugin to your vite.config.ts file:

import optimizer from '@yworks/optimizer/rollup-plugin'
// ...
export default defineConfig(({ mode }) => {
  const plugins = [react()]
  if (mode === 'production') {
    plugins.push(optimizer({ logLevel: 'info' }))
  }
  return {
    // ... other configurations
    plugins
  }
})

Create React App

For a webpack based Create React App setup, there are a couple of steps involved.

Run npm run eject to gain full control over the deployment of your application. See also npm run eject.
Install the dependencies that are necessary to build JSX files, i.e.,
```
npm install --save @babel/plugin-transform-react-jsx @babel/plugin-transform-react-jsx-source
```
Now, the application can be started and built with either npm run start or npm run build.
Install the @yworks/optimizer dependency with:
```
npm install --save-dev @yworks/optimizer
```

To include the @yworks/optimizer in the build process for production builds, prepend the following plugin in /config/webpack.config.js:

const yWorksOptimizer = require('@yworks/optimizer/webpack-plugin')
// ...
module.exports = {
    // ... other configurations
    plugins: [
      isEnvProduction && new yWorksOptimizer(),
      // ...
    ]
}

That’s it. When you now build for production with npm run build, the optimizer will do its job and the bundle will be obfuscated.

ES5 Compatibility Utility Scripts and Tools