Plugin Ecosystem is coming

[tinchox5]

As many of you know, SnapDOM already has a plugin system with lifecycle hooks, but right now the plugins are all inline in demo files and there’s no clear path for anyone to build and share their own. I want to change that.

Here’s what I’m working on:

Standalone official plugins

I’m extracting all the existing plugins into proper standalone modules with subpath exports:

• picture-resolver resolves lazy-loaded <picture> placeholders before capture
• timestamp-overlay adds a timestamp label to captures
• filter applies CSS filter effects with presets (grayscale, sepia, vintage, dramatic…)
• replace-text find-and-replace text in the clone, supports regex
• color-tint tint text color across the capture or by selector
• ascii-export adds toAscii() for ASCII art output
• html-in-canvas experimental WICG drawElementImage rendering

Usage:

import { filter } from '@zumer/snapdom/plugins/filter';
import { timestampOverlay } from '@zumer/snapdom/plugins/timestamp-overlay';

const result = await snapdom(element, {
  plugins: [filter({ preset: 'vintage' }), timestampOverlay()]
});

Plugin spec and dev guide

I’m writing a full spec so anyone can build a plugin. It covers the factory pattern, every lifecycle hook with its context object, how defineExports works, naming conventions, and a copy-paste template to get started fast.

Community plugins

This is the part I’m most excited about. I want you to build plugins for SnapDOM.

Same model as Vite or Rollup plugins:

• Official plugins live in the main repo under plugins/
• You publish yours to npm as snapdom-plugin-*, your repo, your rules
• I’ll maintain a plugin directory on the site listing both official and community plugins

To get yours listed, just open a PR or an issue.

Plugin ideas I’d love to see

If you’re looking for something to build:

• Redact blur or black-bar sensitive content by selector
• Watermark text/image watermarks with positioning
• PDF Export export captures as PDF
• Dark Mode force dark/light theme on captures
• Crop crop to a region within the capture
• Responsive capture at multiple viewport sizes
• Diff visual diff between two captures
• Upload direct upload to S3, Cloudinary, Imgur

Feedback welcome

What plugins would you build or want to see? Any thoughts on the snapdom-plugin-* naming? Are there lifecycle stages missing from the hook system?

If you want to be among the first community plugin authors, now is a good time, the spec is almost done.

[tinchox5]

feat(plugin-template): add initial SnapDOM plugin template with example usage and options. See a4d2331

feat(docs): add contributing guidelines and plugin specification for SnapDOM plugins, including usage examples, lifecycle hooks, and best practices. 5243a34

[tinchox5]

Plugins are working my friends, glad to see who share the first here 🙌

[tinchox5]

#410