@swup/theme

Swup Base Theme

Base class for creating swup themes.

Creating a Theme

To create a new theme, use the official swup theme template. It comes with detailed instructions and the required tooling.

Usage

Import the base class and extend your theme from it.

import Theme from '@swup/theme';

export default class ThemeName extends Theme {
  name = 'ThemeName';
  mount() {}
  unmount() {}
}

Development

The official swup command-line interface has commands to help with bundling and linting themes.

npm install --save-dev @swup/cli

Bundling

Bundle the theme for production using microbundle, creating ESM and UMD builds.

# Bundle and transpile code for distribution
swup package:bundle

# Bundle code in watch mode
swup package:dev

Linting & formatting

Lint the theme code using prettier and swup's recommended rules.

# Lint code
swup package:lint

# Fix and format any lint errors
swup package:format

Package info

Check that the themes's package.json file contains the required information for microbundle: input, output, export map, amd name, etc.

# Check package info
swup package:check