devel_wizard-2.x-dev/js/spell/image_effect.js

(function (document, Drupal, once) {

  Drupal.behaviors.develWizardSpellImageEffect = {
    attach: function () {
      once('develWizardSpellModule', '.dws--image-effect *[name$="[module][machineName]"]')
        .forEach(
          /**
           * @param {HTMLInputElement} element
           */
          function (element) {
            element.addEventListener('input', Drupal.develWizardSpellImageEffect.onModuleInput);
            element.addEventListener('change', Drupal.develWizardSpellImageEffect.onModuleInput);
          },
        );
    },
  };

  Drupal.develWizardSpellImageEffect = Drupal.develWizardSpellImageEffect || {};

  /**
   * @param {InputEvent} event
   */
  Drupal.develWizardSpellImageEffect.onModuleInput = function (event) {
    const moduleMachineName = event.currentTarget.value;
    const wrapperElement = event.currentTarget.closest('.dws--image-effect');
    const imageEffectIdFieldPrefixElement = wrapperElement
      .querySelector('input[name$="[imageEffect][id]"]')
      .closest('.form-item')
      .querySelector('.form-item__prefix');

    imageEffectIdFieldPrefixElement.textContent = `${moduleMachineName}_`;
  };

})(document, Drupal, once);