Understending window.Twitch.ext.configuration.set

[pagep]

Hi guys

We decided to update our extension which was written in a haste. And we want to have proper code.

But I struggle to understand window.Twitch.ext.configuration.set this function returns void. But obviously it has to do some network request to the Twitch BE to save the data. So is this function async or sync?

Extensions Reference

Because during our testing - when we run the following code quickly multiple times - it results in malformed config.

 const currentConfig = window.Twitch.ext.configuration.broadcaster
 const newConfig = { ...currentConfig, ...config };
 window.Twitch.ext.configuration.set("broadcaster", version, JSON.stringify(newConfig));

So we thought that solution is to write promise with onChanged but following code doesn’t work for us, any ideas? Or does anyone have link / example how they are using configuration set?

  const setConfig = (config: Record<string, any>) => {

     return new Promise<void>((resolve, reject) => {
       try{
         window.Twitch.ext.configuration.onChanged(() => {
           resolve();
         });

         const currentConfig = getConfig();
         const newConfig = { ...currentConfig, ...config };
         window.Twitch.ext.configuration.set("broadcaster", version, JSON.stringify(newConfig));

       } catch (e) {
         reject();
         window.Twitch.ext.rig.log("Error saving the new config");
       }
     });
  }

I guess I am just missing something.
Thanks a lot!

[BarryCarlyon]

onChanged can only run once per page load.
It is used to trigger the config to be loaded from Twitch into JS

If you do a set (via EBS call or JS called) onChanged is not called again

config set is not a promise. It’s a sync call to store the config into Twitch.
That config is not sent to running instances of an extension.

See also: https://github.com/BarryCarlyon/twitch_misc/tree/main/extensions/config_service
When I do a config set via an EBS/API call, I also push out the same config over pubsub so running instances of extension recv the new configuration.

So to test what you are doing.

• page loads
• wait for onAuthorised
• load config via onChanged
• hit a button to trigger a save event with the new config
• reload the page

If you are running the JS call to set multiple times very quickly then you will cause weirdness to occur. The API only has a 12 per minute rate limit iirc

So your HTML/JS needs to be something along the lines of, (some psudecode here)

window.Twitch.ext.onAuthorized(auth => {
    // the page has loaded and is ready
    loadConfig();
});

function loadConfig() {
    window.Twitch.ext.configuration.onChanged(() => {
        var broadcaster_config = window.Twitch.ext.configuration.broadcaster;
        if (broadcaster_config && broadcaster_config.content) {
            try{
                broadcaster_config.content = JSON.parse(broadcaster_config.content);
                // we have broadcaster config loaded and parsed it to JSON
            } catch (e) {
            }
        }
        buildConfigForm();
        enableConfigForm();
    });
}

function enableConfigForm() {
    mySaveButton remove disabled
    mySaveButton.addEventListener('click', () => {
        serialise form/collect config from form
        window.Twitch.ext.configuration.set("broadcaster", '1', JSON.strinfigy(theconfig));
    });
}

(Note that .set accepts a string, so it doesn’t have to be JSON in theory)

That in some JS and some pseudo code will do the trick

@pagep

But I struggle to understand window.Twitch.ext.configuration.set this function returns void. But obviously it has to do some network request to the Twitch BE to save the data. So is this function async or sync?

Sync.

It doesn’t return anything, you cannot catch a succeed of a fail from it. It is fire and forget.

a window.Twitch.ext.onError might catch something but might not (I don’t use set in the front end too much myself I prefer the EBS/api calls)

@pagep

So we thought that solution is to write promise with onChanged but following code doesn’t work for us, any ideas?

You did enable the config service in the developer console for this version of the extension?

It’s under “capabilities”

With it disabled, you won’t get errors to the set request (or API request). It just won’t load in the front end and the API is unpredicatble as the service is “disabled”

@pagep

Or does anyone have link / example how they are using configuration set?

I have samples for processing config from onChanged but not set it is JUST fire and forget (I don’t tend to use set)

My “debug all the things” Twitch Extension https://github.com/BarryCarlyon/twitch_extension_debug/blob/main/extension/panel/config_service.js has the config “parse” logic I tend to use.

TLDR

• It’s not a promise,
• you cannot catch success/fail with the config set calls persae but onError might report one.

It seems you tried to over engineer the config setting stuff but it doesn’t support it since it returns nothing.

EDIT

I had a spare two mintues to throw in a config tester into my TEST ALL THE THINGS

With https://github.com/BarryCarlyon/twitch_extension_debug/blob/main/extension/panel/config_service.js#L56 being the set from the form logic.

So if I do

And hit “Save Broadcaster Config”
Then the “running config” is still {"cat":"dog"} and will remain that till until I reload the page.

Unless, I use PubSub (or something else) to forward the same config to running instances.

after reloading the page

[pagep]

Thank you very much for the explanation. Now everything makes sense