Plugin template
This repo is used as a template for swup plugins. Steps to the publish your own swup plugin:
- Make a copy of this repo.
- Update the name in package.json. Please, follow format
swup-[plugin name]-plugin
. - Update the description, repository url and author in package.json.
- Write your plugin in
src/index.js
. Plugin must be in a form of class, must extend@swup/plugin
and should have a property name defined (package.json
name in a form PascalCase - swup-name-plugin -> SwupNamePlugin). - Update this documentation. Below is a documentation template where the SwupNamePlugin needs to be replaced with your plugin name from packages.json in PascalCase.
- Use
npm run build
to compile a standalone version of your plugin (dist folder) andnpm run compile
to transpile npm version of your plugin (lib folder). Both commands are run before publishing automatically. - Publish your plugin to npm with
npm publish
command. This assumes you have npm account and are logged in with your computers CLI.
Tips
- Checkout existing plugins before creating one.
- Checkout existing plugins before creating one.
- Swup instance is automatically assigned to the plugin instance and can be accessed under
this.swup
inmount
/unmount
methods. - If you feel like this should be an official swup plugin (under npm
@swup
organization) and the world could use a thing like this, contact me at gmarcuk@gmail.com.
Swup [plugin name] plugin
Instalation
This plugin can be installed with npm
npm install swup-[plugin name]-plugin
and included with import
import Swup[Name]Plugin from 'swup-[plugin name]-plugin';
or included from the dist folder
<script src="./dist/SwupNamePlugin.js"></script>
Usage
To run this plugin, include an instance in the swup options.
const swup = new Swup({
plugins: [new SwupNamePlugin()]
});