React-Plug 0.2.0

Pre-Release

React-Plug 0.2.0 is here! This release brings hot-reloading, a new and improved custom message and parameter system, and implements some nih-plug features that were previously missing in React-Plug.

Hot-Reloading

You can now create a dev bundle of your plugin. This version of your plugin will continuously hot-reload its UI you change its source code. No more constant compiling and re-compiling just to iterate on your UI, yay! To bundle your plugin for dev mode, run this command:

cargo xtask dev [your-plugin]

The command will first bundle a development version of your plugin that loads its GUI from a local web server on your machine. Open the built plugin in your DAW and see your UI change as you edit it!

cargo xtask dev-server [your-plugin]

Messages

React-Plug communicates parameter updates and other information from the plugin to the GUI via an IPC message channel. Previously, you had to manage this message channel yourself. In React-Plug 0.2.0, the channel is instead an internal part of the editor, so you won’t have to manage it yourself.

For handling messages from the GUI inside your plugin code, you can now pass a closure to the editor’s with_message_handler function. The closure’s arguments are the inbound message, as well as a function for sending a plugin message to the GUI.

#[derive(Debug, Serialize, Deserialize, TS)]
#[ts(export, export_to = "../gui/src/bindings/GuiMessage.ts")]
enum GuiMessage {
    Ping,
    Foo(f32)
}

#[derive(Debug, Serialize, Deserialize, TS)]
#[ts(export, export_to = "../gui/src/bindings/PluginMessage.ts")]
enum PluginMessage {
    Pong,
    Oof(f32)
}

impl Plugin for MyPlugin {
    fn editor(&mut self, _: AsyncExecutor<Self>)
        -> Option<Box<dyn Editor>>
    {
        ReactPlugEditor::<PluginMessage, GuiMessage>::new(
                self.params.clone(),
                &EDITOR_DIR,
                (800, 600),
            )
            .with_message_handler(|gui_message, send| match gui_message {
                GuiMessage::Ping => {
                    let _ = send(PluginMessage::Pong);
                }
                GuiMessage::Foo(n) => {
                    let _ = send(PluginMessage::Oof(n / 2.0));
                }
            })
            .with_developer_mode(true)
            .into()
    }
}

In this example, we respond to a Ping message with a Pong. On the GUI side, the API for sending GUI messages and reacting to plugin messages hasn’t changed.

Parameters

React-Plug’s plugin parameter definition system now supports some more fields, as well as enum parameters.

Enum Parameters

You can now define EnumParams. They have a unique variants field, where you may define all possible variants. You can optionally assign them a value, which will be internally used to format their name.

use nih_plug::prelude::*;
use react_plug::prelude::*;

define_params! {
    MyPluginParams {
        wave_shape: EnumParam {
            name: "Wave Shape",
            default_value: Sine,
            variants: Waveform {
                Sine: "Sine Wave",
                Square: "Square Wave",
                Dirac
                WhiteNoise: "White Noise",
            }
        }
    }
}

In this example, the “Wave Shape” EnumParam can be one of the four variants. In the GUI and in plugin hosts, the variants will be named after the provided names. The Dirac variant will simply be named “Dirac.”

Reversed Ranges

Reversed ranges are now also supported. Define one by declaring it as an enum struct with some inner range.

use nih_plug::prelude::*;
use react_plug::prelude::*;

define_params! {
    MyPluginParams {
        threshold: FloatParam {
            name: "Threshold",
            default_value: util::db_to_gain(-3.0),
            range: FloatRange::Reversed (
                &FloatRange::Skewed {
                    min: util::db_to_gain(-40.0),
                    max: util::db_to_gain(6.0),
                    factor: FloatRange::gain_skew_factor(-40.0, 6.0),
                }
            )
        }
    }
}

Other features

• A custom default window size can now be provided.
• The NPM registry is no longer used for react-plug’s TS library code. It is instead included via macro. This means that your GUI’s version of react-plug-ts can’t get out of sync with react-plug.
• Internally, the editor’s param_value_changed function now handles parameter updates, instead of the parameters’ callback functions.

Bug fixes

• Fixed a rounding error in the TS formatters
• Added TS typing for events

Breaking changes

This pre-release introduces a lot of breaking changes. Listing all of them is out of the scope of early pre-release notes. Future pre-releases will not contain as many breaking changes.

Reference this Git diff for an example of how to migrate from React-Plug 0.1.0 to 0.2.0.

If you want to see a bare-bones example of a React-Plug 0.2.0 project, generate one.