Compatibility with swup 3

.github/workflows/npm-publish.yml

@@ -0,0 +1,21 @@
+# This workflow publishes a package to NPM
+
+name: Publish package
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/version-update.yml

@@ -0,0 +1,35 @@
+# This workflow bumps the package.json version and creates a PR
+
+name: Update package version
+
+on:
+  workflow_dispatch:
+    inputs:
+      segment:
+        description: 'Semver segment to update'
+        required: true
+        default: 'patch'
+        type: choice
+        options:
+        - minor
+        - patch
+
+jobs:
+  update-version:
+    name: Update package version
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: echo "Updating ${{ inputs.segment }} version"
+      - name: Update version
+        run: npm --no-git-tag-version version ${{ inputs.segment }}
+      - uses: peter-evans/create-pull-request@v4
+        with:
+          base: 'master'
+          branch: 'version/automated'
+          title: 'Update package version (automated)'
+          commit-message: 'Update package version'
+          body: 'Automated update to ${{ inputs.segment }} version'

.gitignore

@@ -13,5 +13,6 @@ wiki-wishlist
 *.sublime-workspace
 .editorconfig
 .idea
-lib
-/plugins
+/lib
+/dist
+/plugins

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+<!-- ## [Unreleased] -->
+
+## [2.0.0] - 2023-01
+
+- Allow plugins to specify swup version requirements
+- Switch to microbundle for bundling
+- Provide a simple CLI for plugins to bundle and lint files
+
+[Unreleased]: https://github.com/swup/plugin/compare/2.0.0...HEAD
+
+[2.0.0]: https://github.com/swup/plugin/releases/tag/2.0.0

README.md

@@ -0,0 +1,69 @@
+# Swup Base Plugin
+
+Base class for creating swup plugins.
+
+## Creating a Plugin
+
+To create a new plugin, use the official [swup plugin template](https://github.com/swup/plugin-template). It comes with detailed instructions and the required tooling.
+
+## Usage
+
+```js
+import Plugin from '@swup/plugin';
+
+export default class PluginName extends Plugin {
+  name = 'PluginName';
+  mount() {}
+  unmount() {}
+}
+```
+
+or alternatively with TS
+
+```ts
+import Plugin, { PluginType } from '@swup/plugin';
+
+export default class PluginName extends Plugin implements PluginType {
+  name = 'PluginName';
+  mount() {}
+  unmount() {}
+}
+```
+
+
+## Commands
+
+The base plugin provides a few simple command line tools to help with bundling and linting.
+
+### Bundling
+
+Bundle the plugin for production using [microbundle](https://github.com/developit/microbundle), creating ESM and UMD builds.
+
+```bash
+# Bundle and transpile plugin code
+swup-plugin bundle
+
+# Bundle plugin code in watch mode
+swup-plugin dev
+```
+
+### Linting & formatting
+
+Lint the plugin code using [prettier](https://prettier.io/) and swup's recommended rules.
+
+```bash
+# Lint plugin code
+swup-plugin lint
+
+# Fix and format any lint errors
+swup-plugin format
+```
+
+### Package info
+
+Check that the plugin's package.json file contains the required information for microbundle: input, output, export map, amd name, etc.
+
+```bash
+# Check plugin package info
+swup-plugin check
+```

bin/commands/build.js

@@ -0,0 +1,8 @@
+import { exec, echo } from '../lib/shell.js';
+
+export default async function build() {
+	echo('Bundling plugin with microbundle');
+	exec('microbundle -f modern,esm,cjs');
+	exec('microbundle -f umd --external none');
+	return true;
+};

bin/commands/check.js

@@ -0,0 +1,52 @@
+import { echo, error } from '../lib/shell.js';
+import { resolve } from '../lib/helpers.js';
+
+export default async function check() {
+	const pkg = await loadPluginPackageInfo();
+
+	echo(`Checking package info of ${pkg.name}`);
+
+	const { errors } = checkPluginPackageInfo(pkg);
+
+	if (errors.length) {
+		error(errors);
+		return false;
+	} else {
+		echo('package.json looks good!');
+		return true;
+	}
+};
+
+function checkPluginPackageInfo(pkg) {
+	const errors = [];
+
+	if (!pkg.amdName) {
+		errors.push('package.json missing `amdName` property');
+	}
+	if (pkg.type !== 'module') {
+		errors.push('package.json `type` property must be "module"');
+	}
+	if (!pkg.source) {
+		errors.push('package.json missing `source` property');
+	}
+	if (!pkg.main) {
+		errors.push('package.json missing `main` property');
+	}
+	if (!pkg.module) {
+		errors.push('package.json missing `module` property');
+	}
+	if (!pkg.unpkg) {
+		errors.push('package.json missing `unpkg` property');
+	}
+	if (!pkg.exports) {
+		errors.push('package.json missing `exports` property');
+	}
+
+	return { errors };
+}
+
+async function loadPluginPackageInfo() {
+	const importPath = resolve('package.json');
+	const { default: pkg } = await import(importPath, { assert: { type: 'json' } });
+	return pkg;
+}

bin/commands/dev.js

@@ -0,0 +1,7 @@
+import { exec, echo } from '../lib/shell.js';
+
+export default async function build() {
+	echo('Run plugin in dev mode');
+	exec('microbundle -w');
+	return true;
+};

bin/commands/format.js

@@ -0,0 +1,7 @@
+import { exec, echo } from '../lib/shell.js';
+
+export default async function format() {
+	echo('Formatting with prettier');
+	exec('prettier src/**/*.js --write');
+	return true;
+};

bin/commands/lint.js

@@ -0,0 +1,7 @@
+import { exec, echo } from '../lib/shell.js';
+
+export default async function lint() {
+	echo('Linting with prettier');
+	exec('prettier src/**/*.js --check');
+	return true;
+};

bin/lib/helpers.js

@@ -0,0 +1,12 @@
+import path from 'path';
+import fs from 'fs';
+
+const appDirectory = fs.realpathSync(process.cwd());
+
+export function resolve(relativePath = '') {
+	if (relativePath) {
+		return path.resolve(appDirectory, relativePath);
+	} else {
+		return appDirectory;
+	}
+}

bin/lib/shell.js

@@ -0,0 +1,21 @@
+import shell from 'shelljs';
+import live from 'shelljs-live';
+import chalk from 'chalk';
+
+export function exec(command) {
+	return live(command);
+	// return shell.exec(command);
+}
+
+export function echo(message) {
+	console.log(chalk.gray('[swup]'), message);
+}
+
+export function error(message) {
+	if (Array.isArray(message)) {
+		message.forEach(msg => error(msg));
+	} else {
+		console.log(chalk.red.bold(message));
+	}
+	shell.exit(1);
+}

bin/swup-plugin.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+import build from './commands/build.js';
+import check from './commands/check.js';
+import dev from './commands/dev.js';
+import lint from './commands/lint.js';
+import format from './commands/format.js';
+
+import { error } from './lib/shell.js';
+
+const commands = {
+	build: async () => (await check()) && (await build()),
+	dev: async () => (await check()) && (await dev()),
+	lint,
+	format,
+	check,
+};
+
+async function main() {
+	const args = process.argv.slice(2);
+
+	const command = args[0] || '';
+	if (!command) {
+		return error(`Missing command (available: ${Object.keys(commands).join(', ')}`);
+	}
+
+	const handler = commands[command];
+	if (!handler) {
+		return error(`Unknown command: ${args.join(' ')}`);
+	}
+
+	await handler(args);
+}
+
+main();