@wq2/ui

Warning

I broke like 2 things and don't maintain this anymore, since my one reason for making this (Vape Rewrite) has been moved off of using this project. The main reason is due to this not using a closed shadow root, which was the initial reason for this fork. I tried a lot to fix it, but every way kept garbage collecting the reference to the shadow root, causing it to not work since it's a closed shadow root. Please don't use this.

Common UI for userscripts, working in Violentmonkey as well as other userscript managers.

Dependencies

• @violentmonkey/dom

Usage

First, include dependencies:

// ...
// @require https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/ui@0.7
// ...

Then use it like so, all exports can be accessed under namespace VM:

VM.showToast('hello');
VM.showToast(VM.h('div', {}, 'hello, world'));

Toast

const toast = VM.showToast(VM.h('div', {}, 'hello'), {
  theme: 'dark', // or 'light'
  duration: 2000, // or 0 to manually close it
});

// Manually close it
toast.close();

Panel

const panel = VM.getPanel({
  content: VM.h('div', {}, 'This is a panel'),
  theme: 'light',
});
panel.wrapper.style.top = '100px';

// Show panel
panel.show();

// Hide panel
panel.hide();

// Allow panel to be moved by mouse dragging
panel.setMovable(true);

SolidJS

It is recommended to initialize a userscript project using generator-userscript and use solid-js.

import { render } from 'solid-js/web';

const panel = VM.getPanel({ theme: 'light' });
panel.wrapper.style.top = '100px';
render(() => <MyPanel />, panel.body);
panel.show();

JSX for @violentmonkey/dom

Not recommended as it is not compatible with solid-js integrated in generator-userscript.

Use with JSX and bundlers, for example:

// .babelrc.js
{
  plugins: [
    // JSX
    ['@babel/plugin-transform-react-jsx', {
      pragma: 'VM.h',
      pragmaFrag: 'VM.Fragment',
    }],
  ],
}

VM.showToast(<div>hello, world</div>);

API