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.

``js
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.

`sh
npm install --save-dev @swup/cli
`

$3

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

`bash


Bundle and transpile code for distribution

swup package:bundle

Bundle code in watch mode

swup package:dev
`

$3

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

`bash


Lint code

swup package:lint

Fix and format any lint errors

swup package:format
`

$3

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

`bash


Check package info


swup package:check
``