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

(function (document, Drupal, once) {

  Drupal.behaviors.develWizardSpellEntityType = {
    attach: function () {
      once('develWizardSpellEntityType', `${Drupal.develWizardSpellEntityType.wrapperSelector} input`)
        .forEach(
          /**
           * @param {HTMLInputElement} element
           */
          function (element) {
            element.addEventListener('input', Drupal.develWizardSpellEntityType.onInput);
            element.addEventListener('change', Drupal.develWizardSpellEntityType.onInput);
          },
        );
    },
  };

  Drupal.develWizardSpellEntityType = Drupal.develWizardSpellEntityType || {};

  Drupal.develWizardSpellEntityType.wrapperSelector = '.devel-wizard-spell-subform-devel-wizard-entity-type';

  /**
   * @param {InputEvent} event
   */
  Drupal.develWizardSpellEntityType.onInput = function (event) {
    const wrapperElement = event.currentTarget.closest(Drupal.develWizardSpellEntityType.wrapperSelector);

    // @todo DRY.
    // @todo More accurate selector.
    // Hopefully there is only one, and it is on the the top level.
    const baseName = wrapperElement
      .querySelector('input[name$="[goal]"]')
      .getAttribute('name')
      .replace(/\[goal]$/g, '');

    const moduleMachineNameElement = wrapperElement.querySelector(`input[name="${baseName}[module][machine_name]"]`);
    const moduleMachineName = moduleMachineNameElement.value || '<name>';

    const configEntityIdElement = wrapperElement.querySelector(`input[name="${baseName}[config][id]"]`);
    configEntityIdElement.setAttribute(
      'placeholder',
      `${moduleMachineName}_type`,
    );
    const configEntityId = configEntityIdElement.value || configEntityIdElement.getAttribute('placeholder');

    const contentEntityIdElement = wrapperElement.querySelector(`input[name="${baseName}[content][id]"]`);
    contentEntityIdElement.setAttribute(
      'placeholder',
      configEntityId.replace(/_[^_]+$/, ''),
    );
  };

})(document, Drupal, once);