Plugins

Writing a plugin for VisBug requires 2 things:

1. An array:
   a list of strings that when /typed invoke your plugin
2. A function:
   VisBug will invoke your function with selected DOM

Template/Starter:

export const commands = []

export default async function({selected, query}) {
  // selected is a nodeList containing the elements currently selected with VisBug
}

Step 1

Have an idea and write a function that does it. Here's the Barrel Roll plugin as an example:

// VisBug won't allow registering a command that's already taken
export const commands = [
  'barrel roll',
  'do a barrel roll',
]

export default async function() {
  // full access to the page dom: document.body, window, etc
  document.body.style.transformOrigin = 'center 50vh'
  
  await document.body.animate([
    { transform: 'rotateZ(0)' },
    { transform: 'rotateZ(1turn)' },
  ], { duration: 1500 }).finished

  document.body.style.transformOrigin = ''
}

Step 2:

Register your plugins commands and function

1. import your work

// plugins/_registry.js
import { commands as barrel_roll_commands, default as BarrelRollPlugin } from './barrel-roll'

2. register

...commandsToHash(barrel_roll_commands, BarrelRollPlugin),

Finalizing

test, debug, create a PR 💀🤘

Current plugins