Community plugins

Plugins that others have written are listed at https://gpuslider.com/docs/community/. Publishing one is publishing it to npm with the keyword gpuslider-plugin: a script finds it there every day and opens an issue on GitHub for it, and once it has been looked at, it is on the page. It is looked at for what it does on install, what it loads, and whether it does what it says; that takes a few days at most. What the page shows of it is what npm says, so its newest version.

Publish a plugin

A plugin is a function that takes its options and gives what plugins takes (see Plugins). As a package:

{
	"name": "gpuslider-plugin-confetti",
	"description": "Confetti when the slider comes to its last slide.",
	"keywords": [ "gpuslider-plugin", "gpuslider" ],
	"type": "module",
	"exports": "./index.js",
	"peerDependencies": { "gpuslider": "^1.0.0" },
	"homepage": "https://example.com/confetti",
	"repository": "github:you/gpuslider-plugin-confetti"
}

// index.js
export function confetti( { pieces = 80 } = {} ) {
	return ( slider ) => {
		const off = slider.on( 'settle', () => {
			if ( slider.index === slider.count() - 1 ) {
				// Throw the confetti.
			}
		} );
		return { name: 'confetti', destroy: off };
	};
}

Then npm publish, and wait for the issue about it on GitHub. What the list shows is the name, the description, the version, who published it, and links to its homepage, repository and npm: a homepage with a demo helps others choose. An effect is published the same way, with the keyword gpuslider-effect besides.

• gpuslider is a peer dependency, not a dependency: the page has one slider, not two.
• Named exports, and no side effects when imported, as the library's own: what is not used is not in the bundle.
• A name that begins with gpuslider-plugin-, or a scope of your own: @you/gpuslider-confetti.