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.worldM
    link
    fedilink
    English
    arrow-up
    0
    ·
    edit-2
    1 day 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

  • RudBo@lemmy.world
    link
    fedilink
    English
    arrow-up
    0
    ·
    2 days ago

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

    • BlackYT@lemmy.world
      link
      fedilink
      English
      arrow-up
      0
      ·
      2 days ago

      To solve it, instead of:

      item = value

      change to:

      item
       value
      

      for all the items in options.

      • Danno@lemmy.worldOP
        link
        fedilink
        English
        arrow-up
        0
        ·
        1 day ago

        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.

    • Danno@lemmy.worldOP
      link
      fedilink
      English
      arrow-up
      0
      ·
      edit-2
      2 days ago

      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.