Plugins

Writing a plugin is exporting an array of matching commands to invoke your exported function.

Template/Starter:

export const commands = []
export default async function(selected) {
  // selected is optional and represents the elements currently selected with VisBug
}

Example:

Barrel Roll

// 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 = ''
}

Register your plugins commands and function

1. import your commands and function

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