Javascript

Custom javascript

Drupal javascript behaviors are working out of the box in Wingsuit. Put your custom javascript code in a pattern.behavior.js file inside your pattern.

Wingsuit will load the file automatically and call the attach function after component initialization.

Sample behavior file:
Drupal.behaviors.button = {
  attach(context, settings) {
    // Do some stuff
  },
};

Wingsuit supports ES6 and compiles (babel) every behavior file to a separate compiled behavior file. You can find the compiled files in dist/behaviors/*.behavior.js.

Vendor libraries

To embed a 3d party library:

  1. Add the 3d party library to your package.json. Run yarn add library.
  2. Create a javascript file under source/default/vendorjs/lib.vendor.js and @import the referenced library.

Sample:

import 'regenerator-runtime/runtime';
import 'alpinejs';

Wingsuit compiles each vendor file into a separate compiled vendor file, so you can easily embed them in your application. You can find your vendor file under dist/app-[type]/vendors/[your-library].js.

Check out the webpack asset preset for more details!

Read further
Images & Icons
Learn how to use images and icons in your patterns.
SVG
Learn how to use svg assets in your patterns.