Demo Plugin for BetterDiscord v1.11.0

DemoPlugin.plugin.js

/**
 * @name Demo Plugin
 * @description Demonstrating some newly introduced APIs and how to use them.
 * @version 0.1.0
 * @author BetterDiscord
 */


const config = {
    changelog: [
        {
            title: "New Stuff",
            type: "added",
            items: [
                "Added more settings",
                "Added changelog"
            ]
        },
        {
            title: "Bugs Squashed",
            type: "fixed",
            items: [
                "React errors on reload"
            ]
        },
        {
            title: "Improvements",
            type: "improved",
            items: [
                "Improvements to the base plugin"
            ]
        },
        {
            title: "On-going",
            type: "progress",
            items: [
                "More modals and popouts being added",
                "More classes and modules being added"
            ]
        }
    ],
    settings: [
        {type: "switch", id: "grandOverride", name: "Panel Root Setting", note: "This could be any setting type", value: false},
        {
            type: "category",
            id: "basic",
            name: "Basic Settings",
            collapsible: true,
            shown: false,
            settings: [
                {type: "color", id: "color", name: "Basic Colorpicker", note: "Basic color picker with no fluff", value: "#ff0000", colors: null, inline: true},
                {
                    type: "dropdown",
                    id: "dropdown",
                    name: "Basic Dropdown",
                    note: "Basic dropdown with no fluff",
                    value: "arbitrary",
                    options: [
                        {label: "Test 1", value: 50},
                        {label: "Test 2", value: "arbitrary"},
                        {label: "Final Test", value: {label: "Test 1", value: 50}}
                    ]
                },
                {type: "file", id: "file", name: "Basic Filepicker", note: "Basic filepicker with no fluff"},
                {type: "keybind", id: "keybind", name: "Basic Keybind", note: "Basic keybind with no fluff", value: ["Control", "H"]},
                {type: "number", id: "number", name: "Basic Number", note: "Basic number input with no fluff", value: 50},
                {
                    type: "radio",
                    id: "radio",
                    name: "Basic Radio",
                    note: "Basic radio with no fluff",
                    value: "test",
                    options: [
                        {name: "First", value: 33},
                        {name: "Another", value: "test"},
                        {name: "Something", value: 66},
                        {name: "Last", value: "last"}
                    ]
                },
                {type: "slider", id: "slider", name: "Basic Slider", note: "Basic slider with no fluff", value: 30, min: 20, max: 50},
                {type: "switch", id: "switch", name: "Basic Switch", note: "Basic switch with no fluff", value: false},
                {type: "text", id: "text", name: "Basic Textbox", note: "Basic textbox with no fluff", value: "default value"},
            ]
        },
        {
            type: "category",
            id: "advanced",
            name: "Advanced Settings",
            collapsible: true,
            shown: false,
            settings: [
                {type: "color", id: "advanced-color", name: "Advanced Colorpicker", note: "Color picker with fluff", value: "#ff0000", defaultValue: "#3E82E5", inline: true},
                {
                    type: "dropdown",
                    id: "advanced-dropdown",
                    name: "Advanced Dropdown",
                    note: "Dropdown with transparent style",
                    style: "transparent",
                    value: "arbitrary",
                    options: [
                        {label: "Test 1", value: 50},
                        {label: "Test 2", value: "arbitrary"},
                        {label: "Final Test", value: {label: "Test 1", value: 50}}
                    ]
                },
                {type: "file", id: "advanced-file", name: "Advanced Filepicker", note: "Filepicker with multiple, accept, and clearable", multiple: true, clearable: true, accept: "image/*"},
                {type: "keybind", id: "advanced-keybind", name: "Advanced Keybind", note: "Keybind with max count and clearable", value: ["Control", "Shift", "K"], max: 5, clearable: true},
                {type: "number", id: "advanced-number", name: "Advanced Number", note: "Number input with step", value: 50, min: 10, max: 100, step: 5},
                {
                    type: "radio",
                    id: "advanced-radio",
                    name: "Advanced Radio",
                    note: "Radio with option descriptions and colors",
                    value: "test",
                    options: [
                        {name: "First", value: 33, description: "This is additional info", color: "#ff0000"},
                        {name: "Another", value: "test", color: "#00ff00"},
                        {name: "Something", value: 66, description: "It does not have to be used on every option", color: "#0000ff"},
                        {name: "Last", value: "last", color: "#ffffff"}
                    ]
                },
                {type: "slider", id: "advanced-slider", name: "Advanced Slider", note: "Slider with units, step, and markers", value: 48, min: 32, max: 128, units: "px", markers: [32, 48, 64, 96, 128], inline: false},
                {type: "text", id: "advanced-text", name: "Advanced Textbox", note: "Textbox with placeholder and max length", value: "value", placeholder: "Enter text...", maxLength: 6},
            ]
        },
        {
            type: "category",
            id: "disabled",
            name: "Disabled Settings",
            collapsible: true,
            shown: false,
            settings: []
        }
    ]
};

// Make disabled versions of every single other setting as the last category
config.settings[config.settings.length - 1].settings = [
    ...config.settings[config.settings.length - 3].settings.map(s => ({...s, disabled: true})),
    ...config.settings[config.settings.length - 2].settings.map(s => ({...s, disabled: true})),
];
 
module.exports = class DemoPlugin {
    constructor(meta) {
        this.meta = meta;
        this.api = new BdApi(this.meta.name);
    }

    start() {
        const savedVersion = this.api.Data.load("version");
        if (savedVersion !== this.meta.version) {
            this.api.UI.showChangelogModal({
                title: this.meta.name,
                subtitle: this.meta.version,
                blurb: "This is a bit of extra text",
                changes: config.changelog
            });
            this.api.Data.save("version", this.meta.version);
        }
    }

    stop() {
    }

    getSettingsPanel() {
        return BdApi.UI.buildSettingsPanel({
            settings: config.settings,
            onChange: (category, id, value) => console.log(category, id, value),
        });
    }
}