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
  • VioneT@lemmy.worldMEnglish
    0·
    2 days ago

    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