c/perchance · by dannooppo@lemmy.world · 1y

Nasty little bug in 'remember-plugin'/'t2i-framework-plugin' on generator startup

Hi Perchance!

Trying to understand the inner workings of Perchance t2i-framework-plugin-v2 I cloned this plugin and added a few console.info() lines.

Especially in and around function updateInputVisibilities() (line 145+) to learn how userInputs[name] was set up.

Using my version of the t2i-framework plugin in a generator I saw in the console that on Generator pageload the function updateInputVisibilities() gets triggered by ___pageLoadHandler746291937() (which is to be expected, we need the elements set up), but also that ___selectElChangeEvent746291937() gets triggered for each <input>/<select>/<textarea> in the generated HTML.

In my case updateInputVisibilities() got triggered 21 times on Generator pageload instead of just once. The function gets triggered for each list/input used in the generator.

After some searching I found out that this is caused by the remember-plugin.

On Generator startup remember-plugin retrieves values from localStorage and updates the various input elements in the HTML, as to be expected. However, in doing so, it changes the element.value which in turn triggers the element.onchange event triggering ___selectElChangeEvent746291937(). While true, something has indeed changed, it is unwanted behaviour on pageload.

This little bug also unveiles that t2i-framework-plugin-v2 executes updateInputVisibilities() for each change in a single <select> updating all other selects as well.

I am still working my way into these two plugins, so I cannot exactly pinpoint what code needs to be changed. With just a few remembered inputs in localStorage it does little harm, but with large amounts of inputs, pageload time gets unnecessarily long.

My versions (for testing):

Be aware: when loading the generator for the first time with an empty localStorage nothing special will be noticed, however:

Change a few selects to fill localStorage
Clear the DevTools console to get rid of clutter
reload the generator => [Ctrl-F5]
Check the console info
Check if 'Danno Count' is >1
Filter console with 'trigger' to see the amount of ___selectElChangeEvent746291937() getting triggered

3 points · 6 comments · view on lemmy.world

6 Comments

ccufcc@lemmy.world · 2 pts · 1y (4 replies)

it's beyond my comprehension, but second this - some user inputs selection despite set remember = true, they still have dementia -

dannooppo@lemmy.world · 2 pts · 1y

remember = true is not related to the remember-plugin but part of t2i-framework-plugin-v2. Basically both plugins save the value of a select to localStorage when activated and it can happen that one of the plugins has updated localStorage while the other hasn't (just yet). Especially when you close a generator before image/text generation has finished localStorage can (or may) contain two different values of the same select causing your issue. Depending on how you created the generator AND the order values get retrieved from localStorage it may SEEM that your generator suffers from dementia. You can (probably) resolve this by using either one, just not both 'remember' methods. I am still on the learning track, so don't ask me how to solve your specific problem. I need to figure out a lot more before ever being any use in that respect...

Off the bat I'd say don't use remember = true when you're using the remember-plugin.

yamit@lemmy.world · 2 pts · 1y (2 replies)

To solve it, instead of:

item = value

change to:

item
 value

for all the items in options.

dannooppo@lemmy.world · 2 pts · 1y

Thanks for the input, but this is a Javascript coding issue inside the plugin(s), not directly related to Perchance syntax for creating generator lists.

ccufcc@lemmy.world · 1 pts · 1y

This one works well

VioneT@lemmy.world · 2 pts · 1y

updateInputVisibilities() is used to 'show' the inputs that have the visible() function which checks a condition in which should the element be visible. It is run every time on any inputs.

For example, you could have the 'select' only be visible if another select has a certain value e.g.:

genre
  type = select
  options
    fantasy = fantasy | fiction
    sci fi = sci fi | fiction
    biography = biography | non-fiction

fictionalSetting
  type = select
  visible() =>
    return input.genre.split('|')[1].trim() == "fiction"
  options
    dystopian = dystopian
    paradise = paradise

nonFictionalSetting
  type = select
  visible() =>
    return input.genre.split('|')[1].trim() == "non-fiction"
  options
    New York = new york
    Berlin = berlin

Where depending on the genre selected, you can have different inputs showing.

I would recommend not using the @inputs option of remember-plugin, since it will essentially mirror the remember = true of the t2i-framework, as you have said on your comment.

On page load, it would parse the document for any input, select, and textarea elements, and add the specific handlers to store their variables on input / on change, just like the t2i-framework, then dispatch the event for each individual input so if the page has any changes based on the inputs it would be applied, which triggers the updateInputVisibilities().

Using both would essentially double the items stored in the local storage, increasing page load times. So, if you want to use remember-plugin for inputs other than those made by the t2i-framework, I recommend using the variable method instead of the @inputs. Here's an example: https://perchance.org/1hozdxpbxc